diff --git a/frontend/src/lib/components/SettingsPanel.svelte b/frontend/src/lib/components/SettingsPanel.svelte index b20e470..7a3d8a1 100644 --- a/frontend/src/lib/components/SettingsPanel.svelte +++ b/frontend/src/lib/components/SettingsPanel.svelte @@ -2,6 +2,7 @@ import { onMount } from 'svelte'; import { DEFAULT_CONFIG, TIMING } from '../constants.js'; import { handleError } from '../errorHandler.js'; + import EyeIndicator from './visual/EyeIndicator.svelte'; let { disabled = false } = $props(); @@ -290,10 +291,10 @@ {#if config.processing.eye_filter.enabled}
-
+
{config.processing.eye_filter.min_ear.toFixed(2)} +
+ +
{/if} @@ -724,4 +728,23 @@ font-size: 0.875rem; color: #22c55e; } + + /* Visual indicator layout */ + .setting-control-with-visual { + display: flex; + align-items: center; + gap: 0.75rem; + } + + .inline-visual-indicator { + display: flex; + align-items: center; + justify-content: center; + padding: 0.25rem 0.5rem; + background: #0f0f0f; + border: 1px solid #333; + border-radius: 6px; + min-width: 60px; + height: 32px; + } diff --git a/frontend/src/lib/components/visual/EyeIndicator.svelte b/frontend/src/lib/components/visual/EyeIndicator.svelte new file mode 100644 index 0000000..4c2ee66 --- /dev/null +++ b/frontend/src/lib/components/visual/EyeIndicator.svelte @@ -0,0 +1,91 @@ + + + + + + + + + + + + + +