feat(preview): ui redo

5 files changed, 163 insertions, 75 deletions

diff --git a/components/Sidebar/Backlinks.tsx b/components/Sidebar/Backlinks.tsx
index 8c1e9bc..68ab551 100644
--- a/components/Sidebar/Backlinks.tsx
+++ b/components/Sidebar/Backlinks.tsx
@@ -14,6 +14,7 @@ export interface BacklinksProps {
   linksByNodeId: LinksByNodeId
   nodeByCite: NodeByCite
   setSidebarHighlightedNode: OrgRoamNode
+  openContextMenu: any
 }
 
 import { PreviewLink } from './Link'
@@ -27,6 +28,7 @@ export const Backlinks = (props: BacklinksProps) => {
     nodeById,
     linksByNodeId,
     nodeByCite,
+    openContextMenu,
   } = props
   const links = linksByNodeId[previewNode?.id] ?? []
 
@@ -59,6 +61,7 @@ export const Backlinks = (props: BacklinksProps) => {
                   href={`id:${link as string}`}
                   nodeById={nodeById}
                   setPreviewNode={setPreviewNode}
+                  openContextMenu={openContextMenu}
                 >
                   {nodeById[link as string]?.title}
                 </PreviewLink>
diff --git a/components/Sidebar/Link.tsx b/components/Sidebar/Link.tsx
index 16fc2ac..49fe9cf 100644
--- a/components/Sidebar/Link.tsx
+++ b/components/Sidebar/Link.tsx
@@ -35,6 +35,7 @@ export interface LinkProps {
   setSidebarHighlightedNode: any
   nodeByCite: NodeByCite
   nodeById: NodeById
+  openContextMenu: any
 }
 
 export interface NormalLinkProps {
@@ -44,6 +45,7 @@ export interface NormalLinkProps {
   href: any
   children: any
   setSidebarHighlightedNode: any
+  openContextMenu: any
 }
 
 import { hexToRGBA, getThemeColor } from '../../pages/index'
@@ -51,7 +53,8 @@ import noteStyle from './noteStyle'
 import { OrgImage } from './OrgImage'
 
 export const NormalLink = (props: NormalLinkProps) => {
-  const { setSidebarHighlightedNode, setPreviewNode, nodeById, href, children } = props
+  const { setSidebarHighlightedNode, setPreviewNode, nodeById, openContextMenu, href, children } =
+    props
   const { highlightColor } = useContext(ThemeContext)
 
   const theme = useTheme()
@@ -67,12 +70,16 @@ export const NormalLink = (props: NormalLinkProps) => {
       fontWeight={500}
       color={highlightColor}
       textDecoration="underline"
+      onContextMenu={(e) => {
+        e.preventDefault()
+        openContextMenu(nodeById[uri], e)
+      }}
       onClick={() => setPreviewNode(nodeById[uri])}
       // TODO  don't hardcode the opacitycolor
       _hover={{ textDecoration: 'none', cursor: 'pointer', bgColor: coolHighlightColor + '22' }}
       _focus={{ outlineColor: highlightColor }}
     >
-      {nodeById[uri]?.title}
+      {children}
     </Text>
   )
 }
@@ -86,6 +93,7 @@ export const PreviewLink = (props: LinkProps) => {
     previewNode,
     setPreviewNode,
     nodeByCite,
+    openContextMenu,
   } = props
   // TODO figure out how to properly type this
   // see https://github.com/rehypejs/rehype-react/issues/25
@@ -129,8 +137,9 @@ export const PreviewLink = (props: LinkProps) => {
             href={href}
             nodeById={nodeById}
             setPreviewNode={setPreviewNode}
+            openContextMenu={openContextMenu}
           >
-            {nodeById[id as string]?.title}
+            {children}
           </PreviewLink>
         ),
         img: ({ src }) => {
@@ -186,6 +195,7 @@ export const PreviewLink = (props: LinkProps) => {
                   href,
                   children,
                   nodeByCite,
+                  openContextMenu,
                 }}
               />
             </Box>
@@ -213,7 +223,9 @@ export const PreviewLink = (props: LinkProps) => {
                 maxHeight={300}
                 overflow="scroll"
               >
-                <Box sx={noteStyle}>{orgText}</Box>
+                <Box color="black" sx={noteStyle}>
+                  {orgText}
+                </Box>
               </PopoverBody>
             </PopoverContent>
           </Portal>
diff --git a/components/Sidebar/Note.tsx b/components/Sidebar/Note.tsx
index ef2e2b2..e425559 100644
--- a/components/Sidebar/Note.tsx
+++ b/components/Sidebar/Note.tsx
@@ -16,6 +16,7 @@ export interface NoteProps {
   justification: number
   justificationList: string[]
   linksByNodeId: LinksByNodeId
+  openContextMenu: any
 }
 
 export const Note = (props: NoteProps) => {
@@ -28,6 +29,7 @@ export const Note = (props: NoteProps) => {
     nodeByCite,
     setSidebarHighlightedNode,
     linksByNodeId,
+    openContextMenu,
   } = props
   return (
     <Box
@@ -50,6 +52,7 @@ export const Note = (props: NoteProps) => {
               nodeById,
               nodeByCite,
               setSidebarHighlightedNode,
+              openContextMenu,
             }}
           />
           <Backlinks
@@ -60,6 +63,7 @@ export const Note = (props: NoteProps) => {
               linksByNodeId,
               nodeByCite,
               setSidebarHighlightedNode,
+              openContextMenu,
             }}
           />
         </Flex>
diff --git a/components/Sidebar/Toolbar.tsx b/components/Sidebar/Toolbar.tsx
index f6f1e39..8741da5 100644
--- a/components/Sidebar/Toolbar.tsx
+++ b/components/Sidebar/Toolbar.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text, Flex, IconButton } from '@chakra-ui/react'
+import { Text, Flex, IconButton, ButtonGroup, Tooltip } from '@chakra-ui/react'
 import {
   BiAlignJustify,
   BiAlignLeft,
@@ -38,53 +38,65 @@ export const Toolbar = (props: ToolbarProps) => {
     nextPreviewNode,
   } = props
   return (
-    <Flex py={3} alignItems="center" justifyContent="space-between" pr={4}>
+    <Flex pb={3} alignItems="center" justifyContent="space-between" pl={1} pr={1}>
       <Flex>
-        <IconButton
-          variant="ghost"
-          icon={<ChevronLeftIcon />}
-          aria-label="Previous node"
-          disabled={!canUndo}
-          onClick={() => previousPreviewNode()}
-        />
-        <IconButton
-          variant="ghost"
-          icon={<ChevronRightIcon />}
-          aria-label="Next node"
-          disabled={!canRedo}
-          onClick={() => nextPreviewNode()}
-        />
+        <ButtonGroup isAttached>
+          <Tooltip label="Go backward">
+            <IconButton
+              variant="subtle"
+              icon={<ChevronLeftIcon />}
+              aria-label="Previous node"
+              disabled={!canUndo}
+              onClick={() => previousPreviewNode()}
+            />
+          </Tooltip>
+          <Tooltip label="Go forward">
+            <IconButton
+              variant="subtle"
+              icon={<ChevronRightIcon />}
+              aria-label="Next node"
+              disabled={!canRedo}
+              onClick={() => nextPreviewNode()}
+            />
+          </Tooltip>
+        </ButtonGroup>
       </Flex>
       <Flex>
-        <IconButton
-          variant="ghost"
-          aria-label="Justify content"
-          icon={
-            [
-              <BiAlignJustify key="justify" />,
-              <BiAlignLeft key="left" />,
-              <BiAlignRight key="right" />,
-              <BiAlignMiddle key="center" />,
-            ][justification]
-          }
-          onClick={() => setJustification((curr: number) => (curr + 1) % 4)}
-        />
-        <IconButton
-          variant="ghost"
-          aria-label="Indent Text"
-          icon={<BiRightIndent />}
-          onClick={() => {
-            setIndent((curr: number) => (curr ? 0 : 1))
-          }}
-        />
-        <IconButton
-          variant="ghost"
-          aria-label="Change font"
-          icon={<BiFont />}
-          onClick={() => {
-            setFont((curr: string) => (curr === 'sans serif' ? 'serif' : 'sans serif'))
-          }}
-        />
+        <Tooltip label="Justify content">
+          <IconButton
+            variant="subtle"
+            aria-label="Justify content"
+            icon={
+              [
+                <BiAlignJustify key="justify" />,
+                <BiAlignLeft key="left" />,
+                <BiAlignRight key="right" />,
+                <BiAlignMiddle key="center" />,
+              ][justification]
+            }
+            onClick={() => setJustification((curr: number) => (curr + 1) % 4)}
+          />
+        </Tooltip>
+        {/* <Tooltip label="Indent trees">
+          <IconButton
+            variant="subtle"
+            aria-label="Indent Text"
+            icon={<BiRightIndent />}
+            onClick={() => {
+              setIndent((curr: number) => (curr ? 0 : 1))
+            }}
+          />
+        </Tooltip>
+        <Tooltip label="Switch betwwen sans and serif">
+          <IconButton
+            variant="subtle"
+            aria-label="Change font"
+            icon={<BiFont />}
+            onClick={() => {
+              setFont((curr: string) => (curr === 'sans serif' ? 'serif' : 'sans serif'))
+            }}
+          />
+        </Tooltip> */}
       </Flex>
     </Flex>
   )
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index 2e32f4f..cbc0cc9 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -3,15 +3,19 @@ import React, { useContext, useEffect, useRef, useState } from 'react'
 import { Toolbar } from './Toolbar'
 import { Note } from './Note'
 
-import { Button, Slide, VStack, Flex, Heading, Box, IconButton } from '@chakra-ui/react'
+import { Button, Slide, VStack, Flex, Heading, Box, IconButton, Tooltip } from '@chakra-ui/react'
+import { Collapse } from './Collapse'
 import { Scrollbars } from 'react-custom-scrollbars-2'
-import { ChevronLeftIcon, ChevronRightIcon, HamburgerIcon } from '@chakra-ui/icons'
-import { BiFile } from 'react-icons/bi'
+import { ChevronLeftIcon, ChevronRightIcon, CloseIcon, HamburgerIcon } from '@chakra-ui/icons'
+import { BiDotsVerticalRounded, BiFile, BiNetworkChart } from 'react-icons/bi'
+import { BsReverseLayoutSidebarInsetReverse } from 'react-icons/bs'
 
 import { GraphData, NodeObject, LinkObject } from 'force-graph'
 import { OrgRoamNode } from '../../api'
 import { ThemeContext } from '../../util/themecontext'
-import { LinksByNodeId, NodeByCite, NodeById } from '../../pages/index'
+import { LinksByNodeId, NodeByCite, NodeById, Scope } from '../../pages/index'
+import { Resizable } from 're-resizable'
+import { usePersistantState } from '../../util/persistant-state'
 
 export interface SidebarProps {
   isOpen: boolean
@@ -28,6 +32,10 @@ export interface SidebarProps {
   resetPreviewNode: any
   previousPreviewNode: any
   nextPreviewNode: any
+  openContextMenu: any
+  scope: Scope
+  setScope: any
+  windowWidth: number
 }
 
 const Sidebar = (props: SidebarProps) => {
@@ -46,10 +54,15 @@ const Sidebar = (props: SidebarProps) => {
     resetPreviewNode,
     previousPreviewNode,
     nextPreviewNode,
+    openContextMenu,
+    scope,
+    setScope,
+    windowWidth,
   } = props
 
   const { highlightColor } = useContext(ThemeContext)
   const [previewRoamNode, setPreviewRoamNode] = useState<OrgRoamNode>()
+  const [sidebarWidth, setSidebarWidth] = usePersistantState<number>('sidebarWidth', 400)
 
   useEffect(() => {
     if (!previewNode?.id) {
@@ -67,25 +80,58 @@ const Sidebar = (props: SidebarProps) => {
   //maybe want to close it when clicking outside, but not sure
   //const outsideClickRef = useRef();
   return (
-    <Slide
-      direction="right"
+    <Collapse
+      animateOpacity={false}
+      dimension="width"
       in={isOpen}
-      style={{ width: 'clamp(400px, 30%, 500px)' }}
+      //style={{ position: 'relative' }}
       unmountOnExit
+      startingSize={0}
+      style={{ height: '100vh' }}
     >
-      <Flex flexDirection="row" height="100%">
-        <Box pl={2} color="black" bg="alt.100" w="100%" paddingBottom={15}>
+      <Resizable
+        size={{ height: '100%', width: sidebarWidth }}
+        onResizeStop={(e, direction, ref, d) => {
+          setSidebarWidth((curr: number) => curr + d.width)
+        }}
+        enable={{
+          top: false,
+          right: false,
+          bottom: false,
+          left: true,
+          topRight: false,
+          bottomRight: false,
+          bottomLeft: false,
+          topLeft: false,
+        }}
+        minWidth="220px"
+        maxWidth={windowWidth - 200}
+      >
+        <Box pl={2} color="black" h="100%" bg="alt.100" width="100%">
           <Flex
-            justifyContent="space-between"
-            paddingTop={4}
+            whiteSpace="nowrap"
+            overflow="hidden"
+            textOverflow="ellipsis"
             pl={4}
-            pb={5}
-            pr={3}
-            alignItems="top"
+            alignItems="center"
             color="black"
+            width="100%"
           >
-            <Flex alignItems="center" whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden">
-              <BiFile />
+            <BiFile
+              onContextMenu={(e) => {
+                e.preventDefault()
+                openContextMenu(previewNode, e)
+              }}
+            />
+            <Flex
+              whiteSpace="nowrap"
+              textOverflow="ellipsis"
+              overflow="hidden"
+              onContextMenu={(e) => {
+                e.preventDefault()
+                openContextMenu(previewNode, e)
+              }}
+            >
               <Heading
                 pl={2}
                 whiteSpace="nowrap"
@@ -99,13 +145,23 @@ const Sidebar = (props: SidebarProps) => {
                 {previewRoamNode?.title}
               </Heading>
             </Flex>
-            <IconButton
-              // eslint-disable-next-line react/jsx-no-undef
-              icon={<HamburgerIcon />}
-              aria-label="Close file-viewer"
-              variant="link"
-              onClick={onClose}
-            />
+            <Flex flexDir="row" ml="auto">
+              <IconButton
+                // eslint-disable-next-line react/jsx-no-undef
+                m={1}
+                icon={<BiDotsVerticalRounded />}
+                aria-label="Options"
+                variant="subtle"
+                onClick={(e) => {
+                  openContextMenu(previewNode, e, {
+                    left: undefined,
+                    top: 12,
+                    right: -windowWidth + 20,
+                    bottom: undefined,
+                  })
+                }}
+              />
+            </Flex>
           </Flex>
           <Toolbar
             {...{
@@ -132,7 +188,7 @@ const Sidebar = (props: SidebarProps) => {
                   borderRadius: 10,
                   backgroundColor: highlightColor,
                 }}
-                color="black"
+                color="alt.100"
                 {...props}
               />
             )}
@@ -148,13 +204,14 @@ const Sidebar = (props: SidebarProps) => {
                   justification,
                   justificationList,
                   linksByNodeId,
+                  openContextMenu,
                 }}
               />
             </VStack>
           </Scrollbars>
         </Box>
-      </Flex>
-    </Slide>
+      </Resizable>
+    </Collapse>
   )
 }