1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
import { useEffect, useState, useCallback } from 'react';
import { TimerView } from './components/TimerView';
import { TaskList } from './components/TaskList';
import { SettingsPanel } from './components/SettingsPanel';
import { NotificationOverlay } from './components/NotificationOverlay';
import { useTimerEvents } from './hooks/useTimerEvents';
import { useTaskStore } from './store/taskStore';
import { useSettingsStore } from './store/settingsStore';
function GearIcon() {
return (
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
</svg>
);
}
function App() {
const [settingsOpen, setSettingsOpen] = useState(false);
const [notifVisible, setNotifVisible] = useState(false);
const [notifTaskId, setNotifTaskId] = useState<string | null>(null);
const fetchTasks = useTaskStore((s) => s.fetchTasks);
const fetchSettings = useSettingsStore((s) => s.fetchSettings);
// Bootstrap data on mount
useEffect(() => {
fetchTasks();
fetchSettings();
}, [fetchTasks, fetchSettings]);
const handleCompleted = useCallback((taskId: string | null) => {
setNotifTaskId(taskId);
setNotifVisible(true);
}, []);
useTimerEvents(handleCompleted);
return (
<div
style={{
display: 'flex',
width: '100vw',
height: '100vh',
background: 'var(--ink-0)',
overflow: 'hidden',
position: 'relative',
}}
>
{/* Sidebar */}
<TaskList />
{/* Main area */}
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
{/* Top bar */}
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: '12px 16px',
borderBottom: '1px solid var(--line-1)',
}}
>
<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)',
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>
{/* Timer */}
<TimerView />
</div>
{/* Overlays */}
<SettingsPanel open={settingsOpen} onClose={() => setSettingsOpen(false)} />
<NotificationOverlay
visible={notifVisible}
taskId={notifTaskId}
onDismiss={() => setNotifVisible(false)}
/>
</div>
);
}
export default App;
|
