Merge pull request #101 from org-roam/sidebar

feat: Add file preview functionality

4 files changed, 82 insertions, 42 deletions

diff --git a/components/Tweaks/BehaviorPanel.tsx b/components/Tweaks/BehaviorPanel.tsx
index 8edb986..5d61730 100644
--- a/components/Tweaks/BehaviorPanel.tsx
+++ b/components/Tweaks/BehaviorPanel.tsx
@@ -10,6 +10,8 @@ import {
   StackDivider,
   VStack,
   Text,
+  Box,
+  Switch,
 } from '@chakra-ui/react'
 import React from 'react'
 import { initialBehavior, initialMouse } from '../config'
@@ -34,6 +36,26 @@ export const BehaviorPanel = (props: BehaviorPanelProps) => {
       color="gray.800"
     >
       <Flex alignItems="center" justifyContent="space-between">
+        <Text>Preview node</Text>
+        <Menu isLazy placement="right">
+          <MenuButton as={Button} rightIcon={<ChevronDownIcon />} colorScheme="" color="black">
+            <Text>
+              {mouse.preview ? mouse.preview[0]!.toUpperCase() + mouse.preview!.slice(1) : 'Never'}
+            </Text>
+          </MenuButton>
+          <Portal>
+            {' '}
+            <MenuList bgColor="gray.200" zIndex="popover">
+              <MenuItem onClick={() => setMouse({ ...mouse, preview: '' })}>Never</MenuItem>
+              <MenuItem onClick={() => setMouse({ ...mouse, preview: 'click' })}>Click</MenuItem>
+              <MenuItem onClick={() => setMouse({ ...mouse, preview: 'double' })}>
+                Double Click
+              </MenuItem>
+            </MenuList>
+          </Portal>
+        </Menu>
+      </Flex>
+      <Flex alignItems="center" justifyContent="space-between">
         <Flex>
           <Text>Expand Node</Text>
           <InfoTooltip infoText="View only the node and its direct neighbors" />
diff --git a/components/Tweaks/ColorMenu.tsx b/components/Tweaks/ColorMenu.tsx
index 3d90e36..b87f76b 100644
--- a/components/Tweaks/ColorMenu.tsx
+++ b/components/Tweaks/ColorMenu.tsx
@@ -9,6 +9,9 @@ import {
   MenuItem,
   MenuList,
   Portal,
+  PopoverTrigger,
+  PopoverContent,
+  Popover,
 } from '@chakra-ui/react'
 import React, { useCallback } from 'react'
 import { initialVisuals } from '../config'
@@ -19,10 +22,11 @@ export interface ColorMenuProps {
   value: string
   visValue: string
   setVisuals?: any
+  noEmpty?: boolean
 }
 
 export const ColorMenu = (props: ColorMenuProps) => {
-  const { label, colorList, value, visValue, setVisuals } = props
+  const { label, colorList, value, visValue, setVisuals, noEmpty } = props
 
   const clickCallback = useCallback(
     (color) =>
@@ -37,35 +41,48 @@ export const ColorMenu = (props: ColorMenuProps) => {
   return (
     <Flex alignItems="center" justifyContent="space-between">
       <Text>{label}</Text>
-      <Menu isLazy placement="right">
-        <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}>
-          {<Box bgColor={visValue} borderRadius="sm" height={6} width={6}></Box>}
-        </MenuButton>
+      <Popover isLazy placement="right">
+        <PopoverTrigger>
+          <Button colorScheme="" color="black" rightIcon={<ChevronDownIcon />}>
+            {<Box bgColor={visValue} borderRadius="sm" height={6} width={6}></Box>}
+          </Button>
+        </PopoverTrigger>
         <Portal>
-          {' '}
-          <MenuList minW={10} zIndex="popover" bgColor="gray.200">
-            <MenuItem
-              onClick={() => clickCallback('')}
-              justifyContent="space-between"
-              alignItems="center"
-              display="flex"
-            >
-              <Box height={6} width={6}></Box>
-            </MenuItem>
-            {colorList.map((color: string) => (
-              <MenuItem
-                key={color}
-                onClick={() => clickCallback(color)}
-                justifyContent="space-between"
-                alignItems="center"
-                display="flex"
-              >
-                <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box>
-              </MenuItem>
-            ))}
-          </MenuList>
+          <PopoverContent zIndex="tooltip" maxW={36} position="relative">
+            <Flex flexWrap="wrap" bgColor="gray.200">
+              {!noEmpty && (
+                <Box
+                  onClick={() => clickCallback('')}
+                  justifyContent="space-between"
+                  alignItems="center"
+                  display="flex"
+                  m={1}
+                >
+                  <Box
+                    height={6}
+                    width={6}
+                    borderColor="gray.600"
+                    borderRadius="xl"
+                    borderWidth={1}
+                  ></Box>
+                </Box>
+              )}
+              {colorList.map((color: string) => (
+                <Box
+                  m={1}
+                  key={color}
+                  onClick={() => clickCallback(color)}
+                  justifyContent="space-between"
+                  alignItems="center"
+                  display="flex"
+                >
+                  <Box bgColor={color} borderRadius="xl" height={6} width={6}></Box>
+                </Box>
+              ))}
+            </Flex>
+          </PopoverContent>
         </Portal>
-      </Menu>
+      </Popover>
     </Flex>
   )
 }
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..afd0ea7 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={1}
+      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={10}
       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>