Display the all highlights modal from PDFs via the article actions button

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) => {

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>
   )
 

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>
   )
 }

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}
             />
           ) : (