Refactoring: port doc generation to generate markdown directly without UIElements

src/UI/BigComponents/AboutMapComplete.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
   import Translations from "../i18n/Translations"
   import { Utils } from "../../Utils"
-  import Hotkeys from "../Base/Hotkeys"
   import Constants from "../../Models/Constants"
   import Tr from "../Base/Tr.svelte"
   import Add from "../../assets/svg/Add.svelte"
   import Github from "../../assets/svg/Github.svelte"
-  import DocumentChartBar from "@babeard/svelte-heroicons/outline/DocumentChartBar"
   import Mastodon from "../../assets/svg/Mastodon.svelte"
   import Liberapay from "../../assets/svg/Liberapay.svelte"
-  import ToSvelte from "../Base/ToSvelte.svelte"
   import { EyeIcon } from "@rgossiaux/svelte-heroicons/solid"
   import MapillaryLink from "./MapillaryLink.svelte"
   import OpenJosm from "../Base/OpenJosm.svelte"
@@ -18,6 +15,7 @@
   import Community from "../../assets/svg/Community.svelte"
   import Bug from "../../assets/svg/Bug.svelte"
   import ThemeViewState from "../../Models/ThemeViewState"
+  import DocumentChartBar from "@babeard/svelte-heroicons/outline/DocumentChartBar"
 
   export let state: ThemeViewState
 

src/UI/BigComponents/HotkeyTable.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+
+  import Hotkeys from "../Base/Hotkeys"
+  import { Translation } from "../i18n/Translation"
+  import { Utils } from "../../Utils"
+  import Translations from "../i18n/Translations"
+  import Tr from "../Base/Tr.svelte"
+  import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
+
+  let keys = Hotkeys._docs
+  const t = Translations.t.hotkeyDocumentation
+
+
+  let byKey = Hotkeys.prepareDocumentation($keys)
+  $: {
+    byKey = Hotkeys.prepareDocumentation($keys)
+  }
+</script>
+<AccordionSingle>
+
+  <div slot="header">
+    <Tr t={t.title} />
+  </div>
+  <Tr t={t.intro} />
+  <table>
+    <tr>
+      <th>
+    <Tr t={t.key}></Tr>
+    </th>
+    <th>
+      <Tr t={t.action} />
+    </th>
+    </tr>
+    {#each byKey as [key, doc, alsoTriggeredBy] }
+      <tr>
+        <td class="flex items-center justify-center">
+          {#if alsoTriggeredBy}
+            <div class="flex items-center justify-center gap-x-1">
+
+              <div class="literal-code w-fit h-fit">{key}</div>
+              <div class="literal-code w-fit h-fit">{alsoTriggeredBy}</div>
+
+            </div>
+
+          {:else}
+            <div class="literal-code w-fit h-fit flex items-center w-full">{key}</div>
+          {/if}
+        </td>
+        <td>
+      <Tr t={doc} />
+      </td>
+      </tr>
+    {/each}
+  </table>
+</AccordionSingle>

src/UI/BigComponents/SelectedElementView.svelte

@@ -22,7 +22,7 @@
     selectedElement.properties.id
   )
 
-  let isAddNew = tags.mapD(t => t.id.startsWith(LastClickFeatureSource.newPointElementId))
+  let isAddNew = tags.mapD(t => t?.id?.startsWith(LastClickFeatureSource.newPointElementId) ?? false)
 
   function getLayer(properties: Record<string, string>) {
     if (properties.id === "settings") {