Add Settings screen with mute toggle and ambient volume slider

2 files changed, 139 insertions, 0 deletions

diff --git a/lib/components/Slider.svelte b/lib/components/Slider.svelte
new file mode 100644
index 0000000..da58413
--- /dev/null
+++ b/lib/components/Slider.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+  interface Props {
+    value: number
+    min?: number
+    max?: number
+    step?: number
+    label: string
+    onChange: (value: number) => void
+  }
+
+  let {
+    value,
+    min = 0,
+    max = 1,
+    step = 0.01,
+    label,
+    onChange
+  }: Props = $props()
+
+  function handleInput(event: Event): void {
+    const target = event.currentTarget as HTMLInputElement
+    onChange(Number(target.value))
+  }
+</script>
+
+<input
+  type="range"
+  {min}
+  {max}
+  {step}
+  {value}
+  aria-label={label}
+  class="slider"
+  oninput={handleInput}
+/>
+
+<style>
+  .slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 200px;
+    height: 2px;
+    background: rgba(232, 226, 213, 0.12);
+    outline: none;
+    border-radius: 1px;
+  }
+
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--color-accent);
+    cursor: pointer;
+    border: none;
+    transition: transform var(--transition-fast);
+  }
+
+  .slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--color-accent);
+    cursor: pointer;
+    border: none;
+    transition: transform var(--transition-fast);
+  }
+
+  .slider:hover::-webkit-slider-thumb,
+  .slider:focus-visible::-webkit-slider-thumb {
+    transform: scale(1.15);
+  }
+
+  .slider:hover::-moz-range-thumb,
+  .slider:focus-visible::-moz-range-thumb {
+    transform: scale(1.15);
+  }
+</style>
diff --git a/lib/components/ToggleSwitch.svelte b/lib/components/ToggleSwitch.svelte
new file mode 100644
index 0000000..9536d6d
--- /dev/null
+++ b/lib/components/ToggleSwitch.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  interface Props {
+    value: boolean
+    label: string
+    onChange: (value: boolean) => void
+  }
+
+  let { value, label, onChange }: Props = $props()
+
+  function handleClick(): void {
+    onChange(!value)
+  }
+</script>
+
+<button
+  type="button"
+  role="switch"
+  aria-checked={value}
+  aria-label={label}
+  class="toggle"
+  class:on={value}
+  onclick={handleClick}
+>
+  <span class="thumb"></span>
+</button>
+
+<style>
+  .toggle {
+    position: relative;
+    width: 38px;
+    height: 20px;
+    border-radius: 999px;
+    background: rgba(232, 226, 213, 0.08);
+    border: 1px solid rgba(232, 226, 213, 0.12);
+    transition:
+      background var(--transition-fast),
+      border-color var(--transition-fast);
+  }
+
+  .toggle.on {
+    background: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--color-text);
+    transition: transform var(--transition-fast);
+  }
+
+  .toggle.on .thumb {
+    transform: translateX(18px);
+    background: var(--color-bg);
+  }
+</style>