To-do list

import { REFERENCE_DATE } from "@/lib/sample-data"
import { AppShell } from "@/components/ui/app-shell"
import { PageHeader } from "@/components/ui/page-header"

import { signOut } from "./actions"
import { TodoView } from "./components/todo-view"
import { assigneeOptions, currentUser, shellNotifications, todoRows, todoSummary } from "./data"
import { NAV, ROUTES } from "@/lib/dashboards/projects/nav"

/**
 * The to-do list: the same tasks the board moves, read as a list. The page is
 * a server component: it reads every task through `db.tasks`, works out who
 * has each and which project it belongs to, and hands plain rows to one client
 * island that owns the tabs, the search, the filters, the layout, the tick and
 * the star.
 */
export default function TodoPage() {
  return (
    <AppShell
      nav={NAV}
      activeHref={ROUTES.todo}
      user={currentUser()}
      notifications={shellNotifications()}
      now={REFERENCE_DATE}
      onSignOut={signOut}
    >
      <PageHeader
        title="To-do"
        description="Everything the team has open, as a list: tick it, star it, or add to it."
        meta={todoSummary()}
      />

      <TodoView rows={todoRows()} assignees={assigneeOptions()} />
    </AppShell>
  )
}

/**
 * What this page reads. Every task, who has it and which project it belongs
 * to comes from `db.tasks`, `db.members` and `db.projects`; nothing here is
 * written out, and "now" is `REFERENCE_DATE`, which is what a due date is late
 * against. A to-do list reads the board's five columns as three states, a
 * star is the label "starred", and the subtasks a row shows are a seeded rule
 * over its id, because the entity records none. The client island imports
 * only the types below — its vocabulary lives beside it in
 * `components/todo-vocabulary.ts`, so nothing that reaches `db` is ever
 * pulled into the browser; the sort they share is `order.ts`, beside this file.
 */
import { getInitials } from "@/lib/format"
import { REFERENCE_DATE, db, intBetween, seeded, type Member, type Project, type Task } from "@/lib/sample-data"

import { sortRows } from "./order"

export type TodoStatus = "pending" | "in_progress" | "completed"
export type TaskPriority = Task["priority"]

/** The label a task carries when it is starred. */
export const STARRED = "starred"

/** The three states a list reads the board's five columns as. */
export function todoStatus(status: Task["status"]): TodoStatus {
  if (status === "done") return "completed"
  if (status === "in_progress" || status === "review") return "in_progress"
  return "pending"
}

export type TodoRow = {
  id: string
  title: string
  status: TodoStatus
  priority: TaskPriority
  starred: boolean
  assigneeId: string
  assigneeName: string
  assigneeInitials: string
  assigneeAvatar?: string
  projectCode: string
  dueAt: Date
  /** True when the due date is behind us and the task is not finished. */
  overdue: boolean
  subtasks: { done: number; total: number }
  updatedAt: Date
}

type Lookups = { members: Map<string, Member>; projects: Map<string, Project> }

// Read per call, never held at module scope: an assignee renamed or a project
// written since the server started is what the next render shows.
const lookups = (): Lookups => ({
  members: new Map(db.members.all().map((member) => [member.id, member])),
  projects: new Map(db.projects.all().map((project) => [project.id, project])),
})

/**
 * How many subtasks a task has, and how many are done: a seeded rule over the
 * id, so the same task shows the same count on every render, and a finished
 * task shows every one of them ticked.
 */
function subtasksFor(task: Task): { done: number; total: number } {
  const rand = seeded(`todo-list:${task.id}`)
  const total = intBetween(rand, 1, 4)
  const done = task.status === "done" ? total : intBetween(rand, 0, total - 1)
  return { done, total }
}

/** One task as this page reads it. Exported because the actions return one. */
export function toRow(task: Task, { members, projects } = lookups()): TodoRow {
  const member = members.get(task.assignee)
  const project = projects.get(task.projectId)
  return {
    id: task.id,
    title: task.title,
    status: todoStatus(task.status),
    priority: task.priority,
    starred: task.labels.includes(STARRED),
    assigneeId: task.assignee,
    assigneeName: member?.name ?? "Unassigned",
    assigneeInitials: getInitials(member?.name ?? "Unassigned"),
    assigneeAvatar: member?.avatarUrl,
    projectCode: project?.code ?? "—",
    dueAt: task.dueAt,
    overdue: task.status !== "done" && task.dueAt.getTime() < REFERENCE_DATE.getTime(),
    subtasks: subtasksFor(task),
    updatedAt: task.updatedAt,
  }
}

/** Every task the team has, in the order the list reads them. */
export function todoRows(): TodoRow[] {
  const read = lookups()
  return sortRows(db.tasks.all().map((task) => toRow(task, read)))
}

/** The line under the title: what is open, and what is late. */
export function todoSummary(): string {
  const rows = db.tasks.all()
  const open = rows.filter((task) => task.status !== "done").length
  const late = rows.filter(
    (task) => task.status !== "done" && task.dueAt.getTime() < REFERENCE_DATE.getTime()
  ).length
  const starred = rows.filter((task) => task.labels.includes(STARRED)).length
  return `${open} open · ${late} late · ${starred} starred`
}

export type Option = { value: string; label: string }

/** Who can be filtered on, and who a new task can be given to: everyone still active. */
export function assigneeOptions(): Option[] {
  return db.members
    .all()
    .filter((member) => member.status === "active")
    .map((member) => ({ value: member.id, label: member.name }))
    .sort((a, b) => a.label.localeCompare(b.label))
}

/** The bell's contents: the newest notifications, unread first in the panel. */
export function shellNotifications() {
  return db.notifications
    .all()
    .sort((a, b) => b.at.getTime() - a.at.getTime())
    .slice(0, 6)
    .map(({ id, title, description, at, read, href }) => ({ id, title, description, at, read, href }))
}

function ownerRow(): Member {
  return db.members.all().find((member) => member.role === "owner") ?? db.members.all()[0]
}

/** The person looking at the page: whoever owns this workspace. */
export function currentUser() {
  const owner = ownerRow()
  return { name: owner.name, email: owner.email, initials: getInitials(owner.name), avatarUrl: owner.avatarUrl }
}

"use server"

import { mockAuthAdapter } from "@/lib/auth-adapter"
import { REFERENCE_DATE, calendarDay, db, formText, invalidInput, isForm, type Result, type Task } from "@/lib/sample-data"

import { STARRED, toRow, type TaskPriority, type TodoRow } from "./data"

/**
 * What this page changes. Server actions, so the page can stay a server
 * component and still hand its island something to call, and `Result` so every
 * caller reads one success-or-error shape. Every write goes through `db.tasks`
 * — the same rows the board moves — and every action re-reads the row it is
 * about to change rather than trusting what the browser says the row was.
 */

export async function signOut(): Promise<Result<{ signedOut: true }>> {
  await mockAuthAdapter.signOut()
  return { ok: true, data: { signedOut: true } }
}

const MAX_TITLE = 80
const PRIORITIES: TaskPriority[] = ["urgent", "high", "medium", "low", "none"]

/** How far ahead a due date can be: five years. */
const DUE_WITHIN_MS = 5 * 365 * 86_400_000

const notFound = (id: string): Result<never> => ({
  ok: false,
  error: { code: "not_found", message: `No task with id "${id}".` },
})

/** Midnight UTC on the day `date` falls on — a task's window is whole days. */
function utcDay(date: Date): Date {
  return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()))
}

/** Ticks a task off. Done is done: the list does not reopen a task, the board does not either. */
export async function completeTask(id: string): Promise<Result<TodoRow>> {
  const task = await db.tasks.get(id)
  if (!task) return notFound(id)

  if (task.status === "done") {
    return { ok: false, error: { code: "not_allowed", message: `“${task.title}” is already completed.` } }
  }

  const updated = await db.tasks.update(id, { status: "done", updatedAt: REFERENCE_DATE })
  if (!updated.ok) return updated
  return { ok: true, data: toRow(updated.data) }
}

/** Stars a task, or takes the star off: the label "starred" on the row. */
export async function toggleStar(id: string): Promise<Result<TodoRow>> {
  const task = await db.tasks.get(id)
  if (!task) return notFound(id)

  const labels = task.labels.includes(STARRED)
    ? task.labels.filter((label) => label !== STARRED)
    : [...task.labels, STARRED]
  const updated = await db.tasks.update(id, { labels, updatedAt: REFERENCE_DATE })
  if (!updated.ok) return updated
  return { ok: true, data: toRow(updated.data) }
}

/**
 * Adds a task to the list. The form sends the title, a priority, who it is
 * for and, optionally, when it is due; the task lands in the board's To do
 * column, filed against the open project with the nearest deadline.
 */
export async function createTask(form: FormData): Promise<Result<TodoRow>> {
  if (!isForm(form)) return invalidInput("Send the task as the form sends it.")
  const title = formText(form, "title")
  const wantedPriority = formText(form, "priority") || "medium"
  const assigneeId = formText(form, "assignee")
  const due = formText(form, "due")

  if (title.length < 3) {
    return {
      ok: false,
      error: { code: "invalid", message: "Give the task a title of at least three characters.", field: "title" },
    }
  }
  if (title.length > MAX_TITLE) {
    return {
      ok: false,
      error: { code: "invalid", message: `Keep the title under ${MAX_TITLE} characters.`, field: "title" },
    }
  }

  const priority: Task["priority"] = PRIORITIES.includes(wantedPriority as TaskPriority)
    ? (wantedPriority as TaskPriority)
    : "medium"

  // Whoever was picked has to be in the workspace, and still active; a blank
  // pick goes to the workspace owner.
  const members = db.members.all()
  const assignee = assigneeId
    ? members.find((member) => member.id === assigneeId && member.status === "active")
    : (members.find((member) => member.role === "owner") ?? members[0])
  if (!assignee) {
    return { ok: false, error: { code: "not_found", message: "Pick someone in the workspace.", field: "assignee" } }
  }

  const today = utcDay(REFERENCE_DATE)
  // A day that exists — "2026-02-31" was stored as March 3 — within five years.
  const parsed = due ? calendarDay(due, { to: new Date(today.getTime() + DUE_WITHIN_MS) }) : null
  if (parsed === undefined) {
    return { ok: false, error: { code: "invalid", message: "Give the due date as a day within the next five years.", field: "due" } }
  }
  const dueAt = parsed ?? new Date(today.getTime() + 7 * 86_400_000)
  if (dueAt.getTime() < today.getTime()) {
    return { ok: false, error: { code: "invalid", message: "A new task cannot already be overdue.", field: "due" } }
  }

  // The open project with the nearest deadline: what a task added from a list
  // most likely belongs to, and a rule the reader can predict.
  const project = db.projects
    .all()
    .filter((entry) => entry.status !== "shipped")
    .sort((a, b) => a.endAt.getTime() - b.endAt.getTime())[0]
  if (!project) {
    return { ok: false, error: { code: "not_found", message: "There is no open project to file this against." } }
  }

  const created = await db.tasks.create({
    title,
    status: "todo",
    priority,
    assignee: assignee.id,
    projectId: project.id,
    points: 2,
    startAt: today,
    dueAt,
    createdAt: REFERENCE_DATE,
    updatedAt: REFERENCE_DATE,
    labels: [],
  })
  if (!created.ok) return created

  return { ok: true, data: toRow(created.data) }
}

"use client"

import * as React from "react"
import { PlusIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { FormRow } from "@/components/ui/form-section"
import { Input } from "@/components/ui/input"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"

import { createTask } from "../actions"
import { type Option, type TodoRow } from "../data"
import { PRIORITIES } from "./todo-vocabulary"

/** What a refusal from the action looks like once it is on screen. */
type ActionError = { message: string; field?: string }

export type AddTodoDialogProps = {
  assignees: Option[]
  onCreated: (task: TodoRow) => void
}

/**
 * The floating "+" and the form behind it. The submit is a plain handler
 * around the server action rather than `useActionState`, because the list has
 * to be told about the new row and telling a parent during render is a React
 * error; here the call sits after the await, where an event handler belongs.
 * A refusal lands on the field it names.
 */
export function AddTodoDialog({ assignees, onCreated }: AddTodoDialogProps) {
  const [open, setOpen] = React.useState(false)
  const [title, setTitle] = React.useState("")
  const [error, setError] = React.useState<ActionError>()
  const [pending, setPending] = React.useState(false)
  // Bumped by every close: a create still in the air when the reader walks
  // away belongs to a dialog that no longer exists, so its continuation checks
  // the token it started with and does nothing.
  const submission = React.useRef(0)

  const errorFor = (field: string) => (error?.field === field ? error.message : undefined)
  const formError = error && !error.field ? error.message : undefined

  function close() {
    submission.current += 1
    setOpen(false)
    setTitle("")
    setError(undefined)
    setPending(false)
  }

  async function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    const form = new FormData(event.currentTarget)
    const token = submission.current

    setPending(true)
    const result = await createTask(form)
    if (token !== submission.current) return
    setPending(false)

    if (!result.ok) {
      setError(result.error)
      return
    }
    onCreated(result.data)
    close()
  }

  return (
    <Dialog
      open={open}
      onOpenChange={(next) => {
        if (next) setOpen(true)
        else close()
      }}
    >
      {/* Fixed to the viewport's corner, the way a list app keeps its add
          within thumb's reach; above the sheet, below floating layers. */}
      <DialogTrigger
        render={
          <Button
            size="icon"
            aria-label="Add task"
            className="fixed right-5 bottom-5 z-30 size-12 rounded-full shadow-(--shadow-float) [&_svg:not([class*='size-'])]:size-5"
          >
            <PlusIcon aria-hidden="true" />
          </Button>
        }
      />
      <DialogContent className="sm:max-w-md">
        <form onSubmit={submit}>
          <DialogHeader>
            <DialogTitle>New task</DialogTitle>
            <DialogDescription>It lands in Pending, filed against the project closest to its deadline.</DialogDescription>
          </DialogHeader>

          <div className="flex flex-col gap-5 py-4">
            <FormRow label="Title" htmlFor="todo-title" required error={errorFor("title")}>
              <Input
                id="todo-title"
                name="title"
                placeholder="Book the retro room"
                autoComplete="off"
                value={title}
                onChange={(event) => setTitle(event.target.value)}
              />
            </FormRow>

            <div className="grid gap-5 sm:grid-cols-2">
              <FormRow label="Priority" htmlFor="todo-priority" error={errorFor("priority")}>
                <NativeSelect id="todo-priority" name="priority" defaultValue="medium" className="w-full">
                  {PRIORITIES.map((entry) => (
                    <NativeSelectOption key={entry.value} value={entry.value}>
                      {entry.label}
                    </NativeSelectOption>
                  ))}
                </NativeSelect>
              </FormRow>
              <FormRow label="Assignee" htmlFor="todo-assignee" error={errorFor("assignee")}>
                <NativeSelect id="todo-assignee" name="assignee" defaultValue="" className="w-full">
                  <NativeSelectOption value="">Workspace owner</NativeSelectOption>
                  {assignees.map((entry) => (
                    <NativeSelectOption key={entry.value} value={entry.value}>
                      {entry.label}
                    </NativeSelectOption>
                  ))}
                </NativeSelect>
              </FormRow>
            </div>

            <FormRow label="Due" htmlFor="todo-due" description="Left blank, a week from today." error={errorFor("due")}>
              <Input id="todo-due" name="due" type="date" className="w-full sm:w-48" />
            </FormRow>

            {formError ? (
              <Callout variant="danger" role="alert" title="Not added">
                {formError}
              </Callout>
            ) : null}
          </div>

          <DialogFooter>
            <DialogClose render={<Button variant="ghost" type="button">Cancel</Button>} />
            <Button type="submit" disabled={pending} aria-busy={pending || undefined}>
              {pending ? "Adding…" : "Add task"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}

"use client"

import * as React from "react"
import { CalendarIcon, ListChecksIcon, StarIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { PriorityBadge } from "@/components/ui/priority-badge"
import { StatusBadge } from "@/components/ui/status-badge"
import { UserCell } from "@/components/ui/user-cell"

import { type TodoRow } from "../data"
import { STATUS_LABELS, STATUS_MAP, dueOn } from "./todo-vocabulary"

export type TodoCardProps = {
  task: TodoRow
  /** Stacked for the grid, one line for the list. */
  view: "list" | "grid"
  onComplete: (id: string) => void
  onStar: (id: string) => void
}

/**
 * One task as a card: the box that finishes it, the title, the star, then
 * who has it, when it is due and how far the subtasks are, with the state and
 * the priority as pills. A completed task keeps its box ticked and its title
 * struck; the list does not reopen a task, so the box is done for good.
 */
export function TodoCard({ task, view, onComplete, onStar }: TodoCardProps) {
  const titleId = React.useId()
  const done = task.status === "completed"

  return (
    <li aria-labelledby={titleId} data-task-id={task.id} data-completed={done || undefined}>
      <Card size="sm" className="h-full">
        <CardContent className={cn("flex gap-3", view === "grid" ? "flex-col" : "flex-col sm:flex-row sm:items-center")}>
          <div className="flex min-w-0 flex-1 flex-col gap-2">
            <div className="flex items-start gap-2.5">
              <Checkbox
                aria-label={`Complete ${task.title}`}
                checked={done}
                disabled={done}
                onCheckedChange={() => onComplete(task.id)}
                className="mt-0.5"
              />
              <h2 id={titleId} className="min-w-0 text-sm leading-5 font-medium">
                {done ? <s className="text-muted-foreground">{task.title}</s> : task.title}
              </h2>
              <Button
                type="button"
                variant="ghost"
                size="icon-xs"
                aria-label={task.starred ? `Unstar ${task.title}` : `Star ${task.title}`}
                aria-pressed={task.starred}
                onClick={() => onStar(task.id)}
                className={cn("-my-1 shrink-0", task.starred ? "text-warning" : "text-faint-foreground")}
              >
                <StarIcon aria-hidden="true" className={cn(task.starred && "fill-current")} />
              </Button>
            </div>
            <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 pl-6.5 text-xs text-muted-foreground">
              <UserCell size="sm" name={task.assigneeName} src={task.assigneeAvatar} />
              <span className="font-mono text-2xs text-faint-foreground">{task.projectCode}</span>
              <span
                data-overdue={task.overdue || undefined}
                className={cn("inline-flex items-center gap-1 tabular-nums", task.overdue && "text-danger")}
              >
                <CalendarIcon aria-hidden="true" className="size-3.5" />
                <time dateTime={task.dueAt.toISOString()}>{dueOn.format(task.dueAt)}</time>
                {task.overdue ? <span className="font-medium">Overdue</span> : null}
              </span>
              <span className="inline-flex items-center gap-1 tabular-nums">
                <ListChecksIcon aria-hidden="true" className="size-3.5" />
                Subtasks {task.subtasks.done}/{task.subtasks.total}
              </span>
            </div>
          </div>
          <div className={cn("flex shrink-0 items-center gap-1.5", view === "grid" ? "pl-6.5" : "pl-6.5 sm:pl-0")}>
            <StatusBadge status={task.status} label={STATUS_LABELS[task.status]} variant={STATUS_MAP[task.status]} size="sm" />
            <PriorityBadge priority={task.priority} size="sm" />
          </div>
        </CardContent>
      </Card>
    </li>
  )
}

"use client"

import * as React from "react"
import { SlidersHorizontalIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

import { type Option } from "../data"
import { PRIORITIES } from "./todo-vocabulary"

export type TodoFiltersProps = {
  assignees: Option[]
  priorities: string[]
  owners: string[]
  onPrioritiesChange: (values: string[]) => void
  onOwnersChange: (values: string[]) => void
}

function toggle(values: string[], value: string, on: boolean): string[] {
  return on ? [...values, value] : values.filter((entry) => entry !== value)
}

/** The filter popover: priority and assignee as two groups of boxes, with the count of what is on in the button. */
export function TodoFilters({ assignees, priorities, owners, onPrioritiesChange, onOwnersChange }: TodoFiltersProps) {
  const active = priorities.length + owners.length

  return (
    <Popover>
      <PopoverTrigger
        render={
          <Button variant="outline" size="sm" aria-label={active > 0 ? `Filters, ${active} active` : "Filters"}>
            <SlidersHorizontalIcon data-icon="inline-start" aria-hidden="true" />
            Filter
            {active > 0 ? (
              <Badge variant="secondary" className="h-4.5 px-1.5 text-2xs tabular-nums">
                {active}
              </Badge>
            ) : null}
          </Button>
        }
      />
      <PopoverContent align="end" className="w-64 gap-3">
        <fieldset className="flex flex-col gap-1.5">
          <legend className="type-eyebrow mb-1.5">Priority</legend>
          {PRIORITIES.map((entry) => (
            <Label key={entry.value} className="h-6 font-normal">
              <Checkbox
                checked={priorities.includes(entry.value)}
                onCheckedChange={(checked) => onPrioritiesChange(toggle(priorities, entry.value, Boolean(checked)))}
              />
              {entry.label}
            </Label>
          ))}
        </fieldset>
        <fieldset className="flex max-h-56 flex-col gap-1.5 overflow-y-auto border-t pt-3">
          <legend className="type-eyebrow mb-1.5">Assignee</legend>
          {assignees.map((entry) => (
            <Label key={entry.value} className="h-6 font-normal">
              <Checkbox
                checked={owners.includes(entry.value)}
                onCheckedChange={(checked) => onOwnersChange(toggle(owners, entry.value, Boolean(checked)))}
              />
              <span className="truncate">{entry.label}</span>
            </Label>
          ))}
        </fieldset>
        {active > 0 ? (
          <div className="border-t pt-2">
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={() => {
                onPrioritiesChange([])
                onOwnersChange([])
              }}
            >
              Clear filters
            </Button>
          </div>
        ) : null}
      </PopoverContent>
    </Popover>
  )
}

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import { Callout } from "@/components/ui/callout"
import { EmptyState } from "@/components/ui/empty-state"
import { SearchInput } from "@/components/ui/search-input"
import { SegmentedControl } from "@/components/ui/segmented-control"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

import { completeTask, toggleStar } from "../actions"
import { type Option, type TodoRow } from "../data"
import { AddTodoDialog } from "./add-todo-dialog"
import { TodoCard } from "./todo-card"
import { TodoFilters } from "./todo-filters"
import { TABS, VIEWS, sortRows, type Tab } from "./todo-vocabulary"

export type TodoViewProps = {
  rows: TodoRow[]
  assignees: Option[]
}

/**
 * The list. One island, because the tab, the search, the filters and the
 * layout all narrow the same rows, and every change to a task comes back as
 * the row the action wrote. Completing is optimistic — the box ticks at once
 * and the action writes behind it — and a refusal unticks it with the reason
 * in a callout above the list; a success is a status line under the toolbar.
 */
export function TodoView({ rows, assignees }: TodoViewProps) {
  const [tasks, setTasks] = React.useState(rows)
  const [tab, setTab] = React.useState<Tab>("all")
  const [query, setQuery] = React.useState("")
  const [priorities, setPriorities] = React.useState<string[]>([])
  const [owners, setOwners] = React.useState<string[]>([])
  const [view, setView] = React.useState("list")
  const [refusal, setRefusal] = React.useState<string | null>(null)
  const [status, setStatus] = React.useState<string | null>(null)

  const needle = query.trim().toLowerCase()
  // What the search and the filters leave; the tabs count and split that.
  const narrowed = tasks.filter(
    (task) =>
      (needle === "" || task.title.toLowerCase().includes(needle)) &&
      (priorities.length === 0 || priorities.includes(task.priority)) &&
      (owners.length === 0 || owners.includes(task.assigneeId))
  )
  const counts: Record<Tab, number> = { all: narrowed.length, pending: 0, in_progress: 0, completed: 0 }
  for (const task of narrowed) counts[task.status] += 1
  const visible = sortRows(tab === "all" ? narrowed : narrowed.filter((task) => task.status === tab))

  // The row the action just wrote goes to the front of the array: the sort is
  // stable, so among rows touched at the same instant the latest change wins.
  function replace(next: TodoRow) {
    setTasks((current) => [next, ...current.filter((task) => task.id !== next.id)])
  }

  function said(message: string) {
    setRefusal(null)
    setStatus(message)
  }

  function refused(message: string) {
    setStatus(null)
    setRefusal(message)
  }

  const created = React.useCallback((task: TodoRow) => {
    setTasks((current) => [task, ...current])
    setRefusal(null)
    setStatus(`“${task.title}” added.`)
  }, [])

  async function complete(id: string) {
    // The one row's own state, so a refusal restores that row and nothing else
    // that changed while the action was in flight.
    const was = tasks.find((task) => task.id === id)?.status ?? "pending"
    setTasks((current) =>
      current.map((task) => (task.id === id ? { ...task, status: "completed" } : task))
    )
    const result = await completeTask(id)
    if (result.ok) {
      replace(result.data)
      said(`“${result.data.title}” completed.`)
    } else {
      setTasks((current) => current.map((task) => (task.id === id ? { ...task, status: was } : task)))
      refused(result.error.message)
    }
  }

  async function star(id: string) {
    const result = await toggleStar(id)
    if (!result.ok) return refused(result.error.message)
    replace(result.data)
    said(result.data.starred ? `“${result.data.title}” starred.` : `“${result.data.title}” unstarred.`)
  }

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap items-center justify-between gap-3">
        {/* The four tabs run wider than a phone; the row scrolls rather than clips. */}
        <Tabs value={tab} onValueChange={(value) => setTab(value as Tab)} className="max-w-full max-sm:overflow-x-auto">
          <TabsList aria-label="Status">
            {TABS.map((entry) => (
              <TabsTrigger key={entry.value} value={entry.value}>
                {entry.label}{" "}
                <span className="text-xs tabular-nums text-muted-foreground">{counts[entry.value]}</span>
              </TabsTrigger>
            ))}
          </TabsList>
        </Tabs>
        <div className="flex flex-wrap items-center gap-2">
          <SearchInput
            size="sm"
            aria-label="Search tasks"
            placeholder="Search tasks"
            value={query}
            onValueChange={setQuery}
            debounce={150}
            className="w-full sm:w-56"
          />
          <TodoFilters
            assignees={assignees}
            priorities={priorities}
            owners={owners}
            onPrioritiesChange={setPriorities}
            onOwnersChange={setOwners}
          />
          <SegmentedControl aria-label="Layout" options={VIEWS} value={view} onValueChange={setView} size="sm" />
        </div>
      </div>

      {/* Two slots, never one: a success is a line under the toolbar, a
          refusal a callout above the list. Each clears the other. */}
      <p role="status" aria-live="polite" className="min-h-4 text-xs text-muted-foreground">
        {status}
      </p>
      {refusal ? (
        <Callout variant="danger" title="That change was refused" role="alert">
          {refusal}
        </Callout>
      ) : null}

      {visible.length === 0 ? (
        <EmptyState
          variant="dashed"
          title="Nothing here"
          description={
            needle || priorities.length > 0 || owners.length > 0
              ? "No task matches that search or those filters."
              : "Nothing in this state. Add a task with the button in the corner."
          }
        />
      ) : (
        <ul
          aria-label="Tasks"
          data-view={view}
          className={cn(
            view === "grid" ? "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3" : "flex flex-col gap-3"
          )}
        >
          {visible.map((task) => (
            <TodoCard
              key={task.id}
              task={task}
              view={view === "grid" ? "grid" : "list"}
              onComplete={complete}
              onStar={star}
            />
          ))}
        </ul>
      )}

      <AddTodoDialog assignees={assignees} onCreated={created} />
    </div>
  )
}

import { PRIORITY_LABELS } from "@/components/ui/priority-badge"
import { type StatusVariant } from "@/components/ui/status-badge"

import { type TaskPriority, type TodoStatus } from "../data"

/**
 * What the list is made of, as the reader sees it: the tabs, the words and
 * tones for a state and a priority, and the two layouts. Vocabulary, not data
 * — it lives beside the island rather than in `data.ts`, which reads `db` and
 * must never reach the browser. The sort the server shares is `../order`,
 * imported back here so the island reads every rule it draws by from one place.
 */
export { sortRows } from "../order"

export type Tab = "all" | TodoStatus

export const TABS: { value: Tab; label: string }[] = [
  { value: "all", label: "All" },
  { value: "pending", label: "Pending" },
  { value: "in_progress", label: "In progress" },
  { value: "completed", label: "Completed" },
]

export const STATUS_LABELS: Record<TodoStatus, string> = {
  pending: "Pending",
  in_progress: "In progress",
  completed: "Completed",
}

/** Pending waits in the info tone, in progress in warning, completed in success. */
export const STATUS_MAP: Record<TodoStatus, StatusVariant> = {
  pending: "info",
  in_progress: "warning",
  completed: "success",
}

/** The five levels in the kit's own words, for the filter and the dialog; the card draws the kit's PriorityBadge. */
export const PRIORITIES: { value: TaskPriority; label: string }[] = (
  ["urgent", "high", "medium", "low", "none"] as const
).map((value) => ({ value, label: PRIORITY_LABELS[value] }))

export const VIEWS = [
  { value: "list", label: "List" },
  { value: "grid", label: "Grid" },
]

/** A due date, pinned to UTC: the entity stores midnight UTC, and a zone west of Greenwich would read it a day early. */
export const dueOn = new Intl.DateTimeFormat("en-US", {
  month: "short",
  day: "numeric",
  year: "numeric",
  timeZone: "UTC",
})