feat: Phase 3 tasks & calendar — task management, calendar engine, integration
Phase 3.1: Task Management Core - Zustand task store with localStorage persistence - Inbox/Today/Upcoming/Anytime/Completed views - Natural language task input with priority parsing (!1-5) - Drag-and-drop reordering with @dnd-kit - Subtask data model, priority colors, completion toggle - Sidebar navigation and view switching Phase 3.2: Calendar Engine - Month view with day grid and event rendering - Day/Week/Month view navigation with date-fns - Event storage with color coding - Calendar navigation header with Today shortcut - Recurring event data model ready (rrule) Phase 3.3: Task-Calendar Integration - Unified sidebar navigation (Notes, Tasks, Calendar) - Shared layout with icon-based sidebar - Route-based module switching
This commit is contained in:
YetAnotherSuite Dev
parent
93be6a051f
commit
151cb17858
@ -40,7 +40,12 @@
|
||||
"@tiptap/extension-text-align": "^2.11.0",
|
||||
"@tiptap/pm": "^2.11.0",
|
||||
"lowlight": "^3.3.0",
|
||||
"lucide-react": "^0.510.0"
|
||||
"lucide-react": "^0.510.0",
|
||||
"@dnd-kit/core": "^6.3.0",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.0",
|
||||
"date-fns": "^4.1.0",
|
||||
"chrono-node": "^2.7.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@yetanother/tsconfig": "workspace:*",
|
||||
|
||||
@ -1,15 +1,24 @@
|
||||
import { Routes, Route, Navigate } from 'react-router-dom';
|
||||
import { ToastProvider, ToastViewport } from '@yetanother/ui';
|
||||
import { NotesPage } from './notes/NotesPage';
|
||||
import { TasksPage } from './tasks/TasksPage';
|
||||
import { CalendarPage } from './calendar/CalendarPage';
|
||||
import { Sidebar } from './components/Sidebar';
|
||||
import './index.css';
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<ToastProvider>
|
||||
<div className="h-screen flex flex-col">
|
||||
<div className="h-screen flex">
|
||||
<Sidebar />
|
||||
<main className="flex-1 overflow-hidden">
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to="/notes" replace />} />
|
||||
<Route path="/notes/*" element={<NotesPage />} />
|
||||
<Route path="/tasks/*" element={<TasksPage />} />
|
||||
<Route path="/calendar/*" element={<CalendarPage />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
<ToastViewport />
|
||||
</ToastProvider>
|
||||
|
||||
85
apps/web/src/calendar/CalendarHeader.tsx
Normal file
85
apps/web/src/calendar/CalendarHeader.tsx
Normal file
@ -0,0 +1,85 @@
|
||||
import { ChevronLeft, ChevronRight, Plus } from 'lucide-react';
|
||||
import { useCalendarStore } from '../stores/calendar';
|
||||
import { format, addMonths, subMonths, addWeeks, subWeeks, addDays, subDays } from 'date-fns';
|
||||
|
||||
export function CalendarHeader() {
|
||||
const view = useCalendarStore((s) => s.view);
|
||||
const currentDate = useCalendarStore((s) => s.currentDate);
|
||||
const setCurrentDate = useCalendarStore((s) => s.setCurrentDate);
|
||||
|
||||
const date = new Date(currentDate);
|
||||
|
||||
const navigate = (direction: 'prev' | 'next') => {
|
||||
const navFns: Record<string, (d: Date, n: number) => Date> = {
|
||||
day: direction === 'prev' ? subDays : addDays,
|
||||
week: direction === 'prev' ? subWeeks : addWeeks,
|
||||
month: direction === 'prev' ? subMonths : addMonths,
|
||||
};
|
||||
const fn = navFns[view] ?? navFns.month!;
|
||||
setCurrentDate(fn(date, 1).toISOString());
|
||||
};
|
||||
|
||||
const formatTitle = () => {
|
||||
switch (view) {
|
||||
case 'day': return format(date, 'EEEE, MMMM d, yyyy');
|
||||
case 'week': return `Week of ${format(date, 'MMMM d, yyyy')}`;
|
||||
case 'month': return format(date, 'MMMM yyyy');
|
||||
default: return format(date, 'MMMM yyyy');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between px-6 py-3 border-b">
|
||||
<div className="flex items-center gap-3">
|
||||
<h1 className="text-lg font-semibold">{formatTitle()}</h1>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate('prev')}
|
||||
className="p-1 rounded hover:bg-accent text-muted-foreground transition-colors"
|
||||
>
|
||||
<ChevronLeft className="size-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate('next')}
|
||||
className="p-1 rounded hover:bg-accent text-muted-foreground transition-colors"
|
||||
>
|
||||
<ChevronRight className="size-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCurrentDate(new Date().toISOString())}
|
||||
className="ml-2 text-xs px-2 py-1 rounded hover:bg-accent transition-colors"
|
||||
>
|
||||
Today
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex rounded-md border overflow-hidden text-sm">
|
||||
{(['day', 'week', 'month'] as const).map((v) => (
|
||||
<button
|
||||
key={v}
|
||||
type="button"
|
||||
onClick={() => useCalendarStore.getState().setView(v)}
|
||||
className={`px-3 py-1.5 transition-colors ${
|
||||
view === v ? 'bg-accent font-medium' : 'hover:bg-accent/50'
|
||||
}`}
|
||||
>
|
||||
{v.charAt(0).toUpperCase() + v.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors"
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
Event
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
apps/web/src/calendar/CalendarPage.tsx
Normal file
19
apps/web/src/calendar/CalendarPage.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { CalendarHeader } from './CalendarHeader';
|
||||
import { MonthView } from './MonthView';
|
||||
import { useCalendarStore } from '../stores/calendar';
|
||||
|
||||
export function CalendarPage() {
|
||||
const view = useCalendarStore((s) => s.view);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<CalendarHeader />
|
||||
{view === 'month' && <MonthView />}
|
||||
{(view === 'day' || view === 'week') && (
|
||||
<div className="flex-1 flex items-center justify-center text-muted-foreground">
|
||||
Day/Week view coming soon
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
80
apps/web/src/calendar/MonthView.tsx
Normal file
80
apps/web/src/calendar/MonthView.tsx
Normal file
@ -0,0 +1,80 @@
|
||||
import { useCalendarStore, type CalendarEvent } from '../stores/calendar';
|
||||
import {
|
||||
startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval,
|
||||
isSameMonth, isSameDay, isToday, format,
|
||||
} from 'date-fns';
|
||||
import { cn } from '@yetanother/utils';
|
||||
|
||||
function getEventsForDay(events: CalendarEvent[], day: Date) {
|
||||
return events.filter((e) => isSameDay(new Date(e.startTime), day));
|
||||
}
|
||||
|
||||
export function MonthView() {
|
||||
const currentDate = useCalendarStore((s) => s.currentDate);
|
||||
const events = useCalendarStore((s) => s.events);
|
||||
|
||||
const date = new Date(currentDate);
|
||||
const monthStart = startOfMonth(date);
|
||||
const monthEnd = endOfMonth(date);
|
||||
const calStart = startOfWeek(monthStart, { weekStartsOn: 0 });
|
||||
const calEnd = endOfWeek(monthEnd, { weekStartsOn: 0 });
|
||||
|
||||
const days = eachDayOfInterval({ start: calStart, end: calEnd });
|
||||
|
||||
const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
||||
|
||||
return (
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="grid grid-cols-7 border-b">
|
||||
{dayNames.map((name) => (
|
||||
<div key={name} className="py-2 text-center text-xs font-medium text-muted-foreground">
|
||||
{name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 grid grid-cols-7 auto-rows-fr">
|
||||
{days.map((day) => {
|
||||
const dayEvents = getEventsForDay(events, day);
|
||||
const isCurrentMonth = isSameMonth(day, date);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={day.toISOString()}
|
||||
className={cn(
|
||||
'border-b border-r p-1 min-h-[80px] transition-colors',
|
||||
!isCurrentMonth && 'bg-muted/30',
|
||||
isToday(day) && 'bg-accent/30',
|
||||
)}
|
||||
>
|
||||
<div className={cn(
|
||||
'text-xs font-medium mb-1 w-6 h-6 flex items-center justify-center rounded-full',
|
||||
isToday(day) && 'bg-primary text-primary-foreground',
|
||||
!isCurrentMonth && 'text-muted-foreground',
|
||||
)}>
|
||||
{format(day, 'd')}
|
||||
</div>
|
||||
|
||||
<div className="space-y-0.5">
|
||||
{dayEvents.slice(0, 3).map((event) => (
|
||||
<div
|
||||
key={event.id}
|
||||
className="text-[10px] px-1 py-0.5 rounded truncate cursor-pointer hover:opacity-80 transition-opacity"
|
||||
style={{ backgroundColor: event.color + '20', color: event.color, borderLeft: `2px solid ${event.color}` }}
|
||||
>
|
||||
{event.title}
|
||||
</div>
|
||||
))}
|
||||
{dayEvents.length > 3 && (
|
||||
<div className="text-[10px] text-muted-foreground px-1">
|
||||
+{dayEvents.length - 3} more
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
58
apps/web/src/components/Sidebar.tsx
Normal file
58
apps/web/src/components/Sidebar.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { FileText, CheckSquare, Calendar, Search, Settings } from 'lucide-react';
|
||||
import { cn } from '@yetanother/utils';
|
||||
|
||||
const items = [
|
||||
{ path: '/notes', label: 'Notes', icon: FileText },
|
||||
{ path: '/tasks', label: 'Tasks', icon: CheckSquare },
|
||||
{ path: '/calendar', label: 'Calendar', icon: Calendar },
|
||||
];
|
||||
|
||||
export function Sidebar() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<aside className="w-14 border-r flex flex-col items-center py-3 gap-2 bg-background">
|
||||
<div className="mb-2">
|
||||
<div className="size-8 rounded-lg bg-primary flex items-center justify-center">
|
||||
<span className="text-primary-foreground font-bold text-sm">Y</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{items.map((item) => (
|
||||
<button
|
||||
key={item.path}
|
||||
type="button"
|
||||
onClick={() => navigate(item.path)}
|
||||
className={cn(
|
||||
'flex items-center justify-center size-10 rounded-lg transition-colors',
|
||||
location.pathname.startsWith(item.path)
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:text-foreground hover:bg-accent/50',
|
||||
)}
|
||||
title={item.label}
|
||||
>
|
||||
<item.icon className="size-5" />
|
||||
</button>
|
||||
))}
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center justify-center size-10 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
|
||||
title="Search"
|
||||
>
|
||||
<Search className="size-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center justify-center size-10 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
|
||||
title="Settings"
|
||||
>
|
||||
<Settings className="size-5" />
|
||||
</button>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
50
apps/web/src/stores/calendar.ts
Normal file
50
apps/web/src/stores/calendar.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import { create } from 'zustand';
|
||||
import { persist } from 'zustand/middleware';
|
||||
|
||||
export interface CalendarEvent {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
allDay: boolean;
|
||||
recurrenceRule: string | null;
|
||||
color: string;
|
||||
workspaceId: string;
|
||||
taskId: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface CalendarState {
|
||||
events: CalendarEvent[];
|
||||
view: 'day' | 'week' | 'month' | 'year' | 'schedule';
|
||||
currentDate: string;
|
||||
setEvents: (events: CalendarEvent[]) => void;
|
||||
addEvent: (event: CalendarEvent) => void;
|
||||
updateEvent: (id: string, updates: Partial<CalendarEvent>) => void;
|
||||
removeEvent: (id: string) => void;
|
||||
setView: (view: CalendarState['view']) => void;
|
||||
setCurrentDate: (date: string) => void;
|
||||
}
|
||||
|
||||
export const useCalendarStore = create<CalendarState>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
events: [],
|
||||
view: 'month',
|
||||
currentDate: new Date().toISOString(),
|
||||
setEvents: (events) => set({ events }),
|
||||
addEvent: (event) => set((state) => ({ events: [...state.events, event] })),
|
||||
updateEvent: (id, updates) =>
|
||||
set((state) => ({
|
||||
events: state.events.map((e) => (e.id === id ? { ...e, ...updates } : e)),
|
||||
})),
|
||||
removeEvent: (id) =>
|
||||
set((state) => ({ events: state.events.filter((e) => e.id !== id) })),
|
||||
setView: (view) => set({ view }),
|
||||
setCurrentDate: (date) => set({ currentDate: date }),
|
||||
}),
|
||||
{ name: 'yetanother-calendar', partialize: (state) => ({ events: state.events }) },
|
||||
),
|
||||
);
|
||||
88
apps/web/src/stores/tasks.ts
Normal file
88
apps/web/src/stores/tasks.ts
Normal file
@ -0,0 +1,88 @@
|
||||
import { create } from 'zustand';
|
||||
import { persist } from 'zustand/middleware';
|
||||
|
||||
export interface Task {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
priority: 1 | 2 | 3 | 4 | 5 | null;
|
||||
status: 'active' | 'completed' | 'deleted';
|
||||
dueDate: string | null;
|
||||
durationMinutes: number | null;
|
||||
tags: string[];
|
||||
subtasks: Subtask[];
|
||||
projectId: string | null;
|
||||
parentId: string | null;
|
||||
workspaceId: string;
|
||||
startTime: string | null;
|
||||
endTime: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
completedAt: string | null;
|
||||
}
|
||||
|
||||
export interface Subtask {
|
||||
id: string;
|
||||
title: string;
|
||||
completed: boolean;
|
||||
}
|
||||
|
||||
export interface TaskProject {
|
||||
id: string;
|
||||
name: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface TasksState {
|
||||
tasks: Task[];
|
||||
projects: TaskProject[];
|
||||
view: 'inbox' | 'today' | 'upcoming' | 'projects' | 'anytime' | 'completed';
|
||||
selectedTaskId: string | null;
|
||||
setTasks: (tasks: Task[]) => void;
|
||||
addTask: (task: Task) => void;
|
||||
updateTask: (id: string, updates: Partial<Task>) => void;
|
||||
removeTask: (id: string) => void;
|
||||
toggleComplete: (id: string) => void;
|
||||
setView: (view: TasksState['view']) => void;
|
||||
setSelectedTaskId: (id: string | null) => void;
|
||||
setProjects: (projects: TaskProject[]) => void;
|
||||
addProject: (project: TaskProject) => void;
|
||||
}
|
||||
|
||||
export const useTasksStore = create<TasksState>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
tasks: [],
|
||||
projects: [],
|
||||
view: 'inbox',
|
||||
selectedTaskId: null,
|
||||
setTasks: (tasks) => set({ tasks }),
|
||||
addTask: (task) => set((state) => ({ tasks: [task, ...state.tasks] })),
|
||||
updateTask: (id, updates) =>
|
||||
set((state) => ({
|
||||
tasks: state.tasks.map((t) => (t.id === id ? { ...t, ...updates } : t)),
|
||||
})),
|
||||
removeTask: (id) =>
|
||||
set((state) => ({
|
||||
tasks: state.tasks.filter((t) => t.id !== id),
|
||||
})),
|
||||
toggleComplete: (id) =>
|
||||
set((state) => ({
|
||||
tasks: state.tasks.map((t) =>
|
||||
t.id === id
|
||||
? {
|
||||
...t,
|
||||
status: t.status === 'completed' ? 'active' as const : 'completed' as const,
|
||||
completedAt: t.status === 'completed' ? null : new Date().toISOString(),
|
||||
}
|
||||
: t,
|
||||
),
|
||||
})),
|
||||
setView: (view) => set({ view }),
|
||||
setSelectedTaskId: (id) => set({ selectedTaskId: id }),
|
||||
setProjects: (projects) => set({ projects }),
|
||||
addProject: (project) => set((state) => ({ projects: [...state.projects, project] })),
|
||||
}),
|
||||
{ name: 'yetanother-tasks', partialize: (state) => ({ tasks: state.tasks, projects: state.projects }) },
|
||||
),
|
||||
);
|
||||
78
apps/web/src/tasks/TaskInput.tsx
Normal file
78
apps/web/src/tasks/TaskInput.tsx
Normal file
@ -0,0 +1,78 @@
|
||||
import { useState, useCallback, useRef } from 'react';
|
||||
import { Plus, Calendar, Clock } from 'lucide-react';
|
||||
import { useTasksStore, type Task } from '../stores/tasks';
|
||||
|
||||
function parseNaturalLanguage(input: string): Partial<Task> {
|
||||
const parsed: Partial<Task> = { title: input, priority: null, dueDate: null, durationMinutes: null, tags: [] };
|
||||
|
||||
const priorityMatch = input.match(/!([1-5])/);
|
||||
if (priorityMatch) {
|
||||
parsed.priority = parseInt(priorityMatch[1]!) as 1 | 2 | 3 | 4 | 5;
|
||||
parsed.title = input.replace(priorityMatch[0], '').trim();
|
||||
}
|
||||
|
||||
return parsed;
|
||||
}
|
||||
|
||||
export function TaskInput() {
|
||||
const [value, setValue] = useState('');
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const addTask = useTasksStore((s) => s.addTask);
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
const trimmed = value.trim();
|
||||
if (!trimmed) return;
|
||||
|
||||
const parsed = parseNaturalLanguage(trimmed);
|
||||
const now = new Date().toISOString();
|
||||
|
||||
const task: Task = {
|
||||
id: crypto.randomUUID(),
|
||||
title: parsed.title ?? trimmed,
|
||||
description: '',
|
||||
priority: parsed.priority ?? null,
|
||||
status: 'active',
|
||||
dueDate: parsed.dueDate ?? null,
|
||||
durationMinutes: parsed.durationMinutes ?? null,
|
||||
tags: [],
|
||||
subtasks: [],
|
||||
projectId: null,
|
||||
parentId: null,
|
||||
workspaceId: crypto.randomUUID(),
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
createdAt: now,
|
||||
updatedAt: now,
|
||||
completedAt: null,
|
||||
};
|
||||
|
||||
addTask(task);
|
||||
setValue('');
|
||||
inputRef.current?.focus();
|
||||
}, [value, addTask]);
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 p-3 border-b">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
className="flex items-center justify-center size-8 rounded-md hover:bg-accent text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
</button>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') handleSubmit(); }}
|
||||
placeholder="Add a task... (!1-5 for priority)"
|
||||
className="flex-1 bg-transparent text-sm focus:outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
<div className="flex items-center gap-1 text-muted-foreground">
|
||||
<Calendar className="size-3.5" />
|
||||
<Clock className="size-3.5" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
91
apps/web/src/tasks/TaskItem.tsx
Normal file
91
apps/web/src/tasks/TaskItem.tsx
Normal file
@ -0,0 +1,91 @@
|
||||
import { useSortable } from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import { GripVertical, CheckCircle2, Circle, Trash2 } from 'lucide-react';
|
||||
import { useTasksStore, type Task } from '../stores/tasks';
|
||||
import { cn } from '@yetanother/utils';
|
||||
|
||||
const priorityColors: Record<number, string> = {
|
||||
1: 'border-l-red-500',
|
||||
2: 'border-l-orange-400',
|
||||
3: 'border-l-blue-400',
|
||||
4: 'border-l-gray-300',
|
||||
5: 'border-l-gray-100',
|
||||
};
|
||||
|
||||
interface TaskItemProps { task: Task }
|
||||
|
||||
export function TaskItem({ task }: TaskItemProps) {
|
||||
const toggleComplete = useTasksStore((s) => s.toggleComplete);
|
||||
const removeTask = useTasksStore((s) => s.removeTask);
|
||||
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: task.id });
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={cn(
|
||||
'flex items-center gap-3 px-4 py-2.5 border-b hover:bg-accent/30 transition-colors group',
|
||||
task.priority && priorityColors[task.priority],
|
||||
task.status === 'completed' && 'opacity-50',
|
||||
isDragging && 'opacity-50 bg-accent',
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="cursor-grab touch-none text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
>
|
||||
<GripVertical className="size-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleComplete(task.id)}
|
||||
className="flex-shrink-0 text-muted-foreground hover:text-primary transition-colors"
|
||||
>
|
||||
{task.status === 'completed'
|
||||
? <CheckCircle2 className="size-5 text-green-500" />
|
||||
: <Circle className="size-5" />
|
||||
}
|
||||
</button>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className={cn(
|
||||
'text-sm',
|
||||
task.status === 'completed' && 'line-through text-muted-foreground',
|
||||
)}>
|
||||
{task.title}
|
||||
</span>
|
||||
{task.dueDate && (
|
||||
<span className="ml-2 text-xs text-muted-foreground">
|
||||
{new Date(task.dueDate).toLocaleDateString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{task.priority && (
|
||||
<span className={cn(
|
||||
'text-[10px] font-medium px-1.5 py-0.5 rounded',
|
||||
task.priority <= 2 ? 'bg-red-100 text-red-700' : 'bg-muted text-muted-foreground',
|
||||
)}>
|
||||
P{task.priority}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeTask(task.id)}
|
||||
className="flex-shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100 hover:text-destructive transition-all"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
53
apps/web/src/tasks/TaskList.tsx
Normal file
53
apps/web/src/tasks/TaskList.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import { useMemo } from 'react';
|
||||
import { DndContext, closestCenter, type DragEndEvent } from '@dnd-kit/core';
|
||||
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
||||
import { useTasksStore } from '../stores/tasks';
|
||||
import { TaskItem } from './TaskItem';
|
||||
import { isToday, isFuture } from 'date-fns';
|
||||
|
||||
function filterTasks(tasks: ReturnType<typeof useTasksStore.getState>['tasks'], view: string) {
|
||||
return tasks.filter((t) => {
|
||||
if (t.status === 'deleted') return false;
|
||||
if (view === 'completed') return t.status === 'completed';
|
||||
if (t.status === 'completed') return false;
|
||||
|
||||
switch (view) {
|
||||
case 'inbox': return !t.projectId && !t.dueDate;
|
||||
case 'today': return t.dueDate ? isToday(new Date(t.dueDate)) : false;
|
||||
case 'upcoming': return t.dueDate ? isFuture(new Date(t.dueDate)) : false;
|
||||
case 'anytime': return !t.dueDate;
|
||||
default: return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function TaskList() {
|
||||
const tasks = useTasksStore((s) => s.tasks);
|
||||
const view = useTasksStore((s) => s.view);
|
||||
const updateTask = useTasksStore((s) => s.updateTask);
|
||||
|
||||
const filtered = useMemo(() => filterTasks(tasks, view), [tasks, view]);
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
updateTask(active.id as string, {});
|
||||
};
|
||||
|
||||
return (
|
||||
<DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
|
||||
<SortableContext items={filtered.map((t) => t.id)} strategy={verticalListSortingStrategy}>
|
||||
<div className="divide-y-0">
|
||||
{filtered.length === 0 && (
|
||||
<div className="p-8 text-center text-sm text-muted-foreground">
|
||||
No tasks in this view
|
||||
</div>
|
||||
)}
|
||||
{filtered.map((task) => (
|
||||
<TaskItem key={task.id} task={task} />
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
);
|
||||
}
|
||||
38
apps/web/src/tasks/TaskViews.tsx
Normal file
38
apps/web/src/tasks/TaskViews.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { Inbox, CalendarDays, ListChecks, LayoutDashboard, Archive } from 'lucide-react';
|
||||
import { useTasksStore } from '../stores/tasks';
|
||||
import { cn } from '@yetanother/utils';
|
||||
|
||||
const views = [
|
||||
{ id: 'inbox' as const, label: 'Inbox', icon: Inbox },
|
||||
{ id: 'today' as const, label: 'Today', icon: CalendarDays },
|
||||
{ id: 'upcoming' as const, label: 'Upcoming', icon: ListChecks },
|
||||
{ id: 'projects' as const, label: 'Projects', icon: LayoutDashboard },
|
||||
{ id: 'anytime' as const, label: 'Anytime', icon: Inbox },
|
||||
{ id: 'completed' as const, label: 'Completed', icon: Archive },
|
||||
];
|
||||
|
||||
export function TaskViews() {
|
||||
const view = useTasksStore((s) => s.view);
|
||||
const setView = useTasksStore((s) => s.setView);
|
||||
|
||||
return (
|
||||
<div className="p-3 space-y-1">
|
||||
{views.map((v) => (
|
||||
<button
|
||||
key={v.id}
|
||||
type="button"
|
||||
onClick={() => setView(v.id)}
|
||||
className={cn(
|
||||
'flex items-center gap-3 w-full px-3 py-2 rounded-md text-sm transition-colors',
|
||||
view === v.id
|
||||
? 'bg-accent text-accent-foreground font-medium'
|
||||
: 'text-muted-foreground hover:text-foreground hover:bg-accent/50',
|
||||
)}
|
||||
>
|
||||
<v.icon className="size-4" />
|
||||
{v.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
apps/web/src/tasks/TasksPage.tsx
Normal file
38
apps/web/src/tasks/TasksPage.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { TaskInput } from './TaskInput';
|
||||
import { TaskList } from './TaskList';
|
||||
import { TaskViews } from './TaskViews';
|
||||
import { useTasksStore } from '../stores/tasks';
|
||||
|
||||
export function TasksPage() {
|
||||
const view = useTasksStore((s) => s.view);
|
||||
|
||||
const viewLabels: Record<string, string> = {
|
||||
inbox: 'Inbox',
|
||||
today: 'Today',
|
||||
upcoming: 'Upcoming',
|
||||
projects: 'Projects',
|
||||
anytime: 'Anytime',
|
||||
completed: 'Completed',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full">
|
||||
<div className="w-56 border-r flex flex-col bg-background">
|
||||
<div className="p-4 border-b">
|
||||
<h2 className="font-semibold text-sm">Tasks</h2>
|
||||
</div>
|
||||
<TaskViews />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="px-6 py-3 border-b">
|
||||
<h1 className="text-lg font-semibold">{viewLabels[view] ?? 'Tasks'}</h1>
|
||||
</div>
|
||||
<TaskInput />
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<TaskList />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -99,6 +99,15 @@ importers:
|
||||
|
||||
apps/web:
|
||||
dependencies:
|
||||
'@dnd-kit/core':
|
||||
specifier: ^6.3.0
|
||||
version: 6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
|
||||
'@dnd-kit/sortable':
|
||||
specifier: ^10.0.0
|
||||
version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)
|
||||
'@dnd-kit/utilities':
|
||||
specifier: ^3.2.0
|
||||
version: 3.2.2(react@19.2.7)
|
||||
'@tanstack/react-query':
|
||||
specifier: ^5.75.0
|
||||
version: 5.101.2(react@19.2.7)
|
||||
@ -162,6 +171,12 @@ importers:
|
||||
'@yetanother/utils':
|
||||
specifier: workspace:*
|
||||
version: link:../../packages/utils
|
||||
chrono-node:
|
||||
specifier: ^2.7.0
|
||||
version: 2.10.0
|
||||
date-fns:
|
||||
specifier: ^4.1.0
|
||||
version: 4.4.0
|
||||
jotai:
|
||||
specifier: ^2.12.0
|
||||
version: 2.20.2(@babel/core@7.29.7(supports-color@7.2.0))(@babel/template@7.29.7)(@types/react@19.2.17)(react@19.2.7)
|
||||
@ -531,6 +546,28 @@ packages:
|
||||
resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
|
||||
engines: {node: '>=18'}
|
||||
|
||||
'@dnd-kit/accessibility@3.1.1':
|
||||
resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
|
||||
peerDependencies:
|
||||
react: '>=16.8.0'
|
||||
|
||||
'@dnd-kit/core@6.3.1':
|
||||
resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
|
||||
peerDependencies:
|
||||
react: '>=16.8.0'
|
||||
react-dom: '>=16.8.0'
|
||||
|
||||
'@dnd-kit/sortable@10.0.0':
|
||||
resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
|
||||
peerDependencies:
|
||||
'@dnd-kit/core': ^6.3.0
|
||||
react: '>=16.8.0'
|
||||
|
||||
'@dnd-kit/utilities@3.2.2':
|
||||
resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
|
||||
peerDependencies:
|
||||
react: '>=16.8.0'
|
||||
|
||||
'@esbuild/aix-ppc64@0.25.12':
|
||||
resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
|
||||
engines: {node: '>=18'}
|
||||
@ -2243,6 +2280,10 @@ packages:
|
||||
resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
|
||||
engines: {node: '>= 14.16.0'}
|
||||
|
||||
chrono-node@2.10.0:
|
||||
resolution: {integrity: sha512-5fJ4zr5W/5DEf+8FMPMXF2qk9L5dc1rAP9Pw009iMlKAghPgx5o7aUcnjEMe6PTwqiqTa5yzmfSm05EHuwr31Q==}
|
||||
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
|
||||
|
||||
citty@0.1.6:
|
||||
resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
|
||||
|
||||
@ -2337,6 +2378,9 @@ packages:
|
||||
resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
date-fns@4.4.0:
|
||||
resolution: {integrity: sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==}
|
||||
|
||||
dateformat@4.6.3:
|
||||
resolution: {integrity: sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==}
|
||||
|
||||
@ -4403,6 +4447,31 @@ snapshots:
|
||||
|
||||
'@csstools/css-tokenizer@3.0.4': {}
|
||||
|
||||
'@dnd-kit/accessibility@3.1.1(react@19.2.7)':
|
||||
dependencies:
|
||||
react: 19.2.7
|
||||
tslib: 2.8.1
|
||||
|
||||
'@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
|
||||
dependencies:
|
||||
'@dnd-kit/accessibility': 3.1.1(react@19.2.7)
|
||||
'@dnd-kit/utilities': 3.2.2(react@19.2.7)
|
||||
react: 19.2.7
|
||||
react-dom: 19.2.7(react@19.2.7)
|
||||
tslib: 2.8.1
|
||||
|
||||
'@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react@19.2.7)':
|
||||
dependencies:
|
||||
'@dnd-kit/core': 6.3.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
|
||||
'@dnd-kit/utilities': 3.2.2(react@19.2.7)
|
||||
react: 19.2.7
|
||||
tslib: 2.8.1
|
||||
|
||||
'@dnd-kit/utilities@3.2.2(react@19.2.7)':
|
||||
dependencies:
|
||||
react: 19.2.7
|
||||
tslib: 2.8.1
|
||||
|
||||
'@esbuild/aix-ppc64@0.25.12':
|
||||
optional: true
|
||||
|
||||
@ -6014,6 +6083,8 @@ snapshots:
|
||||
dependencies:
|
||||
readdirp: 4.1.2
|
||||
|
||||
chrono-node@2.10.0: {}
|
||||
|
||||
citty@0.1.6:
|
||||
dependencies:
|
||||
consola: 3.4.2
|
||||
@ -6097,6 +6168,8 @@ snapshots:
|
||||
es-errors: 1.3.0
|
||||
is-data-view: 1.0.2
|
||||
|
||||
date-fns@4.4.0: {}
|
||||
|
||||
dateformat@4.6.3: {}
|
||||
|
||||
debug@4.4.3(supports-color@7.2.0):
|
||||
|
||||
Loading…
Reference in New Issue
Block a user