From c2e69bd1521518ce890ae28ea3998bb1a7ef33a8 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 14 Dec 2023 15:03:47 -0500
Subject: [PATCH 1/2] Add viewer controls to storybook

---
 src/assets/fullscreen.svg                     |   1 -
 src/pages/viewer/Body.svelte                  |   2 +-
 src/pages/viewer/Footer.svelte                |   3 +-
 src/pages/viewer/Header.svelte                |  11 +-
 src/pages/viewer/SelectableWord.svelte        |  10 +-
 src/pages/viewer/Sidebar.svelte               | 187 +++++++++---------
 src/pages/viewer/SimpleBody.svelte            |   2 +-
 src/pages/viewer/TextBody.svelte              |   1 -
 src/pages/viewer/Viewer.svelte                |  27 +--
 src/pages/viewer/controls/FullScreen.svelte   |  27 ++-
 src/pages/viewer/controls/Hamburger.svelte    |  13 +-
 src/pages/viewer/controls/Paginator.svelte    | 121 ++++++------
 .../stories/FullScreen.stories.svelte         |  15 ++
 .../controls/stories/Hamburger.stories.svelte |  13 ++
 .../controls/stories/Paginator.stories.svelte |  13 ++
 .../controls/stories/Search.stories.svelte    |  22 +++
 .../stories/ViewDropdown.stories.svelte       |  13 ++
 .../controls/stories/Zoom.stories.svelte      |  13 ++
 18 files changed, 290 insertions(+), 204 deletions(-)
 delete mode 100644 src/assets/fullscreen.svg
 delete mode 100644 src/pages/viewer/TextBody.svelte
 create mode 100644 src/pages/viewer/controls/stories/FullScreen.stories.svelte
 create mode 100644 src/pages/viewer/controls/stories/Hamburger.stories.svelte
 create mode 100644 src/pages/viewer/controls/stories/Paginator.stories.svelte
 create mode 100644 src/pages/viewer/controls/stories/Search.stories.svelte
 create mode 100644 src/pages/viewer/controls/stories/ViewDropdown.stories.svelte
 create mode 100644 src/pages/viewer/controls/stories/Zoom.stories.svelte

diff --git a/src/assets/fullscreen.svg b/src/assets/fullscreen.svg
deleted file mode 100644
index 55ff5a932..000000000
--- a/src/assets/fullscreen.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17" height="17"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.95.8H.31v5.64h2.38V3.2h3.26V.8zM15.77 6.44V.8h-5.65V3.2h3.26v3.25h2.39zM10.12 16.26h5.65v-5.64h-2.39v3.26h-3.26v2.38zM.31 10.62v5.64h5.64v-2.38H2.7v-3.26H.31z" fill="#000" fill-opacity=".6"/></svg>
diff --git a/src/pages/viewer/Body.svelte b/src/pages/viewer/Body.svelte
index aebdc89ef..e937061e8 100644
--- a/src/pages/viewer/Body.svelte
+++ b/src/pages/viewer/Body.svelte
@@ -17,7 +17,7 @@
     enterAnnotateMode,
     enterModifyMode,
     enterSectionsMode,
-  } from "@/viewer/actions";
+  } from "@/viewer/actions.js";
 
   let docElem;
   let actionHeight;
diff --git a/src/pages/viewer/Footer.svelte b/src/pages/viewer/Footer.svelte
index cf94c3639..e7975ff02 100644
--- a/src/pages/viewer/Footer.svelte
+++ b/src/pages/viewer/Footer.svelte
@@ -11,6 +11,7 @@
   export let compact = false;
   export let embed = false;
   export let showFullscreen = false;
+  export let document;
 
   $: style = `height: ${FOOTER_HEIGHT}px;`;
 </script>
@@ -29,7 +30,7 @@
           <Zoom />
         </span>
         {#if embed && showFullscreen}
-          <FullScreen />
+          <FullScreen url={document.canonicalUrl} />
         {/if}
       </div>
     {/if}
diff --git a/src/pages/viewer/Header.svelte b/src/pages/viewer/Header.svelte
index f6c9111d0..79e2adbf5 100644
--- a/src/pages/viewer/Header.svelte
+++ b/src/pages/viewer/Header.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
+  import { ChevronLeft24 } from "svelte-octicons";
+  import { createEventDispatcher } from "svelte";
 
   import Loader from "../../common/Loader.svelte";
   import Link from "../../router/Link.svelte";
-  import backArrowSvg from "../../assets/back_arrow.svg?raw";
 
   import Search from "./controls/Search.svelte";
   import Hamburger from "./controls/Hamburger.svelte";
 
-  import { HEADER_HEIGHT } from "./constants";
+  import { HEADER_HEIGHT } from "./constants.js";
 
   export let document: any;
   export let loaded: boolean;
@@ -16,6 +17,8 @@
   export let showOrg = true;
   export let disableControls = false;
   export let embed = false;
+
+  const dispatch = createEventDispatcher();
 </script>
 
 <header
@@ -29,7 +32,7 @@
       {#if !embed}
         <div class="back">
           <Link back={true}>
-            {@html backArrowSvg}
+            <ChevronLeft24 />
           </Link>
         </div>
       {/if}
@@ -57,7 +60,7 @@
       <Search />
     </div>
     <div class="cell">
-      <Hamburger />
+      <Hamburger on:click={(e) => dispatch("toggle.sidebar")} />
     </div>
   </div>
 </header>
diff --git a/src/pages/viewer/SelectableWord.svelte b/src/pages/viewer/SelectableWord.svelte
index 9f85fee41..8b61e01da 100644
--- a/src/pages/viewer/SelectableWord.svelte
+++ b/src/pages/viewer/SelectableWord.svelte
@@ -110,7 +110,7 @@
   />
 {/if}
 
-<style lang="scss">
+<style>
   .selectabletext {
     position: absolute;
     color: transparent;
@@ -119,11 +119,11 @@
     transform-origin: left top;
     white-space: pre;
     font-family: monospace;
+  }
 
-    &::selection {
-      background: rgba(66, 147, 240, 0.3);
-      mix-blend-mode: multiply;
-    }
+  .selectabletext::selection {
+    background: rgba(66, 147, 240, 0.3);
+    mix-blend-mode: multiply;
   }
 
   .highlight {
diff --git a/src/pages/viewer/Sidebar.svelte b/src/pages/viewer/Sidebar.svelte
index 64eb60759..649a2836f 100644
--- a/src/pages/viewer/Sidebar.svelte
+++ b/src/pages/viewer/Sidebar.svelte
@@ -27,6 +27,7 @@
   export let showOrg = false;
   export let displayAnnotate = false;
   export let disableControls = false;
+  export let show = true;
 
   const style = `top: ${HEADER_HEIGHT}px; bottom: ${FOOTER_HEIGHT}px; width: ${SIDEBAR_WIDTH}px;`;
 
@@ -124,111 +125,113 @@
   }
 </script>
 
-<div
-  class="sidebar"
-  class:white={!signedIn}
-  class:disabled={disableControls}
-  on:mousedown={handleMouseDown}
-  {style}
->
-  {#if loaded}
-    <div class="title">
-      {#if !embed && document?.readable}
-        <div class="updating">
-          {$_("sidebar.updating")}
-          <Progress initializing={true} progress={0} compact={true} />
-        </div>
-      {/if}
+{#if show}
+  <div
+    class="sidebar"
+    class:white={!signedIn}
+    class:disabled={disableControls}
+    on:mousedown={handleMouseDown}
+    {style}
+  >
+    {#if loaded}
+      <div class="title">
+        {#if !embed && document?.readable}
+          <div class="updating">
+            {$_("sidebar.updating")}
+            <Progress initializing={true} progress={0} compact={true} />
+          </div>
+        {/if}
 
-      {#if document?.description != null && document?.description.trim().length > 0}
-        <details class="dc" open>
-          <summary>
-            <h2 class="inlineheader">{document?.title}</h2>
-          </summary>
-          <HtmlField content={document?.description} />
-        </details>
-      {:else}
-        <h2>{document?.title}</h2>
-      {/if}
+        {#if document?.description != null && document?.description.trim().length > 0}
+          <details class="dc" open>
+            <summary>
+              <h2 class="inlineheader">{document?.title}</h2>
+            </summary>
+            <HtmlField content={document?.description} />
+          </details>
+        {:else}
+          <h2>{document?.title}</h2>
+        {/if}
 
-      <TableOfContents />
+        <TableOfContents />
 
-      <hr />
-      {#if !hidePdfLink}
-        <div>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            class="plausible-event-name=viewer-original-document"
-            href={document?.pdf}
-          >
-            {$_("sidebar.original")}
-          </a>
-        </div>
-      {/if}
-      {#if document?.relatedArticleUrl != null && document?.relatedArticleUrl.trim().length > 0}
-        <div>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            class="plausible-event-name=viewer-related-url"
-            href={document?.relatedArticleUrl}
-          >
-            {$_("sidebar.related")}
-          </a>
-        </div>
-      {/if}
-      <small>
-        <p>
-          {$_("sidebar.contributed", {
-            values: {
-              name: showOrg ? document?.orgString : document?.userOrgString,
-            },
-          })}
-        </p>
-      </small>
-      {#if document?.source !== null && document?.source.trim().length > 0}
+        <hr />
+        {#if !hidePdfLink}
+          <div>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              class="plausible-event-name=viewer-original-document"
+              href={document?.pdf}
+            >
+              {$_("sidebar.original")}
+            </a>
+          </div>
+        {/if}
+        {#if document?.relatedArticleUrl != null && document?.relatedArticleUrl.trim().length > 0}
+          <div>
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              class="plausible-event-name=viewer-related-url"
+              href={document?.relatedArticleUrl}
+            >
+              {$_("sidebar.related")}
+            </a>
+          </div>
+        {/if}
         <small>
           <p>
-            {$_("sidebar.source", {
-              values: { source: document?.source },
+            {$_("sidebar.contributed", {
+              values: {
+                name: showOrg ? document?.orgString : document?.userOrgString,
+              },
             })}
           </p>
         </small>
-      {/if}
-      {#if document?.editAccess}
-        <div>
-          <AccessIcon {document} showText={true} />
-        </div>
-      {/if}
-      {#if ocrEngine}
-        <small><p>OCR: {ocrEngine}</p></small>
-      {/if}
-    </div>
+        {#if document?.source !== null && document?.source.trim().length > 0}
+          <small>
+            <p>
+              {$_("sidebar.source", {
+                values: { source: document?.source },
+              })}
+            </p>
+          </small>
+        {/if}
+        {#if document?.editAccess}
+          <div>
+            <AccessIcon {document} showText={true} />
+          </div>
+        {/if}
+        {#if ocrEngine}
+          <small><p>OCR: {ocrEngine}</p></small>
+        {/if}
+      </div>
 
-    {#if signedIn}
-      <div class="actions">{$_("sidebar.actions")}</div>
-      {#if document?.editAccess}
-        {#each actions as { id, action, header, description, disabled }}
+      {#if signedIn}
+        <div class="actions">{$_("sidebar.actions")}</div>
+        {#if document?.editAccess}
+          {#each actions as { id, action, header, description, disabled }}
+            <SidebarAction
+              class={`plausible-event-name=sidebar-${id}`}
+              {disabled}
+              {action}
+              {header}
+              {description}
+            />
+          {/each}
+        {:else}
           <SidebarAction
-            class={`plausible-event-name=sidebar-${id}`}
-            {disabled}
-            {action}
-            {header}
-            {description}
+            class="plausible-event-name=sidebar-private-note"
+            action={enterAnnotateMode}
+            header={$_("sidebar.privateNote")}
+            description={$_("sidebar.privateNoteDesc")}
           />
-        {/each}
-      {:else}
-        <SidebarAction
-          class="plausible-event-name=sidebar-private-note"
-          action={enterAnnotateMode}
-          header={$_("sidebar.privateNote")}
-          description={$_("sidebar.privateNoteDesc")}
-        />
+        {/if}
       {/if}
     {/if}
-  {/if}
-</div>
+  </div>
+{/if}
 
 <style lang="scss">
   .sidebar {
diff --git a/src/pages/viewer/SimpleBody.svelte b/src/pages/viewer/SimpleBody.svelte
index dbe992620..b538ece85 100644
--- a/src/pages/viewer/SimpleBody.svelte
+++ b/src/pages/viewer/SimpleBody.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { layout, cancelAnnotation } from "@/viewer/layout.js";
+  import { layout } from "@/viewer/layout.js";
   import { doc } from "@/viewer/document.js";
 
   import AllText from "./AllText.svelte";
diff --git a/src/pages/viewer/TextBody.svelte b/src/pages/viewer/TextBody.svelte
deleted file mode 100644
index 3de705a41..000000000
--- a/src/pages/viewer/TextBody.svelte
+++ /dev/null
@@ -1 +0,0 @@
-Text
diff --git a/src/pages/viewer/Viewer.svelte b/src/pages/viewer/Viewer.svelte
index 8628d3b77..dc0a976fe 100644
--- a/src/pages/viewer/Viewer.svelte
+++ b/src/pages/viewer/Viewer.svelte
@@ -209,6 +209,7 @@
       showOrg={$layout.title}
       disableControls={$layout.disableControls}
       embed={$viewer.embed}
+      on:toggle.sidebar={($layout.showSidebar = !$layout.showSidebar)}
     />
     {#if $doc.mode == "image"}
       <Body mode={$doc.mode} />
@@ -221,23 +222,25 @@
     {:else if $doc.mode == "modify"}
       <ThumbnailBody modify={true} />
     {/if}
-    {#if $layout.showSidebar}
-      <Sidebar
-        document={$viewer.document}
-        signedIn={$viewer.me !== null}
-        loaded={$viewer.loaded}
-        embed={$layout.embed}
-        hidePdfLink={$layout.hidePdfLink}
-        showOrg={$layout.showOrg}
-        displayAnnotate={$layout.displayAnnotate}
-        disableControls={$layout.disableControls}
-      />
-    {/if}
+
+    <Sidebar
+      document={$viewer.document}
+      signedIn={$viewer.me !== null}
+      loaded={$viewer.loaded}
+      embed={$layout.embed}
+      hidePdfLink={$layout.hidePdfLink}
+      showOrg={$layout.showOrg}
+      displayAnnotate={$layout.displayAnnotate}
+      disableControls={$layout.disableControls}
+      show={$layout.showSidebar}
+    />
+
     <Footer
       disableControls={$layout.disableControls}
       compact={$layout.compact}
       embed={$layout.embed}
       showFullscreen={$layout.showFullscreen}
+      document={$viewer.document}
     />
   </Loader>
 {/if}
diff --git a/src/pages/viewer/controls/FullScreen.svelte b/src/pages/viewer/controls/FullScreen.svelte
index b23d696a2..a1dd146c8 100644
--- a/src/pages/viewer/controls/FullScreen.svelte
+++ b/src/pages/viewer/controls/FullScreen.svelte
@@ -1,33 +1,28 @@
 <script>
-  import { viewer } from "@/viewer/viewer.js";
-
   // SVG assets
-  import fullScreenSvg from "@/assets/fullscreen.svg?raw";
+  import { ScreenFull24 } from "svelte-octicons";
+
+  export let url;
 </script>
 
-{#if $viewer.loaded}
-  <a target="_blank" href={$viewer.document.canonicalUrl}>
+{#if url}
+  <a target="_blank" href={url}>
     <span class="fullscreen">
-      {@html fullScreenSvg}
+      <ScreenFull24 />
     </span>
   </a>
-{:else}
-  <span class="fullscreen">
-    {@html fullScreenSvg}
-  </span>
 {/if}
 
-<style lang="scss">
+<style>
   .fullscreen {
-    @include buttonLike;
     display: inline-block;
     vertical-align: middle;
     margin: 0 10px 0 6px;
     line-height: 0;
+  }
 
-    :global(svg) {
-      display: inline-block;
-      vertical-align: middle;
-    }
+  .fullscreen :global(svg) {
+    display: inline-block;
+    vertical-align: middle;
   }
 </style>
diff --git a/src/pages/viewer/controls/Hamburger.svelte b/src/pages/viewer/controls/Hamburger.svelte
index 0e800b981..1693ff2ac 100644
--- a/src/pages/viewer/controls/Hamburger.svelte
+++ b/src/pages/viewer/controls/Hamburger.svelte
@@ -1,18 +1,13 @@
 <script>
-  import { toggleSidebar } from "@/viewer/document.js";
-
   // SVG assets
-  import viewerHamburgerSvg from "@/assets/viewer_hamburger.svg?raw";
+  import { ThreeBars16 } from "svelte-octicons";
 </script>
 
-<button
-  class="hamburger plausible-event-name=viewer-hamburger"
-  on:click={toggleSidebar}
->
-  {@html viewerHamburgerSvg}
+<button class="hamburger plausible-event-name=viewer-hamburger" on:click>
+  <ThreeBars16 />
 </button>
 
-<style lang="scss">
+<style>
   .hamburger {
     background: none;
     border: none;
diff --git a/src/pages/viewer/controls/Paginator.svelte b/src/pages/viewer/controls/Paginator.svelte
index 8f226058c..32d98aba8 100644
--- a/src/pages/viewer/controls/Paginator.svelte
+++ b/src/pages/viewer/controls/Paginator.svelte
@@ -128,76 +128,75 @@
   </div>
 {/if}
 
-<style lang="scss">
+<style>
   .paginator {
     --inputHeight: 23px;
     --arrowHeight: 18px;
     --arrowPadding: 13px;
 
     user-select: none;
-    color: $viewerDarkGray;
-
-    .page {
-      position: relative;
-      font-weight: normal;
-      font-size: 15px;
-      padding: 0 18px;
-      background: #ffffff;
-      box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
-      border-radius: $radius;
-      display: inline-block;
-      height: var(--inputHeight, 23px);
-      line-height: var(--inputHeight, 23px);
-      vertical-align: middle;
-
-      .absolute,
-      input {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-
-      .hidden {
-        opacity: 0;
-      }
-
-      input {
-        opacity: 0;
-        box-sizing: border-box;
-        text-align: center;
-        font-weight: inherit;
-        font-family: inherit;
-        font-size: inherit;
-        color: inherit;
-
-        &:focus {
-          opacity: 1;
-        }
-      }
-    }
+    color: var(--viewerDarkGray);
+  }
 
-    .rest {
-      display: inline-block;
-      line-height: var(--inputHeight, 23px);
-      vertical-align: middle;
-      padding-left: 8px;
-    }
+  .paginator .page {
+    position: relative;
+    font-weight: normal;
+    font-size: 15px;
+    padding: 0 18px;
+    background: #ffffff;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
+    border-radius: var(--radius);
+    display: inline-block;
+    height: var(--inputHeight, 23px);
+    line-height: var(--inputHeight, 23px);
+    vertical-align: middle;
+  }
 
-    .paginate {
-      display: inline-block;
-      font-size: 0;
-      padding: calc((var(--inputHeight, 23px) - var(--arrowHeight, 18px)) / 2) 0;
-      vertical-align: middle;
+  .paginator .page .absolute,
+  .paginator .page input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
 
-      &.left {
-        padding-right: var(--arrowPadding, 13px);
-      }
+  .paginator .page .hidden {
+    opacity: 0;
+  }
 
-      &.right {
-        padding-left: var(--arrowPadding, 13px);
-      }
-    }
+  .paginator .page input {
+    opacity: 0;
+    box-sizing: border-box;
+    text-align: center;
+    font-weight: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+  }
+  .paginator .page :focus {
+    opacity: 1;
+  }
+
+  .paginator .rest {
+    display: inline-block;
+    line-height: var(--inputHeight, 23px);
+    vertical-align: middle;
+    padding-left: 8px;
+  }
+
+  .paginator .paginate {
+    display: inline-block;
+    font-size: 0;
+    padding: calc((var(--inputHeight, 23px) - var(--arrowHeight, 18px)) / 2) 0;
+    vertical-align: middle;
+  }
+
+  .paginator .paginate.left {
+    padding-right: var(--arrowPadding, 13px);
+  }
+
+  .paginator .paginate.right {
+    padding-left: var(--arrowPadding, 13px);
   }
 </style>
diff --git a/src/pages/viewer/controls/stories/FullScreen.stories.svelte b/src/pages/viewer/controls/stories/FullScreen.stories.svelte
new file mode 100644
index 000000000..ec45ccdeb
--- /dev/null
+++ b/src/pages/viewer/controls/stories/FullScreen.stories.svelte
@@ -0,0 +1,15 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import FullScreen from "../FullScreen.svelte";
+
+  export const meta = {
+    title: "Viewer / Controls / FullScreen",
+    component: FullScreen,
+  };
+</script>
+
+<Story name="default">
+  <FullScreen
+    url="https://s3.documentcloud.org/documents/1/a-i-g-bailout-the-inspector-generals-report.pdf"
+  />
+</Story>
diff --git a/src/pages/viewer/controls/stories/Hamburger.stories.svelte b/src/pages/viewer/controls/stories/Hamburger.stories.svelte
new file mode 100644
index 000000000..7b9be2cbb
--- /dev/null
+++ b/src/pages/viewer/controls/stories/Hamburger.stories.svelte
@@ -0,0 +1,13 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import Hamburger from "../Hamburger.svelte";
+
+  export const meta = {
+    title: "Viewer / Controls / Hamburger",
+    component: Hamburger,
+  };
+</script>
+
+<Story name="default">
+  <Hamburger on:click />
+</Story>
diff --git a/src/pages/viewer/controls/stories/Paginator.stories.svelte b/src/pages/viewer/controls/stories/Paginator.stories.svelte
new file mode 100644
index 000000000..5c8b1ce65
--- /dev/null
+++ b/src/pages/viewer/controls/stories/Paginator.stories.svelte
@@ -0,0 +1,13 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import Paginator from "../Paginator.svelte";
+
+  export const meta = {
+    title: "Viewer / Controls / Paginator",
+    component: Paginator,
+  };
+</script>
+
+<Story name="default">
+  <Paginator />
+</Story>
diff --git a/src/pages/viewer/controls/stories/Search.stories.svelte b/src/pages/viewer/controls/stories/Search.stories.svelte
new file mode 100644
index 000000000..e8ff1a7df
--- /dev/null
+++ b/src/pages/viewer/controls/stories/Search.stories.svelte
@@ -0,0 +1,22 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import Search from "../Search.svelte";
+
+  export const meta = {
+    title: "Viewer / Controls / Search",
+    component: Search,
+  };
+</script>
+
+<Story name="default">
+  <div class="container">
+    <Search />
+  </div>
+</Story>
+
+<style>
+  .container {
+    height: 4em;
+    position: relative;
+  }
+</style>
diff --git a/src/pages/viewer/controls/stories/ViewDropdown.stories.svelte b/src/pages/viewer/controls/stories/ViewDropdown.stories.svelte
new file mode 100644
index 000000000..de16a30f8
--- /dev/null
+++ b/src/pages/viewer/controls/stories/ViewDropdown.stories.svelte
@@ -0,0 +1,13 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import ViewDropdown from "../ViewDropdown.svelte";
+
+  export const meta = {
+    title: "Viewer / Controls / View Dropdown",
+    component: ViewDropdown,
+  };
+</script>
+
+<Story name="default">
+  <ViewDropdown />
+</Story>
diff --git a/src/pages/viewer/controls/stories/Zoom.stories.svelte b/src/pages/viewer/controls/stories/Zoom.stories.svelte
new file mode 100644
index 000000000..7e6e579f5
--- /dev/null
+++ b/src/pages/viewer/controls/stories/Zoom.stories.svelte
@@ -0,0 +1,13 @@
+<script context="module">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import Zoom from "../Zoom.svelte";
+
+  export const meta = {
+    title: "Viewer / Controls / Zoom",
+    component: Zoom,
+  };
+</script>
+
+<Story name="default">
+  <Zoom />
+</Story>

From 10adce6d3678d90aae7e95974f218752f0bc63b1 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Thu, 14 Dec 2023 15:12:30 -0500
Subject: [PATCH 2/2] Check for doc

---
 src/pages/viewer/Footer.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/viewer/Footer.svelte b/src/pages/viewer/Footer.svelte
index e7975ff02..469f1b60d 100644
--- a/src/pages/viewer/Footer.svelte
+++ b/src/pages/viewer/Footer.svelte
@@ -29,7 +29,7 @@
         <span class="hide ib adjustright" class:hideearly={embed}>
           <Zoom />
         </span>
-        {#if embed && showFullscreen}
+        {#if document && embed && showFullscreen}
           <FullScreen url={document.canonicalUrl} />
         {/if}
       </div>