feat(gui): Darkmode Switch & Language Selector (#295)

refactor(gui): rename zh to zh-Hans

.vscode/settings.json

@@ -1,5 +1,16 @@
 {
-  "cSpell.words": ["counterparty", "datasource", "feishu", "forex", "gtag", "kbps", "OHLC", "twap", "yuants"],
+  "cSpell.words": [
+    "counterparty",
+    "Darkmode",
+    "datasource",
+    "feishu",
+    "forex",
+    "gtag",
+    "kbps",
+    "OHLC",
+    "twap",
+    "yuants"
+  ],
   "files.associations": {
     "*.json": "jsonc"
   },

ui/web/public/locales/zh/UserMenu.json → ui/web/public/locales/zh-Hans/UserMenu.json

@@ -4,7 +4,7 @@
   "Copilot": "Yuan Copilot",
   "about": "关于",
   "change_language": "变更语言",
-  "change_language_prompt": "请输入要变更到的语言",
+  "change_language_prompt": "请选择要变更到的语言",
   "open_source": "开源项目",
   "reset_layout": "重置布局",
   "settings": "设置",

ui/web/src/modules/DesktopLayout/DesktopLayout.tsx

@@ -4,13 +4,15 @@ import { useObservableState } from 'observable-hooks';
 import { useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { CommandCenter } from '../CommandCenter';
+import { LanguageSelector } from '../Locale/LanguageSelector';
 import { Page } from '../Pages';
 import { ErrorBoundary } from '../Pages/ErrorBoundary';
 import { NetworkStatusWidget } from '../Terminals/NetworkStatusWidget';
 import { UserMenu } from '../User/UserMenu';
 import { HomePage } from '../Workbench/HomePage';
 import { isDarkMode$ } from '../Workbench/darkmode';
 import { layoutModel$, layoutModelJson$ } from './layout-model';
+import { DarkmodeSwitch } from '../Workbench/DarkmodeSwitch';
 
 // ISSUE: React.memo will cause layout tab label not change while change language
 export const DesktopLayout = () => {
@@ -66,6 +68,12 @@ export const DesktopLayout = () => {
               <ErrorBoundary>
                 <NetworkStatusWidget />
               </ErrorBoundary>
+              <ErrorBoundary>
+                <LanguageSelector />
+              </ErrorBoundary>
+              <ErrorBoundary>
+                <DarkmodeSwitch />
+              </ErrorBoundary>
               <ErrorBoundary>
                 <UserMenu />
               </ErrorBoundary>

ui/web/src/modules/Locale/LanguageSelector.tsx

@@ -0,0 +1,17 @@
+import { IconLanguage } from '@douyinfe/semi-icons';
+import { Button } from '@douyinfe/semi-ui';
+import React from 'react';
+import { executeCommand } from '../CommandCenter';
+
+export const LanguageSelector = React.memo(() => {
+  return (
+    <Button
+      icon={<IconLanguage />}
+      type="tertiary"
+      theme="borderless"
+      onClick={() => {
+        executeCommand('ChangeLanguage');
+      }}
+    />
+  );
+});

ui/web/src/modules/User/UserMenu.tsx

@@ -24,7 +24,10 @@ registerCommand('ChangeLanguage', async () => {
     {
       type: 'string',
       title: t('UserMenu:change_language_prompt'),
-      enum: ['zh', 'en'],
+      oneOf: [
+        { const: 'zh-Hans', title: '简体中文' },
+        { const: 'en', title: 'English' },
+      ],
     },
     i18n.language,
   );

ui/web/src/modules/Workbench/DarkmodeSwitch.tsx

@@ -0,0 +1,19 @@
+import { IconMoon, IconSun } from '@douyinfe/semi-icons';
+import { Button } from '@douyinfe/semi-ui';
+import { useObservableState } from 'observable-hooks';
+import React from 'react';
+import { isDarkMode$ } from './darkmode';
+
+export const DarkmodeSwitch = React.memo(() => {
+  const isDark = useObservableState(isDarkMode$);
+  return (
+    <Button
+      icon={isDark ? <IconMoon /> : <IconSun />}
+      theme="borderless"
+      type="tertiary"
+      onClick={() => {
+        isDarkMode$.next(!isDark);
+      }}
+    />
+  );
+});

ui/web/src/modules/Workbench/darkmode.ts

@@ -1,22 +1,35 @@
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 export const isDarkMode$ = new BehaviorSubject<boolean>(false);
 
-const mql = window.matchMedia('(prefers-color-scheme: dark)');
-function matchMode(e: any) {
-  const body = document.body;
-  if (e.matches) {
-    isDarkMode$.next(true);
-    if (!body.hasAttribute('theme-mode')) {
-      body.setAttribute('theme-mode', 'dark');
+isDarkMode$.subscribe((isDark) => {
+  if (isDark) {
+    if (!document.body.hasAttribute('theme-mode')) {
+      document.body.setAttribute('theme-mode', 'dark');
     }
   } else {
-    isDarkMode$.next(false);
-    if (body.hasAttribute('theme-mode')) {
-      body.removeAttribute('theme-mode');
+    if (document.body.hasAttribute('theme-mode')) {
+      document.body.removeAttribute('theme-mode');
     }
   }
-}
+});
 
-mql.addListener(matchMode);
-matchMode(mql);
+// Follow system dark mode
+new Observable<boolean>((subscriber) => {
+  const mql = window.matchMedia('(prefers-color-scheme: dark)');
+  function matchMode(e: any) {
+    if (e.matches) {
+      subscriber.next(true);
+    } else {
+      subscriber.next(false);
+    }
+  }
+  matchMode(mql);
+
+  mql.addEventListener('change', matchMode);
+  return () => {
+    mql.removeEventListener('change', matchMode);
+  };
+}).subscribe((v) => {
+  isDarkMode$.next(v);
+});