feat(i18n): add toggle i18n button

src/components/Header.tsx

@@ -5,6 +5,7 @@ import {
   IconFileStack,
   IconGlobe,
   IconHome,
+  IconLanguage,
   IconMenu,
   IconNetwork,
   IconPalette,
@@ -66,7 +67,7 @@ const ThemeSwitcher = () => (
 )
 
 export const Header = () => {
-  const [t] = useI18n()
+  const [t, { locale }] = useI18n()
 
   const navs = () => [
     {
@@ -169,6 +170,17 @@ export const Header = () => {
 
       <div class="navbar-end">
         <div class="flex items-center gap-2">
+          <button
+            class="btn btn-circle btn-sm"
+            onClick={() => {
+              const curLocale = locale()
+
+              locale(curLocale === 'en-US' ? 'zh-Hans' : 'en-US')
+            }}
+          >
+            <IconLanguage />
+          </button>
+
           <ThemeSwitcher />
 
           <button

src/i18n/index.tsx

@@ -1,6 +1,6 @@
-import { I18nContext, createI18nContext } from '@solid-primitives/i18n'
-import { ParentComponent } from 'solid-js'
-import { useLanguage } from '~/signals'
+import { I18nContext, createI18nContext, useI18n } from '@solid-primitives/i18n'
+import { makePersisted } from '@solid-primitives/storage'
+import { ParentComponent, createEffect, createSignal } from 'solid-js'
 
 const dict = {
   'en-US': {
@@ -9,8 +9,17 @@ const dict = {
       proxies: 'Proxies',
       rules: 'Rules',
       connections: 'Connections',
+      logs: 'Logs',
       config: 'Config',
     },
+    stats: {
+      upload: 'Upload',
+      download: 'Download',
+      uploadTotal: 'Upload Total',
+      downloadTotal: 'Download Total',
+      activeConnections: 'Active Connections',
+      memoryUsage: 'Memory Usage',
+    },
   },
   'zh-Hans': {
     navs: {
@@ -18,16 +27,47 @@ const dict = {
       proxies: '代理',
       rules: '规则',
       connections: '连接',
+      logs: '日志',
       config: '配置',
     },
+    stats: {
+      upload: '上传',
+      download: '下载',
+      uploadTotal: '上传总量',
+      downloadTotal: '下载总量',
+      activeConnections: '活动连接',
+      memoryUsage: '内存使用情况',
+    },
   },
 }
 
+const useLanguage = () => {
+  const [lang, setLang] = makePersisted(createSignal(navigator.language), {
+    name: 'lang',
+    storage: localStorage,
+  })
+
+  return { lang, setLang }
+}
+
+const I18nUpdator: ParentComponent = (props) => {
+  const { setLang } = useLanguage()
+  const [_, { locale }] = useI18n()
+
+  createEffect(() => {
+    setLang(locale())
+  })
+
+  return props.children
+}
+
 export const I18nProvider: ParentComponent = (props) => {
   const { lang } = useLanguage()
   const value = createI18nContext(dict, lang())
 
   return (
-    <I18nContext.Provider value={value}>{props.children}</I18nContext.Provider>
+    <I18nContext.Provider value={value}>
+      <I18nUpdator>{props.children}</I18nUpdator>
+    </I18nContext.Provider>
   )
 }

src/pages/Overview.tsx

@@ -1,4 +1,5 @@
 import { createEventSignal } from '@solid-primitives/event-listener'
+import { useI18n } from '@solid-primitives/i18n'
 import { createReconnectingWS } from '@solid-primitives/websocket'
 import type { ApexOptions } from 'apexcharts'
 import byteSize from 'byte-size'
@@ -58,6 +59,7 @@ const TrafficWidget: ParentComponent<{ label: JSX.Element }> = (props) => (
 )
 
 export default () => {
+  const [t] = useI18n()
   const [traffics, setTraffics] = createSignal<{ down: number; up: number }[]>(
     [],
   )
@@ -170,27 +172,27 @@ export default () => {
   return (
     <div class="flex flex-col gap-4">
       <div class="stats stats-vertical w-full bg-primary shadow lg:stats-horizontal lg:flex">
-        <TrafficWidget label="Upload">
+        <TrafficWidget label={t('stats.upload')}>
           {byteSize(traffic()?.up || 0).toString()}/s
         </TrafficWidget>
 
-        <TrafficWidget label="Download">
+        <TrafficWidget label={t('stats.download')}>
           {byteSize(traffic()?.down || 0).toString()}/s
         </TrafficWidget>
 
-        <TrafficWidget label="Upload Total">
+        <TrafficWidget label={t('stats.uploadTotal')}>
           {byteSize(connection()?.uploadTotal || 0).toString()}
         </TrafficWidget>
 
-        <TrafficWidget label="Download Total">
+        <TrafficWidget label={t('stats.downloadTotal')}>
           {byteSize(connection()?.downloadTotal || 0).toString()}
         </TrafficWidget>
 
-        <TrafficWidget label="Active Connections">
+        <TrafficWidget label={t('stats.activeConnections')}>
           {connection()?.connections.length || 0}
         </TrafficWidget>
 
-        <TrafficWidget label="Memory Usage">
+        <TrafficWidget label={t('stats.memoryUsage')}>
           {byteSize(memory() || 0).toString()}
         </TrafficWidget>
       </div>

src/signals/index.ts

@@ -44,12 +44,3 @@ export const useRequest = () => {
     },
   })
 }
-
-export const useLanguage = () => {
-  const [lang, setLang] = makePersisted(createSignal(navigator.language), {
-    name: 'lang',
-    storage: localStorage,
-  })
-
-  return { lang, setLang }
-}