summaryrefslogtreecommitdiff
path: root/components/Sidebar
diff options
context:
space:
mode:
Diffstat (limited to 'components/Sidebar')
-rw-r--r--components/Sidebar/Backlinks.tsx2
-rw-r--r--components/Sidebar/Note.tsx2
-rw-r--r--components/Sidebar/TagBar.tsx79
-rw-r--r--components/Sidebar/Toolbar.tsx2
-rw-r--r--components/Sidebar/index.tsx127
5 files changed, 163 insertions, 49 deletions
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>
)
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-23 08:17:02 +0000