feat(preview): tag display and scroll fix

1 files changed, 79 insertions, 0 deletions

diff --git a/components/Sidebar/TagBar.tsx b/components/Sidebar/TagBar.tsx
new file mode 100644
index 0000000..0fe0a18
--- /dev/null
+++ b/components/Sidebar/TagBar.tsx
@@ -0,0 +1,79 @@
+import React from 'react'
+import { initialFilter, TagColors } from '../config'
+import { NodeObject } from 'force-graph'
+import { OrgRoamNode } from '../../api'
+import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
+import { Flex, Tag, TagLabel, TagRightIcon } from '@chakra-ui/react'
+
+export interface TagBarProps {
+  filter: typeof initialFilter
+  setFilter: any
+  tagColors: TagColors
+  setTagColors: any
+  openContextMenu: any
+  previewNode: NodeObject
+}
+
+export const TagBar = (props: TagBarProps) => {
+  const { filter, setFilter, tagColors, setTagColors, openContextMenu, previewNode } = props
+
+  const node = previewNode as OrgRoamNode
+  if (!node.tags || node?.tags[0] === null) {
+    return null
+  }
+  return (
+    <Flex mb={2} flexWrap="wrap">
+      {node?.tags?.map((tag: string) => {
+        const bl: string[] = filter.tagsBlacklist ?? []
+        const wl: string[] = filter.tagsWhitelist ?? []
+        const blackList: boolean = bl.includes(tag)
+        const whiteList = wl.includes(tag)
+        return (
+          <Tag
+            tabIndex={0}
+            mr={2}
+            mt={2}
+            onContextMenu={(e) => {
+              e.preventDefault()
+              openContextMenu(tag, e)
+            }}
+            cursor="pointer"
+            onClick={() => {
+              if (blackList) {
+                setFilter((filter: typeof initialFilter) => ({
+                  ...filter,
+                  tagsBlacklist: filter.tagsBlacklist.filter((t) => t !== tag),
+                  tagsWhitelist: [...filter.tagsWhitelist, tag],
+                }))
+                return
+              }
+              if (whiteList) {
+                setFilter((filter: typeof initialFilter) => ({
+                  ...filter,
+                  tagsWhitelist: filter.tagsWhitelist.filter((t) => t !== tag),
+                }))
+                return
+              }
+
+              setFilter((filter: typeof initialFilter) => ({
+                ...filter,
+                tagsBlacklist: [...filter.tagsBlacklist, tag],
+              }))
+            }}
+            size="sm"
+            key={tag}
+            variant="outline"
+            colorScheme={tagColors[tag]?.replaceAll(/(.*?)\..*/g, '$1') || undefined}
+          >
+            <TagLabel>{tag}</TagLabel>
+            {blackList ? (
+              <TagRightIcon as={ViewOffIcon} />
+            ) : whiteList ? (
+              <TagRightIcon as={ViewIcon} />
+            ) : null}
+          </Tag>
+        )
+      })}
+    </Flex>
+  )
+}