feat(filter): add option to filter by subdirectory (#190)

17 files changed, 92 insertions, 63 deletions

diff --git a/components/TagMenu.tsx b/components/TagMenu.tsx
index 4841cbf..3108b34 100644
--- a/components/TagMenu.tsx
+++ b/components/TagMenu.tsx
@@ -14,7 +14,7 @@ import {
 import React from 'react'
 import { colorList, initialFilter, TagColors } from './config'
 import { Collapse } from './Sidebar/Collapse'
-import { ColorMenu } from './Tweaks/ColorMenu'
+import { ColorMenu } from './Tweaks/Visual/ColorMenu'
 
 export interface TagMenuProps {
   setTagColors: any
diff --git a/components/Tweaks/BehaviorPanel.tsx b/components/Tweaks/Behavior/BehaviorPanel.tsx
index 5d61730..8b39c93 100644
--- a/components/Tweaks/BehaviorPanel.tsx
+++ b/components/Tweaks/Behavior/BehaviorPanel.tsx
@@ -14,9 +14,9 @@ import {
   Switch,
 } from '@chakra-ui/react'
 import React from 'react'
-import { initialBehavior, initialMouse } from '../config'
-import { InfoTooltip } from './InfoTooltip'
-import { SliderWithInfo } from './SliderWithInfo'
+import { initialBehavior, initialMouse } from '../../config'
+import { InfoTooltip } from '../InfoTooltip'
+import { SliderWithInfo } from '../SliderWithInfo'
 
 export interface BehaviorPanelProps {
   behavior: typeof initialBehavior
diff --git a/components/Tweaks/FilterPanel.tsx b/components/Tweaks/Filter/FilterPanel.tsx
index ad0c5e4..55ff3e5 100644
--- a/components/Tweaks/FilterPanel.tsx
+++ b/components/Tweaks/Filter/FilterPanel.tsx
@@ -18,11 +18,12 @@ import {
   AccordionIcon,
   AccordionPanel,
 } from '@chakra-ui/react'
-import React from 'react'
-import { TagPanel } from './TagPanel'
-import { initialFilter, initialLocal, TagColors } from '../config'
+import React, { useContext } from 'react'
+import { OptionPanel } from '../OptionPanel'
+import { initialFilter, initialLocal, TagColors } from '../../config'
 import { TagColorPanel } from './TagColorPanel'
-import { SliderWithInfo } from './SliderWithInfo'
+import { SliderWithInfo } from '../SliderWithInfo'
+import { VariablesContext } from '../../../util/variablesContext'
 
 export interface FilterPanelProps {
   filter: typeof initialFilter
@@ -48,6 +49,7 @@ const FilterPanel = (props: FilterPanelProps) => {
     colorList,
     tags,
   } = props
+  const { roamDir, subDirs } = useContext(VariablesContext)
   return (
     <Box>
       <VStack
@@ -80,7 +82,6 @@ const FilterPanel = (props: FilterPanelProps) => {
               })()}
             </MenuButton>
             <Portal>
-              {' '}
               <MenuList bgColor="gray.200" zIndex="popover">
                 <MenuItem
                   onClick={() =>
@@ -177,23 +178,47 @@ const FilterPanel = (props: FilterPanelProps) => {
       <Accordion padding={0} allowToggle allowMultiple paddingLeft={3}>
         <AccordionItem>
           <AccordionButton>
+            Directory filters
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pr={0} mr={0}>
+            <OptionPanel
+              filter={filter}
+              setFilter={setFilter}
+              options={subDirs}
+              displayName="directory blocklist"
+              listName="dirsBlocklist"
+              labelFilter={roamDir}
+            />
+            <OptionPanel
+              filter={filter}
+              setFilter={setFilter}
+              options={subDirs}
+              displayName="directory allowlist"
+              listName="dirsAllowlist"
+              labelFilter={roamDir}
+            />
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionButton>
             Tag filters
             <AccordionIcon />
           </AccordionButton>
           <AccordionPanel pr={0} mr={0}>
-            <TagPanel
-              highlightColor={highlightColor}
+            <OptionPanel
               filter={filter}
               setFilter={setFilter}
-              tags={tags}
-              mode="blacklist"
+              options={tags}
+              displayName="tag blocklist"
+              listName="tagsBlacklist"
             />
-            <TagPanel
-              highlightColor={highlightColor}
+            <OptionPanel
               filter={filter}
               setFilter={setFilter}
-              tags={tags}
-              mode="whitelist"
+              options={tags}
+              displayName="tag allowlist"
+              listName="tagsWhitelist"
             />
           </AccordionPanel>
         </AccordionItem>
diff --git a/components/Tweaks/TagColorPanel.tsx b/components/Tweaks/Filter/TagColorPanel.tsx
index d20b540..eb458dc 100644
--- a/components/Tweaks/TagColorPanel.tsx
+++ b/components/Tweaks/Filter/TagColorPanel.tsx
@@ -15,7 +15,7 @@ import {
 } from '@chakra-ui/react'
 import { CUIAutoComplete } from 'chakra-ui-autocomplete'
 import React, { useState } from 'react'
-import { TagColors } from '../config'
+import { TagColors } from '../../config'
 
 export interface TagColorPanelProps {
   tags: string[]
@@ -95,7 +95,6 @@ export const TagColorPanel = (props: TagColorPanelProps) => {
                   {<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
diff --git a/components/Tweaks/CitationsPanel.tsx b/components/Tweaks/NodesNLinks/CitationsPanel.tsx
index 93e923c..aebddca 100644
--- a/components/Tweaks/CitationsPanel.tsx
+++ b/components/Tweaks/NodesNLinks/CitationsPanel.tsx
@@ -1,9 +1,9 @@
 import { Box, StackDivider, VStack } from '@chakra-ui/react'
 import React from 'react'
-import { ColorMenu } from './ColorMenu'
-import { colorList, initialVisuals } from '../config'
-import { EnableSection } from './EnableSection'
-import { SliderWithInfo } from './SliderWithInfo'
+import { ColorMenu } from '../Visual/ColorMenu'
+import { colorList, initialVisuals } from '../../config'
+import { EnableSection } from '../EnableSection'
+import { SliderWithInfo } from '../SliderWithInfo'
 
 export interface CitationsPanelProps {
   visuals: typeof initialVisuals
diff --git a/components/Tweaks/TagPanel.tsx b/components/Tweaks/OptionPanel.tsx
index 58f4b7d..870028b 100644
--- a/components/Tweaks/TagPanel.tsx
+++ b/components/Tweaks/OptionPanel.tsx
@@ -1,34 +1,38 @@
 import { CUIAutoComplete } from 'chakra-ui-autocomplete'
-import React, { useState } from 'react'
+import React, { useContext, useState } from 'react'
+import { ThemeContext } from '../../util/themecontext'
 import { initialFilter } from '../config'
 
-export interface TagPanelProps {
-  tags: string[]
+export interface OptionPanelProps {
+  options: string[]
   filter: typeof initialFilter
   setFilter: any
-  highlightColor: string
-  mode: string
+  listName: 'tagsBlacklist' | 'tagsWhitelist' | 'dirsAllowlist' | 'dirsBlocklist'
+  displayName: string
+  labelFilter?: string
 }
 
-export const TagPanel = (props: TagPanelProps) => {
-  const { filter, setFilter, tags, highlightColor, mode } = props
-  const tagArray = tags.map((tag) => {
-    return { value: tag, label: tag }
+export const OptionPanel = (props: OptionPanelProps) => {
+  const { filter, listName, labelFilter, displayName, setFilter, options = [] } = props
+  const { highlightColor } = useContext(ThemeContext)
+  const optionArray = options.map((option) => {
+    return { value: option, label: labelFilter ? option.replace(labelFilter, '') : option }
   })
 
-  const currentTags = mode === 'blacklist' ? 'tagsBlacklist' : 'tagsWhitelist'
-  const name = mode === 'blacklist' ? 'blocklist' : 'allowlist'
-  const [selectedItems, setSelectedItems] = useState<typeof tagArray>(
-    filter[currentTags].map((tag) => {
-      return { value: tag, label: tag }
+  const [selectedItems, setSelectedItems] = useState<typeof optionArray>(
+    filter[listName].map((option) => {
+      return {
+        value: option,
+        label: labelFilter ? (option as string)?.replace(labelFilter, '') : option,
+      }
     }),
   )
 
   return (
     <CUIAutoComplete
       labelStyleProps={{ fontWeight: 300, fontSize: 14 }}
-      items={tagArray}
-      label={`Add tag to ${name}`}
+      items={optionArray}
+      label={`Add tag to ${displayName}`}
       placeholder=" "
       onCreateItem={(item) => null}
       disableCreateItem={true}
@@ -36,7 +40,7 @@ export const TagPanel = (props: TagPanelProps) => {
       onSelectedItemsChange={(changes) => {
         if (changes.selectedItems) {
           setSelectedItems(changes.selectedItems)
-          setFilter({ ...filter, [currentTags]: changes.selectedItems.map((item) => item.value) })
+          setFilter({ ...filter, [listName]: changes.selectedItems.map((item) => item.value) })
         }
       }}
       listItemStyleProps={{ overflow: 'hidden' }}
diff --git a/components/Tweaks/PhysicsPanel.tsx b/components/Tweaks/Physics/PhysicsPanel.tsx
index cd18f03..82dd6b7 100644
--- a/components/Tweaks/PhysicsPanel.tsx
+++ b/components/Tweaks/Physics/PhysicsPanel.tsx
@@ -12,9 +12,9 @@ import {
   VStack,
 } from '@chakra-ui/react'
 import React, { useCallback } from 'react'
-import { initialPhysics } from '../config'
-import { EnableSection } from './EnableSection'
-import { SliderWithInfo } from './SliderWithInfo'
+import { initialPhysics } from '../../config'
+import { EnableSection } from '../EnableSection'
+import { SliderWithInfo } from '../SliderWithInfo'
 
 export interface PhysicsPanelProps {
   physics: typeof initialPhysics
diff --git a/components/Tweaks/ColorMenu.tsx b/components/Tweaks/Visual/ColorMenu.tsx
index b87f76b..a792f12 100644
--- a/components/Tweaks/ColorMenu.tsx
+++ b/components/Tweaks/Visual/ColorMenu.tsx
@@ -14,7 +14,7 @@ import {
   Popover,
 } from '@chakra-ui/react'
 import React, { useCallback } from 'react'
-import { initialVisuals } from '../config'
+import { initialVisuals } from '../../config'
 
 export interface ColorMenuProps {
   label: string
diff --git a/components/Tweaks/ColorsPanel.tsx b/components/Tweaks/Visual/ColorsPanel.tsx
index de0a2b8..fe4cd7b 100644
--- a/components/Tweaks/ColorsPanel.tsx
+++ b/components/Tweaks/Visual/ColorsPanel.tsx
@@ -18,7 +18,7 @@ import {
 } from '@chakra-ui/react'
 import React from 'react'
 import { ColorMenu } from './ColorMenu'
-import { colorList, initialVisuals } from '../config'
+import { colorList, initialVisuals } from '../../config'
 
 export interface ColorsPanelProps {
   visuals: typeof initialVisuals
diff --git a/components/Tweaks/GraphColorSelect.tsx b/components/Tweaks/Visual/GraphColorSelect.tsx
index 60fd8cf..5b49672 100644
--- a/components/Tweaks/GraphColorSelect.tsx
+++ b/components/Tweaks/Visual/GraphColorSelect.tsx
@@ -11,7 +11,7 @@ import {
   Text,
 } from '@chakra-ui/react'
 import { ChevronDownIcon } from '@chakra-ui/icons'
-import { initialColoring } from '../config'
+import { initialColoring } from '../../config'
 
 export interface GraphColorSelectProps {
   coloring: typeof initialColoring
diff --git a/components/Tweaks/HighlightingPanel.tsx b/components/Tweaks/Visual/HighlightingPanel.tsx
index 6f71268..357d137 100644
--- a/components/Tweaks/HighlightingPanel.tsx
+++ b/components/Tweaks/Visual/HighlightingPanel.tsx
@@ -1,8 +1,8 @@
 import { Box, Select, StackDivider, VStack } from '@chakra-ui/react'
 import React from 'react'
-import { initialVisuals } from '../config'
-import { EnableSection } from './EnableSection'
-import { SliderWithInfo } from './SliderWithInfo'
+import { initialVisuals } from '../../config'
+import { EnableSection } from '../EnableSection'
+import { SliderWithInfo } from '../SliderWithInfo'
 
 export interface HighlightingPanelProps {
   visuals: typeof initialVisuals
diff --git a/components/Tweaks/LabelsPanel.tsx b/components/Tweaks/Visual/LabelsPanel.tsx
index 2b66e85..b0044f1 100644
--- a/components/Tweaks/LabelsPanel.tsx
+++ b/components/Tweaks/Visual/LabelsPanel.tsx
@@ -15,8 +15,8 @@ import {
 } from '@chakra-ui/react'
 import React from 'react'
 import { ColorMenu } from './ColorMenu'
-import { colorList, initialVisuals } from '../config'
-import { SliderWithInfo } from './SliderWithInfo'
+import { colorList, initialVisuals } from '../../config'
+import { SliderWithInfo } from '../SliderWithInfo'
 
 export interface LabelsPanelProps {
   visuals: typeof initialVisuals
diff --git a/components/Tweaks/NodesNLinksPanel.tsx b/components/Tweaks/Visual/NodesNLinksPanel.tsx
index 3321ae3..40072fb 100644
--- a/components/Tweaks/NodesNLinksPanel.tsx
+++ b/components/Tweaks/Visual/NodesNLinksPanel.tsx
@@ -1,9 +1,9 @@
 import { Box, StackDivider, VStack } from '@chakra-ui/react'
 import React from 'react'
 import { ColorMenu } from './ColorMenu'
-import { colorList, initialVisuals } from '../config'
-import { EnableSection } from './EnableSection'
-import { SliderWithInfo } from './SliderWithInfo'
+import { colorList, initialVisuals } from '../../config'
+import { EnableSection } from '../EnableSection'
+import { SliderWithInfo } from '../SliderWithInfo'
 
 export interface NodesNLinksPanelProps {
   visuals: typeof initialVisuals
diff --git a/components/Tweaks/ThemeSelect.tsx b/components/Tweaks/Visual/ThemeSelect.tsx
index d5a7f54..eed6daf 100644
--- a/components/Tweaks/ThemeSelect.tsx
+++ b/components/Tweaks/Visual/ThemeSelect.tsx
@@ -11,9 +11,9 @@ import {
   Text,
 } from '@chakra-ui/react'
 
-import { themes } from '../themes'
+import { themes } from '../../themes'
 import { ChevronDownIcon } from '@chakra-ui/icons'
-import { ThemeContext } from '../../util/themecontext'
+import { ThemeContext } from '../../../util/themecontext'
 
 export const ThemeSelect = () => {
   type Theme = { [key: string]: string }
diff --git a/components/Tweaks/VisualsPanel.tsx b/components/Tweaks/Visual/VisualsPanel.tsx
index f364c4f..82b365f 100644
--- a/components/Tweaks/VisualsPanel.tsx
+++ b/components/Tweaks/Visual/VisualsPanel.tsx
@@ -18,12 +18,11 @@ import {
 import React, { useCallback } from 'react'
 import { HighlightingPanel } from './HighlightingPanel'
 import { ColorsPanel } from './ColorsPanel'
-import { initialColoring, initialVisuals } from '../config'
+import { initialColoring, initialVisuals } from '../../config'
 import { NodesNLinksPanel } from './NodesNLinksPanel'
 import { LabelsPanel } from './LabelsPanel'
-import { CitationsPanel } from './CitationsPanel'
-import { ColorMenu } from './ColorMenu'
 import { ThemeSelect } from './ThemeSelect'
+import { CitationsPanel } from '../NodesNLinks/CitationsPanel'
 import { GraphColorSelect } from './GraphColorSelect'
 
 export interface VisualsPanelProps {
diff --git a/components/Tweaks/index.tsx b/components/Tweaks/index.tsx
index a07559a..039885c 100644
--- a/components/Tweaks/index.tsx
+++ b/components/Tweaks/index.tsx
@@ -26,13 +26,13 @@ import {
   initialColoring,
 } from '../config'
 
-import FilterPanel from './FilterPanel'
+import FilterPanel from './Filter/FilterPanel'
 
 import { ThemeContext } from '../../util/themecontext'
 import { usePersistantState } from '../../util/persistant-state'
-import { PhysicsPanel } from './PhysicsPanel'
-import { VisualsPanel } from './VisualsPanel'
-import { BehaviorPanel } from './BehaviorPanel'
+import { PhysicsPanel } from './Physics/PhysicsPanel'
+import { BehaviorPanel } from './Behavior/BehaviorPanel'
+import { VisualsPanel } from './Visual/VisualsPanel'
 
 export interface TweakProps {
   physics: typeof initialPhysics
diff --git a/components/config.ts b/components/config.ts
index d61e416..cbcb880 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -39,6 +39,8 @@ export const initialFilter = {
   filelessCites: false,
   tagsBlacklist: [],
   tagsWhitelist: [],
+  dirsBlocklist: [],
+  dirsAllowlist: [],
   bad: true,
   nodes: [],
   links: [],