add project and requirement link to items outside of projects.

frontend/src/lib/components/contexts/ScopeContext.svelte

@@ -10,7 +10,7 @@
   };
 
   const fallback: ScopeContextData = {
-    scope: readable({} as Scope),
+    scope: readable({stats: []} as Scope),
     lastHistoryRange: writable(""),
     upsertStat: () => {},
     deleteStat: () => {},

frontend/src/lib/components/project/ItemSubSection.svelte

@@ -10,6 +10,7 @@
   import type { IconName } from "../layout/Icon.svelte";
   import Icon from "../layout/Icon.svelte";
   import { formatTime } from "$lib/utils/date";
+  import RequirementReference from "./RequirementReference.svelte";
 
   export let item: Item;
   export let event: "created" | "scheduled" | "acquired" | "none" = "none";
@@ -54,6 +55,9 @@
       <Option open={{name: "item.delete", item}} color="red"><Icon name="trash" /></Option>
     {/if}
   </OptionsRow>
+  {#if item.project != null}
+    <RequirementReference project={item.project} requirement={item.requirement} />
+  {/if}
   {#if !compact}
     <Markdown source={item.description} />
   {/if}

frontend/src/lib/components/project/RequirementReference.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" context="module">
+  export interface IDAndName {
+    id: number
+    name: string
+  }
+</script>
+
+<script lang="ts">
+  import { projectPrettyId, scopePrettyId } from "$lib/utils/prettyIds";
+  import { getScopeContext } from "../contexts/ScopeContext.svelte";
+
+  export let project: IDAndName
+  export let requirement: IDAndName
+
+  const {scope} = getScopeContext();
+
+  let projectLink: string
+  let requirementLink: string
+
+  $: {
+    projectLink = `/${scopePrettyId($scope)}/projects/${projectPrettyId(project)}`
+    requirementLink = `${projectLink}#${projectPrettyId(requirement)}`
+  }
+</script>
+
+<div class="reference">
+  <a href={projectLink}>{project.name}</a>
+  <span>&gt;</span>
+  <a href={requirementLink}>{requirement.name}</a>
+</div>
+
+<style lang="sass">
+  @import "../../css/colors"
+
+  div.reference
+    font-size: 0.8em
+
+    > span
+      color: $color-entry3
+    
+    > a
+      color: $color-entry5
+      text-decoration: none
+      line-height: 1em
+      transition: 250ms
+
+      &:hover
+        color: $color-entry8
+</style>

frontend/src/lib/components/project/RequirementSection.svelte

@@ -10,10 +10,12 @@
   import { STATUS_ICONS } from "../common/StatusIcon.svelte";
   import ItemEntry from "./ItemSubSection.svelte";
   import Icon from "../layout/Icon.svelte";
+  import { projectPrettyId } from "$lib/utils/prettyIds";
 
   export let requirement: Requirement;
 </script>
 
+<div id={projectPrettyId(requirement)} />
 <Section title={requirement.name} icon={STATUS_ICONS[requirement.status]} status={requirement.status}>
   <Progress alwaysSmooth titlePercentageOnly thin green status={requirement.status} count={requirement.totalAcquired} target={requirement.totalRequired} />
   <Progress alwaysSmooth titlePercentageOnly thinner gray count={requirement.totalPlanned} target={requirement.totalRequired} />