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, 1 deletions

diff --git a/components/Sidebar/Toolbar.tsx b/components/Sidebar/Toolbar.tsx
index 6cbecae..71f3807 100644
--- a/components/Sidebar/Toolbar.tsx
+++ b/components/Sidebar/Toolbar.tsx
@@ -8,7 +8,9 @@ import {
   BiFont,
   BiRightIndent,
 } from 'react-icons/bi'
+import { MdOutlineExpand, MdOutlineCompress } from 'react-icons/md'
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
+import { IoIosListBox, IoMdListBox } from 'react-icons/io'
 import { NodeObject } from 'force-graph'
 
 export interface ToolbarProps {
@@ -22,6 +24,10 @@ export interface ToolbarProps {
   resetPreviewNode: any
   previousPreviewNode: any
   nextPreviewNode: any
+  outline: boolean
+  setOutline: any
+  collapse: boolean
+  setCollapse: any
 }
 
 export const Toolbar = (props: ToolbarProps) => {
@@ -36,13 +42,18 @@ export const Toolbar = (props: ToolbarProps) => {
     resetPreviewNode,
     previousPreviewNode,
     nextPreviewNode,
+    outline,
+    setOutline,
+    collapse,
+    setCollapse,
   } = props
   return (
-    <Flex flex="0 1 40px" pb={3} alignItems="center" justifyContent="space-between" pl={1} pr={1}>
+    <Flex flex="0 1 40px" pb={3} alignItems="center" justifyContent="space-between" pr={1}>
       <Flex>
         <ButtonGroup isAttached>
           <Tooltip label="Go backward">
             <IconButton
+              _focus={{}}
               variant="subtle"
               icon={<ChevronLeftIcon />}
               aria-label="Previous node"
@@ -52,6 +63,7 @@ export const Toolbar = (props: ToolbarProps) => {
           </Tooltip>
           <Tooltip label="Go forward">
             <IconButton
+              _focus={{}}
               variant="subtle"
               icon={<ChevronRightIcon />}
               aria-label="Next node"
@@ -77,6 +89,22 @@ export const Toolbar = (props: ToolbarProps) => {
             onClick={() => setJustification((curr: number) => (curr + 1) % 4)}
           />
         </Tooltip>
+        <Tooltip label="Toggle outline view">
+          <IconButton
+            variant="subtle"
+            aria-label="Justify content"
+            icon={outline ? <IoIosListBox /> : <IoMdListBox />}
+            onClick={() => setOutline((curr: boolean) => !curr)}
+          />
+        </Tooltip>
+        <Tooltip label="Toggle headers">
+          <IconButton
+            variant="subtle"
+            aria-label="Toggle headers"
+            icon={collapse ? <MdOutlineExpand /> : <MdOutlineCompress />}
+            onClick={() => setCollapse((curr: boolean) => !curr)}
+          />
+        </Tooltip>
         {/* <Tooltip label="Indent trees">
           <IconButton
             variant="subtle"