add table of contents and #links.

svelte-ui/src/components/GroupEntry.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import type { IconName } from "../external/icons";
   import type { GroupResult } from "../models/group";
   import type { ModalData } from "../stores/modal";
-  import DaysLeft from "./DaysLeft.svelte";
   import Icon from "./Icon.svelte";
-import ItemEntry from "./ItemEntry.svelte";
+  import ItemEntry from "./ItemEntry.svelte";
   import Option from "./Option.svelte";
   import OptionRow from "./OptionRow.svelte";
-  import TaskEntry from "./TaskEntry.svelte";
 
   export let group: GroupResult = null;
   export let showAllOptions: boolean = false;
@@ -15,7 +14,14 @@ import ItemEntry from "./ItemEntry.svelte";
   let iconName: IconName = "question";
   let mdItemAdd: ModalData;
   let mdGroupEdit: ModalData;
-  let mdGroupDelete: ModalData;
+  let mdGroupDelete: ModalData;  
+  let linkHook: HTMLElement;
+  
+  onMount(() => {
+    if (window.location.hash === "#" + group.id) {
+      window.scrollTo({top: linkHook.getBoundingClientRect().top});
+    }
+  });
 
   $: iconName = group.icon as IconName;
   $: mdItemAdd = {name:"item.add", group};
@@ -24,6 +30,7 @@ import ItemEntry from "./ItemEntry.svelte";
 </script>
 
 <div class="group">
+  <div class="link-hook" id={group.id} bind:this={linkHook}></div>
   <div class="icon"><Icon block name={iconName} /></div>
   <div class="body">
     <div class="header">
@@ -48,6 +55,11 @@ import ItemEntry from "./ItemEntry.svelte";
 </div>
 
 <style>
+  div.link-hook {
+    position: relative;
+    top: -2em;
+  }
+
   div.group {
     display: flex;
     flex-direction: row;