add table of contents and #links.

svelte-ui/src/components/ItemEntry.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { IconName } from "../external/icons";
+  import { onMount } from "svelte";
   import type { GroupResult } from "../models/group";
   import type { default as Item } from "../models/item";
   import type { ModalData } from "../stores/modal";
@@ -11,12 +11,20 @@
 
   let mdItemEdit: ModalData;
   let mdItemDelete: ModalData;
-
+  let linkHook: HTMLElement;
+  
+  onMount(() => {
+    if (window.location.hash === "#" + item.id) {
+      window.scrollTo({top: linkHook.getBoundingClientRect().top});
+    }
+  });
+  
   $: mdItemEdit = {name: "item.edit", item, group};
   $: mdItemDelete = {name: "item.delete", item, group};
 </script>
 
 <div class="item">
+  <div class="link-hook" id={item.id} bind:this={linkHook}></div>
   <div class="body">
     <div class="header">
       <div class="icon">
@@ -36,6 +44,11 @@
 </div>
 
 <style>
+  div.link-hook {
+    position: relative;
+    top: -2em;
+  }
+
   div.item {
     display: flex;
     flex-direction: row;