feature: tag filtering lotic and ui

2 files changed, 76 insertions, 0 deletions

diff --git a/components/config.ts b/components/config.ts
index 1181f65..e9471f8 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -35,6 +35,7 @@ export const initialFilter = {
   orphans: false,
   parents: true,
   tags: [],
+  tagColors: [],
   nodes: [],
   links: [],
   date: [],
diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index 3c9ee00..e46baf3 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -6,6 +6,8 @@ import {
   InfoOutlineIcon,
   RepeatIcon,
   ArrowRightIcon,
+  AddIcon,
+  DeleteIcon,
 } from '@chakra-ui/icons'
 import {
   Accordion,
@@ -38,6 +40,7 @@ import {
   Grid,
   Portal,
   SlideFade,
+  Input,
 } from '@chakra-ui/react'
 import React, { useState, useContext } from 'react'
 import Scrollbars from 'react-custom-scrollbars-2'
@@ -64,6 +67,7 @@ export interface TweakProps {
   setMouse: any
   behavior: typeof initialBehavior
   setBehavior: any
+  tags: string[]
 }
 
 export const Tweaks = (props: TweakProps) => {
@@ -80,6 +84,7 @@ export const Tweaks = (props: TweakProps) => {
     setMouse,
     behavior,
     setBehavior,
+    tags,
   } = props
   const [showTweaks, setShowTweaks] = useState(true)
   const { highlightColor, setHighlightColor } = useContext(ThemeContext)
@@ -107,6 +112,7 @@ export const Tweaks = (props: TweakProps) => {
     'gray.900',
     'black',
   ]
+
   return (
     <>
       <SlideFade in={!showTweaks}>
@@ -223,6 +229,24 @@ export const Tweaks = (props: TweakProps) => {
                       ></Switch>
                     </Flex>
                   </VStack>
+                  <Accordion allowToggle allowMultiple paddingLeft={3}>
+                    <AccordionItem>
+                      <AccordionButton>
+                        Tag filters
+                        <AccordionIcon />
+                      </AccordionButton>
+                      <AccordionPanel>
+                        <TagPanel filter={filter} setFilter={setFilter} tags={tags} />
+                      </AccordionPanel>
+                    </AccordionItem>
+                    <AccordionItem>
+                      <AccordionButton>
+                        Tag colors
+                        <AccordionIcon />
+                      </AccordionButton>
+                      <AccordionPanel></AccordionPanel>
+                    </AccordionItem>
+                  </Accordion>
                 </AccordionPanel>
               </AccordionItem>
               <AccordionItem>
@@ -1242,3 +1266,54 @@ export const ColorMenu = (props: ColorMenuProps) => {
     </Flex>
   )
 }
+
+export interface TagPanelProps {
+  tags: string[]
+  filter: typeof initialFilter
+  setFilter: any
+}
+
+export const TagPanel = (props: TagPanelProps) => {
+  const { filter, setFilter, tags } = props
+  const [tagFilterText, setTagFilterText] = useState('')
+
+  return (
+    <VStack>
+      <Flex alignItems="center" justifyContent="space-between">
+        <Input
+          placeHolder="New tag..."
+          value={tagFilterText}
+          onChange={(v) => setTagFilterText(v.target.value)}
+        />
+        <IconButton
+          onClick={() => {
+            if (!tags.includes(tagFilterText)) {
+              return
+            }
+            setFilter({ ...filter, tags: [...filter.tags, tagFilterText] })
+            setTagFilterText('')
+          }}
+          aria-label="add tag"
+          icon={<AddIcon />}
+        />
+      </Flex>
+      {filter.tags.map((tag) => {
+        return (
+          <Flex aignItems="center" justifyContent="space-between">
+            {tag}
+            <IconButton
+              aria-label={'delete tag ' + tag}
+              icon={<DeleteIcon />}
+              onClick={() =>
+                setFilter({
+                  ...filter,
+                  tags: filter.tags.filter((t) => t !== tag),
+                })
+              }
+            />
+          </Flex>
+        )
+      })}
+    </VStack>
+  )
+}