Notes

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 { NotesView } from "./components/notes-view"
import { currentUser, noteRows, noteSummary, shellNotifications } from "./data"
import { NAV, ROUTES } from "@/lib/dashboards/projects/nav"

/**
 * The notes board. The page is a server component: it reads every note
 * through `db.notes` and hands them to one client island, which owns the two
 * folders, the label filter, the search, the layout and every change a note
 * can take.
 */
export default function NotesPage() {
  return (
    <AppShell
      nav={NAV}
      activeHref={ROUTES.notes}
      user={currentUser()}
      notifications={shellNotifications()}
      now={REFERENCE_DATE}
      onSignOut={signOut}
    >
      <PageHeader
        title="Notes"
        description="Prose and checklists, labelled and pinned, with the archive one click away."
        meta={noteSummary()}
      />

      <NotesView notes={noteRows()} />
    </AppShell>
  )
}

/**
 * What this page reads. Every note comes from `db.notes`; nothing here is
 * written out. The client island imports only the types below — the label
 * vocabulary and the formatter it draws with live beside it in
 * `components/note-vocabulary.ts`, and the labels and the sort both sides
 * share sit in `board.ts`, so nothing that reaches `db` is ever pulled into
 * the browser.
 */
import { getInitials } from "@/lib/format"
import { db, type ChecklistItem, type Member, type Note, type NoteTone } from "@/lib/sample-data"

import { sortNotes } from "./board"

/** One note as the board draws it: the entity row, which already carries everything the card shows. */
export type NoteRow = Note

export type { ChecklistItem, NoteTone }

/** Every note, live and archived alike; the island files them by `archived`. */
export function noteRows(): NoteRow[] {
  return sortNotes(db.notes.all())
}

/** The line under the title: how much is on the board, and how much is filed away. */
export function noteSummary(): string {
  const rows = db.notes.all()
  const live = rows.filter((note) => !note.archived)
  const pinned = live.filter((note) => note.pinned).length
  const archived = rows.length - live.length
  return `${live.length} notes · ${pinned} pinned · ${archived} archived`
}

/** 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 }
}

/**
 * What the board offers and how it is read — the rules both sides of the
 * block need: the labels a note may carry and the tone each is drawn in, the
 * tints a card can take, and the order the cards are read in. `actions.ts`
 * filters a form's labels and tone against these; `data.ts` sorts the rows
 * it hands down; the islands sort what they filter and offer the same words.
 * Pure values and a pure function: no `db`, no clock — so the file sits
 * beside `data.ts` without ever reaching the store, and the vocabulary in
 * `components/` imports it back for the browser.
 */
import { type NoteTone } from "@/lib/sample-data"

export const LABELS: { name: string; tone: NoteTone }[] = [
  { name: "Personal", tone: "success" },
  { name: "Work", tone: "info" },
  { name: "Ideas", tone: "warning" },
  { name: "Meetings", tone: "neutral" },
  { name: "Planning", tone: "danger" },
  { name: "Reading", tone: "info" },
  { name: "Travel", tone: "success" },
]

export const LABEL_NAMES = LABELS.map((label) => label.name)

export const TONES: { value: NoteTone; label: string }[] = [
  { value: "info", label: "Info" },
  { value: "success", label: "Success" },
  { value: "warning", label: "Warning" },
  { value: "danger", label: "Danger" },
  { value: "neutral", label: "Neutral" },
]

/** Pinned first, then the most recently touched: the order a board is read in. */
export function sortNotes<T extends { pinned: boolean; updatedAt: Date }>(rows: T[]): T[] {
  return [...rows].sort((a, b) => {
    if (a.pinned !== b.pinned) return a.pinned ? -1 : 1
    return b.updatedAt.getTime() - a.updatedAt.getTime()
  })
}

"use server"

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

import { LABEL_NAMES, TONES } from "./board"

/**
 * 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.notes`,
 * 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

/** A note is a card on a board, not a document: two thousand characters is a long one. */
const MAX_BODY = 2_000

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

/** Adds a note to the board: a title, a body, labels from the vocabulary and an optional tint. */
export async function createNote(form: FormData): Promise<Result<Note>> {
  if (!isForm(form)) return invalidInput("Send the note as the form sends it.")
  const title = formText(form, "title")
  const body = formText(form, "body")
  // Only words the rail offers: anything else the form sent is dropped, so a
  // note can never carry a label nothing on screen can filter by.
  const labels = form
    .getAll("labels")
    .map(String)
    .filter((label, index, all) => LABEL_NAMES.includes(label) && all.indexOf(label) === index)
  const wanted = formText(form, "tone")
  const tone = TONES.find((entry) => entry.value === wanted)?.value

  if (!title) {
    return { ok: false, error: { code: "required", message: "Give the note a title.", field: "title" } }
  }
  if (title.length > MAX_TITLE) {
    return {
      ok: false,
      error: { code: "invalid", message: `Keep the title under ${MAX_TITLE} characters.`, field: "title" },
    }
  }
  if (body.length > MAX_BODY) {
    return {
      ok: false,
      error: { code: "invalid", message: `Keep the note under ${MAX_BODY.toLocaleString("en-US")} characters.`, field: "body" },
    }
  }

  return db.notes.create({
    title,
    body,
    labels,
    pinned: false,
    archived: false,
    ...(tone ? { tone } : {}),
    updatedAt: REFERENCE_DATE,
  })
}

/** Ticks or unticks one line of a checklist note. */
export async function toggleChecklistItem(noteId: string, itemId: string): Promise<Result<Note>> {
  const note = await db.notes.get(noteId)
  if (!note) return notFound(noteId)

  const item = note.checklist?.find((entry) => entry.id === itemId)
  if (!item) {
    return { ok: false, error: { code: "not_found", message: `No item "${itemId}" on “${note.title}”.` } }
  }

  const checklist = note.checklist!.map((entry) =>
    entry.id === itemId ? { ...entry, done: !entry.done } : entry
  )
  return db.notes.update(noteId, { checklist, updatedAt: REFERENCE_DATE })
}

/** Files a note away, or brings it back. Archiving unpins it: the archive holds nothing pinned. */
export async function setNoteArchived(id: string, archived: boolean): Promise<Result<Note>> {
  // Archived or not, and nothing between: a string or a number here was stored as sent.
  if (typeof archived !== "boolean") return invalidInput("Archive the note, or restore it.", "archived")
  const note = await db.notes.get(id)
  if (!note) return notFound(id)

  if (note.archived === archived) {
    return {
      ok: false,
      error: {
        code: "not_allowed",
        message: archived ? `“${note.title}” is already archived.` : `“${note.title}” is not archived.`,
      },
    }
  }

  return db.notes.update(id, {
    archived,
    ...(archived ? { pinned: false } : {}),
    updatedAt: REFERENCE_DATE,
  })
}

/** Pins a note to the front of the board, or takes the pin out. */
export async function pinNote(id: string): Promise<Result<Note>> {
  const note = await db.notes.get(id)
  if (!note) return notFound(id)

  if (note.archived) {
    return {
      ok: false,
      error: { code: "not_allowed", message: `“${note.title}” is archived. Restore it before pinning it.` },
    }
  }

  return db.notes.update(id, { pinned: !note.pinned, updatedAt: REFERENCE_DATE })
}

/** Removes a note for good. */
export async function deleteNote(id: string): Promise<Result<{ id: string }>> {
  const note = await db.notes.get(id)
  if (!note) return notFound(id)
  return db.notes.remove(id)
}

"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 { MultiSelect } from "@/components/ui/multi-select"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
import { Textarea } from "@/components/ui/textarea"

import { createNote } from "../actions"
import { type NoteRow } from "../data"
import { LABELS, TONES } from "./note-vocabulary"

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

const LABEL_OPTIONS = LABELS.map((label) => ({ value: label.name, label: label.name }))

export type AddNoteDialogProps = {
  onCreated: (note: NoteRow) => void
}

/**
 * Title it, write it, label it. The submit is a plain handler around the server
 * action rather than `useActionState`, because the board 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, so a blank title is answered where the title is typed.
 */
export function AddNoteDialog({ onCreated }: AddNoteDialogProps) {
  const [open, setOpen] = React.useState(false)
  const [title, setTitle] = React.useState("")
  const [body, setBody] = React.useState("")
  const [labels, setLabels] = React.useState<string[]>([])
  const [tone, setTone] = 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("")
    setBody("")
    setLabels([])
    setTone("")
    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 createNote(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()
      }}
    >
      <DialogTrigger
        render={
          <Button className="w-full">
            <PlusIcon data-icon="inline-start" aria-hidden="true" />
            Add note
          </Button>
        }
      />
      <DialogContent className="sm:max-w-lg">
        <form onSubmit={submit}>
          <DialogHeader>
            <DialogTitle>New note</DialogTitle>
            <DialogDescription>A title, what it says, and where it is filed.</DialogDescription>
          </DialogHeader>

          <div className="flex flex-col gap-5 py-4">
            {labels.map((label) => (
              <input key={label} type="hidden" name="labels" value={label} />
            ))}
            <input type="hidden" name="tone" value={tone} />

            <FormRow label="Title" htmlFor="note-title" required error={errorFor("title")}>
              <Input
                id="note-title"
                name="title"
                placeholder="Sprint review agenda"
                autoComplete="off"
                value={title}
                onChange={(event) => setTitle(event.target.value)}
              />
            </FormRow>

            <FormRow label="Body" htmlFor="note-body" error={errorFor("body")}>
              <Textarea
                id="note-body"
                name="body"
                rows={4}
                placeholder="What the note says…"
                value={body}
                onChange={(event) => setBody(event.target.value)}
                className="resize-none"
              />
            </FormRow>

            <div className="grid gap-5 sm:grid-cols-[minmax(0,1fr)_10rem]">
              <FormRow label="Labels" htmlFor="note-labels">
                <MultiSelect
                  id="note-labels"
                  aria-label="Labels"
                  options={LABEL_OPTIONS}
                  value={labels}
                  onValueChange={setLabels}
                  placeholder="Pick labels"
                />
              </FormRow>
              <FormRow label="Tint" htmlFor="note-tone">
                <NativeSelect
                  id="note-tone"
                  value={tone}
                  onChange={(event) => setTone(event.target.value)}
                  className="w-full"
                >
                  <NativeSelectOption value="">None</NativeSelectOption>
                  {TONES.map((entry) => (
                    <NativeSelectOption key={entry.value} value={entry.value}>
                      {entry.label}
                    </NativeSelectOption>
                  ))}
                </NativeSelect>
              </FormRow>
            </div>

            {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 note"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}

"use client"

import * as React from "react"
import {
  ArchiveIcon,
  ArchiveRestoreIcon,
  EllipsisIcon,
  PinIcon,
  PinOffIcon,
  Trash2Icon,
} from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Card, CardAction, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Label } from "@/components/ui/label"

import { type NoteRow, type NoteTone } from "../data"
import { TONE_TINT, touchedOn } from "./note-vocabulary"

export type NoteCardProps = {
  note: NoteRow
  /** The tone each label is drawn in; the rail can change it. */
  labelTones: Record<string, NoteTone>
  onToggleItem: (noteId: string, itemId: string) => void
  onPin: (id: string) => void
  onArchive: (id: string, archived: boolean) => void
  onDelete: (id: string) => void
}

/**
 * One note. A tinted band stands where a picture would — a note carries data
 * and a tone, never a photograph — then the title, the body or the checklist,
 * and the labels. The menu holds what changes the note's place on the board;
 * the checklist changes the note itself, in place.
 */
export function NoteCard({ note, labelTones, onToggleItem, onPin, onArchive, onDelete }: NoteCardProps) {
  const titleId = React.useId()
  const done = note.checklist?.filter((item) => item.done).length ?? 0

  return (
    <Card
      role="article"
      aria-labelledby={titleId}
      size="sm"
      data-note-id={note.id}
      className="mb-4 break-inside-avoid"
    >
      {note.tone ? (
        <div
          data-slot="note-band"
          data-tone={note.tone}
          aria-hidden="true"
          className={cn("h-6 shrink-0 rounded-t-xl", TONE_TINT[note.tone])}
        />
      ) : null}

      <CardHeader>
        {/* A real heading rather than CardTitle's div: a note's title is what a
            reader jumps to. An h2, a sibling of the rail's: on a phone the rail
            is folded away, and an h3 straight under the page's h1 skipped a level. */}
        <h2
          id={titleId}
          data-slot="card-title"
          className="flex min-w-0 items-start gap-1.5 font-heading text-sm leading-snug font-semibold"
        >
          {note.pinned ? (
            <PinIcon aria-hidden="true" className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
          ) : null}
          <span className="min-w-0 break-words">{note.title}</span>
        </h2>
        {/* Said once, outside the heading, so the card is still named by its
            title alone and a reader still hears that it is pinned. */}
        {note.pinned ? <span className="sr-only">Pinned</span> : null}
        <CardAction className="self-start">
          <DropdownMenu>
            <DropdownMenuTrigger
              render={
                <Button
                  type="button"
                  variant="ghost"
                  size="icon-xs"
                  aria-label={`Actions for ${note.title}`}
                  className="-mr-1 text-muted-foreground"
                >
                  <EllipsisIcon aria-hidden="true" />
                </Button>
              }
            />
            <DropdownMenuContent align="end" className="w-auto min-w-40">
              {note.archived ? null : (
                <DropdownMenuItem onClick={() => onPin(note.id)}>
                  {note.pinned ? <PinOffIcon aria-hidden="true" /> : <PinIcon aria-hidden="true" />}
                  {note.pinned ? "Unpin" : "Pin"}
                </DropdownMenuItem>
              )}
              <DropdownMenuItem onClick={() => onArchive(note.id, !note.archived)}>
                {note.archived ? (
                  <ArchiveRestoreIcon aria-hidden="true" />
                ) : (
                  <ArchiveIcon aria-hidden="true" />
                )}
                {note.archived ? "Restore" : "Archive"}
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem variant="destructive" onClick={() => onDelete(note.id)}>
                <Trash2Icon aria-hidden="true" />
                Delete
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </CardAction>
      </CardHeader>

      <CardContent className="flex flex-col gap-3">
        {note.checklist && note.checklist.length > 0 ? (
          <ul aria-label={`${done} of ${note.checklist.length} done`} className="flex flex-col gap-2">
            {note.checklist.map((item) => (
              <li key={item.id}>
                <Label
                  className={cn(
                    "items-start gap-2.5 font-normal leading-5",
                    item.done && "text-muted-foreground line-through"
                  )}
                >
                  <Checkbox
                    checked={item.done}
                    onCheckedChange={() => onToggleItem(note.id, item.id)}
                    className="mt-0.5"
                  />
                  <span>{item.text}</span>
                </Label>
              </li>
            ))}
          </ul>
        ) : null}
        {note.body ? <p className="text-sm leading-5 text-foreground/90">{note.body}</p> : null}
      </CardContent>

      <CardFooter className="flex-wrap gap-1.5 py-2">
        {note.labels.map((label) => {
          const tone = labelTones[label] ?? "neutral"
          return (
            <span
              key={label}
              data-slot="note-label"
              data-tone={tone}
              className={cn(
                "inline-flex h-5 items-center rounded-full px-2 text-xs font-medium",
                TONE_TINT[tone]
              )}
            >
              {label}
            </span>
          )
        })}
        <time
          dateTime={note.updatedAt.toISOString()}
          className="ml-auto text-xs tabular-nums text-faint-foreground"
        >
          {touchedOn.format(note.updatedAt)}
        </time>
      </CardFooter>
    </Card>
  )
}

import { type NoteTone } from "../data"

/**
 * What the board is made of, as the reader sees it: the labels it offers and
 * the tone each is drawn in, the tints a card can carry, and the two ways to
 * lay the cards out. Vocabulary, not data — it lives beside the island rather
 * than in `data.ts`, which reads `db` and must never reach the browser. The
 * labels, the tones and the sort the server shares are `../board`, imported
 * back here so the islands read every word they print from one place; a
 * note's `labels` are words from that list.
 */
export { LABELS, LABEL_NAMES, TONES, sortNotes } from "../board"

/** The dot beside a label, in its tone. */
export const TONE_DOT: Record<NoteTone, string> = {
  info: "bg-info",
  success: "bg-success",
  warning: "bg-warning",
  danger: "bg-danger",
  neutral: "bg-muted-foreground",
}

/** The tinted band across the top of a card, and a label chip's tint. */
export const TONE_TINT: Record<NoteTone, string> = {
  info: "bg-info-muted text-info",
  success: "bg-success-muted text-success",
  warning: "bg-warning-muted text-warning",
  danger: "bg-danger-muted text-danger",
  neutral: "bg-muted text-muted-foreground",
}

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

/**
 * When a note was last touched, pinned to UTC: every timestamp on this page is
 * an instant, and a note edited late in the day would otherwise be dated
 * differently either side of Greenwich.
 */
export const touchedOn = new Intl.DateTimeFormat("en-US", {
  month: "short",
  day: "numeric",
  timeZone: "UTC",
})

"use client"

import * as React from "react"
import { ArchiveIcon, PencilIcon, StickyNoteIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"

import { type NoteTone } from "../data"
import { LABELS, TONES, TONE_DOT } from "./note-vocabulary"

export type Folder = "notes" | "archive"

export type NotesRailProps = {
  /** The dialog trigger, which the island owns because it owns the rows. */
  addNote: React.ReactNode
  folder: Folder
  counts: { notes: number; archive: number }
  onFolderChange: (folder: Folder) => void
  /** The label the board is narrowed to, or null for all of them. */
  label: string | null
  labelCounts: Record<string, number>
  onLabelChange: (label: string | null) => void
  labelTones: Record<string, NoteTone>
  onLabelToneChange: (label: string, tone: NoteTone) => void
}

const ROW =
  "flex h-8 w-full items-center gap-2 rounded-md px-2 text-sm transition-colors focus-ring hover:bg-muted aria-pressed:bg-brand-muted aria-pressed:font-medium aria-pressed:text-foreground"

/**
 * The left rail: the add button, the two folders with their counts, and the
 * labels the board can be narrowed to. Labels are vocabulary — the words live
 * in `note-vocabulary.ts` — so "Edit labels" changes how they are drawn, not
 * what they are: each row grows a tone picker, and the chips follow.
 */
export function NotesRail({
  addNote,
  folder,
  counts,
  onFolderChange,
  label,
  labelCounts,
  onLabelChange,
  labelTones,
  onLabelToneChange,
}: NotesRailProps) {
  const [editing, setEditing] = React.useState(false)

  return (
    <aside aria-label="Folders and labels" className="flex flex-col gap-3 lg:w-56 lg:shrink-0">
      {addNote}

      <div className="panel flex flex-col gap-3 p-2">
        <div className="flex flex-wrap gap-1 lg:flex-col">
          <button
            type="button"
            aria-pressed={folder === "notes"}
            onClick={() => onFolderChange("notes")}
            className={cn(ROW, "w-auto lg:w-full")}
          >
            <StickyNoteIcon aria-hidden="true" className="size-4 text-muted-foreground" />
            Notes{" "}
            <span className="ml-auto pl-3 text-xs tabular-nums text-muted-foreground">{counts.notes}</span>
          </button>
          <button
            type="button"
            aria-pressed={folder === "archive"}
            onClick={() => onFolderChange("archive")}
            className={cn(ROW, "w-auto lg:w-full")}
          >
            <ArchiveIcon aria-hidden="true" className="size-4 text-muted-foreground" />
            Archive{" "}
            <span className="ml-auto pl-3 text-xs tabular-nums text-muted-foreground">{counts.archive}</span>
          </button>
          <Button
            type="button"
            variant="ghost"
            size="sm"
            aria-pressed={editing}
            onClick={() => setEditing((current) => !current)}
            className="justify-start px-2 font-normal text-foreground aria-pressed:bg-brand-muted aria-pressed:font-medium"
          >
            <PencilIcon aria-hidden="true" className="text-muted-foreground" />
            Edit labels
          </Button>
        </div>

        <div className="flex flex-col gap-1 border-t pt-3">
          <p className="type-eyebrow px-2">Labels</p>
          <ul className="flex flex-wrap gap-1 lg:flex-col">
            {LABELS.map((entry) => {
              const tone = labelTones[entry.name] ?? entry.tone
              const count = labelCounts[entry.name] ?? 0
              return (
                <li key={entry.name} className="flex items-center gap-1">
                  <button
                    type="button"
                    aria-pressed={label === entry.name}
                    onClick={() => onLabelChange(label === entry.name ? null : entry.name)}
                    className={cn(ROW, "w-auto lg:w-full")}
                  >
                    <span aria-hidden="true" className={cn("size-2 shrink-0 rounded-full", TONE_DOT[tone])} />
                    {entry.name}{" "}
                    <span className="ml-auto pl-3 text-xs tabular-nums text-muted-foreground">{count}</span>
                  </button>
                  {editing ? (
                    <NativeSelect
                      size="sm"
                      aria-label={`Tone for ${entry.name}`}
                      value={tone}
                      onChange={(event) => onLabelToneChange(entry.name, event.target.value as NoteTone)}
                      className="w-24 shrink-0"
                    >
                      {TONES.map((option) => (
                        <NativeSelectOption key={option.value} value={option.value}>
                          {option.label}
                        </NativeSelectOption>
                      ))}
                    </NativeSelect>
                  ) : null}
                </li>
              )
            })}
          </ul>
        </div>
      </div>
    </aside>
  )
}

"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 { deleteNote, pinNote, setNoteArchived, toggleChecklistItem } from "../actions"
import { type NoteRow, type NoteTone } from "../data"
import { AddNoteDialog } from "./add-note-dialog"
import { NoteCard } from "./note-card"
import { LABELS, VIEWS, sortNotes } from "./note-vocabulary"
import { NotesRail, type Folder } from "./notes-rail"

export type NotesViewProps = {
  notes: NoteRow[]
}

/**
 * The board. One island, because the folder, the label, the search and the
 * view all narrow the same rows, and every change to a note comes back as the
 * row the action wrote. A tick is optimistic — the box checks at once and the
 * action writes behind it — and a refusal puts it back and says why, in a
 * callout above the cards; a success is a status line under the toolbar.
 */
export function NotesView({ notes }: NotesViewProps) {
  const [rows, setRows] = React.useState(notes)
  const [folder, setFolder] = React.useState<Folder>("notes")
  const [label, setLabel] = React.useState<string | null>(null)
  const [query, setQuery] = React.useState("")
  const [view, setView] = React.useState("grid")
  const [labelTones, setLabelTones] = React.useState<Record<string, NoteTone>>(() =>
    Object.fromEntries(LABELS.map((entry) => [entry.name, entry.tone]))
  )
  const [refusal, setRefusal] = React.useState<string | null>(null)
  const [status, setStatus] = React.useState<string | null>(null)

  const live = rows.filter((note) => !note.archived)
  const archived = rows.filter((note) => note.archived)
  const inFolder = folder === "notes" ? live : archived
  const needle = query.trim().toLowerCase()
  const visible = sortNotes(
    inFolder.filter(
      (note) =>
        (label === null || note.labels.includes(label)) &&
        (needle === "" ||
          note.title.toLowerCase().includes(needle) ||
          note.body.toLowerCase().includes(needle) ||
          (note.checklist ?? []).some((item) => item.text.toLowerCase().includes(needle)))
    )
  )

  const labelCounts: Record<string, number> = {}
  for (const note of inFolder) for (const name of note.labels) labelCounts[name] = (labelCounts[name] ?? 0) + 1

  // 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: NoteRow) {
    setRows((current) => [next, ...current.filter((note) => note.id !== next.id)])
  }

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

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

  const created = React.useCallback((note: NoteRow) => {
    setRows((current) => [note, ...current])
    setFolder("notes")
    setRefusal(null)
    setStatus(`“${note.title}” added.`)
  }, [])

  // Flips one line of one note in place; the same flip undoes it, so a refusal
  // reverts only that line and never a snapshot of the whole board.
  function flipItem(noteId: string, itemId: string) {
    setRows((current) =>
      current.map((note) =>
        note.id === noteId && note.checklist
          ? {
              ...note,
              checklist: note.checklist.map((item) =>
                item.id === itemId ? { ...item, done: !item.done } : item
              ),
            }
          : note
      )
    )
  }

  async function toggleItem(noteId: string, itemId: string) {
    flipItem(noteId, itemId)
    const result = await toggleChecklistItem(noteId, itemId)
    if (result.ok) {
      replace(result.data)
      setRefusal(null)
    } else {
      flipItem(noteId, itemId)
      refused(result.error.message)
    }
  }

  async function pin(id: string) {
    const result = await pinNote(id)
    if (!result.ok) return refused(result.error.message)
    replace(result.data)
    said(result.data.pinned ? `“${result.data.title}” pinned.` : `“${result.data.title}” unpinned.`)
  }

  async function archive(id: string, next: boolean) {
    const result = await setNoteArchived(id, next)
    if (!result.ok) return refused(result.error.message)
    replace(result.data)
    said(next ? `“${result.data.title}” archived.` : `“${result.data.title}” restored to Notes.`)
  }

  async function remove(id: string) {
    const gone = rows.find((note) => note.id === id)
    const result = await deleteNote(id)
    if (!result.ok) return refused(result.error.message)
    setRows((current) => current.filter((note) => note.id !== result.data.id))
    said(`“${gone?.title ?? id}” deleted.`)
  }

  return (
    <div className="flex flex-col gap-4 lg:flex-row lg:items-start">
      <NotesRail
        addNote={<AddNoteDialog onCreated={created} />}
        folder={folder}
        counts={{ notes: live.length, archive: archived.length }}
        onFolderChange={(next) => {
          setFolder(next)
          setLabel(null)
        }}
        label={label}
        labelCounts={labelCounts}
        onLabelChange={setLabel}
        labelTones={labelTones}
        onLabelToneChange={(name, tone) => setLabelTones((current) => ({ ...current, [name]: tone }))}
      />

      <section aria-label={folder === "notes" ? "Notes" : "Archive"} className="flex min-w-0 flex-1 flex-col gap-4">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <SearchInput
            aria-label="Search notes"
            placeholder="Search notes"
            // Controlled with a debounce: the field keeps its own draft while
            // the board re-lays eighteen cards behind it, and reports once the
            // typing pauses.
            value={query}
            onValueChange={setQuery}
            debounce={150}
            clearable
            className="w-full sm:w-72"
          />
          <SegmentedControl aria-label="Layout" options={VIEWS} value={view} onValueChange={setView} size="sm" />
        </div>

        {/* Two slots, never one: a success is a line under the toolbar, a
            refusal a callout above the cards. 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={folder === "archive" ? "Nothing archived" : "No notes here"}
            description={
              label || needle
                ? "No note matches that label or search."
                : folder === "archive"
                  ? "Archive a note from its menu and it lands here."
                  : "Add a note to start the board."
            }
          />
        ) : (
          <div
            data-view={view}
            className={cn(
              view === "grid" ? "columns-1 gap-4 sm:columns-2 xl:columns-3" : "mx-auto flex w-full max-w-2xl flex-col"
            )}
          >
            {visible.map((note) => (
              <NoteCard
                key={note.id}
                note={note}
                labelTones={labelTones}
                onToggleItem={toggleItem}
                onPin={pin}
                onArchive={archive}
                onDelete={remove}
              />
            ))}
          </div>
        )}
      </section>
    </div>
  )
}