From 0fb6d49be075597fa0812325c7419789d19bcbe8 Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Wed, 10 Jun 2026 23:39:24 -0700
Subject: fix: restore timer controls visibility

---
 src/App.tsx | 62 ++++++++++++++++++++++++-------------------------------------
 1 file changed, 24 insertions(+), 38 deletions(-)

(limited to 'src/App.tsx')

diff --git a/src/App.tsx b/src/App.tsx
index 29ac64f..b4aaec7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,6 @@ 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';
@@ -65,48 +64,35 @@ function App() {
       <TaskList />
 
       {/* Main area */}
-      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-        {/* Top bar */}
-        <div
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'relative' }}>
+        <button
+          onClick={() => setSettingsOpen(true)}
+          title="Settings"
           style={{
+            position: 'absolute',
+            top: '14px',
+            right: '16px',
             display: 'flex',
-            alignItems: 'flex-start',
-            flexWrap: 'wrap',
-            justifyContent: 'space-between',
-            gap: '16px',
-            padding: '12px 16px',
-            borderBottom: '1px solid var(--line-1)',
+            alignItems: 'center',
+            padding: '6px',
+            border: 'none',
+            background: 'transparent',
+            color: 'var(--fg-3)',
+            cursor: 'pointer',
+            borderRadius: 'var(--r-2)',
+            transition: 'color 0.15s ease',
+            zIndex: 2,
+          }}
+          onMouseEnter={(e) => {
+            (e.currentTarget as HTMLButtonElement).style.color = 'var(--fg-1)';
+          }}
+          onMouseLeave={(e) => {
+            (e.currentTarget as HTMLButtonElement).style.color = 'var(--fg-3)';
           }}
         >
-          <AmbientControl />
-
-          <button
-            onClick={() => setSettingsOpen(true)}
-            title="Settings"
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              padding: '6px',
-              border: 'none',
-              background: 'transparent',
-              color: 'var(--fg-3)',
-              cursor: 'pointer',
-              borderRadius: 'var(--r-2)',
-              marginLeft: 'auto',
-              transition: 'color 0.15s ease',
-            }}
-            onMouseEnter={(e) => {
-              (e.currentTarget as HTMLButtonElement).style.color = 'var(--fg-1)';
-            }}
-            onMouseLeave={(e) => {
-              (e.currentTarget as HTMLButtonElement).style.color = 'var(--fg-3)';
-            }}
-          >
-            <GearIcon />
-          </button>
-        </div>
+          <GearIcon />
+        </button>
 
-        {/* Timer */}
         <TimerView />
       </div>
 
-- 
cgit v1.3-2-g0d8e