From e2aaaf5a08568004452a23ac439fa7754c685a92 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 23 Mar 2023 16:14:04 +0800
Subject: [PATCH] Sizing fixes on the note modal

---
 .../web/components/patterns/HighlightView.tsx | 43 +++-----
 .../components/templates/HighlightNoteBox.tsx | 22 +----
 .../article/HighlightPostToFeedModal.tsx      | 92 -----------------
 .../templates/article/NotebookModal.tsx       | 98 ++++++++++---------
 4 files changed, 71 insertions(+), 184 deletions(-)
 delete mode 100644 packages/web/components/templates/article/HighlightPostToFeedModal.tsx

diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx
index 1f7c8555d..dcb8f1657 100644
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@@ -9,8 +9,8 @@ import {
   SpanBox,
   HStack,
 } from '../elements/LayoutPrimitives'
-import { StyledText } from '../elements/StyledText'
 import { styled, theme } from '../tokens/stitches.config'
+import { HighlightViewNote } from './HighlightViewNote'
 
 type HighlightViewProps = {
   highlight: Highlight
@@ -27,6 +27,7 @@ const StyledQuote = styled(Blockquote, {
 })
 
 export function HighlightView(props: HighlightViewProps): JSX.Element {
+  const [noteMode, setNoteMode] = useState<'preview' | 'edit'>('preview')
   const [isEditing, setIsEditing] = useState(false)
 
   const lines = useMemo(
@@ -45,7 +46,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
       <VStack css={{ minHeight: '100%', width: '10px' }}>
         <Box
           css={{
-            mt: '5px',
+            mt: '8px',
             width: '10px',
             height: '10px',
             background: '#FFD234',
@@ -71,7 +72,12 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
             }
           }}
         >
-          <SpanBox css={{ p: '1px', borderRadius: '2px' }}>
+          <SpanBox
+            css={{
+              p: '1px',
+              borderRadius: '2px',
+            }}
+          >
             {lines.map((line: string, index: number) => (
               <Fragment key={index}>
                 {line}
@@ -90,30 +96,13 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
             <LabelChip key={index} text={name || ''} color={color} />
           ))}
         </Box>
-        {!isEditing ? (
-          <StyledText
-            css={{
-              borderRadius: '5px',
-              p: '10px',
-              width: '100%',
-              marginTop: '15px',
-              color: '$thHighContrast',
-              border: '1px solid #EBEBEB',
-            }}
-            onClick={() => setIsEditing(true)}
-          >
-            {props.highlight.annotation
-              ? props.highlight.annotation
-              : 'Add notes to this highlight...'}
-          </StyledText>
-        ) : null}
-        {isEditing && (
-          <HighlightNoteTextEditArea
-            setIsEditing={setIsEditing}
-            highlight={props.highlight}
-            updateHighlight={() => {} /* props.updateHighlight */}
-          />
-        )}
+        <HighlightViewNote
+          placeHolder="Add notes to this highlight..."
+          highlight={props.highlight}
+          sizeMode={'normal'}
+          mode={noteMode}
+          setEditMode={setNoteMode}
+        />
       </VStack>
     </HStack>
   )
diff --git a/packages/web/components/templates/HighlightNoteBox.tsx b/packages/web/components/templates/HighlightNoteBox.tsx
index ed1886895..7f61c84f4 100644
--- a/packages/web/components/templates/HighlightNoteBox.tsx
+++ b/packages/web/components/templates/HighlightNoteBox.tsx
@@ -9,7 +9,7 @@ import {
 import { formattedShortTime } from '../../lib/dateFormatting'
 import { createHighlightMutation } from '../../lib/networking/mutations/createHighlightMutation'
 import { updateHighlightMutation } from '../../lib/networking/mutations/updateHighlightMutation'
-import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
+import { HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
 
 import MarkdownIt from 'markdown-it'
 import MdEditor from 'react-markdown-editor-lite'
@@ -232,7 +232,6 @@ export function HighlightNoteBox(props: NoteSectionProps): JSX.Element {
           distribution="start"
           css={{
             width: '100%',
-            // minHeight: '160px'
           }}
         >
           <StyledText
@@ -260,22 +259,3 @@ export function HighlightNoteBox(props: NoteSectionProps): JSX.Element {
     </>
   )
 }
-
-// {!isEditing ? (
-//   <StyledText
-//     css={{
-//       borderRadius: '5px',
-//       p: '10px',
-//       width: '100%',
-//       marginTop: '15px',
-//       color: '$thHighContrast',
-//       border: '1px solid #EBEBEB',
-//     }}
-//     onClick={() => setIsEditing(true)}
-//   >
-//     {props.highlight.annotation
-//       ? props.highlight.annotation
-//       : 'Add notes to this highlight...'}
-//   </StyledText>
-// ) : null}
-// {isEditing && (
diff --git a/packages/web/components/templates/article/HighlightPostToFeedModal.tsx b/packages/web/components/templates/article/HighlightPostToFeedModal.tsx
deleted file mode 100644
index 73812a544..000000000
--- a/packages/web/components/templates/article/HighlightPostToFeedModal.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import {
-  ModalRoot,
-  ModalContent,
-  ModalOverlay,
-} from './../../elements/ModalPrimitives'
-import { Box, HStack } from '../../elements/LayoutPrimitives'
-import { Button } from '../../elements/Button'
-import { StyledText } from '../../elements/StyledText'
-import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
-import { HighlightView } from '../../patterns/HighlightView'
-import { useCallback, useState } from 'react'
-import { StyledTextArea } from '../../elements/StyledTextArea'
-
-type HighlightPostToFeedModalProps = {
-  highlight: Highlight
-  author: string
-  title: string
-  onCommit: (highlight: Highlight, comment: string) => void
-  onOpenChange: (open: boolean) => void
-}
-
-export function HighlightPostToFeedModal(
-  props: HighlightPostToFeedModalProps
-): JSX.Element {
-  const [comment, setComment] = useState('')
-
-  const handleCommentChange = useCallback(
-    (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
-      setComment(event.target.value)
-    },
-    [setComment]
-  )
-
-  const postHighlight = useCallback(async () => {
-    props.onCommit(props.highlight, comment)
-    props.onOpenChange(false)
-  }, [comment, props])
-
-  return (
-    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
-      <ModalOverlay />
-      <ModalContent
-        onPointerDownOutside={(event) => {
-          event.preventDefault()
-        }}
-        css={{ overflow: 'auto' }}
-      >
-        <Box
-          css={{
-            display: 'grid',
-            gridTemplateColumns: '1fr auto 1fr',
-            px: '$2',
-          }}
-        >
-          <Button
-            style="ctaSecondary"
-            onClick={() => {
-              props.onOpenChange(false)
-            }}
-            css={{ justifySelf: 'start' }}
-          >
-            Cancel
-          </Button>
-          <HStack alignment="center">
-            <StyledText>Post Highlight</StyledText>
-          </HStack>
-          <Button
-            style="ctaSecondary"
-            onClick={postHighlight}
-            css={{ justifySelf: 'end' }}
-          >
-            Post
-          </Button>
-        </Box>
-        <HighlightView {...props} />
-        <StyledTextArea
-          css={{
-            mt: '$2',
-            width: '95%',
-            p: '$1',
-            minHeight: '$6',
-          }}
-          autoFocus
-          placeholder={'Leave comment (optional)'}
-          value={comment}
-          onChange={handleCommentChange}
-          maxLength={1000}
-        />
-      </ModalContent>
-    </ModalRoot>
-  )
-}
diff --git a/packages/web/components/templates/article/NotebookModal.tsx b/packages/web/components/templates/article/NotebookModal.tsx
index 96d15f338..c07242a26 100644
--- a/packages/web/components/templates/article/NotebookModal.tsx
+++ b/packages/web/components/templates/article/NotebookModal.tsx
@@ -42,6 +42,7 @@ import { nanoid } from 'nanoid'
 import throttle from 'lodash/throttle'
 import { deleteHighlightMutation } from '../../../lib/networking/mutations/deleteHighlightMutation'
 import { LibraryItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
+import { HighlightNoteBox } from '../HighlightNoteBox'
 
 const mdParser = new MarkdownIt()
 
@@ -77,7 +78,7 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element {
   )
   const [sizeMode, setSizeMode] = useState<'normal' | 'maximized'>('normal')
   const [showConfirmDeleteNote, setShowConfirmDeleteNote] = useState(false)
-  const [notesEditMode, setNotesEditMode] = useState(true)
+  const [notesEditMode, setNotesEditMode] = useState<'edit' | 'preview'>('edit')
   const [, updateState] = useState({})
 
   const listReducer = (
@@ -190,63 +191,72 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element {
         }}
         css={{
           overflow: 'auto',
-          px: '20px',
           height: sizeMode === 'normal' ? 'unset' : '100%',
           maxWidth: sizeMode === 'normal' ? '640px' : '100%',
+          minHeight: '525px',
         }}
       >
-        <VStack distribution="start" css={{ height: '100%' }}>
+        <HStack
+          distribution="between"
+          alignment="center"
+          css={{
+            width: '100%',
+            position: 'sticky',
+            top: '0px',
+            height: '50px',
+            p: '20px',
+            bg: '$thBackground',
+            zIndex: 10,
+          }}
+        >
+          <StyledText style="modalHeadline" css={{ color: '$thTextSubtle2' }}>
+            Notebook
+          </StyledText>
           <HStack
-            distribution="between"
+            css={{
+              ml: 'auto',
+              cursor: 'pointer',
+              gap: '5px',
+              mr: '-5px',
+            }}
+            distribution="center"
             alignment="center"
-            css={{ height: '50px', width: '100%' }}
           >
-            <StyledText style="modalHeadline" css={{ color: '$thTextSubtle2' }}>
-              Notebook
-            </StyledText>
-            <HStack
-              css={{
-                ml: 'auto',
-                cursor: 'pointer',
-                gap: '5px',
-                mr: '-5px',
-              }}
-              distribution="center"
-              alignment="center"
-            >
-              <SizeToggle mode={sizeMode} setMode={setSizeMode} />
-              <Dropdown triggerElement={<MenuTrigger />}>
-                <DropdownOption
-                  onSelect={() => {
-                    exportHighlights()
-                  }}
-                  title="Export Notebook"
-                />
-                <DropdownOption
-                  onSelect={() => {
-                    setShowConfirmDeleteNote(true)
-                  }}
-                  title="Delete Document Note"
-                />
-              </Dropdown>
-              <CloseButton close={() => props.onOpenChange(false)} />
-            </HStack>
+            <SizeToggle mode={sizeMode} setMode={setSizeMode} />
+            <Dropdown triggerElement={<MenuTrigger />}>
+              <DropdownOption
+                onSelect={() => {
+                  exportHighlights()
+                }}
+                title="Export Notebook"
+              />
+              <DropdownOption
+                onSelect={() => {
+                  setShowConfirmDeleteNote(true)
+                }}
+                title="Delete Document Note"
+              />
+            </Dropdown>
+            <CloseButton close={() => props.onOpenChange(false)} />
           </HStack>
+        </HStack>
+        <VStack distribution="start" css={{ height: '100%', p: '20px' }}>
           <TitledSection
             title="ARTICLE NOTES"
-            editMode={notesEditMode}
-            setEditMode={setNotesEditMode}
+            editMode={notesEditMode == 'edit'}
+            setEditMode={(edit) => setNotesEditMode(edit ? 'edit' : 'preview')}
           />
-          <NoteSection
+          <HighlightNoteBox
             pageId={props.pageId}
+            placeHolder="Add notes to this document..."
             highlight={highlights.find((h) => h.type == 'NOTE')}
             sizeMode={sizeMode}
-            mode={notesEditMode ? 'edit' : 'read'}
+            mode={notesEditMode}
             setEditMode={setNotesEditMode}
-            dispatchList={dispatchList}
+            // dispatchList={dispatchList}
           />
           <SpanBox css={{ mt: '10px', mb: '25px' }} />
-          {props.highlights.map((highlight) => (
+          {/* {props.highlights.map((highlight) => (
             <Box key={`hn-${highlight.id}`} css={{ color: 'black' }}>
               {highlight.annotation}
               <Button
@@ -257,8 +267,8 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element {
                 DELETE
               </Button>
             </Box>
-          ))}
-          <Box css={{ overflow: 'auto', width: '100%' }}>
+          ))} */}
+          <Box css={{ width: '100%' }}>
             <TitledSection title="HIGHLIGHTS" />
 
             {sortedHighlights.map((highlight) => (
@@ -358,7 +368,6 @@ type ModalHighlightViewProps = {
 
 function ModalHighlightView(props: ModalHighlightViewProps): JSX.Element {
   const [hover, setHover] = useState(false)
-  const [isEditing, setIsEditing] = useState(false)
 
   return (
     <HStack
@@ -544,6 +553,7 @@ function NoteSection(props: NoteSectionProps): JSX.Element {
               'block-quote',
               'link',
               'auto-resize',
+              'mode-toggle',
             ]}
             style={{
               width: '100%',