feat: implement TodoList component with filtering and priority management

feat: add useAmbientSound hook for ambient sound management feat: create useLocalStorage hook for persistent state management feat: develop useTheme hook for theme switching functionality feat: implement useTimer hook for Pomodoro timer logic feat: create useTodos hook for managing todo list functionality style: add global styles and custom scrollbar for better UI experience chore: set up main entry point for the application feat: define types for Timer, Todo, and Statistics feat: create utility function for class name merging chore: configure Tailwind CSS for styling chore: set up TypeScript configuration for the project chore: configure Vite for development and build process
2026-06-11 15:56:52 +02:00 · 2026-03-30 19:27:27 +02:00
commit b933c6040c
27 changed files with 4520 additions and 0 deletions
@@ -0,0 +1,75 @@
+import React from 'react';
+import { TimerMode } from '../types';
+
+interface CircularProgressProps {
+  progress: number;
+  size?: number;
+  strokeWidth?: number;
+  mode: TimerMode;
+  children: React.ReactNode;
+}
+
+export function CircularProgress({ 
+  progress, 
+  size = 280, 
+  strokeWidth = 8, 
+  mode,
+  children 
+}: CircularProgressProps) {
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  const offset = circumference - (progress / 100) * circumference;
+
+  const getColor = () => {
+    switch (mode) {
+      case 'focus': return 'stroke-rose-500 dark:stroke-rose-400';
+      case 'shortBreak': return 'stroke-emerald-500 dark:stroke-emerald-400';
+      case 'longBreak': return 'stroke-indigo-500 dark:stroke-indigo-400';
+    }
+  };
+
+  const getBgColor = () => {
+    switch (mode) {
+      case 'focus': return 'stroke-rose-100 dark:stroke-rose-900/30';
+      case 'shortBreak': return 'stroke-emerald-100 dark:stroke-emerald-900/30';
+      case 'longBreak': return 'stroke-indigo-100 dark:stroke-indigo-900/30';
+    }
+  };
+
+  return (
+    <div className="relative inline-flex items-center justify-center">
+      <svg
+        width={size}
+        height={size}
+        className="transform -rotate-90"
+      >
+        {/* Background circle */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          strokeWidth={strokeWidth}
+          className={getBgColor()}
+        />
+        {/* Progress circle */}
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          className={`${getColor()} transition-all duration-300 ease-out`}
+          style={{
+            strokeDasharray: circumference,
+            strokeDashoffset: offset,
+          }}
+        />
+      </svg>
+      <div className="absolute inset-0 flex items-center justify-center">
+        {children}
+      </div>
+    </div>
+  );
+}