Add a header to the highglight view

packages/web/components/patterns/HighlightView.tsx

@@ -1,5 +1,11 @@
 /* eslint-disable react/no-children-prop */
-import { BookOpen, CaretDown, PencilLine } from 'phosphor-react'
+import {
+  BookOpen,
+  CaretDown,
+  HighlighterCircle,
+  Notebook,
+  PencilLine,
+} from 'phosphor-react'
 import { useState } from 'react'
 import type { Highlight } from '../../lib/networking/fragments/highlightFragment'
 import { LabelChip } from '../elements/LabelChip'
@@ -10,7 +16,7 @@ import {
   SpanBox,
   HStack,
 } from '../elements/LayoutPrimitives'
-import { styled } from '../tokens/stitches.config'
+import { styled, theme } from '../tokens/stitches.config'
 import { HighlightViewNote } from './HighlightNotes'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -62,27 +68,35 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
         },
       }}
     >
-      <VStack
+      <HStack
         css={{
           borderBottom: '1px solid $thBorderSubtle',
           width: '100%',
           height: '40px',
-          paddingRight: '10px',
+          px: '15px',
         }}
-        distribution="end"
-        alignment="end"
+        distribution="start"
+        alignment="center"
       >
-        <HighlightsMenu
-          item={props.item}
-          viewer={props.viewer}
-          highlight={props.highlight}
-          viewInReader={props.viewInReader}
-          setLabelsTarget={props.setLabelsTarget}
-          setShowConfirmDeleteHighlightId={
-            props.setShowConfirmDeleteHighlightId
-          }
-        />
-      </VStack>
+        {props.highlight.annotation ? (
+          <Notebook size={20} color="#757575" />
+        ) : (
+          <HighlighterCircle size={20} color="#757575" />
+        )}
+
+        <SpanBox css={{ marginLeft: 'auto' }}>
+          <HighlightsMenu
+            item={props.item}
+            viewer={props.viewer}
+            highlight={props.highlight}
+            viewInReader={props.viewInReader}
+            setLabelsTarget={props.setLabelsTarget}
+            setShowConfirmDeleteHighlightId={
+              props.setShowConfirmDeleteHighlightId
+            }
+          />
+        </SpanBox>
+      </HStack>
       {/* <VStack
         css={{
           minHeight: '100%',

packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx

@@ -28,7 +28,6 @@ export function LibraryHighlightGridCard(
   props: LibraryHighlightGridCardProps
 ): JSX.Element {
   const [expanded, setExpanded] = useState(false)
-
   const higlightCount = props.item.highlights?.length ?? 0
 
   const sortedHighlights = useMemo(() => {
@@ -123,16 +122,19 @@ export function LibraryHighlightGridCard(
           <>
             <GridSeparator css={{ width: '100%' }} />
             <VStack
-              css={{ height: '100%', width: '100%', mt: '20px' }}
+              css={{ height: '100%', width: '100%', mt: '20px', gap: '20px' }}
               distribution="start"
             >
               {sortedHighlights.map((highlight) => (
-                <SpanBox key={`hv-${highlight.id}`}>
+                <SpanBox key={`hv-${highlight.id}`} css={{ width: '100%' }}>
                   <HighlightView
                     key={highlight.id}
                     viewer={props.viewer}
                     item={props.item}
                     highlight={highlight}
+                    viewInReader={() => {}}
+                    setLabelsTarget={() => {}}
+                    setShowConfirmDeleteHighlightId={() => {}}
                     updateHighlight={(highlight) => {
                       console.log('updated highlight: ', highlight)
                     }}

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

@@ -221,7 +221,6 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
         height: '100%',
         width: '100%',
         p: '20px',
-        bg: '$readerMargin',
         '@mdDown': { p: '15px' },
       }}
     >