Update some components

Refactor AppNavigator
Port features from AppNavigator
Refactor CreateStoragePage

Author: Komediruzecki

src/components/Application.tsx

@@ -6,13 +6,7 @@ import ContentLayout, {
 } from '../shared/components/templates/ContentLayout'
 import { SidebarState } from '../shared/lib/sidebar'
 import { useRouter } from '../lib/router'
-import {
-  StorageNotesRouteParams,
-  StorageTagsRouteParams,
-  StorageTrashCanRouteParams,
-  useRouteParams,
-} from '../lib/routeParams'
-import { NoteStorage } from '../lib/db/types'
+import { StorageNotesRouteParams, useRouteParams } from '../lib/routeParams'
 import { filenamify } from '../lib/string'
 import { usePreferences } from '../lib/preferences'
 import { usePreviewStyle } from '../lib/preview'
@@ -41,19 +35,17 @@ interface ApplicationProps {
   content: ContentLayoutProps
   className?: string
   initialSidebarState?: SidebarState
-  storage: NoteStorage
 }
 
 const Application = ({
   content: { topbar, ...content },
   children,
-  storage,
   initialSidebarState,
 }: React.PropsWithChildren<ApplicationProps>) => {
-  const routeParams = useRouteParams() as
-    | StorageNotesRouteParams
-    | StorageTrashCanRouteParams
-    | StorageTagsRouteParams
+  const { storageMap } = useDb()
+  const routeParams = useRouteParams() as StorageNotesRouteParams
+  const { workspaceId } = routeParams
+  const storage = storageMap[workspaceId]
 
   const { push, goBack, goForward } = useRouter()
   const { generalStatus, setGeneralStatus } = useGeneralStatus()
@@ -65,6 +57,9 @@ const Application = ({
   const { pushMessage } = useToast()
 
   const note = useMemo(() => {
+    if (storage == null) {
+      return undefined
+    }
     switch (routeParams.name) {
       case 'workspaces.notes': {
         if (routeParams.noteId == null) {
@@ -79,53 +74,37 @@ const Application = ({
         }
         return note
       }
-      case 'workspaces.labels.show': {
-        if (routeParams.noteId == null) {
-          return undefined
-        }
-        const note = storage.noteMap[routeParams.noteId]
-        if (note == null) {
-          return undefined
-        }
-        if (!note.tags.includes(routeParams.tagName)) {
-          return undefined
-        }
-        return note
-      }
-      case 'workspaces.archive': {
-        if (routeParams.noteId == null) {
-          return undefined
-        }
-        const note = storage.noteMap[routeParams.noteId]
-        if (note == null || !note.trashed) {
-          return undefined
-        }
-        return note
-      }
     }
     return undefined
-  }, [routeParams, storage.noteMap])
+  }, [
+    routeParams.folderPathname,
+    routeParams.name,
+    routeParams.noteId,
+    storage,
+  ])
 
-  const storageId = storage.id
   const noteId = note?._id
 
   const topbarTree = useMemo(() => {
+    if (storage == null) {
+      return undefined
+    }
     return mapTopBarTree(storage.noteMap, storage.folderMap, storage, push)
   }, [push, storage])
 
   const bookmark = useCallback(async () => {
-    if (noteId == null) {
+    if (noteId == null || storage == null) {
       return
     }
-    await bookmarkNote(storageId, noteId)
-  }, [storageId, noteId, bookmarkNote])
+    await bookmarkNote(storage.id, noteId)
+  }, [noteId, storage, bookmarkNote])
 
   const unbookmark = useCallback(async () => {
-    if (noteId == null) {
+    if (noteId == null || storage == null) {
       return
     }
-    await unbookmarkNote(storageId, noteId)
-  }, [storageId, noteId, unbookmarkNote])
+    await unbookmarkNote(storage.id, noteId)
+  }, [storage, noteId, unbookmarkNote])
 
   const selectEditMode = useCallback(() => {
     setGeneralStatus({
@@ -191,7 +170,7 @@ const Application = ({
 
   useEffect(() => {
     const handler = () => {
-      if (note == null) {
+      if (note == null || storage == null) {
         return
       }
       showSaveDialog({
@@ -283,7 +262,7 @@ const Application = ({
     preferences,
     previewStyle,
     pushMessage,
-    storage.attachmentMap,
+    storage,
   ])
 
   const toggleBookmark = useCallback(() => {
@@ -306,12 +285,12 @@ const Application = ({
 
   return (
     <>
-      {showSearchModal && <SearchModal storage={storage} />}
+      {storage != null && showSearchModal && <SearchModal storage={storage} />}
       <ApplicationLayout
         sidebar={
           <NoteStorageNavigator
-            storage={storage}
             initialSidebarState={initialSidebarState}
+            storage={storage}
           />
         }
         pageBody={

src/components/atoms/BoostHubWebview.tsx

@@ -18,7 +18,6 @@ import {
   NewWindowEvent,
 } from 'electron'
 import { useEffectOnce } from 'react-use'
-import styled from '../../lib/styled'
 import { openNew } from '../../lib/platform'
 import {
   boostHubNavigateRequestEventEmitter,
@@ -33,6 +32,7 @@ import {
 import { usePreferences } from '../../lib/preferences'
 import { openContextMenu } from '../../lib/electronOnly'
 import { DidFailLoadEvent } from 'electron/main'
+import styled from '../../shared/lib/styled'
 
 export interface WebviewControl {
   focus(): void

src/components/atoms/FolderDetailListItemControlButton.tsx

@@ -1,6 +1,6 @@
 import React, { MouseEventHandler } from 'react'
-import Icon from './Icon'
 import styled from '../../shared/lib/styled'
+import Icon from '../../shared/components/atoms/Icon'
 
 interface FolderDetailListItemControlButtonProps {
   onClick?: MouseEventHandler<HTMLButtonElement>

src/components/atoms/FormFolderSelector.tsx

@@ -1,8 +1,11 @@
 import React, { useCallback, useState, CSSProperties } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from '../../lib/styled'
-import { border, secondaryButtonStyle } from '../../lib/styled/styleFunctions'
 import { getPathByName, showOpenDialog } from '../../lib/electronOnly'
+import styled from '../../shared/lib/styled'
+import {
+  border,
+  secondaryButtonStyle,
+} from '../../shared/lib/styled/styleFunctions'
 
 const FormFolderSelectorInput = styled.input`
   display: block;
@@ -11,7 +14,7 @@ const FormFolderSelectorInput = styled.input`
   line-height: 1.5;
   border-top-left-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
-  ${border}
+  ${border};
   background-color: white;
   cursor: pointer;
   &:disabled {
@@ -25,8 +28,8 @@ const FormFolderSelectorContainer = styled.div`
 `
 
 const FormFolderSelectorButton = styled.button`
-  ${secondaryButtonStyle}
-  padding: .375rem .75rem;
+  ${secondaryButtonStyle};
+  padding: 0.375rem 0.75rem;
   font-size: 1rem;
   line-height: 1.5;
   border-top-right-radius: 0.25rem;

src/components/atoms/markdown/CodeFence.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import copy from 'copy-to-clipboard'
-import Icon from '../Icon'
 import { mdiContentCopy, mdiContentSave } from '@mdi/js'
 import { flexCenter } from '../../../lib/styled/styleFunctions'
 import { downloadBlob } from '../../../lib/download'
 import styled from '../../../shared/lib/styled'
+import Icon from '../../../shared/components/atoms/Icon'
 
 const CodeFenceContainer = styled.div`
   position: relative;

src/components/atoms/search/LocalSearchButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import Icon from '../Icon'
 import styled from '../../../shared/lib/styled'
+import Icon from '../../../shared/components/atoms/Icon'
 
 interface LocalSearchButtonProps {
   title?: string
@@ -24,7 +24,7 @@ const LocalSearchButton = ({
       className={className}
       onClick={onClick}
     >
-      <Icon path={iconPath} />
+      <Icon size={16} path={iconPath} />
     </LocalSearchStyledButton>
   )
 }

src/components/atoms/search/SearchResultItem.tsx

@@ -1,4 +1,4 @@
-import styled from '../../../lib/styled/styled'
+import styled from '../../../shared/lib/styled'
 
 export const SearchResultItem = styled.div`
   display: flex;

src/components/molecules/NotePageToolbarNoteHeader.tsx

@@ -251,7 +251,7 @@ const NotePageToolbarNoteHeader = ({
 export default NotePageToolbarNoteHeader
 
 const TitleInput = styled.input`
-  ${inputStyle}
+  ${inputStyle};
   flex: 1;
   margin: 0 5px;
   display: block;
@@ -284,7 +284,7 @@ const NoteTitleButtonContainer = styled.button`
   outline: none;
 
   background-color: transparent;
-  ${flexCenter}
+  ${flexCenter};
   overflow: hidden;
 
   border: none;