From a098d847914fcf980652e25ad24a15ee0ae66f34 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Mon, 18 Dec 2023 16:58:56 -0500
Subject: [PATCH 1/4] Document components

---
 src/common/dialog/DocumentPickerDialog.svelte |   14 +-
 src/pages/app/Document.svelte                 |   28 +-
 src/pages/app/fixtures/addon_runs.json        |    1 +
 src/pages/app/fixtures/document.json          |   46 +
 src/pages/app/fixtures/documents.json         | 1157 +++++++++++++++++
 src/pages/app/stories/Document.stories.svelte |   30 +
 .../stories/DocumentThumbnail.stories.svelte  |   45 +
 .../app/stories/Documents.stories.svelte      |   80 ++
 src/pages/app/stories/mock.js                 |    6 +
 9 files changed, 1393 insertions(+), 14 deletions(-)
 create mode 100644 src/pages/app/fixtures/addon_runs.json
 create mode 100644 src/pages/app/fixtures/document.json
 create mode 100644 src/pages/app/fixtures/documents.json
 create mode 100644 src/pages/app/stories/Document.stories.svelte
 create mode 100644 src/pages/app/stories/DocumentThumbnail.stories.svelte
 create mode 100644 src/pages/app/stories/Documents.stories.svelte

diff --git a/src/common/dialog/DocumentPickerDialog.svelte b/src/common/dialog/DocumentPickerDialog.svelte
index 039648ea1..a83c6c112 100644
--- a/src/common/dialog/DocumentPickerDialog.svelte
+++ b/src/common/dialog/DocumentPickerDialog.svelte
@@ -1,8 +1,11 @@
 <script>
+  import { createEventDispatcher } from "svelte";
   import { modification } from "@/viewer/modification/modification.js";
   import Documents from "@/pages/app/Documents.svelte";
   import emitter from "@/emit.js";
 
+  const dispatch = createEventDispatcher();
+
   const emit = emitter({
     dismiss() {},
   });
@@ -10,18 +13,17 @@
   function handlePick(event) {
     modification.insertDocument = event.detail;
     emit.dismiss(document);
+    // dispatch('dismiss', {})
   }
 </script>
 
-<div>
-  <div class="mcontent">
-    <div class="documents">
-      <Documents dialog={true} embed={true} on:pick={handlePick} />
-    </div>
+<div class="mcontent">
+  <div class="documents">
+    <Documents dialog={true} embed={true} on:pick={handlePick} />
   </div>
 </div>
 
-<style lang="scss">
+<style>
   .documents {
     padding: 0 10px;
   }
diff --git a/src/pages/app/Document.svelte b/src/pages/app/Document.svelte
index 1180a0407..bc43d4906 100644
--- a/src/pages/app/Document.svelte
+++ b/src/pages/app/Document.svelte
@@ -168,17 +168,23 @@
               </Link>
             {/each}
             {#if document.dataPoints.length > 0 && document.editAccess}
-              <span class="pencil" on:click={() => editData([document])}>
+              <button
+                class="pencil buttonLike"
+                on:click={() => editData([document])}
+              >
                 {@html pencilSvg}
-              </span>
+              </button>
             {/if}
           {/if}
         </div>
         {#if document.highlights != null && document.highlights.length > 0 && !closeHighlights}
           <div class="hinfo">
-            <span class="x" on:click={() => (closeHighlights = true)}>
+            <button
+              class="x buttonLike"
+              on:click={() => (closeHighlights = true)}
+            >
               {@html closeSimpleSvg}
-            </span>
+            </button>
 
             {#if moreToExpand}
               <span>
@@ -189,9 +195,12 @@
                   },
                 })}
               </span>
-              <span class="padleft" on:click={() => (expandHighlights = true)}>
+              <button
+                class="padleft buttonLike"
+                on:click={() => (expandHighlights = true)}
+              >
                 {$_("document.showAll")}
-              </span>
+              </button>
             {:else}
               <span>
                 {$_("document.matchingPages", {
@@ -239,9 +248,12 @@
 
         {#if document.noteHighlights != null && document.noteHighlights.length > 0 && !closeNoteHighlights}
           <div class="hinfo">
-            <span class="x" on:click={() => (closeNoteHighlights = true)}>
+            <button
+              class="x buttonLike"
+              on:click={() => (closeNoteHighlights = true)}
+            >
               {@html closeSimpleSvg}
-            </span>
+            </button>
 
             <span>Notes matching the query</span>
           </div>
diff --git a/src/pages/app/fixtures/addon_runs.json b/src/pages/app/fixtures/addon_runs.json
new file mode 100644
index 000000000..251b6f02e
--- /dev/null
+++ b/src/pages/app/fixtures/addon_runs.json
@@ -0,0 +1 @@
+{ "next": null, "previous": null, "results": [] }
diff --git a/src/pages/app/fixtures/document.json b/src/pages/app/fixtures/document.json
new file mode 100644
index 000000000..968c995ae
--- /dev/null
+++ b/src/pages/app/fixtures/document.json
@@ -0,0 +1,46 @@
+{
+  "id": 1,
+  "access": "public",
+  "admin_noindex": false,
+  "asset_url": "https://s3.documentcloud.org/",
+  "canonical_url": "https://www.documentcloud.org/documents/1-a-i-g-bailout-the-inspector-generals-report",
+  "created_at": "2010-02-22T19:48:08.738905Z",
+  "data": {},
+  "description": "Neil Barofsky's report concludes that officials overseeing the rescue of the American International Group might have overpaid other banks to wrap up A.I.G.'s financial obligations.",
+  "edit_access": false,
+  "file_hash": "",
+  "noindex": false,
+  "language": "eng",
+  "organization": {
+    "id": 1,
+    "avatar_url": "https://cdn.muckrock.com/static/images/avatars/organization.png",
+    "individual": false,
+    "name": "DocumentCloud",
+    "slug": "dcloud",
+    "uuid": "99875da4-7b70-4150-b854-7ba5a3951f99"
+  },
+  "original_extension": "pdf",
+  "page_count": 47,
+  "page_spec": "612.0x792.0:0-46",
+  "projects": [46386, 6],
+  "publish_at": null,
+  "published_url": "",
+  "related_article": "",
+  "revision_control": false,
+  "slug": "a-i-g-bailout-the-inspector-generals-report",
+  "source": "Office of the Special Inspector General for T.A.R.P.",
+  "status": "success",
+  "title": "A.I.G. Bailout: The Inspector General's Report",
+  "updated_at": "2020-11-10T16:23:31.154198Z",
+  "user": {
+    "id": 1,
+    "avatar_url": "https://cdn.muckrock.com/static/images/avatars/profile.png",
+    "name": "Jeremy Ashkenas",
+    "organization": 24523,
+    "organizations": [24523],
+    "admin_organizations": [24523],
+    "username": "JeremyAshkenas_VfDHJpUE",
+    "uuid": "48175058-8eb8-44b8-943c-a705036ea840",
+    "verified_journalist": false
+  }
+}
diff --git a/src/pages/app/fixtures/documents.json b/src/pages/app/fixtures/documents.json
new file mode 100644
index 000000000..ce1fef279
--- /dev/null
+++ b/src/pages/app/fixtures/documents.json
@@ -0,0 +1,1157 @@
+{
+  "count": 4266,
+  "next": "https://api.staging.documentcloud.org/api/documents/?expand=user%2Corganization&page=2",
+  "previous": null,
+  "results": [
+    {
+      "id": 451349,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/451349-christy-clark-donor-list",
+      "created_at": "2012-10-03T19:34:19.585090Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 3,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "http://thetyee.ca/News/2012/12/05/test-test/index.html",
+      "revision_control": false,
+      "slug": "christy-clark-donor-list",
+      "source": "",
+      "status": "success",
+      "title": "Christy Clark Donor List",
+      "updated_at": "2023-11-17T20:17:27.155917Z",
+      "user": {
+        "id": 5484,
+        "avatar_url": "",
+        "name": "Phillip Smith",
+        "organization": 10005,
+        "organizations": [10005],
+        "admin_organizations": [10005],
+        "username": "PhillipSmith",
+        "uuid": "f37c7e95-c9f2-473b-aff9-190d31c70209",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 453460,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/453460-case-study-bc",
+      "created_at": "2012-10-04T17:40:10.314430Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 6,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "http://thetyee.ca/News/2012/10/05/BC-Education-Plan/index.html",
+      "revision_control": false,
+      "slug": "case-study-bc",
+      "source": "",
+      "status": "success",
+      "title": "Case Study Bc",
+      "updated_at": "2020-10-13T20:14:56.384385Z",
+      "user": {
+        "id": 5496,
+        "avatar_url": "",
+        "name": "Katie Hyslop",
+        "organization": 10009,
+        "organizations": [10009],
+        "admin_organizations": [10009],
+        "username": "KatieHyslop",
+        "uuid": "db112e0a-445f-4cf1-86b3-edf1ada01710",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 460436,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/460436-sodexo-pfsa",
+      "created_at": "2012-10-10T18:20:49.148275Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 140,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "sodexo-pfsa",
+      "source": "",
+      "status": "success",
+      "title": "Sodexo PFSA",
+      "updated_at": "2020-10-13T20:14:56.380905Z",
+      "user": {
+        "id": 5493,
+        "avatar_url": "",
+        "name": "Colleen Kimmett",
+        "organization": 10003,
+        "organizations": [10003],
+        "admin_organizations": [10003],
+        "username": "ColleenKimmett",
+        "uuid": "e19a58c9-342f-48df-9cd6-bdbab8da7bf3",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 469878,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/469878-vch-sodexo-contract-amendments",
+      "created_at": "2012-10-16T18:14:35.422576Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 17,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "vch-sodexo-contract-amendments",
+      "source": "",
+      "status": "success",
+      "title": "VCH:Sodexo Contract Amendments",
+      "updated_at": "2020-10-13T20:14:56.417586Z",
+      "user": {
+        "id": 5493,
+        "avatar_url": "",
+        "name": "Colleen Kimmett",
+        "organization": 10003,
+        "organizations": [10003],
+        "admin_organizations": [10003],
+        "username": "ColleenKimmett",
+        "uuid": "e19a58c9-342f-48df-9cd6-bdbab8da7bf3",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 470015,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/470015-patient-experiences-acute-care-2008",
+      "created_at": "2012-10-16T20:30:51.344067Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 36,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "patient-experiences-acute-care-2008",
+      "source": "",
+      "status": "success",
+      "title": "Patient Experiences Acute Care 2008",
+      "updated_at": "2020-10-13T20:14:56.445170Z",
+      "user": {
+        "id": 5493,
+        "avatar_url": "",
+        "name": "Colleen Kimmett",
+        "organization": 10003,
+        "organizations": [10003],
+        "admin_organizations": [10003],
+        "username": "ColleenKimmett",
+        "uuid": "e19a58c9-342f-48df-9cd6-bdbab8da7bf3",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 472490,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/472490-2012-08-14-ceri-study-129-part-iii",
+      "created_at": "2012-10-18T22:56:32.726680Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 120,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "2012-08-14-ceri-study-129-part-iii",
+      "source": "dddd",
+      "status": "success",
+      "title": "2012 08 14 CERI Study 129 Part III",
+      "updated_at": "2020-10-13T20:14:56.438144Z",
+      "user": {
+        "id": 5493,
+        "avatar_url": "",
+        "name": "Colleen Kimmett",
+        "organization": 10003,
+        "organizations": [10003],
+        "admin_organizations": [10003],
+        "username": "ColleenKimmett",
+        "uuid": "e19a58c9-342f-48df-9cd6-bdbab8da7bf3",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 509312,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/509312-amendment-5-forrest-kerr",
+      "created_at": "2012-11-07T22:21:46.344068Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "0c7b474aeb47dd4b7882c4825c34436aff41c54a",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 3,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "amendment-5-forrest-kerr",
+      "source": "",
+      "status": "success",
+      "title": "Amendment 5 Forrest Kerr",
+      "updated_at": "2020-10-13T20:14:56.418132Z",
+      "user": {
+        "id": 3896,
+        "avatar_url": "",
+        "name": "Geoff D'Auria",
+        "organization": 10004,
+        "organizations": [10004],
+        "admin_organizations": [10004],
+        "username": "GeoffDAuria",
+        "uuid": "c3efe427-0b01-443e-b5fd-d1bc9a164773",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 516286,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/516286-response-to-rsvp",
+      "created_at": "2012-11-14T22:49:14.334646Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "f727c1231a4ce2ef58af1f4cf4a4e91e84b449c6",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 1,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "response-to-rsvp",
+      "source": "",
+      "status": "success",
+      "title": "Response to RSVP",
+      "updated_at": "2020-10-13T20:14:56.433476Z",
+      "user": {
+        "id": 5496,
+        "avatar_url": "",
+        "name": "Katie Hyslop",
+        "organization": 10009,
+        "organizations": [10009],
+        "admin_organizations": [10009],
+        "username": "KatieHyslop",
+        "uuid": "db112e0a-445f-4cf1-86b3-edf1ada01710",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 529260,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/529260-december-6-1989",
+      "created_at": "2012-12-05T23:32:34.572762Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "70fbaabea913509501ef44fd36c86e13d530d6c1",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 1,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "http://thetyee.ca/Life/2012/12/06/Violence-Against-Women/",
+      "revision_control": false,
+      "slug": "december-6-1989",
+      "source": "",
+      "status": "success",
+      "title": "December 6 1989",
+      "updated_at": "2020-10-13T20:14:56.388488Z",
+      "user": {
+        "id": 5492,
+        "avatar_url": "",
+        "name": "Robyn Smith",
+        "organization": 10007,
+        "organizations": [10007],
+        "admin_organizations": [10007],
+        "username": "RobynSmith",
+        "uuid": "25dbed0d-0415-430c-a152-1829c164c75a",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 536157,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/536157-consideration-of-reports-submitted-by-states",
+      "created_at": "2012-12-08T00:45:26.637574Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "74b7fca957799c4daa6f943da35f569d95d828f0",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 22,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "consideration-of-reports-submitted-by-states",
+      "source": "",
+      "status": "success",
+      "title": "Consideration of Reports Submitted by States Parties Under Article 44 of the Convention Concluding Observations Canada",
+      "updated_at": "2020-10-13T20:14:56.418294Z",
+      "user": {
+        "id": 5496,
+        "avatar_url": "",
+        "name": "Katie Hyslop",
+        "organization": 10009,
+        "organizations": [10009],
+        "admin_organizations": [10009],
+        "username": "KatieHyslop",
+        "uuid": "db112e0a-445f-4cf1-86b3-edf1ada01710",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 563395,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/563395-is-reading-job-1",
+      "created_at": "2013-01-30T19:34:05.383548Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "5c669b7e032f47febbcb543c3eb403bbf16d8065",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 2,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "is-reading-job-1",
+      "source": "",
+      "status": "success",
+      "title": "Is Reading Job 1",
+      "updated_at": "2020-10-13T20:14:56.423599Z",
+      "user": {
+        "id": 5496,
+        "avatar_url": "",
+        "name": "Katie Hyslop",
+        "organization": 10009,
+        "organizations": [10009],
+        "admin_organizations": [10009],
+        "username": "KatieHyslop",
+        "uuid": "db112e0a-445f-4cf1-86b3-edf1ada01710",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 607283,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/607283-sfu-living-wage-research-report-2",
+      "created_at": "2013-02-21T22:37:04.119463Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "aad94a1fdfb680ba8d7b8ef3e6c16437a844e124",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 50,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "sfu-living-wage-research-report-2",
+      "source": "",
+      "status": "success",
+      "title": "SFU Living Wage Research Report (2)",
+      "updated_at": "2020-10-13T20:14:56.437159Z",
+      "user": {
+        "id": 5496,
+        "avatar_url": "",
+        "name": "Katie Hyslop",
+        "organization": 10009,
+        "organizations": [10009],
+        "admin_organizations": [10009],
+        "username": "KatieHyslop",
+        "uuid": "db112e0a-445f-4cf1-86b3-edf1ada01710",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 690037,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/690037-166221-2013-14-estimated-operating-grants",
+      "created_at": "2013-04-19T22:04:57.364665Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "3591e3328171045a8a352c7ceae5d6b0b401e981",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 2,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "166221-2013-14-estimated-operating-grants",
+      "source": "",
+      "status": "success",
+      "title": "166221 2013 14 Estimated Operating Grants",
+      "updated_at": "2020-10-13T20:14:56.448893Z",
+      "user": {
+        "id": 5496,
+        "avatar_url": "",
+        "name": "Katie Hyslop",
+        "organization": 10009,
+        "organizations": [10009],
+        "admin_organizations": [10009],
+        "username": "KatieHyslop",
+        "uuid": "db112e0a-445f-4cf1-86b3-edf1ada01710",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 698216,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/698216-vsb-infographic",
+      "created_at": "2013-05-08T17:48:38.875773Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "e622eeece0e00db2249315da4eab62da0d61f476",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "jpg",
+      "page_count": 1,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "vsb-infographic",
+      "source": "",
+      "status": "success",
+      "title": "VSB Infographic",
+      "updated_at": "2020-10-13T20:14:56.413038Z",
+      "user": {
+        "id": 5496,
+        "avatar_url": "",
+        "name": "Katie Hyslop",
+        "organization": 10009,
+        "organizations": [10009],
+        "admin_organizations": [10009],
+        "username": "KatieHyslop",
+        "uuid": "db112e0a-445f-4cf1-86b3-edf1ada01710",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 698220,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/698220-vsb-2013-restoration-budget",
+      "created_at": "2013-05-08T17:55:47.819983Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "27d17536e6597aa3e411132440cf7dd744d1b39b",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 5,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "http://www.vsb.bc.ca/sites/default/files/13May06_op_board_itemII.d.pdf",
+      "revision_control": false,
+      "slug": "vsb-2013-restoration-budget",
+      "source": "",
+      "status": "success",
+      "title": "VSB 2013 Restoration Budget",
+      "updated_at": "2020-10-13T20:14:56.385345Z",
+      "user": {
+        "id": 5496,
+        "avatar_url": "",
+        "name": "Katie Hyslop",
+        "organization": 10009,
+        "organizations": [10009],
+        "admin_organizations": [10009],
+        "username": "KatieHyslop",
+        "uuid": "db112e0a-445f-4cf1-86b3-edf1ada01710",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 709117,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/709117-1-aandc-to-issp",
+      "created_at": "2013-06-05T22:01:10.198206Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "6dc9568f4f0052fa9c5489095aea7ab9b4e80e82",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 2,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "1-aandc-to-issp",
+      "source": "",
+      "status": "success",
+      "title": "1 AANDC to ISSP",
+      "updated_at": "2020-10-13T20:14:56.432035Z",
+      "user": {
+        "id": 5496,
+        "avatar_url": "",
+        "name": "Katie Hyslop",
+        "organization": 10009,
+        "organizations": [10009],
+        "admin_organizations": [10009],
+        "username": "KatieHyslop",
+        "uuid": "db112e0a-445f-4cf1-86b3-edf1ada01710",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 709122,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/709122-8-fnesc-iahla-to-aandc-apr-11",
+      "created_at": "2013-06-05T22:48:33.970546Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "ac25beb1a6272548af609127b2174b772060afc2",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 3,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "8-fnesc-iahla-to-aandc-apr-11",
+      "source": "",
+      "status": "success",
+      "title": "8 FNESC IAHLA to AANDC Apr 11",
+      "updated_at": "2020-10-13T20:14:56.443918Z",
+      "user": {
+        "id": 5496,
+        "avatar_url": "",
+        "name": "Katie Hyslop",
+        "organization": 10009,
+        "organizations": [10009],
+        "admin_organizations": [10009],
+        "username": "KatieHyslop",
+        "uuid": "db112e0a-445f-4cf1-86b3-edf1ada01710",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 713124,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/713124-quickwins-highlights-tyee",
+      "created_at": "2013-06-12T21:29:16.719575Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "4dee5041643f85fad9f5dceb852e090cf4589ad9",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 46,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "http://thetyee.ca/News/2013/06/12/Quick-Wins-Docs/",
+      "revision_control": false,
+      "slug": "quickwins-highlights-tyee",
+      "source": "",
+      "status": "success",
+      "title": "QuickWins Highlights Tyee",
+      "updated_at": "2020-10-13T20:14:56.380639Z",
+      "user": {
+        "id": 7143,
+        "avatar_url": "",
+        "name": "Bob Makin",
+        "organization": 10010,
+        "organizations": [10010],
+        "admin_organizations": [10010],
+        "username": "BobMakin",
+        "uuid": "dc69fb57-cfe1-458f-b85f-63bccbe39a5f",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 713152,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/713152-review-of-the-draft-multicultural-strategic",
+      "created_at": "2013-06-12T22:35:11.532713Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "d96195528e3732694bb63afe988bc29daf2f1b7b",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 3080,
+      "page_spec": "",
+      "projects": [9356],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "review-of-the-draft-multicultural-strategic",
+      "source": "",
+      "status": "success",
+      "title": "Review of the Draft Multicultural Strategic Outreach Plan, Part 2",
+      "updated_at": "2020-10-13T20:14:56.451514Z",
+      "user": {
+        "id": 5484,
+        "avatar_url": "",
+        "name": "Phillip Smith",
+        "organization": 10005,
+        "organizations": [10005],
+        "admin_organizations": [10005],
+        "username": "PhillipSmith",
+        "uuid": "f37c7e95-c9f2-473b-aff9-190d31c70209",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 713153,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/713153-review-of-the-draft-multicultural-strategic",
+      "created_at": "2013-06-12T22:36:24.273054Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "41a85987c5934b4288b4d9f6de176b167da7728a",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 1888,
+      "page_spec": "",
+      "projects": [9356],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "review-of-the-draft-multicultural-strategic",
+      "source": "",
+      "status": "success",
+      "title": "Review of the Draft Multicultural Strategic Outreach Plan, Part 3",
+      "updated_at": "2020-10-13T20:14:56.385148Z",
+      "user": {
+        "id": 5484,
+        "avatar_url": "",
+        "name": "Phillip Smith",
+        "organization": 10005,
+        "organizations": [10005],
+        "admin_organizations": [10005],
+        "username": "PhillipSmith",
+        "uuid": "f37c7e95-c9f2-473b-aff9-190d31c70209",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 713154,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/713154-review-of-the-draft-multicultural-strategic",
+      "created_at": "2013-06-12T22:36:43.610780Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "0b31137e0d5cf9d8ce10e7b52cc7d93c2ed187a1",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 2881,
+      "page_spec": "",
+      "projects": [9356],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "review-of-the-draft-multicultural-strategic",
+      "source": "",
+      "status": "success",
+      "title": "Review of the Draft Multicultural Strategic Outreach Plan, Part 1",
+      "updated_at": "2020-10-13T20:14:56.386165Z",
+      "user": {
+        "id": 5484,
+        "avatar_url": "",
+        "name": "Phillip Smith",
+        "organization": 10005,
+        "organizations": [10005],
+        "admin_organizations": [10005],
+        "username": "PhillipSmith",
+        "uuid": "f37c7e95-c9f2-473b-aff9-190d31c70209",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 716494,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/716494-meekes-email-thomas-mulcairs-17-year-secret",
+      "created_at": "2013-06-19T21:20:27.528721Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "750c5060e03e81fc17942886e095b607ab5ff1e9",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 3,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "meekes-email-thomas-mulcairs-17-year-secret",
+      "source": "",
+      "status": "success",
+      "title": "Meekes email - Thomas Mulcair's 17 Year Secret",
+      "updated_at": "2020-10-13T20:14:56.426101Z",
+      "user": {
+        "id": 5493,
+        "avatar_url": "",
+        "name": "Colleen Kimmett",
+        "organization": 10003,
+        "organizations": [10003],
+        "admin_organizations": [10003],
+        "username": "ColleenKimmett",
+        "uuid": "e19a58c9-342f-48df-9cd6-bdbab8da7bf3",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 716495,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/716495-meekes-email-trudeau-and-the-senate",
+      "created_at": "2013-06-19T21:21:09.688371Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "faddd68aa600a72c648ae488ee2c8b1ee86230fc",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 4,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "meekes-email-trudeau-and-the-senate",
+      "source": "",
+      "status": "success",
+      "title": "Meekes email - Trudeau and the Senate",
+      "updated_at": "2020-10-13T20:14:56.448176Z",
+      "user": {
+        "id": 5493,
+        "avatar_url": "",
+        "name": "Colleen Kimmett",
+        "organization": 10003,
+        "organizations": [10003],
+        "admin_organizations": [10003],
+        "username": "ColleenKimmett",
+        "uuid": "e19a58c9-342f-48df-9cd6-bdbab8da7bf3",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 716496,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/716496-meekes-email-mp-rob-moore-grace-foundation",
+      "created_at": "2013-06-19T21:22:14.056518Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "36da582a6127e6c9114bd0955b7d0cf6a2b813c8",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 2,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "meekes-email-mp-rob-moore-grace-foundation",
+      "source": "",
+      "status": "success",
+      "title": "Meekes email - MP Rob Moore Grace Foundation Statement",
+      "updated_at": "2020-10-13T20:14:56.423004Z",
+      "user": {
+        "id": 5493,
+        "avatar_url": "",
+        "name": "Colleen Kimmett",
+        "organization": 10003,
+        "organizations": [10003],
+        "admin_organizations": [10003],
+        "username": "ColleenKimmett",
+        "uuid": "e19a58c9-342f-48df-9cd6-bdbab8da7bf3",
+        "verified_journalist": true
+      }
+    },
+    {
+      "id": 739579,
+      "access": "public",
+      "admin_noindex": false,
+      "asset_url": "https://documentcloud-staging-files.s3.amazonaws.com/",
+      "canonical_url": "https://www.staging.documentcloud.org/documents/739579-notice-of-civil-claim-west-july-24-2013",
+      "created_at": "2013-07-24T20:29:41.036135Z",
+      "data": {},
+      "description": "",
+      "edit_access": false,
+      "file_hash": "ae4bd5cac373a1e400de65d0579e32eb1de1ffea",
+      "noindex": false,
+      "language": "eng",
+      "organization": {
+        "id": 545,
+        "avatar_url": "",
+        "individual": false,
+        "name": "The Tyee",
+        "slug": "thetyee",
+        "uuid": "03ffe120-4037-4014-ab83-6521b9a3270b"
+      },
+      "original_extension": "pdf",
+      "page_count": 9,
+      "page_spec": "",
+      "projects": [],
+      "publish_at": null,
+      "published_url": "",
+      "related_article": "",
+      "revision_control": false,
+      "slug": "notice-of-civil-claim-west-july-24-2013",
+      "source": "",
+      "status": "success",
+      "title": "Notice of Civil Claim (West) July 24, 2013",
+      "updated_at": "2020-10-13T20:14:56.430330Z",
+      "user": {
+        "id": 7143,
+        "avatar_url": "",
+        "name": "Bob Makin",
+        "organization": 10010,
+        "organizations": [10010],
+        "admin_organizations": [10010],
+        "username": "BobMakin",
+        "uuid": "dc69fb57-cfe1-458f-b85f-63bccbe39a5f",
+        "verified_journalist": true
+      }
+    }
+  ]
+}
diff --git a/src/pages/app/stories/Document.stories.svelte b/src/pages/app/stories/Document.stories.svelte
new file mode 100644
index 000000000..8fb7fc445
--- /dev/null
+++ b/src/pages/app/stories/Document.stories.svelte
@@ -0,0 +1,30 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import Document from "../Document.svelte";
+
+  import * as structure from "../../../structure/document.js";
+  import document from "../fixtures/document.json";
+
+  export const meta = {
+    title: "App / Documents / Document",
+    component: Document,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+
+  const args = {
+    document: new structure.Document(document),
+    embed: false,
+    dialog: false,
+  };
+</script>
+
+<Template let:args>
+  <Document {...args} />
+</Template>
+
+<Story name="default" {args} />
+
+<Story name="embed" args={{ ...args, embed: true }} />
+
+<Story name="dialog" args={{ ...args, dialog: true }} />
diff --git a/src/pages/app/stories/DocumentThumbnail.stories.svelte b/src/pages/app/stories/DocumentThumbnail.stories.svelte
new file mode 100644
index 000000000..50f4f2f5c
--- /dev/null
+++ b/src/pages/app/stories/DocumentThumbnail.stories.svelte
@@ -0,0 +1,45 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import DocumentThumbnail from "../DocumentThumbnail.svelte";
+
+  import { Document } from "../../../structure/document.js";
+  import document from "../fixtures/document.json";
+
+  export const meta = {
+    title: "App / Documents / Document Thumbnail",
+    component: DocumentThumbnail,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+
+  const args = {
+    document: new Document(document),
+    embed: false,
+    dialog: false,
+    noteCount: 0,
+    publicNote: false,
+    orgNote: false,
+    privateNote: false,
+  };
+</script>
+
+<Template let:args>
+  <DocumentThumbnail {...args} />
+</Template>
+
+<Story name="default" {args} />
+
+<Story name="embed" args={{ ...args, embed: true }} />
+
+<Story name="dialog" args={{ ...args, dialog: true }} />
+
+<Story
+  name="notes"
+  args={{
+    ...args,
+    noteCount: 5,
+    publicNote: true,
+    privateNote: true,
+    orgNote: true,
+  }}
+/>
diff --git a/src/pages/app/stories/Documents.stories.svelte b/src/pages/app/stories/Documents.stories.svelte
new file mode 100644
index 000000000..239eabc10
--- /dev/null
+++ b/src/pages/app/stories/Documents.stories.svelte
@@ -0,0 +1,80 @@
+<script context="module">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import Documents from "../Documents.svelte";
+
+  import * as structure from "../../../structure/document.js";
+  import { layout } from "../../../manager/layout.js";
+  import * as mock from "./mock.js";
+
+  export const meta = {
+    title: "App / Documents / Documents",
+    component: Documents,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+
+  layout.loading = false;
+
+  const args = {
+    embed: false,
+    containerWidth: null,
+    containerHeight: null,
+    dialog: false,
+  };
+
+  let container;
+</script>
+
+<Template let:args>
+  <div class="container" bind:this={container}>
+    <Documents {...args} containerElem={container} />
+  </div>
+</Template>
+
+<Story
+  name="default"
+  {args}
+  parameters={{
+    msw: {
+      handlers: [
+        mock.users.data,
+        mock.users.me,
+        mock.organizations.data,
+        mock.projects.data,
+        mock.runs.data,
+      ],
+    },
+  }}
+/>
+
+<Story
+  name="embed"
+  args={{ ...args, embed: true }}
+  parameters={{
+    msw: {
+      handlers: [
+        mock.users.data,
+        mock.users.me,
+        mock.organizations.data,
+        mock.projects.data,
+        mock.runs.data,
+      ],
+    },
+  }}
+/>
+
+<Story
+  name="dialog"
+  args={{ ...args, dialog: true }}
+  parameters={{
+    msw: {
+      handlers: [
+        mock.users.data,
+        mock.users.me,
+        mock.organizations.data,
+        mock.projects.data,
+        mock.runs.data,
+      ],
+    },
+  }}
+/>
diff --git a/src/pages/app/stories/mock.js b/src/pages/app/stories/mock.js
index 287a8fe9d..4728e8197 100644
--- a/src/pages/app/stories/mock.js
+++ b/src/pages/app/stories/mock.js
@@ -5,12 +5,14 @@ import usersFixture from "../fixtures/users.json";
 import orgFixtures from "../fixtures/organizations.json";
 import projectFixtures from "../fixtures/projects.json";
 import meFixture from "../fixtures/me.json";
+import runFixtures from "../fixtures/addon_runs.json";
 
 const urls = {
   users: new URL("users/", baseApiUrl).toString(),
   me: new URL("users/me/", baseApiUrl).toString(),
   organizations: new URL("organizations", baseApiUrl).toString(),
   projects: new URL("projects/", baseApiUrl).toString(),
+  runs: new URL("addon_runs/", baseApiUrl).toString(),
 };
 
 export const users = {
@@ -50,3 +52,7 @@ export const projects = {
     res(ctx.status(404, "Not Found"), ctx.json({ detail: "Not found." })),
   ),
 };
+
+export const runs = {
+  data: rest.get(urls.runs, (req, res, ctx) => res(ctx.json(runFixtures))),
+};

From bf052aa0ee3a240b94dbb264d503bbcf49e19bb9 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Mon, 18 Dec 2023 17:20:20 -0500
Subject: [PATCH 2/4] Embed Footer, No Documents and Processing Bar

---
 .../app/stories/Documents.stories.svelte      |  1 -
 .../app/stories/EmbedFooter.stories.svelte    | 15 +++++++++++++++
 .../app/stories/NoDocuments.stories.svelte    | 15 +++++++++++++++
 .../app/stories/ProcessingBar.stories.svelte  | 19 +++++++++++++++++++
 4 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/app/stories/EmbedFooter.stories.svelte
 create mode 100644 src/pages/app/stories/NoDocuments.stories.svelte
 create mode 100644 src/pages/app/stories/ProcessingBar.stories.svelte

diff --git a/src/pages/app/stories/Documents.stories.svelte b/src/pages/app/stories/Documents.stories.svelte
index 239eabc10..e5b6c5ac1 100644
--- a/src/pages/app/stories/Documents.stories.svelte
+++ b/src/pages/app/stories/Documents.stories.svelte
@@ -2,7 +2,6 @@
   import { Story, Template } from "@storybook/addon-svelte-csf";
   import Documents from "../Documents.svelte";
 
-  import * as structure from "../../../structure/document.js";
   import { layout } from "../../../manager/layout.js";
   import * as mock from "./mock.js";
 
diff --git a/src/pages/app/stories/EmbedFooter.stories.svelte b/src/pages/app/stories/EmbedFooter.stories.svelte
new file mode 100644
index 000000000..6c73b1f05
--- /dev/null
+++ b/src/pages/app/stories/EmbedFooter.stories.svelte
@@ -0,0 +1,15 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import EmbedFooter from "../EmbedFooter.svelte";
+
+  export const meta = {
+    title: "App / Documents / Embed Footer",
+    component: EmbedFooter,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Story name="default">
+  <EmbedFooter />
+</Story>
diff --git a/src/pages/app/stories/NoDocuments.stories.svelte b/src/pages/app/stories/NoDocuments.stories.svelte
new file mode 100644
index 000000000..4223e9786
--- /dev/null
+++ b/src/pages/app/stories/NoDocuments.stories.svelte
@@ -0,0 +1,15 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import NoDocuments from "../NoDocuments.svelte";
+
+  export const meta = {
+    title: "App / Documents / No Documents",
+    component: NoDocuments,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Story name="default">
+  <NoDocuments />
+</Story>
diff --git a/src/pages/app/stories/ProcessingBar.stories.svelte b/src/pages/app/stories/ProcessingBar.stories.svelte
new file mode 100644
index 000000000..430a50969
--- /dev/null
+++ b/src/pages/app/stories/ProcessingBar.stories.svelte
@@ -0,0 +1,19 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import ProcessingBar from "../ProcessingBar.svelte";
+
+  import { documents } from "../../../manager/documents.js";
+
+  documents.doneProcessing = false;
+
+  export const meta = {
+    title: "App / Documents / Processing Bar",
+    component: ProcessingBar,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Story name="default">
+  <ProcessingBar />
+</Story>

From ef5da8893e55add0c4e7e740e540a0a003b7d76a Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Mon, 18 Dec 2023 17:22:21 -0500
Subject: [PATCH 3/4] not yet

---
 src/common/dialog/DocumentPickerDialog.svelte | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/common/dialog/DocumentPickerDialog.svelte b/src/common/dialog/DocumentPickerDialog.svelte
index a83c6c112..c18d95707 100644
--- a/src/common/dialog/DocumentPickerDialog.svelte
+++ b/src/common/dialog/DocumentPickerDialog.svelte
@@ -1,11 +1,8 @@
 <script>
-  import { createEventDispatcher } from "svelte";
   import { modification } from "@/viewer/modification/modification.js";
   import Documents from "@/pages/app/Documents.svelte";
   import emitter from "@/emit.js";
 
-  const dispatch = createEventDispatcher();
-
   const emit = emitter({
     dismiss() {},
   });
@@ -13,7 +10,6 @@
   function handlePick(event) {
     modification.insertDocument = event.detail;
     emit.dismiss(document);
-    // dispatch('dismiss', {})
   }
 </script>
 

From 4d90d7376fcb184fd57200d982de7ccd2f773377 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Mon, 18 Dec 2023 17:30:01 -0500
Subject: [PATCH 4/4] more autodocs

---
 .gitignore                                       | 1 +
 src/common/stories/Logo.stories.svelte           | 2 ++
 src/pages/app/stories/SearchBar.stories.svelte   | 3 ++-
 src/pages/app/stories/SearchInput.stories.svelte | 3 ++-
 src/pages/app/stories/SearchLink.stories.svelte  | 3 ++-
 5 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 0abeca247..e3fc1919a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,4 @@ tests/fixtures/development.json
 
 scratch/
 dist/
+storybook-static/
\ No newline at end of file
diff --git a/src/common/stories/Logo.stories.svelte b/src/common/stories/Logo.stories.svelte
index 6a6118c8c..9ad09e8bc 100644
--- a/src/common/stories/Logo.stories.svelte
+++ b/src/common/stories/Logo.stories.svelte
@@ -5,6 +5,8 @@
   export const meta = {
     title: "Common / Logo",
     component: Logo,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
   };
 
   const args = {
diff --git a/src/pages/app/stories/SearchBar.stories.svelte b/src/pages/app/stories/SearchBar.stories.svelte
index 5af17dff4..6d4ee7be4 100644
--- a/src/pages/app/stories/SearchBar.stories.svelte
+++ b/src/pages/app/stories/SearchBar.stories.svelte
@@ -6,7 +6,8 @@
   export const meta = {
     title: "App / Search / Search Bar",
     component: SearchBar,
-    parameters: { layout: "fullscreen" },
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
   };
 </script>
 
diff --git a/src/pages/app/stories/SearchInput.stories.svelte b/src/pages/app/stories/SearchInput.stories.svelte
index 9c58eaf37..e0e5bfea9 100644
--- a/src/pages/app/stories/SearchInput.stories.svelte
+++ b/src/pages/app/stories/SearchInput.stories.svelte
@@ -7,7 +7,8 @@
   export const meta = {
     title: "App / Search / Search Input",
     component: SearchInput,
-    parameters: { layout: "fullscreen" },
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
   };
 </script>
 
diff --git a/src/pages/app/stories/SearchLink.stories.svelte b/src/pages/app/stories/SearchLink.stories.svelte
index 38446acb1..be878ae99 100644
--- a/src/pages/app/stories/SearchLink.stories.svelte
+++ b/src/pages/app/stories/SearchLink.stories.svelte
@@ -6,7 +6,8 @@
   export const meta = {
     title: "App / Search / Search Link",
     component: SearchLink,
-    parameters: { layout: "fullscreen" },
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
   };
 </script>