jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

agent: settings — restyle with zone picker and accessibility controls

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
jake
2026-03-21 11:04:06 +00:00
parent 73851bdda9
commit 01f6e42346
1 changed files with 40 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/lib/pages/SettingsPage.svelte
View File

@@ -7,8 +7,14 @@
import Toggle from "$lib/components/Toggle.svelte";
import SegmentedButton from "$lib/components/SegmentedButton.svelte";
import HotkeyRecorder from "$lib/components/HotkeyRecorder.svelte";
import ZonePicker from "$lib/components/ZonePicker.svelte";
import AccessibilityControls from "$lib/components/AccessibilityControls.svelte";
import { getPreferences, updatePreferences } from "$lib/stores/preferences.svelte.js";
import { Check, ChevronRight } from "lucide-svelte";
import { open } from "@tauri-apps/plugin-dialog";
const prefs = getPreferences();
let engineStatus = $state("Checking...");
let engineOk = $state(false);
let downloadedModels = $state([]);
@@ -93,6 +99,15 @@
saveSettings();
});
// Sync theme setting to preferences store
$effect(() => {
const map = { Dark: 'dark', Light: 'light', System: 'system' };
const mapped = map[settings.theme] || 'dark';
if (prefs.theme !== mapped) {
updatePreferences({ theme: mapped });
}
});
async function downloadModel(size) {
downloadingModel = size;
downloadProgress = 0;
@@ -349,9 +364,7 @@
title={settings.britishEnglish ? "British English spelling active" : "Click to enable British English spelling"}
>
{#if settings.britishEnglish}
<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<path d="M5 12l5 5L20 7" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<Check class="w-3 h-3" strokeWidth={2.5} />
{/if}
British English
</button>
@@ -425,9 +438,7 @@
class="flex items-center gap-2 w-full text-left mb-1"
onclick={() => showProfiles = !showProfiles}
>
<svg class="w-3 h-3 text-text-tertiary transition-transform {showProfiles ? 'rotate-90' : ''}" viewBox="0 0 24 24" fill="currentColor">
<path d="M8 5l8 7-8 7z" />
</svg>
<ChevronRight class="w-3 h-3 text-text-tertiary transition-transform duration-[var(--duration-ui)] {showProfiles ? 'rotate-90' : ''}" />
<h3 class="text-[14px] font-semibold text-text">Profiles</h3>
<span class="text-[10px] px-1.5 py-0.5 rounded-full bg-bg-elevated text-text-tertiary">
{profiles.length}
@@ -495,9 +506,7 @@
class="flex items-center gap-2 w-full text-left mb-1"
onclick={() => showTemplates = !showTemplates}
>
<svg class="w-3 h-3 text-text-tertiary transition-transform {showTemplates ? 'rotate-90' : ''}" viewBox="0 0 24 24" fill="currentColor">
<path d="M8 5l8 7-8 7z" />
</svg>
<ChevronRight class="w-3 h-3 text-text-tertiary transition-transform duration-[var(--duration-ui)] {showTemplates ? 'rotate-90' : ''}" />
<h3 class="text-[14px] font-semibold text-text">Templates</h3>
<span class="text-[10px] px-1.5 py-0.5 rounded-full bg-bg-elevated text-text-tertiary">
{templates.length}
@@ -645,6 +654,11 @@
<SegmentedButton options={["Dark", "Light", "System"]} bind:value={settings.theme} />
</div>
<div class="mb-6">
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">Zone</p>
<ZonePicker />
</div>
<div class="mb-6">
<p class="text-[10px] font-medium text-text-tertiary uppercase tracking-wider mb-2">
Font Size <span class="font-normal text-text-secondary ml-1">{settings.fontSize}px</span>
@@ -660,6 +674,22 @@
{/if}
</div>
<!-- Accessibility -->
<div class="border-b border-border-subtle">
<button
class="flex items-center justify-between w-full py-4 px-5 text-left"
onclick={() => openSection = openSection === 'accessibility' ? null : 'accessibility'}
>
<h3 class="font-display text-[18px] italic text-text">Accessibility</h3>
<span class="text-text-tertiary text-[16px] leading-none">{openSection === 'accessibility' ? '−' : '+'}</span>
</button>
{#if openSection === 'accessibility'}
<div class="px-5 pb-5 animate-fade-in">
<AccessibilityControls />
</div>
{/if}
</div>
<!-- About -->
<div>
<button
@@ -686,9 +716,7 @@
"No telemetry — zero data collection",
] as item}
<div class="flex items-start gap-2">
<svg class="w-3.5 h-3.5 text-success mt-0.5 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17Z" />
</svg>
<Check class="w-3.5 h-3.5 text-success mt-0.5 flex-shrink-0" />
<p class="text-[11px] text-text-secondary">{item}</p>
</div>
{/each}