feat: translated document title

localization/locales/en/translation.json

@@ -99,7 +99,8 @@
     "SyncedWorkspaceDescription": "To synchronize to an online storage service (such as Github), you need to login to a storage service or enter your login credentials, and have a good network connection. You can sync data across devices, and you still own the data when you use a trusted storage service. And even after the folder is accidentally deleted, you can still download the data from the online service to the local again.",
     "GitEmailDescription": "Email used for Git commit, and is used to count daily activities on Github and other online git services",
     "GitUserNameDescription": "The account name used to log in to Git. Not the nickname",
-    "LogoutToGetStorageServiceToken": "Log in to the online storage service to obtain latest credentials"
+    "LogoutToGetStorageServiceToken": "Log in to the online storage service to obtain latest credentials",
+    "AddWorkspace": "Add Workspace"
   },
   "EditWorkspace": {
     "Path": "Wiki Path",

localization/locales/zh_CN/translation.json

@@ -40,7 +40,7 @@
     "TiddlyGit": "太记",
     "Edit": "编辑",
     "View": "查看",
-    "Language": "语言",
+    "Language": "语言/Language",
     "History": "历史",
     "Workspaces": "工作区",
     "Window": "窗口",
@@ -50,6 +50,7 @@
     "LearnMore": "了解更多..."
   },
   "AddWorkspace": {
+    "AddWorkspace": "添加工作区",
     "MainPageTipWithoutSidebar": "<0>使用菜单上的</0><strong> 工作区 → 添加工作区 </strong><2>来开始使用太微！</2>",
     "MainPageTipWithSidebar": "<0>点击侧边栏上的这个 </0><1>+</1><2>（加号按钮）来开始使用太微!</2>",
     "NotFilled": "未填",

package-lock.json

@@ -3621,6 +3621,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-helmet": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.1.tgz",
+      "integrity": "sha512-VmSCMz6jp/06DABoY60vQa++h1YFt0PfAI23llxBJHbowqFgLUL0dhS1AQeVPNqYfRp9LAfokrfWACTNeobOrg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-is": {
       "version": "17.0.0",
       "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.0.tgz",
@@ -18684,6 +18693,24 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==",
+      "dev": true
+    },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      }
+    },
     "react-i18next": {
       "version": "11.8.15",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.8.15.tgz",
@@ -18700,6 +18727,12 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "react-side-effect": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
+      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==",
+      "dev": true
+    },
     "react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",

package.json

@@ -39,7 +39,9 @@
             "ja"
           ]
         },
-        "afterPrune": ["scripts/afterPack.js"]
+        "afterPrune": [
+          "scripts/afterPack.js"
+        ]
       },
       "makers": [
         {
@@ -160,6 +162,7 @@
     "@types/prettier": "2.2.3",
     "@types/react": "17.0.4",
     "@types/react-dom": "17.0.3",
+    "@types/react-helmet": "^6.1.1",
     "@types/rimraf": "3.0.0",
     "@types/semver": "7.3.5",
     "@types/simplebar": "5.1.2",
@@ -204,6 +207,7 @@
     "react": "17.0.2",
     "react-ace": "9.4.0",
     "react-dom": "17.0.2",
+    "react-helmet": "^6.1.0",
     "react-i18next": "11.8.15",
     "rimraf": "3.0.2",
     "simplebar": "6.0.0-beta.4",

src/pages/About.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Trans, useTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet';
+
 import { Button, DialogContent as DialogContentRaw } from '@material-ui/core';
 import { usePromiseValue } from '@/helpers/useServiceValue';
 
@@ -79,6 +81,9 @@ export default function About(): JSX.Element {
 
   return (
     <DialogContent>
+      <Helmet>
+        <title>{t('ContextMenu.About')}</title>
+      </Helmet>
       <Icon src={`file:///${iconPath ?? ''}`} alt="TiddlyGit" />
       <Title>TiddlyGit ({platform ?? 'Unknown Platform'})</Title>
       <TiddlyGitVersion>{`Version v${appVersion ?? ' - '}.`}</TiddlyGitVersion>

src/pages/AddWorkspace/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet';
 import { AppBar, Paper, Tab } from '@material-ui/core';
 import { TabPanel as TabPanelRaw, TabContext, TabList } from '@material-ui/lab';
 
@@ -54,7 +55,7 @@ export default function AddWorkspace(): JSX.Element {
   const form = useWikiWorkspaceForm();
 
   // update storageProviderSetter to local based on isCreateSyncedWorkspace. Other services value will be changed by TokenForm
-  const { storageProvider, storageProviderSetter } = form;
+  const { storageProvider, storageProviderSetter, wikiFolderName } = form;
   useEffect(() => {
     if (!isCreateSyncedWorkspace && storageProvider !== SupportedStorageServices.local) {
       storageProviderSetter(SupportedStorageServices.local);
@@ -69,6 +70,11 @@ export default function AddWorkspace(): JSX.Element {
 
   return (
     <TabContext value={currentTab}>
+      <Helmet>
+        <title>
+          {t('AddWorkspace.AddWorkspace')} {wikiFolderName}
+        </title>
+      </Helmet>
       <AppBar position="static">
         <Paper square>
           <TabList

src/pages/EditWorkspace/index.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { useTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet';
 import {
   Tooltip,
   Button as ButtonRaw,
@@ -159,6 +160,11 @@ export default function EditWorkspace(): JSX.Element {
   }
   return (
     <Root>
+      <Helmet>
+        <title>
+          {t('WorkspaceSelector.EditWorkspace')} {String(workspace.order ?? 1)} {workspace.name}
+        </title>
+      </Helmet>
       <FlexGrow>
         <TextField
           id="outlined-full-width"

src/pages/Main/index.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { useTranslation, Trans } from 'react-i18next';
+import { Helmet } from 'react-helmet';
 import { AsyncReturnType } from 'type-fest';
 import { DndContext } from '@dnd-kit/core';
 import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable';
@@ -188,6 +189,9 @@ export default function Main(): JSX.Element {
   const { attachToMenubar, titleBar, sidebar, pauseNotifications, themeSource, sidebarShortcutHints } = preferences;
   return (
     <OuterRoot>
+      <Helmet>
+        <title>{t('Menu.TiddlyGit')}</title>
+      </Helmet>
       <Root>
         {sidebar && (
           <SidebarContainer>

src/pages/Notifications/index.tsx

@@ -3,6 +3,8 @@
 /* eslint-disable unicorn/no-useless-undefined */
 import React, { useState } from 'react';
 import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet';
 
 import ListSubheader from '@material-ui/core/ListSubheader';
 import ListRaw from '@material-ui/core/List';
@@ -70,7 +72,8 @@ const pauseNotification = (tilDate: Date): void => {
   void window.remote.closeCurrentWindow();
 };
 
-export default function PauseNotifications(): JSX.Element {
+export default function Notifications(): JSX.Element {
+  const { t } = useTranslation();
   const preference = usePreferenceObservable();
   const pauseNotificationsInfo = useNotificationInfoObservable();
   const [showDateTimePicker, showDateTimePickerSetter] = useState(false);
@@ -169,6 +172,9 @@ export default function PauseNotifications(): JSX.Element {
 
   return (
     <Root>
+      <Helmet>
+        <title>{t('ContextMenu.Notifications')}</title>
+      </Helmet>
       {renderList()}
       <DateTimePicker
         value={new Date()}

src/pages/Preferences/index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { useDebouncedFn } from 'beautiful-react-hooks';
 import styled, { keyframes } from 'styled-components';
+import { Helmet } from 'react-helmet';
 import semver from 'semver';
 import fromUnixTime from 'date-fns/fromUnixTime';
 import setYear from 'date-fns/setYear';
@@ -214,6 +215,11 @@ export default function Preferences(): JSX.Element {
 
   return (
     <Root>
+      <Helmet>
+        <title>
+          {t('ContextMenu.Preferences')}
+        </title>
+      </Helmet>
       <SideBar>
         <List dense>
           {Object.keys(sections).map((sectionKey, index) => {

src/pages/SpellcheckLanguages/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet';
 
 import ButtonRaw from '@material-ui/core/Button';
 import Checkbox from '@material-ui/core/Checkbox';
@@ -44,12 +46,16 @@ Button.defaultProps = {
 };
 
 export default function SpellcheckLanguages(): JSX.Element {
+  const { t } = useTranslation();
   const preference = usePreferenceObservable();
   if (preference === undefined) {
     return <Root>Loading...</Root>;
   }
   return (
     <Root>
+      <Helmet>
+        <title>{t('Preference.SpellCheckLanguages')}</title>
+      </Helmet>
       <Top>
         {(Object.keys(hunspellLanguagesMap) as HunspellLanguages[]).map((code) => (
           <ListItem

src/pages/index.tsx

@@ -12,23 +12,18 @@ import SpellcheckLanguages from './SpellcheckLanguages';
 export function App(): JSX.Element {
   switch (window.meta.windowName) {
     case WindowNames.about:
-      document.title = 'About';
       return <AboutPage />;
     case WindowNames.addWorkspace:
-      document.title = 'Add Workspace';
       return <DialogAddWorkspace />;
     case WindowNames.editWorkspace:
       return <EditWorkspace />;
     case WindowNames.notifications:
-      document.title = 'Notifications';
       return <DialogNotifications />;
     case WindowNames.preferences:
-      document.title = 'Preferences';
       return <DialogPreferences />;
     case WindowNames.spellcheck:
       return <SpellcheckLanguages />;
     default:
-      document.title = 'TiddlyGit';
       return <Main />;
   }
 }

src/renderer.tsx

@@ -22,25 +22,6 @@ async function runApp(): Promise<void> {
   LogRocket.init('kkauk7/tiddlygit-desktop');
 
   void window.remote.setVisualZoomLevelLimits(1, 1);
-  if (window.meta.windowName === WindowNames.editWorkspace) {
-    const { workspaceID } = window.meta as WindowMeta[WindowNames.editWorkspace];
-    if (workspaceID === undefined) {
-      throw new Error(`workspaceID is undefined,  window.meta is ${typeof window.meta === 'object' ? JSON.stringify(window.meta) : String(window.meta)}`);
-    }
-    const workspaces = await window.service.workspace.getWorkspaces();
-    const workspaceList = await window.service.workspace.getWorkspacesAsList();
-    const workspace = workspaces[workspaceID];
-    workspaceList.some((item, index) => {
-      if (item.id === workspaceID) {
-        workspace.order = index;
-        return true;
-      }
-      return false;
-    });
-    document.title = workspace.name ? `Edit Workspace ${workspace.order + 1} "${workspace.name}"` : `Edit Workspace ${workspace.order + 1}`;
-  } else if (window.meta.windowName === WindowNames.spellcheck) {
-    document.title = 'Preferred Spell Checking Languages';
-  }
 
   const attachToMenubar = await window.service.preference.get('attachToMenubar');
   if (window.meta.windowName !== WindowNames.main && attachToMenubar) {