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 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

(limited to 'src/App.tsx')

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"
-- 
cgit v1.3-2-g0d8e

