From 0715dafd4b17ac7236f91f8596d86e8ff874d4e4 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 14 Apr 2022 15:06:27 -0700
Subject: [PATCH 1/4] Display the all highlights modal from PDFs via the
 article actions button

---
 .../templates/article/ArticleContainer.tsx    |  1 -
 .../templates/article/HighlightsModal.tsx     | 20 ++++++++++++-------
 .../templates/article/PdfArticleContainer.tsx |  9 +++++++++
 .../web/pages/[username]/[slug]/index.tsx     |  2 ++
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx
index 46a846637..62e4a7b8d 100644
--- a/packages/web/components/templates/article/ArticleContainer.tsx
+++ b/packages/web/components/templates/article/ArticleContainer.tsx
@@ -35,7 +35,6 @@ type ArticleContainerProps = {
 export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
   const [showShareModal, setShowShareModal] = useState(false)
   const [showReportIssuesModal, setShowReportIssuesModal] = useState(false)
-  const [showHighlightsModal, setShowHighlightsModal] = useState(props.showHighlightsModal)
   const [fontSize, setFontSize] = useState(props.fontSize ?? 20)
 
   const updateFontSize = async (newFontSize: number) => {
diff --git a/packages/web/components/templates/article/HighlightsModal.tsx b/packages/web/components/templates/article/HighlightsModal.tsx
index 92358b057..d31557c4b 100644
--- a/packages/web/components/templates/article/HighlightsModal.tsx
+++ b/packages/web/components/templates/article/HighlightsModal.tsx
@@ -19,7 +19,7 @@ import { Pen, Trash } from 'phosphor-react'
 
 type HighlightsModalProps = {
   highlights: Highlight[]
-  deleteHighlightAction: (highlightId: string) => void
+  deleteHighlightAction?: (highlightId: string) => void
   onOpenChange: (open: boolean) => void
 }
 
@@ -59,9 +59,12 @@ export function HighlightsModal(props: HighlightsModalProps): JSX.Element {
               <ModalHighlightView
                 key={highlight.id}
                 highlight={highlight}
-                deleteHighlightAction={() =>
-                  props.deleteHighlightAction(highlight.id)
-                }
+                showDelete={!!props.deleteHighlightAction}
+                deleteHighlightAction={() => {
+                  if (props.deleteHighlightAction) {
+                    props.deleteHighlightAction(highlight.id)
+                  }
+                }}
               />
             ))}
             {props.highlights.length === 0 && (
@@ -78,6 +81,7 @@ export function HighlightsModal(props: HighlightsModalProps): JSX.Element {
 
 type ModalHighlightViewProps = {
   highlight: Highlight
+  showDelete: boolean
   deleteHighlightAction: () => void
 }
 
@@ -112,9 +116,11 @@ function ModalHighlightView(props: ModalHighlightViewProps): JSX.Element {
           />
         )}
       </Button> */}
-      <Button style="ghost" onClick={() => setShowDeleteConfirmation(true)}>
-        <Trash width={18} height={18} color={theme.colors.grayText.toString()} />
-      </Button>
+      {props.showDelete && (
+        <Button style="ghost" onClick={() => setShowDeleteConfirmation(true)}>
+          <Trash width={18} height={18} color={theme.colors.grayText.toString()} />
+        </Button>
+      )}
     </HStack>
   )
 
diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx
index 77659e737..06cb94286 100644
--- a/packages/web/components/templates/article/PdfArticleContainer.tsx
+++ b/packages/web/components/templates/article/PdfArticleContainer.tsx
@@ -15,10 +15,13 @@ import { ShareHighlightModal } from './ShareHighlightModal'
 import { useCanShareNative } from '../../../lib/hooks/useCanShareNative'
 import { webBaseURL } from '../../../lib/appConfig'
 import { pspdfKitKey } from '../../../lib/appConfig'
+import { HighlightsModal } from './HighlightsModal'
 
 export type PdfArticleContainerProps = {
   viewerUsername: string
   article: ArticleAttributes
+  showHighlightsModal: boolean
+  setShowHighlightsModal: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 export default function PdfArticleContainer(
@@ -348,6 +351,12 @@ export default function PdfArticleContainer(
           }}
         />
       )}
+      {props.showHighlightsModal && (
+        <HighlightsModal
+          highlights={props.article.highlights}
+          onOpenChange={() => props.setShowHighlightsModal(false)}
+        />
+      )}
     </Box>
   )
 }
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 282bbf0d4..18bd8a00c 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -209,6 +209,8 @@ export default function Home(): JSX.Element {
           {article.contentReader == 'PDF' ? (
             <PdfArticleContainerNoSSR
               article={article}
+              showHighlightsModal={showHighlightsModal}
+              setShowHighlightsModal={setShowHighlightsModal}
               viewerUsername={viewerData.me?.profile?.username}
             />
           ) : (

From 0842aba57cf565c64a68e9eb0e0e89bc00a12c03 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 14 Apr 2022 15:53:51 -0700
Subject: [PATCH 2/4] Always display the article actions toolbar on top for
 PDFs

Because we dont have margin space on PDFs we want to always
display this on top.
---
 .../web/components/patterns/PrimaryHeader.tsx |  5 +-
 .../components/templates/PrimaryLayout.tsx    |  4 +-
 .../templates/article/ArticleActionsMenu.tsx  | 66 ++++++++++---------
 .../web/pages/[username]/[slug]/index.tsx     |  7 +-
 4 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/packages/web/components/patterns/PrimaryHeader.tsx b/packages/web/components/patterns/PrimaryHeader.tsx
index 79294d02f..12c7e4754 100644
--- a/packages/web/components/patterns/PrimaryHeader.tsx
+++ b/packages/web/components/patterns/PrimaryHeader.tsx
@@ -26,6 +26,7 @@ type HeaderProps = {
   isFixedPosition: boolean
   scrollElementRef?: React.RefObject<HTMLDivElement>
   toolbarControl?: JSX.Element
+  alwaysDisplayToolbar?: boolean
   setShowLogoutConfirmation: (showShareModal: boolean) => void
   setShowKeyboardCommandsModal: (showShareModal: boolean) => void
 }
@@ -128,6 +129,7 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
         isVisible={true}
         isFixedPosition={true}
         toolbarControl={props.toolbarControl}
+        alwaysDisplayToolbar={props.alwaysDisplayToolbar}
       />
     </>
   )
@@ -143,6 +145,7 @@ type NavHeaderProps = {
   isVisible?: boolean
   isFixedPosition: boolean
   toolbarControl?: JSX.Element
+  alwaysDisplayToolbar?: boolean
 }
 
 function NavHeader(props: NavHeaderProps): JSX.Element {
@@ -187,7 +190,7 @@ function NavHeader(props: NavHeaderProps): JSX.Element {
           <HStack distribution="end" alignment="center" css={{
             height: '100%', width: '100%',
             mr: '16px',
-            display: 'none',
+            display: props.alwaysDisplayToolbar ? 'flex' : 'none',
             '@lgDown': {
               display: 'flex',
             },
diff --git a/packages/web/components/templates/PrimaryLayout.tsx b/packages/web/components/templates/PrimaryLayout.tsx
index 56e85a419..e077a3dbf 100644
--- a/packages/web/components/templates/PrimaryLayout.tsx
+++ b/packages/web/components/templates/PrimaryLayout.tsx
@@ -23,6 +23,7 @@ type PrimaryLayoutProps = {
   pageMetaDataProps?: PageMetaDataProps
   scrollElementRef?: MutableRefObject<HTMLDivElement | null>
   headerToolbarControl?: JSX.Element
+  alwaysDisplayToolbar?: boolean
 }
 
 export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
@@ -75,8 +76,9 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
           userInitials={viewerData?.me?.name.charAt(0) ?? ''}
           profileImageURL={viewerData?.me?.profile.pictureUrl}
           isFixedPosition={true}
-          toolbarControl={props.headerToolbarControl}
           scrollElementRef={props.scrollElementRef}
+          toolbarControl={props.headerToolbarControl}
+          alwaysDisplayToolbar={props.alwaysDisplayToolbar}
           setShowLogoutConfirmation={setShowLogoutConfirmation}
           setShowKeyboardCommandsModal={setShowKeyboardCommandsModal}
         />
diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx
index 880cfea9a..9b82691f0 100644
--- a/packages/web/components/templates/article/ArticleActionsMenu.tsx
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@@ -1,7 +1,6 @@
 import { Separator } from "@radix-ui/react-separator"
 import { ArchiveBox, DotsThree, HighlighterCircle, TagSimple, TextAa } from "phosphor-react"
 import { ArticleAttributes } from "../../../lib/networking/queries/useGetArticleQuery"
-import { useGetUserPreferences } from "../../../lib/networking/queries/useGetUserPreferences"
 import { Button } from "../../elements/Button"
 import { Dropdown } from "../../elements/DropdownElements"
 import { Box, SpanBox } from "../../elements/LayoutPrimitives"
@@ -9,15 +8,15 @@ import { TooltipWrapped } from "../../elements/Tooltip"
 import { styled, theme } from "../../tokens/stitches.config"
 import { SetLabelsControl } from "./SetLabelsControl"
 import { ReaderSettingsControl } from "./ReaderSettingsControl"
-import { usePersistedState } from "../../../lib/hooks/usePersistedState"
 
-export type ArticleActionsMenuLayout = 'horizontal' | 'vertical'
+export type ArticleActionsMenuLayout = 'top' | 'side'
 
 type ArticleActionsMenuProps = {
   article: ArticleAttributes
   layout: ArticleActionsMenuLayout
   lineHeight: number
   marginWidth: number
+  showReaderDisplaySettings?: boolean
   articleActionHandler: (action: string, arg?: unknown) => void
 }
 
@@ -32,7 +31,7 @@ const MenuSeparator = (props: MenuSeparatorProps): JSX.Element => {
     borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
     my: '8px',
   })
-  return (props.layout == 'vertical' ? <LineSeparator /> : <></>)
+  return (props.layout == 'side' ? <LineSeparator /> : <></>)
 }
 
 type ActionDropdownProps = {
@@ -45,10 +44,10 @@ const ActionDropdown = (props: ActionDropdownProps): JSX.Element => {
   return <Dropdown
     showArrow={true}
     css={{ m: '0px', p: '0px', overflow: 'hidden', width: '265px', maxWidth: '265px', '@smDown': { width: '230px' } }}
-    side={props.layout == 'vertical' ? 'right' : 'bottom'}
-    sideOffset={props.layout == 'vertical' ? 8 : 0}
-    align={props.layout == 'vertical' ? 'start' : 'center'}
-    alignOffset={props.layout == 'vertical' ? -18 : undefined}
+    side={props.layout == 'side' ? 'right' : 'bottom'}
+    sideOffset={props.layout == 'side' ? 8 : 0}
+    align={props.layout == 'side' ? 'start' : 'center'}
+    alignOffset={props.layout == 'side' ? -18 : undefined}
     triggerElement={props.triggerElement}
   >
     {props.children}
@@ -62,32 +61,35 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
       css={{
         display: 'flex',
         alignItems: 'center',
-        flexDirection: props.layout == 'vertical' ? 'column' : 'row',
-        justifyContent: props.layout == 'vertical' ? 'center' : 'flex-end',
-        gap: props.layout == 'vertical' ? '8px' : '24px',
+        flexDirection: props.layout == 'side' ? 'column' : 'row',
+        justifyContent: props.layout == 'side' ? 'center' : 'flex-end',
+        gap: props.layout == 'side' ? '8px' : '24px',
         paddingTop: '6px',
       }}
     >
-
-      <ActionDropdown
-        layout={props.layout}
-        triggerElement={
-          <TooltipWrapped
-            tooltipContent="Adjust Display Settings"
-            tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
+      {props.showReaderDisplaySettings && (
+        <>
+          <ActionDropdown
+            layout={props.layout}
+            triggerElement={
+              <TooltipWrapped
+                tooltipContent="Adjust Display Settings"
+                tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
+              >
+                <TextAa size={24} color={theme.colors.readerFont.toString()} />
+              </TooltipWrapped>
+            }
           >
-            <TextAa size={24} color={theme.colors.readerFont.toString()} />
-          </TooltipWrapped>
-        }
-      >
-        <ReaderSettingsControl
-          lineHeight={props.lineHeight}
-          marginWidth={props.marginWidth}
-          articleActionHandler={props.articleActionHandler}
-        />
-      </ActionDropdown>
+            <ReaderSettingsControl
+              lineHeight={props.lineHeight}
+              marginWidth={props.marginWidth}
+              articleActionHandler={props.articleActionHandler}
+            />
+          </ActionDropdown>
 
-      <MenuSeparator layout={props.layout} />
+          <MenuSeparator layout={props.layout} />
+        </>
+      )}
 
       <SpanBox css={{
         'display': 'flex',
@@ -100,7 +102,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
           triggerElement={
             <TooltipWrapped
               tooltipContent="Edit labels"
-              tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
+              tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
           >
             <TagSimple size={24} color={theme.colors.readerFont.toString()} />
           </TooltipWrapped>
@@ -127,7 +129,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
       <Button style='articleActionIcon' onClick={() => props.articleActionHandler('showHighlights')}>
         <TooltipWrapped
           tooltipContent="View Highlights"
-          tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
+          tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
         >
           <HighlighterCircle size={24} color={theme.colors.readerFont.toString()} />
         </TooltipWrapped>
@@ -138,7 +140,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
       <Button style='articleActionIcon' onClick={() => props.articleActionHandler('archive')}>
         <TooltipWrapped
           tooltipContent="Archive"
-          tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
+          tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
         >
           <ArchiveBox size={24} color={theme.colors.readerFont.toString()} />
         </TooltipWrapped>
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 18bd8a00c..9179327ce 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -164,12 +164,14 @@ export default function Home(): JSX.Element {
         headerToolbarControl={
           <ArticleActionsMenu
             article={article}
-            layout='horizontal'
+            layout='top'
+            alwaysDisplay={true}
             lineHeight={lineHeight}
             marginWidth={marginWidth}
             articleActionHandler={actionHandler}
           />
         }
+        alwaysDisplayToolbar={article.contentReader == 'PDF'}
         pageMetaDataProps={{
           title: article.title,
           path: router.pathname,
@@ -199,9 +201,10 @@ export default function Home(): JSX.Element {
           {article.contentReader !== 'PDF' ? (
             <ArticleActionsMenu
               article={article}
-              layout='vertical'
+              layout='side'
               lineHeight={lineHeight}
               marginWidth={marginWidth}
+              showReaderDisplaySettings={false}
               articleActionHandler={actionHandler}
             />
           ) : null}

From bb95a267187e2b29a841b560632038329480b66b Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 14 Apr 2022 16:06:29 -0700
Subject: [PATCH 3/4] Remove unused prop

---
 packages/web/pages/[username]/[slug]/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 9179327ce..1cf9d7924 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -165,7 +165,6 @@ export default function Home(): JSX.Element {
           <ArticleActionsMenu
             article={article}
             layout='top'
-            alwaysDisplay={true}
             lineHeight={lineHeight}
             marginWidth={marginWidth}
             articleActionHandler={actionHandler}

From 7e9e678e0d9169cb96797449a290106c0540d34d Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 14 Apr 2022 16:46:13 -0700
Subject: [PATCH 4/4] Dont show reader display settings on PDFs

---
 packages/web/pages/[username]/[slug]/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 1cf9d7924..9973d45b3 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -167,6 +167,7 @@ export default function Home(): JSX.Element {
             layout='top'
             lineHeight={lineHeight}
             marginWidth={marginWidth}
+            showReaderDisplaySettings={article.contentReader != 'PDF'}
             articleActionHandler={actionHandler}
           />
         }
@@ -203,7 +204,7 @@ export default function Home(): JSX.Element {
               layout='side'
               lineHeight={lineHeight}
               marginWidth={marginWidth}
-              showReaderDisplaySettings={false}
+              showReaderDisplaySettings={true}
               articleActionHandler={actionHandler}
             />
           ) : null}