From 3019f7ffda7d7c82cfd8b31ea7397b0ab528ec65 Mon Sep 17 00:00:00 2001
From: Solstice <solstice@local>
Date: Tue, 9 Jun 2026 00:52:52 -0700
Subject: feat: ambient sound engine and volume controls

---
 src/App.tsx                       | 11 ++++-
 src/components/AmbientControl.tsx | 98 +++++++++++++++++++++++++++++++++++++++
 src/store/audioStore.ts           | 84 +++++++++++++++++++++++++++++++++
 3 files changed, 191 insertions(+), 2 deletions(-)
 create mode 100644 src/components/AmbientControl.tsx
 create mode 100644 src/store/audioStore.ts

(limited to 'src')

diff --git a/src/App.tsx b/src/App.tsx
index 966e8e1..cf1e6a6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,8 +3,10 @@ import { TimerView } from './components/TimerView';
 import { TaskList } from './components/TaskList';
 import { SettingsPanel } from './components/SettingsPanel';
 import { NotificationOverlay } from './components/NotificationOverlay';
+import { AmbientControl } from './components/AmbientControl';
 import { useTimerEvents } from './hooks/useTimerEvents';
 import { useTaskStore } from './store/taskStore';
+import { useAudioStore } from './store/audioStore';
 import { useSettingsStore } from './store/settingsStore';
 
 function GearIcon() {
@@ -32,12 +34,14 @@ function App() {
 
   const fetchTasks = useTaskStore((s) => s.fetchTasks);
   const fetchSettings = useSettingsStore((s) => s.fetchSettings);
+  const fetchAudioStatus = useAudioStore((s) => s.fetchStatus);
 
   // Bootstrap data on mount
   useEffect(() => {
     fetchTasks();
     fetchSettings();
-  }, [fetchTasks, fetchSettings]);
+    fetchAudioStatus();
+  }, [fetchTasks, fetchSettings, fetchAudioStatus]);
 
   const handleCompleted = useCallback((taskId: string | null) => {
     setNotifTaskId(taskId);
@@ -67,11 +71,14 @@ function App() {
           style={{
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'flex-end',
+            justifyContent: 'space-between',
+            gap: '16px',
             padding: '12px 16px',
             borderBottom: '1px solid var(--line-1)',
           }}
         >
+          <AmbientControl />
+
           <button
             onClick={() => setSettingsOpen(true)}
             title="Settings"
diff --git a/src/components/AmbientControl.tsx b/src/components/AmbientControl.tsx
new file mode 100644
index 0000000..5b5017a
--- /dev/null
+++ b/src/components/AmbientControl.tsx
@@ -0,0 +1,98 @@
+import { ChangeEvent } from 'react';
+import { useAudioStore, type AmbientSound } from '../store/audioStore';
+
+const SOUND_OPTIONS: Array<{ value: AmbientSound; label: string }> = [
+  { value: 'none', label: 'Silent' },
+  { value: 'rain', label: 'Rain' },
+  { value: 'cafe', label: 'Cafe' },
+  { value: 'white_noise', label: 'White Noise' },
+];
+
+export function AmbientControl() {
+  const { available, sound, volume, setSound, setVolume } = useAudioStore();
+
+  const handleSoundChange = async (event: ChangeEvent<HTMLSelectElement>) => {
+    await setSound(event.target.value as AmbientSound);
+  };
+
+  const handleVolumeChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    await setVolume(Number(event.target.value));
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        padding: '8px 10px',
+        border: '1px solid var(--line-2)',
+        borderRadius: 'var(--r-3)',
+        background: 'rgba(17, 21, 28, 0.85)',
+        boxShadow: 'var(--shadow-1)',
+      }}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2px', minWidth: '90px' }}>
+        <span className="eyebrow" style={{ letterSpacing: '0.14em' }}>
+          Ambient
+        </span>
+        <span
+          style={{
+            fontFamily: 'var(--font-sans)',
+            fontSize: '12px',
+            color: available ? 'var(--fg-3)' : 'var(--negative)',
+          }}
+        >
+          {available ? 'Looping background audio' : 'Audio unavailable'}
+        </span>
+      </div>
+
+      <select
+        value={sound}
+        onChange={handleSoundChange}
+        disabled={!available}
+        style={{
+          fontFamily: 'var(--font-sans)',
+          fontSize: '13px',
+          color: available ? 'var(--fg-1)' : 'var(--fg-4)',
+          background: 'var(--ink-3)',
+          border: '1px solid var(--line-2)',
+          borderRadius: 'var(--r-2)',
+          padding: '6px 10px',
+          outline: 'none',
+          minWidth: '132px',
+        }}
+      >
+        {SOUND_OPTIONS.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <input
+          type="range"
+          min={0}
+          max={1}
+          step={0.05}
+          value={volume}
+          onChange={handleVolumeChange}
+          disabled={!available}
+          style={{ width: '112px', accentColor: 'var(--brass)' }}
+        />
+        <span
+          style={{
+            fontFamily: 'var(--font-mono)',
+            fontSize: '12px',
+            color: available ? 'var(--fg-2)' : 'var(--fg-4)',
+            width: '36px',
+            textAlign: 'right',
+          }}
+        >
+          {Math.round(volume * 100)}%
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/store/audioStore.ts b/src/store/audioStore.ts
new file mode 100644
index 0000000..39cbf8b
--- /dev/null
+++ b/src/store/audioStore.ts
@@ -0,0 +1,84 @@
+import { invoke } from '@tauri-apps/api/core';
+import { create } from 'zustand';
+
+export type AmbientSound = 'none' | 'rain' | 'cafe' | 'white_noise';
+
+interface AudioStatus {
+  available: boolean;
+  playing: boolean;
+  sound: AmbientSound | null;
+  volume: number;
+}
+
+interface AudioStore {
+  available: boolean;
+  playing: boolean;
+  sound: AmbientSound;
+  volume: number;
+  fetchStatus: () => Promise<void>;
+  setSound: (sound: AmbientSound) => Promise<void>;
+  setVolume: (volume: number) => Promise<void>;
+}
+
+function normalizeSound(sound: AudioStatus['sound'], playing: boolean): AmbientSound {
+  if (!playing || sound === null) {
+    return 'none';
+  }
+
+  return sound;
+}
+
+export const useAudioStore = create<AudioStore>((set, get) => ({
+  available: true,
+  playing: false,
+  sound: 'none',
+  volume: 0.5,
+
+  fetchStatus: async () => {
+    try {
+      const status = await invoke<AudioStatus>('get_audio_status');
+      set({
+        available: status.available,
+        playing: status.playing,
+        sound: normalizeSound(status.sound, status.playing),
+        volume: status.volume,
+      });
+    } catch (error) {
+      console.error('get_audio_status error:', error);
+      set({ available: false, playing: false, sound: 'none' });
+    }
+  },
+
+  setSound: async (sound) => {
+    try {
+      if (sound === 'none') {
+        await invoke('stop_ambient');
+        set({ playing: false, sound: 'none' });
+        return;
+      }
+
+      await invoke('play_ambient', { sound });
+      set({ available: true, playing: true, sound });
+    } catch (error) {
+      console.error('play_ambient error:', error);
+      set({ available: false, playing: false, sound: 'none' });
+    }
+  },
+
+  setVolume: async (volume) => {
+    const nextVolume = Math.min(1, Math.max(0, volume));
+    set({ volume: nextVolume });
+
+    try {
+      await invoke('set_ambient_volume', { volume: nextVolume });
+      set({ available: true });
+    } catch (error) {
+      console.error('set_ambient_volume error:', error);
+      set({
+        available: false,
+        playing: false,
+        sound: get().sound,
+      });
+    }
+  },
+}));
-- 
cgit v1.3-2-g0d8e