Fix edit mode

src/components/NotePage/NoteDetail/NoteDetail.tsx

@@ -14,7 +14,6 @@ import {
 import ToolbarIconButton from '../../atoms/ToolbarIconButton'
 import Toolbar from '../../atoms/Toolbar'
 import ToolbarSeparator from '../../atoms/ToolbarSeparator'
-import { GeneralNoteEditModeOptions } from '../../../lib/generalStatus'
 import {
   secondaryBackgroundColor,
   textColor,
@@ -97,8 +96,10 @@ type NoteDetailProps = {
   ) => Promise<void | NoteDoc>
   trashNote: (storageId: string, noteId: string) => Promise<NoteDoc | undefined>
   removeNote: (storageId: string, noteId: string) => Promise<void>
-  editMode: GeneralNoteEditModeOptions
-  selectEditMode: (editMode: GeneralNoteEditModeOptions) => void
+  splitMode: boolean
+  previewMode: boolean
+  toggleSplitMode: () => void
+  togglePreviewMode: () => void
 }
 
 type NoteDetailState = {
@@ -286,7 +287,13 @@ export default class NoteDetail extends React.Component<
   }
 
   render() {
-    const { note, editMode, selectEditMode } = this.props
+    const {
+      note,
+      splitMode,
+      previewMode,
+      toggleSplitMode,
+      togglePreviewMode
+    } = this.props
 
     const codeEditor = (
       <CustomizedCodeEditor
@@ -315,15 +322,15 @@ export default class NoteDetail extends React.Component<
               />
             </div>
             <div className='contentSection'>
-              {editMode === 'edit' ? (
-                codeEditor
-              ) : editMode === 'split' ? (
+              {previewMode ? (
+                markdownPreviewer
+              ) : splitMode ? (
                 <>
                   <div className='splitLeft'>{codeEditor}</div>
                   <div className='splitRight'>{markdownPreviewer}</div>
                 </>
               ) : (
-                markdownPreviewer
+                codeEditor
               )}
             </div>
             <Toolbar>
@@ -340,16 +347,15 @@ export default class NoteDetail extends React.Component<
                 onKeyDown={this.handleNewTagNameInputKeyDown}
               />
               <ToolbarSeparator />
+              <ToolbarIconButton onClick={() => {}} path={mdiFormatText} />
               <ToolbarIconButton
-                onClick={() => selectEditMode('edit')}
-                path={mdiFormatText}
-              />
-              <ToolbarIconButton
-                onClick={() => selectEditMode('split')}
+                className={splitMode ? 'active' : ''}
+                onClick={toggleSplitMode}
                 path={mdiArrowSplitVertical}
               />
               <ToolbarIconButton
-                onClick={() => selectEditMode('preview')}
+                className={previewMode ? 'active' : ''}
+                onClick={togglePreviewMode}
                 path={mdiEyeOutline}
               />
               <ToolbarIconButton onClick={this.trashNote} path={mdiTrashCan} />

src/components/NotePage/NotePage.tsx

@@ -132,14 +132,17 @@ export default () => {
     [setGeneralStatus]
   )
 
-  const selectEditMode = useCallback(
-    (editMode: 'edit' | 'split' | 'preview') => {
-      setGeneralStatus({
-        noteEditMode: editMode
-      })
-    },
-    [setGeneralStatus]
-  )
+  const toggleSplitMode = useCallback(() => {
+    setGeneralStatus(prevState => ({
+      noteSplitMode: !prevState.noteSplitMode
+    }))
+  }, [setGeneralStatus])
+
+  const togglePreviewMode = useCallback(() => {
+    setGeneralStatus(prevState => ({
+      notePreviewMode: !prevState.notePreviewMode
+    }))
+  }, [setGeneralStatus])
 
   return storageId != null ? (
     <TwoPaneLayout
@@ -166,8 +169,10 @@ export default () => {
             updateNote={db.updateNote}
             trashNote={db.trashNote}
             removeNote={removeNote}
-            editMode={generalStatus.noteEditMode}
-            selectEditMode={selectEditMode}
+            splitMode={generalStatus.noteSplitMode}
+            previewMode={generalStatus.notePreviewMode}
+            toggleSplitMode={toggleSplitMode}
+            togglePreviewMode={togglePreviewMode}
           />
         )
       }

src/components/atoms/ToolbarIconButton.tsx

@@ -23,15 +23,17 @@ const StyledButton = styled.button<{ active: boolean }>`
 interface ToolbarButtonProps {
   active?: boolean
   path: string
+  className?: string
   onClick: React.MouseEventHandler
 }
 
 const ToolbarButton = ({
   path,
   onClick,
-  active = false
+  active = false,
+  className
 }: ToolbarButtonProps) => (
-  <StyledButton onClick={onClick} active={active}>
+  <StyledButton onClick={onClick} active={active} className={className}>
     <Icon path={path} />
   </StyledButton>
 )

src/lib/generalStatus/store.ts

@@ -26,7 +26,8 @@ const initialGeneralStatus = loadGeneralStatus()
 const baseGeneralStatus: GeneralStatus = {
   sideBarWidth: 160,
   noteListWidth: 250,
-  noteEditMode: 'split'
+  noteSplitMode: true,
+  notePreviewMode: false
 }
 
 function useGeneralStatusStore() {

src/lib/generalStatus/types.ts

@@ -1,7 +1,6 @@
-export type GeneralNoteEditModeOptions = 'preview' | 'split' | 'edit'
-
 export interface GeneralStatus {
   sideBarWidth: number
   noteListWidth: number
-  noteEditMode: GeneralNoteEditModeOptions
+  noteSplitMode: boolean
+  notePreviewMode: boolean
 }

src/lib/styled/styleFunctions.ts

@@ -15,10 +15,12 @@ export const activeBackgroundColor = ({ theme }: StyledProps) =>
 
 export const iconColor = ({ theme }: StyledProps) => `color: ${theme.iconColor};
 &:hover,
-&:focus,
+&:focus {
+  color: ${theme.activeIconColor};
+}
 &:active,
 &.active {
-  color: ${theme.activeIconColor};
+  color: ${theme.primaryColor};
 }`
 
 export const textColor = ({ theme }: StyledProps) =>