Update layout

This commit updates the viewfinder library (this has since been
transferred from tesseract-design to theoryofnekomata).

package.json

@@ -11,7 +11,7 @@
 	"homepage": "https://note.modal.sh",
 	"dependencies": {
 		"@tesseract-design/react-common": "^0.3.0",
-		"@tesseract-design/viewfinder": "0.1.1",
+		"@theoryofnekomata/viewfinder": "0.2.4",
 		"mobiledoc-kit": "^0.13.2",
 		"next": "10.2.0",
 		"react": "17.0.2",

src/components/molecules/Editor/index.tsx

@@ -33,6 +33,8 @@ const RawInput = styled('textarea')({
 	display: 'block',
 	width: '100%',
 	resize: 'vertical',
+	fontFamily: 'var(--font-family-monospace, monospace)',
+	lineHeight: 1.25,
 })
 
 const ToolbarBase = styled('div')({
@@ -59,7 +61,8 @@ const Editor: React.FC<Props> = ({
 }) => {
 	const [hydrated, setHydrated] = React.useState(false)
 	React.useEffect(() => {
-		setHydrated(true)
+		// setHydrated(true)
+		setHydrated(false)
 	}, [])
 
 	if (hydrated) {

src/components/organisms/forms/NoteForm/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import {LeftSidebarWithMenu} from '@tesseract-design/viewfinder'
+import {LeftSidebarWithMenu} from '@theoryofnekomata/viewfinder'
 import Editor from '../../../molecules/Editor'
 
 const TitleContainer = styled(LeftSidebarWithMenu.ContentContainer)({

src/components/templates/BinView/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import {LeftSidebarWithMenu} from '@tesseract-design/viewfinder'
+import {LeftSidebarWithMenu} from '@theoryofnekomata/viewfinder'
 import Link from '../../molecules/Link'
 import {Subpage} from '../../../utils/query'
 

src/components/templates/NoteView/index.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import Head from 'next/head'
 import * as T from '@tesseract-design/react-common'
-import {LeftSidebarWithMenu} from '@tesseract-design/viewfinder'
+import {LeftSidebarWithMenu} from '@theoryofnekomata/viewfinder'
 import styled from 'styled-components'
 import Link from '../../molecules/Link'
-import {Subpage} from '../../../utils/query'
+import { QueryFragment, Subpage } from '../../../utils/query'
 import Note from '../../../models/Note'
 import Brand from '../../molecules/Brand'
 import NoteLinkContent from '../../molecules/NoteLinkContent'
@@ -26,6 +26,10 @@ const CenteredContent = styled(LeftSidebarWithMenu.ContentContainer)({
 	},
 })
 
+const Content = styled('div')({
+	margin: '2rem 0',
+})
+
 const SidebarTitle = styled('h1')({
 	margin: 0,
 	lineHeight: '4rem',
@@ -35,6 +39,61 @@ const SidebarSubtitle = styled('p')({
 	margin: '2rem 0',
 })
 
+const TopBarComponent = styled('div')({
+	backgroundColor: 'var(--color-bg, white)',
+	'::before': {
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+	'::after': {
+		backgroundColor: 'black',
+		opacity: 0.5,
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+})
+
+const SidebarMainComponent = styled('div')({
+	backgroundColor: 'var(--color-bg, white)',
+	zIndex: 2,
+	'::after': {
+		backgroundColor: 'black',
+		opacity: 0.25,
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+})
+
+const SidebarMenuComponent = styled('div')({
+	backgroundColor: 'var(--color-bg, white)',
+	'::after': {
+		backgroundColor: 'black',
+		opacity: 0.4,
+		content: "''",
+		width: '100%',
+		height: '100%',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		pointerEvents: 'none',
+	},
+})
+
 type Props = {
 	subpage: Subpage,
 	notes: Note[],
@@ -60,6 +119,9 @@ const NoteView: React.FC<Props> = ({
 				</title>
 			</Head>
 			<LeftSidebarWithMenu.Layout
+				topBarComponent={TopBarComponent}
+				sidebarMainComponent={SidebarMainComponent}
+				sidebarMenuComponent={SidebarMenuComponent}
 				brand={
 					<Brand />
 				}
@@ -92,8 +154,26 @@ const NoteView: React.FC<Props> = ({
 				]}
 				sidebarMainOpen={subpage === Subpage.SIDEBAR}
 				moreItemsOpen={subpage === Subpage.MORE}
+				menuLink={
+					<Link
+						href={{
+							query: currentNote
+								? {
+									noteId: currentNote.id,
+									[QueryFragment.SUBPAGE]: Subpage.SIDEBAR,
+								}
+								: {
+									[QueryFragment.SUBPAGE]: Subpage.SIDEBAR,
+								},
+						}}
+					>
+						<T.Icon
+							name="menu"
+						/>
+					</Link>
+				}
 				sidebarMain={
-					<>
+					<Content>
 						{currentFolder && (
 							<LeftSidebarWithMenu.SidebarMainContainer>
 								<SidebarTitle>
@@ -139,7 +219,7 @@ const NoteView: React.FC<Props> = ({
 								</LeftSidebarWithMenu.SidebarMainContainer>
 							</SidebarLink>
 						))}
-					</>
+					</Content>
 				}
 				moreLinkMenuItem={{
 					label: 'More',
@@ -150,7 +230,8 @@ const NoteView: React.FC<Props> = ({
 					),
 					url: {
 						query: {
-							subpage: 'more',
+							noteId: currentNote?.id,
+							[QueryFragment.SUBPAGE]: 'more',
 						}
 					}
 				}}
@@ -189,12 +270,14 @@ const NoteView: React.FC<Props> = ({
 					</CenteredContent>
 				)}
 				{(currentNote as Note) && (
-					<NoteForm
-						defaultValues={{
-							title: currentNote.title,
-							content: currentNote.contentVersions.slice(-1)[0].content,
-						}}
-					/>
+					<Content>
+						<NoteForm
+							defaultValues={{
+								title: currentNote.title,
+								content: currentNote.contentVersions.slice(-1)[0].content,
+							}}
+						/>
+					</Content>
 				)}
 			</LeftSidebarWithMenu.Layout>
 		</>