feat(ui): add cross-platform window control styles

Persist automatic and explicit macOS, Windows, GNOME, and minimal control presets with localized settings and platform-aware fallback.

Refs #31

src/components/SettingsView.tsx

@@ -3,6 +3,7 @@ import {
   type AppFontSize,
   type ListRowDensity,
   type SidebarPosition,
+  type WindowControlStyle,
   type SettingsState,
   SettingsTab,
   runSettingsPersistenceTransaction,
@@ -698,6 +699,13 @@ runEngineChecks(false);
     { value: 'persian', label: t($ => $.settings.lookAndFeel.calendarPersian) },
     { value: 'hebrew', label: t($ => $.settings.lookAndFeel.calendarHebrew) },
   ] as const;
+  const windowControlStyleOptions: Array<{ value: WindowControlStyle; label: string }> = [
+    { value: 'auto', label: t($ => $.settings.lookAndFeel.windowControlStyleAutomatic) },
+    { value: 'macos', label: t($ => $.settings.lookAndFeel.windowControlStyleMacos) },
+    { value: 'windows', label: t($ => $.settings.lookAndFeel.windowControlStyleWindows) },
+    { value: 'gnome', label: t($ => $.settings.lookAndFeel.windowControlStyleGnome) },
+    { value: 'minimal', label: t($ => $.settings.lookAndFeel.windowControlStyleMinimal) },
+  ];
 
   const TabButton = ({ type, icon: Icon, label }: { type: SettingsTab; icon: typeof Download; label: string }) => {
     const active = activeTab === type;
@@ -907,6 +915,25 @@ runEngineChecks(false);
                 </div>
               </div>
 
+              <h2 className="settings-section-title">{t($ => $.settings.lookAndFeel.windowControls)}</h2>
+              <div className="mac-settings-group">
+                <div className="mac-settings-row">
+                  <div className="settings-row-label">
+                    <span>{t($ => $.settings.lookAndFeel.windowControlStyle)}</span>
+                    <small>{t($ => $.settings.lookAndFeel.windowControlsDescription)}</small>
+                  </div>
+                  <select
+                    value={settings.windowControlStyle}
+                    onChange={(event) => settings.setWindowControlStyle(event.target.value as WindowControlStyle)}
+                    className="app-control w-48"
+                  >
+                    {windowControlStyleOptions.map(option => (
+                      <option key={option.value} value={option.value}>{option.label}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
               <h2 className="settings-section-title">{t($ => $.settings.lookAndFeel.appTheme)}</h2>
               <div className="mac-settings-group">
                 <div className="mac-settings-row settings-choice-row">

src/components/WindowControls.tsx

@@ -2,6 +2,7 @@ import { getCurrentWindow } from '@tauri-apps/api/window';
 import { Maximize2, Minus, X } from 'lucide-react';
 import type { PointerEvent } from 'react';
 import { useTranslation } from 'react-i18next';
+import type { ResolvedWindowControlStyle } from '../utils/windowControlStyle';
 
 const appWindow = getCurrentWindow();
 
@@ -11,14 +12,15 @@ const stopTitlebarDrag = (event: PointerEvent<HTMLButtonElement>) => {
 
 interface WindowControlsProps {
   side: 'left' | 'right';
+  controlStyle: ResolvedWindowControlStyle;
 }
 
-export function WindowControls({ side }: WindowControlsProps) {
+export function WindowControls({ side, controlStyle }: WindowControlsProps) {
   const { t } = useTranslation();
 
   return (
     <div
-      className={`window-controls window-controls--${side}`}
+      className={`window-controls window-controls--${side} window-controls--style-${controlStyle}`}
       aria-label={t($ => $.window.controls)}
     >
       <button