2 files changed, 26 insertions, 7 deletions
diff --git a/components/config.ts b/components/config.ts
index 0544b58..6c73921 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -34,7 +34,8 @@ export const initialPhysics = {
 export const initialFilter = {
   orphans: false,
   parents: true,
-  tags: [],
+  tagsBlacklist: [],
+  tagsWhitelist: [],
   nodes: [],
   links: [],
   date: [],
@@ -85,6 +86,7 @@ export const initialVisuals = {
   citeDashLength: 35,
   citeGapLength: 15,
   citeLinkColor: 'gray.600',
+  citeLinkHighlightColor: '',
   citeNodeColor: 'black',
 }
 
diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index 5561a1b..39a8a35 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -246,6 +246,14 @@ export const Tweaks = (props: TweakProps) => {
                           filter={filter}
                           setFilter={setFilter}
                           tags={tags}
+                          mode="blacklist"
+                        />
+                        <TagPanel
+                          highlightColor={highlightColor}
+                          filter={filter}
+                          setFilter={setFilter}
+                          tags={tags}
+                          mode="whitelist"
                         />
                       </AccordionPanel>
                     </AccordionItem>
@@ -756,12 +764,20 @@ export const Tweaks = (props: TweakProps) => {
                       />
                       <ColorMenu
                         colorList={colorList}
-                        label="Citationlink color"
+                        label="Citation link color"
                         visuals={visuals}
                         setVisuals={setVisuals}
                         value={'citeLinkColor'}
                         visValue={visuals.citeLinkColor}
                       />
+                      <ColorMenu
+                        colorList={colorList}
+                        label="Citation link highlight"
+                        visuals={visuals}
+                        setVisuals={setVisuals}
+                        value={'citeLinkHighlightColor'}
+                        visValue={visuals.citeLinkHighlightColor}
+                      />
                       <Box>
                         <Flex alignItems="center" justifyContent="space-between">
                           <Text>Labels</Text>
@@ -1290,17 +1306,18 @@ export interface TagPanelProps {
   filter: typeof initialFilter
   setFilter: any
   highlightColor: string
+  mode: string
 }
 
 export const TagPanel = (props: TagPanelProps) => {
-  const { filter, setFilter, tags, highlightColor } = props
+  const { filter, setFilter, tags, highlightColor, mode } = props
   const tagArray = tags.map((tag) => {
     return { value: tag, label: tag }
   })
-  // .concat[{ value: 'placeholder', label: 'New filter' }]
 
+  const currentTags = mode === 'blacklist' ? 'tagsBlacklist' : 'tagsWhitelist'
   const [selectedItems, setSelectedItems] = useState<typeof tagArray>(
-    filter.tags.map((tag) => {
+    filter[currentTags].map((tag) => {
       return { value: tag, label: tag }
     }),
   )
@@ -1308,7 +1325,7 @@ export const TagPanel = (props: TagPanelProps) => {
   return (
     <CUIAutoComplete
       items={tagArray}
-      label="Add tag to filter"
+      label={'Add tag to ' + mode}
       placeholder=" "
       onCreateItem={(item) => null}
       disableCreateItem={true}
@@ -1316,7 +1333,7 @@ export const TagPanel = (props: TagPanelProps) => {
       onSelectedItemsChange={(changes) => {
         if (changes.selectedItems) {
           setSelectedItems(changes.selectedItems)
-          setFilter({ ...filter, tags: changes.selectedItems.map((item) => item.value) })
+          setFilter({ ...filter, [currentTags]: changes.selectedItems.map((item) => item.value) })
         }
       }}
       listItemStyleProps={{ overflow: 'hidden' }}