perf: fine-grained Zustand selectors in App and Sidebar

- App.tsx: split (s) => s.config into (s) => s.config.theme and
  (s) => s.config.uiLanguage — prevents the root component from
  re-rendering on every config change (history added, provider changed,
  dictionary updated, etc.)
- Sidebar.tsx: (s) => s.config → (s) => s.config.theme — sidebar only
  needs theme for the dark/light toggle, no longer re-renders when
  unrelated config fields change

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: liangweifeng

src/App.tsx

@@ -24,7 +24,8 @@ function applyTheme(theme: string) {
 export default function App() {
   const [page, setPage] = useState<PageID>('dashboard');
   const [settingsOpen, setSettingsOpen] = useState(false);
-  const config = useConfigStore((s) => s.config);
+  const theme = useConfigStore((s) => s.config.theme);
+  const uiLanguage = useConfigStore((s) => s.config.uiLanguage);
   const loaded = useConfigStore((s) => s.loaded);
   const load = useConfigStore((s) => s.load);
   const { setLocale } = useTranslation();
@@ -46,24 +47,24 @@ export default function App() {
   // Sync UI language from config to i18n context
   useEffect(() => {
     if (!loaded) return;
-    const lang = config.uiLanguage === 'auto' ? detectLocale() : config.uiLanguage as Locale;
+    const lang = uiLanguage === 'auto' ? detectLocale() : uiLanguage as Locale;
     setLocale(lang);
-  }, [loaded, config.uiLanguage, setLocale]);
+  }, [loaded, uiLanguage, setLocale]);
 
   // Apply theme on config change
   useEffect(() => {
     if (!loaded) return;
-    applyTheme(config.theme);
-  }, [loaded, config.theme]);
+    applyTheme(theme);
+  }, [loaded, theme]);
 
   // Listen for system theme changes when in 'system' mode
   useEffect(() => {
-    if (!loaded || config.theme !== 'system') return;
+    if (!loaded || theme !== 'system') return;
     const mq = window.matchMedia('(prefers-color-scheme: dark)');
     const handler = () => applyTheme('system');
     mq.addEventListener('change', handler);
     return () => mq.removeEventListener('change', handler);
-  }, [loaded, config.theme]);
+  }, [loaded, theme]);
 
   // Check if this is the overlay window
   if (window.location.hash === '#/overlay') {

src/components/layout/Sidebar.tsx

@@ -33,15 +33,15 @@ const navItems: Array<{ id: PageID; i18nKey: string; icon: JSX.Element }> = [
 ];
 
 export function Sidebar({ current, onNavigate, onOpenSettings }: SidebarProps) {
-  const config = useConfigStore((s) => s.config);
+  const theme = useConfigStore((s) => s.config.theme);
   const set = useConfigStore((s) => s.set);
   const { t } = useTranslation();
 
   const toggleTheme = () => {
-    const next = config.theme === 'dark' ? 'light' : 'dark';
+    const next = theme === 'dark' ? 'light' : 'dark';
     set('theme', next);
   };
-  const isDark = config.theme === 'dark';
+  const isDark = theme === 'dark';
 
   return (
     <div className="w-[200px] bg-surface-50 dark:bg-surface-950 border-r border-surface-200 dark:border-surface-800/60 flex flex-col">