Merge pull request #160 from OpenBMB/fix/settings-about-i18n

fix(settings): i18n for About section, simplify version display

Author: Mingwwww

ui/src/components/settings/view/Settings.tsx

@@ -500,21 +500,14 @@ function SelectControl({
 }
 
 function VersionUpdateSection() {
+  const { t } = useTranslation('settings');
   const { info, loading, triggerUpdate, triggerRestart, fetchVersion } = useGitVersion();
   const [phase, setPhase] = useState<'idle' | 'updating' | 'success' | 'error'>('idle');
-  const [logs, setLogs] = useState<string[]>([]);
 
   const handleUpdate = async () => {
     setPhase('updating');
-    setLogs([]);
     const result = await triggerUpdate();
-    if (result.success) {
-      setLogs(result.lines);
-      setPhase('success');
-    } else {
-      setLogs(result.lines.length > 0 ? result.lines : ['Update failed']);
-      setPhase('error');
-    }
+    setPhase(result.success ? 'success' : 'error');
   };
 
   const handleRestart = async () => {
@@ -537,98 +530,72 @@ function VersionUpdateSection() {
     }, 2000);
   };
 
-  if (!info) return null;
+  const statusText = !info
+    ? t('about.checking')
+    : info.hasUpdate
+      ? t('about.updateAvailable')
+      : t('about.upToDate');
 
   return (
-    <SettingsGroup title="About">
+    <SettingsGroup title={t('about.title')}>
       <GroupedCard divided>
         <div className="flex min-h-[66px] items-center gap-3.5 px-5 py-3">
           <GitCommit className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
           <div className="min-w-0 flex-1">
-            <div className="text-[15px] font-semibold leading-5 text-foreground">Version</div>
-            <div className="mt-0.5 text-xs leading-5 font-mono text-muted-foreground">
-              {info.currentCommit} · {info.branch}
+            <div className="text-[15px] font-semibold leading-5 text-foreground">{t('about.version')}</div>
+            <div className="mt-0.5 text-xs leading-5 text-muted-foreground">
+              {statusText}
             </div>
           </div>
-          {info.hasUpdate && phase === 'idle' && (
-            <span className="rounded-full bg-blue-100 px-2 py-0.5 text-[11px] font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
-              {info.behindCount} update{info.behindCount > 1 ? 's' : ''}
-            </span>
-          )}
-        </div>
-
-        {info.hasUpdate && phase === 'idle' && (
-          <div className="px-5 py-3">
-            {info.newCommits.length > 0 && (
-              <ul className="mb-3 space-y-1">
-                {info.newCommits.slice(0, 5).map((commit, i) => (
-                  <li key={i} className="truncate text-xs font-mono text-muted-foreground">
-                    {commit}
-                  </li>
-                ))}
-                {info.newCommits.length > 5 && (
-                  <li className="text-xs text-muted-foreground">
-                    ... and {info.newCommits.length - 5} more
-                  </li>
-                )}
-              </ul>
-            )}
+          {info?.hasUpdate && phase === 'idle' && (
             <button
               type="button"
               onClick={handleUpdate}
               disabled={loading}
-              className="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3.5 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
+              className="inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
             >
-              <Download className="h-3.5 w-3.5" />
-              Update Now
+              <Download className="h-3 w-3" />
+              {t('about.updateNow')}
             </button>
-          </div>
-        )}
+          )}
+        </div>
 
         {phase === 'updating' && (
           <div className="px-5 py-3">
-            <div className="flex items-center gap-2 mb-2">
+            <div className="flex items-center gap-2">
               <RefreshCw className="h-4 w-4 animate-spin text-blue-500" />
-              <span className="text-sm font-medium text-foreground">Updating...</span>
-            </div>
-            <div className="max-h-32 overflow-y-auto rounded bg-neutral-900 p-2">
-              {logs.map((line, i) => (
-                <div key={i} className="text-[11px] font-mono text-neutral-300 leading-relaxed">{line}</div>
-              ))}
+              <span className="text-sm font-medium text-foreground">{t('about.updating')}</span>
             </div>
           </div>
         )}
 
         {phase === 'success' && (
-          <div className="px-5 py-3 space-y-3">
-            <div className="flex items-center gap-2">
-              <span className="text-sm font-medium text-green-700 dark:text-green-400">Update complete!</span>
+          <div className="flex min-h-[56px] items-center gap-3.5 px-5 py-3">
+            <div className="min-w-0 flex-1">
+              <span className="text-sm font-medium text-green-700 dark:text-green-400">{t('about.updateComplete')}</span>
             </div>
             <button
               type="button"
               onClick={handleRestart}
-              className="inline-flex items-center gap-1.5 rounded-lg bg-green-600 px-3.5 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600"
+              className="inline-flex items-center gap-1.5 rounded-lg bg-green-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600"
             >
-              <RefreshCw className="h-3.5 w-3.5" />
-              Restart to Apply
+              <RefreshCw className="h-3 w-3" />
+              {t('about.restartToApply')}
             </button>
           </div>
         )}
 
         {phase === 'error' && (
-          <div className="px-5 py-3">
-            <p className="text-sm font-medium text-red-700 dark:text-red-400 mb-2">Update failed</p>
-            <div className="max-h-24 overflow-y-auto rounded bg-neutral-900 p-2">
-              {logs.slice(-3).map((line, i) => (
-                <div key={i} className="text-[11px] font-mono text-red-300 leading-relaxed">{line}</div>
-              ))}
+          <div className="flex min-h-[56px] items-center gap-3.5 px-5 py-3">
+            <div className="min-w-0 flex-1">
+              <span className="text-sm font-medium text-red-700 dark:text-red-400">{t('about.updateFailed')}</span>
             </div>
             <button
               type="button"
               onClick={() => { setPhase('idle'); fetchVersion(); }}
-              className="mt-2 text-xs text-muted-foreground hover:text-foreground"
+              className="text-xs text-muted-foreground hover:text-foreground"
             >
-              Dismiss
+              {t('about.dismiss')}
             </button>
           </div>
         )}

ui/src/i18n/locales/en/settings.json

@@ -991,5 +991,18 @@
     "installAriaLabel": "Plugin git repository URL",
     "tab": "tab",
     "runningStatus": "running"
+  },
+  "about": {
+    "title": "About",
+    "version": "Version",
+    "checking": "Checking for updates...",
+    "upToDate": "Up to date",
+    "updateAvailable": "Update available",
+    "updateNow": "Update Now",
+    "updating": "Updating...",
+    "updateComplete": "Update complete!",
+    "updateFailed": "Update failed",
+    "restartToApply": "Restart to Apply",
+    "dismiss": "Dismiss"
   }
 }

ui/src/i18n/locales/zh-CN/settings.json

@@ -985,5 +985,18 @@
     "installAriaLabel": "插件 git 仓库 URL",
     "tab": "标签",
     "runningStatus": "运行中"
+  },
+  "about": {
+    "title": "关于",
+    "version": "版本",
+    "checking": "正在检查更新...",
+    "upToDate": "已是最新版本",
+    "updateAvailable": "有新版本可用",
+    "updateNow": "立即更新",
+    "updating": "更新中...",
+    "updateComplete": "更新完成！",
+    "updateFailed": "更新失败",
+    "restartToApply": "重启以应用",
+    "dismiss": "关闭"
   }
 }