Improve note page

src/components/PreferencesModal/GeneralTab.tsx

@@ -10,6 +10,7 @@ import {
   usePreferences,
   GeneralThemeOptions,
   GeneralLanguageOptions,
+  GeneralNoteListViewOptions,
 } from '../../lib/preferences'
 import { useTranslation } from 'react-i18next'
 import { SelectChangeEventHandler } from '../../lib/events'
@@ -57,6 +58,16 @@ const GeneralTab = () => {
     [setPreferences]
   )
 
+  const selectNoteListView: SelectChangeEventHandler = useCallback(
+    (event) => {
+      setPreferences({
+        'general.noteListView': event.target
+          .value as GeneralNoteListViewOptions,
+      })
+    },
+    [setPreferences]
+  )
+
   const toggleEnableAutoSync: React.ChangeEventHandler<HTMLInputElement> = useCallback(
     (event) => {
       setPreferences({
@@ -141,6 +152,18 @@ const GeneralTab = () => {
           </SectionSelect>
         </SectionControl>
       </Section>
+      <Section>
+        <SectionHeader>Note List view</SectionHeader>
+        <SectionControl>
+          <SectionSelect
+            value={preferences['general.noteListView']}
+            onChange={selectNoteListView}
+          >
+            <option value='default'>Default</option>
+            <option value='compact'>Compact</option>
+          </SectionSelect>
+        </SectionControl>
+      </Section>
       <Section>
         <SectionHeader>Enable auto sync</SectionHeader>
         <SectionControl>

src/components/molecules/NoteDetailToolbar.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, useCallback } from 'react'
 import styled from '../../lib/styled'
 import { NoteDoc, NoteStorage } from '../../lib/db/types'
 import {
@@ -7,15 +7,22 @@ import {
   mdiViewSplitVertical,
   mdiTrashCan,
   mdiRestore,
+  mdiDotsVertical,
 } from '@mdi/js'
 import { borderBottom, flexCenter } from '../../lib/styled/styleFunctions'
 import ToolbarIconButton from '../atoms/ToolbarIconButton'
-import ToolbarExportButton from '../atoms/ToolbarExportButton'
 import { ViewModeType } from '../../lib/generalStatus'
 import ToolbarSeparator from '../atoms/ToolbarSeparator'
 import NoteDetailFolderNavigator from './NoteDetailFolderNavigator'
 import NoteDetailTagNavigator from './NoteDetailTagNavigator'
 import { values } from '../../lib/db/utils'
+import { MenuTypes, useContextMenu } from '../../lib/contextMenu'
+import {
+  exportNoteAsHtmlFile,
+  exportNoteAsMarkdownFile,
+} from '../../lib/exports'
+import { usePreferences } from '../../lib/preferences'
+import { usePreviewStyle } from '../../lib/preview'
 
 const NoteDetailToolbarContainer = styled.div`
   display: flex;
@@ -59,8 +66,44 @@ const NoteDetailToolbar = ({
     return values(storage.tagMap).map((tag) => tag.name)
   }, [storage])
 
+  const { popup } = useContextMenu()
+  const { preferences } = usePreferences()
+  const { previewStyle } = usePreviewStyle()
   const storageId = storage.id
   const storageName = storage.name
+
+  const selectEditMode = useCallback(() => {
+    selectViewMode('edit')
+  }, [selectViewMode])
+
+  const selectSplitMode = useCallback(() => {
+    selectViewMode('split')
+  }, [selectViewMode])
+
+  const selectPreviewMode = useCallback(() => {
+    selectViewMode('preview')
+  }, [selectViewMode])
+
+  const openContextMenu = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault()
+      popup(event, [
+        {
+          type: MenuTypes.Normal,
+          label: 'HTML export',
+          onClick: async () =>
+            await exportNoteAsHtmlFile(note, preferences, previewStyle),
+        },
+        {
+          type: MenuTypes.Normal,
+          label: 'Markdown export',
+          onClick: async () => await exportNoteAsMarkdownFile(note),
+        },
+      ])
+    },
+    [popup, note, preferences, previewStyle]
+  )
+
   return (
     <NoteDetailToolbarContainer>
       <NoteDetailFolderNavigator
@@ -81,17 +124,17 @@ const NoteDetailToolbar = ({
       <Control>
         <ToolbarIconButton
           active={viewMode === 'edit'}
-          onClick={() => selectViewMode('edit')}
+          onClick={selectEditMode}
           iconPath={mdiCodeTags}
         />
         <ToolbarIconButton
           active={viewMode === 'split'}
-          onClick={() => selectViewMode('split')}
+          onClick={selectSplitMode}
           iconPath={mdiViewSplitVertical}
         />
         <ToolbarIconButton
           active={viewMode === 'preview'}
-          onClick={() => selectViewMode('preview')}
+          onClick={selectPreviewMode}
           iconPath={mdiTextSubject}
         />
         <ToolbarSeparator />
@@ -103,7 +146,10 @@ const NoteDetailToolbar = ({
         ) : (
           <ToolbarIconButton onClick={trashNote} iconPath={mdiTrashCan} />
         )}
-        <ToolbarExportButton note={note} />
+        <ToolbarIconButton
+          onClick={openContextMenu}
+          iconPath={mdiDotsVertical}
+        />
       </Control>
     </NoteDetailToolbarContainer>
   )