i18n: refresh runtime translations

Author: 52sanmao

src/lib

@@ -12,8 +12,10 @@ import type { LiveSyncCore } from "../../main.ts";
 import FetchEverything from "../features/SetupWizard/dialogs/FetchEverything.svelte";
 import RebuildEverything from "../features/SetupWizard/dialogs/RebuildEverything.svelte";
 import { extractObject } from "octagonal-wheels/object";
+import type { FetchEverythingResult, RebuildEverythingResult } from "../../modules/features/SetupWizard/resultTypes";
 import { SvelteDialogManagerBase } from "@lib/UI/svelteDialog.ts";
 import type { ServiceContext } from "@lib/services/base/ServiceBase.ts";
+import { $msg } from "@lib/common/i18n.ts";
 
 export class ModuleRedFlag extends AbstractModule {
     async isFlagFileExist(path: string) {
@@ -72,7 +74,7 @@ export class ModuleRedFlag extends AbstractModule {
         if (await this.adjustSettingToRemote(config)) {
             config = this.core.settings;
         } else {
-            this._log("Remote configuration not applied.", LOG_LEVEL_NOTICE);
+            this._log($msg("RedFlag.FetchRemoteConfig.NotApplied"), LOG_LEVEL_NOTICE);
         }
         console.debug(config);
     }
@@ -84,19 +86,19 @@ export class ModuleRedFlag extends AbstractModule {
      */
     async adjustSettingToRemote(config: ObsidianLiveSyncSettings) {
         // Fetch remote configuration unless prevented.
-        const SKIP_FETCH = "Skip and proceed";
-        const RETRY_FETCH = "Retry (recommended)";
+        const SKIP_FETCH = "RedFlag.FetchRemoteConfig.Buttons.SkipAndProceed";
+        const RETRY_FETCH = "RedFlag.FetchRemoteConfig.Buttons.Retry";
         let canProceed = false;
         do {
             const remoteTweaks = await this.services.tweakValue.fetchRemotePreferred(config);
             if (!remoteTweaks) {
                 const choice = await this.core.confirm.askSelectStringDialogue(
-                    "Could not fetch configuration from remote. If you are new to the Self-hosted LiveSync, this might be expected. If not, you should check your network or server settings.",
+                    $msg("RedFlag.FetchRemoteConfig.FailedMessage"),
                     [SKIP_FETCH, RETRY_FETCH] as const,
                     {
                         defaultAction: RETRY_FETCH,
                         timeout: 0,
-                        title: "Fetch Remote Configuration Failed",
+                        title: $msg("RedFlag.FetchRemoteConfig.FailedTitle"),
                     }
                 );
                 if (choice === SKIP_FETCH) {
@@ -109,13 +111,10 @@ export class ModuleRedFlag extends AbstractModule {
                     return (config as any)[key] !== value;
                 });
                 if (differentItems.length === 0) {
-                    this._log(
-                        "Remote configuration matches local configuration. No changes applied.",
-                        LOG_LEVEL_NOTICE
-                    );
+                    this._log($msg("RedFlag.FetchRemoteConfig.MatchesLocal"), LOG_LEVEL_NOTICE);
                 } else {
                     await this.core.confirm.askSelectStringDialogue(
-                        "Your settings differed slightly from the server's. The plug-in has supplemented the incompatible parts with the server settings!",
+                        $msg("RedFlag.FetchRemoteConfig.SettingsDiffered"),
                         ["OK"] as const,
                         {
                             defaultAction: "OK",
@@ -130,7 +129,7 @@ export class ModuleRedFlag extends AbstractModule {
                 } satisfies ObsidianLiveSyncSettings;
                 this.core.settings = config;
                 await this.core.services.setting.saveSettingData();
-                this._log("Remote configuration applied.", LOG_LEVEL_NOTICE);
+                this._log($msg("RedFlag.FetchRemoteConfig.Applied"), LOG_LEVEL_NOTICE);
                 canProceed = true;
                 return this.core.settings;
             }
@@ -155,12 +154,12 @@ export class ModuleRedFlag extends AbstractModule {
                 const result = await proc();
                 return result;
             } catch (ex) {
-                this._log("Error during vault initialisation process.", LOG_LEVEL_NOTICE);
+                this._log($msg("RedFlag.Log.VaultInitialisationProcessError"), LOG_LEVEL_NOTICE);
                 this._log(ex, LOG_LEVEL_VERBOSE);
                 return false;
             }
         } catch (ex) {
-            this._log("Error during vault initialisation.", LOG_LEVEL_NOTICE);
+            this._log($msg("RedFlag.Log.VaultInitialisationError"), LOG_LEVEL_NOTICE);
             this._log(ex, LOG_LEVEL_VERBOSE);
             return false;
         } finally {
@@ -177,10 +176,10 @@ export class ModuleRedFlag extends AbstractModule {
      * @returns true if can be continued, false if app restart is needed.
      */
     async onRebuildEverythingScheduled() {
-        const method = await this.dialogManager.openWithExplicitCancel(RebuildEverything);
+        const method = await this.dialogManager.openWithExplicitCancel<RebuildEverythingResult, undefined>(RebuildEverything);
         if (method === "cancelled") {
             // Clean up the flag file and restart the app.
-            this._log("Rebuild everything cancelled by user.", LOG_LEVEL_NOTICE);
+            this._log($msg("RedFlag.Log.RebuildEverythingCancelled"), LOG_LEVEL_NOTICE);
             await this.cleanupRebuildFlag();
             this.services.appLifecycle.performRestart();
             return false;
@@ -190,7 +189,7 @@ export class ModuleRedFlag extends AbstractModule {
         return await this.processVaultInitialisation(async () => {
             await this.core.rebuilder.$rebuildEverything();
             await this.cleanupRebuildFlag();
-            this._log("Rebuild everything operation completed.", LOG_LEVEL_NOTICE);
+            this._log($msg("RedFlag.Log.RebuildEverythingCompleted"), LOG_LEVEL_NOTICE);
             return true;
         });
     }
@@ -199,9 +198,9 @@ export class ModuleRedFlag extends AbstractModule {
      * @returns true if can be continued, false if app restart is needed.
      */
     async onFetchAllScheduled() {
-        const method = await this.dialogManager.openWithExplicitCancel(FetchEverything);
+        const method = await this.dialogManager.openWithExplicitCancel<FetchEverythingResult, undefined>(FetchEverything);
         if (method === "cancelled") {
-            this._log("Fetch everything cancelled by user.", LOG_LEVEL_NOTICE);
+            this._log($msg("RedFlag.Log.FetchEverythingCancelled"), LOG_LEVEL_NOTICE);
             // Clean up the flag file and restart the app.
             await this.cleanupFetchAllFlag();
             this.services.appLifecycle.performRestart();
@@ -246,7 +245,7 @@ export class ModuleRedFlag extends AbstractModule {
             );
             await this.core.rebuilder.$fetchLocal(makeLocalChunkBeforeSync, !makeLocalFilesBeforeSync);
             await this.cleanupFetchAllFlag();
-            this._log("Fetch everything operation completed. Vault files will be gradually synced.", LOG_LEVEL_NOTICE);
+            this._log($msg("RedFlag.Log.FetchEverythingCompleted"), LOG_LEVEL_NOTICE);
             return true;
         });
     }
@@ -270,7 +269,7 @@ export class ModuleRedFlag extends AbstractModule {
         }
         if (
             (await this.core.confirm.askYesNoDialog(
-                "Do you want to resume file and database processing, and restart obsidian now?",
+                $msg("RedFlag.ResumeProcessingPrompt"),
                 { defaultOption: "Yes", timeout: 15 }
             )) != "yes"
         ) {

src/modules/coreFeatures/ModuleRedFlag.ts

@@ -1,6 +1,7 @@
 import { ButtonComponent } from "@/deps.ts";
 import { App, FuzzySuggestModal, MarkdownRenderer, Modal, Plugin, Setting } from "../../../deps.ts";
 import { EVENT_PLUGIN_UNLOADED, eventHub } from "../../../common/events.ts";
+import { $msg, translateIfAvailable } from "../../../lib/src/common/i18n.ts";
 
 class AutoClosableModal extends Modal {
     _closeByUnload() {
@@ -58,7 +59,7 @@ export class InputStringDialog extends AutoClosableModal {
         new Setting(formEl)
             .addButton((btn) =>
                 btn
-                    .setButtonText("Ok")
+                    .setButtonText(translateIfAvailable("Ok"))
                     .setCta()
                     .onClick(() => {
                         this.isManuallyClosed = true;
@@ -67,7 +68,7 @@ export class InputStringDialog extends AutoClosableModal {
             )
             .addButton((btn) =>
                 btn
-                    .setButtonText("Cancel")
+                    .setButtonText(translateIfAvailable("Cancel"))
                     .setCta()
                     .onClick(() => {
                         this.close();

src/modules/coreObsidian/UILib/dialogs.ts

@@ -38,37 +38,37 @@ export class ModuleSetupObsidian extends AbstractModule {
             });
         } catch (e) {
             this._log(
-                "Failed to register protocol handler. This feature may not work in some environments.",
+                $msg("Setup.Log.ProtocolHandlerRegistrationFailed"),
                 LOG_LEVEL_NOTICE
             );
             this._log(e, LOG_LEVEL_VERBOSE);
         }
         this.addCommand({
             id: "livesync-setting-qr",
-            name: "Show settings as a QR code",
+            name: $msg("Setup.Command.ShowSettingsQrCode"),
             callback: () => fireAndForget(this.encodeQR()),
         });
 
         this.addCommand({
             id: "livesync-copysetupuri",
-            name: "Copy settings as a new setup URI",
+            name: $msg("Setup.Command.CopySetupUri"),
             callback: () => fireAndForget(this.command_copySetupURI()),
         });
         this.addCommand({
             id: "livesync-copysetupuri-short",
-            name: "Copy settings as a new setup URI (With customization sync)",
+            name: $msg("Setup.Command.CopySetupUriWithSync"),
             callback: () => fireAndForget(this.command_copySetupURIWithSync()),
         });
 
         this.addCommand({
             id: "livesync-copysetupurifull",
-            name: "Copy settings as a new setup URI (Full)",
+            name: $msg("Setup.Command.CopySetupUriFull"),
             callback: () => fireAndForget(this.command_copySetupURIFull()),
         });
 
         this.addCommand({
             id: "livesync-opensetupuri",
-            name: "Use the copied setup URI (Formerly Open setup URI)",
+            name: $msg("Setup.Command.OpenSetupUri"),
             callback: () => fireAndForget(this.command_openSetupURI()),
         });
 
@@ -89,14 +89,14 @@ export class ModuleSetupObsidian extends AbstractModule {
             return "";
         }
         const msg = $msg("Setup.QRCode", { qr_image: codeSVG });
-        await this.core.confirm.confirmWithMessage("Settings QR Code", msg, ["OK"], "OK");
+        await this.core.confirm.confirmWithMessage($msg("Setup.QRCodeTitle"), msg, ["OK"], "OK");
         return await Promise.resolve(codeSVG);
     }
 
     async askEncryptingPassphrase(): Promise<string | false> {
         const encryptingPassphrase = await this.core.confirm.askString(
-            "Encrypt your settings",
-            "The passphrase to encrypt the setup URI",
+            $msg("Setup.EncryptSettingsTitle"),
+            $msg("Setup.EncryptSettingsPassphrase"),
             "",
             true
         );
@@ -112,8 +112,8 @@ export class ModuleSetupObsidian extends AbstractModule {
             [...((stripExtra ? ["pluginSyncExtendedSetting"] : []) as (keyof ObsidianLiveSyncSettings)[])],
             true
         );
-        if (await this.services.UI.promptCopyToClipboard("Setup URI", encryptedURI)) {
-            this._log("Setup URI copied to clipboard", LOG_LEVEL_NOTICE);
+        if (await this.services.UI.promptCopyToClipboard($msg("Setup.SetupUri"), encryptedURI)) {
+            this._log($msg("Setup.Log.SetupUriCopiedToClipboard"), LOG_LEVEL_NOTICE);
         }
         // await navigator.clipboard.writeText(encryptedURI);
     }
@@ -123,7 +123,7 @@ export class ModuleSetupObsidian extends AbstractModule {
         if (encryptingPassphrase === false) return;
         const encryptedURI = await encodeSettingsToSetupURI(this.settings, encryptingPassphrase, [], false);
         await navigator.clipboard.writeText(encryptedURI);
-        this._log("Setup URI copied to clipboard", LOG_LEVEL_NOTICE);
+        this._log($msg("Setup.Log.SetupUriCopiedToClipboard"), LOG_LEVEL_NOTICE);
     }
 
     async command_copySetupURIWithSync() {

src/modules/features/ModuleSetupObsidian.ts

@@ -23,7 +23,7 @@ import {
     type AllNumericItemKey,
     type AllBooleanItemKey,
 } from "./settingConstants.ts";
-import { $msg } from "src/lib/src/common/i18n.ts";
+import { $msg, translateIfAvailable } from "src/lib/src/common/i18n.ts";
 import { findAttrFromParent, wrapMemo, type AutoWireOption, type OnUpdateResult } from "./SettingPane.ts";
 
 export class LiveSyncSetting extends Setting {
@@ -257,6 +257,9 @@ export class LiveSyncSetting extends Setting {
 
             this.invalidateValue = () => setValue(LiveSyncSetting.env.editingSettings[key] || "");
             this.invalidateValue();
+            for (const optionEl of Array.from(dropdown.selectEl.options)) {
+                optionEl.text = translateIfAvailable(optionEl.text);
+            }
             dropdown.onChange(async (value) => {
                 await this.commitValue(value);
             });

src/modules/features/SettingDialogue/LiveSyncSetting.ts

@@ -1,25 +1,42 @@
-import { $msg, $t } from "../../../lib/src/common/i18n.ts";
+import { $msg, setLang } from "../../../lib/src/common/i18n.ts";
 import { SUPPORTED_I18N_LANGS, type I18N_LANGS } from "../../../lib/src/common/rosetta.ts";
 import { LiveSyncSetting as Setting } from "./LiveSyncSetting.ts";
 import type { ObsidianLiveSyncSettingTab } from "./ObsidianLiveSyncSettingTab.ts";
 import type { PageFunctions } from "./SettingPane.ts";
 import { visibleOnly } from "./SettingPane.ts";
 import { EVENT_ON_UNRESOLVED_ERROR, eventHub } from "@/common/events.ts";
 import { NetworkWarningStyles } from "@lib/common/models/setting.const.ts";
+
+type NamedLanguage = Exclude<I18N_LANGS, "">;
+
+const LANGUAGE_NAMES: Record<NamedLanguage, string> = {
+    def: "English",
+    de: "Deutsch",
+    es: "Español",
+    ja: "日本語",
+    ko: "한국어",
+    ru: "Русский",
+    zh: "简体中文",
+    "zh-tw": "繁體中文",
+};
+
 export function paneGeneral(
     this: ObsidianLiveSyncSettingTab,
     paneEl: HTMLElement,
     { addPanel, addPane }: PageFunctions
 ): void {
     void addPanel(paneEl, $msg("obsidianLiveSyncSettingTab.titleAppearance")).then((paneEl) => {
         const languages = Object.fromEntries([
-            // ["", $msg("obsidianLiveSyncSettingTab.defaultLanguage")],
-            ...SUPPORTED_I18N_LANGS.map((e) => [e, $t(`lang-${e}`)]),
+            ["", $msg("obsidianLiveSyncSettingTab.defaultLanguage")],
+            ...SUPPORTED_I18N_LANGS.map((e) => [e, LANGUAGE_NAMES[e as NamedLanguage]]),
         ]) as Record<I18N_LANGS, string>;
         new Setting(paneEl).autoWireDropDown("displayLanguage", {
             options: languages,
         });
-        this.addOnSaved("displayLanguage", () => this.display());
+        this.addOnSaved("displayLanguage", (value) => {
+            setLang(value as I18N_LANGS);
+            this.display();
+        });
         new Setting(paneEl).autoWireToggle("showStatusOnEditor");
         this.addOnSaved("showStatusOnEditor", () => {
             eventHub.emitEvent(EVENT_ON_UNRESOLVED_ERROR);

src/modules/features/SettingDialogue/PaneGeneral.ts

@@ -13,6 +13,7 @@ import { visibleOnly } from "./SettingPane.ts";
 import { PouchDB } from "../../../lib/src/pouchdb/pouchdb-browser";
 import { ExtraSuffixIndexedDB } from "../../../lib/src/common/types.ts";
 import { migrateDatabases } from "./settingUtils.ts";
+import { $msg } from "../../../lib/src/common/i18n.ts";
 
 export function panePatches(this: ObsidianLiveSyncSettingTab, paneEl: HTMLElement, { addPanel }: PageFunctions): void {
     void addPanel(paneEl, "Compatibility (Metadata)").then((paneEl) => {
@@ -216,17 +217,21 @@ export function panePatches(this: ObsidianLiveSyncSettingTab, paneEl: HTMLElemen
             .addApplyButton(["maxMTimeForReflectEvents"]);
 
         this.addOnSaved("maxMTimeForReflectEvents", async (key) => {
-            const buttons = ["Restart Now", "Later"] as const;
+            const RESTART_NOW = "Ui.Settings.Patches.RemediationRestartNow";
+            const RESTART_LATER = "Ui.Settings.Patches.RemediationRestartLater";
+            const RESTART_NOW_TEXT = $msg(RESTART_NOW);
+            const RESTART_LATER_TEXT = $msg(RESTART_LATER);
+            const buttons = [RESTART_NOW_TEXT, RESTART_LATER_TEXT] as const;
             const reboot = await this.core.confirm.askSelectStringDialogue(
                 "Restarting Obsidian is strongly recommended. Until restart, some changes may not take effect, and display may be inconsistent. Are you sure to restart now?",
                 buttons,
                 {
-                    title: "Remediation Setting Changed",
-                    defaultAction: "Restart Now",
+                    title: $msg("Ui.Settings.Patches.RemediationChanged"),
+                    defaultAction: RESTART_NOW_TEXT,
                 }
             );
-            if (reboot !== "Later") {
-                Logger("Remediation setting changed. Restarting Obsidian...", LOG_LEVEL_NOTICE);
+            if (reboot !== RESTART_LATER_TEXT) {
+                Logger($msg("Ui.Settings.Patches.RemediationRestarting"), LOG_LEVEL_NOTICE);
                 this.services.appLifecycle.performRestart();
             }
         });