From 0b00f15c95517c978cada31277789aaa0b148349 Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Mon, 20 Nov 2023 18:39:28 -0500
Subject: [PATCH] Refactors Viewer/Sidebar component

- Makes the sidebar a presentational component
- Refactors the SidebarAction into a standalone component
- Programmatically renders sidebar actions
- Adds stories for the Sidebar and SidebarAction
---
 src/pages/viewer/Sidebar.svelte               | 358 +++++++++---------
 src/pages/viewer/SidebarAction.svelte         |  54 +++
 src/pages/viewer/Viewer.svelte                |  13 +-
 src/pages/viewer/constants.js                 |   1 +
 .../viewer/stories/Sidebar.stories.svelte     |  32 ++
 .../stories/SidebarAction.stories.svelte      |  23 ++
 src/viewer/layout.js                          |  14 +-
 7 files changed, 307 insertions(+), 188 deletions(-)
 create mode 100644 src/pages/viewer/SidebarAction.svelte
 create mode 100644 src/pages/viewer/stories/Sidebar.stories.svelte
 create mode 100644 src/pages/viewer/stories/SidebarAction.stories.svelte

diff --git a/src/pages/viewer/Sidebar.svelte b/src/pages/viewer/Sidebar.svelte
index d6000daac..084287bf6 100644
--- a/src/pages/viewer/Sidebar.svelte
+++ b/src/pages/viewer/Sidebar.svelte
@@ -1,10 +1,10 @@
-<script>
+<script lang="ts">
   import TableOfContents from "./TableOfContents.svelte";
-  import Progress from "@/common/Progress.svelte";
-  import AccessIcon from "@/common/AccessIcon.svelte";
-  import HtmlField from "@/common/HtmlField.svelte";
-  import session from "@/api/session.js";
-  import { jsonUrl } from "@/api/viewer.js";
+  import Progress from "../../common/Progress.svelte";
+  import AccessIcon from "../../common/AccessIcon.svelte";
+  import HtmlField from "../../common/HtmlField.svelte";
+  import session from "../../api/session.js";
+  import { jsonUrl } from "../../api/viewer.js";
 
   import {
     enterRedactMode,
@@ -13,13 +13,25 @@
     enterInfoMode,
     enterDataMode,
     enterSectionsMode,
-  } from "@/viewer/actions";
-  import { layout, showEmbedFlow, cancelAnnotation } from "@/viewer/layout.js";
-  import { viewer } from "@/viewer/viewer.js";
+  } from "../../viewer/actions";
+  import { showEmbedFlow, cancelAnnotation } from "../../viewer/layout.js";
   import { _ } from "svelte-i18n";
+  import { FOOTER_HEIGHT, HEADER_HEIGHT, SIDEBAR_WIDTH } from "./constants";
+  import SidebarAction from "./SidebarAction.svelte";
+
+  export let document: any;
+  export let signedIn: Boolean;
+  export let loaded = false;
+  export let embed = false;
+  export let hidePdfLink = false;
+  export let showOrg = false;
+  export let displayAnnotate = false;
+  export let disableControls = false;
+
+  const style = `top: ${HEADER_HEIGHT}px; bottom: ${FOOTER_HEIGHT}px; width: ${SIDEBAR_WIDTH}px;`;
 
   function handleMouseDown() {
-    if ($layout.displayAnnotate) {
+    if (displayAnnotate) {
       cancelAnnotation();
     }
   }
@@ -36,11 +48,69 @@
     doctr: "docTR",
   };
 
+  interface Action {
+    id: string;
+    action: () => void;
+    header: string;
+    description: string;
+    disabled?: boolean;
+  }
+
+  let actions: Action[] = [
+    {
+      id: "share",
+      action: () => showEmbedFlow(document),
+      header: $_("sidebar.share"),
+      description: $_("sidebar.shareDesc"),
+      disabled: document.readable,
+    },
+    {
+      id: "annotate",
+      action: enterAnnotateMode,
+      header: $_("sidebar.annotate"),
+      description: $_("sidebar.annotateDesc"),
+    },
+    {
+      id: "redact",
+      action: enterRedactMode,
+      header: $_("sidebar.redact"),
+      description: $_("sidebar.redactDesc"),
+      disabled: document.readable,
+    },
+    {
+      id: "modify",
+      action: enterModifyMode,
+      header: $_("sidebar.modify"),
+      description: $_("sidebar.modifyDesc"),
+      disabled: document.readable,
+    },
+    {
+      id: "info",
+      action: enterInfoMode,
+      header: $_("sidebar.info"),
+      description: $_("sidebar.infoDesc"),
+      disabled: document.readable,
+    },
+    {
+      id: "data",
+      action: enterDataMode,
+      header: $_("sidebar.data"),
+      description: $_("sidebar.dataDesc"),
+      disabled: document.readable,
+    },
+    {
+      id: "sections",
+      action: enterSectionsMode,
+      header: $_("sidebar.sections"),
+      description: $_("sidebar.sectionsDesc"),
+    },
+  ];
+
   $: {
-    if ($viewer.document != null && textDoc == null && !loading) {
+    if (document != null && textDoc == null && !loading) {
       loading = true;
       (async () => {
-        textDoc = await session.getStatic(jsonUrl(viewer.document));
+        textDoc = await session.getStatic(jsonUrl(document));
         // strip _force if it exists
         ocrEngine = textDoc.pages[0].ocr;
         if (ocrEngine) {
@@ -97,38 +167,6 @@
       text-shadow: 0 1px 0 #ffffff5c;
     }
 
-    .action {
-      cursor: pointer;
-      background: #ffffff;
-      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
-      padding: 8px 20px;
-
-      &.disabled {
-        background: #e8e8e8;
-        opacity: 0.5;
-        cursor: default;
-        pointer-events: none;
-      }
-
-      &:hover {
-        background: rgba(black, 0.02);
-      }
-
-      h3 {
-        font-weight: bold;
-        font-size: 14px;
-        color: var(--viewerDarkGray, #171717);
-        margin: 8px 0;
-      }
-
-      p {
-        font-size: 14px;
-        line-height: 18px;
-        color: var(--viewerGray, #525252);
-        margin: 8px 0;
-      }
-    }
-
     .title {
       padding: 16px 20px 16px 20px;
       background: white;
@@ -166,152 +204,108 @@
   }
 </style>
 
-{#if $layout.showSidebar}
-  <div
-    class="sidebar"
-    class:white={$viewer.me == null}
-    class:disabled={$layout.disableControls}
-    on:mousedown={handleMouseDown}
-    style="top: {$layout.headerHeight}px; bottom: {$layout.footerHeight}px;
-    width: {$layout.sidebarWidth}px"
-  >
-    {#if $viewer.loaded}
-      <div class="title">
-        {#if !$layout.embed && $viewer.document.readable}
-          <div class="updating">
-            {$_("sidebar.updating")}
-            <Progress initializing={true} progress={0} compact={true} />
-          </div>
-        {/if}
+<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 $viewer.document.description != null && $viewer.document.description.trim().length > 0}
-          <details class="dc" open>
-            <summary>
-              <h2 class="inlineheader">{$viewer.document.title}</h2>
-            </summary>
-            <HtmlField content={$viewer.document.description} />
-          </details>
-        {:else}
-          <h2>{$viewer.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 !$layout.hidePdfLink}
-          <div>
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              class="plausible-event-name=viewer-original-document"
-              href={$viewer.document.pdf}
-            >
-              {$_("sidebar.original")}
-            </a>
-          </div>
-        {/if}
-        {#if $viewer.document.relatedArticleUrl != null && $viewer.document.relatedArticleUrl.trim().length > 0}
-          <div>
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              class="plausible-event-name=viewer-related-url"
-              href={$viewer.document.relatedArticleUrl}
-            >
-              {$_("sidebar.related")}
-            </a>
-          </div>
-        {/if}
+      <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}
         <small>
           <p>
-            {$_("sidebar.contributed", {
-              values: {
-                name: $layout.showOrg
-                  ? $viewer.document.orgString
-                  : $viewer.document.userOrgString,
-              },
+            {$_("sidebar.source", {
+              values: { source: document.source },
             })}
           </p>
         </small>
-        {#if $viewer.document.source !== null && $viewer.document.source.trim().length > 0}
-          <small>
-            <p>
-              {$_("sidebar.source", {
-                values: { source: $viewer.document.source },
-              })}
-            </p>
-          </small>
-        {/if}
-        {#if $viewer.document.editAccess}
-          <div>
-            <AccessIcon document={$viewer.document} showText={true} />
-          </div>
-        {/if}
-        {#if ocrEngine}
-          <small><p>OCR: {ocrEngine}</p></small>
-        {/if}
-      </div>
+      {/if}
+      {#if document.editAccess}
+        <div>
+          <AccessIcon {document} showText={true} />
+        </div>
+      {/if}
+      {#if ocrEngine}
+        <small><p>OCR: {ocrEngine}</p></small>
+      {/if}
+    </div>
 
-      {#if $viewer.me !== null}
-        <div class="actions">{$_("sidebar.actions")}</div>
-        {#if $viewer.document.editAccess}
-          <div
-            class="action plausible-event-name=sidebar-share"
-            class:disabled={$viewer.document.readable}
-            on:click={() => showEmbedFlow($viewer.document)}
-          >
-            <h3>{$_("sidebar.share")}</h3>
-            <p>{$_("sidebar.shareDesc")}</p>
-          </div>
-          <div class="action" on:click={enterAnnotateMode}>
-            <h3>{$_("sidebar.annotate")}</h3>
-            <p>{$_("sidebar.annotateDesc")}</p>
-          </div>
-          <div
-            class="action"
-            class:disabled={$viewer.document.readable}
-            on:click={enterRedactMode}
-          >
-            <h3>{$_("sidebar.redact")}</h3>
-            <p>
-              {$_("sidebar.redactDesc")}
-            </p>
-          </div>
-          <div
-            class="action"
-            class:disabled={$viewer.document.readable}
-            on:click={enterModifyMode}
-          >
-            <h3>{$_("sidebar.modify")}</h3>
-            <p>{$_("sidebar.modifyDesc")}</p>
-          </div>
-          <div
-            class="action"
-            class:disabled={$viewer.document.readable}
-            on:click={enterInfoMode}
-          >
-            <h3>{$_("sidebar.info")}</h3>
-            <p>{$_("sidebar.infoDesc")}</p>
-          </div>
-          <div
-            class="action"
-            class:disabled={$viewer.document.readable}
-            on:click={enterDataMode}
-          >
-            <h3>{$_("sidebar.data")}</h3>
-            <p>{$_("sidebar.dataDesc")}</p>
-          </div>
-          <div class="action" on:click={enterSectionsMode}>
-            <h3>{$_("sidebar.sections")}</h3>
-            <p>{$_("sidebar.sectionsDesc")}</p>
-          </div>
-        {:else}
-          <div class="action" on:click={enterAnnotateMode}>
-            <h3>{$_("sidebar.privateNote")}</h3>
-            <p>{$_("sidebar.privateNoteDesc")}</p>
-          </div>
-        {/if}
+    {#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-private-note"
+          action={enterAnnotateMode}
+          header={$_("sidebar.privateNote")}
+          description={$_("sidebar.privateNoteDesc")}
+        />
       {/if}
     {/if}
-  </div>
-{/if}
+  {/if}
+</div>
diff --git a/src/pages/viewer/SidebarAction.svelte b/src/pages/viewer/SidebarAction.svelte
new file mode 100644
index 000000000..978523417
--- /dev/null
+++ b/src/pages/viewer/SidebarAction.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  export let action: () => void;
+  export let header: string;
+  export let description: string;
+  export let disabled = false;
+  let className = "";
+  export { className as class };
+</script>
+
+<style>
+  .action {
+    appearance: none;
+    border: none;
+    text-align: left;
+    font-family: inherit;
+    display: block;
+    width: 100%;
+    cursor: pointer;
+    background: #ffffff;
+    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+    padding: 8px 20px;
+  }
+
+  .action.disabled {
+    background: #e8e8e8;
+    opacity: 0.5;
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .action:hover,
+  .action:focus {
+    background: rgba(0, 0, 0, 0.02);
+  }
+
+  .action h3 {
+    font-weight: bold;
+    font-size: 14px;
+    color: var(--viewerDarkGray, #171717);
+    margin: 8px 0;
+  }
+
+  .action p {
+    font-size: 14px;
+    line-height: 18px;
+    color: var(--viewerGray, #525252);
+    margin: 8px 0;
+  }
+</style>
+
+<button class={`action ${className}`} class:disabled on:click={action}>
+  <h3>{header}</h3>
+  <p>{description}</p>
+</button>
diff --git a/src/pages/viewer/Viewer.svelte b/src/pages/viewer/Viewer.svelte
index 88c7fdf1d..8628d3b77 100644
--- a/src/pages/viewer/Viewer.svelte
+++ b/src/pages/viewer/Viewer.svelte
@@ -221,7 +221,18 @@
     {:else if $doc.mode == "modify"}
       <ThumbnailBody modify={true} />
     {/if}
-    <Sidebar />
+    {#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}
     <Footer
       disableControls={$layout.disableControls}
       compact={$layout.compact}
diff --git a/src/pages/viewer/constants.js b/src/pages/viewer/constants.js
index 558e666bc..6e14e8598 100644
--- a/src/pages/viewer/constants.js
+++ b/src/pages/viewer/constants.js
@@ -1,4 +1,5 @@
 export const HEADER_HEIGHT = 32;
 export const FOOTER_HEIGHT = 32;
+export const SIDEBAR_WIDTH = 350;
 // A little bigger than normal mobile break to hide sidebar in narrow viewports
 export const MOBILE_BREAKPOINT = 800;
diff --git a/src/pages/viewer/stories/Sidebar.stories.svelte b/src/pages/viewer/stories/Sidebar.stories.svelte
new file mode 100644
index 000000000..1ec36f95b
--- /dev/null
+++ b/src/pages/viewer/stories/Sidebar.stories.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+
+  import Sidebar from "../Sidebar.svelte";
+  import documentFixture from "../fixtures/document.json";
+  import { Document as DocumentState } from "../../../structure/document";
+
+  const args = {
+    document: new DocumentState(documentFixture),
+    loaded: true,
+    signedIn: true,
+    disableControls: false,
+  };
+</script>
+
+<Meta title="Viewer / Sidebar" component={Sidebar} />
+
+<Template let:args>
+  <Sidebar {...args} />
+</Template>
+
+<Story name="Default" {args} />
+<Story name="Unloaded" args={{ ...args, loaded: false }} />
+<Story name="Signed Out" args={{ ...args, signedIn: false }} />
+<Story name="Disable Controls" args={{ ...args, disableControls: true }} />
+<Story
+  name="Uneditable"
+  args={{
+    ...args,
+    document: new DocumentState({ ...documentFixture, edit_access: false }),
+  }}
+/>
diff --git a/src/pages/viewer/stories/SidebarAction.stories.svelte b/src/pages/viewer/stories/SidebarAction.stories.svelte
new file mode 100644
index 000000000..d7c2d0bb9
--- /dev/null
+++ b/src/pages/viewer/stories/SidebarAction.stories.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Meta, Story, Template } from "@storybook/addon-svelte-csf";
+  import { action } from "@storybook/addon-actions";
+
+  import SidebarAction from "../SidebarAction.svelte";
+
+  const args = {
+    action: action("Trigger Action"),
+    header: "Add Note",
+    description:
+      "Leave a public, private or shared note, which can be embedded within an article.",
+    disabled: false,
+  };
+</script>
+
+<Meta title="Viewer / Sidebar / Action" component={SidebarAction} />
+
+<Template let:args>
+  <SidebarAction {...args} />
+</Template>
+
+<Story name="Action" id="sidebarAction" {args} />
+<Story name="Disabled" args={{ ...args, disabled: true }} />
diff --git a/src/viewer/layout.js b/src/viewer/layout.js
index 3597f0b58..06ddd5af4 100644
--- a/src/viewer/layout.js
+++ b/src/viewer/layout.js
@@ -23,8 +23,12 @@ import { DEFAULT_EXPAND } from "../api/common.js";
 import { inIframe } from "@/util/iframe.js";
 import { modification } from "./modification/modification.js";
 
-// A little bigger than normal mobile break to hide sidebar in narrow viewports
-export const MOBILE_BREAKPOINT = 800;
+import {
+  MOBILE_BREAKPOINT,
+  HEADER_HEIGHT,
+  FOOTER_HEIGHT,
+  SIDEBAR_WIDTH,
+} from "../pages/viewer/constants.js";
 
 export const layout = new Svue({
   data() {
@@ -33,10 +37,10 @@ export const layout = new Svue({
       viewer,
 
       // Height of header row
-      headerHeight: 36,
-      baseSidebarWidth: 350,
+      headerHeight: HEADER_HEIGHT,
+      baseSidebarWidth: SIDEBAR_WIDTH,
       // Height of footer row
-      footerHeight: 36,
+      footerHeight: FOOTER_HEIGHT,
 
       // Show the title in the header (title=true)
       title: true,