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, 18 insertions, 4 deletions

diff --git a/components/Sidebar/Note.tsx b/components/Sidebar/Note.tsx
index ec267a3..197fa76 100644
--- a/components/Sidebar/Note.tsx
+++ b/components/Sidebar/Note.tsx
@@ -5,7 +5,7 @@ import { NodeById, NodeByCite, LinksByNodeId } from '../../pages'
 import { Box, Flex } from '@chakra-ui/react'
 import { UniOrg } from '../../util/uniorg'
 import { Backlinks } from '../../components/Sidebar/Backlinks'
-import { noteStyle } from './noteStyle'
+import { defaultNoteStyle, viewerNoteStyle, outlineNoteStyle } from './noteStyle'
 
 export interface NoteProps {
   setPreviewNode: any
@@ -17,6 +17,8 @@ export interface NoteProps {
   justificationList: string[]
   linksByNodeId: LinksByNodeId
   openContextMenu: any
+  outline: boolean
+  collapse: boolean
 }
 
 export const Note = (props: NoteProps) => {
@@ -30,20 +32,29 @@ export const Note = (props: NoteProps) => {
     setSidebarHighlightedNode,
     linksByNodeId,
     openContextMenu,
+    outline,
+    collapse,
   } = props
+  const extraStyle = outline ? outlineNoteStyle : viewerNoteStyle
   return (
     <Box
       pr={8}
+      pt={2}
       height="100%"
       className="org"
       sx={{
-        ...noteStyle,
-
+        ...defaultNoteStyle,
+        ...extraStyle,
         textAlign: justificationList[justification],
       }}
     >
       {previewNode?.id && (
-        <Flex height="100%" flexDirection="column" justifyContent="space-between">
+        <Flex
+          className="wrapClass"
+          height="100%"
+          flexDirection="column"
+          justifyContent="space-between"
+        >
           <UniOrg
             {...{
               setPreviewNode,
@@ -52,6 +63,8 @@ export const Note = (props: NoteProps) => {
               nodeByCite,
               setSidebarHighlightedNode,
               openContextMenu,
+              outline,
+              collapse,
             }}
           />
           <Backlinks
@@ -63,6 +76,7 @@ export const Note = (props: NoteProps) => {
               nodeByCite,
               setSidebarHighlightedNode,
               openContextMenu,
+              outline,
             }}
           />
         </Flex>