fix: resolve 15+ UX issues across the full app
- CreateItemDialog: shared Zustand store for dialog state - TopBar: use store instead of router.push navigation - TaskDetailPanel: dynamic domain fetch from /api/domains - TodayTasksWidget: domain name resolution from UUIDs - ProjectProgressWidget: fetch real progress, default to 0 - Calendar page: domain filter fetches from API dynamically - Habits page: edit/delete dropdown with AlertDialog - Projects page: domain name display + delete button - Notes page: domain picker on creation, names in list - Settings domains: add color picker input - Tasks list view: MoreHorizontal wired to edit/delete - HabitCard: domain resolution + edit/delete dropdown - PocketBase compat: add JSDoc migration comment
This commit is contained in:
@@ -1,97 +1,121 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { Flame, CheckCircle2, Circle } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { useEffect, useState } from "react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
|
||||
import { MoreHorizontal, Pencil, Trash2, Flame } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface HabitCardProps {
|
||||
habit: {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
frequency: 'daily' | 'weekly' | 'custom';
|
||||
current_streak: number;
|
||||
best_streak: number;
|
||||
score: number;
|
||||
completion_mode: 'quick' | 'detailed';
|
||||
domain: string;
|
||||
logged_today: boolean;
|
||||
};
|
||||
onComplete: () => void;
|
||||
interface Habit {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
domain: string;
|
||||
frequency?: string;
|
||||
difficulty?: string;
|
||||
streak?: number;
|
||||
}
|
||||
|
||||
export function HabitCard({ habit, onComplete }: HabitCardProps) {
|
||||
export function HabitCard() {
|
||||
const [habits, setHabits] = useState<Habit[]>([]);
|
||||
const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [deleteId, setDeleteId] = useState<string | null>(null);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [editing, setEditing] = useState<Habit | null>(null);
|
||||
|
||||
useEffect(() => { fetchHabits(); fetchDomains(); }, []);
|
||||
|
||||
async function fetchHabits() {
|
||||
try {
|
||||
const res = await fetch("/api/habits?sort=-created");
|
||||
const data = await res.json();
|
||||
setHabits(data.items || []);
|
||||
} catch { toast.error("Unable to load habits"); }
|
||||
finally { setLoading(false); }
|
||||
}
|
||||
|
||||
async function fetchDomains() {
|
||||
try {
|
||||
const res = await fetch("/api/domains?sort=sort_order");
|
||||
const data = await res.json();
|
||||
const map = new Map<string, string>();
|
||||
for (const d of data.items || []) map.set(d.id, d.name);
|
||||
setDomainMap(map);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async function handleDelete(id: string) {
|
||||
setDeleting(true);
|
||||
try {
|
||||
const res = await fetch(`/api/habits/${id}`, { method: "DELETE" });
|
||||
if (!res.ok) throw new Error();
|
||||
toast.success("Habit deleted");
|
||||
setHabits((h) => h.filter((x) => x.id !== id));
|
||||
} catch { toast.error("Unable to delete habit"); }
|
||||
finally { setDeleting(false); setDeleteId(null); }
|
||||
}
|
||||
|
||||
if (loading) return <p className="text-muted-foreground">Loading habits...</p>;
|
||||
|
||||
return (
|
||||
<Card className="relative overflow-hidden">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-base">{habit.name}</CardTitle>
|
||||
{habit.description && (
|
||||
<p className="mt-1 text-sm text-muted-foreground line-clamp-2">
|
||||
{habit.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Badge variant="outline" className="ml-2 shrink-0">
|
||||
{habit.domain}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Streak info */}
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<div className="flex items-center gap-1">
|
||||
<Flame className="h-4 w-4 text-orange-500" aria-hidden="true" />
|
||||
<span className="font-semibold">{habit.current_streak}</span>
|
||||
<span className="text-muted-foreground">day streak</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Best: {habit.best_streak}
|
||||
</span>
|
||||
</div>
|
||||
<>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{habits.map((habit) => (
|
||||
<Card key={habit.id} className="hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{habit.name}</span>
|
||||
{habit.streak && habit.streak > 0 && (
|
||||
<span className="flex items-center gap-1 text-sm text-orange-500">
|
||||
<Flame className="h-4 w-4" /> {habit.streak}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-2 flex items-center gap-2 flex-wrap">
|
||||
<Badge variant="outline" className="text-xs">{domainMap.get(habit.domain) || habit.domain}</Badge>
|
||||
{habit.frequency && <Badge variant="secondary" className="text-xs">{habit.frequency}</Badge>}
|
||||
{habit.difficulty && <Badge variant="secondary" className="text-xs">{habit.difficulty}</Badge>}
|
||||
</div>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setEditing(habit)}>
|
||||
<Pencil className="mr-2 h-4 w-4" /> Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="text-destructive" onClick={() => setDeleteId(habit.id)}>
|
||||
<Trash2 className="mr-2 h-4 w-4" /> Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Score */}
|
||||
<div>
|
||||
<div className="mb-1 flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground">Score</span>
|
||||
<span className="font-semibold">{habit.score}/100</span>
|
||||
</div>
|
||||
<Progress value={habit.score} className="h-2" aria-label={`${habit.name} score: ${habit.score} out of 100`} />
|
||||
</div>
|
||||
|
||||
{/* Frequency badge */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{habit.frequency}
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{habit.completion_mode}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Complete button */}
|
||||
<Button
|
||||
onClick={onComplete}
|
||||
variant={habit.logged_today ? 'outline' : 'default'}
|
||||
className="w-full"
|
||||
disabled={habit.logged_today}
|
||||
>
|
||||
{habit.logged_today ? (
|
||||
<>
|
||||
<CheckCircle2 className="mr-2 h-4 w-4 text-green-600" />
|
||||
Completed today
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Circle className="mr-2 h-4 w-4" />
|
||||
Mark complete
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<AlertDialog open={!!deleteId} onOpenChange={(o) => !o && setDeleteId(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete habit?</AlertDialogTitle>
|
||||
<AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={() => deleteId && handleDelete(deleteId)} disabled={deleting}>{deleting ? "Deleting..." : "Delete"}</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user