From 39ae6c20e078939f739dbfa1c5a9eb5a291ddfd2 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Wed, 20 Nov 2024 16:13:49 -0500
Subject: [PATCH 1/4] Fix viewer search and consolidate search routing, too

---
 src/lib/components/forms/Search.svelte        | 44 ++++++++++++++++---
 src/lib/components/viewer/PDFPage.svelte      |  9 ++--
 .../components/viewer/ReadingToolbar.svelte   |  1 -
 .../viewer/stories/PDFPage.stories.svelte     |  5 ++-
 .../(app)/documents/[id]-[slug]/+page.svelte  |  3 +-
 src/routes/(app)/projects/+page.svelte        | 24 ----------
 6 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/src/lib/components/forms/Search.svelte b/src/lib/components/forms/Search.svelte
index 4d35fcfdc..46b493b24 100644
--- a/src/lib/components/forms/Search.svelte
+++ b/src/lib/components/forms/Search.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
+  import type { Maybe, Nullable } from "$lib/api/types";
+
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
+
   import { Search16, XCircleFill24 } from "svelte-octicons";
   import { _ } from "svelte-i18n";
-  import type { Maybe, Nullable } from "$lib/api/types";
 
-  export let name: Nullable<string> = null;
+  export let name: string = "q";
   export let query: string = "";
   export let placeholder: string = $_("common.search");
   export let action: Maybe<string> = undefined;
@@ -11,14 +15,43 @@
   let input: HTMLInputElement;
   let form: HTMLFormElement;
 
-  function clear() {
+  function clear(): Promise<void> {
     query = "";
     input.focus();
+
+    const url = new URL($page.url);
+    url.searchParams.delete(name);
+    return goto(url);
+  }
+
+  function search(e: Event): Promise<void> {
+    e.preventDefault();
+    const form = e.target as HTMLFormElement;
+    const fd = new FormData(form);
+    const q = fd.get(name) as string;
+    const url = new URL($page.url);
+
+    if (q) {
+      url.searchParams.set(name, q);
+    } else {
+      url.searchParams.delete(name);
+    }
+
+    return goto(url);
   }
 </script>
 
-<form class="container" {action} on:submit on:reset bind:this={form}>
-  <label for="query" title="Search"><Search16 /></label>
+<form
+  class="container"
+  {action}
+  on:submit={search}
+  on:reset={clear}
+  bind:this={form}
+>
+  <label for="query" title="Search">
+    <Search16 />
+    <span class="sr-only">{$_("common.search")}</span>
+  </label>
   <input
     type="search"
     id="query"
@@ -29,7 +62,6 @@
     bind:this={input}
     on:change
     on:input
-    on:reset
   />
   <button
     title="Clear Search"
diff --git a/src/lib/components/viewer/PDFPage.svelte b/src/lib/components/viewer/PDFPage.svelte
index 714b9e8d6..4e944d18d 100644
--- a/src/lib/components/viewer/PDFPage.svelte
+++ b/src/lib/components/viewer/PDFPage.svelte
@@ -12,6 +12,8 @@ Selectable text can be rendered in one of two ways:
 <script lang="ts">
   import type { TextPosition } from "$lib/api/types";
 
+  import { page as pageStore } from "$app/stores";
+
   import * as pdfjs from "pdfjs-dist/legacy/build/pdf.mjs";
   import { _ } from "svelte-i18n";
 
@@ -28,9 +30,9 @@ Selectable text can be rendered in one of two ways:
     getDocument,
     getCurrentMode,
     getPDF,
-    getQuery,
   } from "$lib/components/viewer/ViewerContext.svelte";
-  import { fitPage, getNotes } from "@/lib/utils/viewer";
+  import { getQuery } from "$lib/utils/search";
+  import { fitPage, getNotes } from "$lib/utils/viewer";
 
   export let page_number: number; // 1-indexed
 
@@ -38,11 +40,11 @@ Selectable text can be rendered in one of two ways:
   export let width: number;
   export let height: number;
   export let text: TextPosition[] = [];
+  export let query: string = getQuery($pageStore.url, "q");
 
   const documentStore = getDocument();
   const mode = getCurrentMode();
   const pdf = getPDF();
-  const query = getQuery();
 
   // make hidden things visible, for debugging
   export let debug = false;
@@ -60,6 +62,7 @@ Selectable text can be rendered in one of two ways:
   // visibility, for loading optimization
   let visible: boolean = false;
 
+  $: query = getQuery($pageStore.url, "q");
   $: document = $documentStore;
   $: aspect = height / width;
   $: orientation = height > width ? "vertical" : "horizontal";
diff --git a/src/lib/components/viewer/ReadingToolbar.svelte b/src/lib/components/viewer/ReadingToolbar.svelte
index 956512abd..c51417566 100644
--- a/src/lib/components/viewer/ReadingToolbar.svelte
+++ b/src/lib/components/viewer/ReadingToolbar.svelte
@@ -32,7 +32,6 @@ Assumes it's a child of a ViewerContext
   import {
     getCurrentMode,
     getDocument,
-    getPDFProgress,
     getQuery,
     isEmbedded,
   } from "$lib/components/viewer/ViewerContext.svelte";
diff --git a/src/lib/components/viewer/stories/PDFPage.stories.svelte b/src/lib/components/viewer/stories/PDFPage.stories.svelte
index a5ec14bb5..f9d1bf8f9 100644
--- a/src/lib/components/viewer/stories/PDFPage.stories.svelte
+++ b/src/lib/components/viewer/stories/PDFPage.stories.svelte
@@ -1,5 +1,6 @@
 <script context="module" lang="ts">
   import type { Document, Section } from "$lib/api/types";
+  import { writable } from "svelte/store";
   import { Story } from "@storybook/addon-svelte-csf";
   import PdfPage from "../PDFPage.svelte";
 
@@ -14,7 +15,6 @@
   import textPositions from "@/test/fixtures/documents/examples/the-santa-anas-p1.position.json";
   import pdfFile from "@/test/fixtures/documents/examples/the-santa-anas.pdf";
   import ViewerContext from "../ViewerContext.svelte";
-  import { writable } from "svelte/store";
 
   const document = { ...doc, edit_access: true } as Document;
 
@@ -59,7 +59,8 @@
 </Story>
 
 <Story name="search results">
-  <ViewerContext {document} pdf={writable(load(url))}>
+  <ViewerContext {document} pdf={writable(load(url))} {query}>
+    <p>Query: {query}</p>
     <PdfPage page_number={1} scale={1.5} {width} {height} />
   </ViewerContext>
 </Story>
diff --git a/src/routes/(app)/documents/[id]-[slug]/+page.svelte b/src/routes/(app)/documents/[id]-[slug]/+page.svelte
index 6fe08087e..3b756cbf2 100644
--- a/src/routes/(app)/documents/[id]-[slug]/+page.svelte
+++ b/src/routes/(app)/documents/[id]-[slug]/+page.svelte
@@ -27,6 +27,7 @@
   $: action = data.action;
   $: addons = data.pinnedAddons;
   $: hasDescription = Boolean(document.description?.trim().length);
+  $: query = data.query || "";
 </script>
 
 <svelte:head>
@@ -65,7 +66,7 @@
   />
 </svelte:head>
 
-<ViewerContext {document} {mode} {text} {asset_url}>
+<ViewerContext {document} {mode} {text} {asset_url} {query}>
   <DocumentLayout {action} {addons} />
 </ViewerContext>
 <GuidedTour />
diff --git a/src/routes/(app)/projects/+page.svelte b/src/routes/(app)/projects/+page.svelte
index 5227c4eb1..12ba9c2d9 100644
--- a/src/routes/(app)/projects/+page.svelte
+++ b/src/routes/(app)/projects/+page.svelte
@@ -49,28 +49,6 @@
     if (cursor) target.searchParams.set("cursor", cursor);
     goto(target);
   }
-
-  function search(e: Event) {
-    e.preventDefault();
-    const form = e.target as HTMLFormElement;
-    const fd = new FormData(form);
-    const q = fd.get("query") as string;
-    const url = new URL($page.url);
-
-    if (q) {
-      url.searchParams.set("query", q);
-    } else {
-      url.searchParams.delete("query");
-    }
-
-    return goto(url);
-  }
-
-  function reset() {
-    const url = new URL($page.url);
-    url.searchParams.delete("query");
-    return goto(url);
-  }
 </script>
 
 <svelte:head>
@@ -104,8 +82,6 @@
         name="query"
         placeholder={$_("projects.placeholder.projects")}
         {query}
-        on:submit={search}
-        on:reset={reset}
       />
     </PageToolbar>
 

From 98d11a5947ac725a7b64b4aad520ebd3c4c3b40e Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Wed, 20 Nov 2024 16:43:48 -0500
Subject: [PATCH 2/4] Fix storybook

---
 .../viewer/stories/PDFPage.stories.svelte     | 23 ++++++++++++++++---
 src/lib/utils/search.ts                       |  5 +++-
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/viewer/stories/PDFPage.stories.svelte b/src/lib/components/viewer/stories/PDFPage.stories.svelte
index f9d1bf8f9..89bd5bc50 100644
--- a/src/lib/components/viewer/stories/PDFPage.stories.svelte
+++ b/src/lib/components/viewer/stories/PDFPage.stories.svelte
@@ -1,5 +1,8 @@
 <script context="module" lang="ts">
-  import type { Document, Section } from "$lib/api/types";
+  import type { Document } from "$lib/api/types";
+
+  import { page } from "$app/stores";
+
   import { writable } from "svelte/store";
   import { Story } from "@storybook/addon-svelte-csf";
   import PdfPage from "../PDFPage.svelte";
@@ -58,9 +61,23 @@
   </ViewerContext>
 </Story>
 
-<Story name="search results">
-  <ViewerContext {document} pdf={writable(load(url))} {query}>
+<Story
+  name="search results"
+  parameters={{
+    sveltekit_experimental: {
+      stores: {
+        page: {
+          url: new URL(
+            `https://www.dev.documentcloud.org/documents/20000040-the-santa-anas/?q=${query}`,
+          ),
+        },
+      },
+    },
+  }}
+>
+  <ViewerContext {document} pdf={writable(load(url))}>
     <p>Query: {query}</p>
+    <p>URL: {$page.url}</p>
     <PdfPage page_number={1} scale={1.5} {width} {height} />
   </ViewerContext>
 </Story>
diff --git a/src/lib/utils/search.ts b/src/lib/utils/search.ts
index 148f97731..6e663372c 100644
--- a/src/lib/utils/search.ts
+++ b/src/lib/utils/search.ts
@@ -73,5 +73,8 @@ export function pageNumber(page: string): number {
 }
 
 export function getQuery(url: URL, param: string = "q"): string {
-  return url.searchParams.get(param) ?? "";
+  if (!url) {
+    console.error("Missing URL");
+  }
+  return url?.searchParams?.get(param) ?? "";
 }

From 37ba0dbe5f6216ea5aa15228368bf41ccdb6d790 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 21 Nov 2024 10:43:30 -0500
Subject: [PATCH 3/4] Clean types and imports

---
 src/lib/components/forms/Search.svelte | 2 +-
 src/lib/utils/search.ts                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/forms/Search.svelte b/src/lib/components/forms/Search.svelte
index 46b493b24..d38672ff9 100644
--- a/src/lib/components/forms/Search.svelte
+++ b/src/lib/components/forms/Search.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Maybe, Nullable } from "$lib/api/types";
+  import type { Maybe } from "$lib/api/types";
 
   import { goto } from "$app/navigation";
   import { page } from "$app/stores";
diff --git a/src/lib/utils/search.ts b/src/lib/utils/search.ts
index 6e663372c..97dc85714 100644
--- a/src/lib/utils/search.ts
+++ b/src/lib/utils/search.ts
@@ -72,7 +72,7 @@ export function pageNumber(page: string): number {
   return number;
 }
 
-export function getQuery(url: URL, param: string = "q"): string {
+export function getQuery(url?: Nullable<URL>, param: string = "q"): string {
   if (!url) {
     console.error("Missing URL");
   }

From 014fa7912aa2c325eb27977ac0364cccb0cb0199 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 21 Nov 2024 11:16:43 -0500
Subject: [PATCH 4/4] Only one way to get a search query

---
 src/lib/components/viewer/ReadingToolbar.svelte    |  7 +++++--
 src/lib/components/viewer/Text.svelte              | 14 ++++++--------
 src/lib/components/viewer/ViewerContext.svelte     |  6 ------
 .../(app)/documents/[id]-[slug]/+page.svelte       |  2 +-
 src/routes/embed/documents/[id]-[slug]/+page.ts    |  2 +-
 5 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/viewer/ReadingToolbar.svelte b/src/lib/components/viewer/ReadingToolbar.svelte
index c51417566..c50abaefe 100644
--- a/src/lib/components/viewer/ReadingToolbar.svelte
+++ b/src/lib/components/viewer/ReadingToolbar.svelte
@@ -5,6 +5,8 @@ Assumes it's a child of a ViewerContext
 <script lang="ts">
   import type { ReadMode, WriteMode } from "$lib/api/types";
 
+  import { page } from "$app/stores";
+
   import { _ } from "svelte-i18n";
   import {
     Comment16,
@@ -29,17 +31,18 @@ Assumes it's a child of a ViewerContext
 
   import { remToPx } from "$lib/utils/layout";
   import { getViewerHref } from "$lib/utils/viewer";
+  import { getQuery } from "$lib/utils/search";
   import {
     getCurrentMode,
     getDocument,
-    getQuery,
     isEmbedded,
   } from "$lib/components/viewer/ViewerContext.svelte";
 
+  export let query = getQuery($page.url, "q");
+
   let width: number;
 
   const documentStore = getDocument();
-  const query = getQuery();
   const mode = getCurrentMode();
   const embed = isEmbedded();
 
diff --git a/src/lib/components/viewer/Text.svelte b/src/lib/components/viewer/Text.svelte
index 7066e8029..d6f867a42 100644
--- a/src/lib/components/viewer/Text.svelte
+++ b/src/lib/components/viewer/Text.svelte
@@ -5,21 +5,19 @@
   Assumes it's a child of a ViewerContext
 -->
 <script lang="ts">
+  import { page } from "$app/stores";
   import { onMount } from "svelte";
 
   import Page from "./Page.svelte";
-  import {
-    getText,
-    getCurrentPage,
-    getQuery,
-    getZoom,
-  } from "./ViewerContext.svelte";
+  import { getText, getCurrentPage, getZoom } from "./ViewerContext.svelte";
   import { scrollToPage } from "$lib/utils/scroll";
   import { highlight } from "$lib/utils/search";
+  import { getQuery } from "$lib/utils/search";
+
+  export let query = getQuery($page.url, "q");
 
-  const text = getText();
-  const query = getQuery();
   const currentPage = getCurrentPage();
+  const text = getText();
   const zoom = getZoom();
 
   onMount(async () => {
diff --git a/src/lib/components/viewer/ViewerContext.svelte b/src/lib/components/viewer/ViewerContext.svelte
index 57fc6f805..197fea333 100644
--- a/src/lib/components/viewer/ViewerContext.svelte
+++ b/src/lib/components/viewer/ViewerContext.svelte
@@ -46,10 +46,6 @@ layouts, stories, and tests.
     return getContext("asset_url");
   }
 
-  export function getQuery(): string {
-    return getContext("query") ?? "";
-  }
-
   export function isEmbedded(): boolean {
     // are we embedded?
     return getContext("embed") ?? false;
@@ -99,7 +95,6 @@ layouts, stories, and tests.
   export let embed: boolean = false;
   export let page: number = 1;
   export let mode: ViewerMode = "document";
-  export let query: string = "";
   export let zoom: Zoom = 1;
   export let errors: Error[] = [];
 
@@ -123,7 +118,6 @@ layouts, stories, and tests.
   setContext("text", text);
   setContext("asset_url", asset_url);
   setContext("embed", embed);
-  setContext("query", query);
   setContext("newNote", writable(null));
   setContext("currentNote", writable(note));
   setContext("currentPage", writable(page));
diff --git a/src/routes/(app)/documents/[id]-[slug]/+page.svelte b/src/routes/(app)/documents/[id]-[slug]/+page.svelte
index 3b756cbf2..60a4d8d5b 100644
--- a/src/routes/(app)/documents/[id]-[slug]/+page.svelte
+++ b/src/routes/(app)/documents/[id]-[slug]/+page.svelte
@@ -66,7 +66,7 @@
   />
 </svelte:head>
 
-<ViewerContext {document} {mode} {text} {asset_url} {query}>
+<ViewerContext {document} {mode} {text} {asset_url}>
   <DocumentLayout {action} {addons} />
 </ViewerContext>
 <GuidedTour />
diff --git a/src/routes/embed/documents/[id]-[slug]/+page.ts b/src/routes/embed/documents/[id]-[slug]/+page.ts
index 6001fa11c..e6a8c54d0 100644
--- a/src/routes/embed/documents/[id]-[slug]/+page.ts
+++ b/src/routes/embed/documents/[id]-[slug]/+page.ts
@@ -25,7 +25,7 @@ export async function load({ fetch, url, params, depends }) {
 
   let settings: Partial<EmbedSettings> = getEmbedSettings(url.searchParams);
 
-  const query = getQuery(url);
+  const query = getQuery(url, "q");
 
   return {
     document,