overhaul settings: split into routed sub-tabs, add server logs, changelog, reusable setting components

- Rename Server tab to Settings with horizontal sub-tab navigation (General, Generation, GPU, Logs, Changelog) - All sub-tabs are proper routes under /settings/* with /server redirect for backwards compat - General: connection settings, link cards (docs + discord), API reference card, app updates - Generation: auto-chunking, crossfade, normalize, autoplay as SettingRow components - GPU: info card with platform-aware icons (Apple logo for MPS), CUDA management, explainer text - Logs: real-time server log viewer piped from Tauri sidecar via event system (Tauri-only) - Changelog: parsed from CHANGELOG.md at build time via Vite virtual module plugin - New reusable SettingRow/SettingSection components for consistent settings layout - New Toggle (switch) UI component replacing checkboxes in settings - Toast viewport now offsets when audio player is open - Sidebar stays active on settings sub-routes (fuzzy matching)
2026-09-18 14:20:42 -07:00 · 2026-03-16 09:31:14 -07:00
parent e0a798dc0d
commit 2c63dfff25
30 changed files with 1879 additions and 60 deletions
@@ -0,0 +1,90 @@
+import { Slider } from '@/components/ui/slider';
+import { Toggle } from '@/components/ui/toggle';
+import { useServerStore } from '@/stores/serverStore';
+import { SettingRow, SettingSection } from './SettingRow';
+
+export function GenerationPage() {
+  const maxChunkChars = useServerStore((state) => state.maxChunkChars);
+  const setMaxChunkChars = useServerStore((state) => state.setMaxChunkChars);
+  const crossfadeMs = useServerStore((state) => state.crossfadeMs);
+  const setCrossfadeMs = useServerStore((state) => state.setCrossfadeMs);
+  const normalizeAudio = useServerStore((state) => state.normalizeAudio);
+  const setNormalizeAudio = useServerStore((state) => state.setNormalizeAudio);
+  const autoplayOnGenerate = useServerStore((state) => state.autoplayOnGenerate);
+  const setAutoplayOnGenerate = useServerStore((state) => state.setAutoplayOnGenerate);
+
+  return (
+    <div className="space-y-8 max-w-2xl">
+      <SettingSection
+        title="Generation"
+        description="Controls for long text generation. These settings apply to all engines."
+      >
+        <SettingRow
+          title="Auto-chunking limit"
+          description="Long text is split into chunks at sentence boundaries. Lower values can improve quality for long outputs."
+          action={
+            <span className="text-sm tabular-nums text-muted-foreground">
+              {maxChunkChars} chars
+            </span>
+          }
+        >
+          <Slider
+            id="maxChunkChars"
+            value={[maxChunkChars]}
+            onValueChange={([value]) => setMaxChunkChars(value)}
+            min={100}
+            max={5000}
+            step={50}
+            aria-label="Auto-chunking character limit"
+          />
+        </SettingRow>
+
+        <SettingRow
+          title="Chunk crossfade"
+          description="Blends audio between chunks to smooth transitions. Set to 0 for a hard cut."
+          action={
+            <span className="text-sm tabular-nums text-muted-foreground">
+              {crossfadeMs === 0 ? 'Cut' : `${crossfadeMs}ms`}
+            </span>
+          }
+        >
+          <Slider
+            id="crossfadeMs"
+            value={[crossfadeMs]}
+            onValueChange={([value]) => setCrossfadeMs(value)}
+            min={0}
+            max={200}
+            step={10}
+            aria-label="Chunk crossfade duration"
+          />
+        </SettingRow>
+
+        <SettingRow
+          title="Normalize audio"
+          description="Adjusts output volume to a consistent level across generations."
+          htmlFor="normalizeAudio"
+          action={
+            <Toggle
+              id="normalizeAudio"
+              checked={normalizeAudio}
+              onCheckedChange={setNormalizeAudio}
+            />
+          }
+        />
+
+        <SettingRow
+          title="Autoplay on generate"
+          description="Automatically play audio when a generation completes."
+          htmlFor="autoplayOnGenerate"
+          action={
+            <Toggle
+              id="autoplayOnGenerate"
+              checked={autoplayOnGenerate}
+              onCheckedChange={setAutoplayOnGenerate}
+            />
+          }
+        />
+      </SettingSection>
+    </div>
+  );
+}