From 546a88ec37073840e98ed689f7139d04985e861c Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <hello@tefkah.com>
Date: Mon, 11 Oct 2021 01:13:10 +0200
Subject: feat(preview): ui redo

---
 components/Sidebar/Backlinks.tsx     |   3 +
 components/Sidebar/Link.tsx          |  20 ++++-
 components/Sidebar/Note.tsx          |   4 +
 components/Sidebar/Toolbar.tsx       | 102 +++++++++++++-----------
 components/Sidebar/index.tsx         | 109 +++++++++++++++++++-------
 components/Tweaks/BehaviorPanel.tsx  |   1 +
 components/Tweaks/SliderWithInfo.tsx |   2 +-
 components/Tweaks/index.tsx          |  27 +++----
 components/config.ts                 |   5 +-
 components/contextmenu.tsx           | 146 ++++++++++++++++++-----------------
 10 files changed, 258 insertions(+), 161 deletions(-)

(limited to 'components')

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>
   )
 }
 
diff --git a/components/Tweaks/BehaviorPanel.tsx b/components/Tweaks/BehaviorPanel.tsx
index 651396d..5d61730 100644
--- a/components/Tweaks/BehaviorPanel.tsx
+++ b/components/Tweaks/BehaviorPanel.tsx
@@ -11,6 +11,7 @@ import {
   VStack,
   Text,
   Box,
+  Switch,
 } from '@chakra-ui/react'
 import React from 'react'
 import { initialBehavior, initialMouse } from '../config'
diff --git a/components/Tweaks/SliderWithInfo.tsx b/components/Tweaks/SliderWithInfo.tsx
index f70faae..9d6903a 100644
--- a/components/Tweaks/SliderWithInfo.tsx
+++ b/components/Tweaks/SliderWithInfo.tsx
@@ -30,7 +30,7 @@ export const SliderWithInfo = ({
   const { onChange, label, infoText } = rest
   const { highlightColor } = useContext(ThemeContext)
   return (
-    <Box key={label}>
+    <Box key={label} pt={1} pb={2}>
       <Box display="flex" alignItems="flex-end">
         <Text>{label}</Text>
         {infoText && <InfoTooltip infoText={infoText} />}
diff --git a/components/Tweaks/index.tsx b/components/Tweaks/index.tsx
index c60e670..33f11ee 100644
--- a/components/Tweaks/index.tsx
+++ b/components/Tweaks/index.tsx
@@ -68,6 +68,7 @@ export const Tweaks = (props: TweakProps) => {
     tagColors,
     setTagColors,
   } = props
+
   const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false)
   const { highlightColor, setHighlightColor } = useContext(ThemeContext)
 
@@ -75,12 +76,12 @@ export const Tweaks = (props: TweakProps) => {
     <Box
       position="absolute"
       zIndex="overlay"
-      marginTop={10}
-      marginLeft={10}
+      marginTop={0}
+      marginLeft={0}
       display={showTweaks ? 'none' : 'block'}
     >
       <IconButton
-        variant="ghost"
+        variant="subtle"
         aria-label="Settings"
         icon={<SettingsIcon />}
         onClick={() => setShowTweaks(true)}
@@ -88,17 +89,17 @@ export const Tweaks = (props: TweakProps) => {
     </Box>
   ) : (
     <Box
+      position="absolute"
       bg="alt.100"
       w="xs"
-      marginTop={10}
-      marginLeft={10}
-      borderRadius="xl"
+      marginTop={2}
+      marginLeft={2}
+      borderRadius="lg"
       paddingBottom={5}
-      zIndex={300}
-      position="relative"
+      zIndex="overlay"
       boxShadow="xl"
-      maxH={0.92 * globalThis.innerHeight}
-      marginBottom={10}
+      maxH={'95vh'}
+      fontSize="sm"
     >
       <Box
         display="flex"
@@ -108,7 +109,7 @@ export const Tweaks = (props: TweakProps) => {
         paddingTop={1}
       >
         <Tooltip label={'Switch to ' + threeDim ? '2D' : '3D' + ' view'}>
-          <Button onClick={() => setThreeDim(!threeDim)} variant="ghost" zIndex="overlay">
+          <Button onClick={() => setThreeDim(!threeDim)} variant="subtle" zIndex="overlay">
             {threeDim ? '3D' : '2D'}
           </Button>
         </Tooltip>
@@ -124,7 +125,7 @@ export const Tweaks = (props: TweakProps) => {
                 setPhysics(initialPhysics)
                 setBehavior(initialBehavior)
               }}
-              variant="none"
+              variant="subtle"
               size="sm"
             />
           </Tooltip>
@@ -132,7 +133,7 @@ export const Tweaks = (props: TweakProps) => {
             size="sm"
             icon={<CloseIcon />}
             aria-label="Close Tweak Panel"
-            variant="ghost"
+            variant="subtle"
             onClick={() => setShowTweaks(false)}
           />
         </Box>
diff --git a/components/config.ts b/components/config.ts
index e1923f2..fd77ba3 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -58,13 +58,13 @@ export const initialVisuals = {
   nodeOpacity: 1,
   nodeResolution: 12,
   labels: 2,
-  labelScale: 1.5,
+  labelScale: 1,
   labelFontSize: 13,
   labelLength: 40,
   labelWordWrap: 25,
   labelLineSpace: 1,
   highlight: true,
-  highlightNodeSize: 2,
+  highlightNodeSize: 1.2,
   highlightLinkSize: 2,
   highlightFade: 0.8,
   highlightAnim: true,
@@ -123,6 +123,7 @@ export const initialMouse = {
   follow: 'never',
   context: 'right',
   preview: 'click',
+  backgroundExitsLocal: false,
 }
 
 export const colorList = [
diff --git a/components/contextmenu.tsx b/components/contextmenu.tsx
index 73758a5..bff4861 100644
--- a/components/contextmenu.tsx
+++ b/components/contextmenu.tsx
@@ -48,20 +48,21 @@ import { BiNetworkChart } from 'react-icons/bi'
 
 export default interface ContextMenuProps {
   background: Boolean
-  node?: OrgRoamNode
+  target: OrgRoamNode | null
   nodeType?: string
-  coordinates: number[]
+  coordinates: { [direction: string]: number }
   handleLocal: (node: OrgRoamNode, add: string) => void
   menuClose: () => void
   scope: { nodeIds: string[] }
   webSocket: any
   setPreviewNode: any
+  contextMenuRef: any
 }
 
 export const ContextMenu = (props: ContextMenuProps) => {
   const {
     background,
-    node,
+    target,
     nodeType,
     coordinates,
     handleLocal,
@@ -69,59 +70,65 @@ export const ContextMenu = (props: ContextMenuProps) => {
     scope,
     webSocket,
     setPreviewNode,
+    contextMenuRef,
   } = props
   const { isOpen, onOpen, onClose } = useDisclosure()
   const copyRef = useRef<any>()
   return (
     <>
-      <Box
-        position="absolute"
-        zIndex="overlay"
-        left={coordinates[0] + 10}
-        top={coordinates[1] - 10}
-        padding={5}
-      >
-        <Menu closeOnBlur={false} defaultIsOpen onClose={() => menuClose()}>
-          <MenuList zIndex="overlay" bgColor="alt.100" borderColor="gray.500" maxWidth="xs">
-            {node && (
-              <>
-                <Heading size="sm" isTruncated px={3} py={1}>
-                  {node.title}
-                </Heading>
-                <MenuDivider borderColor="gray.500" />
-              </>
-            )}
-            {scope.nodeIds.length !== 0 && (
-              <>
-                <MenuItem onClick={() => handleLocal(node!, 'add')} icon={<PlusSquareIcon />}>
-                  Expand local graph at node
-                </MenuItem>
-                <MenuItem onClick={() => handleLocal(node!, 'replace')} icon={<ViewIcon />}>
-                  Open local graph for this node
-                </MenuItem>
-              </>
-            )}
-            {!node?.properties.FILELESS ? (
-              <MenuItem
-                icon={<EditIcon />}
-                onClick={() => openNodeInEmacs(node as OrgRoamNode, webSocket)}
-              >
-                Open in Emacs
+      <Menu defaultIsOpen closeOnBlur={false} onClose={() => menuClose()}>
+        <MenuList
+          zIndex="overlay"
+          bgColor="white"
+          color="black"
+          borderColor="gray.500"
+          maxWidth="xs"
+          position="absolute"
+          left={coordinates.left}
+          top={coordinates.top}
+          right={coordinates.right}
+          bottom={coordinates.bottom}
+          fontSize="xs"
+        >
+          {target && (
+            <>
+              <Heading size="xs" isTruncated px={3} py={1}>
+                {target.title}
+              </Heading>
+              <MenuDivider borderColor="gray.500" />
+            </>
+          )}
+          {scope.nodeIds.length !== 0 && (
+            <>
+              <MenuItem onClick={() => handleLocal(target!, 'add')} icon={<PlusSquareIcon />}>
+                Expand local graph at node
               </MenuItem>
-            ) : (
-              <MenuItem icon={<AddIcon />} onClick={() => createNodeInEmacs(node, webSocket)}>
-                Create node
+              <MenuItem onClick={() => handleLocal(target!, 'replace')} icon={<BiNetworkChart />}>
+                Open local graph for this node
               </MenuItem>
-            )}
-            {node?.properties.ROAM_REFS && (
-              <MenuItem icon={<ExternalLinkIcon />}>Open in Zotero</MenuItem>
-            )}
-            {scope.nodeIds.length === 0 && (
-              <MenuItem icon={<BiNetworkChart />} onClick={() => handleLocal(node!, 'replace')}>
-                Open local graph
-              </MenuItem>
-            )}
-            {/* Doesn't work at the moment
+            </>
+          )}
+          {!target?.properties?.FILELESS ? (
+            <MenuItem
+              icon={<EditIcon />}
+              onClick={() => openNodeInEmacs(target as OrgRoamNode, webSocket)}
+            >
+              Open in Emacs
+            </MenuItem>
+          ) : (
+            <MenuItem icon={<AddIcon />} onClick={() => createNodeInEmacs(target, webSocket)}>
+              Create node
+            </MenuItem>
+          )}
+          {target?.properties?.ROAM_REFS && (
+            <MenuItem icon={<ExternalLinkIcon />}>Open in Zotero</MenuItem>
+          )}
+          {scope.nodeIds.length === 0 && (
+            <MenuItem icon={<BiNetworkChart />} onClick={() => handleLocal(target!, 'replace')}>
+              Open local graph
+            </MenuItem>
+          )}
+          {/* Doesn't work at the moment
                             <MenuItem closeOnSelect={false} closeOnBlur={false}>
                             <Box _hover={{ bg: 'gray.200' }} width="100%">
                                 <Popover
@@ -151,27 +158,26 @@ export const ContextMenu = (props: ContextMenuProps) => {
                             </Box>
                         </MenuItem> */}
 
+          <MenuItem
+            icon={<ViewIcon />}
+            onClick={() => {
+              setPreviewNode(target)
+            }}
+          >
+            Preview
+          </MenuItem>
+          {target?.level === 0 && (
             <MenuItem
-              icon={<ViewIcon />}
-              onClick={() => {
-                setPreviewNode(node)
-              }}
+              closeOnSelect={false}
+              icon={<DeleteIcon color="red.500" />}
+              color="red.500"
+              onClick={onOpen}
             >
-              Preview
+              Permenantly delete note
             </MenuItem>
-            {node?.level === 0 && (
-              <MenuItem
-                closeOnSelect={false}
-                icon={<DeleteIcon color="red.500" />}
-                color="red.500"
-                onClick={onOpen}
-              >
-                Permenantly delete note
-              </MenuItem>
-            )}
-          </MenuList>
-        </Menu>
-      </Box>
+          )}
+        </MenuList>
+      </Menu>
       <Modal isCentered isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
         <ModalContent zIndex="popover">
@@ -180,8 +186,8 @@ export const ContextMenu = (props: ContextMenuProps) => {
           <ModalBody>
             <VStack spacing={4} display="flex" alignItems="flex-start">
               <Text>This will permanently delete your note:</Text>
-              <Text fontWeight="bold">{node?.title}</Text>
-              {node?.level !== 0 && (
+              <Text fontWeight="bold">{target?.title}</Text>
+              {target?.level !== 0 && (
                 <Text>
                   This will only delete the from this heading until but not including the next node.
                   Your parent file and all other nodes will not be deleted.
@@ -207,7 +213,7 @@ export const ContextMenu = (props: ContextMenuProps) => {
               ml={3}
               onClick={() => {
                 console.log('aaaaa')
-                deleteNodeInEmacs(node!, webSocket)
+                deleteNodeInEmacs(target!, webSocket)
                 onClose()
                 menuClose()
               }}
-- 
cgit v1.2.3