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 +++++++++++++++------------------------
 src/components/AmbientControl.tsx |  9 ++++--
 src/components/TimerView.tsx      | 13 +++++++-
 3 files changed, 43 insertions(+), 41 deletions(-)

(limited to 'src')

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>
 
diff --git a/src/components/AmbientControl.tsx b/src/components/AmbientControl.tsx
index dd58235..56a2340 100644
--- a/src/components/AmbientControl.tsx
+++ b/src/components/AmbientControl.tsx
@@ -56,16 +56,21 @@ export function AmbientControl() {
         onChange={handleSoundChange}
         disabled={!available}
         style={{
+          appearance: 'none',
+          WebkitAppearance: 'none',
+          MozAppearance: 'none',
+          colorScheme: 'dark',
           fontFamily: 'var(--font-sans)',
           fontSize: '13px',
           color: available ? 'var(--fg-1)' : 'var(--fg-4)',
-          background: 'var(--ink-3)',
+          background: 'var(--ink-2)',
           border: '1px solid var(--line-2)',
           borderRadius: 'var(--r-2)',
-          padding: '6px 10px',
+          padding: '8px 32px 8px 10px',
           outline: 'none',
           minWidth: '132px',
           flex: '0 0 auto',
+          lineHeight: 1.3,
         }}
       >
         {SOUND_OPTIONS.map((option) => (
diff --git a/src/components/TimerView.tsx b/src/components/TimerView.tsx
index b43973c..47c104a 100644
--- a/src/components/TimerView.tsx
+++ b/src/components/TimerView.tsx
@@ -2,6 +2,7 @@ import type { CSSProperties } from 'react';
 import { invoke } from '@tauri-apps/api/core';
 import { useTimerStore, TimerPhase } from '../store/timerStore';
 import { useTaskStore } from '../store/taskStore';
+import { AmbientControl } from './AmbientControl';
 
 const RING_SIZE = 280;
 const STROKE = 8;
@@ -78,6 +79,10 @@ export function TimerView() {
     await invoke('reset_timer');
     await syncFromBackend();
   };
+  const handleClearSessions = async () => {
+    await invoke('clear_session_count');
+    await syncFromBackend();
+  };
 
   return (
     <div
@@ -88,9 +93,14 @@ export function TimerView() {
         justifyContent: 'center',
         gap: '20px',
         flex: 1,
-        padding: '24px 20px',
+        padding: '24px 20px 32px',
+        overflow: 'auto',
       }}
     >
+      <div style={{ width: 'min(100%, 520px)' }}>
+        <AmbientControl />
+      </div>
+
       {/* Eyebrow */}
       <span className="eyebrow" style={{ letterSpacing: '0.18em' }}>
         {eyebrowText(phase, sessionCount)}
@@ -204,6 +214,7 @@ export function TimerView() {
 
         <GhostButton onClick={handleSkip}>Skip</GhostButton>
         <GhostButton onClick={handleReset}>Reset</GhostButton>
+        <GhostButton onClick={handleClearSessions}>Clear Streak</GhostButton>
       </div>
     </div>
   );
-- 
cgit v1.3-2-g0d8e