Rename notes sidebar to highlights modal

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

@@ -15,6 +15,7 @@ import { updateThemeLocally } from '../../../lib/themeUpdater'
 import { ArticleMutations } from '../../../lib/articleActions'
 import { LabelChip } from '../../elements/LabelChip'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { HighlightsModal } from './HighlightsModal'
 
 type ArticleContainerProps = {
   article: ArticleAttributes
@@ -28,11 +29,13 @@ type ArticleContainerProps = {
   fontSize?: number
   fontFamily?: string
   lineHeight?: number
+  showHighlightsModal?: boolean
+  setShowHighlightsModal?: (show: boolean) => void
 }
 
 export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
   const [showShareModal, setShowShareModal] = useState(false)
-  const [showNotesSidebar, setShowNotesSidebar] = useState(false)
+  const [showHighlightsModal, setShowHighlightsModal] = useState(false)
   const [showReportIssuesModal, setShowReportIssuesModal] = useState(false)
   const [fontSize, setFontSize] = useState(props.fontSize ?? 20)
 
@@ -157,7 +160,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
           <ArticleHeaderToolbar
             articleTitle={props.article.title}
             articleShareURL={props.highlightsBaseURL}
-            setShowNotesSidebar={setShowNotesSidebar}
+            setShowHighlightsModal={setShowHighlightsModal}
             setShowShareArticleModal={setShowShareModal}
             hasHighlights={props.article.highlights?.length > 0}
           />
@@ -193,9 +196,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         articleId={props.article.id}
         isAppleAppEmbed={props.isAppleAppEmbed}
         highlightBarDisabled={props.highlightBarDisabled}
-        showNotesSidebar={showNotesSidebar}
+        showHighlightsModal={showHighlightsModal}
         highlightsBaseURL={props.highlightsBaseURL}
-        setShowNotesSidebar={setShowNotesSidebar}
+        setShowHighlightsModal={setShowHighlightsModal}
         articleMutations={props.articleMutations}
       />
       {showReportIssuesModal ? (

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

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

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

@@ -25,9 +25,9 @@ type HighlightsLayerProps = {
   articleAuthor: string
   isAppleAppEmbed: boolean
   highlightBarDisabled: boolean
-  showNotesSidebar: boolean
+  showHighlightsModal: boolean
   highlightsBaseURL: string
-  setShowNotesSidebar: React.Dispatch<React.SetStateAction<boolean>>
+  setShowHighlightsModal: React.Dispatch<React.SetStateAction<boolean>>
   articleMutations: ArticleMutations
 }
 
@@ -466,11 +466,11 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
     )
   }
 
-  if (props.showNotesSidebar) {
+  if (props.showHighlightsModal) {
     return (
       <HighlightsModal
         highlights={highlights}
-        onOpenChange={() => props.setShowNotesSidebar(false)}
+        onOpenChange={() => props.setShowHighlightsModal(false)}
         deleteHighlightAction={(highlightId: string) => {
           removeHighlightCallback(highlightId)
         }}

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

@@ -218,6 +218,8 @@ export default function Home(): JSX.Element {
                 margin={marginWidth}
                 lineHeight={lineHeight}
                 labels={labels}
+                showHighlightsModal={showHighlightsModal}
+                setShowHighlightsModal={setShowHighlightsModal}
                 articleMutations={{
                   createHighlightMutation,
                   deleteHighlightMutation,
@@ -228,15 +230,6 @@ export default function Home(): JSX.Element {
               />
               </VStack>
             )}
-            {showHighlightsModal && (
-              <HighlightsModal
-                highlights={article.highlights}
-                onOpenChange={() => setShowHighlightsModal(false)}
-                deleteHighlightAction={(highlightId: string) => {
-                  // removeHighlightCallback(highlightId)
-                }}
-              />
-            )}
       </PrimaryLayout>
     )
   }