From 5bbe7f06e398f7c21f8b19e1d7851a0da55a1e9d Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Mon, 23 Sep 2024 18:40:32 -0400
Subject: [PATCH 1/9] Fix height of DocumentBrowser

---
 src/lib/components/layouts/DocumentBrowser.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/layouts/DocumentBrowser.svelte b/src/lib/components/layouts/DocumentBrowser.svelte
index 6d422151d..8ef21b4b7 100644
--- a/src/lib/components/layouts/DocumentBrowser.svelte
+++ b/src/lib/components/layouts/DocumentBrowser.svelte
@@ -197,6 +197,7 @@
 <style>
   .container {
     width: 100%;
+    height: min-content;
     background: var(--gray-1);
     box-shadow: inset var(--shadow-2);
   }

From edb26c39c9c5e5b17f3ba1e5bd87524f671576a1 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Mon, 23 Sep 2024 18:41:04 -0400
Subject: [PATCH 2/9] Add border to DocumentListItem on hover

Update snapshot
---
 src/lib/components/documents/DocumentListItem.svelte |  2 ++
 .../__snapshots__/DocumentListItem.test.ts.snap      | 12 ++++++------
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/documents/DocumentListItem.svelte b/src/lib/components/documents/DocumentListItem.svelte
index 0372214c1..d186ea27e 100644
--- a/src/lib/components/documents/DocumentListItem.svelte
+++ b/src/lib/components/documents/DocumentListItem.svelte
@@ -137,11 +137,13 @@ It's deliberately minimal and can be wrapped in other components to add addition
     color: inherit;
     text-decoration: none;
     background-color: transparent;
+    border: 1px solid transparent;
   }
 
   .document-list-item:hover,
   .document-list-item:focus {
     background-color: var(--blue-1);
+    border-color: var(--blue-2);
   }
 
   .thumbnail {
diff --git a/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap b/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
index 38e235480..cfba6e26b 100644
--- a/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
+++ b/src/lib/components/documents/tests/__snapshots__/DocumentListItem.test.ts.snap
@@ -3,15 +3,15 @@
 exports[`DocumentListItem > renders 1`] = `
 <div>
   <a
-    class="document-list-item svelte-d6td3"
+    class="document-list-item svelte-u1blcs"
     href="https://www.dev.documentcloud.org/documents/24002098-quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018/"
   >
     <div
-      class="thumbnail svelte-d6td3"
+      class="thumbnail svelte-u1blcs"
     >
       <img
         alt="Page 1, Quarterly Reports created pursuant to the letter from the National Archives and Records Administration dated June 1, 2018"
-        class="svelte-d6td3"
+        class="svelte-u1blcs"
         height="77.64705882352942px"
         loading="lazy"
         src="https://s3.documentcloud.org/documents/24002098/pages/quarterly-reports-created-pursuant-to-the-letter-from-the-national-archives-and-records-administration-dated-june-1-2018-p1-thumbnail.gif"
@@ -21,16 +21,16 @@ exports[`DocumentListItem > renders 1`] = `
     </div>
      
     <div
-      class="documentInfo svelte-d6td3"
+      class="documentInfo svelte-u1blcs"
     >
       <h3
-        class="svelte-d6td3"
+        class="svelte-u1blcs"
       >
         Quarterly Reports created pursuant to the letter from the National Archives and Records Administration dated June 1, 2018
       </h3>
        
       <p
-        class="meta svelte-d6td3"
+        class="meta svelte-u1blcs"
       >
         20 pages
          -

From e562bfbf7daf4d187198f66a7bafc96b6472dadd Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Mon, 23 Sep 2024 18:40:53 -0400
Subject: [PATCH 3/9] Clean up layout styling

Clean up AddOnLayout

Clean up AddOnMeta
---
 src/lib/components/addons/AddOnMeta.svelte    | 28 +++++------------
 .../components/layouts/AddOnBrowser.svelte    |  4 ++-
 src/lib/components/layouts/AddOnLayout.svelte | 13 ++------
 .../components/layouts/DocumentLayout.svelte  | 31 ++++---------------
 src/lib/components/layouts/Sidebar.svelte     | 13 +++++---
 .../components/layouts/SidebarLayout.svelte   |  7 ++---
 6 files changed, 29 insertions(+), 67 deletions(-)

diff --git a/src/lib/components/addons/AddOnMeta.svelte b/src/lib/components/addons/AddOnMeta.svelte
index 918701d0c..b7f538947 100644
--- a/src/lib/components/addons/AddOnMeta.svelte
+++ b/src/lib/components/addons/AddOnMeta.svelte
@@ -6,6 +6,7 @@
 
   import Button from "$lib/components/common/Button.svelte";
   import Flex from "@/lib/components/common/Flex.svelte";
+  import Metadata from "../common/Metadata.svelte";
 
   export let addon: AddOnListItem;
 
@@ -13,7 +14,7 @@
   $: github_org = addon.repository.split("/")[0];
 </script>
 
-<div class="conatiner">
+<div class="container">
   <h2 class="name">{addon.name}</h2>
   <div class="description">
     {@html addon.parameters.description}
@@ -28,17 +29,15 @@
       </details>
     </div>
   {/if}
-
-  <Flex wrap align="baseline" justify="between">
-    <div class="created-by">
-      <span>{$_("addonDispatchDialog.createdBy")}</span>
+  <Flex wrap align="center" justify="between">
+    <Metadata key={$_("addonDispatchDialog.createdBy")}>
       <h3>{github_org}</h3>
-    </div>
+    </Metadata>
     <Flex>
-      <Button ghost mode="primary">
+      <!-- <Button ghost mode="primary">
         <Share16 />
         {$_("addonDispatchDialog.share")}
-      </Button>
+      </Button> -->
       <Button ghost mode="primary" href={repo} target="_blank">
         <MarkGithub16 />
         {$_("addonDispatchDialog.viewsource")}
@@ -70,17 +69,4 @@
     line-height: 1.5;
     margin-bottom: 1rem;
   }
-
-  .created-by {
-    display: flex;
-    align-items: baseline;
-    gap: 0.5rem;
-  }
-
-  .created-by span {
-    color: var(--gray-4, #5c717c);
-    font-size: var(--font-xs);
-    letter-spacing: 0.07031rem;
-    text-transform: uppercase;
-  }
 </style>
diff --git a/src/lib/components/layouts/AddOnBrowser.svelte b/src/lib/components/layouts/AddOnBrowser.svelte
index a39c6a781..49b044adb 100644
--- a/src/lib/components/layouts/AddOnBrowser.svelte
+++ b/src/lib/components/layouts/AddOnBrowser.svelte
@@ -141,13 +141,13 @@
     padding: 1rem 0.5rem;
     max-height: 100%;
     overflow-y: auto;
-    box-shadow: var(--shadow-1);
     z-index: 1;
   }
   main {
     max-height: 100%;
     overflow-y: auto;
     background: var(--gray-1);
+    box-shadow: inset var(--shadow-2);
   }
   .history {
     max-width: unset;
@@ -156,6 +156,8 @@
     gap: 2rem;
   }
   .container {
+    max-width: var(--app-max-w, 100rem);
+    margin: 0 auto;
     max-height: 100%;
     display: grid;
     grid-template-columns: 16rem 2fr 40%;
diff --git a/src/lib/components/layouts/AddOnLayout.svelte b/src/lib/components/layouts/AddOnLayout.svelte
index 9879a6ca3..936c49b2f 100644
--- a/src/lib/components/layouts/AddOnLayout.svelte
+++ b/src/lib/components/layouts/AddOnLayout.svelte
@@ -172,8 +172,6 @@
     justify-content: center;
     width: 100%;
     height: 100%;
-    padding: 1rem;
-    gap: 1rem;
     max-width: var(--app-max-w, 100rem);
     margin: 0 auto;
   }
@@ -188,21 +186,16 @@
     max-height: 100%;
     display: flex;
     flex-direction: column;
-    overflow: visible;
+    overflow-y: auto;
   }
   .addon header {
     margin-bottom: 1rem;
+    padding: 1rem;
   }
   .addon .tabs {
     display: flex;
     padding: 0 1rem;
-  }
-  .addon main {
-    overflow-y: auto;
-    background-color: var(--white);
-    border: 1px solid var(--gray-1);
-    border-radius: var(--radius, 0.5rem);
-    box-shadow: var(--shadow-1);
+    border-bottom: 1px solid var(--gray-2);
   }
   .docs {
     background-color: var(--gray-1);
diff --git a/src/lib/components/layouts/DocumentLayout.svelte b/src/lib/components/layouts/DocumentLayout.svelte
index bed8bdf72..4baf096b2 100644
--- a/src/lib/components/layouts/DocumentLayout.svelte
+++ b/src/lib/components/layouts/DocumentLayout.svelte
@@ -37,12 +37,8 @@
     <Notes {document} />
   </nav>
   <article slot="content">
-    <header>
-      <DocumentHeader {document} />
-    </header>
-    <main class="viewer">
-      <Viewer {document} {asset_url} {text} {query} />
-    </main>
+    <header><DocumentHeader {document} /></header>
+    <main><Viewer {document} {asset_url} {text} {query} /></main>
   </article>
   <aside class="column between" slot="action">
     <Flex direction="column" gap={2}>
@@ -57,7 +53,6 @@
           </Flex>
         </Metadata>
       {/if}
-
       <Actions {document} user={$me} {action} />
     </Flex>
     <DocumentMetadata {document} />
@@ -65,33 +60,19 @@
 </SidebarLayout>
 
 <style>
-  .container {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    max-width: var(--app-max-w, 100rem);
-    max-height: 100%;
-    margin: 0 auto;
-    position: relative;
-  }
-
-  header {
-    padding: 1rem;
-  }
-
   article {
     flex: 1 1 auto;
     z-index: 0;
-    padding-bottom: 0.5rem;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-    overflow-y: auto;
   }
 
-  main {
-    flex: 1 1 auto;
+  header {
+    padding: 1rem;
+  }
 
+  main {
     background: var(--gray-1);
     border: 1px solid var(--gray-2);
     border-radius: var(--radius, 0.5rem);
diff --git a/src/lib/components/layouts/Sidebar.svelte b/src/lib/components/layouts/Sidebar.svelte
index 7b106148d..eaa47d4c6 100644
--- a/src/lib/components/layouts/Sidebar.svelte
+++ b/src/lib/components/layouts/Sidebar.svelte
@@ -59,7 +59,7 @@
 <svelte:window bind:innerWidth={viewWidth} />
 
 {#if isOpen}
-  <aside class="container {position}" transition:fly={flyOptions}>
+  <aside class="sidebarContainer {position}" transition:fly={flyOptions}>
     <header class:reverse={position === "left"}>
       {#if $$slots.title}
         <span class="title"><slot name="title" /></span>
@@ -84,15 +84,18 @@
 {/if}
 
 <style>
-  .container {
+  .sidebarContainer {
     flex: 1 0 0;
+    display: flex;
+    flex-direction: column;
     min-width: 16rem;
     max-width: 18rem;
     max-height: 100%;
+    min-height: 100%;
     overflow-y: auto;
-    position: relative;
-    display: flex;
-    flex-direction: column;
+    position: sticky;
+    top: 0;
+    background: var(--white);
   }
 
   header {
diff --git a/src/lib/components/layouts/SidebarLayout.svelte b/src/lib/components/layouts/SidebarLayout.svelte
index c9fe8605c..f2eef30a4 100644
--- a/src/lib/components/layouts/SidebarLayout.svelte
+++ b/src/lib/components/layouts/SidebarLayout.svelte
@@ -2,7 +2,7 @@
   import Sidebar from "./Sidebar.svelte";
 </script>
 
-<div class="container">
+<div class="sidebarLayoutContainer">
   {#if $$slots.navigation}
     <Sidebar position="left" id="navigation">
       <slot name="navigation" />
@@ -21,17 +21,14 @@
 </div>
 
 <style>
-  .container {
+  .sidebarLayoutContainer {
     flex: 1 0 0;
     display: flex;
     flex-direction: row;
-    overflow: hidden;
     max-width: var(--app-max-w, 100rem);
     margin: 0 auto;
     height: 100%;
     max-height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
   }
 
   .content {

From dbf6941ce76a806e8bd38d81382596b2d625832a Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Mon, 23 Sep 2024 18:58:36 -0400
Subject: [PATCH 4/9] Pass-through disablePremium

---
 src/lib/components/layouts/AddOnLayout.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/layouts/AddOnLayout.svelte b/src/lib/components/layouts/AddOnLayout.svelte
index 936c49b2f..1305b5fa7 100644
--- a/src/lib/components/layouts/AddOnLayout.svelte
+++ b/src/lib/components/layouts/AddOnLayout.svelte
@@ -102,6 +102,7 @@
           properties={addon.parameters.properties}
           required={addon.parameters.required}
           eventOptions={addon.parameters.eventOptions}
+          {disablePremium}
         >
           <svelte:fragment slot="selection">
             {#await search then results}

From 33b046225c5d93e83de326d9582fe5434ba35e35 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 24 Sep 2024 15:03:29 -0400
Subject: [PATCH 5/9] Make AppLayout realer

---
 .../layouts/stories/AppLayout.stories.svelte  | 46 +++++++++++++------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/layouts/stories/AppLayout.stories.svelte b/src/lib/components/layouts/stories/AppLayout.stories.svelte
index 446a1ff79..25d73da36 100644
--- a/src/lib/components/layouts/stories/AppLayout.stories.svelte
+++ b/src/lib/components/layouts/stories/AppLayout.stories.svelte
@@ -1,16 +1,22 @@
 <script context="module" lang="ts">
   import { Story, Template } from "@storybook/addon-svelte-csf";
   import AppLayout from "../AppLayout.svelte";
-  import type { Document } from "$lib/api/types";
 
   import { _ } from "svelte-i18n";
 
-  import doc from "@/test/fixtures/documents/document-expanded.json";
-  import txt from "@/test/fixtures/documents/document.txt.json";
-  const document = doc as Document;
+  import DocumentBrowser from "../DocumentBrowser.svelte";
+  import SidebarLayout from "../SidebarLayout.svelte";
+  import Documents from "@/routes/(app)/documents/sidebar/Documents.svelte";
+  import Projects from "@/routes/(app)/documents/sidebar/Projects.svelte";
+  import Button from "../../common/Button.svelte";
+  import { PlusCircle16 } from "svelte-octicons";
+  import Actions from "@/routes/(app)/documents/sidebar/Actions.svelte";
+  import AddOns from "@/routes/(app)/documents/sidebar/AddOns.svelte";
 
+  import { documentsList } from "@/test/fixtures/documents";
   import { addons } from "@/test/handlers/addons";
   import { organizations, users } from "@/test/handlers/accounts";
+  import { activeAddons } from "@/test/fixtures/addons";
 
   export const meta = {
     title: "Layout / App",
@@ -34,11 +40,27 @@
 </script>
 
 <Template let:args>
-  <div class="vh">
-    <AppLayout {...args}>
-      <p>Foobar!</p>
-    </AppLayout>
-  </div>
+  <AppLayout {...args}>
+    <SidebarLayout>
+      <svelte:fragment slot="navigation">
+        <Documents />
+        <Projects />
+      </svelte:fragment>
+
+      <DocumentBrowser
+        slot="content"
+        documents={Promise.resolve(documentsList)}
+      />
+
+      <svelte:fragment slot="action">
+        <Button mode="primary" href="/upload/">
+          <PlusCircle16 />{$_("sidebar.upload")}
+        </Button>
+        <Actions />
+        <AddOns pinnedAddOns={Promise.resolve(activeAddons)} />
+      </svelte:fragment>
+    </SidebarLayout>
+  </AppLayout>
 </Template>
 
 <Story name="Desktop" {...args} />
@@ -74,9 +96,3 @@
   }}
   {...args}
 />
-
-<style>
-  .vh {
-    height: 100vh;
-  }
-</style>

From 6665261c0fa2862e41cb36667f1a5f597d22e90e Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 24 Sep 2024 15:05:42 -0400
Subject: [PATCH 6/9] Fix DocumentBrowser height

Applies background and shadow to ContentLayout
---
 src/lib/components/layouts/ContentLayout.svelte   | 2 ++
 src/lib/components/layouts/DocumentBrowser.svelte | 4 +---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/layouts/ContentLayout.svelte b/src/lib/components/layouts/ContentLayout.svelte
index efe0a03dd..b3da3f216 100644
--- a/src/lib/components/layouts/ContentLayout.svelte
+++ b/src/lib/components/layouts/ContentLayout.svelte
@@ -25,6 +25,8 @@
     width: 100%;
     height: min-content;
     min-height: 100%;
+    background: var(--gray-1);
+    box-shadow: inset var(--shadow-2);
   }
   header {
     flex: 0 0 0;
diff --git a/src/lib/components/layouts/DocumentBrowser.svelte b/src/lib/components/layouts/DocumentBrowser.svelte
index 8ef21b4b7..057c89c10 100644
--- a/src/lib/components/layouts/DocumentBrowser.svelte
+++ b/src/lib/components/layouts/DocumentBrowser.svelte
@@ -197,9 +197,7 @@
 <style>
   .container {
     width: 100%;
-    height: min-content;
-    background: var(--gray-1);
-    box-shadow: inset var(--shadow-2);
+    height: auto;
   }
 
   label.select-all {

From 595852c9d639d6c7f99476a144de38d1182e7e46 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 24 Sep 2024 15:12:04 -0400
Subject: [PATCH 7/9] Fix width of AddOnBrowser

---
 src/lib/components/layouts/AddOnBrowser.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/layouts/AddOnBrowser.svelte b/src/lib/components/layouts/AddOnBrowser.svelte
index 49b044adb..58d559cb5 100644
--- a/src/lib/components/layouts/AddOnBrowser.svelte
+++ b/src/lib/components/layouts/AddOnBrowser.svelte
@@ -156,6 +156,7 @@
     gap: 2rem;
   }
   .container {
+    width: 100%;
     max-width: var(--app-max-w, 100rem);
     margin: 0 auto;
     max-height: 100%;

From 0ef228a76f4332ebb86febc0ef243c0c9882796f Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 24 Sep 2024 15:22:29 -0400
Subject: [PATCH 8/9] Padding for addon history

---
 src/lib/components/layouts/AddOnBrowser.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/layouts/AddOnBrowser.svelte b/src/lib/components/layouts/AddOnBrowser.svelte
index 58d559cb5..688d0db9a 100644
--- a/src/lib/components/layouts/AddOnBrowser.svelte
+++ b/src/lib/components/layouts/AddOnBrowser.svelte
@@ -154,6 +154,7 @@
     display: flex;
     flex-direction: column;
     gap: 2rem;
+    padding: 1rem;
   }
   .container {
     width: 100%;

From cd059326a1c53ea410c352854e4af2bdf2403a4b Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 24 Sep 2024 15:24:03 -0400
Subject: [PATCH 9/9] AddOn Browser sidebar width

---
 src/lib/components/layouts/AddOnBrowser.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/layouts/AddOnBrowser.svelte b/src/lib/components/layouts/AddOnBrowser.svelte
index 688d0db9a..4752b5c78 100644
--- a/src/lib/components/layouts/AddOnBrowser.svelte
+++ b/src/lib/components/layouts/AddOnBrowser.svelte
@@ -149,6 +149,10 @@
     background: var(--gray-1);
     box-shadow: inset var(--shadow-2);
   }
+  .nav {
+    min-width: 16rem;
+    max-width: 18rem;
+  }
   .history {
     max-width: unset;
     display: flex;
@@ -162,7 +166,7 @@
     margin: 0 auto;
     max-height: 100%;
     display: grid;
-    grid-template-columns: 16rem 2fr 40%;
+    grid-template-columns: 18rem 2fr 40%;
     grid-template-rows: 1fr;
   }
 </style>