fix(settings): simplify About section, use i18n, hide commit details

Show only update status (up-to-date / update available) instead of
raw commit messages. Use i18n keys so the section displays correctly
in Chinese mode. Fix PROJECT_ROOT path for git commands.

Co-authored-by: Cursor <cursoragent@cursor.com>

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>
         )}