refactor: reduce code duplication in font settings and sync logic

Address CodeRabbit review feedback:
- Create getEffectiveFont helper to deduplicate getEffectiveFontSans/Mono
- Extract getSettingsFieldValue and hasSettingsFieldChanged helpers
- Create reusable FontSelector component for font selection UI
- Refactor project-theme-section and appearance-section to use FontSelector

apps/ui/src/components/shared/font-selector.tsx

@@ -0,0 +1,47 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { DEFAULT_FONT_VALUE } from '@/config/ui-font-options';
+
+interface FontOption {
+  value: string;
+  label: string;
+}
+
+interface FontSelectorProps {
+  id: string;
+  value: string;
+  options: readonly FontOption[];
+  placeholder: string;
+  onChange: (value: string) => void;
+}
+
+/**
+ * Reusable font selector component with live preview styling
+ */
+export function FontSelector({ id, value, options, placeholder, onChange }: FontSelectorProps) {
+  return (
+    <Select value={value} onValueChange={onChange}>
+      <SelectTrigger id={id} className="w-full">
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            <span
+              style={{
+                fontFamily: option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
+              }}
+            >
+              {option.label}
+            </span>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

apps/ui/src/components/shared/index.ts

@@ -5,3 +5,6 @@ export {
   type UseModelOverrideOptions,
   type UseModelOverrideResult,
 } from './use-model-override';
+
+// Font Components
+export { FontSelector } from './font-selector';

apps/ui/src/components/views/project-settings-view/project-theme-section.tsx

@@ -1,13 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { Palette, Moon, Sun, Type } from 'lucide-react';
 import { darkThemes, lightThemes, type Theme } from '@/config/theme-options';
 import {
@@ -17,6 +10,7 @@ import {
 } from '@/config/ui-font-options';
 import { cn } from '@/lib/utils';
 import { useAppStore } from '@/store/app-store';
+import { FontSelector } from '@/components/shared';
 import type { Project } from '@/lib/electron';
 
 interface ProjectThemeSectionProps {
@@ -305,25 +299,13 @@ export function ProjectThemeSection({ project }: ProjectThemeSectionProps) {
                   <Label htmlFor="ui-font-select" className="text-sm">
                     Project UI Font
                   </Label>
-                  <Select value={fontSansLocal} onValueChange={handleFontSansChange}>
-                    <SelectTrigger id="ui-font-select" className="w-full">
-                      <SelectValue placeholder="Default (Geist Sans)" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {UI_SANS_FONT_OPTIONS.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>
-                          <span
-                            style={{
-                              fontFamily:
-                                option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
-                            }}
-                          >
-                            {option.label}
-                          </span>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <FontSelector
+                    id="ui-font-select"
+                    value={fontSansLocal}
+                    options={UI_SANS_FONT_OPTIONS}
+                    placeholder="Default (Geist Sans)"
+                    onChange={handleFontSansChange}
+                  />
                 </div>
               )}
             </div>
@@ -358,25 +340,13 @@ export function ProjectThemeSection({ project }: ProjectThemeSectionProps) {
                   <Label htmlFor="code-font-select" className="text-sm">
                     Project Code Font
                   </Label>
-                  <Select value={fontMonoLocal} onValueChange={handleFontMonoChange}>
-                    <SelectTrigger id="code-font-select" className="w-full">
-                      <SelectValue placeholder="Default (Geist Mono)" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {UI_MONO_FONT_OPTIONS.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>
-                          <span
-                            style={{
-                              fontFamily:
-                                option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
-                            }}
-                          >
-                            {option.label}
-                          </span>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <FontSelector
+                    id="code-font-select"
+                    value={fontMonoLocal}
+                    options={UI_MONO_FONT_OPTIONS}
+                    placeholder="Default (Geist Mono)"
+                    onChange={handleFontMonoChange}
+                  />
                 </div>
               )}
             </div>

apps/ui/src/components/views/settings-view/appearance/appearance-section.tsx

@@ -1,12 +1,5 @@
 import { useState, useEffect } from 'react';
 import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { Palette, Moon, Sun, Type } from 'lucide-react';
 import { darkThemes, lightThemes } from '@/config/theme-options';
 import {
@@ -16,6 +9,7 @@ import {
 } from '@/config/ui-font-options';
 import { cn } from '@/lib/utils';
 import { useAppStore } from '@/store/app-store';
+import { FontSelector } from '@/components/shared';
 import type { Theme } from '../shared/types';
 
 interface AppearanceSectionProps {
@@ -165,25 +159,13 @@ export function AppearanceSection({ effectiveTheme, onThemeChange }: AppearanceS
               <Label htmlFor="global-ui-font-select" className="text-sm">
                 UI Font
               </Label>
-              <Select value={fontSansValue} onValueChange={handleFontSansChange}>
-                <SelectTrigger id="global-ui-font-select" className="w-full">
-                  <SelectValue placeholder="Default (Geist Sans)" />
-                </SelectTrigger>
-                <SelectContent>
-                  {UI_SANS_FONT_OPTIONS.map((option) => (
-                    <SelectItem key={option.value} value={option.value}>
-                      <span
-                        style={{
-                          fontFamily:
-                            option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
-                        }}
-                      >
-                        {option.label}
-                      </span>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+              <FontSelector
+                id="global-ui-font-select"
+                value={fontSansValue}
+                options={UI_SANS_FONT_OPTIONS}
+                placeholder="Default (Geist Sans)"
+                onChange={handleFontSansChange}
+              />
               <p className="text-xs text-muted-foreground">
                 Used for headings, labels, and UI text
               </p>
@@ -194,25 +176,13 @@ export function AppearanceSection({ effectiveTheme, onThemeChange }: AppearanceS
               <Label htmlFor="global-code-font-select" className="text-sm">
                 Code Font
               </Label>
-              <Select value={fontMonoValue} onValueChange={handleFontMonoChange}>
-                <SelectTrigger id="global-code-font-select" className="w-full">
-                  <SelectValue placeholder="Default (Geist Mono)" />
-                </SelectTrigger>
-                <SelectContent>
-                  {UI_MONO_FONT_OPTIONS.map((option) => (
-                    <SelectItem key={option.value} value={option.value}>
-                      <span
-                        style={{
-                          fontFamily:
-                            option.value === DEFAULT_FONT_VALUE ? undefined : option.value,
-                        }}
-                      >
-                        {option.label}
-                      </span>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+              <FontSelector
+                id="global-code-font-select"
+                value={fontMonoValue}
+                options={UI_MONO_FONT_OPTIONS}
+                placeholder="Default (Geist Mono)"
+                onChange={handleFontMonoChange}
+              />
               <p className="text-xs text-muted-foreground">
                 Used for code blocks and monospaced text
               </p>