add table of contents and #links.

svelte-ui/src/pages/FrontPage.svelte

@@ -80,7 +80,7 @@
       <h1>Upcoming Deadlines</h1>
     {/if}
     {#each sortedProjects as project (project.id)}
-      <ProjectEntry hideInactive project={project} />
+      <ProjectEntry linkProject={project != fakeProject} hideInactive project={project} />
     {/each}
     {#if fakeProject.tasks.length === 0 && !$fpProjectStore.loading && $fpProjectStore.projects.length === 0}
       <EmptyList icon="check" text="All good!" />

svelte-ui/src/pages/GroupPage.svelte

@@ -3,6 +3,7 @@
   import GroupEntry from "../components/GroupEntry.svelte";
   import type { ModalData } from "../stores/modal";
   import groupStore from "../stores/group";
+import TableOfContent from "../components/TableOfContent.svelte";
 
   const mdGroupAdd: ModalData = {name: "group.add"};
 
@@ -14,6 +15,7 @@
 </script>
 
 <div class="page">
+  <TableOfContent groups={$groupStore.groups} />
   {#each $groupStore.groups as group (group.id)}
     <GroupEntry showAllOptions group={group} />
   {/each}

svelte-ui/src/pages/ProjectPage.svelte

@@ -2,6 +2,7 @@
   import Boi from "../components/Boi.svelte";
   import Checkbox from "../components/Checkbox.svelte";
   import ProjectEntry from "../components/ProjectEntry.svelte";
+  import TableOfContent from "../components/TableOfContent.svelte";
   import type { ModalData } from "../stores/modal";
   import projectStore from "../stores/project";
 
@@ -30,6 +31,7 @@
   <div class="options">
     <Checkbox centered bind:checked={showInactive} label="Show completed tasks and projects." />
   </div>
+  <TableOfContent hideInactive={!showInactive} projects={$projectStore.projects} />
   {#each $projectStore.projects as project (project.id)}
     <ProjectEntry hideInactive={!showInactive} showAllOptions project={project} />
   {/each}