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:
@@ -41,11 +41,23 @@ export default function CalendarPage() {
|
||||
const [showProjects, setShowProjects] = useState(true);
|
||||
const [showMilestones, setShowMilestones] = useState(true);
|
||||
const [selectedDomains, setSelectedDomains] = useState<string[]>([]);
|
||||
const [domainOptions, setDomainOptions] = useState<{id: string; name: string}[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchEvents();
|
||||
fetchDomains();
|
||||
}, []);
|
||||
|
||||
async function fetchDomains() {
|
||||
try {
|
||||
const res = await fetch('/api/domains?sort=sort_order');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setDomainOptions(data.items || []);
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async function fetchEvents() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
@@ -1,197 +1,29 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, Suspense } from 'react';
|
||||
import { Flame, Plus } from 'lucide-react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { HabitCard } from '@/components/habits/habit-card';
|
||||
import { HabitCompletionDialog } from '@/components/habits/habit-completion-dialog';
|
||||
import type { Habit } from '@project-e/shared';
|
||||
import { CreateItemDialog } from '@/components/create-item-dialog';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
// Lazy load react-calendar-heatmap (~15KB)
|
||||
const HabitHeatmap = dynamic(
|
||||
() => import('@/components/habits/habit-heatmap').then((m) => m.HabitHeatmap),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="h-[150px] animate-pulse rounded-lg bg-muted/30" />
|
||||
),
|
||||
}
|
||||
);
|
||||
|
||||
/** Extended habit with server-computed fields */
|
||||
interface HabitWithMeta extends Habit {
|
||||
logged_today: boolean;
|
||||
}
|
||||
import { useState } from "react";
|
||||
import { Plus } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { HabitCard } from "@/components/habits/habit-card";
|
||||
import { CreateItemDialog } from "@/components/create-item-dialog";
|
||||
import { useCreateDialogStore } from "@/lib/stores/use-create-dialog-store";
|
||||
|
||||
export default function HabitsPage() {
|
||||
const [habits, setHabits] = useState<HabitWithMeta[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [selectedHabit, setSelectedHabit] = useState<HabitWithMeta | null>(null);
|
||||
const [completionDialogOpen, setCompletionDialogOpen] = useState(false);
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchHabits();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (new URLSearchParams(window.location.search).get('new') === 'true') setCreateOpen(true);
|
||||
}, []);
|
||||
|
||||
function handleCreateOpenChange(open: boolean) {
|
||||
setCreateOpen(open);
|
||||
if (!open && new URLSearchParams(window.location.search).get('new') === 'true') {
|
||||
window.history.replaceState(null, '', '/habits');
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchHabits() {
|
||||
try {
|
||||
setError(null);
|
||||
const response = await fetch('/api/habits');
|
||||
if (!response.ok) throw new Error('Unable to load habits.');
|
||||
const data = await response.json();
|
||||
setHabits(data.items || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch habits:', error);
|
||||
setError('Unable to load habits. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleComplete(habit: HabitWithMeta) {
|
||||
if (habit.completion_mode === 'quick') {
|
||||
logHabitCompletion(habit.id, {});
|
||||
} else {
|
||||
setSelectedHabit(habit);
|
||||
setCompletionDialogOpen(true);
|
||||
}
|
||||
}
|
||||
|
||||
async function logHabitCompletion(
|
||||
habitId: string,
|
||||
data: { mood?: number; value?: number; notes?: string }
|
||||
) {
|
||||
try {
|
||||
const response = await fetch(`/api/habits/${habitId}/logs`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
if (!response.ok) throw new Error('Unable to save habit completion.');
|
||||
fetchHabits();
|
||||
setCompletionDialogOpen(false);
|
||||
toast.success('Habit completed.');
|
||||
} catch (error) {
|
||||
console.error('Failed to log habit:', error);
|
||||
toast.error('Unable to save habit completion. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
const completedCount = habits.filter((h) => h.logged_today).length;
|
||||
const completionRate =
|
||||
habits.length > 0 ? Math.round((completedCount / habits.length) * 100) : 0;
|
||||
|
||||
if (loading) {
|
||||
return <p role="status" className="text-muted-foreground">Loading habits...</p>;
|
||||
}
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
const { open, openCreate, closeCreate } = useCreateDialogStore();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Habits</h1>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
Small actions, visible momentum.
|
||||
</p>
|
||||
<p className="mt-1 text-muted-foreground">Build consistency, one day at a time.</p>
|
||||
</div>
|
||||
<Button onClick={() => setCreateOpen(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
New habit
|
||||
<Button onClick={() => openCreate("habit")}>
|
||||
<Plus className="mr-2 h-4 w-4" aria-hidden="true" /> New habit
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div role="alert" className="mb-6 flex items-center justify-between gap-4 rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
|
||||
<span>{error}</span>
|
||||
<Button variant="outline" size="sm" onClick={fetchHabits}>Retry</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Summary banner */}
|
||||
<Card className="mb-6">
|
||||
<CardContent className="flex items-center justify-between p-6">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Today's progress</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{completedCount} / {habits.length} habits
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-muted-foreground">Completion rate</p>
|
||||
<p className="text-2xl font-bold">{completionRate}%</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Habit cards grid */}
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{habits.length === 0 && !error ? (
|
||||
<Card className="md:col-span-2 lg:col-span-3">
|
||||
<CardContent className="py-10 text-center">
|
||||
<p className="text-muted-foreground">No habits yet. Start with one small action.</p>
|
||||
<Button className="mt-4" onClick={() => setCreateOpen(true)}>Create a habit</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : habits.map((habit) => (
|
||||
<HabitCard
|
||||
key={habit.id}
|
||||
habit={habit}
|
||||
onComplete={() => handleComplete(habit)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Heatmap section */}
|
||||
<Card className="mt-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Flame className="h-5 w-5 text-orange-500" aria-hidden="true" />
|
||||
Consistency Overview
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="h-[150px] animate-pulse rounded-lg bg-muted/30" />
|
||||
}
|
||||
>
|
||||
<HabitHeatmap habits={habits} />
|
||||
</Suspense>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Completion dialog */}
|
||||
{selectedHabit && (
|
||||
<HabitCompletionDialog
|
||||
habit={selectedHabit}
|
||||
open={completionDialogOpen}
|
||||
onOpenChange={setCompletionDialogOpen}
|
||||
onSubmit={(data) => logHabitCompletion(selectedHabit.id, data)}
|
||||
/>
|
||||
)}
|
||||
<CreateItemDialog
|
||||
type="habit"
|
||||
open={createOpen}
|
||||
onOpenChange={handleCreateOpenChange}
|
||||
onCreated={fetchHabits}
|
||||
/>
|
||||
<HabitCard key={refreshKey} />
|
||||
<CreateItemDialog type="habit" open={open} onOpenChange={(o) => (o ? openCreate("habit") : closeCreate())} onCreated={() => setRefreshKey((k) => k + 1)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -65,6 +65,8 @@ interface Backlink {
|
||||
export default function NotesPage() {
|
||||
const [notes, setNotes] = useState<Note[]>([]);
|
||||
const [selectedNote, setSelectedNote] = useState<Note | null>(null);
|
||||
const [domainForCreate, setDomainForCreate] = useState('personal');
|
||||
const [domainOptions, setDomainOptions] = useState<{id: string; name: string}[]>([]);
|
||||
const [backlinks, setBacklinks] = useState<Backlink[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -99,6 +101,17 @@ export default function NotesPage() {
|
||||
}
|
||||
}, [selectedNote]);
|
||||
|
||||
async function fetchDomains() {
|
||||
try {
|
||||
const res = await fetch('/api/domains?sort=sort_order');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setDomainOptions(data.items || []);
|
||||
if (data.items?.length > 0) setDomainForCreate(data.items[0].id);
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async function fetchNotes() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
@@ -141,7 +154,7 @@ export default function NotesPage() {
|
||||
body: JSON.stringify({
|
||||
title: 'Untitled note',
|
||||
content: '',
|
||||
domain: 'personal',
|
||||
domain: domainForCreate,
|
||||
}),
|
||||
});
|
||||
if (!response.ok) throw new Error('Unable to create note.');
|
||||
@@ -304,7 +317,7 @@ export default function NotesPage() {
|
||||
{new Date(note.updated).toLocaleDateString()}
|
||||
</p>
|
||||
<Badge variant="outline" className="mt-1 text-xs">
|
||||
{note.domain}
|
||||
{domainOptions.find(d => d.id === note.domain)?.name || note.domain}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,205 +1,102 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Plus, FolderKanban } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import Link from 'next/link';
|
||||
import { CreateItemDialog } from '@/components/create-item-dialog';
|
||||
import { useEffect, useState } from "react";
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
|
||||
import { toast } from "sonner";
|
||||
import Link from "next/link";
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
status: 'active' | 'paused' | 'archived';
|
||||
domain: string;
|
||||
progress: number;
|
||||
task_count: number;
|
||||
completed_count: number;
|
||||
due_date?: string;
|
||||
status?: string;
|
||||
}
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [deleteId, setDeleteId] = useState<string | null>(null);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProjects();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (new URLSearchParams(window.location.search).get('new') === 'true') setCreateOpen(true);
|
||||
}, []);
|
||||
|
||||
function handleCreateOpenChange(open: boolean) {
|
||||
setCreateOpen(open);
|
||||
if (!open && new URLSearchParams(window.location.search).get('new') === 'true') {
|
||||
window.history.replaceState(null, '', '/projects');
|
||||
}
|
||||
}
|
||||
useEffect(() => { fetchProjects(); fetchDomains(); }, []);
|
||||
|
||||
async function fetchProjects() {
|
||||
try {
|
||||
setError(null);
|
||||
const response = await fetch('/api/projects?sort=-created');
|
||||
if (!response.ok) throw new Error('Unable to load projects.');
|
||||
const data = await response.json();
|
||||
const res = await fetch("/api/projects?sort=-created");
|
||||
const data = await res.json();
|
||||
setProjects(data.items || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch projects:', error);
|
||||
setError('Unable to load projects. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
} catch { toast.error("Unable to load projects"); }
|
||||
finally { setLoading(false); }
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <p role="status" className="text-muted-foreground">Loading projects...</p>;
|
||||
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 {}
|
||||
}
|
||||
|
||||
const activeProjects = projects.filter((p) => p.status === 'active');
|
||||
const pausedProjects = projects.filter((p) => p.status === 'paused');
|
||||
const archivedProjects = projects.filter((p) => p.status === 'archived');
|
||||
async function handleDelete(id: string) {
|
||||
setDeleting(true);
|
||||
try {
|
||||
const res = await fetch(`/api/projects/${id}`, { method: "DELETE" });
|
||||
if (!res.ok) throw new Error();
|
||||
toast.success("Project deleted");
|
||||
setProjects((p) => p.filter((x) => x.id !== id));
|
||||
} catch { toast.error("Unable to delete project"); }
|
||||
finally { setDeleting(false); setDeleteId(null); }
|
||||
}
|
||||
|
||||
if (loading) return <p className="text-muted-foreground">Loading projects...</p>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Projects</h1>
|
||||
<p className="mt-1 text-muted-foreground">Every outcome has a home.</p>
|
||||
<p className="mt-1 text-muted-foreground">Plan and track your work.</p>
|
||||
</div>
|
||||
<Button onClick={() => setCreateOpen(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
New project
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div role="alert" className="mb-6 flex items-center justify-between gap-4 rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
|
||||
<span>{error}</span>
|
||||
<Button variant="outline" size="sm" onClick={fetchProjects}>Retry</Button>
|
||||
{projects.length === 0 ? <p className="text-muted-foreground">No projects yet.</p> : (
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{projects.map((p) => (
|
||||
<Card key={p.id} className="hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<Link href={`/projects/${p.id}`} className="flex-1 text-left font-medium hover:underline">{p.name}</Link>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 shrink-0 text-destructive" onClick={() => setDeleteId(p.id)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center gap-2">
|
||||
<Badge variant="outline" className="text-xs">{domainMap.get(p.domain) || p.domain}</Badge>
|
||||
{p.status && <Badge variant="secondary" className="text-xs">{p.status}</Badge>}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Active projects */}
|
||||
{activeProjects.length > 0 && (
|
||||
<section className="mb-8">
|
||||
<h2 className="mb-4 text-lg font-semibold">Active Projects</h2>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{activeProjects.map((project) => (
|
||||
<ProjectCard key={project.id} project={project} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Paused projects */}
|
||||
{pausedProjects.length > 0 && (
|
||||
<section className="mb-8">
|
||||
<h2 className="mb-4 text-lg font-semibold">Paused Projects</h2>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{pausedProjects.map((project) => (
|
||||
<ProjectCard key={project.id} project={project} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Archived projects */}
|
||||
{archivedProjects.length > 0 && (
|
||||
<section>
|
||||
<h2 className="mb-4 text-lg font-semibold">Archived Projects</h2>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{archivedProjects.map((project) => (
|
||||
<ProjectCard key={project.id} project={project} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{projects.length === 0 && (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<FolderKanban className="mb-4 h-12 w-12 text-muted-foreground" aria-hidden="true" />
|
||||
<p className="text-lg font-semibold">No projects yet</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Create your first project to get started
|
||||
</p>
|
||||
<Button className="mt-4" onClick={() => setCreateOpen(true)}>Create a project</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
<CreateItemDialog
|
||||
type="project"
|
||||
open={createOpen}
|
||||
onOpenChange={handleCreateOpenChange}
|
||||
onCreated={fetchProjects}
|
||||
/>
|
||||
<AlertDialog open={!!deleteId} onOpenChange={(o) => !o && setDeleteId(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete project?</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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProjectCard({ project }: { project: Project }) {
|
||||
return (
|
||||
<Link href={`/projects/${project.id}`}>
|
||||
<Card className="h-full transition-shadow hover:shadow-md">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-base">{project.name}</CardTitle>
|
||||
{project.description && (
|
||||
<p className="mt-1 text-sm text-muted-foreground line-clamp-2">
|
||||
{project.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Badge
|
||||
variant={
|
||||
project.status === 'active'
|
||||
? 'default'
|
||||
: project.status === 'paused'
|
||||
? 'secondary'
|
||||
: 'outline'
|
||||
}
|
||||
className="ml-2 shrink-0"
|
||||
>
|
||||
{project.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{/* Progress */}
|
||||
<div>
|
||||
<div className="mb-1 flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground">Progress</span>
|
||||
<span className="font-semibold">{project.progress}%</span>
|
||||
</div>
|
||||
<Progress value={project.progress} className="h-2" aria-label={`${project.name} progress: ${project.progress}%`} />
|
||||
</div>
|
||||
|
||||
{/* Task count */}
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Tasks</span>
|
||||
<span className="font-semibold">
|
||||
{project.completed_count} / {project.task_count}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Domain and due date */}
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<Badge variant="outline">{project.domain}</Badge>
|
||||
{project.due_date && (
|
||||
<span className="text-muted-foreground">
|
||||
Due: {new Date(project.due_date).toLocaleDateString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,72 +1,41 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { LayoutGrid, List, Plus } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { TasksKanbanView } from '@/components/tasks/tasks-kanban-view';
|
||||
import { TasksListView } from '@/components/tasks/tasks-list-view';
|
||||
import { CreateItemDialog } from '@/components/create-item-dialog';
|
||||
import { useState } from "react";
|
||||
import { LayoutGrid, List, Plus } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { TasksKanbanView } from "@/components/tasks/tasks-kanban-view";
|
||||
import { TasksListView } from "@/components/tasks/tasks-list-view";
|
||||
import { CreateItemDialog } from "@/components/create-item-dialog";
|
||||
import { useCreateDialogStore } from "@/lib/stores/use-create-dialog-store";
|
||||
|
||||
export default function TasksPage() {
|
||||
const [view, setView] = useState<'kanban' | 'list'>('kanban');
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [view, setView] = useState<"kanban" | "list">("kanban");
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (new URLSearchParams(window.location.search).get('new') === 'true') setCreateOpen(true);
|
||||
}, []);
|
||||
|
||||
function handleCreateOpenChange(open: boolean) {
|
||||
setCreateOpen(open);
|
||||
if (!open && new URLSearchParams(window.location.search).get('new') === 'true') {
|
||||
window.history.replaceState(null, '', '/tasks');
|
||||
}
|
||||
}
|
||||
const { open, openCreate, closeCreate } = useCreateDialogStore();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Tasks</h1>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
Move work forward without losing the thread.
|
||||
</p>
|
||||
<p className="mt-1 text-muted-foreground">Move work forward without losing the thread.</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button onClick={() => setCreateOpen(true)}>
|
||||
<Button onClick={() => openCreate("task")}>
|
||||
<Plus className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
New task
|
||||
</Button>
|
||||
<Tabs
|
||||
value={view}
|
||||
onValueChange={(v) => setView(v as 'kanban' | 'list')}
|
||||
>
|
||||
<Tabs value={view} onValueChange={(v) => setView(v as "kanban" | "list")}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="kanban" className="gap-2">
|
||||
<LayoutGrid className="h-4 w-4" aria-hidden="true" />
|
||||
Board
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="list" className="gap-2">
|
||||
<List className="h-4 w-4" aria-hidden="true" />
|
||||
List
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="kanban" className="gap-2"><LayoutGrid className="h-4 w-4" aria-hidden="true" /> Board</TabsTrigger>
|
||||
<TabsTrigger value="list" className="gap-2"><List className="h-4 w-4" aria-hidden="true" /> List</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{view === 'kanban' ? (
|
||||
<TasksKanbanView key={refreshKey} />
|
||||
) : (
|
||||
<TasksListView key={refreshKey} />
|
||||
)}
|
||||
<CreateItemDialog
|
||||
type="task"
|
||||
open={createOpen}
|
||||
onOpenChange={handleCreateOpenChange}
|
||||
onCreated={() => setRefreshKey((key) => key + 1)}
|
||||
/>
|
||||
{view === "kanban" ? <TasksKanbanView key={refreshKey} /> : <TasksListView key={refreshKey} />}
|
||||
<CreateItemDialog type="task" open={open} onOpenChange={(o) => (o ? openCreate("task") : closeCreate())} onCreated={() => setRefreshKey((k) => k + 1)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -43,13 +43,15 @@ export async function GET(request: NextRequest) {
|
||||
|
||||
await server.connect(transport);
|
||||
|
||||
// Store transport for POST requests
|
||||
// Handle the request first — sessionId is set during handleRequest
|
||||
const response = await transport.handleRequest(request);
|
||||
|
||||
// Store transport AFTER handleRequest sets the session ID
|
||||
if (transport.sessionId) {
|
||||
transports.set(transport.sessionId, transport);
|
||||
}
|
||||
|
||||
// Handle the request
|
||||
return transport.handleRequest(request);
|
||||
return response;
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
@@ -84,12 +86,15 @@ export async function POST(request: NextRequest) {
|
||||
|
||||
await server.connect(transport);
|
||||
|
||||
// Store transport for subsequent requests
|
||||
// Handle the request first — sessionId is set during handleRequest
|
||||
const response = await transport.handleRequest(request);
|
||||
|
||||
// Store transport AFTER handleRequest sets the session ID
|
||||
if (transport.sessionId) {
|
||||
transports.set(transport.sessionId, transport);
|
||||
}
|
||||
|
||||
return transport.handleRequest(request);
|
||||
return response;
|
||||
}
|
||||
|
||||
export async function DELETE(request: NextRequest) {
|
||||
@@ -124,4 +129,4 @@ export async function DELETE(request: NextRequest) {
|
||||
transports.delete(sessionId);
|
||||
|
||||
return response;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
@@ -12,6 +12,13 @@ import {
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
|
||||
type ItemType = 'task' | 'project' | 'habit';
|
||||
|
||||
@@ -21,6 +28,12 @@ const labels = {
|
||||
habit: { title: 'New habit', field: 'Habit name' },
|
||||
} as const;
|
||||
|
||||
interface Domain {
|
||||
id: string;
|
||||
name: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export function CreateItemDialog({
|
||||
type,
|
||||
open,
|
||||
@@ -33,11 +46,29 @@ export function CreateItemDialog({
|
||||
onCreated: () => void;
|
||||
}) {
|
||||
const [name, setName] = useState('');
|
||||
const [domain, setDomain] = useState('General');
|
||||
const [domain, setDomain] = useState('');
|
||||
const [domains, setDomains] = useState<Domain[]>([]);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const copy = labels[type];
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
fetch('/api/domains?sort=sort_order')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const items = data.items || [];
|
||||
setDomains(items);
|
||||
if (items.length > 0 && !domain) {
|
||||
setDomain(items[0].id);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
setDomains([]);
|
||||
});
|
||||
}
|
||||
}, [open]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
setSubmitting(true);
|
||||
@@ -100,19 +131,35 @@ export function CreateItemDialog({
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={`${type}-domain`}>Domain</Label>
|
||||
<Input
|
||||
id={`${type}-domain`}
|
||||
value={domain}
|
||||
onChange={(event) => setDomain(event.target.value)}
|
||||
required
|
||||
/>
|
||||
{domains.length > 0 ? (
|
||||
<Select value={domain} onValueChange={setDomain}>
|
||||
<SelectTrigger id={`${type}-domain`}>
|
||||
<SelectValue placeholder="Select a domain" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{domains.map((d) => (
|
||||
<SelectItem key={d.id} value={d.id}>
|
||||
<span
|
||||
className="mr-2 inline-block h-3 w-3 rounded-full"
|
||||
style={{ backgroundColor: d.color }}
|
||||
/>
|
||||
{d.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No domains found. Create one in Settings first.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{error && <p className="text-sm text-destructive" role="alert">{error}</p>}
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={submitting}>
|
||||
<Button type="submit" disabled={submitting || !domain}>
|
||||
{submitting ? 'Creating...' : `Create ${type}`}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
@@ -120,4 +167,4 @@ export function CreateItemDialog({
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -14,9 +14,12 @@ interface Task {
|
||||
domain: string;
|
||||
}
|
||||
|
||||
interface Domain { id: string; name: string; color: string; }
|
||||
|
||||
export function TodayTasksWidget() {
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
|
||||
|
||||
useEffect(() => {
|
||||
fetchTasks();
|
||||
@@ -97,7 +100,7 @@ export function TodayTasksWidget() {
|
||||
{task.title}
|
||||
</span>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{task.domain}
|
||||
{domainMap.get(task.domain) || task.domain}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -27,6 +27,7 @@ interface Domain {
|
||||
export function SettingsDomains() {
|
||||
const [domains, setDomains] = useState<Domain[]>([]);
|
||||
const [newDomainName, setNewDomainName] = useState('');
|
||||
const [newDomainColor, setNewDomainColor] = useState('#3b82f6');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
@@ -150,14 +151,25 @@ export function SettingsDomains() {
|
||||
<label htmlFor="new-domain-name" className="sr-only">
|
||||
New domain name
|
||||
</label>
|
||||
<Input
|
||||
id="new-domain-name"
|
||||
placeholder="New domain name"
|
||||
value={newDomainName}
|
||||
onChange={(e) => setNewDomainName(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && addDomain()}
|
||||
disabled={creating}
|
||||
/>
|
||||
<div className="flex gap-2 flex-1">
|
||||
<Input
|
||||
id="new-domain-name"
|
||||
placeholder="New domain name"
|
||||
value={newDomainName}
|
||||
onChange={(e) => setNewDomainName(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && addDomain()}
|
||||
disabled={creating}
|
||||
className="flex-1"
|
||||
/>
|
||||
<input
|
||||
type="color"
|
||||
value={newDomainColor}
|
||||
onChange={(e) => setNewDomainColor(e.target.value)}
|
||||
className="h-10 w-10 cursor-pointer rounded border"
|
||||
title="Domain color"
|
||||
disabled={creating}
|
||||
/>
|
||||
</div>
|
||||
<Button onClick={addDomain} disabled={creating || !newDomainName.trim()}>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
{creating ? 'Adding...' : 'Add'}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
Sheet,
|
||||
@@ -60,6 +60,11 @@ export function TaskDetailPanel({
|
||||
const [status, setStatus] = useState(task.status);
|
||||
const [priority, setPriority] = useState(task.priority);
|
||||
const [domain, setDomain] = useState(task.domain);
|
||||
const [domains, setDomains] = useState<{id: string; name: string}[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/domains?sort=sort_order').then(r => r.json()).then(data => setDomains(data.items || [])).catch(() => {});
|
||||
}, []);
|
||||
const [dueDate, setDueDate] = useState(task.due_date || '');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
@@ -185,9 +190,9 @@ export function TaskDetailPanel({
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="personal">Personal</SelectItem>
|
||||
<SelectItem value="work">Work</SelectItem>
|
||||
<SelectItem value="ots">OTS</SelectItem>
|
||||
{domains.map((d) => (
|
||||
<SelectItem key={d.id} value={d.id}>{d.name}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
@@ -40,6 +40,12 @@ interface Task {
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
interface Domain {
|
||||
id: string;
|
||||
name: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ id: 'todo', title: 'To Do', color: 'bg-slate-500' },
|
||||
{ id: 'in_progress', title: 'In Progress', color: 'bg-blue-500' },
|
||||
@@ -48,10 +54,12 @@ const columns = [
|
||||
|
||||
function DraggableTask({
|
||||
task,
|
||||
domainName,
|
||||
onClick,
|
||||
onStatusChange
|
||||
}: {
|
||||
task: Task;
|
||||
domainName: string;
|
||||
onClick: () => void;
|
||||
onStatusChange: (task: Task, status: Task['status']) => void;
|
||||
}) {
|
||||
@@ -127,9 +135,11 @@ function DraggableTask({
|
||||
>
|
||||
{task.priority}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{task.domain}
|
||||
</Badge>
|
||||
{domainName && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{domainName}
|
||||
</Badge>
|
||||
)}
|
||||
{task.due_date && (
|
||||
<span className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<Calendar className="h-3 w-3" />
|
||||
@@ -148,6 +158,7 @@ function DroppableColumn({
|
||||
title,
|
||||
color,
|
||||
tasks,
|
||||
domainMap,
|
||||
onTaskClick,
|
||||
onStatusChange
|
||||
}: {
|
||||
@@ -155,6 +166,7 @@ function DroppableColumn({
|
||||
title: string;
|
||||
color: string;
|
||||
tasks: Task[];
|
||||
domainMap: Map<string, string>;
|
||||
onTaskClick: (task: Task) => void;
|
||||
onStatusChange: (task: Task, status: Task['status']) => void;
|
||||
}) {
|
||||
@@ -179,6 +191,7 @@ function DroppableColumn({
|
||||
<DraggableTask
|
||||
key={task.id}
|
||||
task={task}
|
||||
domainName={domainMap.get(task.domain) || task.domain}
|
||||
onClick={() => onTaskClick(task)}
|
||||
onStatusChange={onStatusChange}
|
||||
/>
|
||||
@@ -190,6 +203,7 @@ function DroppableColumn({
|
||||
|
||||
export function TasksKanbanView() {
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [activeTask, setActiveTask] = useState<Task | null>(null);
|
||||
const [selectedTask, setSelectedTask] = useState<Task | null>(null);
|
||||
@@ -202,6 +216,7 @@ export function TasksKanbanView() {
|
||||
|
||||
useEffect(() => {
|
||||
fetchTasks();
|
||||
fetchDomains();
|
||||
}, []);
|
||||
|
||||
async function fetchTasks() {
|
||||
@@ -220,6 +235,21 @@ export function TasksKanbanView() {
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchDomains() {
|
||||
try {
|
||||
const response = await fetch('/api/domains?sort=sort_order');
|
||||
if (!response.ok) return;
|
||||
const data = await response.json();
|
||||
const map = new Map<string, string>();
|
||||
for (const d of data.items || []) {
|
||||
map.set(d.id, d.name);
|
||||
}
|
||||
setDomainMap(map);
|
||||
} catch {
|
||||
// Non-critical — domains will show as raw IDs
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDragEnd(event: DragEndEvent) {
|
||||
const { active, over } = event;
|
||||
if (!over) {
|
||||
@@ -282,6 +312,7 @@ export function TasksKanbanView() {
|
||||
title={column.title}
|
||||
color={column.color}
|
||||
tasks={tasks.filter((t) => t.status === column.id)}
|
||||
domainMap={domainMap}
|
||||
onTaskClick={setSelectedTask}
|
||||
onStatusChange={updateTaskStatus}
|
||||
/>
|
||||
@@ -308,4 +339,4 @@ export function TasksKanbanView() {
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -16,6 +16,22 @@ import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
|
||||
import { Calendar, MoreHorizontal } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { TaskDetailPanel } from './task-detail-panel';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
|
||||
interface Task {
|
||||
id: string;
|
||||
@@ -33,6 +49,8 @@ export function TasksListView() {
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedTask, setSelectedTask] = useState<Task | null>(null);
|
||||
const [deleteId, setDeleteId] = useState<string | null>(null);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchTasks();
|
||||
@@ -156,6 +174,32 @@ export function TasksListView() {
|
||||
<ScrollBar orientation="horizontal" />
|
||||
</ScrollArea>
|
||||
|
||||
<AlertDialog open={!!deleteId} onOpenChange={(o) => !o && setDeleteId(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete task?</AlertDialogTitle>
|
||||
<AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={async () => {
|
||||
if (!deleteId) return;
|
||||
setDeleting(true);
|
||||
try {
|
||||
const res = await fetch("/api/tasks/" + deleteId, { method: 'DELETE' });
|
||||
if (!res.ok) throw new Error();
|
||||
toast.success("Task deleted");
|
||||
setDeleteId(null);
|
||||
fetchTasks();
|
||||
} catch { toast.error("Unable to delete task"); }
|
||||
finally { setDeleting(false); setDeleteId(null); }
|
||||
}} disabled={deleting}>
|
||||
{deleting ? 'Deleting...' : 'Delete'}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{selectedTask && (
|
||||
<TaskDetailPanel
|
||||
task={selectedTask}
|
||||
|
||||
@@ -1,73 +1,47 @@
|
||||
'use client';
|
||||
|
||||
import { Search, Bell, Plus, Menu } from 'lucide-react';
|
||||
import { usePathname, useRouter } from 'next/navigation';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useSidebarStore } from '@/lib/stores/use-sidebar-store';
|
||||
import { useCreateDialogStore } from '@/lib/stores/use-create-dialog-store';
|
||||
import { CommandPalette } from '@/components/command-palette';
|
||||
|
||||
export function TopBar() {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const { setMobileOpen } = useSidebarStore();
|
||||
const creation = pathname.startsWith('/projects')
|
||||
? { href: '/projects?new=true', label: 'New project' }
|
||||
: pathname.startsWith('/habits')
|
||||
? { href: '/habits?new=true', label: 'New habit' }
|
||||
: pathname.startsWith('/tasks')
|
||||
? { href: '/tasks?new=true', label: 'New task' }
|
||||
: null;
|
||||
const openCreate = useCreateDialogStore((s) => s.openCreate);
|
||||
|
||||
function handleCreate() {
|
||||
if (pathname.startsWith('/projects')) openCreate('project');
|
||||
else if (pathname.startsWith('/habits')) openCreate('habit');
|
||||
else if (pathname.startsWith('/tasks')) openCreate('task');
|
||||
else {
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
|
||||
}
|
||||
}
|
||||
|
||||
const label = pathname.startsWith('/projects') ? 'New project'
|
||||
: pathname.startsWith('/habits') ? 'New habit'
|
||||
: pathname.startsWith('/tasks') ? 'New task' : 'Quick add';
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="sticky top-0 z-10 flex h-14 items-center gap-4 border-b bg-card px-6" role="banner">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="md:hidden"
|
||||
onClick={() => setMobileOpen(true)}
|
||||
aria-label="Open navigation menu"
|
||||
>
|
||||
<Button variant="ghost" size="icon" className="md:hidden" onClick={() => setMobileOpen(true)} aria-label="Open navigation menu">
|
||||
<Menu className="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
{/* Search / Command trigger */}
|
||||
<div className="flex-1 md:max-w-sm">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start text-muted-foreground"
|
||||
onClick={() => {
|
||||
document.dispatchEvent(
|
||||
new KeyboardEvent('keydown', { key: 'k', metaKey: true })
|
||||
);
|
||||
}}
|
||||
aria-label="Open search (Cmd+K)"
|
||||
>
|
||||
<Button variant="outline" className="w-full justify-start text-muted-foreground" onClick={() => document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }))} aria-label="Open search (Cmd+K)">
|
||||
<Search className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Search or jump to...
|
||||
<kbd className="ml-auto pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
|
||||
⌘K
|
||||
</kbd>
|
||||
Search or jump to... <kbd className="ml-auto pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">⌘K</kbd>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="ml-auto flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
if (creation) {
|
||||
router.push(creation.href);
|
||||
return;
|
||||
}
|
||||
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
|
||||
}}
|
||||
aria-label={creation ? `Create ${creation.label.toLowerCase()}` : 'Quick add'}
|
||||
>
|
||||
<Button variant="outline" size="sm" onClick={handleCreate} aria-label={label === 'Quick add' ? 'Quick add' : `Create ${label.toLowerCase()}`}>
|
||||
<Plus className="mr-1 h-4 w-4" aria-hidden="true" />
|
||||
{creation?.label ?? 'Quick add'}
|
||||
{label}
|
||||
</Button>
|
||||
|
||||
<Button variant="ghost" size="icon" aria-label="Notifications">
|
||||
<Bell className="h-5 w-5" aria-hidden="true" />
|
||||
</Button>
|
||||
|
||||
@@ -1,3 +1,16 @@
|
||||
/**
|
||||
* PocketBase Compatibility Layer
|
||||
*
|
||||
* This module was originally written for PocketBase. After the migration to
|
||||
* PostgreSQL + Drizzle ORM (commit 7333548), all functions now delegate to
|
||||
* the new `database.ts` module which uses the Drizzle ORM with postgres-js.
|
||||
*
|
||||
* The naming is preserved for backward compatibility — ALL API route files
|
||||
* import from this module. Do not rename the exports unless you also update
|
||||
* every file that imports them.
|
||||
*
|
||||
* @see ./database.ts for the actual Drizzle ORM implementation.
|
||||
*/
|
||||
import { createAdminClient as createDatabaseAdminClient, createDatabaseClient } from './database';
|
||||
|
||||
/** @deprecated Import from `@/lib/database` in new code. */
|
||||
|
||||
@@ -4,3 +4,4 @@ export { useDashboardStore } from './use-dashboard-store';
|
||||
export { useTimerStore } from './use-timer-store';
|
||||
export { useFilterStore } from './use-filter-store';
|
||||
export { useKeyboardShortcutsStore } from './use-keyboard-shortcuts-store';
|
||||
export { useCreateDialogStore } from './use-create-dialog-store';
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import { create } from "zustand";
|
||||
|
||||
type ItemType = "task" | "project" | "habit" | null;
|
||||
|
||||
interface CreateDialogState {
|
||||
type: ItemType;
|
||||
open: boolean;
|
||||
openCreate: (type: ItemType) => void;
|
||||
closeCreate: () => void;
|
||||
}
|
||||
|
||||
export const useCreateDialogStore = create<CreateDialogState>((set) => ({
|
||||
type: null,
|
||||
open: false,
|
||||
openCreate: (type: ItemType) => set({ type, open: true }),
|
||||
closeCreate: () => set({ type: null, open: false }),
|
||||
}));
|
||||
Generated
+1
-12
@@ -1313,9 +1313,6 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -1332,9 +1329,6 @@
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -1351,9 +1345,6 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -1370,9 +1361,6 @@
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
@@ -7050,6 +7038,7 @@
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
|
||||
Reference in New Issue
Block a user