chore: move filter panel to separate component

1 files changed, 11 insertions, 308 deletions

diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index f03339b..2cb5b5d 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -57,6 +57,8 @@ import {
   colorList,
 } from './config'
 
+import FilterPanel from './FilterPanel'
+
 import { ThemeContext } from '../util/themecontext'
 import { usePersistantState } from '../util/persistant-state'
 
@@ -194,138 +196,15 @@ export const Tweaks = (props: TweakProps) => {
               <Heading size="sm">Filter</Heading>
             </AccordionButton>
             <AccordionPanel>
-              <VStack
-                spacing={2}
-                justifyContent="flex-start"
-                divider={<StackDivider borderColor="gray.500" />}
-                align="stretch"
-                paddingLeft={7}
-                color="gray.800"
-              >
-                <Flex alignItems="center" justifyContent="space-between">
-                  <Text>Link children to...</Text>
-                  <Menu isLazy placement="right">
-                    <MenuButton
-                      as={Button}
-                      rightIcon={<ChevronDownIcon />}
-                      colorScheme=""
-                      color="black"
-                    >
-                      {(() => {
-                        switch (filter.parent) {
-                          case 'parent':
-                            return <Text>File</Text>
-                          case 'heading':
-                            return <Text>Heading</Text>
-                          default:
-                            return <Text>Nothing</Text>
-                        }
-                      })()}
-                    </MenuButton>
-                    <Portal>
-                      {' '}
-                      <MenuList bgColor="gray.200" zIndex="popover">
-                        <MenuItem
-                          onClick={() =>
-                            setFilter((curr: typeof initialFilter) => ({ ...curr, parent: '' }))
-                          }
-                        >
-                          Nothing
-                        </MenuItem>
-                        <MenuItem
-                          onClick={() =>
-                            setFilter((curr: typeof initialFilter) => ({
-                              ...curr,
-                              parent: 'parent',
-                            }))
-                          }
-                        >
-                          Parent file node
-                        </MenuItem>
-                        <MenuItem
-                          onClick={() =>
-                            setFilter((curr: typeof initialFilter) => ({
-                              ...curr,
-                              parent: 'heading',
-                            }))
-                          }
-                        >
-                          Next highest heading node
-                        </MenuItem>
-                      </MenuList>
-                    </Portal>
-                  </Menu>
-                </Flex>
-                <Flex justifyContent="space-between">
-                  <Text>Orphans</Text>
-                  <Switch
-                    onChange={() => {
-                      setFilter((curr: typeof initialFilter) => {
-                        return { ...curr, orphans: !curr.orphans }
-                      })
-                    }}
-                    isChecked={filter.orphans}
-                  ></Switch>
-                </Flex>
-                <Flex justifyContent="space-between">
-                  <Text>Citations without note files</Text>
-                  <Switch
-                    onChange={() => {
-                      setFilter({ ...filter, filelessCites: !filter.filelessCites })
-                    }}
-                    isChecked={filter.filelessCites}
-                  ></Switch>
-                </Flex>
-                <Flex justifyContent="space-between">
-                  <Text>Non-existant nodes</Text>
-                  <Switch
-                    onChange={() => {
-                      setTagColors({ ...tagColors, bad: 'white' })
-                      setFilter({ ...filter, bad: !filter.bad })
-                    }}
-                    isChecked={filter.bad}
-                  ></Switch>
-                </Flex>
-              </VStack>
-              <Accordion padding={0} allowToggle allowMultiple paddingLeft={3}>
-                <AccordionItem>
-                  <AccordionButton>
-                    Tag filters
-                    <AccordionIcon />
-                  </AccordionButton>
-                  <AccordionPanel pr={0} mr={0}>
-                    <TagPanel
-                      highlightColor={highlightColor}
-                      filter={filter}
-                      setFilter={setFilter}
-                      tags={tags}
-                      mode="blacklist"
-                    />
-                    <TagPanel
-                      highlightColor={highlightColor}
-                      filter={filter}
-                      setFilter={setFilter}
-                      tags={tags}
-                      mode="whitelist"
-                    />
-                  </AccordionPanel>
-                </AccordionItem>
-                <AccordionItem>
-                  <AccordionButton>
-                    Tag Colors
-                    <AccordionIcon />
-                  </AccordionButton>
-                  <AccordionPanel pr={0} mr={0}>
-                    <TagColorPanel
-                      tags={tags}
-                      colorList={colorList}
-                      tagColors={tagColors}
-                      setTagColors={setTagColors}
-                      highlightColor={highlightColor}
-                    />
-                  </AccordionPanel>
-                </AccordionItem>
-              </Accordion>
+              <FilterPanel
+                filter={filter}
+                setFilter={setFilter}
+                tagColors={tagColors}
+                setTagColors={setTagColors}
+                highlightColor={highlightColor}
+                colorList={colorList}
+                tags={tags}
+              />
             </AccordionPanel>
           </AccordionItem>
           <AccordionItem>
@@ -1540,179 +1419,3 @@ export const ColorMenu = (props: ColorMenuProps) => {
     </Flex>
   )
 }
-
-export interface TagPanelProps {
-  tags: string[]
-  filter: typeof initialFilter
-  setFilter: any
-  highlightColor: string
-  mode: string
-}
-
-export const TagPanel = (props: TagPanelProps) => {
-  const { filter, setFilter, tags, highlightColor, mode } = props
-  const tagArray = tags.map((tag) => {
-    return { value: tag, label: tag }
-  })
-
-  const currentTags = mode === 'blacklist' ? 'tagsBlacklist' : 'tagsWhitelist'
-  const [selectedItems, setSelectedItems] = useState<typeof tagArray>(
-    filter[currentTags].map((tag) => {
-      return { value: tag, label: tag }
-    }),
-  )
-
-  return (
-    <CUIAutoComplete
-      items={tagArray}
-      label={'Add tag to ' + mode}
-      placeholder=" "
-      onCreateItem={(item) => null}
-      disableCreateItem={true}
-      selectedItems={selectedItems}
-      onSelectedItemsChange={(changes) => {
-        if (changes.selectedItems) {
-          setSelectedItems(changes.selectedItems)
-          setFilter({ ...filter, [currentTags]: changes.selectedItems.map((item) => item.value) })
-        }
-      }}
-      listItemStyleProps={{ overflow: 'hidden' }}
-      highlightItemBg="gray.400"
-      toggleButtonStyleProps={{ variant: 'outline' }}
-      inputStyleProps={{
-        focusBorderColor: highlightColor,
-        color: 'gray.800',
-        borderColor: 'gray.600',
-      }}
-      tagStyleProps={{
-        rounded: 'full',
-        bg: highlightColor,
-        height: 8,
-        paddingLeft: 4,
-        fontWeight: 'bold',
-      }}
-      hideToggleButton
-      itemRenderer={(selected) => selected.label}
-    />
-  )
-}
-
-export interface TagColorPanelProps {
-  tags: string[]
-  highlightColor: string
-  colorList: string[]
-  tagColors: TagColors
-  setTagColors: any
-}
-export const TagColorPanel = (props: TagColorPanelProps) => {
-  const { colorList, tagColors, setTagColors, highlightColor, tags } = props
-  const tagArray = tags.map((tag) => {
-    return { value: tag, label: tag }
-  })
-
-  const [selectedItems, setSelectedItems] = useState<typeof tagArray>(
-    Object.keys(tagColors).map((tag) => {
-      return { value: tag, label: tag }
-    }),
-  )
-
-  return (
-    <Box>
-      <CUIAutoComplete
-        items={tagArray}
-        label="Add tag to filter"
-        placeholder=" "
-        disableCreateItem={true}
-        selectedItems={selectedItems}
-        onSelectedItemsChange={(changes) => {
-          if (changes.selectedItems) {
-            setSelectedItems(Array.from(new Set(changes.selectedItems)))
-            setTagColors(
-              Object.fromEntries(
-                Array.from(new Set(changes.selectedItems)).map((item) => {
-                  return [item.label, tagColors[item.label] ?? 'gray.600']
-                }),
-              ),
-            )
-          }
-        }}
-        listItemStyleProps={{ overflow: 'hidden' }}
-        highlightItemBg="gray.400"
-        toggleButtonStyleProps={{ variant: 'outline' }}
-        inputStyleProps={{
-          focusBorderColor: highlightColor,
-          color: 'gray.800',
-          borderColor: 'gray.600',
-        }}
-        tagStyleProps={{
-          display: 'none',
-          rounded: 'full',
-          bg: highlightColor,
-          height: 8,
-          paddingLeft: 4,
-          fontWeight: 'bold',
-        }}
-        hideToggleButton
-        itemRenderer={(selected) => selected.label}
-      />
-      <VStack
-        spacing={2}
-        justifyContent="flex-start"
-        divider={<StackDivider borderColor="gray.500" />}
-        align="stretch"
-        color="gray.800"
-      >
-        {Object.keys(tagColors).map((tag) => {
-          return (
-            <Flex key={tag} alignItems="center" justifyContent="space-between" width="100%" pl={2}>
-              <Box width="100%">
-                <Text fontWeight="bold">{tag}</Text>
-              </Box>
-              <Menu isLazy placement="right">
-                <MenuButton as={Button} colorScheme="" color="black">
-                  {<Box bgColor={tagColors[tag]} borderRadius="sm" height={6} width={6}></Box>}
-                </MenuButton>
-                <Portal>
-                  {' '}
-                  <MenuList minW={10} zIndex="popover" bgColor="gray.200">
-                    {colorList.map((color: string) => (
-                      <MenuItem
-                        key={color}
-                        onClick={() =>
-                          setTagColors({
-                            ...tagColors,
-                            [tag]: color,
-                          })
-                        }
-                        justifyContent="space-between"
-                        alignItems="center"
-                        display="flex"
-                      >
-                        <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box>
-                      </MenuItem>
-                    ))}
-                  </MenuList>
-                </Portal>
-              </Menu>
-              <IconButton
-                aria-label="Delete tag color"
-                variant="ghost"
-                icon={<DeleteIcon />}
-                onClick={() => {
-                  setTagColors(
-                    Object.fromEntries(
-                      Array.from(new Set(selectedItems)).map((item) => {
-                        return [item.label, tagColors[item.label] ?? 'gray.600']
-                      }),
-                    ),
-                  )
-                  setSelectedItems(selectedItems.filter((item) => item.value !== tag))
-                }}
-              />
-            </Flex>
-          )
-        })}
-      </VStack>
-    </Box>
-  )
-}