Task Master

59 | 60 | 61 |

62 |

63 | 64 | 65 |

66 |

67 | 68 |

69 |

70 |

71 |

72 |

73 | ); 74 | } 75 | 76 | export default App; -------------------------------------------------------------------------------- /src/components/AddTask.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Plus } from 'lucide-react'; 3 | import { Priority } from '../types'; 4 | import { useStore } from '../store/useStore'; 5 | 6 | export const AddTask: React.FC = () => { 7 | const [title, setTitle] = useState(''); 8 | const [description, setDescription] = useState(''); 9 | const [priority, setPriority] = useState('medium'); 10 | 11 | const { addTask } = useStore(); 12 | 13 | const handleSubmit = (e: React.FormEvent) => { 14 | e.preventDefault(); 15 | if (title.trim() && description.trim()) { 16 | addTask(title.trim(), description.trim(), priority); 17 | setTitle(''); 18 | setDescription(''); 19 | setPriority('medium'); 20 | } 21 | }; 22 | 23 | return ( 24 |

25 | setTitle(e.target.value)} 29 | placeholder="Task Title" 30 | className="flex-1 rounded-lg border border-gray-300 bg-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:border-gray-600" 31 | /> 32 |

setDescription(e.target.value)}
35 |         placeholder="Task Description"
36 |         rows={3}
37 |         className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:border-gray-600"
38 |       />
39 |       <div className="flex gap-2 items-center">
40 |         <select
41 |           value={priority}
42 |           onChange={(e) => setPriority(e.target.value as Priority)}
43 |           className="rounded-lg border border-gray-300 bg-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:border-gray-600"
44 |         >
45 |           <option value="high">High</option>
46 |           <option value="medium">Medium</option>
47 |           <option value="low">Low</option>
48 |         </select>
49 |         <button
50 |           type="submit"
51 |           className="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
52 |         >
53 |           <Plus className="w-5 h-5" />
54 |         </button>
55 |       </div>
56 |     </form>
57 |   );
58 | };
59 |

--------------------------------------------------------------------------------
/src/components/MenuBar.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import { motion, AnimatePresence } from 'framer-motion';
  3 | import { Settings, Moon, Sun, Image, Info, X } from 'lucide-react';
  4 | import { Theme } from '../types';
  5 | import { useStore } from '../store/useStore';
  6 | import { cn } from '../utils/cn';
  7 | 
  8 | const DEFAULT_BACKGROUNDS = [
  9 |   'https://images.unsplash.com/photo-1519681393784-d120267933ba',
 10 |   'https://images.unsplash.com/photo-1508739773434-c26b3d09e071',
 11 |   'https://images.unsplash.com/photo-1477346611705-65d1883cee1e',
 12 | ];
 13 | 
 14 | export const MenuBar: React.FC = () => {
 15 |   const [isOpen, setIsOpen] = useState(false);
 16 |   const { settings, updateSettings } = useStore();
 17 | 
 18 |   const handleThemeChange = (theme: Theme) => {
 19 |     updateSettings({ theme });
 20 |     if (theme === 'system') {
 21 |       document.documentElement.removeAttribute('data-theme');
 22 |     } else {
 23 |       document.documentElement.setAttribute('data-theme', theme);
 24 |     }
 25 |   };
 26 | 
 27 |   return (
 28 |     <>
 29 |       <div className="fixed top-4 right-4 z-50">
 30 |         <motion.button
 31 |           whileHover={{ scale: 1.05 }}
 32 |           whileTap={{ scale: 0.95 }}
 33 |           onClick={() => setIsOpen(true)}
 34 |           className="bg-[rgb(var(--card-bg))] p-3 rounded-full shadow-lg hover:shadow-xl transition-shadow"
 35 |         >
 36 |           <Settings className="w-6 h-6 text-[rgb(var(--text-primary))]" />
 37 |         </motion.button>
 38 |       </div>
 39 | 
 40 |       <AnimatePresence>
 41 |         {isOpen && (
 42 |           <>
 43 |             <motion.div
 44 |               initial={{ opacity: 0 }}
 45 |               animate={{ opacity: 1 }}
 46 |               exit={{ opacity: 0 }}
 47 |               className="fixed inset-0 bg-black/50 backdrop-blur-sm z-40"
 48 |               onClick={() => setIsOpen(false)}
 49 |             />
 50 |             <motion.div
 51 |               initial={{ x: '100%' }}
 52 |               animate={{ x: 0 }}
 53 |               exit={{ x: '100%' }}
 54 |               transition={{ type: 'spring', damping: 20 }}
 55 |               className="fixed right-0 top-0 h-full w-80 bg-[rgb(var(--card-bg))] shadow-2xl z-50 p-6"
 56 |             >
 57 |               <div className="flex justify-between items-center mb-6">
 58 |                 <h2 className="text-xl font-bold">Settings</h2>
 59 |                 <button
 60 |                   onClick={() => setIsOpen(false)}
 61 |                   className="p-2 hover:bg-[rgb(var(--hover-bg))] rounded-full transition-colors"
 62 |                 >
 63 |                   <X className="w-5 h-5" />
 64 |                 </button>
 65 |               </div>
 66 | 
 67 |               <div className="space-y-6">
 68 |                 <div>
 69 |                   <h3 className="font-medium mb-3 flex items-center gap-2">
 70 |                     <Image className="w-5 h-5" />
 71 |                     Background
 72 |                   </h3>
 73 |                   <div className="grid grid-cols-3 gap-2">
 74 |                     {DEFAULT_BACKGROUNDS.map((bg) => (
 75 |                       <button
 76 |                         key={bg}
 77 |                         onClick={() => updateSettings({ backgroundImage: bg })}
 78 |                         className={cn(
 79 |                           'h-20 rounded-lg overflow-hidden',
 80 |                           settings.backgroundImage === bg && 'ring-2 ring-blue-500'
 81 |                         )}
 82 |                       >
 83 |                         <img
 84 |                           src={`${bg}?auto=format&fit=crop&w=100&q=60`}
 85 |                           alt="Background option"
 86 |                           className="w-full h-full object-cover"
 87 |                         />
 88 |                       </button>
 89 |                     ))}
 90 |                   </div>
 91 |                   <div className="mt-3">
 92 |                     <label className="text-sm text-[rgb(var(--text-primary))] opacity-75 mb-1 block">
 93 |                       Overlay Opacity
 94 |                     </label>
 95 |                     <input
 96 |                       type="range"
 97 |                       min="0"
 98 |                       max="1"
 99 |                       step="0.1"
100 |                       value={settings.backgroundOverlay}
101 |                       onChange={(e) =>
102 |                         updateSettings({
103 |                           backgroundOverlay: parseFloat(e.target.value),
104 |                         })
105 |                       }
106 |                       className="w-full"
107 |                     />
108 |                   </div>
109 |                 </div>
110 | 
111 |                 <div>
112 |                   <h3 className="font-medium mb-3 flex items-center gap-2">
113 |                     <Sun className="w-5 h-5" />
114 |                     Theme
115 |                   </h3>
116 |                   <div className="grid grid-cols-3 gap-2">
117 |                     {(['light', 'dark', 'system'] as Theme[]).map((theme) => (
118 |                       <button
119 |                         key={theme}
120 |                         onClick={() => handleThemeChange(theme)}
121 |                         className={cn(
122 |                           'px-3 py-2 rounded-lg capitalize',
123 |                           settings.theme === theme
124 |                             ? 'bg-blue-500 text-white'
125 |                             : 'bg-[rgb(var(--hover-bg))] hover:bg-opacity-80'
126 |                         )}
127 |                       >
128 |                         {theme}
129 |                       </button>
130 |                     ))}
131 |                   </div>
132 |                 </div>
133 | 
134 |                 <div>
135 |                   <h3 className="font-medium mb-3 flex items-center gap-2">
136 |                     <Info className="w-5 h-5" />
137 |                     About
138 |                   </h3>
139 |                   <div className="text-sm text-[rgb(var(--text-primary))] opacity-75">
140 |                     <p>Task Master v1.0.0</p>
141 |                     <p className="mt-1">
142 |                       A beautiful and productive task management app with
143 |                       gamification features.
144 |                     </p>
145 |                   </div>
146 |                 </div>
147 |               </div>
148 |             </motion.div>
149 |           </>
150 |         )}
151 |       </AnimatePresence>
152 |     </>
153 |   );
154 | };

--------------------------------------------------------------------------------
/src/components/Stats.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { motion, AnimatePresence } from 'framer-motion';
  3 | import { Trophy, Star, Check, Flame } from 'lucide-react';
  4 | import { useStore } from '../store/useStore';
  5 | 
  6 | const getMotivationalMessage = (tasksCompleted: number): string => {
  7 |   if (tasksCompleted === 0) return "🚀 Ready to start your productive journey?";
  8 |   if (tasksCompleted < 3) return "👍 Great start! Keep the momentum going!";
  9 |   if (tasksCompleted < 5) return "🔥 You're on fire! Don't stop now!";
 10 |   if (tasksCompleted < 10) return "💪 Incredible progress! You're unstoppable!";
 11 |   return "🏆 You're a productivity master! 🎉";
 12 | };
 13 | 
 14 | export const Stats: React.FC = () => {
 15 |   const { stats } = useStore();
 16 |   const xpToNextLevel = 100;
 17 |   const progress = (stats.xp % xpToNextLevel) / xpToNextLevel * 100;
 18 |   const motivationalMessage = getMotivationalMessage(stats.tasksCompleted);
 19 | 
 20 |   return (
 21 |     <div className="relative bg-gradient-to-br from-purple-50 to-blue-50 p-1 rounded-lg shadow-2xl overflow-hidden">
 22 |       <div className="bg-white rounded-lg p-6">
 23 |         {/* Streak Button in Top Right Corner */}
 24 |         <motion.button
 25 |           whileHover={{ scale: 1.1, rotate: 5 }}
 26 |           className="absolute top-2 right-2 bg-gradient-to-r from-orange-500 to-red-500 text-white px-4 py-2 rounded-full shadow-lg hover:animate-pulse focus:outline-none"
 27 |         >
 28 |           {stats.streak > 0 ? `🔥 ${stats.streak} Day${stats.streak > 1 ? 's' : ''} Streak` : "Start Streak"}
 29 |         </motion.button>
 30 | 
 31 |         <motion.div
 32 |           initial={{ scale: 0.95, opacity: 0 }}
 33 |           animate={{ scale: 1, opacity: 1 }}
 34 |           transition={{ duration: 0.3 }}
 35 |           className="flex items-center gap-4 mb-6"
 36 |         >
 37 |           <div className="bg-gradient-to-br from-green-500 to-teal-400 p-3 rounded-full shadow-md">
 38 |             <Trophy className="w-6 h-6 text-white" />
 39 |           </div>
 40 |           <div>
 41 |             <h2 className="text-xl font-bold">Level {stats.level}</h2>
 42 |             <div className="text-sm text-gray-500">
 43 |               {stats.xp} XP total • {stats.tasksCompleted} tasks completed
 44 |             </div>
 45 |           </div>
 46 |         </motion.div>
 47 | 
 48 |         <motion.div
 49 |           initial={{ y: 20, opacity: 0 }}
 50 |           animate={{ y: 0, opacity: 1 }}
 51 |           transition={{ delay: 0.2 }}
 52 |           className="mb-6"
 53 |         >
 54 |           <div className="flex justify-between text-sm mb-1">
 55 |             <span className="text-gray-700">Progress to Level {stats.level + 1}</span>
 56 |             <span className="text-gray-600">{stats.xp % xpToNextLevel}/{xpToNextLevel} XP</span>
 57 |           </div>
 58 |           <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
 59 |             <motion.div
 60 |               className="h-full bg-gradient-to-r from-purple-500 to-pink-500"
 61 |               initial={{ width: 0 }}
 62 |               animate={{ width: `${progress}%` }}
 63 |               transition={{ duration: 0.5 }}
 64 |             />
 65 |           </div>
 66 |         </motion.div>
 67 | 
 68 |         <motion.div
 69 |   initial={{ y: 20, opacity: 0 }}
 70 |   animate={{ y: 0, opacity: 1 }}
 71 |   transition={{ delay: 0.3 }}
 72 |   className="mb-6 text-center p-4 bg-gradient-to-r from-pink-100 to-purple-100 rounded-lg shadow-inner"
 73 | >
 74 |   <p className="bg-gradient-to-r from-blue-800 to-pink-800 bg-clip-text text-transparent font-extrabold text-lg animate-pulse">
 75 |     {motivationalMessage}
 76 |   </p>
 77 | </motion.div>
 78 | 
 79 | 
 80 |         <div className="space-y-4">
 81 |           <h3 className="font-semibold flex items-center gap-2 ">
 82 |             <Star className="w-5 h-5 text-yellow-500" />
 83 |             Achievements
 84 |           </h3>
 85 |           <div className="grid grid-cols-1 gap-3">
 86 |           {stats.achievements.map((achievement, index) => (
 87 |               <motion.div
 88 |                 key={achievement.id}
 89 |                 initial={{ x: -20, opacity: 0 }}
 90 |                 animate={{ x: 0, opacity: 1 }}
 91 |                 transition={{ delay: index * 0.1 }}
 92 |                 whileHover={{ scale: 1.03, boxShadow: "0px 10px 20px rgba(0,0,0,0.2)" }}
 93 |                 className={`flex items-center gap-3 p-3 rounded-lg border cursor-pointer transition-all duration-200 ${
 94 |                   achievement.unlocked
 95 |                     ? 'bg-gradient-to-r from-green-700 to-green-200 border-green-400'
 96 |                     : 'bg-gradient-to-r from-gray-500 to-gray-200 border-gray-300'
 97 |                 }`}
 98 |               >
 99 |                 <span className="text-2xl">{achievement.icon}</span>
100 |                 <div>
101 |                   <div className="font-medium text-gray-950">{achievement.title}</div>
102 |                   <div className="text-sm text-gray-100">
103 |                     {achievement.description}
104 |                   </div>
105 |                 </div>
106 |                 {achievement.unlocked && (
107 |                   <Check strokeWidth={8} className="w-5 h-5 text-green-400 ml-auto" />
108 |                 )}
109 |               </motion.div>
110 |             ))}
111 | 
112 |           </div>
113 |         </div>
114 |       </div>
115 |     </div>
116 |   );
117 | };
118 |

--------------------------------------------------------------------------------
/src/components/TaskItem.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import { useSortable } from '@dnd-kit/sortable';
  3 | import { CSS } from '@dnd-kit/utilities';
  4 | import { motion, AnimatePresence } from 'framer-motion';
  5 | import { GripVertical, Trash2, Edit2, Check, Sparkles } from 'lucide-react';
  6 | import { Task, Priority } from '../types';
  7 | import { useStore } from '../store/useStore';
  8 | import { cn } from '../utils/cn';
  9 | 
 10 | interface TaskItemProps {
 11 |   task: Task;
 12 | }
 13 | 
 14 | const priorityColors = {
 15 |   high: 'bg-gradient-to-r from-red-400 to-rose-400 border-red-200 dark:from-red-900 dark:to-rose-900 dark:border-red-800',
 16 |   medium: 'bg-gradient-to-r from-yellow-300 to-amber-300 border-yellow-200 dark:from-yellow-900 dark:to-amber-900 dark:border-yellow-800',
 17 |   low: 'bg-gradient-to-r from-green-400 to-emerald-400 border-green-200 dark:from-green-900 dark:to-emerald-900 dark:border-green-800',
 18 | };
 19 | 
 20 | export const TaskItem: React.FC<TaskItemProps> = ({ task }) => {
 21 |   const [isEditing, setIsEditing] = useState(false);
 22 |   const [editTitle, setEditTitle] = useState(task.title);
 23 |   const [editPriority, setEditPriority] = useState<Priority>(task.priority);
 24 |   const [showCompletionEffect, setShowCompletionEffect] = useState(false);
 25 |   
 26 |   const { toggleTask, deleteTask, editTask } = useStore();
 27 |   
 28 |   const {
 29 |     attributes,
 30 |     listeners,
 31 |     setNodeRef,
 32 |     transform,
 33 |     transition,
 34 |   } = useSortable({ id: task.id });
 35 | 
 36 |   const style = {
 37 |     transform: CSS.Transform.toString(transform),
 38 |     transition,
 39 |   };
 40 | 
 41 |   const handleEdit = () => {
 42 |     editTask(task.id, editTitle, editPriority);
 43 |     setIsEditing(false);
 44 |   };
 45 | 
 46 |   const handleToggle = () => {
 47 |     if (!task.completed) {
 48 |       setShowCompletionEffect(true);
 49 |       setTimeout(() => setShowCompletionEffect(false), 1000);
 50 |     }
 51 |     toggleTask(task.id);
 52 |   };
 53 | 
 54 |   return (
 55 |     <motion.div
 56 |       ref={setNodeRef}
 57 |       style={style}
 58 |       initial={{ opacity: 0, y: 20 }}
 59 |       animate={{ opacity: 1, y: 0 }}
 60 |       exit={{ opacity: 0, y: -20 }}
 61 |       whileHover={{ scale: 1.01 }}
 62 |       className={cn(
 63 |         'group flex flex-col p-4 rounded-lg border shadow-sm transition-shadow duration-200',
 64 |         'bg-white text-black dark:bg-gray-800 dark:text-gray-300 dark:shadow-lg dark:border-gray-700',
 65 |         priorityColors[task.priority],
 66 |         task.completed && 'opacity-75'
 67 |       )}
 68 |     >
 69 |       <div className="flex items-center gap-3">
 70 |         {/* Drag Handle */}
 71 |         <button {...attributes} {...listeners} className="touch-none">
 72 |           <GripVertical className="w-5 h-5 text-gray-400 dark:text-gray-500" />
 73 |         </button>
 74 | 
 75 |         {/* Checkbox for Task Completion */}
 76 |         <label className="relative cursor-pointer">
 77 |           <input
 78 |             type="checkbox"
 79 |             checked={task.completed}
 80 |             onChange={handleToggle}
 81 |             className="h-5 w-5 rounded border-gray-300 transition-all duration-200 checked:bg-blue-500 dark:border-gray-600"
 82 |           />
 83 |           <AnimatePresence>
 84 |             {showCompletionEffect && (
 85 |               <motion.div
 86 |                 initial={{ scale: 0.5, opacity: 0 }}
 87 |                 animate={{ scale: 1.5, opacity: 1 }}
 88 |                 exit={{ scale: 2, opacity: 0 }}
 89 |                 className="absolute -inset-1"
 90 |               >
 91 |                 <Sparkles className="w-7 h-7 text-yellow-400" />
 92 |               </motion.div>
 93 |             )}
 94 |           </AnimatePresence>
 95 |         </label>
 96 | 
 97 |         {/* Task Title & Edit Mode */}
 98 |         {isEditing ? (
 99 |           <div className="flex-1 flex gap-2">
100 |             <input
101 |               type="text"
102 |               value={editTitle}
103 |               onChange={(e) => setEditTitle(e.target.value)}
104 |               className="flex-1 text-black dark:text-black rounded px-2 py-1 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
105 |             />
106 |             <select
107 |               value={editPriority}
108 |               onChange={(e) => setEditPriority(e.target.value as Priority)}
109 |               className="dark:bg-gray-700 text-black dark: rounded px-2 py-1 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
110 |             >
111 |               <option value="high">High</option>
112 |               <option value="medium">Medium</option>
113 |               <option value="low">Low</option>
114 |             </select>
115 |             <button
116 |               onClick={handleEdit}
117 |               className="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors duration-200"
118 |             >
119 |               <Check className="w-5 h-5 text-green-600 dark:text-green-400" />
120 |             </button>
121 |           </div>
122 |         ) : (
123 |           <span className={cn(
124 |             'flex-1 transition-all duration-200 font-bold text-xl',
125 |             task.completed ? 'line-through text-blue-500 dark:text-gray-400' : 'text-blue-900'
126 |           )}>
127 |             {task.title}
128 |           </span>
129 |         )}
130 | 
131 |         {/* Edit & Delete Buttons */}
132 |         <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
133 |           <button
134 |             onClick={(e) => {
135 |               e.stopPropagation();
136 |               setIsEditing(true);
137 |             }}
138 |             className="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors duration-200"
139 |           >
140 |             <Edit2 className="w-5 h-5 dark:text-gray-300" />
141 |           </button>
142 |           <button
143 |             onClick={() => deleteTask(task.id)}
144 |             className="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors duration-200"
145 |           >
146 |             <Trash2 className="w-5 h-5 text-red-600 dark:text-red-400" />
147 |           </button>
148 |         </div>
149 |       </div>
150 | 
151 |       {/* Task Description */}
152 |       <div className="w-full mt-2">
153 |         <p className="text-sm text-gray-900 dark:text-gray-900">
154 |           {task.description}
155 |         </p>
156 |       </div>
157 |     </motion.div>
158 |   );
159 | };
160 |

--------------------------------------------------------------------------------
/src/components/TaskList.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { DndContext, DragEndEvent, closestCenter } from '@dnd-kit/core';
 3 | import { SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
 4 | import { TaskItem } from './TaskItem';
 5 | import { useStore } from '../store/useStore';
 6 | import { Task } from '../types'; // Ensure your Task type is imported if needed
 7 | 
 8 | export const TaskList: React.FC = () => {
 9 |   const { tasks, reorderTasks } = useStore();
10 | 
11 |   const handleDragEnd = (event: DragEndEvent) => {
12 |     const { active, over } = event;
13 |     if (over && active.id !== over.id) {
14 |       const oldIndex = tasks.findIndex(task => task.id === active.id);
15 |       const newIndex = tasks.findIndex(task => task.id === over.id);
16 |       const newTasks = arrayMove(tasks, oldIndex, newIndex);
17 |       reorderTasks(newTasks);
18 |     }
19 |   };
20 | 
21 |   const sortedTasks = [...tasks].sort((a, b) => {
22 |     const priorityOrder = { high: 0, medium: 1, low: 2 };
23 |     return priorityOrder[a.priority] - priorityOrder[b.priority];
24 |   });
25 | 
26 |   return (
27 |     <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
28 |       <SortableContext items={sortedTasks} strategy={verticalListSortingStrategy}>
29 |         <div className="space-y-2">
30 |           {sortedTasks.map(task => (
31 |             <TaskItem key={task.id} task={task} />
32 |           ))}
33 |         </div>
34 |       </SortableContext>
35 |     </DndContext>
36 |   );
37 | };
38 |

--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   :root {
 7 |     --bg-primary: 249 250 251;
 8 |     --text-primary: 17 24 39;
 9 |     --card-bg: 255 255 255;
10 |     --card-border: 229 231 235;
11 |     --hover-bg: 243 244 246;
12 |   }
13 | 
14 |   [data-theme='dark'] {
15 |     --bg-primary: 17 24 39;
16 |     --text-primary: 249 250 251;
17 |     --card-bg: 31 41 55;
18 |     --card-border: 55 65 81;
19 |     --hover-bg: 55 65 81;
20 |   }
21 | 
22 |   body {
23 |     @apply bg-[rgb(var(--bg-primary))] text-[rgb(var(--text-primary))];
24 |   }
25 | }
26 | 
27 | .bg-white {
28 |   @apply bg-[rgb(var(--card-bg))];
29 | }
30 | 
31 | .bg-gray-50 {
32 |   @apply bg-[rgb(var(--bg-primary))];
33 | }
34 | 
35 | .bg-gray-100 {
36 |   @apply bg-[rgb(var(--hover-bg))];
37 | }
38 | 
39 | .text-gray-700 {
40 |   @apply text-[rgb(var(--text-primary))];
41 | }
42 | 
43 | .text-gray-500 {
44 |   @apply text-[rgb(var(--text-primary))] opacity-60;
45 | }
46 | 
47 | .text-gray-600 {
48 |   @apply text-[rgb(var(--text-primary))] opacity-75;
49 | }
50 | 
51 | .border-gray-200 {
52 |   @apply border-[rgb(var(--card-border))];
53 | }
54 | 
55 | .hover\:bg-gray-100:hover {
56 |   @apply hover:bg-[rgb(var(--hover-bg))];
57 | }
58 | 
59 | .hover\:bg-gray-200:hover {
60 |   @apply hover:bg-[rgb(var(--hover-bg))];
61 | }
62 | 
63 | @keyframes float {
64 |   0% {
65 |     transform: translateY(0px) translateX(0px);
66 |   }
67 |   50% {
68 |     transform: translateY(-10px) translateX(5px);
69 |   }
70 |   100% {
71 |     transform: translateY(0px) translateX(0px);
72 |   }
73 | }
74 | 
75 | @keyframes pulse {
76 |   0% {
77 |     transform: scale(1);
78 |   }
79 |   50% {
80 |     transform: scale(1.05);
81 |   }
82 |   100% {
83 |     transform: scale(1);
84 |   }
85 | }
86 | 
87 | .animate-float {
88 |   animation: float 6s ease-in-out infinite;
89 | }
90 | 
91 | .animate-pulse-slow {
92 |   animation: pulse 4s ease-in-out infinite;
93 | }

--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from 'react'
 2 | import { createRoot } from 'react-dom/client'
 3 | import App from './App.tsx'
 4 | import './index.css'
 5 | 
 6 | createRoot(document.getElementById('root')!).render(
 7 |   <StrictMode>
 8 |     <App />
 9 |   </StrictMode>,
10 | )
11 |

--------------------------------------------------------------------------------
/src/store/useStore.ts:
--------------------------------------------------------------------------------
  1 | import { create } from 'zustand';
  2 | import { Task, Priority, UserStats, Achievement, Settings, Theme } from '../types';
  3 | 
  4 | interface Store {
  5 |   tasks: Task[];
  6 |   stats: UserStats;
  7 |   settings: Settings;
  8 |   addTask: (title: string, description: string, priority: Priority) => void;
  9 |   editTask: (id: string, title: string, priority: Priority) => void;
 10 |   deleteTask: (id: string) => void;
 11 |   toggleTask: (id: string) => void;
 12 |   reorderTasks: (tasks: Task[]) => void;
 13 |   updateSettings: (settings: Partial<Settings>) => void;
 14 | }
 15 | 
 16 | const DEFAULT_BACKGROUNDS = [
 17 |   'https://images.unsplash.com/photo-1519681393784-d120267933ba',
 18 |   'https://images.unsplash.com/photo-1508739773434-c26b3d09e071',
 19 |   'https://images.unsplash.com/photo-1477346611705-65d1883cee1e',
 20 | ];
 21 | 
 22 | const INITIAL_ACHIEVEMENTS: Achievement[] = [
 23 |   {
 24 |     id: 'first-task',
 25 |     title: 'Getting Started',
 26 |     description: 'Complete your first task',
 27 |     icon: '🌟',
 28 |     unlocked: false,
 29 |   },
 30 |   {
 31 |     id: 'productive-day',
 32 |     title: 'Productive Day',
 33 |     description: 'Complete 5 tasks in a day',
 34 |     icon: '🎯',
 35 |     unlocked: false,
 36 |   },
 37 |   {
 38 |     id: 'master-organizer',
 39 |     title: 'Master Organizer',
 40 |     description: 'Have tasks in all priority levels',
 41 |     icon: '📊',
 42 |     unlocked: false,
 43 |   },
 44 | ];
 45 | 
 46 | const calculateLevel = (xp: number) => Math.floor(xp / 100) + 1;
 47 | 
 48 | const loadFromStorage = () => {
 49 |   const tasks = JSON.parse(localStorage.getItem('tasks') || '[]');
 50 |   const stats = JSON.parse(localStorage.getItem('stats') || JSON.stringify({
 51 |     level: 1,
 52 |     xp: 0,
 53 |     tasksCompleted: 0,
 54 |     streak: 0,
 55 |     lastCompletedAt: null,
 56 |     achievements: INITIAL_ACHIEVEMENTS,
 57 |   }));
 58 |   const settings = JSON.parse(localStorage.getItem('settings') || JSON.stringify({
 59 |     theme: 'system' as Theme,
 60 |     backgroundImage: DEFAULT_BACKGROUNDS[0],
 61 |     backgroundOverlay: 0.5,
 62 |   }));
 63 |   return { tasks, stats, settings };
 64 | };
 65 | 
 66 | export const useStore = create<Store>((set, get) => {
 67 |   const { tasks: initialTasks, stats: initialStats, settings: initialSettings } = loadFromStorage();
 68 | 
 69 |   const saveToStorage = (tasks: Task[], stats: UserStats, settings: Settings) => {
 70 |     localStorage.setItem('tasks', JSON.stringify(tasks));
 71 |     localStorage.setItem('stats', JSON.stringify(stats));
 72 |     localStorage.setItem('settings', JSON.stringify(settings));
 73 |   };
 74 | 
 75 |   const updateStreak = (stats: UserStats): UserStats => {
 76 |     const now = new Date();
 77 |     const lastCompleted = stats.lastCompletedAt ? new Date(stats.lastCompletedAt) : null;
 78 |     
 79 |     if (!lastCompleted) {
 80 |       return {
 81 |         ...stats,
 82 |         streak: 1,
 83 |         lastCompletedAt: now.getTime(),
 84 |       };
 85 |     }
 86 | 
 87 |     const isNextDay = 
 88 |       now.getDate() === lastCompleted.getDate() + 1 &&
 89 |       now.getMonth() === lastCompleted.getMonth() &&
 90 |       now.getFullYear() === lastCompleted.getFullYear();
 91 | 
 92 |     const isSameDay =
 93 |       now.getDate() === lastCompleted.getDate() &&
 94 |       now.getMonth() === lastCompleted.getMonth() &&
 95 |       now.getFullYear() === lastCompleted.getFullYear();
 96 | 
 97 |     if (isNextDay) {
 98 |       return {
 99 |         ...stats,
100 |         streak: stats.streak + 1,
101 |         lastCompletedAt: now.getTime(),
102 |       };
103 |     } else if (isSameDay) {
104 |       return {
105 |         ...stats,
106 |         lastCompletedAt: now.getTime(),
107 |       };
108 |     } else {
109 |       return {
110 |         ...stats,
111 |         streak: 1,
112 |         lastCompletedAt: now.getTime(),
113 |       };
114 |     }
115 |   };
116 | 
117 |   const checkAchievements = (stats: UserStats, tasks: Task[]) => {
118 |     const updatedAchievements = [...stats.achievements];
119 | 
120 |     if (stats.tasksCompleted >= 1) {
121 |       updatedAchievements[0].unlocked = true;
122 |     }
123 | 
124 |     if (stats.tasksCompleted >= 5) {
125 |       updatedAchievements[1].unlocked = true;
126 |     }
127 | 
128 |     const priorities = new Set(tasks.map(task => task.priority));
129 |     if (priorities.size === 3) {
130 |       updatedAchievements[2].unlocked = true;
131 |     }
132 | 
133 |     return updatedAchievements;
134 |   };
135 | 
136 |   return {
137 |     tasks: initialTasks,
138 |     stats: initialStats,
139 |     settings: initialSettings,
140 | 
141 |     addTask: (title: string, description: string, priority: Priority) => {
142 |       const newTask: Task = {
143 |         id: Date.now().toString(),
144 |         title,
145 |         description,
146 |         priority,
147 |         completed: false,
148 |         createdAt: Date.now(),
149 |       };
150 | 
151 |       set(state => {
152 |         const newTasks = [...state.tasks, newTask];
153 |         const newStats = { ...state.stats };
154 |         newStats.achievements = checkAchievements(newStats, newTasks);
155 |         
156 |         saveToStorage(newTasks, newStats, state.settings);
157 |         return { tasks: newTasks, stats: newStats };
158 |       });
159 |     },
160 | 
161 |     editTask: (id: string, title: string, priority: Priority) => {
162 |       set(state => {
163 |         const newTasks = state.tasks.map(task =>
164 |           task.id === id ? { ...task, title, priority } : task
165 |         );
166 |         saveToStorage(newTasks, state.stats, state.settings);
167 |         return { tasks: newTasks };
168 |       });
169 |     },
170 | 
171 |     deleteTask: (id: string) => {
172 |       set(state => {
173 |         const newTasks = state.tasks.filter(task => task.id !== id);
174 |         saveToStorage(newTasks, state.stats, state.settings);
175 |         return { tasks: newTasks };
176 |       });
177 |     },
178 | 
179 |     toggleTask: (id: string) => {
180 |       set(state => {
181 |         const newTasks = state.tasks.map(task =>
182 |           task.id === id ? { ...task, completed: !task.completed } : task
183 |         );
184 |         
185 |         const taskCompleted = newTasks.find(t => t.id === id)?.completed;
186 |         let newStats = { ...state.stats };
187 |         
188 |         if (taskCompleted) {
189 |           newStats.tasksCompleted += 1;
190 |           newStats.xp += 10;
191 |           newStats.level = calculateLevel(newStats.xp);
192 |           newStats = updateStreak(newStats);
193 |           newStats.achievements = checkAchievements(newStats, newTasks);
194 |         }
195 | 
196 |         saveToStorage(newTasks, newStats, state.settings);
197 |         return { tasks: newTasks, stats: newStats };
198 |       });
199 |     },
200 | 
201 |     reorderTasks: (tasks: Task[]) => {
202 |       set(state => {
203 |         saveToStorage(tasks, state.stats, state.settings);
204 |         return { tasks };
205 |       });
206 |     },
207 | 
208 |     updateSettings: (newSettings: Partial<Settings>) => {
209 |       set(state => {
210 |         const settings = { ...state.settings, ...newSettings };
211 |         saveToStorage(state.tasks, state.stats, settings);
212 |         return { settings };
213 |       });
214 |     },
215 |   };
216 | });
217 |

--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | export type Priority = 'high' | 'medium' | 'low';
 2 | 
 3 | export type Theme = 'light' | 'dark' | 'system';
 4 | 
 5 | export interface Settings {
 6 |   theme: Theme;
 7 |   backgroundImage: string | null;
 8 |   backgroundOverlay: number;
 9 | }
10 | 
11 | export interface Task {
12 |   id: string;
13 |   title: string;
14 |   description: string;
15 |   priority: Priority;
16 |   completed: boolean;
17 |   createdAt: number;
18 | }
19 | 
20 | export interface Achievement {
21 |   id: string;
22 |   title: string;
23 |   description: string;
24 |   icon: string;
25 |   unlocked: boolean;
26 | }
27 | 
28 | export interface UserStats {
29 |   level: number;
30 |   xp: number;
31 |   tasksCompleted: number;
32 |   streak: number;
33 |   lastCompletedAt: number | null;
34 |   achievements: Achievement[];
35 | }

--------------------------------------------------------------------------------
/src/utils/cn.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from 'clsx';
2 | import { twMerge } from 'tailwind-merge';
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs));
6 | }

--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 |

--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     "./index.html",
 5 |     "./src/**/*.{js,ts,jsx,tsx}",
 6 |   ],
 7 |   theme: {
 8 |     extend: {},
 9 |   },
10 |   plugins: [],
11 | }

--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "isolatedModules": true,
13 |     "moduleDetection": "force",
14 |     "noEmit": true,
15 |     "jsx": "react-jsx",
16 | 
17 |     /* Linting */
18 |     "strict": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "noFallthroughCasesInSwitch": true
22 |   },
23 |   "include": ["src"]
24 | }
25 |

--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "files": [],
3 |   "references": [
4 |     { "path": "./tsconfig.app.json" },
5 |     { "path": "./tsconfig.node.json" }
6 |   ]
7 | }
8 |

--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2022",
 4 |     "lib": ["ES2023"],
 5 |     "module": "ESNext",
 6 |     "skipLibCheck": true,
 7 | 
 8 |     /* Bundler mode */
 9 |     "moduleResolution": "bundler",
10 |     "allowImportingTsExtensions": true,
11 |     "isolatedModules": true,
12 |     "moduleDetection": "force",
13 |     "noEmit": true,
14 | 
15 |     /* Linting */
16 |     "strict": true,
17 |     "noUnusedLocals": true,
18 |     "noUnusedParameters": true,
19 |     "noFallthroughCasesInSwitch": true
20 |   },
21 |   "include": ["vite.config.ts"]
22 | }
23 |

--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import react from '@vitejs/plugin-react'
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |   plugins: [react()],
 7 |   optimizeDeps: {
 8 |     exclude: ['lucide-react'],
 9 |   },
10 | })
11 |

--------------------------------------------------------------------------------