feat: frontend view, state management, and user interface

1 files changed, 42 insertions, 0 deletions

diff --git a/src/store/timerStore.ts b/src/store/timerStore.ts
new file mode 100644
index 0000000..6a81e20
--- /dev/null
+++ b/src/store/timerStore.ts
@@ -0,0 +1,42 @@
+import { create } from 'zustand';
+
+export type TimerPhase = 'work' | 'short_break' | 'long_break';
+
+export interface TimerTickPayload {
+  phase: TimerPhase;
+  remaining_secs: number;
+  total_secs: number;
+  session_count: number;
+  current_task_id: string | null;
+}
+
+interface TimerState {
+  phase: TimerPhase;
+  remainingSecs: number;
+  totalSecs: number;
+  running: boolean;
+  sessionCount: number;
+  currentTaskId: string | null;
+  setTimerTick: (payload: TimerTickPayload) => void;
+  setRunning: (running: boolean) => void;
+}
+
+export const useTimerStore = create<TimerState>((set) => ({
+  phase: 'work',
+  remainingSecs: 25 * 60,
+  totalSecs: 25 * 60,
+  running: false,
+  sessionCount: 0,
+  currentTaskId: null,
+
+  setTimerTick: (payload) =>
+    set({
+      phase: payload.phase,
+      remainingSecs: payload.remaining_secs,
+      totalSecs: payload.total_secs,
+      sessionCount: payload.session_count,
+      currentTaskId: payload.current_task_id,
+    }),
+
+  setRunning: (running) => set({ running }),
+}));