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,7 @@ 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'
 
 const Container = styled.div`
   display: flex;
@@ -60,6 +61,8 @@ const NoteDetailFolderNavigator = ({
   noteId,
   noteFolderPathname,
 }: NoteDetailFolderNavigatorProps) => {
+  const { t } = useTranslation()
+
   const { push } = useRouter()
   const routeParams = useRouteParams()
 
@@ -87,12 +90,18 @@ const NoteDetailFolderNavigator = ({
     return folderDataList
   }, [noteFolderPathname])
 
+  const storageTooltip = `${t('storage.storage')} ${storageName}: ${t('general.allnote')}`;
+
+  const getFolderTooltip = (foldername: string) =>
+    `${t('folder.folder')} ${foldername}: ${t('general.allnote')}`;
+
   return (
     <Container>
       <IconContainer>
         <Icon path={mdiBookOpen} />
       </IconContainer>
       <FolderNavItem
+        title={storageTooltip}
         href={`/app/storages/${storageId}/notes/${noteId}`}
         onClick={(event: MouseEvent<HTMLAnchorElement>) => {
           event.preventDefault()
@@ -106,6 +115,7 @@ const NoteDetailFolderNavigator = ({
         <React.Fragment key={folderData.pathname}>
           <Icon path={mdiSlashForward} />
           <FolderNavItem
+            title={getFolderTooltip(folderData.name)}
             onClick={() => {
               push(
                 `/app/storages/${storageId}/notes${folderData.pathname}/${noteId}`

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',