chore: move tweaks to separate subfolder

1 files changed, 237 insertions, 0 deletions

diff --git a/components/Tweaks/ColorsPanel.tsx b/components/Tweaks/ColorsPanel.tsx
new file mode 100644
index 0000000..de0a2b8
--- /dev/null
+++ b/components/Tweaks/ColorsPanel.tsx
@@ -0,0 +1,237 @@
+import { ArrowRightIcon, ChevronDownIcon, RepeatIcon } from '@chakra-ui/icons'
+import {
+  Text,
+  Box,
+  Flex,
+  IconButton,
+  StackDivider,
+  Tooltip,
+  VStack,
+  MenuButton,
+  Menu,
+  Portal,
+  MenuList,
+  MenuOptionGroup,
+  MenuItemOption,
+  Button,
+  MenuItem,
+} from '@chakra-ui/react'
+import React from 'react'
+import { ColorMenu } from './ColorMenu'
+import { colorList, initialVisuals } from '../config'
+
+export interface ColorsPanelProps {
+  visuals: typeof initialVisuals
+  setVisualsCallback: any
+  highlightColor: string
+  setHighlightColor: any
+}
+
+export const ColorsPanel = (props: ColorsPanelProps) => {
+  const { visuals, setVisualsCallback, highlightColor, setHighlightColor } = props
+
+  return (
+    <VStack
+      spacing={2}
+      justifyContent="flex-start"
+      divider={<StackDivider borderColor="gray.500" />}
+      align="stretch"
+      color="gray.800"
+    >
+      <Box>
+        <Flex alignItems="center" justifyContent="space-between">
+          <Text>Nodes</Text>
+          <Tooltip label="Shuffle node colors">
+            <IconButton
+              aria-label="Shuffle node colors"
+              size="sm"
+              icon={<RepeatIcon />}
+              variant="ghost"
+              onClick={() => {
+                const arr = visuals.nodeColorScheme ?? []
+                setVisualsCallback({
+                  ...visuals,
+                  //shuffle that guy
+                  //definitely thought of this myself
+                  nodeColorScheme: arr
+                    .map((x: any) => [Math.random(), x])
+                    .sort(([a], [b]) => a - b)
+                    .map(([_, x]) => x),
+                })
+              }}
+            />
+          </Tooltip>
+          <Tooltip label="Cycle node colors">
+            <IconButton
+              aria-label="Shift node colors"
+              icon={<ArrowRightIcon />}
+              size="sm"
+              variant="ghost"
+              onClick={() => {
+                const arr = visuals.nodeColorScheme ?? []
+                setVisualsCallback({
+                  ...visuals,
+                  nodeColorScheme: [...arr.slice(1, arr.length), arr[0]],
+                })
+              }}
+            />
+          </Tooltip>
+          <Menu isLazy placement="right" closeOnSelect={false} matchWidth>
+            <MenuButton
+              width={20}
+              as={Button}
+              colorScheme=""
+              color="black"
+              rightIcon={<ChevronDownIcon />}
+            >
+              <Flex height={6} width={6} flexDirection="column" flexWrap="wrap">
+                {visuals.nodeColorScheme.map((color) => (
+                  <Box key={color} bgColor={color} flex="1 1 8px" borderRadius="2xl"></Box>
+                ))}
+              </Flex>
+            </MenuButton>
+            <Portal>
+              {' '}
+              <MenuList minW={10} zIndex="popover" bgColor="gray.200">
+                <MenuOptionGroup
+                  width={500}
+                  type="checkbox"
+                  defaultValue={visuals.nodeColorScheme}
+                  onChange={(colors) => {
+                    if (!colors.length) {
+                      return
+                    }
+                    setVisualsCallback({ ...visuals, nodeColorScheme: colors })
+                  }}
+                >
+                  {colorList.map((color) => (
+                    <MenuItemOption
+                      key={color}
+                      isChecked={visuals.nodeColorScheme.some((c) => c === color)}
+                      value={color}
+                      isDisabled={
+                        visuals.nodeColorScheme.length === 1 && visuals.nodeColorScheme[0] === color
+                      }
+                    >
+                      <Box justifyContent="space-between" alignItems="center" display="flex">
+                        <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box>
+                      </Box>
+                    </MenuItemOption>
+                  ))}
+                </MenuOptionGroup>
+              </MenuList>
+            </Portal>
+          </Menu>
+        </Flex>
+        <Flex alignItems="center" justifyContent="space-between">
+          <Text>Links</Text>
+          <Menu isLazy placement="right">
+            <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}>
+              <Box>
+                {visuals.linkColorScheme ? (
+                  <Box
+                    bgColor={visuals.linkColorScheme}
+                    borderRadius="sm"
+                    height={6}
+                    width={6}
+                  ></Box>
+                ) : (
+                  <Flex height={6} width={6} flexDirection="column" flexWrap="wrap">
+                    {visuals.nodeColorScheme.map((color) => (
+                      <Box key={color} bgColor={color} flex="1 1 8px" borderRadius="2xl"></Box>
+                    ))}
+                  </Flex>
+                )}
+              </Box>
+            </MenuButton>
+            <Portal>
+              {' '}
+              <MenuList minW={10} zIndex="popover" bgColor="gray.200">
+                <MenuItem
+                  onClick={() => setVisualsCallback({ ...visuals, linkColorScheme: '' })}
+                  justifyContent="space-between"
+                  alignItems="center"
+                  display="flex"
+                >
+                  <Flex height={6} width={6} flexDirection="column" flexWrap="wrap">
+                    {visuals.nodeColorScheme.map((color) => (
+                      <Box key={color} bgColor={color} flex="1 1 8px" borderRadius="2xl"></Box>
+                    ))}
+                  </Flex>
+                </MenuItem>
+                {colorList.map((color) => (
+                  <MenuItem
+                    key={color}
+                    onClick={() =>
+                      setVisualsCallback({
+                        ...visuals,
+                        linkColorScheme: color,
+                      })
+                    }
+                    justifyContent="space-between"
+                    alignItems="center"
+                    display="flex"
+                  >
+                    <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box>
+                  </MenuItem>
+                ))}
+              </MenuList>
+            </Portal>
+          </Menu>
+        </Flex>
+        <Flex alignItems="center" justifyContent="space-between">
+          <Text>Accent</Text>
+          <Menu isLazy placement="right">
+            <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}>
+              {<Box bgColor={highlightColor} borderRadius="sm" height={6} width={6}></Box>}
+            </MenuButton>
+            <Portal>
+              {' '}
+              <MenuList minW={10} zIndex="popover" bgColor="gray.200">
+                {colorList.map((color) => (
+                  <MenuItem
+                    key={color}
+                    onClick={() => setHighlightColor(color)}
+                    justifyContent="space-between"
+                    alignItems="center"
+                    display="flex"
+                  >
+                    <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box>
+                  </MenuItem>
+                ))}
+              </MenuList>
+            </Portal>
+          </Menu>
+        </Flex>
+        <ColorMenu
+          colorList={colorList}
+          label="Link highlight"
+          setVisuals={setVisualsCallback}
+          value="linkHighlight"
+          visValue={visuals.linkHighlight}
+        />
+        <ColorMenu
+          colorList={colorList}
+          label="Node highlight"
+          setVisuals={setVisualsCallback}
+          value="nodeHighlight"
+          visValue={visuals.nodeHighlight}
+        />
+        <ColorMenu
+          colorList={colorList}
+          label="Background"
+          setVisuals={setVisualsCallback}
+          value="backgroundColor"
+          visValue={visuals.backgroundColor}
+        />
+        <ColorMenu
+          colorList={colorList}
+          label="Emacs node"
+          setVisuals={setVisualsCallback}
+          value="emacsNodeColor"
+          visValue={visuals.emacsNodeColor}
+        />
+      </Box>
+    </VStack>
+  )
+}