Make notebook modal closer to highlights view, add exports

packages/web/components/elements/MenuTriggerButton.tsx

@@ -1,57 +0,0 @@
-import { DotsThreeVertical, X } from 'phosphor-react'
-import { useState } from 'react'
-import { Button } from './Button'
-import { Box, SpanBox } from './LayoutPrimitives'
-
-export function MenuTrigger(): JSX.Element {
-  const [hover, setHover] = useState(false)
-
-  return (
-    <SpanBox
-      css={{
-        display: 'flex',
-        height: '20px',
-        width: '20px',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: '1000px',
-        background: '$thBackground2',
-        '&:hover': {
-          bg: '#898989',
-        },
-      }}
-      onMouseOver={() => setHover(true)}
-      onMouseOut={() => setHover(false)}
-    >
-      <DotsThreeVertical
-        size={25}
-        weight="bold"
-        color={hover ? '#EBEBEB' : '#898989'}
-      />
-      {/* color="#ADADAD" />
-      <Button
-        css={{
-          cursor: 'pointer',
-          marginLeft: 'auto',
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-        style="ghost"
-        onClick={() => {
-          props.close()
-        }}
-      >
-        <X
-          width={10}
-          height={10}
-          weight="bold"
-          color={hover ? '#EBEBEB' : '#898989'}
-          className="xMark"
-        />
-      </Button> */}
-    </SpanBox>
-  )
-}

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

@@ -68,13 +68,15 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
   >([])
   const focusedHighlightMousePos = useRef({ pageX: 0, pageY: 0 })
 
-  const [focusedHighlight, setFocusedHighlight] =
-    useState<Highlight | undefined>(undefined)
+  const [focusedHighlight, setFocusedHighlight] = useState<
+    Highlight | undefined
+  >(undefined)
 
   const [selectionData, setSelectionData] = useSelection(highlightLocations)
 
-  const [labelsTarget, setLabelsTarget] =
-    useState<Highlight | undefined>(undefined)
+  const [labelsTarget, setLabelsTarget] = useState<Highlight | undefined>(
+    undefined
+  )
 
   const canShareNative = useCanShareNative()
 

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

@@ -23,6 +23,9 @@ import { updateHighlightMutation } from '../../../lib/networking/mutations/updat
 import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { diff_match_patch } from 'diff-match-patch'
 import { HighlightNoteTextEditArea } from '../../elements/HighlightNoteTextEditArea'
+import { CloseButton } from '../../elements/CloseButton'
+import { MenuTrigger } from '../../elements/MenuTrigger'
+import { highlightsAsMarkdown, HighlightsMenu } from '../homeFeed/HighlightItem'
 
 type NotebookModalProps = {
   highlights: Highlight[]
@@ -46,6 +49,18 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element {
   )
   const [, updateState] = useState({})
 
+  const exportHighlights = useCallback(() => {
+    ;(async () => {
+      if (!props.highlights) {
+        showErrorToast('No highlights to export')
+        return
+      }
+      const markdown = highlightsAsMarkdown(props.highlights)
+      await navigator.clipboard.writeText(markdown)
+      showSuccessToast('Highlight copied')
+    })()
+  }, [props.highlights])
+
   const sortedHighlights = useMemo(() => {
     const sorted = (a: number, b: number) => {
       if (a < b) {
@@ -85,7 +100,24 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element {
         css={{ overflow: 'auto', px: '24px' }}
       >
         <VStack distribution="start" css={{ height: '100%' }}>
-          <ModalTitleBar title="Notebook" onOpenChange={props.onOpenChange} />
+          <HStack
+            distribution="between"
+            alignment="center"
+            css={{ height: '50px', width: '100%' }}
+          >
+            <StyledText style="modalHeadline">Notebook</StyledText>
+            <HStack css={{ ml: 'auto', gap: '10px' }}>
+              <Dropdown triggerElement={<MenuTrigger />}>
+                <DropdownOption
+                  onSelect={() => {
+                    exportHighlights()
+                  }}
+                  title="Export"
+                />
+              </Dropdown>
+              <CloseButton close={() => props.onOpenChange(false)} />
+            </HStack>
+          </HStack>
           <Box css={{ overflow: 'auto', width: '100%' }}>
             {sortedHighlights.map((highlight) => (
               <ModalHighlightView
@@ -167,6 +199,7 @@ type ModalHighlightViewProps = {
 }
 
 function ModalHighlightView(props: ModalHighlightViewProps): JSX.Element {
+  const [hover, setHover] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
 
   const copyHighlight = useCallback(async () => {
@@ -174,9 +207,13 @@ function ModalHighlightView(props: ModalHighlightViewProps): JSX.Element {
   }, [props.highlight])
 
   return (
-    <>
+    <HStack
+      css={{ width: '100%', py: '20px', cursor: 'pointer' }}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
       <VStack>
-        <SpanBox css={{ marginLeft: 'auto' }}>
+        {/* <SpanBox css={{ marginLeft: 'auto' }}>
           <Dropdown
             triggerElement={
               <DotsThree size={24} color={theme.colors.readerFont.toString()} />
@@ -201,7 +238,7 @@ function ModalHighlightView(props: ModalHighlightViewProps): JSX.Element {
               title="Delete"
             />
           </Dropdown>
-        </SpanBox>
+        </SpanBox> */}
 
         <HighlightView
           scrollToHighlight={props.scrollToHighlight}
@@ -233,6 +270,24 @@ function ModalHighlightView(props: ModalHighlightViewProps): JSX.Element {
         )}
         <SpanBox css={{ mt: '$2', mb: '$4' }} />
       </VStack>
-    </>
+      <SpanBox
+        css={{
+          marginLeft: 'auto',
+          width: '20px',
+          visibility: hover ? 'unset' : 'hidden',
+          '@media (hover: none)': {
+            visibility: 'unset',
+          },
+        }}
+      >
+        <HighlightsMenu
+          highlight={props.highlight}
+          setLabelsTarget={props.setSetLabelsTarget}
+          setShowConfirmDeleteHighlightId={
+            props.setShowConfirmDeleteHighlightId
+          }
+        />
+      </SpanBox>
+    </HStack>
   )
 }

packages/web/components/templates/homeFeed/HighlightItem.tsx

@@ -199,7 +199,7 @@ type HighlightsMenuProps = {
   setShowConfirmDeleteHighlightId: (set: string) => void
 }
 
-function HighlightsMenu(props: HighlightsMenuProps): JSX.Element {
+export function HighlightsMenu(props: HighlightsMenuProps): JSX.Element {
   const copyHighlight = useCallback(() => {
     ;(async () => {
       await navigator.clipboard.writeText(props.highlight.quote)

packages/web/components/templates/homeFeed/HighlightsLayout.tsx

@@ -1,4 +1,4 @@
-import { DotsThreeVertical, HighlighterCircle } from 'phosphor-react'
+import { HighlighterCircle } from 'phosphor-react'
 import { useCallback, useEffect, useState } from 'react'
 import { Toaster } from 'react-hot-toast'
 import { LibraryItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
@@ -7,6 +7,7 @@ import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 import { Dropdown, DropdownOption } from '../../elements/DropdownElements'
 
 import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
+import { MenuTrigger } from '../../elements/MenuTrigger'
 import { StyledText } from '../../elements/StyledText'
 import {
   MetaStyle,
@@ -292,25 +293,7 @@ function HighlightList(props: HighlightListProps): JSX.Element {
           >
             HIGHLIGHTS
           </StyledText>
-          <Dropdown
-            triggerElement={
-              <Box
-                css={{
-                  display: 'flex',
-                  height: '20px',
-                  width: '20px',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  borderRadius: '1000px',
-                  '&:hover': {
-                    bg: '#898989',
-                  },
-                }}
-              >
-                <DotsThreeVertical size={20} color="#EBEBEB" weight="bold" />
-              </Box>
-            }
-          >
+          <Dropdown triggerElement={<MenuTrigger />}>
             <DropdownOption
               onSelect={() => {
                 exportHighlights()