From bab0a5ebf208c932c2c3e5d7561e9c7d6b9f58b1 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 29 Feb 2024 14:09:47 -0500
Subject: [PATCH 1/9] Creates Search component

---
 src/lib/components/Search.svelte              | 91 +++++++++++++++++++
 .../components/stories/Search.stories.svelte  | 27 ++++++
 2 files changed, 118 insertions(+)
 create mode 100644 src/lib/components/Search.svelte
 create mode 100644 src/lib/components/stories/Search.stories.svelte

diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
new file mode 100644
index 000000000..b60959d78
--- /dev/null
+++ b/src/lib/components/Search.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+  import { Search24, XCircleFill24 } from "svelte-octicons";
+  import Button from "./common/Button.svelte";
+
+  export let query: string = "";
+  let input: HTMLInputElement;
+
+  function clear() {
+    query = "";
+    input.focus();
+  }
+</script>
+
+<form class="container" on:submit|preventDefault>
+  <label for="query" title="Search"><Search24 /></label>
+  <input
+    id="query"
+    name="query"
+    bind:value={query}
+    bind:this={input}
+    on:change
+    autocomplete="off"
+    placeholder="Search…"
+  />
+  <button
+    title="Clear Search"
+    type="reset"
+    class:hidden={!query}
+    on:click={clear}
+  >
+    <XCircleFill24 />
+  </button>
+</form>
+
+<style>
+  form {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    gap: 0.75rem;
+
+    color: var(--gray-5, #233944);
+    fill: var(--gray-5, #233944);
+  }
+  input {
+    flex: 1 0 0;
+    appearance: none;
+    padding: 0.25rem;
+    border: none;
+    font-family: var(--font-sans, "Source Sans Pro");
+    font-weight: var(--font-regular, 400);
+    font-size: var(--font-m, 1rem);
+  }
+  input::placeholder {
+    color: var(--gray-4, #5c717c);
+  }
+  label {
+    display: flex;
+    align-items: center;
+  }
+  button {
+    flex: 0 0 0;
+    appearance: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    padding: 0;
+    font-family: var(--font-sans, "Source Sans Pro");
+    font-weight: var(--font-regular, 400);
+    font-size: var(--font-m, 1rem);
+    background: transparent;
+    fill: var(--gray-3, #99a8b3);
+    cursor: pointer;
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(0) rotate(0deg);
+    transition:
+      transform 0.25s ease-in-out,
+      opacity 0.125s linear,
+      visibility 0s;
+  }
+  button.hidden {
+    visibility: hidden;
+    opacity: 0;
+    transform: translateX(100%) rotate(90deg);
+    transition:
+      transform 0.25s ease-in-out,
+      opacity 0.125s linear,
+      visibility 0s linear 0.25s;
+  }
+</style>
diff --git a/src/lib/components/stories/Search.stories.svelte b/src/lib/components/stories/Search.stories.svelte
new file mode 100644
index 000000000..46c450756
--- /dev/null
+++ b/src/lib/components/stories/Search.stories.svelte
@@ -0,0 +1,27 @@
+<script context="module" lang="ts">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import { action } from "@storybook/addon-actions";
+  import Search from "../Search.svelte";
+
+  export const meta = {
+    title: "Components / Search",
+    component: Search,
+    parameters: { layout: "centered" },
+  };
+
+  const args = {
+    query: '"steve jobs" macintosh',
+  };
+
+  const change = action("Change");
+  const submit = action("Submit");
+</script>
+
+<Template let:args>
+  <div style="width: 24rem">
+    <Search {...args} on:submit={submit} on:change={change} />
+  </div>
+</Template>
+
+<Story name="With Query" {args} />
+<Story name="Without Query" args={{ query: "" }} />

From 55b28187bdf6a4b271067b42bed0e79056a6392c Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 29 Feb 2024 14:10:01 -0500
Subject: [PATCH 2/9] Update styling of DocumentListItem to prevent overflow

---
 src/lib/components/documents/DocumentListItem.svelte | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index 636335838..0aa79e596 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -73,11 +73,13 @@ It's deliberately minimal and can be wrapped in other components to add addition
 
 <style>
   .document-list-item {
+    flex: 1 0 0;
     display: flex;
     max-width: 100%;
-    padding: 0rem 1.25rem;
+    min-width: 0;
     align-items: center;
-    gap: 0.625rem;
+    align-self: stretch;
+    gap: 0.5rem;
   }
 
   .thumbnail {
@@ -104,6 +106,10 @@ It's deliberately minimal and can be wrapped in other components to add addition
     font-style: normal;
     font-weight: var(--font-semibold, 600);
     line-height: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
   }
 
   .meta {
@@ -123,7 +129,7 @@ It's deliberately minimal and can be wrapped in other components to add addition
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 100ch;
+    max-width: 100%;
   }
 
   .actions {

From 924b42290f930399cf40b68517737a289278d531 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 29 Feb 2024 14:16:27 -0500
Subject: [PATCH 3/9] Checkbox styling

---
 src/lib/components/MainLayout.svelte          |  9 +-
 src/lib/components/common/Checkbox.svelte     | 39 ++++----
 .../components/documents/NoDocuments.svelte   | 59 ------------
 .../components/documents/ResultsList.svelte   | 90 +++++++++++++------
 .../stories/ResultsList.stories.svelte        |  4 +-
 .../stories/MainLayout.stories.svelte         | 11 +--
 src/routes/app/+page.svelte                   |  1 +
 7 files changed, 91 insertions(+), 122 deletions(-)
 delete mode 100644 src/lib/components/documents/NoDocuments.svelte

diff --git a/src/lib/components/MainLayout.svelte b/src/lib/components/MainLayout.svelte
index 3fa9ad643..be5cad225 100644
--- a/src/lib/components/MainLayout.svelte
+++ b/src/lib/components/MainLayout.svelte
@@ -107,9 +107,6 @@
     height: 2rem;
     width: auto;
   }
-  .content {
-    padding: 4.0625rem 0;
-  }
   .navigation {
     border-right: 1px solid var(--gray-2, #d8dee2);
   }
@@ -129,6 +126,9 @@
 
     background: var(--gray-1, #f5f6f7);
   }
+  .content {
+    padding: 0;
+  }
 
   /* Start Mobile Styles */
   /* When the viewport is smaller than 1024px, we move both sidebars
@@ -208,9 +208,6 @@
     nav.small {
       display: flex;
     }
-    .content {
-      padding: 0.5rem;
-    }
     .small.overlay {
       position: fixed;
       z-index: 1;
diff --git a/src/lib/components/common/Checkbox.svelte b/src/lib/components/common/Checkbox.svelte
index a5959c95f..905de0748 100644
--- a/src/lib/components/common/Checkbox.svelte
+++ b/src/lib/components/common/Checkbox.svelte
@@ -34,7 +34,7 @@
   label {
     display: flex;
     align-items: center;
-    gap: 0.625rem;
+    gap: 0.5rem;
     align-self: stretch;
   }
 
@@ -45,11 +45,13 @@
   }
 
   span {
-    border: solid 1px var(--gray-3, #bbbbbb);
-    border-radius: 2px;
-    cursor: pointer;
-    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     height: 1.25rem;
+    border: solid 1px var(--gray-4, #5c717c);
+    border-radius: 0.25rem;
+    cursor: pointer;
     flex-shrink: 0;
     transition:
       box-shadow 0.2s ease,
@@ -57,49 +59,44 @@
     user-select: none;
     width: 1.25em;
     box-sizing: border-box;
+    background: var(--white, #ffffff);
+    fill: var(--white, #ffffff);
   }
 
   span:hover {
     border: solid 1px var(--primary, #4294f0);
   }
 
-  /* make the svg the same size as its container */
-  span :global(svg) {
-    fill: white;
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-
   input:focus + span {
     border: solid 1px var(--primary, #4294f0);
   }
 
   input:checked + span,
   input:indeterminate + span {
-    background: var(--primary, #4294f0);
-    border: solid 1px var(--primary, #4294f0);
+    background: var(--blue-3, #4294f0);
+    border: solid 1px var(--blue-4, #1367d0);
   }
 
   input:checked:focus + span {
-    box-shadow: 0 0 0 2px var(--primary-faded, rgba(66, 148, 240, 0.13));
-    border: solid 1px var(--primary, #4294f0);
+    box-shadow: 0 0 0 2px var(--blue-2, #b5ceed);
+    border: solid 1px var(--blue-4, #1367d0);
   }
 
   input:disabled + span {
-    background: rgba(0, 0, 0, 0.05);
+    background: var(--gray-3, #99a8b3);
     cursor: default;
   }
 
   input:disabled + span:hover {
-    border: solid 1px var(--gray-3, #bbbbbb);
+    border: solid 1px var(--gray-4, #5c717c);
   }
 
   input:checked:disabled + span {
-    background: rgba(0, 0, 0, 0.05);
-    border: solid 1px var(--gray-3, #bbbbbb);
+    background: var(--gray-3, #99a8b3);
+    border: solid 1px var(--gray-4, #5c717c);
   }
 
   input:checked:disabled + span:hover {
-    border: solid 1px var(--gray-3, #bbbbbb);
+    border: solid 1px var(--gray-4, #5c717c);
   }
 </style>
diff --git a/src/lib/components/documents/NoDocuments.svelte b/src/lib/components/documents/NoDocuments.svelte
deleted file mode 100644
index 693d713f4..000000000
--- a/src/lib/components/documents/NoDocuments.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script>
-  import { _ } from "svelte-i18n";
-
-  // SVG assets
-  import { Search24 } from "svelte-octicons";
-</script>
-
-<div class="no-results">
-  <h2>{$_("noDocuments.noSearchResults")}</h2>
-  <div class="img">
-    <Search24 height="32" width="32" />
-  </div>
-  <div class="text">
-    <p>
-      {$_("noDocuments.queryNoResults")}
-    </p>
-  </div>
-</div>
-
-<style>
-  .no-results {
-    margin: 1em 1.5em;
-    background: var(--yellow-light);
-    padding: 1em;
-    border-radius: 10px;
-  }
-
-  h2 {
-    font-size: 16px;
-    font-weight: 600;
-    margin: 1.5em 0;
-    padding-left: 18px;
-  }
-
-  .img,
-  .text {
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  .text {
-    max-width: 80ch;
-    width: 30vw;
-    margin: 0 2em 1em 2em;
-  }
-  .text :global(a) {
-    color: var(--primary);
-  }
-
-  .text p {
-    font-size: 15px;
-    line-height: 22px;
-    margin: 5px 0;
-  }
-
-  p {
-    margin: 0 1em;
-  }
-</style>
diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
index bfb7befee..7e6bcf46b 100644
--- a/src/lib/components/documents/ResultsList.svelte
+++ b/src/lib/components/documents/ResultsList.svelte
@@ -1,51 +1,87 @@
 <script context="module" lang="ts">
   import { writable, type Writable } from "svelte/store";
 
-  export const selected: Writable<number[] | string[]> = writable([]);
+  export const selected: Writable<(number | string)[]> = writable([]);
 </script>
 
 <script lang="ts">
+  import { _ } from "svelte-i18n";
   import type { DocumentResults } from "$lib/api/types";
+  import Search from "../Search.svelte";
+  import PageToolbar from "../common/PageToolbar.svelte";
   import DocumentListItem from "./DocumentListItem.svelte";
-  import NoDocuments from "./NoDocuments.svelte";
+  import Flex from "../common/Flex.svelte";
+  import Checkbox from "../common/Checkbox.svelte";
+  import { Search24 } from "svelte-octicons";
+  import Empty from "../common/Empty.svelte";
 
   export let results: DocumentResults;
+
+  function updateSelection(event: Event, id: string | number) {
+    const { checked } = event.target as HTMLInputElement;
+    if (checked) {
+      selected.set([...$selected, id]);
+    } else {
+      selected.set([...$selected.filter((d) => d !== id)]);
+    }
+  }
 </script>
 
-<div class="results">
-  {#each results.results as document (document.id)}
-    <div class="row">
-      <!-- todo: add a11y label for screen readers -->
-      <label class="sr-only"
-        ><input type="checkbox" value={document.id} bind:group={$selected} />
-      </label>
-      <DocumentListItem {document} />
-    </div>
-  {:else}
-    <NoDocuments />
-  {/each}
+<div class="container">
+  <header>
+    <PageToolbar><Search slot="center" /></PageToolbar>
+  </header>
+  <main>
+    {#each results.results as document (document.id)}
+      <Flex gap={0.625} align="center">
+        <Checkbox
+          value={document.id}
+          on:change={(event) => updateSelection(event, document.id)}
+        />
+        <DocumentListItem {document} />
+      </Flex>
+    {:else}
+      <Empty icon={Search24}>
+        <h2>{$_("noDocuments.noSearchResults")}</h2>
+        <p>{$_("noDocuments.queryNoResults")}</p>
+      </Empty>
+    {/each}
+  </main>
+  <footer>
+    <PageToolbar />
+  </footer>
 </div>
 
 <style>
-  .results {
+  .container {
     display: flex;
-    padding: 1rem 0.5rem;
+    padding: 0;
     flex-direction: column;
     align-items: flex-start;
-    gap: 1rem;
+    flex: 1 0 0;
     align-self: stretch;
+    position: relative;
   }
-
-  .row {
-    display: flex;
+  header {
+    flex: 1 0 0;
     width: 100%;
-    align-items: center;
-    gap: 0.625rem;
+    position: sticky;
+    top: 0.5rem;
+    margin: 0.5rem 0;
   }
-
-  .row input[type="checkbox"] {
-    height: 1.25rem;
-    width: 1.25rem;
-    cursor: pointer;
+  main {
+    flex: 1 0 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0.5rem;
+  }
+  footer {
+    flex: 1 0 0;
+    width: 100%;
+    position: sticky;
+    bottom: 0.5rem;
+    margin: 0.5rem 0;
   }
 </style>
diff --git a/src/lib/components/documents/stories/ResultsList.stories.svelte b/src/lib/components/documents/stories/ResultsList.stories.svelte
index 20f1610ea..af305ba26 100644
--- a/src/lib/components/documents/stories/ResultsList.stories.svelte
+++ b/src/lib/components/documents/stories/ResultsList.stories.svelte
@@ -24,9 +24,9 @@
 </script>
 
 <Story name="yes results">
-  <ResultsList {results} />
+  <div style="width: 36rem"><ResultsList {results} /></div>
 </Story>
 
 <Story name="no results">
-  <ResultsList results={empty} />
+  <div style="width: 36rem"><ResultsList results={empty} /></div>
 </Story>
diff --git a/src/lib/components/stories/MainLayout.stories.svelte b/src/lib/components/stories/MainLayout.stories.svelte
index 8c885a747..9388b3e09 100644
--- a/src/lib/components/stories/MainLayout.stories.svelte
+++ b/src/lib/components/stories/MainLayout.stories.svelte
@@ -1,7 +1,7 @@
 <script context="module" lang="ts">
   import { Story, Template } from "@storybook/addon-svelte-csf";
   import MainLayout from "../MainLayout.svelte";
-  import type { Document } from "$lib/api/types";
+  import type { DocumentResults } from "$lib/api/types";
 
   import { _ } from "svelte-i18n";
   import {
@@ -25,8 +25,9 @@
   import SidebarGroup from "../sidebar/SidebarGroup.svelte";
   import Action from "../common/Action.svelte";
   import Pin from "@/common/Pin.svelte";
+  import ResultsList from "../documents/ResultsList.svelte";
 
-  let docList = documents.results as Document[];
+  let docList = documents as DocumentResults;
 
   export const meta = {
     title: "Components / Main Layout",
@@ -72,11 +73,7 @@
       </SidebarGroup>
     </svelte:fragment>
     <svelte:fragment slot="content">
-      <Flex direction="column">
-        {#each docList as document}
-          <DocumentListItem {document} />
-        {/each}
-      </Flex>
+      <ResultsList results={docList} />
     </svelte:fragment>
     <svelte:fragment slot="action">
       <Button mode="primary"><PlusCircle16 /> Upload Documents</Button>
diff --git a/src/routes/app/+page.svelte b/src/routes/app/+page.svelte
index 865adfd8f..16d78636b 100644
--- a/src/routes/app/+page.svelte
+++ b/src/routes/app/+page.svelte
@@ -24,6 +24,7 @@
   export let data;
 
   $: searchResults = data.searchResults;
+  $: query = data.query;
 
   // local utils
 

From a681afea549a62119c536f988e0e01e88213dd70 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 29 Feb 2024 14:34:36 -0500
Subject: [PATCH 4/9] Refactors ContentLayout from ResultsList

---
 src/lib/components/ContentLayout.svelte       | 49 +++++++++++
 src/lib/components/common/Checkbox.svelte     |  6 +-
 .../components/documents/ResultsList.svelte   | 82 +++++--------------
 .../stories/ResultsList.stories.svelte        |  8 +-
 .../stories/MainLayout.stories.svelte         | 16 ++--
 src/routes/app/+page.svelte                   | 13 ++-
 6 files changed, 98 insertions(+), 76 deletions(-)
 create mode 100644 src/lib/components/ContentLayout.svelte

diff --git a/src/lib/components/ContentLayout.svelte b/src/lib/components/ContentLayout.svelte
new file mode 100644
index 000000000..fb1127b7d
--- /dev/null
+++ b/src/lib/components/ContentLayout.svelte
@@ -0,0 +1,49 @@
+<div class="container">
+  {#if $$slots.header}
+    <header>
+      <slot name="header" />
+    </header>
+  {/if}
+  <main>
+    <slot />
+  </main>
+  {#if $$slots.footer}
+    <footer>
+      <slot name="footer" />
+    </footer>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    padding: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1 0 0;
+    align-self: stretch;
+    position: relative;
+  }
+  header {
+    flex: 1 0 0;
+    width: 100%;
+    position: sticky;
+    top: 0;
+    padding: 0.625rem;
+  }
+  main {
+    flex: 1 0 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 1.25rem;
+  }
+  footer {
+    flex: 1 0 0;
+    width: 100%;
+    position: sticky;
+    bottom: 0;
+    padding: 0.625rem;
+  }
+</style>
diff --git a/src/lib/components/common/Checkbox.svelte b/src/lib/components/common/Checkbox.svelte
index 905de0748..bb3ee0f1c 100644
--- a/src/lib/components/common/Checkbox.svelte
+++ b/src/lib/components/common/Checkbox.svelte
@@ -35,13 +35,11 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    align-self: stretch;
   }
 
   input {
-    opacity: 0;
-    position: fixed;
-    z-index: -10;
+    display: none;
+    visibility: hidden;
   }
 
   span {
diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
index 7e6bcf46b..dcad75570 100644
--- a/src/lib/components/documents/ResultsList.svelte
+++ b/src/lib/components/documents/ResultsList.svelte
@@ -7,15 +7,13 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
   import type { DocumentResults } from "$lib/api/types";
-  import Search from "../Search.svelte";
-  import PageToolbar from "../common/PageToolbar.svelte";
   import DocumentListItem from "./DocumentListItem.svelte";
   import Flex from "../common/Flex.svelte";
   import Checkbox from "../common/Checkbox.svelte";
-  import { Search24 } from "svelte-octicons";
+  import { Hourglass24, Search24 } from "svelte-octicons";
   import Empty from "../common/Empty.svelte";
 
-  export let results: DocumentResults;
+  export let results: DocumentResults = undefined;
 
   function updateSelection(event: Event, id: string | number) {
     const { checked } = event.target as HTMLInputElement;
@@ -27,61 +25,21 @@
   }
 </script>
 
-<div class="container">
-  <header>
-    <PageToolbar><Search slot="center" /></PageToolbar>
-  </header>
-  <main>
-    {#each results.results as document (document.id)}
-      <Flex gap={0.625} align="center">
-        <Checkbox
-          value={document.id}
-          on:change={(event) => updateSelection(event, document.id)}
-        />
-        <DocumentListItem {document} />
-      </Flex>
-    {:else}
-      <Empty icon={Search24}>
-        <h2>{$_("noDocuments.noSearchResults")}</h2>
-        <p>{$_("noDocuments.queryNoResults")}</p>
-      </Empty>
-    {/each}
-  </main>
-  <footer>
-    <PageToolbar />
-  </footer>
-</div>
-
-<style>
-  .container {
-    display: flex;
-    padding: 0;
-    flex-direction: column;
-    align-items: flex-start;
-    flex: 1 0 0;
-    align-self: stretch;
-    position: relative;
-  }
-  header {
-    flex: 1 0 0;
-    width: 100%;
-    position: sticky;
-    top: 0.5rem;
-    margin: 0.5rem 0;
-  }
-  main {
-    flex: 1 0 0;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 0.5rem;
-  }
-  footer {
-    flex: 1 0 0;
-    width: 100%;
-    position: sticky;
-    bottom: 0.5rem;
-    margin: 0.5rem 0;
-  }
-</style>
+{#if !results}
+  <Empty icon={Hourglass24}>Loading…</Empty>
+{:else}
+  {#each results.results as document (document.id)}
+    <Flex gap={0.625} align="center">
+      <Checkbox
+        checked={$selected.includes(document.id)}
+        on:change={(event) => updateSelection(event, document.id)}
+      />
+      <DocumentListItem {document} />
+    </Flex>
+  {:else}
+    <Empty icon={Search24}>
+      <h2>{$_("noDocuments.noSearchResults")}</h2>
+      <p>{$_("noDocuments.queryNoResults")}</p>
+    </Empty>
+  {/each}
+{/if}
diff --git a/src/lib/components/documents/stories/ResultsList.stories.svelte b/src/lib/components/documents/stories/ResultsList.stories.svelte
index af305ba26..4b4b99dea 100644
--- a/src/lib/components/documents/stories/ResultsList.stories.svelte
+++ b/src/lib/components/documents/stories/ResultsList.stories.svelte
@@ -23,10 +23,14 @@
   };
 </script>
 
-<Story name="yes results">
+<Story name="With Results">
   <div style="width: 36rem"><ResultsList {results} /></div>
 </Story>
 
-<Story name="no results">
+<Story name="Empty">
   <div style="width: 36rem"><ResultsList results={empty} /></div>
 </Story>
+
+<Story name="Loading">
+  <div style="width: 36rem"><ResultsList /></div>
+</Story>
diff --git a/src/lib/components/stories/MainLayout.stories.svelte b/src/lib/components/stories/MainLayout.stories.svelte
index 9388b3e09..3047010fb 100644
--- a/src/lib/components/stories/MainLayout.stories.svelte
+++ b/src/lib/components/stories/MainLayout.stories.svelte
@@ -20,14 +20,16 @@
   import SidebarItem from "$lib/components/sidebar/SidebarItem.svelte";
 
   import documents from "../../api/fixtures/documents/documents.json";
-  import DocumentListItem from "../documents/DocumentListItem.svelte";
   import Flex from "../common/Flex.svelte";
   import SidebarGroup from "../sidebar/SidebarGroup.svelte";
   import Action from "../common/Action.svelte";
   import Pin from "@/common/Pin.svelte";
   import ResultsList from "../documents/ResultsList.svelte";
+  import ContentLayout from "../ContentLayout.svelte";
+  import PageToolbar from "../common/PageToolbar.svelte";
+  import Search from "../Search.svelte";
 
-  let docList = documents as DocumentResults;
+  let results = documents as DocumentResults;
 
   export const meta = {
     title: "Components / Main Layout",
@@ -72,9 +74,13 @@
         </Flex>
       </SidebarGroup>
     </svelte:fragment>
-    <svelte:fragment slot="content">
-      <ResultsList results={docList} />
-    </svelte:fragment>
+    <ContentLayout slot="content">
+      <PageToolbar slot="header">
+        <Search slot="center" />
+      </PageToolbar>
+      <ResultsList {results} />
+      <PageToolbar slot="footer" />
+    </ContentLayout>
     <svelte:fragment slot="action">
       <Button mode="primary"><PlusCircle16 /> Upload Documents</Button>
       <Flex direction="column">
diff --git a/src/routes/app/+page.svelte b/src/routes/app/+page.svelte
index 16d78636b..dd6e2b1de 100644
--- a/src/routes/app/+page.svelte
+++ b/src/routes/app/+page.svelte
@@ -20,6 +20,9 @@
   import Action from "$lib/components/common/Action.svelte";
   import Pin from "@/common/Pin.svelte";
   import ResultsList from "@/lib/components/documents/ResultsList.svelte";
+  import ContentLayout from "@/lib/components/ContentLayout.svelte";
+  import PageToolbar from "@/lib/components/common/PageToolbar.svelte";
+  import Search from "@/lib/components/Search.svelte";
 
   export let data;
 
@@ -68,13 +71,17 @@
       </Flex>
     </SidebarGroup>
   </svelte:fragment>
-  <svelte:fragment slot="content">
+  <ContentLayout slot="content">
+    <PageToolbar slot="header">
+      <Search {query} />
+    </PageToolbar>
     {#await searchResults}
-      <p class="loading">Loading ...</p>
+      <ResultsList />
     {:then results}
       <ResultsList {results} />
     {/await}
-  </svelte:fragment>
+    <PageToolbar slot="footer" />
+  </ContentLayout>
   <svelte:fragment slot="action">
     <Button mode="primary"><PlusCircle16 /> Upload Documents</Button>
     <Flex direction="column">

From 5e2e9a436d92e2b089d0a029d2b1fbbd0e397170 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 29 Feb 2024 14:37:30 -0500
Subject: [PATCH 5/9] Fix mis-slotted Search in top toolbar

---
 src/routes/app/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/app/+page.svelte b/src/routes/app/+page.svelte
index dd6e2b1de..9cf31db83 100644
--- a/src/routes/app/+page.svelte
+++ b/src/routes/app/+page.svelte
@@ -73,7 +73,7 @@
   </svelte:fragment>
   <ContentLayout slot="content">
     <PageToolbar slot="header">
-      <Search {query} />
+      <Search {query} slot="center" />
     </PageToolbar>
     {#await searchResults}
       <ResultsList />

From 1a6e2c7b9568d37481d96f345c63d17c1a5cc293 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 29 Feb 2024 14:44:00 -0500
Subject: [PATCH 6/9] Prevent ContentLayout header and footer from growing

---
 src/lib/components/ContentLayout.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/ContentLayout.svelte b/src/lib/components/ContentLayout.svelte
index fb1127b7d..df8301883 100644
--- a/src/lib/components/ContentLayout.svelte
+++ b/src/lib/components/ContentLayout.svelte
@@ -25,7 +25,7 @@
     position: relative;
   }
   header {
-    flex: 1 0 0;
+    flex: 0 0 0;
     width: 100%;
     position: sticky;
     top: 0;
@@ -37,10 +37,10 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: 0 1.25rem;
+    padding: 0 1.25jrem;
   }
   footer {
-    flex: 1 0 0;
+    flex: 0 0 0;
     width: 100%;
     position: sticky;
     bottom: 0;

From 296341eeb1834467a11d51ec7607f6392cb671c4 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 29 Feb 2024 14:46:23 -0500
Subject: [PATCH 7/9] Fix content padding

---
 src/lib/components/ContentLayout.svelte       |  1 -
 .../components/documents/ResultsList.svelte   | 42 +++++++++++--------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/ContentLayout.svelte b/src/lib/components/ContentLayout.svelte
index df8301883..6f2a4a1bb 100644
--- a/src/lib/components/ContentLayout.svelte
+++ b/src/lib/components/ContentLayout.svelte
@@ -37,7 +37,6 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: 0 1.25jrem;
   }
   footer {
     flex: 0 0 0;
diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
index dcad75570..0e940a33c 100644
--- a/src/lib/components/documents/ResultsList.svelte
+++ b/src/lib/components/documents/ResultsList.svelte
@@ -25,21 +25,29 @@
   }
 </script>
 
-{#if !results}
-  <Empty icon={Hourglass24}>Loading…</Empty>
-{:else}
-  {#each results.results as document (document.id)}
-    <Flex gap={0.625} align="center">
-      <Checkbox
-        checked={$selected.includes(document.id)}
-        on:change={(event) => updateSelection(event, document.id)}
-      />
-      <DocumentListItem {document} />
-    </Flex>
+<div class="container">
+  {#if !results}
+    <Empty icon={Hourglass24}>Loading…</Empty>
   {:else}
-    <Empty icon={Search24}>
-      <h2>{$_("noDocuments.noSearchResults")}</h2>
-      <p>{$_("noDocuments.queryNoResults")}</p>
-    </Empty>
-  {/each}
-{/if}
+    {#each results.results as document (document.id)}
+      <Flex gap={0.625} align="center">
+        <Checkbox
+          checked={$selected.includes(document.id)}
+          on:change={(event) => updateSelection(event, document.id)}
+        />
+        <DocumentListItem {document} />
+      </Flex>
+    {:else}
+      <Empty icon={Search24}>
+        <h2>{$_("noDocuments.noSearchResults")}</h2>
+        <p>{$_("noDocuments.queryNoResults")}</p>
+      </Empty>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .container {
+    padding: 0 2rem;
+  }
+</style>

From 30efc9f3a3cce11a9ffee8f3c26be96b4b5b47cf Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Thu, 29 Feb 2024 14:53:25 -0500
Subject: [PATCH 8/9] Move loading state out of ResultsList

---
 .../components/documents/ResultsList.svelte   | 32 ++++++++-----------
 .../stories/ResultsList.stories.svelte        |  4 ---
 src/routes/app/+page.svelte                   | 12 ++++---
 3 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
index 0e940a33c..f0fd5ccd1 100644
--- a/src/lib/components/documents/ResultsList.svelte
+++ b/src/lib/components/documents/ResultsList.svelte
@@ -10,7 +10,7 @@
   import DocumentListItem from "./DocumentListItem.svelte";
   import Flex from "../common/Flex.svelte";
   import Checkbox from "../common/Checkbox.svelte";
-  import { Hourglass24, Search24 } from "svelte-octicons";
+  import { Search24 } from "svelte-octicons";
   import Empty from "../common/Empty.svelte";
 
   export let results: DocumentResults = undefined;
@@ -26,24 +26,20 @@
 </script>
 
 <div class="container">
-  {#if !results}
-    <Empty icon={Hourglass24}>Loading…</Empty>
+  {#each results.results as document (document.id)}
+    <Flex gap={0.625} align="center">
+      <Checkbox
+        checked={$selected.includes(document.id)}
+        on:change={(event) => updateSelection(event, document.id)}
+      />
+      <DocumentListItem {document} />
+    </Flex>
   {:else}
-    {#each results.results as document (document.id)}
-      <Flex gap={0.625} align="center">
-        <Checkbox
-          checked={$selected.includes(document.id)}
-          on:change={(event) => updateSelection(event, document.id)}
-        />
-        <DocumentListItem {document} />
-      </Flex>
-    {:else}
-      <Empty icon={Search24}>
-        <h2>{$_("noDocuments.noSearchResults")}</h2>
-        <p>{$_("noDocuments.queryNoResults")}</p>
-      </Empty>
-    {/each}
-  {/if}
+    <Empty icon={Search24}>
+      <h2>{$_("noDocuments.noSearchResults")}</h2>
+      <p>{$_("noDocuments.queryNoResults")}</p>
+    </Empty>
+  {/each}
 </div>
 
 <style>
diff --git a/src/lib/components/documents/stories/ResultsList.stories.svelte b/src/lib/components/documents/stories/ResultsList.stories.svelte
index 4b4b99dea..886307168 100644
--- a/src/lib/components/documents/stories/ResultsList.stories.svelte
+++ b/src/lib/components/documents/stories/ResultsList.stories.svelte
@@ -30,7 +30,3 @@
 <Story name="Empty">
   <div style="width: 36rem"><ResultsList results={empty} /></div>
 </Story>
-
-<Story name="Loading">
-  <div style="width: 36rem"><ResultsList /></div>
-</Story>
diff --git a/src/routes/app/+page.svelte b/src/routes/app/+page.svelte
index 9cf31db83..77da66660 100644
--- a/src/routes/app/+page.svelte
+++ b/src/routes/app/+page.svelte
@@ -11,6 +11,7 @@
     PlusCircle16,
     Share16,
     Book16,
+    Hourglass24,
   } from "svelte-octicons";
   import MainLayout from "$lib/components/MainLayout.svelte";
   import Button from "$lib/components/common/Button.svelte";
@@ -19,10 +20,11 @@
   import SidebarGroup from "$lib/components/sidebar/SidebarGroup.svelte";
   import Action from "$lib/components/common/Action.svelte";
   import Pin from "@/common/Pin.svelte";
-  import ResultsList from "@/lib/components/documents/ResultsList.svelte";
-  import ContentLayout from "@/lib/components/ContentLayout.svelte";
-  import PageToolbar from "@/lib/components/common/PageToolbar.svelte";
-  import Search from "@/lib/components/Search.svelte";
+  import ResultsList from "$lib/components/documents/ResultsList.svelte";
+  import ContentLayout from "$lib/components/ContentLayout.svelte";
+  import PageToolbar from "$lib/components/common/PageToolbar.svelte";
+  import Search from "$lib/components/Search.svelte";
+  import Empty from "$lib/components/common/Empty.svelte";
 
   export let data;
 
@@ -76,7 +78,7 @@
       <Search {query} slot="center" />
     </PageToolbar>
     {#await searchResults}
-      <ResultsList />
+      <Empty icon={Hourglass24}>Loading…</Empty>
     {:then results}
       <ResultsList {results} />
     {/await}

From bbf3b36cfcd298a2f1aaef48f4e2feb2d5b6d669 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 29 Feb 2024 15:24:40 -0500
Subject: [PATCH 9/9] Pagination

---
 .../documents/DocumentListItem.svelte         |  2 +-
 src/routes/app/+page.svelte                   | 65 +++++++++++++++++--
 2 files changed, 61 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index 0aa79e596..0e9e2c993 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -129,7 +129,7 @@ It's deliberately minimal and can be wrapped in other components to add addition
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 100%;
+    max-width: 100ch;
   }
 
   .actions {
diff --git a/src/routes/app/+page.svelte b/src/routes/app/+page.svelte
index 77da66660..812a1435e 100644
--- a/src/routes/app/+page.svelte
+++ b/src/routes/app/+page.svelte
@@ -25,18 +25,44 @@
   import PageToolbar from "$lib/components/common/PageToolbar.svelte";
   import Search from "$lib/components/Search.svelte";
   import Empty from "$lib/components/common/Empty.svelte";
+  import Paginator from "@/common/Paginator.svelte";
 
   export let data;
 
+  let page = 1;
+  let per_page = 25;
+  let error: Error;
+
   $: searchResults = data.searchResults;
   $: query = data.query;
+  $: count = searchResults.count;
+  $: next = searchResults.next;
+  $: previous = searchResults.previous;
+  $: total_pages = Math.ceil(count / per_page);
+
+  async function load(url) {
+    const res = await fetch(url, { credentials: "include" }).catch((e) => {
+      error = e;
+      throw e; // if something went wrong here, something broke
+    });
 
-  // local utils
+    if (!res.ok) {
+      // 404 or something similar
+      console.error(res.statusText);
+      error = { name: "Loading error", message: res.statusText };
+    }
 
-  function path(url: URL | string) {
-    url = new URL(url);
+    data.searchResults = await res.json();
+  }
 
-    return url.pathname;
+  function load_next(e) {
+    page = Math.min(total_pages, page + 1);
+    load(next);
+  }
+
+  function load_previous(e) {
+    page = Math.max(0, page - 1);
+    load(previous);
   }
 </script>
 
@@ -57,6 +83,7 @@
         })}
       </SidebarItem>
     </Flex>
+
     <SidebarGroup>
       <SidebarItem slot="title"><FileDirectory16 /> Projects</SidebarItem>
       <Action slot="action" icon={Book16}>Explore</Action>
@@ -73,6 +100,7 @@
       </Flex>
     </SidebarGroup>
   </svelte:fragment>
+
   <ContentLayout slot="content">
     <PageToolbar slot="header">
       <Search {query} slot="center" />
@@ -82,16 +110,43 @@
     {:then results}
       <ResultsList {results} />
     {/await}
-    <PageToolbar slot="footer" />
+
+    <PageToolbar slot="footer">
+      <label slot="left">
+        <input type="checkbox" name="select_all" />
+        Select all
+      </label>
+      <Paginator
+        slot="center"
+        {page}
+        totalPages={total_pages}
+        has_next={Boolean(next)}
+        has_previous={Boolean(previous)}
+        on:next={load_next}
+        on:previous={load_previous}
+      />
+
+      <label slot="right">
+        Per page
+        <select name="per_page" bind:value={per_page}>
+          <option value={25}>25</option>
+          <option value={50}>50</option>
+          <option value={100}>100</option>
+        </select>
+      </label>
+    </PageToolbar>
   </ContentLayout>
+
   <svelte:fragment slot="action">
     <Button mode="primary"><PlusCircle16 /> Upload Documents</Button>
+
     <Flex direction="column">
       <SidebarItem hover disabled><Share16 /> Share…</SidebarItem>
       <SidebarItem hover disabled><Pencil16 /> Edit…</SidebarItem>
       <SidebarItem hover disabled><FileDirectory16 /> Organize…</SidebarItem>
       <SidebarItem hover disabled><Plug16 /> Run…</SidebarItem>
     </Flex>
+
     <SidebarGroup>
       <SidebarItem slot="title"><Plug16 /> Add-Ons</SidebarItem>
       <Action slot="action" icon={Book16}>Explore</Action>