feat(preview): proper file preview with api routing

6 files changed, 524 insertions, 333 deletions

diff --git a/components/Sidebar/Backlinks.tsx b/components/Sidebar/Backlinks.tsx
index f899d3e..8c1e9bc 100644
--- a/components/Sidebar/Backlinks.tsx
+++ b/components/Sidebar/Backlinks.tsx
@@ -1,4 +1,4 @@
-import { LinksByNodeId, NodeById } from '../../pages/index'
+import { LinksByNodeId, NodeByCite, NodeById } from '../../pages/index'
 
 import { GraphData, NodeObject, LinkObject } from 'force-graph'
 
@@ -12,17 +12,34 @@ export interface BacklinksProps {
   setPreviewNode: any
   nodeById: NodeById
   linksByNodeId: LinksByNodeId
-  getText: any
+  nodeByCite: NodeByCite
+  setSidebarHighlightedNode: OrgRoamNode
 }
 
 import { PreviewLink } from './Link'
+import { OrgRoamNode } from '../../api'
 
 export const Backlinks = (props: BacklinksProps) => {
-  const { previewNode, setPreviewNode, nodeById, linksByNodeId, getText } = props
+  const {
+    previewNode,
+    setPreviewNode,
+    setSidebarHighlightedNode,
+    nodeById,
+    linksByNodeId,
+    nodeByCite,
+  } = props
   const links = linksByNodeId[previewNode?.id] ?? []
+
+  const backLinks = links
+    .filter((link: LinkObject) => {
+      const [source, target] = normalizeLinkEnds(link)
+      return source !== previewNode?.id
+    })
+    .map((l) => l.source)
+
   return (
     <Box>
-      <Heading pt={4}>{'Backlinks (' + links.length + ')'}</Heading>
+      <Heading pt={4}>{`Backlinks (${backLinks.length})`}</Heading>
       <VStack
         pt={2}
         spacing={3}
@@ -32,20 +49,19 @@ export const Backlinks = (props: BacklinksProps) => {
         color="gray.800"
       >
         {previewNode?.id &&
-          links.map((link: LinkObject, i: number) => {
-            const [source, target] = normalizeLinkEnds(link)
-            if (source === previewNode?.id) {
-              return
-            }
+          backLinks.map((link) => {
+            const title = nodeById[link as string]?.title ?? ''
             return (
-              <Box overflow="hidden" p={3} bg="gray.300" width="100%" key={source}>
+              <Box overflow="hidden" p={3} bg="gray.300" width="100%" key={link}>
                 <PreviewLink
-                  href={'id:' + source}
-                  children={nodeById[source]?.title}
+                  nodeByCite={nodeByCite}
+                  setSidebarHighlightedNode={setSidebarHighlightedNode}
+                  href={`id:${link as string}`}
                   nodeById={nodeById}
                   setPreviewNode={setPreviewNode}
-                  getText={getText}
-                />
+                >
+                  {nodeById[link as string]?.title}
+                </PreviewLink>
               </Box>
             )
           })}
diff --git a/components/Sidebar/Link.tsx b/components/Sidebar/Link.tsx
index ff812ef..9515b6d 100644
--- a/components/Sidebar/Link.tsx
+++ b/components/Sidebar/Link.tsx
@@ -1,6 +1,7 @@
 import {
   Box,
   Button,
+  Link,
   Popover,
   PopoverArrow,
   PopoverBody,
@@ -10,9 +11,9 @@ import {
   PopoverTrigger,
   Portal,
   Text,
+  useTheme,
 } from '@chakra-ui/react'
-import React, { useState } from 'react'
-import UniOrg from '../../util/uniorg'
+import React, { ReactElement, useContext, useEffect, useMemo, useState } from 'react'
 
 import unified from 'unified'
 //import createStream from 'unified-stream'
@@ -22,57 +23,184 @@ import uniorg2rehype from 'uniorg-rehype'
 import katex from 'rehype-katex'
 import 'katex/dist/katex.css'
 import rehype2react from 'rehype-react'
+import { ThemeContext } from '../../util/themecontext'
+import { NodeByCite, NodeById } from '../../pages'
 
 export interface LinkProps {
-  href: string
+  href: any
   children: any
-  testProp: string
-  getText: any
   previewNode?: any
   setPreviewNode: any
+  setSidebarHighlightedNode: any
+  nodeByCite: NodeByCite
+  nodeById: NodeById
 }
 
-export const PreviewLink = (props: any) => {
-  const { href, children, nodeById, getText, previewNode, setPreviewNode } = props
-  const [previewText, setPreviewText] = useState('')
-  const [whatever, type, uri] = [...href.matchAll(/(.*?)\:(.*)/g)][0]
+export interface NormalLinkProps {
+  setPreviewNode: any
+  nodeById: NodeById
+  nodeByCite: NodeByCite
+  href: any
+  children: any
+  setSidebarHighlightedNode: any
+}
 
-  const processor = unified().use(uniorgParse).use(uniorg2rehype).use(katex).use(rehype2react, {
-    createElement: React.createElement,
-    // eslint-disable-next-line react/display-name
-  })
+import { hexToRGBA, getThemeColor } from '../../pages/index'
+import noteStyle from './noteStyle'
 
-  type === 'id' && getText(uri, setPreviewText)
+export const NormalLink = (props: NormalLinkProps) => {
+  const { setSidebarHighlightedNode, setPreviewNode, nodeById, href, children } = props
+  const { highlightColor } = useContext(ThemeContext)
 
+  const theme = useTheme()
+  const coolHighlightColor = getThemeColor(highlightColor, theme)
+  const [whatever, type, uri] = [...href.matchAll(/(.*?)\:(.*)/g)][0]
   return (
-    <>
-      <Popover trigger="hover" isLazy position="relative" zIndex="tooltip">
-        <PopoverTrigger>
-          <Button size="sm" onClick={() => setPreviewNode(nodeById[uri])} variant="link">
-            {children}
-          </Button>
-        </PopoverTrigger>
-        <Portal zIndex={100000} position="relative">
-          <PopoverContent boxShadow="xl" position="relative" zIndex="tooltip">
-            <PopoverHeader pl={5} fontSize="sm" zIndex="tooltip" fontWeight="semibold">
-              {children}
-            </PopoverHeader>
-            <PopoverArrow zIndex={10000} />
-            <PopoverCloseButton zIndex={10000} />
-            <PopoverBody
-              pb={5}
-              fontSize="xs"
-              px={5}
+    <Text
+      onMouseEnter={() => setSidebarHighlightedNode(nodeById[uri])}
+      onMouseLeave={() => setSidebarHighlightedNode({})}
+      tabIndex={0}
+      display="inline"
+      overflow="hidden"
+      fontWeight={500}
+      color={highlightColor}
+      textDecoration="underline"
+      onClick={() => setPreviewNode(nodeById[uri])}
+      _hover={{ textDecoration: 'none', cursor: 'pointer', bgColor: coolHighlightColor + '22' }}
+      _focus={{ outlineColor: highlightColor }}
+    >
+      {children}
+    </Text>
+  )
+}
+
+export const PreviewLink = (props: LinkProps) => {
+  const {
+    href,
+    children,
+    nodeById,
+    setSidebarHighlightedNode,
+    previewNode,
+    setPreviewNode,
+    nodeByCite,
+  } = props
+  // TODO figure out how to properly type this
+  // see https://github.com/rehypejs/rehype-react/issues/25
+  const [orgText, setOrgText] = useState<any>()
+  const [whatever, type, uri] = [...href.matchAll(/(.*?)\:(.*)/g)][0]
+
+  const getId = (type: string, uri: string) => {
+    if (type === 'id') {
+      return uri
+    }
+
+    if (type.includes('cite')) {
+      const node = nodeByCite[uri] ?? false
+      if (!node) {
+        return ''
+      }
+      if (node?.properties.FILELESS) {
+        return ''
+      }
+      return node?.id
+    }
+    return ''
+  }
+
+  const id = getId(type, uri)
+
+  const processor = unified()
+    .use(uniorgParse)
+    .use(uniorg2rehype)
+    .use(katex)
+    .use(rehype2react, {
+      createElement: React.createElement,
+      components: {
+        // eslint-disable-next-line react/display-name
+        a: ({ children, href }) => (
+          <NormalLink
+            setSidebarHighlightedNode={setSidebarHighlightedNode}
+            nodeById={nodeById}
+            nodeByCite={nodeByCite}
+            setPreviewNode={setPreviewNode}
+            {...{ children, href }}
+          />
+        ),
+      },
+    })
+
+  const file = encodeURIComponent(nodeById[id]?.file as string)
+  const getText = () => {
+    console.log(nodeById[id]?.title)
+    fetch(`api/notes/${file}`)
+      .then((res) => {
+        return res.text()
+      })
+      .then((res) => {
+        if (res !== 'error') {
+          const text = processor.processSync(res).result
+          setOrgText(text)
+          return
+        }
+      })
+      .catch((e) => {
+        console.log(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.'
+      })
+  }
+
+  useMemo(() => {
+    getText()
+  }, [id])
+  if (id) {
+    return (
+      <>
+        <Popover gutter={12} trigger="hover" placement="top-start">
+          <PopoverTrigger>
+            <Box display="inline">
+              <NormalLink
+                key={nodeById[id]?.title ?? id}
+                {...{
+                  setSidebarHighlightedNode,
+                  setPreviewNode,
+                  nodeById,
+                  href,
+                  children,
+                  nodeByCite,
+                }}
+              />
+            </Box>
+          </PopoverTrigger>
+          <Portal>
+            <PopoverContent
+              key={nodeById[id]?.title ?? id}
+              boxShadow="xl"
               position="relative"
               zIndex="tooltip"
-              maxHeight={300}
-              overflow="scroll"
+              onMouseEnter={() => setSidebarHighlightedNode(nodeById[id] ?? {})}
+              onMouseLeave={() => setSidebarHighlightedNode({})}
             >
-              {uri && <Box>{processor.processSync(previewText).result}</Box>}
-            </PopoverBody>
-          </PopoverContent>
-        </Portal>
-      </Popover>
-    </>
+              <PopoverArrow />
+              <PopoverBody
+                pb={5}
+                fontSize="xs"
+                px={5}
+                position="relative"
+                zIndex="tooltip"
+                maxHeight={300}
+                overflow="scroll"
+              >
+                <Box sx={noteStyle}>{orgText}</Box>
+              </PopoverBody>
+            </PopoverContent>
+          </Portal>
+        </Popover>
+      </>
+    )
+  }
+  return (
+    <Text display="inline" color="base.700" cursor="not-allowed">
+      {children}
+    </Text>
   )
 }
diff --git a/components/Sidebar/Note.tsx b/components/Sidebar/Note.tsx
new file mode 100644
index 0000000..ef2e2b2
--- /dev/null
+++ b/components/Sidebar/Note.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import { NodeObject } from 'force-graph'
+
+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'
+
+export interface NoteProps {
+  setPreviewNode: any
+  previewNode: NodeObject
+  nodeById: NodeById
+  nodeByCite: NodeByCite
+  setSidebarHighlightedNode: any
+  justification: number
+  justificationList: string[]
+  linksByNodeId: LinksByNodeId
+}
+
+export const Note = (props: NoteProps) => {
+  const {
+    setPreviewNode,
+    justificationList,
+    justification,
+    previewNode,
+    nodeById,
+    nodeByCite,
+    setSidebarHighlightedNode,
+    linksByNodeId,
+  } = props
+  return (
+    <Box
+      pr={8}
+      overflow="scroll"
+      height="85%"
+      className="org"
+      sx={{
+        ...noteStyle,
+
+        textAlign: justificationList[justification],
+      }}
+    >
+      {previewNode?.id && (
+        <Flex height="100%" flexDirection="column" justifyContent="space-between">
+          <UniOrg
+            {...{
+              setPreviewNode,
+              previewNode,
+              nodeById,
+              nodeByCite,
+              setSidebarHighlightedNode,
+            }}
+          />
+          <Backlinks
+            {...{
+              setPreviewNode,
+              previewNode,
+              nodeById,
+              linksByNodeId,
+              nodeByCite,
+              setSidebarHighlightedNode,
+            }}
+          />
+        </Flex>
+      )}
+    </Box>
+  )
+}
diff --git a/components/Sidebar/Toolbar.tsx b/components/Sidebar/Toolbar.tsx
new file mode 100644
index 0000000..458361f
--- /dev/null
+++ b/components/Sidebar/Toolbar.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { Text, Flex, IconButton } from '@chakra-ui/react'
+import {
+  BiAlignJustify,
+  BiAlignLeft,
+  BiAlignMiddle,
+  BiAlignRight,
+  BiFont,
+  BiRightIndent,
+} from 'react-icons/bi'
+import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
+
+export interface ToolbarProps {
+  setJustification: any
+  justification: number
+  setIndent: any
+  setFont: any
+}
+
+export const Toolbar = (props: ToolbarProps) => {
+  const { setJustification, setIndent, setFont, justification } = props
+  return (
+    <Flex py={3} alignItems="center" justifyContent="space-between" pr={4}>
+      <Flex>
+        <IconButton variant="ghost" icon={<ChevronLeftIcon />} aria-label="Previous node" />
+        <IconButton variant="ghost" icon={<ChevronRightIcon />} aria-label="Previous node" />
+      </Flex>
+      <Flex>
+        <IconButton
+          variant="ghost"
+          aria-label="Justify content"
+          icon={
+            [
+              <BiAlignJustify key="justify" />,
+              <BiAlignLeft key="left" />,
+              <BiAlignRight key="right" />,
+              <BiAlignMiddle key="center" />,
+            ][justification]
+          }
+          onClick={() => setJustification((curr: number) => (curr + 1) % 4)}
+        />
+        <IconButton
+          variant="ghost"
+          aria-label="Indent Text"
+          icon={<BiRightIndent />}
+          onClick={() => {
+            setIndent((curr: number) => (curr ? 0 : 1))
+          }}
+        />
+        <IconButton
+          variant="ghost"
+          aria-label="Change font"
+          icon={<BiFont />}
+          onClick={() => {
+            setFont((curr: string) => (curr === 'sans serif' ? 'serif' : 'sans serif'))
+          }}
+        />
+      </Flex>
+    </Flex>
+  )
+}
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> */
diff --git a/components/Sidebar/noteStyle.ts b/components/Sidebar/noteStyle.ts
new file mode 100644
index 0000000..adf715d
--- /dev/null
+++ b/components/Sidebar/noteStyle.ts
@@ -0,0 +1,140 @@
+export const noteStyle = {
+  '.katex': { overflowX: 'scroll' },
+  h1: { color: 'black', lineHeight: '1.2', fontSize: '20', fontWeight: 'bold', marginBottom: 3 },
+  h2: {
+    fontSize: '18',
+    marginBottom: 2,
+    color: 'black',
+  },
+  h3: {
+    fontSize: '16',
+    fontWeight: '600 !important',
+    marginBottom: '.5em',
+
+    color: 'black',
+  },
+  h4: {
+    fontSize: '14',
+    fontWeight: '500 !important',
+    marginBottom: '.25em',
+    fontStyle: 'italic',
+    color: 'black',
+  },
+  ol: {
+    paddingLeft: '5',
+  },
+  ul: {
+    paddingLeft: '5',
+  },
+  p: {
+    fontSize: '14',
+    fontWeight: '500 !important',
+    paddingBottom: '.5em',
+  },
+  div: {
+    hyphens: 'auto !important',
+  },
+  '.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' },
+}
+export default noteStyle