Wire up show highlights modal to new article actions

packages/web/components/templates/article/ArticleContainer.tsx

@@ -29,14 +29,14 @@ type ArticleContainerProps = {
   fontSize?: number
   fontFamily?: string
   lineHeight?: number
-  showHighlightsModal?: boolean
-  setShowHighlightsModal?: (show: boolean) => void
+  showHighlightsModal: boolean
+  setShowHighlightsModal: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
   const [showShareModal, setShowShareModal] = useState(false)
-  const [showHighlightsModal, setShowHighlightsModal] = 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) => {
@@ -160,8 +160,8 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
           <ArticleHeaderToolbar
             articleTitle={props.article.title}
             articleShareURL={props.highlightsBaseURL}
-            setShowHighlightsModal={setShowHighlightsModal}
             setShowShareArticleModal={setShowShareModal}
+            setShowHighlightsModal={props.setShowHighlightsModal}
             hasHighlights={props.article.highlights?.length > 0}
           />
         </VStack>
@@ -195,10 +195,10 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         articleAuthor={props.article.author ?? ''}
         articleId={props.article.id}
         isAppleAppEmbed={props.isAppleAppEmbed}
-        highlightBarDisabled={props.highlightBarDisabled}
-        showHighlightsModal={showHighlightsModal}
         highlightsBaseURL={props.highlightsBaseURL}
-        setShowHighlightsModal={setShowHighlightsModal}
+        highlightBarDisabled={props.highlightBarDisabled}
+        showHighlightsModal={props.showHighlightsModal}
+        setShowHighlightsModal={props.setShowHighlightsModal}
         articleMutations={props.articleMutations}
       />
       {showReportIssuesModal ? (

packages/web/components/templates/article/ArticleHeaderToolbar.tsx

@@ -14,7 +14,7 @@ type ArticleHeaderToolbarProps = {
   articleTitle: string
   articleShareURL: string
   hasHighlights: boolean
-  setShowHighlightsModal: (showHighlightsModal: boolean) => void
+  setShowHighlightsModal: React.Dispatch<React.SetStateAction<boolean>>
   setShowShareArticleModal: (showShareModal: boolean) => void
 }
 
@@ -46,7 +46,12 @@ export function ArticleHeaderToolbar(
   return (
     <HStack distribution="between" alignment="center" css={{ gap: '$2' }}>
       {props.hasHighlights && (
-        <Button style="plainIcon" onClick={() => props.setShowHighlightsModal(true)} title="View all your highlights and notes">
+        <Button style="plainIcon" onClick={() => {
+          if (props.setShowHighlightsModal) {
+            props.setShowHighlightsModal(true)
+          }
+        }}
+          title="View all your highlights and notes">
           <CommentIcon
             size={24}
             strokeColor={theme.colors.grayTextContrast.toString()}

packages/web/pages/app/[username]/[slug]/index.tsx

@@ -63,6 +63,7 @@ function AppArticleEmbedContent(
   props: AppArticleEmbedContentProps
 ): JSX.Element {
   const scrollRef = useRef<HTMLDivElement | null>(null)
+  const [showHighlightsModal, setShowHighlightsModal] = useState(false)
 
   const { articleData } = useGetArticleQuery({
     username: props.username,
@@ -100,6 +101,8 @@ function AppArticleEmbedContent(
             margin={props.margin}
             fontFamily={props.fontFamily}
             labels={[]}
+            showHighlightsModal={showHighlightsModal}
+            setShowHighlightsModal={setShowHighlightsModal}
             articleMutations={{
               createHighlightMutation,
               deleteHighlightMutation,