Move Search.svelte into forms because it's a form. Implement viewer m…

…ode switching.

src/lib/api/documents.ts

@@ -17,6 +17,8 @@ import { isOrg } from "@/api/types/orgAndUser";
 import { APP_URL, BASE_API_URL, CSRF_HEADER_NAME } from "@/config/config.js";
 import { isErrorCode } from "../utils";
 
+export const MODES = new Set(["document", "text", "thumbnails", "notes"]);
+
 /**
  * Search documents
  * https://www.documentcloud.org/help/search/

src/lib/api/types.d.ts

@@ -15,11 +15,13 @@ export type Access = "public" | "private" | "organization"; // https://www.docum
 
 export type Data = Record<string, string[]>;
 
+export type Highlights = Record<string, string[]>;
+
 export type Status = "success" | "readable" | "pending" | "error" | "nofile"; // https://www.documentcloud.org/help/api#statuses
 
 export type Sizes = "thumbnail" | "small" | "normal" | "large" | "xlarge";
 
-export type Highlights = Record<string, string[]>;
+export type ViewerMode = "document" | "text" | "thumbnails" | "notes";
 
 export interface NoteHighlight {
   title: string[];

src/lib/components/layouts/stories/MainLayout.stories.svelte

@@ -27,7 +27,7 @@
   import ResultsList from "../../documents/ResultsList.svelte";
   import ContentLayout from "../ContentLayout.svelte";
   import PageToolbar from "../../common/PageToolbar.svelte";
-  import Search from "../../inputs/Search.svelte";
+  import Search from "../../forms/Search.svelte";
 
   import { addons } from "@/test/handlers/addons";
 

src/routes/app/+page.svelte

@@ -11,7 +11,7 @@
   import MainLayout from "$lib/components/layouts/MainLayout.svelte";
   import ContentLayout from "$lib/components/layouts/ContentLayout.svelte";
   import PageToolbar from "$lib/components/common/PageToolbar.svelte";
-  import Search from "$lib/components/inputs/Search.svelte";
+  import Search from "@/lib/components/forms/Search.svelte";
   import Empty from "$lib/components/common/Empty.svelte";
   import Button from "$lib/components/common/Button.svelte";
   import SignedIn from "$lib/components/common/SignedIn.svelte";

src/routes/app/add-ons/+page.svelte

@@ -6,7 +6,7 @@
   import { Hourglass24, Plug24 } from "svelte-octicons";
 
   import Paginator from "@/common/Paginator.svelte";
-  import Search from "@/lib/components/inputs/Search.svelte";
+  import Search from "@/lib/components/forms/Search.svelte";
   import Pin from "@/common/icons/Pin.svelte";
   import Star from "@/common/icons/Star.svelte";
   import ContentLayout from "$lib/components/layouts/ContentLayout.svelte";

src/routes/app/projects/+page.svelte

@@ -12,7 +12,7 @@
   import PageToolbar from "@/lib/components/common/PageToolbar.svelte";
   import MainLayout from "@/lib/components/layouts/MainLayout.svelte";
   import ContentLayout from "@/lib/components/layouts/ContentLayout.svelte";
-  import Search from "@/lib/components/inputs/Search.svelte";
+  import Search from "@/lib/components/forms/Search.svelte";
   import SidebarItem from "@/lib/components/sidebar/SidebarItem.svelte";
   import ProjectListItem from "@/lib/components/projects/ProjectListItem.svelte";
 

src/routes/app/projects/[id]-[slug]/+page.svelte

@@ -16,7 +16,7 @@
   import Empty from "@/lib/components/common/Empty.svelte";
   import Error from "@/lib/components/common/Error.svelte";
   import { projectSearchUrl } from "@/lib/utils/search";
-  import Search from "@/lib/components/inputs/Search.svelte";
+  import Search from "@/lib/components/forms/Search.svelte";
   import ResultsList, {
     selected,
     total,

src/routes/documents/[id]-[slug]/+page.svelte

@@ -1,28 +1,45 @@
 <script lang="ts">
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
+
   import ContentLayout from "$lib/components/layouts/ContentLayout.svelte";
   import PageToolbar from "$lib/components/common/PageToolbar.svelte";
   import TextPage from "$lib/components/documents/TextPage.svelte";
 
   export let data;
 
-  const modes = [
+  const modes = new Map([
     ["document", "Document"],
     ["text", "Text"],
     ["thumbnails", "Thumbnails"],
     ["notes", "Notes"],
-  ];
+  ]);
+
+  $: mode = modes.has(data.mode) ? data.mode : "document";
+  $: text = data.text;
+
+  function setMode(e) {
+    const mode = e.target.value;
+    const u = new URL($page.url);
+
+    u.searchParams.set("mode", mode);
+
+    goto(u);
+  }
 </script>
 
 <ContentLayout>
-  {#await data.text then { pages }}
-    {#each pages as { page, contents }}
-      <TextPage {page} {contents} />
-    {/each}
-  {/await}
+  {#if mode === "text"}
+    {#await text then { pages }}
+      {#each pages as { page, contents }}
+        <TextPage {page} {contents} />
+      {/each}
+    {/await}
+  {/if}
 
   <PageToolbar slot="footer">
-    <select name="mode" slot="left">
-      {#each modes as [value, name]}
+    <select name="mode" slot="left" value={mode} on:change={setMode}>
+      {#each modes.entries() as [value, name]}
         <option {value}>{name}</option>
       {/each}
     </select>

src/routes/documents/[id]-[slug]/+page.ts

@@ -1,11 +1,27 @@
+import type { DocumentText, ViewerMode } from "$lib/api/types.js";
 import * as documents from "$lib/api/documents";
 
 export async function load({ fetch, parent, url }) {
-  const mode = url.searchParams.get("mode") ?? "document";
-  const { document } = await parent();
+  let mode: ViewerMode =
+    (url.searchParams.get("mode") as ViewerMode) ?? "document";
+
+  if (!documents.MODES.has(mode)) {
+    mode = "document";
+  }
+
+  // only load text in text mode
+  let text: Promise<DocumentText> = Promise.resolve({
+    updated: 0,
+    pages: [],
+  });
+
+  if (mode === "text") {
+    const { document } = await parent();
+    text = documents.text(document, fetch);
+  }
 
   return {
     mode,
-    text: documents.text(document, fetch),
+    text,
   };
 }