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

apps/web/package.json

@@ -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:*",

apps/web/src/App.tsx

@@ -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>

apps/web/src/calendar/CalendarHeader.tsx

@@ -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>
+  );
+}

apps/web/src/calendar/CalendarPage.tsx

@@ -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>
+  );
+}

apps/web/src/calendar/MonthView.tsx

@@ -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>
+  );
+}

apps/web/src/components/Sidebar.tsx

@@ -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>
+  );
+}

apps/web/src/stores/calendar.ts

@@ -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 }) },
+  ),
+);

apps/web/src/stores/tasks.ts

@@ -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 }) },
+  ),
+);

apps/web/src/tasks/TaskInput.tsx

@@ -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>
+  );
+}

apps/web/src/tasks/TaskItem.tsx

@@ -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>
+  );
+}

apps/web/src/tasks/TaskList.tsx

@@ -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>
+  );
+}

apps/web/src/tasks/TaskViews.tsx

@@ -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>
+  );
+}

apps/web/src/tasks/TasksPage.tsx

@@ -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>
+  );
+}

pnpm-lock.yaml

@@ -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):