From a1f1fa4e442476f54ce4cd7bb9e506856074cb74 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Wed, 4 Dec 2024 10:49:31 -0500
Subject: [PATCH] Fix search tab in reading toolbar

---
 src/langs/json/en.json                        |  2 +-
 .../components/viewer/ReadingToolbar.svelte   | 36 ++++++++++++-------
 src/lib/components/viewer/Search.svelte       |  5 +--
 .../viewer/stories/Search.stories.svelte      |  2 --
 .../viewer/stories/Viewer.stories.svelte      | 26 +++++++++++++-
 5 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 484fbec88..cffe80ee6 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -325,7 +325,7 @@
     "notes": "Notes",
     "annotating": "Annotate",
     "redacting": "Redact",
-    "search": "Search"
+    "search": "Results"
   },
   "zoom": {
     "zoom": "Zoom",
diff --git a/src/lib/components/viewer/ReadingToolbar.svelte b/src/lib/components/viewer/ReadingToolbar.svelte
index 6481e5453..8aaaacc36 100644
--- a/src/lib/components/viewer/ReadingToolbar.svelte
+++ b/src/lib/components/viewer/ReadingToolbar.svelte
@@ -54,7 +54,14 @@ Assumes it's a child of a ViewerContext
     SEARCH_MENU: width < remToPx(24),
   };
 
-  const readModes: Map<ReadMode, string> = new Map([
+  const readModeTabs: Map<ReadMode, string> = new Map([
+    ["document", $_("mode.document")],
+    ["text", $_("mode.text")],
+    ["grid", $_("mode.grid")],
+    ["notes", $_("mode.notes")],
+  ]);
+
+  const readModeDropdownItems: Map<ReadMode, string> = new Map([
     ["document", $_("mode.document")],
     ["text", $_("mode.text")],
     ["grid", $_("mode.grid")],
@@ -74,6 +81,7 @@ Assumes it's a child of a ViewerContext
     notes: Note16,
     annotating: Comment16,
     redacting: EyeClosed16,
+    search: Search16,
   };
 </script>
 
@@ -81,7 +89,7 @@ Assumes it's a child of a ViewerContext
   <svelte:fragment slot="left">
     {#if BREAKPOINTS.READ_MENU}
       <div class="tabs" role="tablist">
-        {#each readModes.entries() as [value, name]}
+        {#each readModeTabs.entries() as [value, name]}
           <Tab
             active={$mode === value}
             href={getViewerHref({ document, mode: value, embed, query })}
@@ -95,19 +103,23 @@ Assumes it's a child of a ViewerContext
       <Dropdown position="bottom-start">
         <SidebarItem slot="anchor">
           <svelte:component this={icons[$mode]} slot="start" />
-          {Array.from(readModes ?? []).find(([value]) => value === $mode)?.[1]}
+          {Array.from(readModeDropdownItems ?? []).find(
+            ([value]) => value === $mode,
+          )?.[1]}
           <ChevronDown12 slot="end" />
         </SidebarItem>
         <Menu slot="default" let:close>
-          {#each readModes.entries() as [value, name]}
-            <MenuItem
-              selected={$mode === value}
-              href={getViewerHref({ document, mode: value, embed })}
-              on:click={close}
-            >
-              <svelte:component this={icons[value]} slot="icon" />
-              {name}
-            </MenuItem>
+          {#each readModeDropdownItems.entries() as [value, name]}
+            {#if value !== "search"}
+              <MenuItem
+                selected={$mode === value}
+                href={getViewerHref({ document, mode: value, embed })}
+                on:click={close}
+              >
+                <svelte:component this={icons[value]} slot="icon" />
+                {name}
+              </MenuItem>
+            {/if}
           {/each}
           {#if BREAKPOINTS.WRITE_MENU && canWrite}
             {#each writeModes as [value, name]}
diff --git a/src/lib/components/viewer/Search.svelte b/src/lib/components/viewer/Search.svelte
index 06e94060c..01db41d56 100644
--- a/src/lib/components/viewer/Search.svelte
+++ b/src/lib/components/viewer/Search.svelte
@@ -74,10 +74,11 @@ Assumes it's a child of a ViewerContext
     display: flex;
     flex-flow: column;
     align-items: center;
-    gap: 2rem;
+    gap: 1rem;
     margin: 0 auto;
+    width: 100%;
     max-width: 38.0625rem;
-    padding: 2rem 0;
+    padding: 1rem 1rem;
     min-height: 100%;
   }
   .card {
diff --git a/src/lib/components/viewer/stories/Search.stories.svelte b/src/lib/components/viewer/stories/Search.stories.svelte
index e18c448f5..10e0f3b92 100644
--- a/src/lib/components/viewer/stories/Search.stories.svelte
+++ b/src/lib/components/viewer/stories/Search.stories.svelte
@@ -13,10 +13,8 @@
   import text from "@/test/fixtures/documents/document.txt.json";
 
   import ViewerContext from "../ViewerContext.svelte";
-  import type { APIResponse, Highlights } from "@/lib/api/types";
 
   const query = "Trump";
-  const empty: APIResponse<Highlights, null> = { data: {} };
 </script>
 
 <Story
diff --git a/src/lib/components/viewer/stories/Viewer.stories.svelte b/src/lib/components/viewer/stories/Viewer.stories.svelte
index 19b929295..a3b7d2451 100644
--- a/src/lib/components/viewer/stories/Viewer.stories.svelte
+++ b/src/lib/components/viewer/stories/Viewer.stories.svelte
@@ -7,7 +7,7 @@
 
   import doc from "@/test/fixtures/documents/document-expanded.json";
   import txt from "@/test/fixtures/documents/document.txt.json";
-  import Note from "../Note.svelte";
+  import { searchWithin } from "@/test/handlers/documents";
 
   const document = doc as Document;
 
@@ -77,6 +77,30 @@
     },
   }}
 />
+<Story
+  name="Search"
+  parameters={{
+    msw: { handlers: [searchWithin.data] },
+    sveltekit_experimental: {
+      stores: {
+        page: {
+          url: new URL(
+            `https://www.dev.documentcloud.org/documents/20000040-the-santa-anas/?q=Trump`,
+          ),
+        },
+      },
+    },
+  }}
+  args={{
+    ...args,
+    mode: "search",
+    document: {
+      ...document,
+      edit_access: true,
+      notes: document.notes?.map((note) => ({ ...note, edit_access: true })),
+    },
+  }}
+/>
 
 <style>
   .vh {