Wire up article actions to have an article instance when hosted in the header

packages/web/components/patterns/PrimaryHeader.tsx

@@ -17,8 +17,6 @@ import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
 import { setupAnalytics } from '../../lib/analytics'
 import { Button } from '../elements/Button'
 import Link from 'next/link'
-import { ArchiveBox, ArrowSquareOut, DotsThree, HighlighterCircle, TagSimple, TextAa } from 'phosphor-react'
-import { ArticleActionsMenu } from '../templates/article/ArticleActionsMenu'
 
 type HeaderProps = {
   user?: UserBasicData
@@ -28,6 +26,7 @@ type HeaderProps = {
   isFixedPosition: boolean
   scrollElementRef?: React.RefObject<HTMLDivElement>
   displayFontStepper?: boolean
+  toolbarControl?: JSX.Element
   setShowLogoutConfirmation: (showShareModal: boolean) => void
   setShowKeyboardCommandsModal: (showShareModal: boolean) => void
 }
@@ -56,9 +55,6 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
     (changeset: ScrollOffsetChangeset) => {
       const isScrolledBeyondMinThreshold = changeset.current.y >= 50
       const isScrollingDown = changeset.current.y > changeset.previous.y
-
-      // setIsScrolled(isScrolledBeyondMinThreshold)
-      // setShowHeader(!(isScrollingDown && isScrolledBeyondMinThreshold))
     },
     0
   )
@@ -129,6 +125,7 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
         isDisplayingShadow={isScrolled}
         isVisible={true}
         isFixedPosition={true}
+        toolbarControl={props.toolbarControl}
         displayFontStepper={props.displayFontStepper}
       />
     </>
@@ -145,6 +142,7 @@ type NavHeaderProps = {
   isVisible?: boolean
   isFixedPosition: boolean
   displayFontStepper?: boolean
+  toolbarControl?: JSX.Element
 }
 
 function NavHeader(props: NavHeaderProps): JSX.Element {
@@ -185,20 +183,19 @@ function NavHeader(props: NavHeaderProps): JSX.Element {
           <NavLinks currentPath={currentPath} isLoggedIn={!!props.username} />
         </HStack>
 
-        <HStack distribution="end" alignment="center" css={{
-          height: '100%',
-          width: '100%',
-          display: 'none',
-          '@lgDown': {
-            display: 'flex',
-          },
-          mr: '16px',
-          }}
-        >
-          <ArticleActionsMenu layout='horizontal' articleActionHandler={() => {
-            console.log('action handler')
-          }} />
-        </HStack>
+        {props.toolbarControl && (
+          <HStack distribution="end" alignment="center" css={{
+            height: '100%', width: '100%',
+            mr: '16px',
+            display: 'none',
+            '@lgDown': {
+              display: 'flex',
+            },
+            }}
+          >
+            {props.toolbarControl}
+          </HStack>
+        )}
 
         {props.username ? (
           <HStack

packages/web/components/templates/PrimaryLayout.tsx

@@ -4,7 +4,6 @@ import {
   ReactNode,
   MutableRefObject,
   useEffect,
-  useContext,
   useState,
 } from 'react'
 import { PrimaryHeader } from './../patterns/PrimaryHeader'
@@ -24,6 +23,7 @@ type PrimaryLayoutProps = {
   pageMetaDataProps?: PageMetaDataProps
   scrollElementRef?: MutableRefObject<HTMLDivElement | null>
   displayFontStepper?: boolean
+  headerToolbarControl?: JSX.Element
 }
 
 export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
@@ -76,6 +76,7 @@ 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}
           displayFontStepper={props.displayFontStepper}
           setShowLogoutConfirmation={setShowLogoutConfirmation}

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

@@ -1,6 +1,7 @@
 import { Separator } from "@radix-ui/react-separator"
 import { ArchiveBox, DotsThree, HighlighterCircle, TagSimple, TextAa } from "phosphor-react"
 import { useRef } from "react"
+import { ArticleAttributes } from "../../../lib/networking/queries/useGetArticleQuery"
 import { useGetUserPreferences, UserPreferences } from "../../../lib/networking/queries/useGetUserPreferences"
 import { Button } from "../../elements/Button"
 import { Dropdown } from "../../elements/DropdownElements"
@@ -12,6 +13,7 @@ import { ReaderSettings } from "./ReaderSettingsModal"
 export type ArticleActionsMenuLayout = 'horizontal' | 'vertical'
 
 type ArticleActionsMenuProps = {
+  article: ArticleAttributes
   layout: ArticleActionsMenuLayout
   articleActionHandler: (action: string, arg?: number) => void
 }
@@ -39,7 +41,7 @@ type ActionDropdownProps = {
 const ActionDropdown = (props: ActionDropdownProps): JSX.Element => {
   return <Dropdown
     showArrow={true}
-    css={{  m: '0px', p: '0px' }}
+    css={{ m: '0px', p: '0px' }}
     side={props.layout == 'vertical' ? 'right' : 'bottom'}
     sideOffset={props.layout == 'vertical' ? 8 : 0}
     align={props.layout == 'vertical' ? 'start' : 'center'}
@@ -91,6 +93,16 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
       >
         <EditLabelsControl />
       </ActionDropdown>
+{/* 
+      <Button onClick={() => props.articleActionHandler('editLabels')} css={{
+        // '@smDown': {
+        //   display: 'none',
+        // },
+      }}>
+        <SpanBox css={{ width: '100%', marginLeft: 'auto', marginRight: 'auto' }}>
+          <TagSimple size={24} color={theme.colors.readerFont.toString()} />
+        </SpanBox>
+      </Button> */}
 
       <Button style='articleActionIcon' onClick={() => props.articleActionHandler('showHighlights')}>
         <HighlighterCircle size={24} color={theme.colors.readerFont.toString()} />

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

@@ -31,6 +31,7 @@ import { Article } from '../../../components/templates/article/Article'
 import { ArticleActionsMenu } from '../../../components/templates/article/ArticleActionsMenu'
 import { HighlightsModal } from '../../../components/templates/article/HighlightsModal'
 import { setLinkArchivedMutation } from '../../../lib/networking/mutations/setLinkArchivedMutation'
+import { EditLabelsModal } from '../../../components/templates/article/EditLabelsModal'
 
 const MenuSeparator = styled(Separator, {
   width: '100%',
@@ -111,9 +112,8 @@ export default function Home(): JSX.Element {
         updateMarginWidth(Math.max(marginWidth - 50, 200))
         break
       case 'editLabels':
-        if (viewerData?.me && isVipUser(viewerData?.me)) {
-          setShowLabelsModal(true)
-        }
+        setShowLabelsModal(true)
+        console.log('showing labels modal')
         break
     }
   };
@@ -130,6 +130,13 @@ export default function Home(): JSX.Element {
         pageTestId="home-page-tag"
         scrollElementRef={scrollRef}
         displayFontStepper={true}
+        headerToolbarControl={
+          <ArticleActionsMenu
+            article={article}
+            layout='horizontal'
+            articleActionHandler={actionHandler}
+          />
+        }
         pageMetaDataProps={{
           title: article.title,
           path: router.pathname,
@@ -157,6 +164,7 @@ export default function Home(): JSX.Element {
           }}
         >
           <ArticleActionsMenu
+            article={article}
             layout='vertical'
             articleActionHandler={actionHandler}
           />
@@ -205,18 +213,9 @@ export default function Home(): JSX.Element {
                 }}
               />
             )}
-              {/* {showLabelsModal && (
-                <EditLabelsModal
-                  labels={article.labels || []}
-                  article={article}
-                  onOpenChange={() => {
-                    setShowLabelsModal(false)
-                  }}
-                  setLabels={(labels: Label[]) => {
-                    // setLabels(labels)
-                  }}
-                />
-              )} */}
+            {showLabelsModal && (
+              <EditLabelsModal />
+            )}
       </PrimaryLayout>
     )
   }