import React, { useState, useEffect } from 'react'; import { Plus, Bell, Settings, Calendar, ArrowRight, Check } from 'lucide-react'; import { motion, AnimatePresence } from 'framer-motion'; import { Habit } from './types'; import { HabitCard } from './components/HabitCard'; import { Heatmap } from './components/Heatmap'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'; import { Toaster, toast } from 'sonner'; const COLORS = [ 'bg-blue-600', 'bg-indigo-600', 'bg-violet-600', 'bg-emerald-600', 'bg-rose-600', 'bg-amber-600' ]; export default function App() { const [habits, setHabits] = useState(() => { const saved = localStorage.getItem('verve-habits'); return saved ? JSON.parse(saved) : []; }); const [newHabitName, setNewHabitName] = useState(''); const [isAddOpen, setIsAddOpen] = useState(false); useEffect(() => { localStorage.setItem('verve-habits', JSON.stringify(habits)); }, [habits]); const addHabit = () => { if (!newHabitName.trim()) return; const newHabit: Habit = { id: crypto.randomUUID(), name: newHabitName, icon: 'Star', color: COLORS[habits.length % COLORS.length], createdAt: new Date(), history: {}, }; setHabits([...habits, newHabit]); setNewHabitName(''); setIsAddOpen(false); toast.success("Habit created. Let's get to work."); }; const toggleHabit = (id: string, dateKey: string) => { setHabits(prev => prev.map(h => { if (h.id !== id) return h; const newHistory = { ...h.history }; if (newHistory[dateKey] === 'completed') { delete newHistory[dateKey]; } else { newHistory[dateKey] = 'completed'; if (dateKey === new Date().toISOString().split('T')[0]) { toast.success(`Keep it up!`, { icon: , }); } } return { ...h, history: newHistory }; })); }; const deleteHabit = (id: string) => { setHabits(prev => prev.filter(h => h.id !== id)); toast.info("Habit removed."); }; const totalCompletionToday = habits.length > 0 ? (habits.filter(h => h.history[new Date().toISOString().split('T')[0]] === 'completed').length / habits.length) * 100 : 0; return (

{/* Navigation Shell */}

Verve

{new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}

{/* Hero / Stats Section */}

Good morning.
You're at {Math.round(totalCompletionToday)}% today.

{habits.length} Active Habits

Consistency

{/* Habits Grid */}

{habits.length === 0 ? (

No habits yet

Start your journey by adding your first daily commitment.

) : (

{habits.map((habit) => ( ))}

)}

{/* Footer / Status Bar */}

); } function calculateStats(habit: Habit) { const allDates = Object.keys(habit.history).sort(); let bestStreak = 0; let tempStreak = 0; allDates.forEach((date) => { if (habit.history[date] === 'completed') { tempStreak++; if (tempStreak > bestStreak) bestStreak = tempStreak; } else { tempStreak = 0; } }); return { bestStreak }; }

Good morning. You're at {Math.round(totalCompletionToday)}% today.

Consistency

No habits yet

Good morning.
You're at {Math.round(totalCompletionToday)}% today.