From 80595e700223fd2c441969442f905427dd745895 Mon Sep 17 00:00:00 2001 From: ingecarlosgutie <45578430-ingecarlosgutie@users.noreply.replit.com> Date: Sun, 31 Aug 2025 20:11:52 +0000 Subject: [PATCH] Set up project configuration and base UI components Initializes the project with necessary configurations, including Replit settings and a .gitignore file. It also introduces foundational UI components for the application, such as buttons, dialogs, and layout elements, likely for the Pomodoro timer application. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 59a5ae27-3c71-459b-b42f-fe14121bf9c3 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3007b6f6-d03b-45e1-9ed1-7ce8de18ea24/59a5ae27-3c71-459b-b42f-fe14121bf9c3/Uupe4F4 --- .gitignore | 6 + .replit | 39 + client/index.html | 16 + client/src/App.tsx | 51 + client/src/components/atoms/Button.tsx | 27 + client/src/components/atoms/ProgressRing.tsx | 53 + client/src/components/atoms/SoundToggle.tsx | 27 + .../components/molecules/DurationSelector.tsx | 126 + .../components/molecules/SuggestionChips.tsx | 89 + .../components/molecules/TimerControls.tsx | 61 + .../src/components/organisms/HistoryChart.tsx | 179 + .../components/organisms/PomodoroTimer.tsx | 233 + client/src/components/organisms/Sidebar.tsx | 132 + .../src/components/templates/MainLayout.tsx | 158 + client/src/components/ui/accordion.tsx | 56 + client/src/components/ui/alert-dialog.tsx | 139 + client/src/components/ui/alert.tsx | 59 + client/src/components/ui/aspect-ratio.tsx | 5 + client/src/components/ui/avatar.tsx | 50 + client/src/components/ui/badge.tsx | 36 + client/src/components/ui/breadcrumb.tsx | 115 + client/src/components/ui/button.tsx | 56 + client/src/components/ui/calendar.tsx | 68 + client/src/components/ui/card.tsx | 79 + client/src/components/ui/carousel.tsx | 260 + client/src/components/ui/chart.tsx | 365 + client/src/components/ui/checkbox.tsx | 28 + client/src/components/ui/collapsible.tsx | 11 + client/src/components/ui/command.tsx | 151 + client/src/components/ui/context-menu.tsx | 198 + client/src/components/ui/dialog.tsx | 122 + client/src/components/ui/drawer.tsx | 118 + client/src/components/ui/dropdown-menu.tsx | 198 + client/src/components/ui/form.tsx | 178 + client/src/components/ui/hover-card.tsx | 29 + client/src/components/ui/input-otp.tsx | 69 + client/src/components/ui/input.tsx | 22 + client/src/components/ui/label.tsx | 24 + client/src/components/ui/menubar.tsx | 256 + client/src/components/ui/navigation-menu.tsx | 128 + client/src/components/ui/pagination.tsx | 117 + client/src/components/ui/popover.tsx | 29 + client/src/components/ui/progress.tsx | 28 + client/src/components/ui/radio-group.tsx | 42 + client/src/components/ui/resizable.tsx | 45 + client/src/components/ui/scroll-area.tsx | 46 + client/src/components/ui/select.tsx | 160 + client/src/components/ui/separator.tsx | 29 + client/src/components/ui/sheet.tsx | 140 + client/src/components/ui/sidebar.tsx | 771 ++ client/src/components/ui/skeleton.tsx | 15 + client/src/components/ui/slider.tsx | 26 + client/src/components/ui/switch.tsx | 27 + client/src/components/ui/table.tsx | 117 + client/src/components/ui/tabs.tsx | 53 + client/src/components/ui/textarea.tsx | 22 + client/src/components/ui/toast.tsx | 127 + client/src/components/ui/toaster.tsx | 33 + client/src/components/ui/toggle-group.tsx | 61 + client/src/components/ui/toggle.tsx | 43 + client/src/components/ui/tooltip.tsx | 30 + client/src/hooks/use-mobile.tsx | 19 + client/src/hooks/use-toast.ts | 191 + client/src/index.css | 100 + client/src/lib/audio.ts | 107 + client/src/lib/device.ts | 22 + client/src/lib/queryClient.ts | 57 + client/src/lib/store.ts | 113 + client/src/lib/theme.tsx | 70 + client/src/lib/utils.ts | 6 + client/src/main.tsx | 5 + client/src/pages/History.tsx | 291 + client/src/pages/Home.tsx | 190 + client/src/pages/Settings.tsx | 420 + client/src/pages/not-found.tsx | 21 + components.json | 20 + drizzle.config.ts | 14 + package-lock.json | 9186 +++++++++++++++++ package.json | 109 + postcss.config.js | 6 + replit.md | 76 + server/index.ts | 71 + server/routes.ts | 171 + server/storage.ts | 76 + server/vite.ts | 85 + shared/schema.ts | 38 + tailwind.config.ts | 95 + tsconfig.json | 23 + vite.config.ts | 37 + 89 files changed, 17597 insertions(+) create mode 100644 .gitignore create mode 100644 client/index.html create mode 100644 client/src/App.tsx create mode 100644 client/src/components/atoms/Button.tsx create mode 100644 client/src/components/atoms/ProgressRing.tsx create mode 100644 client/src/components/atoms/SoundToggle.tsx create mode 100644 client/src/components/molecules/DurationSelector.tsx create mode 100644 client/src/components/molecules/SuggestionChips.tsx create mode 100644 client/src/components/molecules/TimerControls.tsx create mode 100644 client/src/components/organisms/HistoryChart.tsx create mode 100644 client/src/components/organisms/PomodoroTimer.tsx create mode 100644 client/src/components/organisms/Sidebar.tsx create mode 100644 client/src/components/templates/MainLayout.tsx create mode 100644 client/src/components/ui/accordion.tsx create mode 100644 client/src/components/ui/alert-dialog.tsx create mode 100644 client/src/components/ui/alert.tsx create mode 100644 client/src/components/ui/aspect-ratio.tsx create mode 100644 client/src/components/ui/avatar.tsx create mode 100644 client/src/components/ui/badge.tsx create mode 100644 client/src/components/ui/breadcrumb.tsx create mode 100644 client/src/components/ui/button.tsx create mode 100644 client/src/components/ui/calendar.tsx create mode 100644 client/src/components/ui/card.tsx create mode 100644 client/src/components/ui/carousel.tsx create mode 100644 client/src/components/ui/chart.tsx create mode 100644 client/src/components/ui/checkbox.tsx create mode 100644 client/src/components/ui/collapsible.tsx create mode 100644 client/src/components/ui/command.tsx create mode 100644 client/src/components/ui/context-menu.tsx create mode 100644 client/src/components/ui/dialog.tsx create mode 100644 client/src/components/ui/drawer.tsx create mode 100644 client/src/components/ui/dropdown-menu.tsx create mode 100644 client/src/components/ui/form.tsx create mode 100644 client/src/components/ui/hover-card.tsx create mode 100644 client/src/components/ui/input-otp.tsx create mode 100644 client/src/components/ui/input.tsx create mode 100644 client/src/components/ui/label.tsx create mode 100644 client/src/components/ui/menubar.tsx create mode 100644 client/src/components/ui/navigation-menu.tsx create mode 100644 client/src/components/ui/pagination.tsx create mode 100644 client/src/components/ui/popover.tsx create mode 100644 client/src/components/ui/progress.tsx create mode 100644 client/src/components/ui/radio-group.tsx create mode 100644 client/src/components/ui/resizable.tsx create mode 100644 client/src/components/ui/scroll-area.tsx create mode 100644 client/src/components/ui/select.tsx create mode 100644 client/src/components/ui/separator.tsx create mode 100644 client/src/components/ui/sheet.tsx create mode 100644 client/src/components/ui/sidebar.tsx create mode 100644 client/src/components/ui/skeleton.tsx create mode 100644 client/src/components/ui/slider.tsx create mode 100644 client/src/components/ui/switch.tsx create mode 100644 client/src/components/ui/table.tsx create mode 100644 client/src/components/ui/tabs.tsx create mode 100644 client/src/components/ui/textarea.tsx create mode 100644 client/src/components/ui/toast.tsx create mode 100644 client/src/components/ui/toaster.tsx create mode 100644 client/src/components/ui/toggle-group.tsx create mode 100644 client/src/components/ui/toggle.tsx create mode 100644 client/src/components/ui/tooltip.tsx create mode 100644 client/src/hooks/use-mobile.tsx create mode 100644 client/src/hooks/use-toast.ts create mode 100644 client/src/index.css create mode 100644 client/src/lib/audio.ts create mode 100644 client/src/lib/device.ts create mode 100644 client/src/lib/queryClient.ts create mode 100644 client/src/lib/store.ts create mode 100644 client/src/lib/theme.tsx create mode 100644 client/src/lib/utils.ts create mode 100644 client/src/main.tsx create mode 100644 client/src/pages/History.tsx create mode 100644 client/src/pages/Home.tsx create mode 100644 client/src/pages/Settings.tsx create mode 100644 client/src/pages/not-found.tsx create mode 100644 components.json create mode 100644 drizzle.config.ts create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 replit.md create mode 100644 server/index.ts create mode 100644 server/routes.ts create mode 100644 server/storage.ts create mode 100644 server/vite.ts create mode 100644 shared/schema.ts create mode 100644 tailwind.config.ts create mode 100644 tsconfig.json create mode 100644 vite.config.ts diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f9ba7f8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +node_modules +dist +.DS_Store +server/public +vite.config.ts.* +*.tar.gz \ No newline at end of file diff --git a/.replit b/.replit index e69de29..adcfadc 100644 --- a/.replit +++ b/.replit @@ -0,0 +1,39 @@ +modules = ["nodejs-20", "web", "postgresql-16"] +run = "npm run dev" +hidden = [".config", ".git", "generated-icon.png", "node_modules", "dist"] + +[nix] +channel = "stable-24_05" + +[deployment] +deploymentTarget = "autoscale" +build = ["npm", "run", "build"] +run = ["npm", "run", "start"] + +[[ports]] +localPort = 5000 +externalPort = 80 + +[env] +PORT = "5000" + +[workflows] +runButton = "Project" + +[[workflows.workflow]] +name = "Project" +mode = "parallel" +author = "agent" + +[[workflows.workflow.tasks]] +task = "workflow.run" +args = "Start application" + +[[workflows.workflow]] +name = "Start application" +author = "agent" + +[[workflows.workflow.tasks]] +task = "shell.exec" +args = "npm run dev" +waitForPort = 5000 diff --git a/client/index.html b/client/index.html new file mode 100644 index 0000000..0d05af3 --- /dev/null +++ b/client/index.html @@ -0,0 +1,16 @@ + + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/client/src/App.tsx b/client/src/App.tsx new file mode 100644 index 0000000..69ad194 --- /dev/null +++ b/client/src/App.tsx @@ -0,0 +1,51 @@ +import { useEffect } from "react"; +import { Switch, Route } from "wouter"; +import { queryClient } from "./lib/queryClient"; +import { QueryClientProvider } from "@tanstack/react-query"; +import { Toaster } from "@/components/ui/toaster"; +import { TooltipProvider } from "@/components/ui/tooltip"; +import { ThemeProvider } from "@/lib/theme"; +import { useStore } from "@/lib/store"; +import { getOrCreateDeviceId } from "@/lib/device"; + +import Home from "@/pages/Home"; +import History from "@/pages/History"; +import Settings from "@/pages/Settings"; +import NotFound from "@/pages/not-found"; + +function Router() { + return ( + + + + + + + ); +} + +function App() { + const setDeviceId = useStore((state) => state.setDeviceId); + const deviceId = useStore((state) => state.deviceId); + + // Initialize device ID on app start + useEffect(() => { + if (!deviceId) { + const id = getOrCreateDeviceId(); + setDeviceId(id); + } + }, [deviceId, setDeviceId]); + + return ( + + + + + + + + + ); +} + +export default App; diff --git a/client/src/components/atoms/Button.tsx b/client/src/components/atoms/Button.tsx new file mode 100644 index 0000000..850b15b --- /dev/null +++ b/client/src/components/atoms/Button.tsx @@ -0,0 +1,27 @@ +import { Button as ShadcnButton } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; +import { forwardRef } from "react"; + +export interface ButtonProps extends React.ButtonHTMLAttributes { + variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"; + size?: "default" | "sm" | "lg" | "icon"; + asChild?: boolean; +} + +const Button = forwardRef( + ({ className, variant = "default", size = "default", ...props }, ref) => { + return ( + + ); + } +); + +Button.displayName = "Button"; + +export { Button }; diff --git a/client/src/components/atoms/ProgressRing.tsx b/client/src/components/atoms/ProgressRing.tsx new file mode 100644 index 0000000..370caa6 --- /dev/null +++ b/client/src/components/atoms/ProgressRing.tsx @@ -0,0 +1,53 @@ +interface ProgressRingProps { + progress: number; // 0-1 + size?: number; + strokeWidth?: number; + className?: string; +} + +export function ProgressRing({ + progress, + size = 256, + strokeWidth = 8, + className = "" +}: ProgressRingProps) { + const radius = (size - strokeWidth) / 2; + const circumference = radius * 2 * Math.PI; + const strokeDasharray = circumference; + const strokeDashoffset = circumference * (1 - progress); + + return ( + + {/* Background Circle */} + + + {/* Progress Circle */} + + + ); +} diff --git a/client/src/components/atoms/SoundToggle.tsx b/client/src/components/atoms/SoundToggle.tsx new file mode 100644 index 0000000..a59a4f1 --- /dev/null +++ b/client/src/components/atoms/SoundToggle.tsx @@ -0,0 +1,27 @@ +import { Volume2, VolumeX } from "lucide-react"; +import { Button } from "./Button"; + +interface SoundToggleProps { + enabled: boolean; + onToggle: () => void; + className?: string; +} + +export function SoundToggle({ enabled, onToggle, className = "" }: SoundToggleProps) { + return ( + + ); +} diff --git a/client/src/components/molecules/DurationSelector.tsx b/client/src/components/molecules/DurationSelector.tsx new file mode 100644 index 0000000..db14183 --- /dev/null +++ b/client/src/components/molecules/DurationSelector.tsx @@ -0,0 +1,126 @@ +import { useState } from "react"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Button } from "@/components/atoms/Button"; + +interface Preset { + name: string; + description: string; + focus: number; + break: number; +} + +interface DurationSelectorProps { + selectedFocus: number; + selectedBreak: number; + onDurationChange: (focus: number, breakDuration: number) => void; + className?: string; +} + +const presets: Preset[] = [ + { name: "Classic", description: "25 min focus / 5 min break", focus: 25, break: 5 }, + { name: "Extended", description: "50 min focus / 10 min break", focus: 50, break: 10 }, +]; + +export function DurationSelector({ + selectedFocus, + selectedBreak, + onDurationChange, + className = "" +}: DurationSelectorProps) { + const [customFocus, setCustomFocus] = useState(selectedFocus); + const [customBreak, setCustomBreak] = useState(selectedBreak); + const [selectedPreset, setSelectedPreset] = useState( + presets.find(p => p.focus === selectedFocus && p.break === selectedBreak)?.name || null + ); + + const handlePresetSelect = (preset: Preset) => { + setSelectedPreset(preset.name); + setCustomFocus(preset.focus); + setCustomBreak(preset.break); + onDurationChange(preset.focus, preset.break); + }; + + const handleCustomChange = (focus: number, breakDuration: number) => { + setSelectedPreset(null); + setCustomFocus(focus); + setCustomBreak(breakDuration); + onDurationChange(focus, breakDuration); + }; + + return ( + + + Duration + + + {presets.map((preset) => ( + + ))} + +
+
Custom
+
+
+ + handleCustomChange(parseInt(e.target.value) || 1, customBreak)} + className="mt-1" + data-testid="input-custom-focus" + /> +
+
+ + handleCustomChange(customFocus, parseInt(e.target.value) || 1)} + className="mt-1" + data-testid="input-custom-break" + /> +
+
+
+ + + ); +} diff --git a/client/src/components/molecules/SuggestionChips.tsx b/client/src/components/molecules/SuggestionChips.tsx new file mode 100644 index 0000000..eb7c35c --- /dev/null +++ b/client/src/components/molecules/SuggestionChips.tsx @@ -0,0 +1,89 @@ +import { useQuery } from "@tanstack/react-query"; +import { Lightbulb, ArrowRight } from "lucide-react"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Button } from "@/components/atoms/Button"; +import { useStore } from "@/lib/store"; + +interface Suggestion { + minutes: number; + reason: string; +} + +interface SuggestionChipsProps { + onSuggestionSelect: (minutes: number) => void; + className?: string; +} + +export function SuggestionChips({ onSuggestionSelect, className = "" }: SuggestionChipsProps) { + const deviceId = useStore((state) => state.deviceId); + + const { data: suggestions, isLoading } = useQuery<{ suggestions: Suggestion[] }>({ + queryKey: ['/api/suggestions', { deviceId }], + enabled: !!deviceId, + }); + + if (isLoading) { + return ( + + + + + Smart Suggestions + + + +
+ {[1, 2, 3].map((i) => ( +
+
+
+
+ ))} +
+ + + ); + } + + const suggestionList = suggestions?.suggestions || [ + { minutes: 25, reason: "Classic Pomodoro technique - great for starting out." }, + { minutes: 15, reason: "Short sprints help build focus habits." }, + { minutes: 40, reason: "Extended sessions for deep work." } + ]; + + return ( + + + + + Smart Suggestions + + + +
+ {suggestionList.map((suggestion, index) => ( + + ))} +
+ + + ); +} diff --git a/client/src/components/molecules/TimerControls.tsx b/client/src/components/molecules/TimerControls.tsx new file mode 100644 index 0000000..c837ea2 --- /dev/null +++ b/client/src/components/molecules/TimerControls.tsx @@ -0,0 +1,61 @@ +import { Play, Pause, RotateCcw, SkipForward } from "lucide-react"; +import { Button } from "@/components/atoms/Button"; + +interface TimerControlsProps { + isRunning: boolean; + onPlayPause: () => void; + onReset: () => void; + onSkip: () => void; + className?: string; +} + +export function TimerControls({ + isRunning, + onPlayPause, + onReset, + onSkip, + className = "" +}: TimerControlsProps) { + return ( +
+ + + + + +
+ ); +} diff --git a/client/src/components/organisms/HistoryChart.tsx b/client/src/components/organisms/HistoryChart.tsx new file mode 100644 index 0000000..0cd311f --- /dev/null +++ b/client/src/components/organisms/HistoryChart.tsx @@ -0,0 +1,179 @@ +import { useQuery } from "@tanstack/react-query"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { useStore } from "@/lib/store"; + +interface StatsData { + last7d: { + sessions: number; + completionRate: number; + avgFocusMin: number; + }; + last30d: { + sessions: number; + completionRate: number; + avgFocusMin: number; + }; +} + +interface HistoryChartProps { + className?: string; +} + +export function HistoryChart({ className = "" }: HistoryChartProps) { + const deviceId = useStore((state) => state.deviceId); + const localSessions = useStore((state) => state.localSessions); + + const { data: statsData } = useQuery({ + queryKey: ['/api/stats/summary', { deviceId }], + enabled: !!deviceId, + }); + + // Calculate local stats as fallback + const getLocalStats = () => { + const now = new Date(); + const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000); + const thirtyDaysAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000); + + const focusSessions = localSessions.filter(s => s.type === 'focus'); + + const last7dSessions = focusSessions.filter(s => + new Date(s.startedAt) >= sevenDaysAgo + ); + + const last30dSessions = focusSessions.filter(s => + new Date(s.startedAt) >= thirtyDaysAgo + ); + + const calculatePeriodStats = (sessions: any[]) => { + const completed = sessions.filter(s => s.completed); + return { + sessions: sessions.length, + completionRate: sessions.length > 0 ? completed.length / sessions.length : 0, + avgFocusMin: completed.length > 0 + ? completed.reduce((sum, s) => sum + s.intendedMinutes, 0) / completed.length + : 0, + }; + }; + + return { + last7d: calculatePeriodStats(last7dSessions), + last30d: calculatePeriodStats(last30dSessions), + }; + }; + + const stats = statsData || getLocalStats(); + + // Generate mock chart data for visualization + const generateChartData = () => { + const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; + const heights = [60, 80, 45, 90, 75, 30, 25]; // Mock data + + return days.map((day, index) => ({ + day, + height: heights[index], + sessions: Math.floor(heights[index] / 20), + })); + }; + + const chartData = generateChartData(); + + return ( +
+ {/* Daily Sessions Chart */} + + + Daily Sessions + + +
+ {chartData.map((data, index) => ( +
+
+ {data.day} +
+ ))} +
+ + + + {/* Completion Rate Trend */} + + + Completion Rate Trend + + +
+ + + {[0, 50, 100, 150, 200, 250, 300].map((x, i) => { + const y = [80, 60, 45, 30, 40, 25, 35][i]; + return ( + + ); + })} + +
+ + + + {/* Stats Summary */} +
+
+ + +
+ {stats.last7d.sessions} +
+
Sessions (7d)
+ + + + + +
+ {Math.round(stats.last7d.completionRate * 100)}% +
+
Completion (7d)
+ + + + + +
+ {Math.round(stats.last7d.avgFocusMin)}m +
+
Avg Focus (7d)
+ + + + + +
+ {stats.last30d.sessions} +
+
Sessions (30d)
+ + +
+
+
+ ); +} diff --git a/client/src/components/organisms/PomodoroTimer.tsx b/client/src/components/organisms/PomodoroTimer.tsx new file mode 100644 index 0000000..59da3b1 --- /dev/null +++ b/client/src/components/organisms/PomodoroTimer.tsx @@ -0,0 +1,233 @@ +import { useEffect, useRef } from "react"; +import { Target, Coffee } from "lucide-react"; +import { Card, CardContent } from "@/components/ui/card"; +import { ProgressRing } from "@/components/atoms/ProgressRing"; +import { TimerControls } from "@/components/molecules/TimerControls"; +import { useStore } from "@/lib/store"; +import { audioManager } from "@/lib/audio"; +import { useMutation, useQueryClient } from "@tanstack/react-query"; +import { apiRequest } from "@/lib/queryClient"; +import type { InsertSession } from "@shared/schema"; + +interface PomodoroTimerProps { + className?: string; +} + +export function PomodoroTimer({ className = "" }: PomodoroTimerProps) { + const timer = useStore((state) => state.timer); + const settings = useStore((state) => state.settings); + const deviceId = useStore((state) => state.deviceId); + const setTimer = useStore((state) => state.setTimer); + const addLocalSession = useStore((state) => state.addLocalSession); + + const timerRef = useRef(); + const queryClient = useQueryClient(); + + const sessionMutation = useMutation({ + mutationFn: async (sessionData: InsertSession) => { + const response = await apiRequest('POST', '/api/sessions', sessionData); + return response.json(); + }, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['/api/suggestions'] }); + queryClient.invalidateQueries({ queryKey: ['/api/stats/summary'] }); + }, + }); + + // Format time display + const formatTime = (seconds: number) => { + const mins = Math.floor(seconds / 60); + const secs = seconds % 60; + return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; + }; + + // Calculate progress (0-1) + const progress = timer.totalTime > 0 ? (timer.totalTime - timer.currentTime) / timer.totalTime : 0; + + // Timer tick effect + useEffect(() => { + if (timer.isRunning && timer.currentTime > 0) { + timerRef.current = setTimeout(() => { + setTimer({ currentTime: timer.currentTime - 1 }); + }, 1000); + } else if (timer.currentTime === 0 && timer.isRunning) { + // Timer finished + handleTimerComplete(); + } + + return () => { + if (timerRef.current) { + clearTimeout(timerRef.current); + } + }; + }, [timer.isRunning, timer.currentTime]); + + const handleTimerComplete = async () => { + setTimer({ isRunning: false }); + + // Play completion sound + if (settings.soundEnabled) { + await audioManager.playSound(settings.soundType, settings.soundVolume); + } + + // Record session + if (timer.startedAt) { + const sessionData: InsertSession = { + deviceId, + type: timer.phase, + intendedMinutes: timer.totalTime / 60, + actualSeconds: timer.totalTime, + startedAt: timer.startedAt, + endedAt: new Date(), + completed: true, + interruptions: timer.interruptions, + }; + + // Add to local storage immediately + const localSession = { ...sessionData, id: `local-${Date.now()}` }; + addLocalSession(localSession); + + // Sync to server + try { + await sessionMutation.mutateAsync(sessionData); + } catch (error) { + console.warn('Failed to sync session to server:', error); + } + } + + // Auto-start next phase if enabled + if (settings.autoStartBreaks) { + startNextPhase(); + } else { + // Switch to next phase but don't start + switchToNextPhase(); + } + }; + + const startNextPhase = () => { + const nextPhase = timer.phase === 'focus' ? 'break' : 'focus'; + const nextDuration = nextPhase === 'focus' + ? settings.focusDuration + : (timer.sessionCount % settings.longBreakInterval === 0 && timer.sessionCount > 0) + ? settings.longBreakDuration + : settings.shortBreakDuration; + + const durationSeconds = nextDuration * 60; + + setTimer({ + phase: nextPhase, + currentTime: durationSeconds, + totalTime: durationSeconds, + isRunning: true, + startedAt: new Date(), + sessionCount: nextPhase === 'focus' ? timer.sessionCount + 1 : timer.sessionCount, + interruptions: 0, + }); + }; + + const switchToNextPhase = () => { + const nextPhase = timer.phase === 'focus' ? 'break' : 'focus'; + const nextDuration = nextPhase === 'focus' + ? settings.focusDuration + : (timer.sessionCount % settings.longBreakInterval === 0 && timer.sessionCount > 0) + ? settings.longBreakDuration + : settings.shortBreakDuration; + + const durationSeconds = nextDuration * 60; + + setTimer({ + phase: nextPhase, + currentTime: durationSeconds, + totalTime: durationSeconds, + isRunning: false, + sessionCount: nextPhase === 'focus' ? timer.sessionCount + 1 : timer.sessionCount, + interruptions: 0, + }); + }; + + const handlePlayPause = async () => { + if (!timer.isRunning) { + // Request audio permission on first interaction + await audioManager.requestAudioPermission(); + + if (!timer.startedAt) { + setTimer({ startedAt: new Date() }); + } + } else { + // Pausing counts as interruption + setTimer({ interruptions: timer.interruptions + 1 }); + } + + setTimer({ isRunning: !timer.isRunning }); + }; + + const handleReset = () => { + setTimer({ + isRunning: false, + currentTime: timer.totalTime, + interruptions: 0, + startedAt: undefined, + }); + }; + + const handleSkip = () => { + if (timer.phase === 'break') { + startNextPhase(); + } + }; + + const getNextPhaseInfo = () => { + if (timer.phase === 'focus') { + const isLongBreak = timer.sessionCount % settings.longBreakInterval === 0 && timer.sessionCount > 0; + return isLongBreak ? 'Long Break' : 'Short Break'; + } + return 'Focus Time'; + }; + + return ( + + + {/* Timer Display */} +
+ + + {/* Time Display Overlay */} +
+
+ {formatTime(timer.currentTime)} +
+
+ {timer.phase === 'focus' ? 'Focus Time' : 'Break Time'} +
+
+
+ + {/* Timer Controls */} + + + {/* Session Info */} +
+
+ + + Session {timer.sessionCount + 1} of{' '} + {settings.longBreakInterval} + +
+
+ + + Next: {getNextPhaseInfo()} + +
+
+ + + ); +} diff --git a/client/src/components/organisms/Sidebar.tsx b/client/src/components/organisms/Sidebar.tsx new file mode 100644 index 0000000..654fa55 --- /dev/null +++ b/client/src/components/organisms/Sidebar.tsx @@ -0,0 +1,132 @@ +import { Clock, BarChart3, Settings, Sun, Moon } from "lucide-react"; +import { Button } from "@/components/atoms/Button"; +import { useTheme } from "@/lib/theme"; +import { useStore } from "@/lib/store"; +import { Link, useLocation } from "wouter"; + +interface SidebarProps { + className?: string; + isMobile?: boolean; + onNavigate?: () => void; +} + +export function Sidebar({ className = "", isMobile = false, onNavigate }: SidebarProps) { + const { theme, toggleTheme } = useTheme(); + const [location] = useLocation(); + const localSessions = useStore((state) => state.localSessions); + + // Calculate today's stats + const today = new Date(); + today.setHours(0, 0, 0, 0); + + const todaySessions = localSessions.filter(session => { + const sessionDate = new Date(session.startedAt); + sessionDate.setHours(0, 0, 0, 0); + return sessionDate.getTime() === today.getTime(); + }); + + const todayFocusSessions = todaySessions.filter(s => s.type === 'focus'); + const completedToday = todayFocusSessions.filter(s => s.completed); + const completionRate = todayFocusSessions.length > 0 + ? Math.round((completedToday.length / todayFocusSessions.length) * 100) + : 0; + + const navItems = [ + { path: "/", icon: Clock, label: "Timer", testId: "nav-timer" }, + { path: "/history", icon: BarChart3, label: "History", testId: "nav-history" }, + { path: "/settings", icon: Settings, label: "Settings", testId: "nav-settings" }, + ]; + + const isActive = (path: string) => { + if (path === "/" && location === "/") return true; + if (path !== "/" && location.startsWith(path)) return true; + return false; + }; + + return ( + + ); +} diff --git a/client/src/components/templates/MainLayout.tsx b/client/src/components/templates/MainLayout.tsx new file mode 100644 index 0000000..42ad7a4 --- /dev/null +++ b/client/src/components/templates/MainLayout.tsx @@ -0,0 +1,158 @@ +import { useState, useEffect } from "react"; +import { Menu, Keyboard } from "lucide-react"; +import { Button } from "@/components/atoms/Button"; +import { SoundToggle } from "@/components/atoms/SoundToggle"; +import { Sidebar } from "@/components/organisms/Sidebar"; +import { useStore } from "@/lib/store"; +import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"; + +interface MainLayoutProps { + children: React.ReactNode; + title: string; + subtitle: string; +} + +export function MainLayout({ children, title, subtitle }: MainLayoutProps) { + const [sidebarOpen, setSidebarOpen] = useState(false); + const [shortcutsOpen, setShortcutsOpen] = useState(false); + + const settings = useStore((state) => state.settings); + const updateSettings = useStore((state) => state.updateSettings); + + // Handle keyboard shortcuts + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + // Only handle shortcuts when not in input fields + if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) { + return; + } + + switch (e.code) { + case 'Space': + e.preventDefault(); + // Timer controls will handle this + break; + case 'KeyR': + e.preventDefault(); + // Timer controls will handle this + break; + case 'KeyS': + e.preventDefault(); + // Timer controls will handle this + break; + case 'KeyD': + if (e.ctrlKey || e.metaKey) { + e.preventDefault(); + // Theme toggle will be handled by the theme provider + } + break; + } + }; + + document.addEventListener('keydown', handleKeyDown); + return () => document.removeEventListener('keydown', handleKeyDown); + }, []); + + const handleSoundToggle = () => { + updateSettings({ soundEnabled: !settings.soundEnabled }); + }; + + const closeSidebar = () => setSidebarOpen(false); + + return ( +
+ {/* Sidebar Navigation */} + + + {/* Mobile Sidebar Overlay */} + {sidebarOpen && ( +
+ )} + + {/* Main Content Area */} +
+ {/* Header */} +
+
+ +
+

+ {title} +

+

+ {subtitle} +

+
+
+ +
+ {/* Sound Toggle */} + + + {/* Keyboard Shortcuts Info */} + +
+
+ + {/* Page Content */} +
+ {children} +
+
+ + {/* Keyboard Shortcuts Modal */} + + + + Keyboard Shortcuts + +
+
+ Start/Pause Timer + Space +
+
+ Reset Timer + R +
+
+ Skip Break + S +
+
+ Toggle Theme + Ctrl + D +
+
+ + +
+ ); +} diff --git a/client/src/components/ui/accordion.tsx b/client/src/components/ui/accordion.tsx new file mode 100644 index 0000000..e6a723d --- /dev/null +++ b/client/src/components/ui/accordion.tsx @@ -0,0 +1,56 @@ +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/client/src/components/ui/alert-dialog.tsx b/client/src/components/ui/alert-dialog.tsx new file mode 100644 index 0000000..8722561 --- /dev/null +++ b/client/src/components/ui/alert-dialog.tsx @@ -0,0 +1,139 @@ +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/client/src/components/ui/alert.tsx b/client/src/components/ui/alert.tsx new file mode 100644 index 0000000..41fa7e0 --- /dev/null +++ b/client/src/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/client/src/components/ui/aspect-ratio.tsx b/client/src/components/ui/aspect-ratio.tsx new file mode 100644 index 0000000..c4abbf3 --- /dev/null +++ b/client/src/components/ui/aspect-ratio.tsx @@ -0,0 +1,5 @@ +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/client/src/components/ui/avatar.tsx b/client/src/components/ui/avatar.tsx new file mode 100644 index 0000000..51e507b --- /dev/null +++ b/client/src/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/client/src/components/ui/badge.tsx b/client/src/components/ui/badge.tsx new file mode 100644 index 0000000..f000e3e --- /dev/null +++ b/client/src/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/client/src/components/ui/breadcrumb.tsx b/client/src/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..60e6c96 --- /dev/null +++ b/client/src/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>