Side nav

package.json

@@ -9,7 +9,7 @@
     "url": "https://github.com/BoostIO/boost.git"
   },
   "scripts": {
-    "start": "cross-env TS_NODE_PROJECT=\"tsconfig-webpack.json\" webpack-dev-server --mode development --open",
+    "start": "cross-env TS_NODE_PROJECT=\"tsconfig-webpack.json\" webpack-dev-server --mode development --open-page \"app\"",
     "start-dev": "NODE_ENV=development electron app/index.js",
     "compile": "NODE_ENV=production webpack --config webpack.config.js --progress",
     "analyze": "NODE_ENV=production webpack --config webpack.config.js --json | webpack-bundle-size-analyzer",
@@ -60,6 +60,7 @@
     "babel-jest": "^24.9.0",
     "cross-env": "^6.0.0",
     "css-loader": "^3.2.0",
+    "error-overlay-webpack-plugin": "^0.4.1",
     "eslint": "^6.4.0",
     "eslint-config-prettier": "^6.3.0",
     "eslint-plugin-prettier": "^3.1.1",
@@ -72,7 +73,7 @@
     "react-hot-loader": "^4.12.13",
     "react-test-renderer": "^16.9.0",
     "style-loader": "^1.0.0",
-    "ts-loader": "^5.4.5",
+    "ts-loader": "^6.2.0",
     "ts-node": "^8.4.1",
     "type-fest": "^0.7.1",
     "url-loader": "^2.1.0",
@@ -89,6 +90,7 @@
     "@types/pouchdb-core": "^7.0.3",
     "@types/pouchdb-mapreduce": "^6.1.4",
     "@types/pouchdb-replication": "^6.4.2",
+    "classcat": "^4.0.2",
     "codemirror": "^5.49.0",
     "filenamify": "^2.1.0",
     "hast-util-sanitize": "^2.0.1",

src/components/App.tsx

@@ -8,6 +8,7 @@ import { StyledAppContainer } from './styled'
 import ContextMenu from './ContextMenu'
 import Dialog from './Dialog/Dialog'
 import { useDb } from '../lib/db'
+import TwoPaneLayout from './atoms/TwoPaneLayout'
 
 const App = () => {
   const { initialize, initialized } = useDb()
@@ -19,10 +20,11 @@ const App = () => {
     <ThemeProvider theme={defaultTheme}>
       <StyledAppContainer>
         {initialized ? (
-          <>
-            <SideNavigator />
-            <Router />
-          </>
+          <TwoPaneLayout
+            defaultLeftWidth={160}
+            left={<SideNavigator />}
+            right={<Router />}
+          />
         ) : (
           <div>Loading data</div>
         )}

src/components/NotePage/NoteDetail/NoteDetail.tsx

@@ -6,6 +6,7 @@ import styled from '../../../lib/styled'
 import CodeEditor from '../../atoms/CodeEditor'
 import MarkdownPreviewer from '../../atoms/MarkdownPreviewer'
 import NoteDetailToolbar from './NoteDetailToolbar'
+import TwoPaneLayout from '../../atoms/TwoPaneLayout'
 
 const StyledNoteDetailContainer = styled.div`
   display: flex;
@@ -41,31 +42,28 @@ const StyledNoteDetailContainer = styled.div`
     margin: 2px;
     position: relative;
     border-top: solid 1px ${({ theme }) => theme.colors.border};
-    & > textarea {
+    .CodeMirror {
       position: absolute;
       top: 0;
       bottom: 0;
-      resize: none;
-      padding: 4px;
       width: 100%;
-      border: none;
-      box-sizing: border-box;
+      height: 100%;
     }
-    .CodeMirror {
+    .MarkdownPreviewer {
       position: absolute;
       top: 0;
       bottom: 0;
       width: 100%;
       height: 100%;
+      overflow: auto;
+      padding: 0 10px;
     }
-    .MarkdownPreviewer {
+    .split {
       position: absolute;
       top: 0;
       bottom: 0;
       width: 100%;
       height: 100%;
-      overflow: auto;
-      padding: 0 10px;
     }
   }
 `
@@ -106,7 +104,10 @@ export default class NoteDetail extends React.Component<
   }
   titleInputRef = React.createRef<HTMLInputElement>()
   newTagNameInputRef = React.createRef<HTMLInputElement>()
-  contentTextareaRef = React.createRef<HTMLTextAreaElement>()
+  codeMirror?: CodeMirror.EditorFromTextArea
+  codeMirrorRef = (codeMirror: CodeMirror.EditorFromTextArea) => {
+    this.codeMirror = codeMirror
+  }
 
   static getDerivedStateFromProps(
     props: NoteDetailProps,
@@ -254,6 +255,12 @@ export default class NoteDetail extends React.Component<
     this.setState({ mode })
   }
 
+  refreshCodeEditor = () => {
+    if (this.codeMirror != null) {
+      this.codeMirror.refresh()
+    }
+  }
+
   render() {
     const { note } = this.props
 
@@ -293,9 +300,26 @@ export default class NoteDetail extends React.Component<
               {this.state.mode === 'edit' ? (
                 <CodeEditor
                   key={note._id}
+                  codeMirrorRef={this.codeMirrorRef}
                   value={this.state.content}
                   onChange={this.updateContent}
                 />
+              ) : this.state.mode === 'split' ? (
+                <TwoPaneLayout
+                  className='split'
+                  defaultLeftWidth={400}
+                  maxLeftWidth={800}
+                  left={
+                    <CodeEditor
+                      key={note._id}
+                      codeMirrorRef={this.codeMirrorRef}
+                      value={this.state.content}
+                      onChange={this.updateContent}
+                    />
+                  }
+                  right={<MarkdownPreviewer content={this.state.content} />}
+                  onResizeEnd={this.refreshCodeEditor}
+                />
               ) : (
                 <MarkdownPreviewer content={this.state.content} />
               )}

src/components/NotePage/NoteList/NoteItem.tsx

@@ -13,6 +13,7 @@ const StyledNoteListItem = styled.div<{ active: boolean }>`
     color: ${theme.colors.inverseText};`}
   border-bottom: solid 1px ${({ theme }) => theme.colors.border};
   padding: 8px;
+  user-select: none;
 
   a {
     text-decoration: none;

src/components/NotePage/NoteList/NoteList.tsx

@@ -4,7 +4,8 @@ import { NoteDoc } from '../../../lib/db/types'
 import styled from '../../../lib/styled'
 import Toolbar from '../../atoms/Toolbar'
 import ToolbarIconButton from '../../atoms/ToolbarIconButton'
-import { mdiSquareEditOutline } from '@mdi/js'
+import { mdiMagnify, mdiSquareEditOutline } from '@mdi/js'
+import ToolbarIconInput from '../../atoms/ToolbarIconInput'
 
 const StyledContainer = styled.div`
   display: flex;
@@ -18,6 +19,9 @@ const StyledContainer = styled.div`
     list-style: none;
     overflow-y: auto;
   }
+  .searchInput {
+    flex: 1;
+  }
 `
 
 type NoteListProps = {
@@ -36,6 +40,12 @@ const NoteList = ({
   return (
     <StyledContainer>
       <Toolbar>
+        <ToolbarIconInput
+          className='searchInput'
+          iconPath={mdiMagnify}
+          value={''}
+          onChange={() => {}}
+        />
         <ToolbarIconButton path={mdiSquareEditOutline} onClick={createNote} />
       </Toolbar>
       <ul>

src/components/NotePage/NotePage.tsx

@@ -3,7 +3,7 @@ import NoteList from './NoteList'
 import NoteDetail from './NoteDetail'
 import { useRouter, tagRegexp, useNotesPathname } from '../../lib/router'
 import { useDb } from '../../lib/db'
-import TwoPaneLayout from './TwoPaneLayout'
+import TwoPaneLayout from '../atoms/TwoPaneLayout'
 
 export default () => {
   const db = useDb()
@@ -57,6 +57,7 @@ export default () => {
 
   return currentStorageId != null ? (
     <TwoPaneLayout
+      style={{ height: '100%' }}
       left={
         <NoteList
           storageId={currentStorageId}