summaryrefslogtreecommitdiff
path: root/components/Sidebar/index.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/Sidebar/index.tsx')
-rw-r--r--components/Sidebar/index.tsx335
1 files changed, 56 insertions, 279 deletions
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index e56a25d..4d807ef 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -1,42 +1,17 @@
import React, { useContext, useEffect, useState } from 'react'
-import { UniOrg } from '../../util/uniorg'
-import { Backlinks } from './Backlinks'
-import { getOrgText } from '../../util/webSocketFunctions'
+import { Toolbar } from './Toolbar'
+import { Note } from './Note'
-import {
- Button,
- Slide,
- VStack,
- Flex,
- Heading,
- Box,
- CloseButton,
- Text,
- Drawer,
- DrawerOverlay,
- DrawerHeader,
- DrawerBody,
- DrawerCloseButton,
- DrawerContent,
- DrawerFooter,
- IconButton,
-} from '@chakra-ui/react'
+import { Button, Slide, VStack, Flex, Heading, Box, IconButton } from '@chakra-ui/react'
import { Scrollbars } from 'react-custom-scrollbars-2'
import { ChevronLeftIcon, ChevronRightIcon, HamburgerIcon } from '@chakra-ui/icons'
-import {
- BiFont,
- BiAlignJustify,
- BiAlignLeft,
- BiAlignMiddle,
- BiAlignRight,
- BiRightIndent,
-} from 'react-icons/bi'
+import { BiFile } from 'react-icons/bi'
import { GraphData, NodeObject, LinkObject } from 'force-graph'
import { OrgRoamNode } from '../../api'
import { ThemeContext } from '../../util/themecontext'
-import { LinksByNodeId, NodeById } from '../../pages/index'
+import { LinksByNodeId, NodeByCite, NodeById } from '../../pages/index'
export interface SidebarProps {
isOpen: boolean
@@ -46,68 +21,74 @@ export interface SidebarProps {
previewNode: NodeObject
setPreviewNode: any
linksByNodeId: LinksByNodeId
+ nodeByCite: NodeByCite
+ setSidebarHighlightedNode: any
}
const Sidebar = (props: SidebarProps) => {
- const { isOpen, onOpen, onClose, previewNode, setPreviewNode, nodeById, linksByNodeId } = props
+ const {
+ isOpen,
+ onOpen,
+ onClose,
+ previewNode,
+ setPreviewNode,
+ nodeById,
+ linksByNodeId,
+ nodeByCite,
+ setSidebarHighlightedNode,
+ } = props
const { highlightColor } = useContext(ThemeContext)
const [previewRoamNode, setPreviewRoamNode] = useState<OrgRoamNode>()
- const getText = (id: string, setText: any) => {
- fetch(`http://localhost:35901/note/${id}`)
- .then((res) => {
- return res.text()
- })
- .then((res) => setText(res))
- .catch((e) => {
- return (
- 'Could not fetch the text for some reason, sorry!\n\n This can happen because you have an id with forward slashes (/) in it.',
- console.log(e)
- )
- })
- }
-
useEffect(() => {
- if (!previewNode.id) {
+ if (!previewNode?.id) {
onClose()
return
}
onOpen()
setPreviewRoamNode(previewNode as OrgRoamNode)
- }, [previewNode.id])
+ }, [previewNode?.id])
- const [justification, setJustification] = useState(0)
+ const [justification, setJustification] = useState(1)
const justificationList = ['justify', 'start', 'end', 'center']
const [font, setFont] = useState('sans serif')
const [indent, setIndent] = useState(0)
//maybe want to close it when clicking outside, but not sure
//const outsideClickRef = useRef();
return (
- <Slide direction="right" in={isOpen} style={{ maxWidth: '50%' }} unmountOnExit>
+ <Slide
+ direction="right"
+ in={isOpen}
+ style={{ width: 'clamp(400px, 30%, 500px)' }}
+ unmountOnExit
+ >
<Flex flexDirection="row" height="100%">
- <Box pl={2} color="gray.800" bg="alt.100" w="100%" paddingBottom={15}>
+ <Box pl={2} color="black" bg="alt.100" w="100%" paddingBottom={15}>
<Flex
justifyContent="space-between"
paddingTop={4}
- pl={0}
+ pl={4}
pb={5}
- pr={2}
- alignItems="center"
+ pr={3}
+ alignItems="top"
color="black"
>
- <Flex>
- <IconButton
- variant="link"
- size="md"
- icon={<ChevronLeftIcon />}
- aria-label="Previous node"
- />
- <Heading size="md" fontWeight={400}>
+ <Flex alignItems="center" whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden">
+ <BiFile />
+ <Heading
+ pl={2}
+ whiteSpace="nowrap"
+ textOverflow="ellipsis"
+ overflow="hidden"
+ lineHeight={1}
+ size="sm"
+ fontWeight={600}
+ color={'gray.800'}
+ >
{previewRoamNode?.title}
</Heading>
</Flex>
-
<IconButton
// eslint-disable-next-line react/jsx-no-undef
icon={<HamburgerIcon />}
@@ -116,6 +97,7 @@ const Sidebar = (props: SidebarProps) => {
onClick={onClose}
/>
</Flex>
+ <Toolbar {...{ setJustification, setIndent, setFont, justification }} />
<Scrollbars
//autoHeight
//autoHeightMax={600}
@@ -132,220 +114,19 @@ const Sidebar = (props: SidebarProps) => {
/>
)}
>
- <VStack height="100%" alignItems="left" bg="alt.100" paddingLeft={10}>
- <Box
- pr={8}
- overflow="scroll"
- height="85%"
- className="org"
- sx={{
- '.katex': { overflowX: 'scroll' },
- h1: { fontSize: '20', fontWeight: 'bold', marginBottom: 3 },
- h2: {
- fontSize: '18',
- marginBottom: 2,
- color: 'black',
- },
- h3: {
- fontSize: '16',
- fontWeight: '600 !important',
- marginBottom: '.5em',
- },
- h4: {
- fontSize: '14',
- fontWeight: '500 !important',
- marginBottom: '.25em',
- fontStyle: 'italic',
- },
- a: {
- color: highlightColor,
- },
- ol: {
- paddingLeft: '5',
- },
- ul: {
- paddingLeft: '5',
- },
- p: {
- paddingBottom: '.5em',
- },
- div: {
- fontSize: 'small',
- hyphens: 'auto !important',
- textAlign: justificationList[justification],
- },
- '.title': {
- textAlign: 'center',
- marginBottom: '.2em',
- },
- '.subtitle': {
- textAlign: 'center',
- fontSize: 'medium',
- fontWeight: 'bold',
- marginTop: 0,
- },
- '.todo': { fontFamily: 'monospace', color: 'red' },
- '.equationContainer': {
- display: 'table',
- textAlign: 'center',
- width: '100%',
- },
- '.equation': {
- verticalAlign: 'middle',
- },
- '.equation-label': {
- display: 'tableCell',
- textAlign: 'right',
- verticalAlign: 'middle',
- },
- '.inlinetask': {
- padding: '10px',
- border: '2px solid gray',
- margin: '10px',
- background: '#ffffcc',
- },
- '#org-div-home-and-up': {
- textAlign: 'right',
- fontSize: '70 % ',
- whiteSpace: 'nowrap',
- },
- textarea: { overflowX: 'auto' },
- '.linenr': { fontSize: 'smaller' },
- '.code-highlighted': { backgroundColor: '#ffff00' },
- '.org-info-js_info-navigation': { borderStyle: 'none' },
- '#org-info-js_console-label': {
- fontSize: '10px',
- fontWeight: 'bold',
- whiteSpace: 'nowrap',
- },
- '.org-info-js_search-highlight': {
- backgroundColor: '#ffff00',
- color: '#000000',
- fontWeight: 'bold',
- },
- '.org-svg': { width: '90%' },
- '.done': { fontFamily: 'monospace', color: 'green' },
- '.priority': { fontFamily: 'monospace', color: 'orange' },
- '.tag': {
- backgroundColor: '#eee',
- fontFamily: 'monospace',
- padding: '2px',
- fontSize: '80%',
- fontWeight: 'normal',
- },
- '.timestamp': { color: '#bebebe' },
- '.timestamp-kwd': { color: '#5f9ea0' },
- '.org-right': { marginLeft: 'auto', marginRight: '0px', textAlign: 'right' },
- '.org-left': { marginLeft: '0px', marginRight: 'auto', textAlign: 'left' },
- '.org-center': { marginLeft: 'auto', marginRight: 'auto', textAlign: 'center' },
- '.underline': { textDecoration: 'underline' },
- '#postamble p': { fontSize: '90%', margin: '.2em' },
- '#preamble p': { fontSize: '90%', margin: '.2em' },
- 'p.verse': { marginLeft: '3%' },
- pre: {
- border: '1px solid #e6e6e6',
- borderRadius: '3px',
- backgroundColor: '#f2f2f2',
- padding: '8pt',
- fontFamily: 'monospace',
- overflow: 'auto',
- margin: '1.2em',
- },
- 'pre.src': {
- position: 'relative',
- overflow: 'auto',
- },
- 'pre.src:before': {
- display: 'none',
- position: 'absolute',
- top: '-8px',
- right: '12px',
- padding: '3px',
- color: '#555',
- backgroundColor: '#f2f2f299',
- },
- 'caption.t-above': { captionSide: 'top' },
- 'caption.t-bottom': { captionSide: 'bottom' },
- 'th.org-right': { textAlign: 'center' },
- 'th.org-left': { textAlign: 'center' },
- 'th.org-center': { textAlign: 'center' },
- 'td.org-right': { textAlign: 'right' },
- 'td.org-left': { textAlign: 'left' },
- 'td.org-center': { textAlign: 'center' },
- '.footpara': { display: 'inline' },
- '.footdef': { marginBottom: '1em' },
- '.figure': { padding: '1em' },
- '.figure p': { textAlign: 'center' },
- // org-like indents
- 'h1, h1 ~ *,h2 ~ h1,h2 ~ h1 ~ *,h3 ~ h1,h3 ~ h1 ~ *': {
- marginLeft: 0 * indent,
- },
- 'h2 ~ *, h1 ~ h2,h1 ~ h2 ~ *:not(h1):not(h3)': {
- marginLeft: 2 * indent,
- },
- 'h3 ~ *,h1 ~ h3,h1 ~ h3 ~ *:not(h1):not(h2)': {
- marginLeft: 4 * indent,
- },
+ <VStack height="100%" alignItems="left" bg="alt.100" paddingLeft={4}>
+ <Note
+ {...{
+ setPreviewNode,
+ previewNode,
+ nodeById,
+ nodeByCite,
+ setSidebarHighlightedNode,
+ justification,
+ justificationList,
+ linksByNodeId,
}}
- >
- {previewNode?.id && (
- <Box>
- <Flex pt={1} alignItems="center" justifyContent="flex-end">
- <IconButton
- variant="ghost"
- aria-label="Justify content"
- icon={
- [
- <BiAlignJustify key="justify" />,
- <BiAlignLeft key="left" />,
- <BiAlignRight key="right" />,
- <BiAlignMiddle key="center" />,
- ][justification]
- }
- onClick={() => setJustification((curr) => (curr + 1) % 4)}
- />
- <IconButton
- variant="ghost"
- aria-label="Indent Text"
- icon={<BiRightIndent />}
- onClick={() => {
- console.log(indent)
- setIndent((curr: number) => (indent ? 0 : 1))
- }}
- />
- <IconButton
- variant="ghost"
- aria-label="Change font"
- icon={<BiFont />}
- onClick={() => {
- setFont((curr: string) =>
- curr === 'sans serif' ? 'serif' : 'sans serif',
- )
- }}
- />
- </Flex>
- <Flex height="100%" flexDirection="column" justifyContent="space-between">
- <UniOrg
- {...{
- getText,
- setPreviewNode,
- previewNode,
- nodeById,
- }}
- />
- <Backlinks
- {...{
- setPreviewNode,
- previewNode,
- nodeById,
- linksByNodeId,
- getText,
- }}
- />
- </Flex>
- </Box>
- )}
- </Box>
+ />
</VStack>
</Scrollbars>
</Box>
@@ -355,7 +136,3 @@ const Sidebar = (props: SidebarProps) => {
}
export default Sidebar
-
-/* <Box marginLeft="auto" zIndex={5000} bg="alt.100" maxHeight="100%" width= "30%" padding={8} borderRadius={2}>
- <Heading size="sm">{previewNode.title}</Heading>
-</Box> */
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-23 04:13:07 +0000