From b75598d879e1b9153d89a96f7b0f66ad8d641f71 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <hello@tefkah.com>
Date: Mon, 11 Oct 2021 20:50:51 +0200
Subject: feat(preview): tag display and scroll fix

---
 components/Sidebar/Backlinks.tsx |   2 +-
 components/Sidebar/Note.tsx      |   2 +-
 components/Sidebar/TagBar.tsx    |  79 ++++++++++++++++++++++++
 components/Sidebar/Toolbar.tsx   |   2 +-
 components/Sidebar/index.tsx     | 127 +++++++++++++++++++++++++--------------
 5 files changed, 163 insertions(+), 49 deletions(-)
 create mode 100644 components/Sidebar/TagBar.tsx

(limited to 'components/Sidebar')

diff --git a/components/Sidebar/Backlinks.tsx b/components/Sidebar/Backlinks.tsx
index 68ab551..d82fbba 100644
--- a/components/Sidebar/Backlinks.tsx
+++ b/components/Sidebar/Backlinks.tsx
@@ -43,7 +43,7 @@ export const Backlinks = (props: BacklinksProps) => {
     <Box>
       <Heading pt={4}>{`Backlinks (${backLinks.length})`}</Heading>
       <VStack
-        pt={2}
+        py={2}
         spacing={3}
         alignItems="start"
         divider={<StackDivider borderColor="gray.500" />}
diff --git a/components/Sidebar/Note.tsx b/components/Sidebar/Note.tsx
index e425559..37e836d 100644
--- a/components/Sidebar/Note.tsx
+++ b/components/Sidebar/Note.tsx
@@ -35,7 +35,7 @@ export const Note = (props: NoteProps) => {
     <Box
       pr={8}
       overflow="scroll"
-      height="85%"
+      height="100%"
       className="org"
       sx={{
         ...noteStyle,
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>
+  )
+}
diff --git a/components/Sidebar/Toolbar.tsx b/components/Sidebar/Toolbar.tsx
index 8741da5..6cbecae 100644
--- a/components/Sidebar/Toolbar.tsx
+++ b/components/Sidebar/Toolbar.tsx
@@ -38,7 +38,7 @@ export const Toolbar = (props: ToolbarProps) => {
     nextPreviewNode,
   } = props
   return (
-    <Flex pb={3} alignItems="center" justifyContent="space-between" pl={1} pr={1}>
+    <Flex flex="0 1 40px" pb={3} alignItems="center" justifyContent="space-between" pl={1} pr={1}>
       <Flex>
         <ButtonGroup isAttached>
           <Tooltip label="Go backward">
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index cbc0cc9..957669c 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -1,12 +1,33 @@
 import React, { useContext, useEffect, useRef, useState } from 'react'
 
 import { Toolbar } from './Toolbar'
+import { TagBar } from './TagBar'
 import { Note } from './Note'
 
-import { Button, Slide, VStack, Flex, Heading, Box, IconButton, Tooltip } from '@chakra-ui/react'
+import {
+  Button,
+  Slide,
+  VStack,
+  Flex,
+  Heading,
+  Box,
+  IconButton,
+  Tooltip,
+  HStack,
+  TagLabel,
+  Tag,
+  TagRightIcon,
+} from '@chakra-ui/react'
 import { Collapse } from './Collapse'
 import { Scrollbars } from 'react-custom-scrollbars-2'
-import { ChevronLeftIcon, ChevronRightIcon, CloseIcon, HamburgerIcon } from '@chakra-ui/icons'
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CloseIcon,
+  HamburgerIcon,
+  ViewIcon,
+  ViewOffIcon,
+} from '@chakra-ui/icons'
 import { BiDotsVerticalRounded, BiFile, BiNetworkChart } from 'react-icons/bi'
 import { BsReverseLayoutSidebarInsetReverse } from 'react-icons/bs'
 
@@ -16,6 +37,7 @@ import { ThemeContext } from '../../util/themecontext'
 import { LinksByNodeId, NodeByCite, NodeById, Scope } from '../../pages/index'
 import { Resizable } from 're-resizable'
 import { usePersistantState } from '../../util/persistant-state'
+import { initialFilter, TagColors } from '../config'
 
 export interface SidebarProps {
   isOpen: boolean
@@ -36,6 +58,10 @@ export interface SidebarProps {
   scope: Scope
   setScope: any
   windowWidth: number
+  filter: typeof initialFilter
+  setFilter: any
+  tagColors: TagColors
+  setTagColors: any
 }
 
 const Sidebar = (props: SidebarProps) => {
@@ -58,6 +84,10 @@ const Sidebar = (props: SidebarProps) => {
     scope,
     setScope,
     windowWidth,
+    filter,
+    setFilter,
+    tagColors,
+    setTagColors,
   } = props
 
   const { highlightColor } = useContext(ThemeContext)
@@ -90,7 +120,7 @@ const Sidebar = (props: SidebarProps) => {
       style={{ height: '100vh' }}
     >
       <Resizable
-        size={{ height: '100%', width: sidebarWidth }}
+        size={{ height: '100vh', width: sidebarWidth }}
         onResizeStop={(e, direction, ref, d) => {
           setSidebarWidth((curr: number) => curr + d.width)
         }}
@@ -107,22 +137,24 @@ const Sidebar = (props: SidebarProps) => {
         minWidth="220px"
         maxWidth={windowWidth - 200}
       >
-        <Box pl={2} color="black" h="100%" bg="alt.100" width="100%">
+        <Flex flexDir="column" h="100vh" pl={2} color="black" bg="alt.100" width="100%">
           <Flex
-            whiteSpace="nowrap"
-            overflow="hidden"
-            textOverflow="ellipsis"
+            //whiteSpace="nowrap"
+            // overflow="hidden"
+            // textOverflow="ellipsis"
             pl={4}
             alignItems="center"
             color="black"
             width="100%"
           >
-            <BiFile
-              onContextMenu={(e) => {
-                e.preventDefault()
-                openContextMenu(previewNode, e)
-              }}
-            />
+            <Flex flexShrink={0}>
+              <BiFile
+                onContextMenu={(e) => {
+                  e.preventDefault()
+                  openContextMenu(previewNode, e)
+                }}
+              />
+            </Flex>
             <Flex
               whiteSpace="nowrap"
               textOverflow="ellipsis"
@@ -177,39 +209,42 @@ const Sidebar = (props: SidebarProps) => {
               nextPreviewNode,
             }}
           />
-          <Scrollbars
-            //autoHeight
-            //autoHeightMax={600}
-            autoHide
-            renderThumbVertical={({ style, ...props }) => (
-              <Box
-                style={{
-                  ...style,
-                  borderRadius: 10,
-                  backgroundColor: highlightColor,
-                }}
-                color="alt.100"
-                {...props}
-              />
-            )}
-          >
-            <VStack height="100%" alignItems="left" bg="alt.100" paddingLeft={4}>
-              <Note
-                {...{
-                  setPreviewNode,
-                  previewNode,
-                  nodeById,
-                  nodeByCite,
-                  setSidebarHighlightedNode,
-                  justification,
-                  justificationList,
-                  linksByNodeId,
-                  openContextMenu,
-                }}
-              />
-            </VStack>
-          </Scrollbars>
-        </Box>
+          {/* <Scrollbars
+           *   //autoHeight
+           *   autoHeightMax={600}
+           *   autoHide
+           *   renderThumbVertical={({ style, ...props }) => (
+           *     <Box
+           *       style={{
+           *         ...style,
+           *         borderRadius: 0,
+           *         // backgroundColor: highlightColor,
+           *       }}
+           *       //color="alt.100"
+           *       {...props}
+           *     />
+           *   )}
+           * > */}
+          <VStack flexGrow={1} overflow="scroll" alignItems="left" bg="alt.100" paddingLeft={4}>
+            <TagBar
+              {...{ filter, setFilter, tagColors, setTagColors, openContextMenu, previewNode }}
+            />
+            <Note
+              {...{
+                setPreviewNode,
+                previewNode,
+                nodeById,
+                nodeByCite,
+                setSidebarHighlightedNode,
+                justification,
+                justificationList,
+                linksByNodeId,
+                openContextMenu,
+              }}
+            />
+          </VStack>
+          {/*</Scrollbars>*/}
+        </Flex>
       </Resizable>
     </Collapse>
   )
-- 
cgit v1.2.3