Move text into document route, add an api method

src/common/Dropdown2.svelte

@@ -130,7 +130,7 @@
     position: relative;
   }
   .dropdownContainer.open {
-    z-index: var(--menuActive);
+    z-index: var(--menuActive, 16);
   }
   .title {
     display: block;
@@ -143,7 +143,7 @@
     border: 1px solid rgba(0, 0, 0, 0.1);
   }
   .title:hover {
-    background: var(--light-primary);
+    background: var(--light-primary, #eff7ff);
   }
   .title.open {
     background: var(--primary);
@@ -187,7 +187,7 @@
   }
 
   .overlay {
-    z-index: var(--menuShim);
+    z-index: var(--menuShim, 14);
     position: fixed;
     top: 0;
     left: 0;

src/lib/api/documents.test.ts

@@ -1,4 +1,10 @@
-import type { Document, DocumentUpload, Pending, Sizes } from "./types";
+import type {
+  Document,
+  DocumentText,
+  DocumentUpload,
+  Pending,
+  Sizes,
+} from "./types";
 
 import { vi, test as base, describe, expect, afterEach } from "vitest";
 import { APP_URL, DC_BASE, IMAGE_WIDTHS_ENTRIES } from "@/config/config.js";
@@ -31,11 +37,36 @@ const test = base.extend({
 
     await use(pending);
   },
+
+  text: async ({}, use: Use<DocumentText>) => {
+    const { default: text } = await import(
+      "./fixtures/documents/document.txt.json"
+    );
+
+    await use(text);
+  },
 });
 
 describe("document fetching", () => {
   test.todo("documents.get");
   test.todo("documents.search");
+
+  test("documents.text", async ({ document, text }) => {
+    const mockFetch = vi.fn().mockImplementation(async () => ({
+      ok: true,
+      async json() {
+        return text;
+      },
+    }));
+
+    const endpoint = documents.jsonUrl(document);
+
+    documents.text(document, mockFetch).then((t) => {
+      expect(t).toMatchObject(text);
+    });
+
+    expect(mockFetch).toHaveBeenCalledWith(endpoint);
+  });
 });
 
 describe("document uploads and processing", () => {

src/lib/api/documents.ts

@@ -3,6 +3,7 @@
  */
 import type {
   Document,
+  DocumentText,
   DocumentUpload,
   DocumentResults,
   Pending,
@@ -86,6 +87,20 @@ export async function get(
   return resp.json();
 }
 
+export async function text(
+  document: Document,
+  fetch = globalThis.fetch,
+): Promise<DocumentText> {
+  const url = jsonUrl(document);
+  const resp = await fetch(url).catch(console.error);
+
+  if (!resp || isErrorCode(resp.status)) {
+    return { updated: 0, pages: [] };
+  }
+
+  return resp.json();
+}
+
 /**
  * Create new documents in a batch (or a batch of one).
  *

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+  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 = [
+    ["document", "Document"],
+    ["text", "Text"],
+    ["thumbnails", "Thumbnails"],
+    ["notes", "Notes"],
+  ];
+</script>
+
+<ContentLayout>
+  {#await data.text then { pages }}
+    {#each pages as { page, contents }}
+      <TextPage {page} {contents} />
+    {/each}
+  {/await}
+
+  <PageToolbar slot="footer">
+    <select name="mode" slot="left">
+      {#each modes as [value, name]}
+        <option {value}>{name}</option>
+      {/each}
+    </select>
+  </PageToolbar>
+</ContentLayout>

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

@@ -0,0 +1,11 @@
+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();
+
+  return {
+    mode,
+    text: documents.text(document, fetch),
+  };
+}