Feat/collapse: add collapsible/toggleable headers and outline layout in the preview panel (#139)

* feat(preview): collapsible headings

* feat(preview): collapsible headings

* feat(collapse): change icons for headings

* feat(collapse):

* feat(collapse): use new uniorg and better looks

* feat(collapse): fix typescript errors

* fix(ci): better filter

* feat(collapse): more small adjustments

* feat(collapse): collapse all button

* fix(collapse): fix global css

* fix(cd): remove yarn and add export

* fix(collapse): type-errors

* fix(cd): fix format-all fucking up yml

1 files changed, 29 insertions, 51 deletions

diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index 33af598..21465c6 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -3,21 +3,9 @@ import React, { useContext, useEffect, useRef, useState } from 'react'
 import { Toolbar } from './Toolbar'
 import { TagBar } from './TagBar'
 import { Note } from './Note'
+import { Title } from './Title'
 
-import {
-  Button,
-  Slide,
-  VStack,
-  Flex,
-  Heading,
-  Box,
-  IconButton,
-  Tooltip,
-  HStack,
-  TagLabel,
-  Tag,
-  TagRightIcon,
-} from '@chakra-ui/react'
+import { VStack, Flex, Box, IconButton } from '@chakra-ui/react'
 import { Collapse } from './Collapse'
 import { Scrollbars } from 'react-custom-scrollbars-2'
 import {
@@ -29,7 +17,6 @@ import {
   ViewOffIcon,
 } from '@chakra-ui/icons'
 import { BiDotsVerticalRounded, BiFile, BiNetworkChart } from 'react-icons/bi'
-import { BsReverseLayoutSidebarInsetReverse } from 'react-icons/bs'
 
 import { GraphData, NodeObject, LinkObject } from 'force-graph'
 import { OrgRoamNode } from '../../api'
@@ -91,7 +78,7 @@ const Sidebar = (props: SidebarProps) => {
   } = props
 
   const { highlightColor } = useContext(ThemeContext)
-  const [previewRoamNode, setPreviewRoamNode] = useState<OrgRoamNode>()
+  const [previewRoamNode, setPreviewRoamNode] = useState<OrgRoamNode | undefined>()
   const [sidebarWidth, setSidebarWidth] = usePersistantState<number>('sidebarWidth', 400)
 
   useEffect(() => {
@@ -103,10 +90,12 @@ const Sidebar = (props: SidebarProps) => {
     setPreviewRoamNode(previewNode as OrgRoamNode)
   }, [previewNode?.id])
 
-  const [justification, setJustification] = useState(1)
+  const [justification, setJustification] = usePersistantState('justification', 1)
+  const [outline, setOutline] = usePersistantState('outline', false)
   const justificationList = ['justify', 'start', 'end', 'center']
   const [font, setFont] = useState('sans serif')
   const [indent, setIndent] = useState(0)
+  const [collapse, setCollapse] = useState(false)
   //maybe want to close it when clicking outside, but not sure
   //const outsideClickRef = useRef();
   return (
@@ -142,16 +131,28 @@ const Sidebar = (props: SidebarProps) => {
             //whiteSpace="nowrap"
             // overflow="hidden"
             // textOverflow="ellipsis"
-            pl={4}
+            pl={2}
             alignItems="center"
             color="black"
             width="100%"
           >
-            <Flex flexShrink={0}>
-              <BiFile
-                onContextMenu={(e) => {
-                  e.preventDefault()
-                  openContextMenu(previewNode, e)
+            <Flex pt={1} flexShrink={0}>
+              <Toolbar
+                {...{
+                  setJustification,
+                  setIndent,
+                  setFont,
+                  justification,
+                  setPreviewNode,
+                  canUndo,
+                  canRedo,
+                  resetPreviewNode,
+                  previousPreviewNode,
+                  nextPreviewNode,
+                  outline,
+                  setOutline,
+                  collapse,
+                  setCollapse,
                 }}
               />
             </Flex>
@@ -163,20 +164,7 @@ const Sidebar = (props: SidebarProps) => {
                 e.preventDefault()
                 openContextMenu(previewNode, e)
               }}
-            >
-              <Heading
-                pl={2}
-                whiteSpace="nowrap"
-                textOverflow="ellipsis"
-                overflow="hidden"
-                lineHeight={1}
-                size="sm"
-                fontWeight={600}
-                color={'gray.800'}
-              >
-                {previewRoamNode?.title}
-              </Heading>
-            </Flex>
+            ></Flex>
             <Flex flexDir="row" ml="auto">
               <IconButton
                 // eslint-disable-next-line react/jsx-no-undef
@@ -195,20 +183,6 @@ const Sidebar = (props: SidebarProps) => {
               />
             </Flex>
           </Flex>
-          <Toolbar
-            {...{
-              setJustification,
-              setIndent,
-              setFont,
-              justification,
-              setPreviewNode,
-              canUndo,
-              canRedo,
-              resetPreviewNode,
-              previousPreviewNode,
-              nextPreviewNode,
-            }}
-          />
           <Scrollbars
             //autoHeight
             //autoHeightMax={600}
@@ -232,6 +206,7 @@ const Sidebar = (props: SidebarProps) => {
               bg="alt.100"
               paddingLeft={4}
             >
+              <Title previewNode={previewRoamNode} />
               <TagBar
                 {...{ filter, setFilter, tagColors, setTagColors, openContextMenu, previewNode }}
               />
@@ -246,6 +221,9 @@ const Sidebar = (props: SidebarProps) => {
                   justificationList,
                   linksByNodeId,
                   openContextMenu,
+                  outline,
+                  setOutline,
+                  collapse,
                 }}
               />
             </VStack>