Add tooltips to the note detail toolbar

src/components/atoms/TagNavigatorListItem.tsx

@@ -4,6 +4,7 @@ import styled from '../../lib/styled'
 import { mdiClose } from '@mdi/js'
 import { flexCenter } from '../../lib/styled/styleFunctions'
 import { useRouter } from '../../lib/router'
+import { useTranslation } from 'react-i18next'
 
 const TagItem = styled.li`
   margin-right: 5px;
@@ -65,10 +66,13 @@ const TagNavigatorListItem = ({
   currentTagName,
   removeTagByName,
 }: TagNavigatorListItemProps) => {
+  const { t } = useTranslation()
   const { push } = useRouter()
+
   return (
     <TagItem>
       <TagItemAnchor
+        title={`${tag}: ${t('general.allnote')}`}
         onClick={() => {
           push(`/app/storages/${storageId}/tags/${tag}/${noteId}`)
         }}
@@ -77,6 +81,7 @@ const TagNavigatorListItem = ({
         {tag}
       </TagItemAnchor>
       <TagRemoveButton
+        title={t('tag.remove')}
         onClick={() => {
           removeTagByName(tag)
         }}

src/components/atoms/ToolbarIconButton.tsx

@@ -30,16 +30,18 @@ const ToolbarButtonContainer = styled.button`
 
 interface ToolbarButtonProps {
   iconPath: string
-  active?: boolean
+  active?: boolean,
+  title?: string,
   onClick: React.MouseEventHandler
 }
 
 const ToolbarButton = React.forwardRef(
-  ({ iconPath, onClick, active = false }: ToolbarButtonProps, ref) => (
+  ({ iconPath, onClick, active = false, title }: ToolbarButtonProps, ref) => (
     <ToolbarButtonContainer
       onClick={onClick}
       className={active ? 'active' : ''}
       ref={ref}
+      title={title}
     >
       <Icon path={iconPath} />
     </ToolbarButtonContainer>

src/components/molecules/NoteDetailFolderNavigator.tsx

@@ -4,6 +4,8 @@ import { mdiBookOpen, mdiSlashForward } from '@mdi/js'
 import Icon from '../atoms/Icon'
 import { useRouter, useRouteParams } from '../../lib/router'
 import { flexCenter } from '../../lib/styled/styleFunctions'
+import { useTranslation } from 'react-i18next'
+import { useDb } from '../../lib/db'
 
 const Container = styled.div`
   display: flex;
@@ -21,7 +23,7 @@ const IconContainer = styled.div`
   color: ${({ theme }) => theme.navButtonColor};
 `
 
-const FolderNavItem = styled.button`
+const FolderNavItemButton = styled.button`
   background-color: transparent;
   border: none;
   white-space: nowrap;
@@ -54,12 +56,17 @@ interface FolderData {
   pathname: string
 }
 
-const NoteDetailFolderNavigator = ({
-  storageId,
-  storageName,
-  noteId,
-  noteFolderPathname,
-}: NoteDetailFolderNavigatorProps) => {
+interface FolderNavItemProps {
+  path: string
+  children?: React.ReactNode
+}
+
+const FolderNavItem: React.FC<FolderNavItemProps> = ({
+  children,
+  path,
+}: FolderNavItemProps) => {
+  const { t } = useTranslation()
+  const db = useDb()
   const { push } = useRouter()
   const routeParams = useRouteParams()
 
@@ -70,6 +77,70 @@ const NoteDetailFolderNavigator = ({
     return routeParams.folderPathname
   }, [routeParams])
 
+  const parsePath = (path: string) => {
+    const result = {
+      storageId: '',
+      storageName: '',
+      folderName: '',
+      folderPath: '',
+    }
+
+    const storageMatch = /\/storages\/(.*)\/notes/.exec(path)
+    if (storageMatch) {
+      const storage = db.storageMap[storageMatch[1]]
+      if (storage) {
+        result.storageId = storage.id
+        result.storageName = storage.name
+      }
+    }
+    const folderMatch = /\/notes\/(.*)\//.exec(path)
+    if (folderMatch) {
+      result.folderPath = `/${folderMatch[1]}`
+
+      const folderNameMatch = /[^/]*$/.exec(result.folderPath)
+      if (folderNameMatch) {
+        result.folderName = folderNameMatch[0]
+      }
+    }
+    return result
+  }
+
+  const { storageName, folderName, folderPath } = parsePath(path)
+  const getStorageTooltip = (storageName: string) =>
+    `${t('storage.storage')} ${storageName}: ${t('general.allnote')}`
+
+  const getFolderTooltip = (foldername: string) =>
+    `${t('folder.folder')} ${foldername}: ${t('general.allnote')}`
+
+  const tooltip = folderName
+    ? getFolderTooltip(folderName)
+    : getStorageTooltip(storageName)
+
+  const isActive =
+    currentFolderPathname === folderPath ||
+    (!folderName && currentFolderPathname === '/')
+
+  return (
+    <FolderNavItemButton
+      title={tooltip}
+      href={path}
+      onClick={(event: MouseEvent<HTMLAnchorElement>) => {
+        event.preventDefault()
+        push(path)
+      }}
+      className={isActive ? 'active' : ''}
+    >
+      {folderName ? folderName : storageName}
+      {children}
+    </FolderNavItemButton>
+  )
+}
+
+const NoteDetailFolderNavigator = ({
+  storageId,
+  noteId,
+  noteFolderPathname,
+}: NoteDetailFolderNavigatorProps) => {
   const folderDataList = useMemo<FolderData[]>(() => {
     if (noteFolderPathname === '/') {
       return []
@@ -92,31 +163,14 @@ const NoteDetailFolderNavigator = ({
       <IconContainer>
         <Icon path={mdiBookOpen} />
       </IconContainer>
-      <FolderNavItem
-        href={`/app/storages/${storageId}/notes/${noteId}`}
-        onClick={(event: MouseEvent<HTMLAnchorElement>) => {
-          event.preventDefault()
-          push(`/app/storages/${storageId}/notes/${noteId}`)
-        }}
-        className={currentFolderPathname === '/' ? 'active' : ''}
-      >
-        {storageName}
-      </FolderNavItem>
+      <FolderNavItem path={`/app/storages/${storageId}/notes/${noteId}`} />
+
       {folderDataList.map((folderData) => (
         <React.Fragment key={folderData.pathname}>
           <Icon path={mdiSlashForward} />
           <FolderNavItem
-            onClick={() => {
-              push(
-                `/app/storages/${storageId}/notes${folderData.pathname}/${noteId}`
-              )
-            }}
-            className={
-              currentFolderPathname === folderData.pathname ? 'active' : ''
-            }
-          >
-            {folderData.name}
-          </FolderNavItem>
+            path={`/app/storages/${storageId}/notes${folderData.pathname}/${noteId}`}
+          />
         </React.Fragment>
       ))}
     </Container>

src/components/molecules/NoteDetailTagNavigator.tsx

@@ -7,6 +7,7 @@ import { useRouteParams } from '../../lib/router'
 import ToolbarButton from '../atoms/ToolbarIconButton'
 import TagNavigatorListItem from '../atoms/TagNavigatorListItem'
 import TagNavigatorNewTagPopup from '../atoms/TagNavigatorNewTagPopup'
+import { useTranslation } from 'react-i18next'
 
 const Container = styled.div`
   display: flex;
@@ -48,6 +49,8 @@ const NoteDetailTagNavigator = ({
   appendTagByName,
   removeTagByName,
 }: NoteDetailTagNavigatorProps) => {
+  const { t } = useTranslation()
+
   const routeParams = useRouteParams()
 
   const currentTagName = useMemo(() => {
@@ -94,7 +97,7 @@ const NoteDetailTagNavigator = ({
   return (
     <>
       <Container>
-        <IconContainer>
+        <IconContainer title={t('tag.tag')}>
           <Icon path={mdiTagMultiple} />{' '}
         </IconContainer>
         <TagNavigatorList>
@@ -112,6 +115,7 @@ const NoteDetailTagNavigator = ({
           })}
         </TagNavigatorList>
         <ToolbarButton
+          title={t('tag.add')}
           iconPath={mdiPlus}
           ref={buttonRef}
           onClick={showNewTagPopup}

src/components/molecules/NoteDetailToolbar.tsx

@@ -25,6 +25,7 @@ import {
 } from '../../lib/exports'
 import { usePreferences } from '../../lib/preferences'
 import { usePreviewStyle } from '../../lib/preview'
+import { useTranslation } from 'react-i18next'
 
 const NoteDetailToolbarContainer = styled.div`
   display: flex;
@@ -68,6 +69,8 @@ const NoteDetailToolbar = ({
   bookmarkNote,
   unbookmarkNote,
 }: NoteDetailToolbarProps) => {
+  const { t } = useTranslation()
+
   const storageTags = useMemo(() => {
     if (storage == null) return []
     return values(storage.tagMap).map((tag) => tag.name)
@@ -135,34 +138,51 @@ const NoteDetailToolbar = ({
       <Control>
         <ToolbarIconButton
           active={viewMode === 'edit'}
+          title={t('note.edit')}
           onClick={selectEditMode}
           iconPath={mdiCodeTags}
         />
         <ToolbarIconButton
           active={viewMode === 'split'}
+          title={t('note.splitView')}
           onClick={selectSplitMode}
           iconPath={mdiViewSplitVertical}
         />
         <ToolbarIconButton
           active={viewMode === 'preview'}
+          title={t('note.preview')}
           onClick={selectPreviewMode}
           iconPath={mdiTextSubject}
         />
         <ToolbarSeparator />
         <ToolbarIconButton
           active={!!note.data.bookmarked}
+          title={t(`bookmark.${!note.data.bookmarked ? 'add' : 'remove'}`)}
           onClick={!note.data.bookmarked ? bookmarkNote : unbookmarkNote}
           iconPath={note.data.bookmarked ? mdiStar : mdiStarOutline}
         />
         {note.trashed ? (
           <>
-            <ToolbarIconButton onClick={untrashNote} iconPath={mdiRestore} />
-            <ToolbarIconButton onClick={purgeNote} iconPath={mdiTrashCan} />
+            <ToolbarIconButton
+              title={t('note.restore')}
+              onClick={untrashNote}
+              iconPath={mdiRestore}
+            />
+            <ToolbarIconButton
+              title={t('note.delete')}
+              onClick={purgeNote}
+              iconPath={mdiTrashCan}
+            />
           </>
         ) : (
-          <ToolbarIconButton onClick={trashNote} iconPath={mdiTrashCan} />
-        )}
+            <ToolbarIconButton
+              title={t('note.trash')}
+              onClick={trashNote}
+              iconPath={mdiTrashCan}
+            />
+          )}
         <ToolbarIconButton
+          title={t('note.export')}
           onClick={openContextMenu}
           iconPath={mdiDotsVertical}
         />

src/locales/enUS.ts

@@ -13,6 +13,7 @@ export default {
     'general.networkError': 'Network Error',
 
     // Storage
+    'storage.storage': 'Storage',
     'storage.name': 'Storage Name',
     'storage.noStorage': 'No storages',
     'storage.create': 'Create Storage',
@@ -34,6 +35,7 @@ export default {
     'storage.syncDate': 'Last synced at',
 
     //Folder
+    'folder.folder': 'Folder',
     'folder.create': 'New Folder',
     'folder.rename': 'Rename Folder',
     'folder.renameMessage':
@@ -44,6 +46,7 @@ export default {
 
     //Tag
     'tag.tag': 'Tags',
+    'tag.add': 'Add Tag',
     'tag.remove': 'Remove Tag',
     'tag.removeMessage': 'The tag will be untagged from all notes.',
 
@@ -67,6 +70,11 @@ export default {
     'note.createkeymessage2': 'Select a storage',
     'note.createkeymessage3': 'to create a new note',
     'note.restore': 'Restore',
+    'note.edit': 'Edit',
+    'note.splitView': 'Split View',
+    'note.preview': 'Preview',
+    'note.trash': 'Trash',
+    'note.export': 'Export',
 
     //Bookmark
     'bookmark.remove': 'Remove Bookmark',