From feb31cf212c91d92f85ffaa456fefd5a3acd06a6 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Mon, 20 May 2024 21:11:40 -0400
Subject: [PATCH 01/25] Render note highlighting on document

---
 src/lib/api/notes.test.ts                   |  4 ++
 src/lib/api/notes.ts                        |  4 ++
 src/lib/components/documents/Note.svelte    | 51 +++++++++++++++++++++
 src/lib/components/documents/PDF.svelte     | 12 ++++-
 src/lib/components/documents/PDFPage.svelte | 37 ++++++++++++++-
 5 files changed, 105 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/documents/Note.svelte

diff --git a/src/lib/api/notes.test.ts b/src/lib/api/notes.test.ts
index 9648b9a5f..d3bfff9d1 100644
--- a/src/lib/api/notes.test.ts
+++ b/src/lib/api/notes.test.ts
@@ -33,6 +33,10 @@ describe("note helper methods", () => {
     );
   });
 
+  test("noteHashUrl", () => {
+    expect(notes.noteHashUrl(n)).toStrictEqual("#document/p3/a557");
+  });
+
   test("width", () => {
     expect(notes.width(n)).toStrictEqual(n.x2 - n.x1);
   });
diff --git a/src/lib/api/notes.ts b/src/lib/api/notes.ts
index 91d6eeac2..2e96a48fb 100644
--- a/src/lib/api/notes.ts
+++ b/src/lib/api/notes.ts
@@ -71,6 +71,10 @@ export function noteUrl(document: Document, note: Note): URL {
   );
 }
 
+export function noteHashUrl(note: Note): string {
+  return `#document/p${note.page_number + 1}/a${note.id}`;
+}
+
 /** Width of a note, relative to the document */
 export function width(note: Note): number {
   return note.x2 - note.x1;
diff --git a/src/lib/components/documents/Note.svelte b/src/lib/components/documents/Note.svelte
new file mode 100644
index 000000000..faea3334f
--- /dev/null
+++ b/src/lib/components/documents/Note.svelte
@@ -0,0 +1,51 @@
+<!--
+  @component
+  A single note, either overlaid on a document or on its own.
+  It has two states, focused and normal.
+
+
+-->
+
+<script lang="ts">
+  import type { Note } from "$lib/api/types";
+
+  import { noteHashUrl, width, height } from "$lib/api/notes";
+
+  export let note: Note;
+  export let focused = false;
+</script>
+
+{#if focused}
+  <div class="note"></div>
+{:else}
+  <a
+    href={noteHashUrl(note)}
+    class="note {note.access}"
+    title={note.title}
+    style:top="{note.y1 * 100}%"
+    style:left="{note.x1 * 100}%"
+    style:width="{width(note) * 100}%"
+    style:height="{height(note) * 100}%"
+  >
+    {note.title}
+  </a>
+{/if}
+
+<style>
+  a.note {
+    color: transparent;
+    position: absolute;
+    border: 2px solid var(--note-public);
+    background-color: var(--note-public);
+    opacity: 0.33;
+    pointer-events: all;
+  }
+
+  .note.private {
+    border-color: var(--note-private);
+  }
+
+  .note.org {
+    border-color: var(--note-org);
+  }
+</style>
diff --git a/src/lib/components/documents/PDF.svelte b/src/lib/components/documents/PDF.svelte
index 809346a2c..37331b25b 100644
--- a/src/lib/components/documents/PDF.svelte
+++ b/src/lib/components/documents/PDF.svelte
@@ -33,6 +33,15 @@
 
   $: sizes = pageSizes(document.page_spec);
 
+  // index notes by page
+  $: notes = document.notes.reduce((m, note) => {
+    if (!m[note.page_number]) {
+      m[note.page_number] = [];
+    }
+    m[note.page_number].push(note);
+    return m;
+  }, {});
+
   let progress = {
     loaded: 0,
     total: 0,
@@ -56,7 +65,8 @@
 
 <div class="pages">
   {#each sizes as [width, height], n}
-    <PdfPage page_number={n + 1} {pdf} {scale} {width} {height} />
+    {@const page_number = n + 1}
+    <PdfPage {page_number} {pdf} {scale} {width} {height} notes={notes[n]} />
   {/each}
 </div>
 
diff --git a/src/lib/components/documents/PDFPage.svelte b/src/lib/components/documents/PDFPage.svelte
index e99a63bcb..98595e989 100644
--- a/src/lib/components/documents/PDFPage.svelte
+++ b/src/lib/components/documents/PDFPage.svelte
@@ -8,18 +8,23 @@ Selectable text can be rendered in one of two ways:
 - Passed in as a server-fetched JSON object
 -->
 <script lang="ts">
-  import type { TextPosition } from "$lib/api/types";
+  import type { TextPosition, Note as NoteType } from "$lib/api/types";
 
   import * as pdfjs from "pdfjs-dist/build/pdf.mjs";
 
+  import Note from "./Note.svelte";
+  import NoteTab from "./NoteTab.svelte";
   import Page from "./Page.svelte";
 
+  import { noteHashUrl } from "$lib/api/notes";
+
   export let page_number: number; // 1-indexed
   export let pdf; // Promise<PDFDocumentProxy>
   export let scale: number | "width" | "height";
   export let text: TextPosition[] = [];
   export let width: number;
   export let height: number;
+  export let notes: NoteType[] = [];
 
   let canvas: HTMLCanvasElement;
   let container: HTMLElement;
@@ -189,6 +194,20 @@ Selectable text can be rendered in one of two ways:
         <!-- pdfjs.renderTextLayer will fill this in -->
       </div>
     {/if}
+    <div class="notes">
+      {#each notes as note}
+        <a
+          class="note"
+          href={noteHashUrl(note)}
+          title={note.title}
+          style:top="{note.y1 * 100}%"
+        >
+          <NoteTab access={note.access} />
+        </a>
+
+        <Note {note} />
+      {/each}
+    </div>
   </div>
 </Page>
 
@@ -216,7 +235,6 @@ Selectable text can be rendered in one of two ways:
     top: 0;
     bottom: 0;
     width: 100%;
-    opacity: 0.5;
   }
 
   .word {
@@ -258,6 +276,21 @@ Selectable text can be rendered in one of two ways:
     width: 100%;
   }
 
+  .notes {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  .note {
+    position: absolute;
+    pointer-events: all;
+    left: -3rem;
+    transform: translateY(calc(-1.75rem / 3));
+  }
+
   /* pdfjs creates this */
   :global(.hiddenCanvasElement) {
     display: none;

From 660369578cd5db0681f470b157848e2920bacba5 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Tue, 21 May 2024 16:12:43 -0400
Subject: [PATCH 02/25] Note structure

---
 src/lib/api/documents.test.ts                 |   3 +
 src/lib/api/documents.ts                      |   5 +-
 src/lib/api/notes.test.ts                     |   6 +
 src/lib/api/notes.ts                          |  19 +++
 src/lib/components/common/Action.svelte       |   4 +-
 .../common/stories/Action.stories.svelte      |   5 +
 src/lib/components/documents/Note.svelte      | 112 ++++++++++++++++--
 src/lib/components/documents/PDFPage.svelte   |  31 ++---
 .../documents/stories/Note.stories.svelte     |  24 ++++
 src/lib/utils/tests/scroll.test.ts            |   4 +-
 .../documents/[id]-[slug]/+layout.svelte      |  12 +-
 src/routes/documents/[id]-[slug]/+page.svelte |   1 +
 12 files changed, 189 insertions(+), 37 deletions(-)
 create mode 100644 src/lib/components/documents/stories/Note.stories.svelte

diff --git a/src/lib/api/documents.test.ts b/src/lib/api/documents.test.ts
index 41cc944a4..ffa3a0ff8 100644
--- a/src/lib/api/documents.test.ts
+++ b/src/lib/api/documents.test.ts
@@ -291,6 +291,9 @@ describe("document helper methods", () => {
 
     // invalid hash returns page 1
     expect(documents.pageFromHash("#nopage")).toStrictEqual(1);
+
+    // match a note hash
+    expect(documents.pageFromHash("#document/p2/a2000002")).toStrictEqual(2);
   });
 
   test("pageUrl", ({ document }) => {
diff --git a/src/lib/api/documents.ts b/src/lib/api/documents.ts
index bda07bf9b..4b42cf080 100644
--- a/src/lib/api/documents.ts
+++ b/src/lib/api/documents.ts
@@ -293,12 +293,13 @@ export function pageHashUrl(page: number): string {
 }
 
 /**
- * The opposite of pageHashUrl, extracting a page number from a URL hash
+ * The opposite of pageHashUrl, extracting a page number from a URL hash.
+ * Note that this will also match note hash URLs, which use the same prefix.
  *
  * @param hash URL hash
  */
 export function pageFromHash(hash: string): number {
-  const re = /^#document\/p(\d+)$/;
+  const re = /^#document\/p(\d+)/; // match pages and notes
   const match = re.exec(hash);
 
   if (!match) return 1;
diff --git a/src/lib/api/notes.test.ts b/src/lib/api/notes.test.ts
index d3bfff9d1..705c9c040 100644
--- a/src/lib/api/notes.test.ts
+++ b/src/lib/api/notes.test.ts
@@ -37,6 +37,12 @@ describe("note helper methods", () => {
     expect(notes.noteHashUrl(n)).toStrictEqual("#document/p3/a557");
   });
 
+  test("noteFromHash", () => {
+    const hash = notes.noteHashUrl(n);
+
+    expect(notes.noteFromHash(hash)).toStrictEqual(n.id);
+  });
+
   test("width", () => {
     expect(notes.width(n)).toStrictEqual(n.x2 - n.x1);
   });
diff --git a/src/lib/api/notes.ts b/src/lib/api/notes.ts
index 2e96a48fb..6a2f87ff0 100644
--- a/src/lib/api/notes.ts
+++ b/src/lib/api/notes.ts
@@ -71,10 +71,29 @@ export function noteUrl(document: Document, note: Note): URL {
   );
 }
 
+/**
+ * Generate the hash URL for a note, without the document URL
+ * @param note
+ * @returns hash
+ */
 export function noteHashUrl(note: Note): string {
   return `#document/p${note.page_number + 1}/a${note.id}`;
 }
 
+/**
+ * Opposite of noteHashUrl, returning a note ID.
+ * To get the page number, use pageFromHash
+ * @param hash
+ */
+export function noteFromHash(hash: string): number {
+  const re = /^#document\/p(\d+)\/a(\d+)$/;
+  const match = re.exec(hash);
+
+  if (!match) return null;
+
+  return +match[2] || null;
+}
+
 /** Width of a note, relative to the document */
 export function width(note: Note): number {
   return note.x2 - note.x1;
diff --git a/src/lib/components/common/Action.svelte b/src/lib/components/common/Action.svelte
index 6dd7bb41d..6b0783790 100644
--- a/src/lib/components/common/Action.svelte
+++ b/src/lib/components/common/Action.svelte
@@ -26,8 +26,8 @@
     border-radius: 0.5rem;
 
     background: transparent;
-    color: var(--primary, --blue-3, #4294f0);
-    fill: var(--primary, --blue-3, #4294f0);
+    color: var(--color, var(--primary, --blue-3, #4294f0));
+    fill: var(--fill, var(--primary, --blue-3, #4294f0));
 
     font-size: var(--font-xs, 0.75rem);
     font-weight: var(--font-bold, 700);
diff --git a/src/lib/components/common/stories/Action.stories.svelte b/src/lib/components/common/stories/Action.stories.svelte
index f5e8919c3..107c0d2a8 100644
--- a/src/lib/components/common/stories/Action.stories.svelte
+++ b/src/lib/components/common/stories/Action.stories.svelte
@@ -7,6 +7,7 @@
     title: "Components / Common / Action",
     component: Action,
     parameters: { layout: "centered" },
+    tags: ["autodocs"],
   };
 </script>
 
@@ -17,3 +18,7 @@
 <Story name="Text and Icon">
   <Action icon={Pencil16}>Edit</Action>
 </Story>
+
+<Story name="Custom colors">
+  <Action --fill="red" --color="green" icon={Pencil16}>Edit</Action>
+</Story>
diff --git a/src/lib/components/documents/Note.svelte b/src/lib/components/documents/Note.svelte
index faea3334f..12ed83840 100644
--- a/src/lib/components/documents/Note.svelte
+++ b/src/lib/components/documents/Note.svelte
@@ -2,24 +2,58 @@
   @component
   A single note, either overlaid on a document or on its own.
   It has two states, focused and normal.
-
-
 -->
-
 <script lang="ts">
   import type { Note } from "$lib/api/types";
 
+  import { _ } from "svelte-i18n";
+  import { Pencil16, Trash16 } from "svelte-octicons";
+  import Action from "../common/Action.svelte";
+  import SignedIn from "../common/SignedIn.svelte";
+
   import { noteHashUrl, width, height } from "$lib/api/notes";
+  import { pageHashUrl } from "$lib/api/documents";
 
   export let note: Note;
   export let focused = false;
+
+  $: id = noteHashUrl(note).replace("#", "");
+  $: href = noteHashUrl(note);
+  $: page_number = note.page_number + 1; // note pages are 0-indexed
 </script>
 
 {#if focused}
-  <div class="note"></div>
+  <div {id} class="note focused {note.access}">
+    <header>
+      <h3>{note.title}</h3>
+      <div class="actions">
+        <SignedIn>
+          <Action icon={Pencil16}>Edit</Action>
+          <Action --color="var(--red)" --fill="var(--red)" icon={Trash16}
+            >Delete</Action
+          >
+        </SignedIn>
+      </div>
+    </header>
+    <div class="excerpt">
+      <h4 {id}>
+        <a href={pageHashUrl(page_number)}>
+          {$_("documents.pageAbbrev")}
+          {page_number}
+        </a>
+      </h4>
+
+      <div class="highlight"></div>
+    </div>
+    <div class="content">
+      {note.content}
+    </div>
+    <footer></footer>
+  </div>
 {:else}
   <a
-    href={noteHashUrl(note)}
+    {id}
+    {href}
     class="note {note.access}"
     title={note.title}
     style:top="{note.y1 * 100}%"
@@ -32,20 +66,78 @@
 {/if}
 
 <style>
+  /* overlay mode */
   a.note {
+    border-radius: 0.25rem;
     color: transparent;
     position: absolute;
-    border: 2px solid var(--note-public);
-    background-color: var(--note-public);
-    opacity: 0.33;
+    opacity: 0.5;
     pointer-events: all;
+    mix-blend-mode: multiply;
+  }
+
+  a.note.public {
+    background-color: var(--note-public);
   }
 
-  .note.private {
+  a.note.private {
+    background-color: var(--note-private);
     border-color: var(--note-private);
   }
 
-  .note.org {
+  a.note.organization {
+    background-color: var(--note-org);
     border-color: var(--note-org);
   }
+
+  /* focused mode */
+  .focused {
+    display: flex;
+    width: 38.0625rem;
+    padding: var(--font-xs, 0.75rem) var(--font-md, 1rem);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--font-xs, 0.75rem);
+  }
+
+  .focused header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  .actions {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--font-md, 1rem);
+  }
+
+  .excerpt {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+    align-self: stretch;
+  }
+
+  .highlight {
+    height: 4.25rem;
+    align-self: stretch;
+    border-radius: 0.5rem;
+    border: 1px solid var(--gray-2, #d8dee2);
+    background: var(--gray-1, #f5f6f7);
+  }
+
+  h4,
+  h4 a {
+    color: var(--gray-4, #5c717c);
+    text-decoration: none;
+    font-weight: var(--font-regular);
+  }
+
+  h4 a:hover {
+    text-decoration: underline;
+  }
 </style>
diff --git a/src/lib/components/documents/PDFPage.svelte b/src/lib/components/documents/PDFPage.svelte
index 98595e989..c2da03689 100644
--- a/src/lib/components/documents/PDFPage.svelte
+++ b/src/lib/components/documents/PDFPage.svelte
@@ -194,20 +194,22 @@ Selectable text can be rendered in one of two ways:
         <!-- pdfjs.renderTextLayer will fill this in -->
       </div>
     {/if}
-    <div class="notes">
-      {#each notes as note}
-        <a
-          class="note"
-          href={noteHashUrl(note)}
-          title={note.title}
-          style:top="{note.y1 * 100}%"
-        >
-          <NoteTab access={note.access} />
-        </a>
-
-        <Note {note} />
-      {/each}
-    </div>
+    {#if notes}
+      <div class="notes">
+        {#each notes as note}
+          <a
+            class="note"
+            href={noteHashUrl(note)}
+            title={note.title}
+            style:top="{note.y1 * 100}%"
+          >
+            <NoteTab access={note.access} />
+          </a>
+
+          <Note {note} />
+        {/each}
+      </div>
+    {/if}
   </div>
 </Page>
 
@@ -288,7 +290,6 @@ Selectable text can be rendered in one of two ways:
     position: absolute;
     pointer-events: all;
     left: -3rem;
-    transform: translateY(calc(-1.75rem / 3));
   }
 
   /* pdfjs creates this */
diff --git a/src/lib/components/documents/stories/Note.stories.svelte b/src/lib/components/documents/stories/Note.stories.svelte
new file mode 100644
index 000000000..8114a61a0
--- /dev/null
+++ b/src/lib/components/documents/stories/Note.stories.svelte
@@ -0,0 +1,24 @@
+<script lang="ts" context="module">
+  import type { Note as NoteType } from "$lib/api/types";
+
+  import { Story } from "@storybook/addon-svelte-csf";
+  import Note from "../Note.svelte";
+
+  import document from "$lib/api/fixtures/documents/document-expanded.json";
+
+  const notes = document.notes as NoteType[];
+
+  export const meta = {
+    title: "Components / Documents / Note",
+    component: Note,
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Story name="small">
+  <Note focused note={notes[0]} />
+</Story>
+
+<Story name="bigger">
+  <Note focused note={notes[1]} />
+</Story>
diff --git a/src/lib/utils/tests/scroll.test.ts b/src/lib/utils/tests/scroll.test.ts
index b59068618..b57ec15a0 100644
--- a/src/lib/utils/tests/scroll.test.ts
+++ b/src/lib/utils/tests/scroll.test.ts
@@ -22,9 +22,7 @@ describe("scroll helpers", () => {
   });
 
   test("scrollToPage", () => {
-    const scrollIntoView = vi.fn().mockImplementation(function () {
-      console.log(this);
-    });
+    const scrollIntoView = vi.fn();
     const getElementById = vi
       .spyOn(document, "getElementById")
       .mockImplementation(
diff --git a/src/routes/documents/[id]-[slug]/+layout.svelte b/src/routes/documents/[id]-[slug]/+layout.svelte
index 82f0f3430..80abfb03b 100644
--- a/src/routes/documents/[id]-[slug]/+layout.svelte
+++ b/src/routes/documents/[id]-[slug]/+layout.svelte
@@ -21,9 +21,8 @@
   import Projects from "./sidebar/Projects.svelte";
   import Sections from "./sidebar/Sections.svelte";
 
-  import { embedUrl } from "@/api/embed";
-  import { pageImageUrl } from "@/api/viewer";
-  import { canonicalUrl } from "@/lib/api/documents";
+  import { embedUrl } from "$lib/api/embed";
+  import { canonicalUrl, pageImageUrl } from "@/lib/api/documents";
 
   export let data;
 
@@ -48,13 +47,16 @@
   <link
     rel="alternate"
     type="application/json+oembed"
-    href={embedUrl(document.canonical_url)}
+    href={embedUrl(document.canonical_url).href}
     title={document.title}
   />
   {#if document?.description?.trim().length > 0}
     <meta property="og:description" content={document.description} />
   {/if}
-  <meta property="og:image" content={pageImageUrl(document, 0, 700)} />
+  <meta
+    property="og:image"
+    content={pageImageUrl(document, 0, "normal").href}
+  />
 </svelte:head>
 
 <MainLayout>
diff --git a/src/routes/documents/[id]-[slug]/+page.svelte b/src/routes/documents/[id]-[slug]/+page.svelte
index 53bf6361a..966c19123 100644
--- a/src/routes/documents/[id]-[slug]/+page.svelte
+++ b/src/routes/documents/[id]-[slug]/+page.svelte
@@ -46,6 +46,7 @@
 
   // pagination store, available via context
   const currentPage: Writable<number> = writable(1);
+  let activeNote;
 
   setContext("currentPage", currentPage);
 

From f1cbda66c115be136c58a4077fc5a2194dc425a7 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Tue, 21 May 2024 17:07:12 -0400
Subject: [PATCH 03/25] Everything but the excerpt

---
 src/lib/api/documents.ts                      |   2 +-
 .../fixtures/documents/document-expanded.json | 180 ++++++++++++++++--
 src/lib/components/documents/Note.svelte      | 116 ++++++++++-
 .../documents/stories/Note.stories.svelte     |   6 +-
 4 files changed, 279 insertions(+), 25 deletions(-)

diff --git a/src/lib/api/documents.ts b/src/lib/api/documents.ts
index 4b42cf080..268bf2681 100644
--- a/src/lib/api/documents.ts
+++ b/src/lib/api/documents.ts
@@ -70,7 +70,7 @@ export async function get(
     "projects",
     "revisions",
     "sections",
-    "notes",
+    "notes.user",
   ];
   endpoint.searchParams.set("expand", expand.join(","));
 
diff --git a/src/lib/api/fixtures/documents/document-expanded.json b/src/lib/api/fixtures/documents/document-expanded.json
index 9b51b69a0..758eb2dcd 100644
--- a/src/lib/api/fixtures/documents/document-expanded.json
+++ b/src/lib/api/fixtures/documents/document-expanded.json
@@ -74,7 +74,17 @@
   "notes": [
     {
       "id": 551,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 0,
       "access": "public",
@@ -90,7 +100,17 @@
     },
     {
       "id": 549,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 0,
       "access": "public",
@@ -106,7 +126,17 @@
     },
     {
       "id": 550,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 0,
       "access": "public",
@@ -122,7 +152,17 @@
     },
     {
       "id": 552,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 0,
       "access": "public",
@@ -138,7 +178,17 @@
     },
     {
       "id": 554,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 1,
       "access": "public",
@@ -154,7 +204,17 @@
     },
     {
       "id": 553,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 1,
       "access": "public",
@@ -170,7 +230,17 @@
     },
     {
       "id": 556,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 2,
       "access": "public",
@@ -186,7 +256,17 @@
     },
     {
       "id": 555,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 2,
       "access": "public",
@@ -202,7 +282,17 @@
     },
     {
       "id": 557,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 2,
       "access": "public",
@@ -218,7 +308,17 @@
     },
     {
       "id": 558,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 2,
       "access": "public",
@@ -234,7 +334,17 @@
     },
     {
       "id": 560,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 4,
       "access": "public",
@@ -250,7 +360,17 @@
     },
     {
       "id": 559,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 4,
       "access": "public",
@@ -266,7 +386,17 @@
     },
     {
       "id": 562,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 5,
       "access": "public",
@@ -282,7 +412,17 @@
     },
     {
       "id": 561,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 5,
       "access": "public",
@@ -298,7 +438,17 @@
     },
     {
       "id": 563,
-      "user": 126,
+      "user": {
+        "id": 126,
+        "avatar_url": "",
+        "name": "Chris Amico",
+        "organization": 14187,
+        "organizations": [14187],
+        "admin_organizations": [14187],
+        "username": "ChrisAmico_lSozDZNW",
+        "uuid": "caea06a2-ee1c-43e6-865a-a09078522bf1",
+        "verified_journalist": true
+      },
       "organization": 60,
       "page_number": 6,
       "access": "public",
diff --git a/src/lib/components/documents/Note.svelte b/src/lib/components/documents/Note.svelte
index 12ed83840..d4ef56aac 100644
--- a/src/lib/components/documents/Note.svelte
+++ b/src/lib/components/documents/Note.svelte
@@ -4,22 +4,56 @@
   It has two states, focused and normal.
 -->
 <script lang="ts">
+  import type { User } from "@/api/types/orgAndUser";
   import type { Note } from "$lib/api/types";
 
+  import DOMPurify from "isomorphic-dompurify";
   import { _ } from "svelte-i18n";
-  import { Pencil16, Trash16 } from "svelte-octicons";
+  import {
+    Globe16,
+    Lock16,
+    Pencil16,
+    People16,
+    Trash16,
+  } from "svelte-octicons";
   import Action from "../common/Action.svelte";
-  import SignedIn from "../common/SignedIn.svelte";
 
   import { noteHashUrl, width, height } from "$lib/api/notes";
   import { pageHashUrl } from "$lib/api/documents";
+  import { not } from "ajv/dist/compile/codegen";
 
   export let note: Note;
   export let focused = false;
 
+  const access = {
+    private: {
+      value: $_("access.private.value"),
+      title: $_("access.private.title"),
+      icon: Lock16,
+    },
+    organization: {
+      value: $_("access.organization.value"),
+      title: $_("access.organization.title"),
+      icon: People16,
+    },
+    public: {
+      value: $_("access.public.value"),
+      title: $_("access.public.title"),
+      icon: Globe16,
+    },
+  };
+
   $: id = noteHashUrl(note).replace("#", "");
   $: href = noteHashUrl(note);
   $: page_number = note.page_number + 1; // note pages are 0-indexed
+  $: user = typeof note.user === "object" ? (note.user as User) : null;
+
+  function clean(html: string) {
+    return DOMPurify.sanitize(html, {
+      USE_PROFILES: { html: true },
+      ALLOWED_TAGS: ["a", "strong", "em", "b", "i"],
+    });
+  }
 </script>
 
 {#if focused}
@@ -27,12 +61,12 @@
     <header>
       <h3>{note.title}</h3>
       <div class="actions">
-        <SignedIn>
+        {#if note.edit_access}
           <Action icon={Pencil16}>Edit</Action>
           <Action --color="var(--red)" --fill="var(--red)" icon={Trash16}
             >Delete</Action
           >
-        </SignedIn>
+        {/if}
       </div>
     </header>
     <div class="excerpt">
@@ -46,9 +80,32 @@
       <div class="highlight"></div>
     </div>
     <div class="content">
-      {note.content}
+      <p>{@html clean(note.content)}</p>
     </div>
-    <footer></footer>
+    <footer>
+      {#if note.edit_access}
+        <label class="access">
+          <svelte:component this={access[note.access].icon} />
+          <span class="sr-only">{$_("access.access")}</span>
+          <select name="access" value={note.access}>
+            {#each Object.values(access) as opt}
+              <option value={opt.value}>{opt.title}</option>
+            {/each}
+          </select>
+        </label>
+      {:else}
+        <span class="access {note.access}">
+          <svelte:component this={access[note.access].icon} />
+          {$_(`access.${access[note.access].value}.title`)}
+        </span>
+      {/if}
+
+      {#if user}
+        <p class="author">
+          {$_("annotation.by", { values: { name: user.name } })}
+        </p>
+      {/if}
+    </footer>
   </div>
 {:else}
   <a
@@ -140,4 +197,51 @@
   h4 a:hover {
     text-decoration: underline;
   }
+
+  footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  footer p {
+    color: var(--gray-4, #5c717c);
+    font-size: var(--font-s);
+  }
+
+  label.access {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  label.access select {
+    border: none;
+    font-family: var(--font-sans);
+    font-size: var(--font-s);
+  }
+
+  span.access {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: var(--font-s);
+  }
+
+  /*   
+  span.access.public {
+    background-color: var(--note-public);
+  }
+
+  span.access.organization {
+    color: var(--note-org);
+    fill: var(--note-org);
+  }
+
+  span.access.private {
+    color: var(--note-private);
+    fill: var(--note-private);
+  }
+ */
 </style>
diff --git a/src/lib/components/documents/stories/Note.stories.svelte b/src/lib/components/documents/stories/Note.stories.svelte
index 8114a61a0..fdd042091 100644
--- a/src/lib/components/documents/stories/Note.stories.svelte
+++ b/src/lib/components/documents/stories/Note.stories.svelte
@@ -15,10 +15,10 @@
   };
 </script>
 
-<Story name="small">
+<Story name="default">
   <Note focused note={notes[0]} />
 </Story>
 
-<Story name="bigger">
-  <Note focused note={notes[1]} />
+<Story name="editable">
+  <Note focused note={{ ...notes[1], edit_access: true }} />
 </Story>

From 5e2b8a0f6382d208016130dcf3e07b282ed0e399 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Wed, 22 May 2024 15:26:14 -0400
Subject: [PATCH 04/25] Positioning and opening/closing notes

---
 src/lib/components/documents/Note.svelte      | 50 +++++++++++++++----
 src/lib/components/documents/PDF.svelte       |  1 +
 src/lib/components/documents/PDFPage.svelte   | 45 ++++++++++++++++-
 .../documents/stories/Note.stories.svelte     | 16 ++++++
 src/routes/+layout.svelte                     |  1 +
 src/routes/documents/[id]-[slug]/+page.svelte | 42 ++++++++++------
 6 files changed, 131 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/documents/Note.svelte b/src/lib/components/documents/Note.svelte
index d4ef56aac..1b3435346 100644
--- a/src/lib/components/documents/Note.svelte
+++ b/src/lib/components/documents/Note.svelte
@@ -4,10 +4,13 @@
   It has two states, focused and normal.
 -->
 <script lang="ts">
+  import type { Writable } from "svelte/store";
   import type { User } from "@/api/types/orgAndUser";
-  import type { Note } from "$lib/api/types";
+  import type { Note, ViewerMode } from "$lib/api/types";
 
   import DOMPurify from "isomorphic-dompurify";
+  import { getContext } from "svelte";
+
   import { _ } from "svelte-i18n";
   import {
     Globe16,
@@ -20,11 +23,13 @@
 
   import { noteHashUrl, width, height } from "$lib/api/notes";
   import { pageHashUrl } from "$lib/api/documents";
-  import { not } from "ajv/dist/compile/codegen";
 
   export let note: Note;
   export let focused = false;
 
+  const ALLOWED_TAGS = ["a", "strong", "em", "b", "i"];
+  const ALLOWED_ATTR = ["href"];
+
   const access = {
     private: {
       value: $_("access.private.value"),
@@ -43,6 +48,8 @@
     },
   };
 
+  const mode: Writable<ViewerMode> = getContext("mode");
+
   $: id = noteHashUrl(note).replace("#", "");
   $: href = noteHashUrl(note);
   $: page_number = note.page_number + 1; // note pages are 0-indexed
@@ -51,20 +58,30 @@
   function clean(html: string) {
     return DOMPurify.sanitize(html, {
       USE_PROFILES: { html: true },
-      ALLOWED_TAGS: ["a", "strong", "em", "b", "i"],
+      ALLOWED_TAGS,
+      ALLOWED_ATTR,
     });
   }
 </script>
 
 {#if focused}
-  <div {id} class="note focused {note.access}">
+  <div
+    {id}
+    class="note focused {note.access} {$mode || 'notes'}"
+    style:--x1={note.x1}
+    style:--x2={note.x2}
+    style:--y1={note.y1}
+    style:--y2={note.y2}
+    style:--width={width(note)}
+    style:--height={height(note)}
+  >
     <header>
       <h3>{note.title}</h3>
       <div class="actions">
         {#if note.edit_access}
-          <Action icon={Pencil16}>Edit</Action>
+          <Action icon={Pencil16}>{$_("dialog.edit")}</Action>
           <Action --color="var(--red)" --fill="var(--red)" icon={Trash16}
-            >Delete</Action
+            >{$_("dialog.delete")}</Action
           >
         {/if}
       </div>
@@ -109,7 +126,7 @@
   </div>
 {:else}
   <a
-    {id}
+    data-sveltekit-replacestate
     {href}
     class="note {note.access}"
     title={note.title}
@@ -155,6 +172,21 @@
     flex-direction: column;
     align-items: flex-start;
     gap: var(--font-xs, 0.75rem);
+    pointer-events: all;
+
+    border-radius: 0.5rem;
+    border: 1px solid var(--gray-2, #d8dee2);
+    background: var(--white, #fff);
+
+    /* shadow-2 */
+    box-shadow: 0px 2px 8px 2px var(--shadow, rgba(30, 48, 56, 0.15));
+  }
+
+  /* overlay */
+  .focused.document {
+    position: absolute;
+    top: calc(var(--y1) * 100%);
+    left: calc(var(--x1) * 100%);
   }
 
   .focused header {
@@ -229,10 +261,11 @@
     font-size: var(--font-s);
   }
 
-  /*   
+  /* yellow doesn't give enough contrast
   span.access.public {
     background-color: var(--note-public);
   }
+  */
 
   span.access.organization {
     color: var(--note-org);
@@ -243,5 +276,4 @@
     color: var(--note-private);
     fill: var(--note-private);
   }
- */
 </style>
diff --git a/src/lib/components/documents/PDF.svelte b/src/lib/components/documents/PDF.svelte
index 37331b25b..d6d1d652e 100644
--- a/src/lib/components/documents/PDF.svelte
+++ b/src/lib/components/documents/PDF.svelte
@@ -75,6 +75,7 @@
     display: flex;
     flex-direction: column;
     margin: 0 auto;
+    padding-left: 3rem;
     gap: 3rem;
     width: 100%;
     overflow-x: auto;
diff --git a/src/lib/components/documents/PDFPage.svelte b/src/lib/components/documents/PDFPage.svelte
index c2da03689..738fbb573 100644
--- a/src/lib/components/documents/PDFPage.svelte
+++ b/src/lib/components/documents/PDFPage.svelte
@@ -10,7 +10,12 @@ Selectable text can be rendered in one of two ways:
 <script lang="ts">
   import type { TextPosition, Note as NoteType } from "$lib/api/types";
 
+  import { pushState } from "$app/navigation";
+
   import * as pdfjs from "pdfjs-dist/build/pdf.mjs";
+  import { getContext } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { XCircleFill16 } from "svelte-octicons";
 
   import Note from "./Note.svelte";
   import NoteTab from "./NoteTab.svelte";
@@ -26,6 +31,8 @@ Selectable text can be rendered in one of two ways:
   export let height: number;
   export let notes: NoteType[] = [];
 
+  const activeNote: Writable<NoteType> = getContext("activeNote");
+
   let canvas: HTMLCanvasElement;
   let container: HTMLElement;
   let textContainer: HTMLElement;
@@ -152,6 +159,11 @@ Selectable text can be rendered in one of two ways:
       });
     }
   }
+
+  function closeNote() {
+    $activeNote = null;
+    pushState(window.location.pathname, {});
+  }
 </script>
 
 <svelte:window on:resize={onResize} />
@@ -204,9 +216,14 @@ Selectable text can be rendered in one of two ways:
             style:top="{note.y1 * 100}%"
           >
             <NoteTab access={note.access} />
+            {#if $activeNote}
+              <button class="close" on:click|preventDefault={closeNote}>
+                <XCircleFill16 />
+              </button>
+            {/if}
           </a>
 
-          <Note {note} />
+          <Note {note} focused={note === $activeNote} />
         {/each}
       </div>
     {/if}
@@ -284,6 +301,13 @@ Selectable text can be rendered in one of two ways:
     bottom: 0;
     width: 100%;
     pointer-events: none;
+
+    /* make all child elements position relative to this container */
+    /* transform: rotate(0deg); */
+  }
+
+  .notes :global(*) {
+    pointer-events: all;
   }
 
   .note {
@@ -292,6 +316,25 @@ Selectable text can be rendered in one of two ways:
     left: -3rem;
   }
 
+  .note button {
+    border: none;
+    padding: 0;
+    background: none;
+    cursor: pointer;
+
+    position: absolute;
+    margin: auto 0;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+
+    display: flex;
+    padding-left: 0.5rem;
+    justify-content: left;
+    align-items: center;
+  }
+
   /* pdfjs creates this */
   :global(.hiddenCanvasElement) {
     display: none;
diff --git a/src/lib/components/documents/stories/Note.stories.svelte b/src/lib/components/documents/stories/Note.stories.svelte
index fdd042091..8bc91fd82 100644
--- a/src/lib/components/documents/stories/Note.stories.svelte
+++ b/src/lib/components/documents/stories/Note.stories.svelte
@@ -8,6 +8,10 @@
 
   const notes = document.notes as NoteType[];
 
+  const html = `A chance for the Prime Minister and his Deputy to portray themselves as the "<b>action men</b>" of British politics.  
+  Within a month-and-a-half, <a href="https://en.wikipedia.org/wiki/George_Osborne">George Osborne</a>, the country's new 38 year-old Chancellor of the Exchequor (i.e. the country's Finance Minister) 
+  will present a budget to Parliament that calls for emergency actions to reduce Britain's forecast $280 billion deficit.`;
+
   export const meta = {
     title: "Components / Documents / Note",
     component: Note,
@@ -22,3 +26,15 @@
 <Story name="editable">
   <Note focused note={{ ...notes[1], edit_access: true }} />
 </Story>
+
+<Story name="private access">
+  <Note focused note={{ ...notes[1], access: "private" }} />
+</Story>
+
+<Story name="collaborators access">
+  <Note focused note={{ ...notes[1], access: "organization" }} />
+</Story>
+
+<Story name="note with HTML">
+  <Note focused note={{ ...notes[2], content: html }} />
+</Story>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 02758e22c..4e56f1da3 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -17,6 +17,7 @@
   // update context so other components can access and update
   setContext("me", me);
   setContext("org", org);
+  setContext("embed", data.embed);
 </script>
 
 <slot />
diff --git a/src/routes/documents/[id]-[slug]/+page.svelte b/src/routes/documents/[id]-[slug]/+page.svelte
index 966c19123..05a79b97d 100644
--- a/src/routes/documents/[id]-[slug]/+page.svelte
+++ b/src/routes/documents/[id]-[slug]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Sizes, ViewerMode } from "@/lib/api/types.js";
+  import type { Note, Sizes, ViewerMode } from "@/lib/api/types.js";
 
   import { afterNavigate, goto, replaceState } from "$app/navigation";
   import { page } from "$app/stores";
@@ -26,6 +26,7 @@
   // config and utils
   import { IMAGE_WIDTHS_MAP } from "@/config/config.js";
   import { pageHashUrl, pageFromHash } from "$lib/api/documents";
+  import { noteFromHash } from "$lib/api/notes";
   import { scrollToPage } from "$lib/utils/scroll";
 
   export let data;
@@ -44,17 +45,20 @@
     notes: NotesIcon,
   };
 
-  // pagination store, available via context
+  // stores we need deeper in the component tree, available via context
   const currentPage: Writable<number> = writable(1);
-  let activeNote;
+  const activeNote: Writable<Note> = writable(null);
+  const mode: Writable<ViewerMode> = writable(data.mode);
 
   setContext("currentPage", currentPage);
+  setContext("activeNote", activeNote);
+  setContext("mode", mode);
 
   $: document = data.document;
-  $: mode = data.mode;
+  $: $mode = data.mode;
   $: text = data.text;
-  $: zoom = getDefaultZoom(mode);
-  $: zoomLevels = getZoomLevels(mode);
+  $: zoom = getDefaultZoom($mode);
+  $: zoomLevels = getZoomLevels($mode);
 
   // lifecycle
   afterNavigate(() => {
@@ -65,6 +69,11 @@
     if ($currentPage > 1) {
       scrollToPage($currentPage);
     }
+
+    const noteId = noteFromHash(hash);
+    if (noteId) {
+      $activeNote = document.notes.find((note) => note.id === noteId);
+    }
   });
 
   function setMode(e) {
@@ -103,6 +112,11 @@
     const { hash } = new URL(e.newURL);
     $currentPage = pageFromHash(hash);
     scrollToPage($currentPage);
+
+    const noteId = noteFromHash(hash);
+    if (noteId) {
+      $activeNote = document.notes.find((note) => note.id === noteId);
+    }
   }
 
   /**
@@ -184,7 +198,7 @@
 
 <svelte:window on:hashchange={onHashChange} />
 <svelte:head>
-  {#if mode === "document"}
+  {#if $mode === "document"}
     <link
       rel="preload"
       href={data.asset_url.href}
@@ -200,23 +214,23 @@
     <Search slot="center" />
   </PageToolbar>
 
-  {#if mode === "document"}
+  {#if $mode === "document"}
     <PDF {document} scale={zoomToScale(zoom)} asset_url={data.asset_url} />
   {/if}
 
-  {#if mode === "text"}
+  {#if $mode === "text"}
     <Text {text} zoom={+zoom || 1} total={document.page_count} />
   {/if}
 
-  {#if mode === "thumbnails"}
+  {#if $mode === "thumbnails"}
     <ThumbnailGrid {document} size={zoomToSize(zoom)} />
   {/if}
 
   <PageToolbar slot="footer">
     <label class="mode" slot="left">
       <span class="sr-only">Mode</span>
-      <svelte:component this={icons[mode]} />
-      <select name="mode" value={mode} on:change={setMode}>
+      <svelte:component this={icons[$mode]} />
+      <select name="mode" value={$mode} on:change={setMode}>
         {#each modes.entries() as [value, name]}
           <option {value}>{name}</option>
         {/each}
@@ -224,7 +238,7 @@
     </label>
 
     <svelte:fragment slot="center">
-      {#if mode !== "thumbnails"}
+      {#if $mode !== "thumbnails"}
         <Paginator
           goToNav
           on:goTo={(e) => gotoPage(e.detail)}
@@ -239,7 +253,7 @@
     </svelte:fragment>
 
     <label class="zoom" slot="right">
-      {#if mode === "thumbnails"}
+      {#if $mode === "thumbnails"}
         {$_("zoom.size")}
       {:else}
         {$_("zoom.zoom")}

From f7ebaf7a23b97ab212c442ab09bdef9e9b550452 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Wed, 22 May 2024 15:40:58 -0400
Subject: [PATCH 05/25] quick notes mode

---
 src/lib/components/documents/Notes.svelte     | 21 +++++++++++++++++++
 src/routes/documents/[id]-[slug]/+page.svelte |  5 +++++
 2 files changed, 26 insertions(+)
 create mode 100644 src/lib/components/documents/Notes.svelte

diff --git a/src/lib/components/documents/Notes.svelte b/src/lib/components/documents/Notes.svelte
new file mode 100644
index 000000000..8a838b482
--- /dev/null
+++ b/src/lib/components/documents/Notes.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Note as NoteType } from "$lib/api/types";
+  import Note from "./Note.svelte";
+
+  export let notes: NoteType[];
+</script>
+
+<div class="pages">
+  {#each notes as note}
+    <Note {note} focused />
+  {/each}
+</div>
+
+<style>
+  .pages {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    gap: 3rem;
+  }
+</style>
diff --git a/src/routes/documents/[id]-[slug]/+page.svelte b/src/routes/documents/[id]-[slug]/+page.svelte
index 05a79b97d..55f66813b 100644
--- a/src/routes/documents/[id]-[slug]/+page.svelte
+++ b/src/routes/documents/[id]-[slug]/+page.svelte
@@ -22,6 +22,7 @@
   import Search from "$lib/components/forms/Search.svelte";
   import Text from "$lib/components/documents/Text.svelte";
   import ThumbnailGrid from "$lib/components/documents/ThumbnailGrid.svelte";
+  import Notes from "$lib/components/documents/Notes.svelte";
 
   // config and utils
   import { IMAGE_WIDTHS_MAP } from "@/config/config.js";
@@ -226,6 +227,10 @@
     <ThumbnailGrid {document} size={zoomToSize(zoom)} />
   {/if}
 
+  {#if $mode === "notes"}
+    <Notes notes={document.notes} />
+  {/if}
+
   <PageToolbar slot="footer">
     <label class="mode" slot="left">
       <span class="sr-only">Mode</span>

From 3973d05eb8801810edfed4e286bbf4ba6e4b5804 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 23 May 2024 14:34:06 -0400
Subject: [PATCH 06/25] Notes & Sections block

---
 src/langs/json/en.json                        |  6 ++
 .../documents/[id]-[slug]/+layout.svelte      |  2 +-
 src/routes/documents/[id]-[slug]/+page.svelte |  2 +
 .../[id]-[slug]/sidebar/Actions.svelte        |  2 +-
 .../[id]-[slug]/sidebar/Sections.svelte       | 85 +++++++++++++++++--
 5 files changed, 86 insertions(+), 11 deletions(-)

diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 1611e768e..177cada58 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -841,6 +841,12 @@
     "projects": {
       "title": "Projects",
       "pinned": "Pinned projects will appear here"
+    },
+    "toc": {
+      "notes": "Notes",
+      "pageAbbrev": "p.",
+      "sections": "Sections",
+      "title": "Notes & Sections"
     }
   },
   "viewer": {
diff --git a/src/routes/documents/[id]-[slug]/+layout.svelte b/src/routes/documents/[id]-[slug]/+layout.svelte
index 80abfb03b..302b1fd43 100644
--- a/src/routes/documents/[id]-[slug]/+layout.svelte
+++ b/src/routes/documents/[id]-[slug]/+layout.svelte
@@ -63,7 +63,7 @@
   <svelte:fragment slot="navigation">
     <DocumentMetadata {document} />
 
-    <Sections sections={document.sections} />
+    <Sections {document} sections={document.sections} notes={document.notes} />
 
     <Data {document} />
 
diff --git a/src/routes/documents/[id]-[slug]/+page.svelte b/src/routes/documents/[id]-[slug]/+page.svelte
index 55f66813b..2531e5df2 100644
--- a/src/routes/documents/[id]-[slug]/+page.svelte
+++ b/src/routes/documents/[id]-[slug]/+page.svelte
@@ -83,6 +83,8 @@
 
     u.searchParams.set("mode", mode);
 
+    // reset hash, keeping page number
+    u.hash = "";
     if ($currentPage > 1) {
       u.hash = pageHashUrl($currentPage);
     }
diff --git a/src/routes/documents/[id]-[slug]/sidebar/Actions.svelte b/src/routes/documents/[id]-[slug]/sidebar/Actions.svelte
index 0e7ca5b59..7aa4e1e90 100644
--- a/src/routes/documents/[id]-[slug]/sidebar/Actions.svelte
+++ b/src/routes/documents/[id]-[slug]/sidebar/Actions.svelte
@@ -54,7 +54,7 @@
     </SidebarItem>
   {/if}
 
-  <SidebarItem href={pdf} download>
+  <SidebarItem href={pdf} download target="_blank">
     <Download16 />
     {$_("sidebar.download")}
   </SidebarItem>
diff --git a/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte b/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte
index 138c2908e..41bc041b4 100644
--- a/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte
+++ b/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte
@@ -1,28 +1,95 @@
 <script lang="ts">
-  import type { Section } from "$lib/api/types";
+  import type { Document, Note, Section } from "$lib/api/types";
 
+  import { _ } from "svelte-i18n";
   import { ListOrdered16, ListOrdered24 } from "svelte-octicons";
 
   import Empty from "@/lib/components/common/Empty.svelte";
   import SidebarGroup from "@/lib/components/sidebar/SidebarGroup.svelte";
   import SidebarItem from "@/lib/components/sidebar/SidebarItem.svelte";
 
-  export let sections: Section[];
+  import { pageUrl } from "$lib/api/documents";
+  import { noteUrl } from "$lib/api/notes";
+
+  export let document: Document;
+  export let notes: Note[] = [];
+  export let sections: Section[] = [];
+
+  $: toc = group(sections, notes);
+  $: empty = notes.length + sections.length === 0;
+
+  function group(sections: Section[], notes: Note[]) {
+    let ungrouped: Note[] = [...notes];
+
+    const grouped = sections
+      .reverse()
+      .map((section) => {
+        const group = {
+          section,
+          notes: notes.filter((n) => n.page_number >= section.page_number),
+        };
+
+        ungrouped = ungrouped.filter(
+          (n) => n.page_number < section.page_number,
+        );
+
+        return group;
+      })
+      .reverse();
+
+    return { ungrouped, grouped };
+  }
 </script>
 
 <SidebarGroup>
   <SidebarItem slot="title">
     <ListOrdered16 />
-    Sections
+    {$_("sidebar.toc.title")}
   </SidebarItem>
 
-  {#each sections as section}
-    <SidebarItem small>
-      {section.title}
-    </SidebarItem>
-  {:else}
+  <ol>
+    {#each toc.ungrouped as note}
+      <li>
+        <SidebarItem href={noteUrl(document, note).href} small>
+          {note.title}
+          <span class="page_number">
+            {$_("sidebar.toc.pageAbbrev")}
+            {note.page_number + 1}</span
+          >
+        </SidebarItem>
+      </li>
+    {/each}
+  </ol>
+
+  <ol>
+    {#each toc.grouped as { section, notes }}
+      <li>
+        <SidebarItem href={pageUrl(document, section.page_number).href}>
+          {section.title}
+        </SidebarItem>
+        <ol class="notes">
+          {#each notes as note}
+            <SidebarItem small>{note.title}</SidebarItem>
+          {/each}
+        </ol>
+      </li>
+    {/each}
+  </ol>
+
+  {#if empty}
     <Empty icon={ListOrdered24}>
       <p>Sections organize your document with a table of contents</p>
     </Empty>
-  {/each}
+  {/if}
 </SidebarGroup>
+
+<style>
+  ol {
+    list-style: none;
+    padding: 0;
+  }
+  span.page_number {
+    color: var(--gray-4);
+    font-size: var(--font-s);
+  }
+</style>

From 34c659dd03b2096fd618048d3ef12afa17b76c45 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 23 May 2024 17:11:05 -0400
Subject: [PATCH 07/25] Render note excerpt using a page image

---
 src/lib/components/documents/Note.svelte      | 112 +++++++++++++++---
 .../documents/stories/Note.stories.svelte     |   5 +
 .../documents/[id]-[slug]/+layout.svelte      |  10 +-
 3 files changed, 107 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/documents/Note.svelte b/src/lib/components/documents/Note.svelte
index 1b3435346..1fdc485b8 100644
--- a/src/lib/components/documents/Note.svelte
+++ b/src/lib/components/documents/Note.svelte
@@ -2,15 +2,17 @@
   @component
   A single note, either overlaid on a document or on its own.
   It has two states, focused and normal.
+
+  It can use *either* a loaded PDF or a document image to render
+  a document excerpt.
 -->
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import type { User } from "@/api/types/orgAndUser";
-  import type { Note, ViewerMode } from "$lib/api/types";
+  import type { Document, Note, Sizes, ViewerMode } from "$lib/api/types";
 
   import DOMPurify from "isomorphic-dompurify";
-  import { getContext } from "svelte";
-
+  import { getContext, onMount } from "svelte";
   import { _ } from "svelte-i18n";
   import {
     Globe16,
@@ -22,13 +24,17 @@
   import Action from "../common/Action.svelte";
 
   import { noteHashUrl, width, height } from "$lib/api/notes";
-  import { pageHashUrl } from "$lib/api/documents";
+  import { pageImageUrl } from "$lib/api/documents";
+  import { getPrivateAsset } from "$lib/utils/api";
 
   export let note: Note;
   export let focused = false;
+  export let pdf = null; // PDFDocumentProxy
 
   const ALLOWED_TAGS = ["a", "strong", "em", "b", "i"];
   const ALLOWED_ATTR = ["href"];
+  const SIZE: Sizes = "large";
+  const BUFFER = 20; // padding around image excerpt
 
   const access = {
     private: {
@@ -50,11 +56,62 @@
 
   const mode: Writable<ViewerMode> = getContext("mode");
 
+  let document: Document = getContext("document");
+  let canvas: HTMLCanvasElement;
+
   $: id = noteHashUrl(note).replace("#", "");
   $: href = noteHashUrl(note);
   $: page_number = note.page_number + 1; // note pages are 0-indexed
   $: user = typeof note.user === "object" ? (note.user as User) : null;
 
+  onMount(() => {
+    render(canvas, document, pdf);
+  });
+
+  async function render(canvas: HTMLCanvasElement, document: Document, pdf) {
+    if (pdf) {
+      return renderPDF(canvas, pdf);
+    }
+
+    if (document) {
+      return renderImage(canvas, document);
+    }
+
+    // we don't have a pdf or a document, for some reason
+    console.error(`Can't render note ${note.id} on page ${page_number}.`);
+  }
+
+  async function renderImage(canvas: HTMLCanvasElement, document: Document) {
+    const context = canvas.getContext("2d");
+    const image = new Image();
+
+    let src = pageImageUrl(document, page_number, SIZE);
+    /*
+    if (document.access !== "public") {
+      src = await getPrivateAsset(src);
+    }
+    */
+
+    image.src = src.href;
+    image.addEventListener("load", (e) => {
+      canvas.width = width(note) * image.width;
+      canvas.height = height(note) * image.height;
+      context.drawImage(
+        image,
+        note.x1 * image.width,
+        note.y1 * image.height,
+        width(note) * image.width,
+        height(note) * image.height,
+        0,
+        0,
+        width(note) * image.width,
+        height(note) * image.height,
+      );
+    });
+  }
+
+  async function renderPDF(canvas: HTMLCanvasElement, pdf) {}
+
   function clean(html: string) {
     return DOMPurify.sanitize(html, {
       USE_PROFILES: { html: true },
@@ -72,8 +129,8 @@
     style:--x2={note.x2}
     style:--y1={note.y1}
     style:--y2={note.y2}
-    style:--width={width(note)}
-    style:--height={height(note)}
+    style:--note-width={width(note)}
+    style:--note-height={height(note)}
   >
     <header>
       <h3>{note.title}</h3>
@@ -88,13 +145,15 @@
     </header>
     <div class="excerpt">
       <h4 {id}>
-        <a href={pageHashUrl(page_number)}>
+        <a href={noteHashUrl(note)}>
           {$_("documents.pageAbbrev")}
           {page_number}
         </a>
       </h4>
 
-      <div class="highlight"></div>
+      <div class="highlight">
+        <canvas width="0" height="0" bind:this={canvas}></canvas>
+      </div>
     </div>
     <div class="content">
       <p>{@html clean(note.content)}</p>
@@ -203,6 +262,17 @@
     gap: var(--font-md, 1rem);
   }
 
+  h4,
+  h4 a {
+    color: var(--gray-4, #5c717c);
+    text-decoration: none;
+    font-weight: var(--font-regular);
+  }
+
+  h4 a:hover {
+    text-decoration: underline;
+  }
+
   .excerpt {
     display: flex;
     flex-direction: column;
@@ -212,22 +282,30 @@
   }
 
   .highlight {
-    height: 4.25rem;
     align-self: stretch;
     border-radius: 0.5rem;
-    border: 1px solid var(--gray-2, #d8dee2);
+    border: 2px solid var(--gray-2, #d8dee2);
     background: var(--gray-1, #f5f6f7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
-  h4,
-  h4 a {
-    color: var(--gray-4, #5c717c);
-    text-decoration: none;
-    font-weight: var(--font-regular);
+  .public .highlight {
+    border-color: var(--note-public);
   }
 
-  h4 a:hover {
-    text-decoration: underline;
+  .private .highlight {
+    border-color: var(--note-private);
+  }
+
+  .organization .highlight {
+    border-color: var(--note-org);
+  }
+
+  canvas {
+    max-width: 100%;
+    padding: 0.25rem;
   }
 
   footer {
diff --git a/src/lib/components/documents/stories/Note.stories.svelte b/src/lib/components/documents/stories/Note.stories.svelte
index 8bc91fd82..955b40abc 100644
--- a/src/lib/components/documents/stories/Note.stories.svelte
+++ b/src/lib/components/documents/stories/Note.stories.svelte
@@ -2,6 +2,7 @@
   import type { Note as NoteType } from "$lib/api/types";
 
   import { Story } from "@storybook/addon-svelte-csf";
+  import { setContext } from "svelte";
   import Note from "../Note.svelte";
 
   import document from "$lib/api/fixtures/documents/document-expanded.json";
@@ -19,6 +20,10 @@
   };
 </script>
 
+<script lang="ts">
+  setContext("document", document);
+</script>
+
 <Story name="default">
   <Note focused note={notes[0]} />
 </Story>
diff --git a/src/routes/documents/[id]-[slug]/+layout.svelte b/src/routes/documents/[id]-[slug]/+layout.svelte
index 302b1fd43..77260156c 100644
--- a/src/routes/documents/[id]-[slug]/+layout.svelte
+++ b/src/routes/documents/[id]-[slug]/+layout.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import "@/style/kit.css";
 
-  import type { Project } from "$lib/api/types";
+  import type { Document, Project } from "$lib/api/types";
 
   // load this here to get the worker started early
   import * as pdfjs from "pdfjs-dist/build/pdf.mjs";
@@ -10,6 +10,8 @@
     import.meta.url,
   ).href;
 
+  import { setContext } from "svelte";
+
   import MainLayout from "$lib/components/layouts/MainLayout.svelte";
   import SignedIn from "$lib/components/common/SignedIn.svelte";
 
@@ -26,14 +28,16 @@
 
   export let data;
 
+  setContext<Document>("document", data.document);
+
   $: document = data.document;
   $: projects = document.projects as Project[];
-  $: canonical_url = canonicalUrl(document).toString();
+  $: canonical_url = canonicalUrl(document).href;
 </script>
 
 <svelte:head>
   <!-- Insert canonical URL -->
-  <link rel="canonical" href={document.canonical_url.toString()} />
+  <link rel="canonical" href={canonical_url} />
 
   {#if document.noindex || document.admin_noindex}
     <meta name="robots" content="noindex" />

From ab9bbdacea50221844b44ce90fc5d709babe698a Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 23 May 2024 20:00:00 -0400
Subject: [PATCH 08/25] Render note excerpts with pdfjs

---
 ...mocrats-to-form-a-coalition-government.pdf | Bin 0 -> 31297 bytes
 src/lib/components/documents/Note.svelte      |  33 +++++++++++++++++-
 .../documents/stories/Note.stories.svelte     |  18 ++++++++++
 3 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/api/fixtures/documents/examples/agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government.pdf

diff --git a/src/lib/api/fixtures/documents/examples/agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government.pdf b/src/lib/api/fixtures/documents/examples/agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..60a92f531d1b770dc313ed5dd6f9bc328c915fd6
GIT binary patch
literal 31297
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
Rxx7cnzaS7WUB0q^{|Bx$ArSxo

literal 0
HcmV?d00001

diff --git a/src/lib/components/documents/Note.svelte b/src/lib/components/documents/Note.svelte
index 1fdc485b8..d672b92b2 100644
--- a/src/lib/components/documents/Note.svelte
+++ b/src/lib/components/documents/Note.svelte
@@ -63,12 +63,15 @@
   $: href = noteHashUrl(note);
   $: page_number = note.page_number + 1; // note pages are 0-indexed
   $: user = typeof note.user === "object" ? (note.user as User) : null;
+  $: render(canvas, document, pdf);
 
   onMount(() => {
     render(canvas, document, pdf);
   });
 
   async function render(canvas: HTMLCanvasElement, document: Document, pdf) {
+    if (!canvas) return;
+
     if (pdf) {
       return renderPDF(canvas, pdf);
     }
@@ -110,7 +113,35 @@
     });
   }
 
-  async function renderPDF(canvas: HTMLCanvasElement, pdf) {}
+  async function renderPDF(canvas: HTMLCanvasElement, pdf) {
+    const context = canvas.getContext("2d");
+    const page = await pdf.getPage(page_number);
+    const [x, y, w, h] = page.view;
+
+    const scale = 1;
+    const offsetX = note.x1 * w;
+    const offsetY = note.y1 * h;
+    const noteWidth = width(note) * w;
+    const noteHeight = height(note) * h;
+    const viewport = page.getViewport({
+      scale,
+      offsetX: -offsetX * scale,
+      offsetY: -offsetY * scale,
+    });
+
+    const dpr = window?.devicePixelRatio ?? 1;
+    const transform = dpr !== 1 ? [dpr, 0, 0, dpr, 0, 0] : null;
+
+    // set the pixel dimensions of the canvas
+    canvas.width = Math.floor(noteWidth * dpr);
+    canvas.height = Math.floor(noteHeight * dpr);
+
+    page.render({
+      canvasContext: context,
+      viewport,
+      transform,
+    });
+  }
 
   function clean(html: string) {
     return DOMPurify.sanitize(html, {
diff --git a/src/lib/components/documents/stories/Note.stories.svelte b/src/lib/components/documents/stories/Note.stories.svelte
index 955b40abc..cf98efbbe 100644
--- a/src/lib/components/documents/stories/Note.stories.svelte
+++ b/src/lib/components/documents/stories/Note.stories.svelte
@@ -1,13 +1,21 @@
 <script lang="ts" context="module">
   import type { Note as NoteType } from "$lib/api/types";
 
+  import * as pdfjs from "pdfjs-dist/build/pdf.mjs";
+  pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+    "pdfjs-dist/build/pdf.worker.mjs",
+    import.meta.url,
+  ).href;
+
   import { Story } from "@storybook/addon-svelte-csf";
   import { setContext } from "svelte";
   import Note from "../Note.svelte";
 
   import document from "$lib/api/fixtures/documents/document-expanded.json";
+  import pdfFile from "$lib/api/fixtures/documents/examples/agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government.pdf";
 
   const notes = document.notes as NoteType[];
+  const url = new URL(pdfFile, import.meta.url);
 
   const html = `A chance for the Prime Minister and his Deputy to portray themselves as the "<b>action men</b>" of British politics.  
   Within a month-and-a-half, <a href="https://en.wikipedia.org/wiki/George_Osborne">George Osborne</a>, the country's new 38 year-old Chancellor of the Exchequor (i.e. the country's Finance Minister) 
@@ -18,6 +26,10 @@
     component: Note,
     parameters: { layout: "centered" },
   };
+
+  async function load(url: URL) {
+    return pdfjs.getDocument(url).promise;
+  }
 </script>
 
 <script lang="ts">
@@ -43,3 +55,9 @@
 <Story name="note with HTML">
   <Note focused note={{ ...notes[2], content: html }} />
 </Story>
+
+<Story name="render using PDF">
+  {#await load(url) then pdf}
+    <Note focused note={{ ...notes[2], content: html }} {pdf} />
+  {/await}
+</Story>

From 9cedb50612c7597de1ec0d7f23431472e8d266e3 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Fri, 24 May 2024 10:31:41 -0400
Subject: [PATCH 09/25] Load PDF in Notes.svelte

---
 src/lib/components/documents/Note.svelte      | 19 +++++++--
 src/lib/components/documents/Notes.svelte     | 36 +++++++++++++++--
 src/lib/components/documents/PDFPage.svelte   | 40 ++++++++++---------
 .../documents/stories/Notes.stories.svelte    | 32 +++++++++++++++
 src/routes/documents/[id]-[slug]/+page.svelte |  4 +-
 5 files changed, 103 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/components/documents/stories/Notes.stories.svelte

diff --git a/src/lib/components/documents/Note.svelte b/src/lib/components/documents/Note.svelte
index d672b92b2..a0b0a9901 100644
--- a/src/lib/components/documents/Note.svelte
+++ b/src/lib/components/documents/Note.svelte
@@ -58,25 +58,30 @@
 
   let document: Document = getContext("document");
   let canvas: HTMLCanvasElement;
+  let renderTask;
+  let rendering;
 
   $: id = noteHashUrl(note).replace("#", "");
   $: href = noteHashUrl(note);
   $: page_number = note.page_number + 1; // note pages are 0-indexed
   $: user = typeof note.user === "object" ? (note.user as User) : null;
-  $: render(canvas, document, pdf);
+  $: rendering = render(canvas, document, pdf); // avoid re-using the same canvas
 
   onMount(() => {
-    render(canvas, document, pdf);
+    rendering = render(canvas, document, pdf);
   });
 
   async function render(canvas: HTMLCanvasElement, document: Document, pdf) {
     if (!canvas) return;
+    if (rendering) {
+      await rendering;
+    }
 
     if (pdf) {
       return renderPDF(canvas, pdf);
     }
 
-    if (document) {
+    if (document && !pdf) {
       return renderImage(canvas, document);
     }
 
@@ -114,6 +119,10 @@
   }
 
   async function renderPDF(canvas: HTMLCanvasElement, pdf) {
+    if (renderTask) {
+      await renderTask.promise;
+    }
+
     const context = canvas.getContext("2d");
     const page = await pdf.getPage(page_number);
     const [x, y, w, h] = page.view;
@@ -136,11 +145,13 @@
     canvas.width = Math.floor(noteWidth * dpr);
     canvas.height = Math.floor(noteHeight * dpr);
 
-    page.render({
+    renderTask = page.render({
       canvasContext: context,
       viewport,
       transform,
     });
+
+    return renderTask.promise;
   }
 
   function clean(html: string) {
diff --git a/src/lib/components/documents/Notes.svelte b/src/lib/components/documents/Notes.svelte
index 8a838b482..ed3b55a5b 100644
--- a/src/lib/components/documents/Notes.svelte
+++ b/src/lib/components/documents/Notes.svelte
@@ -1,14 +1,44 @@
 <script lang="ts">
   import type { Note as NoteType } from "$lib/api/types";
+
+  // worker is configured in +layout.svelte
+  import * as pdfjs from "pdfjs-dist/build/pdf.mjs";
+  if (!pdfjs.GlobalWorkerOptions.workerSrc) {
+    pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+      "pdfjs-dist/build/pdf.worker.mjs",
+      import.meta.url,
+    ).href;
+  }
+
+  import { onMount } from "svelte";
+
   import Note from "./Note.svelte";
 
   export let notes: NoteType[];
+  export let pdf = new Promise(() => {});
+  export let task: ReturnType<typeof pdfjs.getDocument> | undefined = null;
+  export let asset_url: URL = undefined;
+
+  onMount(async () => {
+    if (asset_url && !task) {
+      task = pdfjs.getDocument({ url: asset_url });
+      pdf = task.promise;
+    }
+  });
 </script>
 
 <div class="pages">
-  {#each notes as note}
-    <Note {note} focused />
-  {/each}
+  {#if asset_url}
+    {#await pdf then pdf}
+      {#each notes as note}
+        <Note {note} focused {pdf} />
+      {/each}
+    {/await}
+  {:else}
+    {#each notes as note}
+      <Note {note} focused />
+    {/each}
+  {/if}
 </div>
 
 <style>
diff --git a/src/lib/components/documents/PDFPage.svelte b/src/lib/components/documents/PDFPage.svelte
index 738fbb573..1c23dcc3f 100644
--- a/src/lib/components/documents/PDFPage.svelte
+++ b/src/lib/components/documents/PDFPage.svelte
@@ -207,25 +207,27 @@ Selectable text can be rendered in one of two ways:
       </div>
     {/if}
     {#if notes}
-      <div class="notes">
-        {#each notes as note}
-          <a
-            class="note"
-            href={noteHashUrl(note)}
-            title={note.title}
-            style:top="{note.y1 * 100}%"
-          >
-            <NoteTab access={note.access} />
-            {#if $activeNote}
-              <button class="close" on:click|preventDefault={closeNote}>
-                <XCircleFill16 />
-              </button>
-            {/if}
-          </a>
-
-          <Note {note} focused={note === $activeNote} />
-        {/each}
-      </div>
+      {#await pdf then pdf}
+        <div class="notes">
+          {#each notes as note}
+            <a
+              class="note"
+              href={noteHashUrl(note)}
+              title={note.title}
+              style:top="{note.y1 * 100}%"
+            >
+              <NoteTab access={note.access} />
+              {#if $activeNote}
+                <button class="close" on:click|preventDefault={closeNote}>
+                  <XCircleFill16 />
+                </button>
+              {/if}
+            </a>
+
+            <Note {note} focused={note === $activeNote} {pdf} />
+          {/each}
+        </div>
+      {/await}
     {/if}
   </div>
 </Page>
diff --git a/src/lib/components/documents/stories/Notes.stories.svelte b/src/lib/components/documents/stories/Notes.stories.svelte
new file mode 100644
index 000000000..f1a01d3f1
--- /dev/null
+++ b/src/lib/components/documents/stories/Notes.stories.svelte
@@ -0,0 +1,32 @@
+<script context="module" lang="ts">
+  import type { Note as NoteType } from "$lib/api/types";
+
+  import { Story } from "@storybook/addon-svelte-csf";
+  import { setContext } from "svelte";
+
+  import Notes from "../Notes.svelte";
+
+  export const meta = {
+    title: "Components / Documents / Notes View",
+    component: Notes,
+    parameters: { layout: "centered" },
+  };
+
+  import document from "$lib/api/fixtures/documents/document-expanded.json";
+  import pdfFile from "$lib/api/fixtures/documents/examples/agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government.pdf";
+
+  const notes = document.notes as NoteType[];
+  const url = new URL(pdfFile, import.meta.url);
+</script>
+
+<script lang="ts">
+  setContext("document", document);
+</script>
+
+<Story name="notes using images">
+  <Notes {notes} />
+</Story>
+
+<Story name="notes using a PDF file">
+  <Notes {notes} asset_url={url} />
+</Story>
diff --git a/src/routes/documents/[id]-[slug]/+page.svelte b/src/routes/documents/[id]-[slug]/+page.svelte
index 2531e5df2..47e55ccb8 100644
--- a/src/routes/documents/[id]-[slug]/+page.svelte
+++ b/src/routes/documents/[id]-[slug]/+page.svelte
@@ -201,7 +201,7 @@
 
 <svelte:window on:hashchange={onHashChange} />
 <svelte:head>
-  {#if $mode === "document"}
+  {#if $mode === "document" || $mode === "notes"}
     <link
       rel="preload"
       href={data.asset_url.href}
@@ -230,7 +230,7 @@
   {/if}
 
   {#if $mode === "notes"}
-    <Notes notes={document.notes} />
+    <Notes notes={document.notes} asset_url={data.asset_url} />
   {/if}
 
   <PageToolbar slot="footer">

From a6e6c10f409c58bcfe1f9db45046377f3771049f Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Fri, 24 May 2024 15:58:35 -0400
Subject: [PATCH 10/25] Hide pagination and zoom in notes view

---
 src/lib/components/documents/Note.svelte      | 19 +++++++++----
 src/lib/components/documents/PDFPage.svelte   | 15 ++++++++--
 src/routes/documents/[id]-[slug]/+page.svelte | 28 +++++++++++--------
 3 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/documents/Note.svelte b/src/lib/components/documents/Note.svelte
index a0b0a9901..59018a63e 100644
--- a/src/lib/components/documents/Note.svelte
+++ b/src/lib/components/documents/Note.svelte
@@ -11,6 +11,8 @@
   import type { User } from "@/api/types/orgAndUser";
   import type { Document, Note, Sizes, ViewerMode } from "$lib/api/types";
 
+  import { pushState } from "$app/navigation";
+
   import DOMPurify from "isomorphic-dompurify";
   import { getContext, onMount } from "svelte";
   import { _ } from "svelte-i18n";
@@ -25,7 +27,7 @@
 
   import { noteHashUrl, width, height } from "$lib/api/notes";
   import { pageImageUrl } from "$lib/api/documents";
-  import { getPrivateAsset } from "$lib/utils/api";
+  // import { getPrivateAsset } from "$lib/utils/api";
 
   export let note: Note;
   export let focused = false;
@@ -34,7 +36,6 @@
   const ALLOWED_TAGS = ["a", "strong", "em", "b", "i"];
   const ALLOWED_ATTR = ["href"];
   const SIZE: Sizes = "large";
-  const BUFFER = 20; // padding around image excerpt
 
   const access = {
     private: {
@@ -54,9 +55,10 @@
     },
   };
 
+  const activeNote: Writable<Note> = getContext("activeNote");
+  const document: Document = getContext("document");
   const mode: Writable<ViewerMode> = getContext("mode");
 
-  let document: Document = getContext("document");
   let canvas: HTMLCanvasElement;
   let renderTask;
   let rendering;
@@ -67,6 +69,8 @@
   $: user = typeof note.user === "object" ? (note.user as User) : null;
   $: rendering = render(canvas, document, pdf); // avoid re-using the same canvas
 
+  $: console.log(note.id, focused);
+
   onMount(() => {
     rendering = render(canvas, document, pdf);
   });
@@ -161,11 +165,16 @@
       ALLOWED_ATTR,
     });
   }
+
+  function onClick(e) {
+    focused = true;
+    $activeNote = note;
+    pushState(e.target.href, {});
+  }
 </script>
 
 {#if focused}
   <div
-    {id}
     class="note focused {note.access} {$mode || 'notes'}"
     style:--x1={note.x1}
     style:--x2={note.x2}
@@ -227,7 +236,6 @@
   </div>
 {:else}
   <a
-    data-sveltekit-replacestate
     {href}
     class="note {note.access}"
     title={note.title}
@@ -235,6 +243,7 @@
     style:left="{note.x1 * 100}%"
     style:width="{width(note) * 100}%"
     style:height="{height(note) * 100}%"
+    on:click={onClick}
   >
     {note.title}
   </a>
diff --git a/src/lib/components/documents/PDFPage.svelte b/src/lib/components/documents/PDFPage.svelte
index 1c23dcc3f..041377434 100644
--- a/src/lib/components/documents/PDFPage.svelte
+++ b/src/lib/components/documents/PDFPage.svelte
@@ -160,6 +160,13 @@ Selectable text can be rendered in one of two ways:
     }
   }
 
+  function openNote(e, note: NoteType) {
+    $activeNote = note;
+    if (e.target.href) {
+      pushState(e.target.href, {});
+    }
+  }
+
   function closeNote() {
     $activeNote = null;
     pushState(window.location.pathname, {});
@@ -215,16 +222,20 @@ Selectable text can be rendered in one of two ways:
               href={noteHashUrl(note)}
               title={note.title}
               style:top="{note.y1 * 100}%"
+              on:click={(e) => openNote(e, note)}
             >
               <NoteTab access={note.access} />
               {#if $activeNote}
-                <button class="close" on:click|preventDefault={closeNote}>
+                <button
+                  class="close"
+                  on:click|preventDefault|stopPropagation={closeNote}
+                >
                   <XCircleFill16 />
                 </button>
               {/if}
             </a>
 
-            <Note {note} focused={note === $activeNote} {pdf} />
+            <Note {note} focused={note.id === $activeNote?.id} {pdf} />
           {/each}
         </div>
       {/await}
diff --git a/src/routes/documents/[id]-[slug]/+page.svelte b/src/routes/documents/[id]-[slug]/+page.svelte
index 47e55ccb8..53dd5e7d1 100644
--- a/src/routes/documents/[id]-[slug]/+page.svelte
+++ b/src/routes/documents/[id]-[slug]/+page.svelte
@@ -245,7 +245,7 @@
     </label>
 
     <svelte:fragment slot="center">
-      {#if $mode !== "thumbnails"}
+      {#if $mode === "document" || $mode === "text"}
         <Paginator
           goToNav
           on:goTo={(e) => gotoPage(e.detail)}
@@ -259,18 +259,22 @@
       {/if}
     </svelte:fragment>
 
-    <label class="zoom" slot="right">
-      {#if $mode === "thumbnails"}
-        {$_("zoom.size")}
-      {:else}
-        {$_("zoom.zoom")}
+    <svelte:fragment slot="right">
+      {#if zoomLevels.length}
+        <label class="zoom">
+          {#if $mode === "thumbnails"}
+            {$_("zoom.size")}
+          {:else}
+            {$_("zoom.zoom")}
+          {/if}
+          <select name="zoom" bind:value={zoom}>
+            {#each zoomLevels as [value, label]}
+              <option {value}>{label}</option>
+            {/each}
+          </select>
+        </label>
       {/if}
-      <select name="zoom" bind:value={zoom}>
-        {#each zoomLevels as [value, label]}
-          <option {value}>{label}</option>
-        {/each}
-      </select>
-    </label>
+    </svelte:fragment>
   </PageToolbar>
 </ContentLayout>
 

From c96ed3606b1bfe363d384d71276c89b6d13db534 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Fri, 24 May 2024 18:12:30 -0400
Subject: [PATCH 11/25] fix some rendering stuff

---
 src/lib/components/documents/Note.svelte           | 10 +++-------
 src/lib/components/documents/PDFPage.svelte        | 14 +++++++-------
 .../documents/stories/PDF.stories.svelte           |  6 ++++++
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/documents/Note.svelte b/src/lib/components/documents/Note.svelte
index 59018a63e..d663dd5a1 100644
--- a/src/lib/components/documents/Note.svelte
+++ b/src/lib/components/documents/Note.svelte
@@ -63,14 +63,11 @@
   let renderTask;
   let rendering;
 
-  $: id = noteHashUrl(note).replace("#", "");
   $: href = noteHashUrl(note);
   $: page_number = note.page_number + 1; // note pages are 0-indexed
   $: user = typeof note.user === "object" ? (note.user as User) : null;
   $: rendering = render(canvas, document, pdf); // avoid re-using the same canvas
 
-  $: console.log(note.id, focused);
-
   onMount(() => {
     rendering = render(canvas, document, pdf);
   });
@@ -98,7 +95,7 @@
     const image = new Image();
 
     let src = pageImageUrl(document, page_number, SIZE);
-    /*
+    /* not sure we need this
     if (document.access !== "public") {
       src = await getPrivateAsset(src);
     }
@@ -167,8 +164,7 @@
   }
 
   function onClick(e) {
-    focused = true;
-    $activeNote = note;
+    activeNote?.set(note);
     pushState(e.target.href, {});
   }
 </script>
@@ -195,7 +191,7 @@
       </div>
     </header>
     <div class="excerpt">
-      <h4 {id}>
+      <h4>
         <a href={noteHashUrl(note)}>
           {$_("documents.pageAbbrev")}
           {page_number}
diff --git a/src/lib/components/documents/PDFPage.svelte b/src/lib/components/documents/PDFPage.svelte
index 041377434..cfc4b49bd 100644
--- a/src/lib/components/documents/PDFPage.svelte
+++ b/src/lib/components/documents/PDFPage.svelte
@@ -108,8 +108,6 @@ Selectable text can be rendered in one of two ways:
     // set the container size, if using a numeric zoom
     if (typeof scale === "number") {
       container.style.setProperty("--width", Math.floor(viewport.width) + "px");
-    } else if (scale === "height") {
-      container.style.removeProperty("--width");
     }
 
     // store the task, return the promise
@@ -161,14 +159,13 @@ Selectable text can be rendered in one of two ways:
   }
 
   function openNote(e, note: NoteType) {
-    $activeNote = note;
-    if (e.target.href) {
-      pushState(e.target.href, {});
-    }
+    activeNote?.set(note);
+    const href = e.target?.href || noteHashUrl(note);
+    pushState(href, {});
   }
 
   function closeNote() {
-    $activeNote = null;
+    activeNote?.set(null);
     pushState(window.location.pathname, {});
   }
 </script>
@@ -194,6 +191,7 @@ Selectable text can be rendered in one of two ways:
     style:--aspect={aspect}
     style:--scale-factor={numericScale.toFixed(2)}
     style:--width="{width}px"
+    style:--height="{height}px"
     data-loaded={loaded}
   >
     <canvas bind:this={canvas} {width} {height}></canvas>
@@ -259,7 +257,9 @@ Selectable text can be rendered in one of two ways:
   }
 
   .page-container.scale-height {
+    aspect-ratio: 1 / var(--aspect);
     height: 90vh;
+    width: inherit;
   }
 
   .selectable-text {
diff --git a/src/lib/components/documents/stories/PDF.stories.svelte b/src/lib/components/documents/stories/PDF.stories.svelte
index ece3dc99a..9461f2c1c 100644
--- a/src/lib/components/documents/stories/PDF.stories.svelte
+++ b/src/lib/components/documents/stories/PDF.stories.svelte
@@ -19,6 +19,12 @@
 </script>
 
 <Story name="default">
+  <div style="width: {IMAGE_WIDTHS_MAP.get('large')}px;">
+    <PDF document={{ ...document, notes: [] }} asset_url={pdfUrl(document)} />
+  </div>
+</Story>
+
+<Story name="show notes">
   <div style="width: {IMAGE_WIDTHS_MAP.get('large')}px;">
     <PDF {document} asset_url={pdfUrl(document)} />
   </div>

From 233fec74195685499bc6ca5779918e0c8cf94529 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Wed, 29 May 2024 11:10:16 -0400
Subject: [PATCH 12/25] Pass scale to note for rendering and be less clever
 with layout

---
 src/lib/components/documents/Note.svelte      | 66 +++++++------------
 src/lib/components/documents/Notes.svelte     | 42 +++++++++++-
 src/lib/components/documents/PDFPage.svelte   | 15 ++++-
 .../documents/stories/PDF.stories.svelte      | 13 +++-
 4 files changed, 87 insertions(+), 49 deletions(-)

diff --git a/src/lib/components/documents/Note.svelte b/src/lib/components/documents/Note.svelte
index d663dd5a1..b145eb336 100644
--- a/src/lib/components/documents/Note.svelte
+++ b/src/lib/components/documents/Note.svelte
@@ -32,6 +32,7 @@
   export let note: Note;
   export let focused = false;
   export let pdf = null; // PDFDocumentProxy
+  export let scale = 1.5;
 
   const ALLOWED_TAGS = ["a", "strong", "em", "b", "i"];
   const ALLOWED_ATTR = ["href"];
@@ -128,15 +129,14 @@
     const page = await pdf.getPage(page_number);
     const [x, y, w, h] = page.view;
 
-    const scale = 1;
-    const offsetX = note.x1 * w;
-    const offsetY = note.y1 * h;
-    const noteWidth = width(note) * w;
-    const noteHeight = height(note) * h;
+    const offsetX = note.x1 * w * scale;
+    const offsetY = note.y1 * h * scale;
+    const noteWidth = width(note) * w * scale;
+    const noteHeight = height(note) * h * scale;
     const viewport = page.getViewport({
       scale,
-      offsetX: -offsetX * scale,
-      offsetY: -offsetY * scale,
+      offsetX: -offsetX,
+      offsetY: -offsetY,
     });
 
     const dpr = window?.devicePixelRatio ?? 1;
@@ -190,17 +190,8 @@
         {/if}
       </div>
     </header>
-    <div class="excerpt">
-      <h4>
-        <a href={noteHashUrl(note)}>
-          {$_("documents.pageAbbrev")}
-          {page_number}
-        </a>
-      </h4>
-
-      <div class="highlight">
-        <canvas width="0" height="0" bind:this={canvas}></canvas>
-      </div>
+    <div class="highlight">
+      <canvas width="0" height="0" bind:this={canvas}></canvas>
     </div>
     <div class="content">
       <p>{@html clean(note.content)}</p>
@@ -271,9 +262,8 @@
   }
 
   /* focused mode */
-  .focused {
+  .note.focused {
     display: flex;
-    width: 38.0625rem;
     padding: var(--font-xs, 0.75rem) var(--font-md, 1rem);
     flex-direction: column;
     align-items: flex-start;
@@ -289,10 +279,21 @@
   }
 
   /* overlay */
-  .focused.document {
+  .note.focused.document {
+    display: flex;
+    padding: 0.75rem 1rem;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+
     position: absolute;
-    top: calc(var(--y1) * 100%);
-    left: calc(var(--x1) * 100%);
+    /* shift up to account for the note header */
+    top: calc(var(--y1) * 100% - 3rem);
+    /* left: calc(var(--x1) * 100% - 1px - var(--font-xs)); */
+    left: 0;
+    max-width: 100%; /* maybe should just be width: 100% */
+
+    z-index: 10;
   }
 
   .focused header {
@@ -309,25 +310,6 @@
     gap: var(--font-md, 1rem);
   }
 
-  h4,
-  h4 a {
-    color: var(--gray-4, #5c717c);
-    text-decoration: none;
-    font-weight: var(--font-regular);
-  }
-
-  h4 a:hover {
-    text-decoration: underline;
-  }
-
-  .excerpt {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.25rem;
-    align-self: stretch;
-  }
-
   .highlight {
     align-self: stretch;
     border-radius: 0.5rem;
diff --git a/src/lib/components/documents/Notes.svelte b/src/lib/components/documents/Notes.svelte
index ed3b55a5b..5581a5eb1 100644
--- a/src/lib/components/documents/Notes.svelte
+++ b/src/lib/components/documents/Notes.svelte
@@ -9,11 +9,13 @@
       import.meta.url,
     ).href;
   }
-
+  import { _ } from "svelte-i18n";
   import { onMount } from "svelte";
 
   import Note from "./Note.svelte";
 
+  import { noteHashUrl } from "$lib/api/notes";
+
   export let notes: NoteType[];
   export let pdf = new Promise(() => {});
   export let task: ReturnType<typeof pdfjs.getDocument> | undefined = null;
@@ -31,12 +33,28 @@
   {#if asset_url}
     {#await pdf then pdf}
       {#each notes as note}
-        <Note {note} focused {pdf} />
+        <div class="note-wrapper">
+          <Note {note} focused {pdf} />
+          <h4>
+            <a href={noteHashUrl(note)}>
+              {$_("documents.pageAbbrev")}
+              {note.page_number + 1}
+            </a>
+          </h4>
+        </div>
       {/each}
     {/await}
   {:else}
     {#each notes as note}
-      <Note {note} focused />
+      <div class="note-wrapper">
+        <Note {note} focused />
+        <h4>
+          <a href={noteHashUrl(note)}>
+            {$_("documents.pageAbbrev")}
+            {note.page_number + 1}
+          </a>
+        </h4>
+      </div>
     {/each}
   {/if}
 </div>
@@ -47,5 +65,23 @@
     flex-flow: column;
     align-items: center;
     gap: 3rem;
+    max-width: 38.0625rem;
+  }
+
+  .note-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  h4,
+  h4 a {
+    color: var(--gray-4, #5c717c);
+    text-decoration: none;
+    font-weight: var(--font-regular);
+  }
+
+  h4 a:hover {
+    text-decoration: underline;
   }
 </style>
diff --git a/src/lib/components/documents/PDFPage.svelte b/src/lib/components/documents/PDFPage.svelte
index cfc4b49bd..950f88100 100644
--- a/src/lib/components/documents/PDFPage.svelte
+++ b/src/lib/components/documents/PDFPage.svelte
@@ -110,6 +110,8 @@ Selectable text can be rendered in one of two ways:
       container.style.setProperty("--width", Math.floor(viewport.width) + "px");
     }
 
+    console.log(canvas, viewport);
+
     // store the task, return the promise
     renderTask = page.render({
       canvasContext: context,
@@ -129,7 +131,6 @@ Selectable text can be rendered in one of two ways:
     if (text.length > 0) return;
     if (!textContainer) return;
 
-    // page = await page;
     if (!page) return;
 
     const numericScale = fitPage(width, height, pageContainer, scale);
@@ -223,7 +224,7 @@ Selectable text can be rendered in one of two ways:
               on:click={(e) => openNote(e, note)}
             >
               <NoteTab access={note.access} />
-              {#if $activeNote}
+              {#if note.id === $activeNote?.id}
                 <button
                   class="close"
                   on:click|preventDefault|stopPropagation={closeNote}
@@ -233,7 +234,12 @@ Selectable text can be rendered in one of two ways:
               {/if}
             </a>
 
-            <Note {note} focused={note.id === $activeNote?.id} {pdf} />
+            <Note
+              {note}
+              focused={note.id === $activeNote?.id}
+              {pdf}
+              scale={numericScale}
+            />
           {/each}
         </div>
       {/await}
@@ -250,6 +256,9 @@ Selectable text can be rendered in one of two ways:
     background-color: var(--white, white);
     box-shadow: var(--shadow);
     width: var(--width, "100%");
+
+    /* make this the container for everything below */
+    contain: layout;
   }
 
   .page-container.scale-width {
diff --git a/src/lib/components/documents/stories/PDF.stories.svelte b/src/lib/components/documents/stories/PDF.stories.svelte
index 9461f2c1c..934ecf9ac 100644
--- a/src/lib/components/documents/stories/PDF.stories.svelte
+++ b/src/lib/components/documents/stories/PDF.stories.svelte
@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-  import type { Document } from "@/lib/api/types";
+  import type { Document, Note, ViewerMode } from "@/lib/api/types";
 
   import { Story } from "@storybook/addon-svelte-csf";
   import PDF from "../PDF.svelte";
@@ -18,6 +18,17 @@
   const document = doc as Document;
 </script>
 
+<script lang="ts">
+  import { setContext } from "svelte";
+  import { writable, type Writable } from "svelte/store";
+
+  const activeNote: Writable<Note> = writable(null);
+  const mode: Writable<ViewerMode> = writable("document");
+
+  setContext("activeNote", activeNote);
+  setContext("mode", mode);
+</script>
+
 <Story name="default">
   <div style="width: {IMAGE_WIDTHS_MAP.get('large')}px;">
     <PDF document={{ ...document, notes: [] }} asset_url={pdfUrl(document)} />

From 41502085820c67ef12736e8d9419c1139891d235 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Wed, 29 May 2024 11:40:42 -0400
Subject: [PATCH 13/25] padded layout

---
 src/lib/components/documents/stories/Note.stories.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/documents/stories/Note.stories.svelte b/src/lib/components/documents/stories/Note.stories.svelte
index cf98efbbe..34bd00a19 100644
--- a/src/lib/components/documents/stories/Note.stories.svelte
+++ b/src/lib/components/documents/stories/Note.stories.svelte
@@ -24,7 +24,7 @@
   export const meta = {
     title: "Components / Documents / Note",
     component: Note,
-    parameters: { layout: "centered" },
+    parameters: { layout: "padded" },
   };
 
   async function load(url: URL) {

From 42490af82fb1da72b8b71c08e39b94c63a06e011 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Wed, 29 May 2024 12:32:00 -0400
Subject: [PATCH 14/25] Basic tag and KV rendering

---
 src/langs/json/en.json                        |  7 ++-
 src/lib/components/common/KV.svelte           |  9 +++-
 .../documents/[id]-[slug]/sidebar/Data.svelte | 46 +++++++++++++---
 .../sidebar/stories/Data.stories.svelte       | 53 +++++++++++++++++++
 4 files changed, 105 insertions(+), 10 deletions(-)
 create mode 100644 src/routes/documents/[id]-[slug]/sidebar/stories/Data.stories.svelte

diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 177cada58..9bfc5df86 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -822,7 +822,6 @@
     "modifyDesc": "Rearrange, rotate, delete, insert, and split pages.",
     "info": "Edit Document Info",
     "infoDesc": "Modify document information like description and related URL.",
-    "data": "Edit Tags and Data",
     "dataDesc": "Add tags and key/value pairs to categorize your document.",
     "sections": "Edit Sections",
     "sectionsDesc": "Add sections to organize your document with a table of contents.",
@@ -838,6 +837,12 @@
       "title": "Add-Ons",
       "pinned": "Pinned add-ons will appear here"
     },
+    "data": {
+      "title": "Data & Tags",
+      "empty": "Use tags or key/value data to organize documents",
+      "tags": "Tags",
+      "data": "Data"
+    },
     "projects": {
       "title": "Projects",
       "pinned": "Pinned projects will appear here"
diff --git a/src/lib/components/common/KV.svelte b/src/lib/components/common/KV.svelte
index cb6678a92..08e204888 100644
--- a/src/lib/components/common/KV.svelte
+++ b/src/lib/components/common/KV.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-  export let key: string;
+  export let key: string = "";
   export let value: string;
   export let href: string = null;
+  export let inline: boolean = false;
   export let tag: boolean = false;
 </script>
 
-<div class="kv">
+<div class="kv" class:inline>
   {#if !tag}
     <span class="key">{key}</span>
   {/if}
@@ -31,6 +32,10 @@
     background: var(--blue-1, #eef3f9);
   }
 
+  .kv.inline {
+    display: inline-flex;
+  }
+
   .key,
   .value {
     color: var(--gray-4, #5c717c);
diff --git a/src/routes/documents/[id]-[slug]/sidebar/Data.svelte b/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
index 7dc90800d..e4b505aa0 100644
--- a/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
+++ b/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
   import type { Document } from "$lib/api/types";
 
+  import { _ } from "svelte-i18n";
   import { Tag16, Tag24 } from "svelte-octicons";
 
-  import Empty from "@/lib/components/common/Empty.svelte";
-  import KV from "@/lib/components/common/KV.svelte";
-  import SidebarGroup from "@/lib/components/sidebar/SidebarGroup.svelte";
-  import SidebarItem from "@/lib/components/sidebar/SidebarItem.svelte";
+  import Empty from "$lib/components/common/Empty.svelte";
+  import Flex from "$lib/components/common/Flex.svelte";
+  import KV from "$lib/components/common/KV.svelte";
+  import SidebarGroup from "$lib/components/sidebar/SidebarGroup.svelte";
+  import SidebarItem from "$lib/components/sidebar/SidebarItem.svelte";
 
   export let document: Document;
 
@@ -18,13 +20,43 @@
 <SidebarGroup>
   <SidebarItem slot="title">
     <Tag16 />
-    Data & Tags
+    <h3>
+      {$_("sidebar.data.title")}
+    </h3>
   </SidebarItem>
 
   {#if empty}
     <Empty icon={Tag24}>
-      <p>Use tags or key/value data to organize documents</p>
+      <p>{$_("sidebar.data.empty")}</p>
     </Empty>
-    <!-- todo: data and tag components -->
+  {/if}
+
+  {#if tags}
+    <div class="tags">
+      <SidebarItem>
+        <h4>{$_("sidebar.data.tags")}</h4>
+      </SidebarItem>
+
+      <Flex>
+        {#each tags as tag}
+          <KV tag value={tag} />
+        {/each}
+      </Flex>
+    </div>
+  {/if}
+
+  {#if data.length}
+    <div class="data">
+      <SidebarItem>
+        <h4>{$_("sidebar.data.data")}</h4>
+      </SidebarItem>
+      <Flex direction="row">
+        {#each data as [key, values]}
+          {#each values as value}
+            <KV {key} {value} />
+          {/each}
+        {/each}
+      </Flex>
+    </div>
   {/if}
 </SidebarGroup>
diff --git a/src/routes/documents/[id]-[slug]/sidebar/stories/Data.stories.svelte b/src/routes/documents/[id]-[slug]/sidebar/stories/Data.stories.svelte
new file mode 100644
index 000000000..ddb0372f9
--- /dev/null
+++ b/src/routes/documents/[id]-[slug]/sidebar/stories/Data.stories.svelte
@@ -0,0 +1,53 @@
+<script context="module" lang="ts">
+  import type { Document } from "$lib/api/types";
+
+  import { Story } from "@storybook/addon-svelte-csf";
+  import Data from "../Data.svelte";
+
+  import doc from "$lib/api/fixtures/documents/document.json";
+
+  const document = {
+    ...doc,
+    data: {},
+  } as Document;
+
+  const tags = {
+    _tags: ["British politics", "2010", "PBS NewsHour"],
+  };
+
+  const kv = {
+    people: ["David Cameron", "Nick Clegg"],
+    parties: ["Tories", "Liberal Democrats"],
+    country: ["UK"],
+  };
+
+  const data = {
+    ...tags,
+    ...kv,
+  };
+
+  export const meta = {
+    title: "Viewer / Sidebar / Data",
+    component: Data,
+    parameters: {
+      layout: "centered",
+    },
+    tags: ["autodocs"],
+  };
+</script>
+
+<Story name="Data + Tags">
+  <Data document={{ ...document, data }} />
+</Story>
+
+<Story name="Empty">
+  <Data {document} />
+</Story>
+
+<Story name="Tags">
+  <Data document={{ ...document, data: tags }} />
+</Story>
+
+<Story name="KV Data">
+  <Data document={{ ...document, data: kv }} />
+</Story>

From 00e7c7cd5ec55384b307bd6f63b934683df34f38 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Wed, 29 May 2024 12:43:03 -0400
Subject: [PATCH 15/25] _tag not _tags

---
 src/routes/documents/[id]-[slug]/sidebar/Data.svelte          | 4 ++--
 .../documents/[id]-[slug]/sidebar/stories/Data.stories.svelte | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/documents/[id]-[slug]/sidebar/Data.svelte b/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
index e4b505aa0..202441175 100644
--- a/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
+++ b/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
@@ -12,8 +12,8 @@
 
   export let document: Document;
 
-  $: tags = document.data["_tags"];
-  $: data = Object.entries(document.data).filter(([k, v]) => k !== "_tags");
+  $: tags = document.data["_tag"];
+  $: data = Object.entries(document.data).filter(([k, v]) => k !== "_tag");
   $: empty = Object.keys(document.data).length === 0;
 </script>
 
diff --git a/src/routes/documents/[id]-[slug]/sidebar/stories/Data.stories.svelte b/src/routes/documents/[id]-[slug]/sidebar/stories/Data.stories.svelte
index ddb0372f9..13f5fba69 100644
--- a/src/routes/documents/[id]-[slug]/sidebar/stories/Data.stories.svelte
+++ b/src/routes/documents/[id]-[slug]/sidebar/stories/Data.stories.svelte
@@ -12,7 +12,7 @@
   } as Document;
 
   const tags = {
-    _tags: ["British politics", "2010", "PBS NewsHour"],
+    _tag: ["British politics", "2010", "PBS NewsHour"],
   };
 
   const kv = {

From cd35fb30bd7def8120d9ade75a5b1f2f5b686745 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Wed, 29 May 2024 12:44:41 -0400
Subject: [PATCH 16/25] wrap

---
 src/routes/documents/[id]-[slug]/sidebar/Data.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/documents/[id]-[slug]/sidebar/Data.svelte b/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
index 202441175..9bdc7d816 100644
--- a/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
+++ b/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
@@ -37,7 +37,7 @@
         <h4>{$_("sidebar.data.tags")}</h4>
       </SidebarItem>
 
-      <Flex>
+      <Flex wrap>
         {#each tags as tag}
           <KV tag value={tag} />
         {/each}
@@ -50,7 +50,7 @@
       <SidebarItem>
         <h4>{$_("sidebar.data.data")}</h4>
       </SidebarItem>
-      <Flex direction="row">
+      <Flex wrap>
         {#each data as [key, values]}
           {#each values as value}
             <KV {key} {value} />

From 0847d22c039007d32125e8fa3bcd89d0b51fbd54 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Wed, 29 May 2024 16:31:08 -0400
Subject: [PATCH 17/25] Tags and KV are linked to search URLs

---
 src/lib/utils/search.ts                       | 25 ++++++++++--
 src/lib/utils/tests/search.test.ts            | 40 ++++++++++++++-----
 .../documents/[id]-[slug]/sidebar/Data.svelte | 10 ++++-
 3 files changed, 61 insertions(+), 14 deletions(-)

diff --git a/src/lib/utils/search.ts b/src/lib/utils/search.ts
index 952e5bc91..55f5b00b3 100644
--- a/src/lib/utils/search.ts
+++ b/src/lib/utils/search.ts
@@ -1,16 +1,16 @@
 import type { User } from "@/api/types";
 import type { Access } from "../api/types";
-import { APP_URL } from "@/config/config";
+import { APP_URL } from "@/config/config.js";
 import { slugify } from "@/util/string.js";
 
 export function searchUrl(query: string): URL {
-  const href = new URL("app", APP_URL);
+  const href = new URL("app/", APP_URL);
   href.searchParams.set("q", query);
   return href;
 }
 
 export function projectSearchUrl(project): string {
-  return searchUrl(`+project:${project.id} `).toString();
+  return searchUrl(`+project:${project.id} `).href;
 }
 
 /**
@@ -21,3 +21,22 @@ export function projectSearchUrl(project): string {
 export function userDocs(user: User, access: Access): string {
   return `+user:${slugify(user.name)}-${user.id} access:${access}`;
 }
+
+/**
+ * Tag search query
+ * @param t tag
+ * @returns formatted query
+ */
+export function tag(t: string): string {
+  return `+tag:"${t}"`;
+}
+
+/**
+ * Data search query
+ * @param key
+ * @param value
+ * @returns formatted query
+ */
+export function kv(key: string, value: string): string {
+  return `+data__${key}:"${value}"`;
+}
diff --git a/src/lib/utils/tests/search.test.ts b/src/lib/utils/tests/search.test.ts
index 4b06691e9..81132a7eb 100644
--- a/src/lib/utils/tests/search.test.ts
+++ b/src/lib/utils/tests/search.test.ts
@@ -1,14 +1,36 @@
-import { test, expect } from "vitest";
+import { test, expect, describe } from "vitest";
+
+import { APP_URL } from "@/config/config.js";
 import { slugify } from "@/util/string";
 import { me } from "@/test/fixtures/accounts";
-import { userDocs } from "../search";
+import { userDocs, tag, kv, searchUrl } from "../search";
+
+describe("search utilities", () => {
+  test("search URL", () => {
+    const href = new URL(`/app/`, APP_URL);
+    href.searchParams.set("q", "Nick Clegg");
+    expect(searchUrl("Nick Clegg")).toStrictEqual(href);
+  });
+
+  test("userDocs", () => {
+    expect(userDocs(me, "public")).toStrictEqual(
+      `+user:${slugify(me.name)}-${me.id} access:public`,
+    );
+
+    expect(userDocs(me, "private")).toStrictEqual(
+      `+user:${slugify(me.name)}-${me.id} access:private`,
+    );
+  });
+
+  test("tags", () => {
+    expect(tag("research")).toStrictEqual(`+tag:"research"`);
 
-test("userDocs", () => {
-  expect(userDocs(me, "public")).toStrictEqual(
-    `+user:${slugify(me.name)}-${me.id} access:public`,
-  );
+    expect(tag("PBS NewsHour")).toStrictEqual(`+tag:"PBS NewsHour"`);
+  });
 
-  expect(userDocs(me, "private")).toStrictEqual(
-    `+user:${slugify(me.name)}-${me.id} access:private`,
-  );
+  test("kv", () => {
+    expect(kv("parties", "David Cameron")).toStrictEqual(
+      `+data__parties:"David Cameron"`,
+    );
+  });
 });
diff --git a/src/routes/documents/[id]-[slug]/sidebar/Data.svelte b/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
index 9bdc7d816..90bb436cc 100644
--- a/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
+++ b/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
@@ -10,6 +10,8 @@
   import SidebarGroup from "$lib/components/sidebar/SidebarGroup.svelte";
   import SidebarItem from "$lib/components/sidebar/SidebarItem.svelte";
 
+  import * as search from "$lib/utils/search";
+
   export let document: Document;
 
   $: tags = document.data["_tag"];
@@ -39,7 +41,7 @@
 
       <Flex wrap>
         {#each tags as tag}
-          <KV tag value={tag} />
+          <KV tag value={tag} href={search.searchUrl(search.tag(tag)).href} />
         {/each}
       </Flex>
     </div>
@@ -53,7 +55,11 @@
       <Flex wrap>
         {#each data as [key, values]}
           {#each values as value}
-            <KV {key} {value} />
+            <KV
+              {key}
+              {value}
+              href={search.searchUrl(search.kv(key, value)).href}
+            />
           {/each}
         {/each}
       </Flex>

From 16be6fffafe6cf822c000d4f54475a88b20558a2 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 30 May 2024 10:13:22 -0400
Subject: [PATCH 18/25] Remove header

Co-authored-by: Allan Lasser <lasser.allan@gmail.com>
---
 src/routes/documents/[id]-[slug]/sidebar/Data.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/routes/documents/[id]-[slug]/sidebar/Data.svelte b/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
index 90bb436cc..f1592f99e 100644
--- a/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
+++ b/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
@@ -22,9 +22,7 @@
 <SidebarGroup>
   <SidebarItem slot="title">
     <Tag16 />
-    <h3>
-      {$_("sidebar.data.title")}
-    </h3>
+    {$_("sidebar.data.title")}
   </SidebarItem>
 
   {#if empty}

From 55c0b2a6c46ecb5bec540377d22e4104ccc3b86a Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 30 May 2024 10:18:59 -0400
Subject: [PATCH 19/25] Handle no notes

---
 src/langs/json/en.json                        |  5 +++
 src/lib/components/documents/Notes.svelte     | 38 ++++++++++++++-----
 src/lib/components/documents/PDF.svelte       |  2 +-
 .../documents/stories/Notes.stories.svelte    | 14 ++++---
 src/routes/documents/[id]-[slug]/+page.svelte |  4 +-
 .../[id]-[slug]/sidebar/Sections.svelte       |  2 +-
 6 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 177cada58..04b96947c 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -843,12 +843,17 @@
       "pinned": "Pinned projects will appear here"
     },
     "toc": {
+      "emtpy": "Sections organize your document with a table of contents",
       "notes": "Notes",
       "pageAbbrev": "p.",
       "sections": "Sections",
       "title": "Notes & Sections"
     }
   },
+  "notes": {
+    "empty": "No notes",
+    "cta": "Annotate this document"
+  },
   "viewer": {
     "notFound": "Document not found",
     "notFoundDesc": "The document you requested either does not exist or you lack permission to access it",
diff --git a/src/lib/components/documents/Notes.svelte b/src/lib/components/documents/Notes.svelte
index 5581a5eb1..c840b8c52 100644
--- a/src/lib/components/documents/Notes.svelte
+++ b/src/lib/components/documents/Notes.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Note as NoteType } from "$lib/api/types";
+  import type { Document } from "$lib/api/types";
 
   // worker is configured in +layout.svelte
   import * as pdfjs from "pdfjs-dist/build/pdf.mjs";
@@ -9,18 +9,24 @@
       import.meta.url,
     ).href;
   }
-  import { _ } from "svelte-i18n";
   import { onMount } from "svelte";
+  import { _ } from "svelte-i18n";
+  import { ListOrdered24 } from "svelte-octicons";
 
+  import Empty from "../common/Empty.svelte";
   import Note from "./Note.svelte";
 
-  import { noteHashUrl } from "$lib/api/notes";
+  import { noteUrl } from "$lib/api/notes";
+  import { canonicalUrl } from "$lib/api/documents";
 
-  export let notes: NoteType[];
+  export let document: Document;
   export let pdf = new Promise(() => {});
   export let task: ReturnType<typeof pdfjs.getDocument> | undefined = null;
   export let asset_url: URL = undefined;
 
+  $: notes = document.notes;
+  $: annotate = new URL("annotate/", canonicalUrl(document)).href;
+
   onMount(async () => {
     if (asset_url && !task) {
       task = pdfjs.getDocument({ url: asset_url });
@@ -36,12 +42,19 @@
         <div class="note-wrapper">
           <Note {note} focused {pdf} />
           <h4>
-            <a href={noteHashUrl(note)}>
-              {$_("documents.pageAbbrev")}
+            <a href={noteUrl(document, note).href}>
+              {$_("documents.page")}
               {note.page_number + 1}
             </a>
           </h4>
         </div>
+      {:else}
+        <Empty icon={ListOrdered24}>
+          <h2>{$_("notes.empty")}</h2>
+          <p>
+            <a href={annotate}> {$_("notes.cta")}</a>
+          </p>
+        </Empty>
       {/each}
     {/await}
   {:else}
@@ -49,12 +62,19 @@
       <div class="note-wrapper">
         <Note {note} focused />
         <h4>
-          <a href={noteHashUrl(note)}>
-            {$_("documents.pageAbbrev")}
+          <a href={noteUrl(document, note).href}>
+            {$_("documents.page")}
             {note.page_number + 1}
           </a>
         </h4>
       </div>
+    {:else}
+      <Empty icon={ListOrdered24}>
+        <h2>{$_("notes.empty")}</h2>
+        <p>
+          <a href={annotate}> {$_("notes.cta")}</a>
+        </p>
+      </Empty>
     {/each}
   {/if}
 </div>
@@ -65,6 +85,7 @@
     flex-flow: column;
     align-items: center;
     gap: 3rem;
+    margin: 0 auto;
     max-width: 38.0625rem;
   }
 
@@ -76,7 +97,6 @@
 
   h4,
   h4 a {
-    color: var(--gray-4, #5c717c);
     text-decoration: none;
     font-weight: var(--font-regular);
   }
diff --git a/src/lib/components/documents/PDF.svelte b/src/lib/components/documents/PDF.svelte
index d6d1d652e..badaab5e9 100644
--- a/src/lib/components/documents/PDF.svelte
+++ b/src/lib/components/documents/PDF.svelte
@@ -75,7 +75,7 @@
     display: flex;
     flex-direction: column;
     margin: 0 auto;
-    padding-left: 3rem;
+    padding: 0 3rem;
     gap: 3rem;
     width: 100%;
     overflow-x: auto;
diff --git a/src/lib/components/documents/stories/Notes.stories.svelte b/src/lib/components/documents/stories/Notes.stories.svelte
index f1a01d3f1..efe8941b7 100644
--- a/src/lib/components/documents/stories/Notes.stories.svelte
+++ b/src/lib/components/documents/stories/Notes.stories.svelte
@@ -1,5 +1,5 @@
 <script context="module" lang="ts">
-  import type { Note as NoteType } from "$lib/api/types";
+  import type { Document } from "$lib/api/types";
 
   import { Story } from "@storybook/addon-svelte-csf";
   import { setContext } from "svelte";
@@ -12,10 +12,10 @@
     parameters: { layout: "centered" },
   };
 
-  import document from "$lib/api/fixtures/documents/document-expanded.json";
+  import doc from "$lib/api/fixtures/documents/document-expanded.json";
   import pdfFile from "$lib/api/fixtures/documents/examples/agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government.pdf";
 
-  const notes = document.notes as NoteType[];
+  const document = doc as Document;
   const url = new URL(pdfFile, import.meta.url);
 </script>
 
@@ -24,9 +24,13 @@
 </script>
 
 <Story name="notes using images">
-  <Notes {notes} />
+  <Notes {document} />
 </Story>
 
 <Story name="notes using a PDF file">
-  <Notes {notes} asset_url={url} />
+  <Notes {document} asset_url={url} />
+</Story>
+
+<Story name="no notes">
+  <Notes document={{ ...document, notes: [] }} />
 </Story>
diff --git a/src/routes/documents/[id]-[slug]/+page.svelte b/src/routes/documents/[id]-[slug]/+page.svelte
index 53dd5e7d1..4e1187a80 100644
--- a/src/routes/documents/[id]-[slug]/+page.svelte
+++ b/src/routes/documents/[id]-[slug]/+page.svelte
@@ -67,7 +67,7 @@
 
     $currentPage = pageFromHash(hash);
 
-    if ($currentPage > 1) {
+    if ($currentPage > 1 && ["document", "text"].includes($mode)) {
       scrollToPage($currentPage);
     }
 
@@ -230,7 +230,7 @@
   {/if}
 
   {#if $mode === "notes"}
-    <Notes notes={document.notes} asset_url={data.asset_url} />
+    <Notes {document} asset_url={data.asset_url} />
   {/if}
 
   <PageToolbar slot="footer">
diff --git a/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte b/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte
index 41bc041b4..91b666490 100644
--- a/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte
+++ b/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte
@@ -78,7 +78,7 @@
 
   {#if empty}
     <Empty icon={ListOrdered24}>
-      <p>Sections organize your document with a table of contents</p>
+      <p>{$_("sidebar.toc.empty")}</p>
     </Empty>
   {/if}
 </SidebarGroup>

From 40c8861e9d0b8ad52622014e324ecb10ebd12801 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 30 May 2024 11:59:46 -0400
Subject: [PATCH 20/25] Split out NoteLink from Note component and move logic
 higher up

---
 src/lib/components/documents/Note.svelte      | 137 ++++++------------
 src/lib/components/documents/NoteLink.svelte  |  60 ++++++++
 src/lib/components/documents/Notes.svelte     |   4 +-
 src/lib/components/documents/PDFPage.svelte   |  21 ++-
 .../documents/stories/Note.stories.svelte     |  12 +-
 5 files changed, 125 insertions(+), 109 deletions(-)
 create mode 100644 src/lib/components/documents/NoteLink.svelte

diff --git a/src/lib/components/documents/Note.svelte b/src/lib/components/documents/Note.svelte
index b145eb336..dcd91d06e 100644
--- a/src/lib/components/documents/Note.svelte
+++ b/src/lib/components/documents/Note.svelte
@@ -30,7 +30,6 @@
   // import { getPrivateAsset } from "$lib/utils/api";
 
   export let note: Note;
-  export let focused = false;
   export let pdf = null; // PDFDocumentProxy
   export let scale = 1.5;
 
@@ -169,99 +168,59 @@
   }
 </script>
 
-{#if focused}
-  <div
-    class="note focused {note.access} {$mode || 'notes'}"
-    style:--x1={note.x1}
-    style:--x2={note.x2}
-    style:--y1={note.y1}
-    style:--y2={note.y2}
-    style:--note-width={width(note)}
-    style:--note-height={height(note)}
-  >
-    <header>
-      <h3>{note.title}</h3>
-      <div class="actions">
-        {#if note.edit_access}
-          <Action icon={Pencil16}>{$_("dialog.edit")}</Action>
-          <Action --color="var(--red)" --fill="var(--red)" icon={Trash16}
-            >{$_("dialog.delete")}</Action
-          >
-        {/if}
-      </div>
-    </header>
-    <div class="highlight">
-      <canvas width="0" height="0" bind:this={canvas}></canvas>
-    </div>
-    <div class="content">
-      <p>{@html clean(note.content)}</p>
-    </div>
-    <footer>
+<div
+  class="note focused {note.access} {$mode || 'notes'}"
+  style:--x1={note.x1}
+  style:--x2={note.x2}
+  style:--y1={note.y1}
+  style:--y2={note.y2}
+  style:--note-width={width(note)}
+  style:--note-height={height(note)}
+>
+  <header>
+    <h3>{note.title}</h3>
+    <div class="actions">
       {#if note.edit_access}
-        <label class="access">
-          <svelte:component this={access[note.access].icon} />
-          <span class="sr-only">{$_("access.access")}</span>
-          <select name="access" value={note.access}>
-            {#each Object.values(access) as opt}
-              <option value={opt.value}>{opt.title}</option>
-            {/each}
-          </select>
-        </label>
-      {:else}
-        <span class="access {note.access}">
-          <svelte:component this={access[note.access].icon} />
-          {$_(`access.${access[note.access].value}.title`)}
-        </span>
+        <Action icon={Pencil16}>{$_("dialog.edit")}</Action>
+        <Action --color="var(--red)" --fill="var(--red)" icon={Trash16}
+          >{$_("dialog.delete")}</Action
+        >
       {/if}
-
-      {#if user}
-        <p class="author">
-          {$_("annotation.by", { values: { name: user.name } })}
-        </p>
-      {/if}
-    </footer>
+    </div>
+  </header>
+  <div class="highlight">
+    <canvas width="0" height="0" bind:this={canvas}></canvas>
   </div>
-{:else}
-  <a
-    {href}
-    class="note {note.access}"
-    title={note.title}
-    style:top="{note.y1 * 100}%"
-    style:left="{note.x1 * 100}%"
-    style:width="{width(note) * 100}%"
-    style:height="{height(note) * 100}%"
-    on:click={onClick}
-  >
-    {note.title}
-  </a>
-{/if}
+  <div class="content">
+    <p>{@html clean(note.content)}</p>
+  </div>
+  <footer>
+    {#if note.edit_access}
+      <label class="access">
+        <svelte:component this={access[note.access].icon} />
+        <span class="sr-only">{$_("access.access")}</span>
+        <select name="access" value={note.access}>
+          {#each Object.values(access) as opt}
+            <option value={opt.value}>{opt.title}</option>
+          {/each}
+        </select>
+      </label>
+    {:else}
+      <span class="access {note.access}">
+        <svelte:component this={access[note.access].icon} />
+        {$_(`access.${access[note.access].value}.title`)}
+      </span>
+    {/if}
+
+    {#if user}
+      <p class="author">
+        {$_("annotation.by", { values: { name: user.name } })}
+      </p>
+    {/if}
+  </footer>
+</div>
 
 <style>
-  /* overlay mode */
-  a.note {
-    border-radius: 0.25rem;
-    color: transparent;
-    position: absolute;
-    opacity: 0.5;
-    pointer-events: all;
-    mix-blend-mode: multiply;
-  }
-
-  a.note.public {
-    background-color: var(--note-public);
-  }
-
-  a.note.private {
-    background-color: var(--note-private);
-    border-color: var(--note-private);
-  }
-
-  a.note.organization {
-    background-color: var(--note-org);
-    border-color: var(--note-org);
-  }
-
-  /* focused mode */
   .note.focused {
     display: flex;
     padding: var(--font-xs, 0.75rem) var(--font-md, 1rem);
diff --git a/src/lib/components/documents/NoteLink.svelte b/src/lib/components/documents/NoteLink.svelte
new file mode 100644
index 000000000..2427d6799
--- /dev/null
+++ b/src/lib/components/documents/NoteLink.svelte
@@ -0,0 +1,60 @@
+<!-- @component
+A link to a note, overlaid on a document
+-->
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import type { Note } from "$lib/api/types";
+
+  import { pushState } from "$app/navigation";
+  import { getContext } from "svelte";
+  import { noteHashUrl, width, height } from "$lib/api/notes";
+
+  export let note: Note;
+
+  const activeNote: Writable<Note> = getContext("activeNote");
+
+  $: href = noteHashUrl(note);
+
+  function onClick(e) {
+    activeNote?.set(note);
+    pushState(e.target.href, {});
+  }
+</script>
+
+<a
+  {href}
+  class="note {note.access}"
+  title={note.title}
+  style:top="{note.y1 * 100}%"
+  style:left="{note.x1 * 100}%"
+  style:width="{width(note) * 100}%"
+  style:height="{height(note) * 100}%"
+  on:click={onClick}
+>
+  {note.title}
+</a>
+
+<style>
+  a.note {
+    border-radius: 0.25rem;
+    color: transparent;
+    position: absolute;
+    opacity: 0.5;
+    pointer-events: all;
+    mix-blend-mode: multiply;
+  }
+
+  a.note.public {
+    background-color: var(--note-public);
+  }
+
+  a.note.private {
+    background-color: var(--note-private);
+    border-color: var(--note-private);
+  }
+
+  a.note.organization {
+    background-color: var(--note-org);
+    border-color: var(--note-org);
+  }
+</style>
diff --git a/src/lib/components/documents/Notes.svelte b/src/lib/components/documents/Notes.svelte
index c840b8c52..4684daf4c 100644
--- a/src/lib/components/documents/Notes.svelte
+++ b/src/lib/components/documents/Notes.svelte
@@ -40,7 +40,7 @@
     {#await pdf then pdf}
       {#each notes as note}
         <div class="note-wrapper">
-          <Note {note} focused {pdf} />
+          <Note {note} {pdf} />
           <h4>
             <a href={noteUrl(document, note).href}>
               {$_("documents.page")}
@@ -60,7 +60,7 @@
   {:else}
     {#each notes as note}
       <div class="note-wrapper">
-        <Note {note} focused />
+        <Note {note} />
         <h4>
           <a href={noteUrl(document, note).href}>
             {$_("documents.page")}
diff --git a/src/lib/components/documents/PDFPage.svelte b/src/lib/components/documents/PDFPage.svelte
index 950f88100..dc068cc5d 100644
--- a/src/lib/components/documents/PDFPage.svelte
+++ b/src/lib/components/documents/PDFPage.svelte
@@ -8,16 +8,17 @@ Selectable text can be rendered in one of two ways:
 - Passed in as a server-fetched JSON object
 -->
 <script lang="ts">
+  import type { Writable } from "svelte/store";
   import type { TextPosition, Note as NoteType } from "$lib/api/types";
 
   import { pushState } from "$app/navigation";
 
   import * as pdfjs from "pdfjs-dist/build/pdf.mjs";
   import { getContext } from "svelte";
-  import type { Writable } from "svelte/store";
   import { XCircleFill16 } from "svelte-octicons";
 
   import Note from "./Note.svelte";
+  import NoteLink from "./NoteLink.svelte";
   import NoteTab from "./NoteTab.svelte";
   import Page from "./Page.svelte";
 
@@ -216,6 +217,7 @@ Selectable text can be rendered in one of two ways:
       {#await pdf then pdf}
         <div class="notes">
           {#each notes as note}
+            {@const is_active = note.id === $activeNote?.id}
             <a
               class="note"
               href={noteHashUrl(note)}
@@ -224,7 +226,7 @@ Selectable text can be rendered in one of two ways:
               on:click={(e) => openNote(e, note)}
             >
               <NoteTab access={note.access} />
-              {#if note.id === $activeNote?.id}
+              {#if is_active}
                 <button
                   class="close"
                   on:click|preventDefault|stopPropagation={closeNote}
@@ -233,13 +235,11 @@ Selectable text can be rendered in one of two ways:
                 </button>
               {/if}
             </a>
-
-            <Note
-              {note}
-              focused={note.id === $activeNote?.id}
-              {pdf}
-              scale={numericScale}
-            />
+            {#if is_active}
+              <Note {note} {pdf} scale={numericScale} />
+            {:else}
+              <NoteLink {note} />
+            {/if}
           {/each}
         </div>
       {/await}
@@ -323,9 +323,6 @@ Selectable text can be rendered in one of two ways:
     bottom: 0;
     width: 100%;
     pointer-events: none;
-
-    /* make all child elements position relative to this container */
-    /* transform: rotate(0deg); */
   }
 
   .notes :global(*) {
diff --git a/src/lib/components/documents/stories/Note.stories.svelte b/src/lib/components/documents/stories/Note.stories.svelte
index 34bd00a19..d02b71767 100644
--- a/src/lib/components/documents/stories/Note.stories.svelte
+++ b/src/lib/components/documents/stories/Note.stories.svelte
@@ -37,27 +37,27 @@
 </script>
 
 <Story name="default">
-  <Note focused note={notes[0]} />
+  <Note note={notes[0]} />
 </Story>
 
 <Story name="editable">
-  <Note focused note={{ ...notes[1], edit_access: true }} />
+  <Note note={{ ...notes[1], edit_access: true }} />
 </Story>
 
 <Story name="private access">
-  <Note focused note={{ ...notes[1], access: "private" }} />
+  <Note note={{ ...notes[1], access: "private" }} />
 </Story>
 
 <Story name="collaborators access">
-  <Note focused note={{ ...notes[1], access: "organization" }} />
+  <Note note={{ ...notes[1], access: "organization" }} />
 </Story>
 
 <Story name="note with HTML">
-  <Note focused note={{ ...notes[2], content: html }} />
+  <Note note={{ ...notes[2], content: html }} />
 </Story>
 
 <Story name="render using PDF">
   {#await load(url) then pdf}
-    <Note focused note={{ ...notes[2], content: html }} {pdf} />
+    <Note note={{ ...notes[2], content: html }} {pdf} />
   {/await}
 </Story>

From 1824ccfcb77c971768c49775a214d46476962e5e Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 30 May 2024 15:13:00 -0400
Subject: [PATCH 21/25] Split notes and sections in the sidebar

---
 src/langs/json/en.json                        |  2 +-
 src/lib/components/documents/Note.svelte      | 10 +--
 .../documents/[id]-[slug]/+layout.svelte      |  5 +-
 .../[id]-[slug]/sidebar/Notes.svelte          | 61 +++++++++++++++++++
 .../[id]-[slug]/sidebar/Sections.svelte       | 55 +++--------------
 5 files changed, 79 insertions(+), 54 deletions(-)
 create mode 100644 src/routes/documents/[id]-[slug]/sidebar/Notes.svelte

diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 04b96947c..d2cedbaa8 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -843,7 +843,7 @@
       "pinned": "Pinned projects will appear here"
     },
     "toc": {
-      "emtpy": "Sections organize your document with a table of contents",
+      "empty": "Sections organize your document with a table of contents",
       "notes": "Notes",
       "pageAbbrev": "p.",
       "sections": "Sections",
diff --git a/src/lib/components/documents/Note.svelte b/src/lib/components/documents/Note.svelte
index dcd91d06e..0dc3ff899 100644
--- a/src/lib/components/documents/Note.svelte
+++ b/src/lib/components/documents/Note.svelte
@@ -327,13 +327,13 @@
     font-size: var(--font-s);
   }
 
-  /* yellow doesn't give enough contrast
-  span.access.public {
-    background-color: var(--note-public);
+  span.access.public,
+  .public label.access {
+    fill: var(--note-public);
   }
-  */
 
-  span.access.organization {
+  span.access.organization,
+  .organization label.access {
     color: var(--note-org);
     fill: var(--note-org);
   }
diff --git a/src/routes/documents/[id]-[slug]/+layout.svelte b/src/routes/documents/[id]-[slug]/+layout.svelte
index 77260156c..0bef64b00 100644
--- a/src/routes/documents/[id]-[slug]/+layout.svelte
+++ b/src/routes/documents/[id]-[slug]/+layout.svelte
@@ -22,6 +22,7 @@
   import Data from "./sidebar/Data.svelte";
   import Projects from "./sidebar/Projects.svelte";
   import Sections from "./sidebar/Sections.svelte";
+  import Notes from "./sidebar/Notes.svelte";
 
   import { embedUrl } from "$lib/api/embed";
   import { canonicalUrl, pageImageUrl } from "@/lib/api/documents";
@@ -67,7 +68,9 @@
   <svelte:fragment slot="navigation">
     <DocumentMetadata {document} />
 
-    <Sections {document} sections={document.sections} notes={document.notes} />
+    <Notes {document} />
+
+    <Sections {document} />
 
     <Data {document} />
 
diff --git a/src/routes/documents/[id]-[slug]/sidebar/Notes.svelte b/src/routes/documents/[id]-[slug]/sidebar/Notes.svelte
new file mode 100644
index 000000000..9ef89105b
--- /dev/null
+++ b/src/routes/documents/[id]-[slug]/sidebar/Notes.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Document, Note } from "$lib/api/types";
+
+  import { _ } from "svelte-i18n";
+  import { Note16, Note24 } from "svelte-octicons";
+
+  import Empty from "@/lib/components/common/Empty.svelte";
+  import SidebarGroup from "@/lib/components/sidebar/SidebarGroup.svelte";
+  import SidebarItem from "@/lib/components/sidebar/SidebarItem.svelte";
+
+  import { canonicalUrl } from "$lib/api/documents";
+  import { noteUrl } from "$lib/api/notes";
+
+  export let document: Document;
+
+  $: notes = document.notes;
+  $: annotate = new URL("annotate/", canonicalUrl(document)).href;
+</script>
+
+<SidebarGroup>
+  <SidebarItem slot="title">
+    <Note16 />
+    {$_("sidebar.toc.notes")}
+  </SidebarItem>
+
+  <ol class="notes">
+    {#each notes as note}
+      <li>
+        <SidebarItem href={noteUrl(document, note).href} small>
+          {note.title}
+          <span class="page_number">
+            {$_("sidebar.toc.pageAbbrev")}
+            {note.page_number + 1}</span
+          >
+        </SidebarItem>
+      </li>
+    {:else}
+      <Empty>
+        <Note24 />
+        {#if document.edit_access}
+          <p>
+            <a href={annotate}> {$_("notes.cta")}</a>
+          </p>
+        {:else}
+          <p>{$_("notes.empty")}</p>
+        {/if}
+      </Empty>
+    {/each}
+  </ol>
+</SidebarGroup>
+
+<style>
+  ol {
+    list-style: none;
+    padding: 0;
+  }
+  span.page_number {
+    color: var(--gray-4);
+    font-size: var(--font-s);
+  }
+</style>
diff --git a/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte b/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte
index 91b666490..477b5752d 100644
--- a/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte
+++ b/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte
@@ -9,73 +9,34 @@
   import SidebarItem from "@/lib/components/sidebar/SidebarItem.svelte";
 
   import { pageUrl } from "$lib/api/documents";
-  import { noteUrl } from "$lib/api/notes";
 
   export let document: Document;
-  export let notes: Note[] = [];
-  export let sections: Section[] = [];
 
-  $: toc = group(sections, notes);
-  $: empty = notes.length + sections.length === 0;
-
-  function group(sections: Section[], notes: Note[]) {
-    let ungrouped: Note[] = [...notes];
-
-    const grouped = sections
-      .reverse()
-      .map((section) => {
-        const group = {
-          section,
-          notes: notes.filter((n) => n.page_number >= section.page_number),
-        };
-
-        ungrouped = ungrouped.filter(
-          (n) => n.page_number < section.page_number,
-        );
-
-        return group;
-      })
-      .reverse();
-
-    return { ungrouped, grouped };
-  }
+  $: sections = document.sections;
+  $: empty = sections.length === 0;
 </script>
 
 <SidebarGroup>
   <SidebarItem slot="title">
     <ListOrdered16 />
-    {$_("sidebar.toc.title")}
+    {$_("sidebar.toc.sections")}
   </SidebarItem>
 
   <ol>
-    {#each toc.ungrouped as note}
+    {#each sections as section}
       <li>
-        <SidebarItem href={noteUrl(document, note).href} small>
-          {note.title}
+        <SidebarItem href={pageUrl(document, section.page_number).href}>
+          {section.title}
+
           <span class="page_number">
             {$_("sidebar.toc.pageAbbrev")}
-            {note.page_number + 1}</span
+            {section.page_number + 1}</span
           >
         </SidebarItem>
       </li>
     {/each}
   </ol>
 
-  <ol>
-    {#each toc.grouped as { section, notes }}
-      <li>
-        <SidebarItem href={pageUrl(document, section.page_number).href}>
-          {section.title}
-        </SidebarItem>
-        <ol class="notes">
-          {#each notes as note}
-            <SidebarItem small>{note.title}</SidebarItem>
-          {/each}
-        </ol>
-      </li>
-    {/each}
-  </ol>
-
   {#if empty}
     <Empty icon={ListOrdered24}>
       <p>{$_("sidebar.toc.empty")}</p>

From d7c7505708a44fc41a5c2a8ceb22f5e895c5932c Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 30 May 2024 18:27:54 -0400
Subject: [PATCH 22/25] Put data and tags together

---
 .../documents/[id]-[slug]/sidebar/Data.svelte | 25 ++++++-------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/routes/documents/[id]-[slug]/sidebar/Data.svelte b/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
index f1592f99e..6eae7c199 100644
--- a/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
+++ b/src/routes/documents/[id]-[slug]/sidebar/Data.svelte
@@ -31,26 +31,17 @@
     </Empty>
   {/if}
 
-  {#if tags}
-    <div class="tags">
-      <SidebarItem>
-        <h4>{$_("sidebar.data.tags")}</h4>
-      </SidebarItem>
-
-      <Flex wrap>
+  <Flex direction="column">
+    {#if tags}
+      <Flex wrap class="tags">
         {#each tags as tag}
           <KV tag value={tag} href={search.searchUrl(search.tag(tag)).href} />
         {/each}
       </Flex>
-    </div>
-  {/if}
+    {/if}
 
-  {#if data.length}
-    <div class="data">
-      <SidebarItem>
-        <h4>{$_("sidebar.data.data")}</h4>
-      </SidebarItem>
-      <Flex wrap>
+    {#if data.length}
+      <Flex wrap class="data">
         {#each data as [key, values]}
           {#each values as value}
             <KV
@@ -61,6 +52,6 @@
           {/each}
         {/each}
       </Flex>
-    </div>
-  {/if}
+    {/if}
+  </Flex>
 </SidebarGroup>

From 8193f88fa4af68a56a8cdedead68815c5812cc60 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Fri, 31 May 2024 09:16:32 -0400
Subject: [PATCH 23/25] one underscore

---
 src/lib/utils/search.ts            | 2 +-
 src/lib/utils/tests/search.test.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/utils/search.ts b/src/lib/utils/search.ts
index 55f5b00b3..e168db84a 100644
--- a/src/lib/utils/search.ts
+++ b/src/lib/utils/search.ts
@@ -38,5 +38,5 @@ export function tag(t: string): string {
  * @returns formatted query
  */
 export function kv(key: string, value: string): string {
-  return `+data__${key}:"${value}"`;
+  return `+data_${key}:"${value}"`;
 }
diff --git a/src/lib/utils/tests/search.test.ts b/src/lib/utils/tests/search.test.ts
index 81132a7eb..ab57b0525 100644
--- a/src/lib/utils/tests/search.test.ts
+++ b/src/lib/utils/tests/search.test.ts
@@ -30,7 +30,7 @@ describe("search utilities", () => {
 
   test("kv", () => {
     expect(kv("parties", "David Cameron")).toStrictEqual(
-      `+data__parties:"David Cameron"`,
+      `+data_parties:"David Cameron"`,
     );
   });
 });

From 7330acfbbba2bcd6ef93a0cd70c53ae41dee21e2 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Fri, 31 May 2024 15:26:04 -0400
Subject: [PATCH 24/25] Apply suggestions from code review

Co-authored-by: Allan Lasser <lasser.allan@gmail.com>
---
 src/langs/json/en.json                                   | 2 +-
 src/lib/components/documents/PDFPage.svelte              | 1 -
 src/routes/documents/[id]-[slug]/sidebar/Notes.svelte    | 2 +-
 src/routes/documents/[id]-[slug]/sidebar/Sections.svelte | 2 +-
 4 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 01ba15168..c07aa8438 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -856,7 +856,7 @@
     }
   },
   "notes": {
-    "empty": "No notes",
+    "empty": "Add notes to highlight and comment on your document",
     "cta": "Annotate this document"
   },
   "viewer": {
diff --git a/src/lib/components/documents/PDFPage.svelte b/src/lib/components/documents/PDFPage.svelte
index dc068cc5d..e1f72ace4 100644
--- a/src/lib/components/documents/PDFPage.svelte
+++ b/src/lib/components/documents/PDFPage.svelte
@@ -111,7 +111,6 @@ Selectable text can be rendered in one of two ways:
       container.style.setProperty("--width", Math.floor(viewport.width) + "px");
     }
 
-    console.log(canvas, viewport);
 
     // store the task, return the promise
     renderTask = page.render({
diff --git a/src/routes/documents/[id]-[slug]/sidebar/Notes.svelte b/src/routes/documents/[id]-[slug]/sidebar/Notes.svelte
index 9ef89105b..122522b6e 100644
--- a/src/routes/documents/[id]-[slug]/sidebar/Notes.svelte
+++ b/src/routes/documents/[id]-[slug]/sidebar/Notes.svelte
@@ -27,7 +27,7 @@
     {#each notes as note}
       <li>
         <SidebarItem href={noteUrl(document, note).href} small>
-          {note.title}
+          <span class="note_title">{note.title}</span>
           <span class="page_number">
             {$_("sidebar.toc.pageAbbrev")}
             {note.page_number + 1}</span
diff --git a/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte b/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte
index 477b5752d..4ebf8e756 100644
--- a/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte
+++ b/src/routes/documents/[id]-[slug]/sidebar/Sections.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Document, Note, Section } from "$lib/api/types";
+  import type { Document } from "$lib/api/types";
 
   import { _ } from "svelte-i18n";
   import { ListOrdered16, ListOrdered24 } from "svelte-octicons";

From 446877306e8fad783c2d236a491654bf3ca46e19 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Fri, 31 May 2024 15:28:31 -0400
Subject: [PATCH 25/25] Handle long titles

---
 src/routes/documents/[id]-[slug]/sidebar/Notes.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/routes/documents/[id]-[slug]/sidebar/Notes.svelte b/src/routes/documents/[id]-[slug]/sidebar/Notes.svelte
index 122522b6e..26bf931dc 100644
--- a/src/routes/documents/[id]-[slug]/sidebar/Notes.svelte
+++ b/src/routes/documents/[id]-[slug]/sidebar/Notes.svelte
@@ -54,8 +54,14 @@
     list-style: none;
     padding: 0;
   }
+
   span.page_number {
     color: var(--gray-4);
     font-size: var(--font-s);
   }
+
+  .note_title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 </style>