kanban/web/BoardPanel.tsx

import type { DragEvent } from 'react';
import { useState } from 'react';
import { Link, useSearchParams } from 'react-router';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { AlertTriangle, CalendarClock, X } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { TodoItem } from './useKanban';
import { useSelectedProject, useTodoItem, useTodoPatch, useTodoTree } from './useKanban';

/**
 * The board over one project's todo folder — one file per item.
 *
 * ── Carried across from the platform almost unchanged ──
 *
 * This was `TodoBoard/TodoBoardPanel.tsx`. The columns, the drag handling, the ordering and the detail
 * pane are as they were; what changed is where the data comes from — every read and write now names a
 * project, because there is more than one.
 *
 * Selection and the theme filter live in the URL (`?selected=`, `?theme=`, and now `?project=`), per the
 * navigation audit: a card is a real link, a filtered board is an addressable page, and back means what
 * it should.
 *
 * Writes go through `PATCH /kanban/item`, which touches frontmatter only and regenerates the index —
 * this board never holds state the files do not; a drag is a file edit and a refetch.
 */

const COLUMNS = [
  { status: 'open', label: 'Open' },
  { status: 'doing', label: 'Doing' },
  { status: 'blocked', label: 'Blocked' },
  { status: 'backburner', label: 'Backburner' },
  { status: 'done', label: 'Done' },
] as const;

export const BoardPanel = () => {
  // Read from the URL rather than passed in: this panel and the projects panel are siblings that never
  // speak to each other, per the navigation audit. The selector writes `?project=`; this reads it.
  const { selected: project } = useSelectedProject();
  const { data, isLoading, error } = useTodoTree(project);
  const patch = useTodoPatch(project);
  const [params] = useSearchParams();
  const selected = params.get('selected');
  const themeFilter = params.get('theme');
  const [dragOver, setDragOver] = useState<string | null>(null);

  const href = (changes: Record<string, string | null>): string => {
    const next = new URLSearchParams(params);
    for (const [key, value] of Object.entries(changes)) {
      if (value === null) next.delete(key);
      else next.set(key, value);
    }
    const qs = next.toString();
    return qs ? `?${qs}` : '.';
  };

  if (error) {
    return (
      <div className="flex h-full items-center justify-center p-8 text-center text-sm text-muted-foreground">
        The todo board is owner-only, and this account was refused. Nothing here is broken — there is simply nothing to
        show.
      </div>
    );
  }
  if (isLoading || !data) {
    return <div className="flex h-full items-center justify-center text-sm text-muted-foreground">Reading todo/…</div>;
  }

  const themes = data.themes.filter((t) => t.items.length > 0);
  const items = themes.flatMap((t) => t.items);
  const visible = themeFilter ? items.filter((i) => i.theme === themeFilter) : items;

  const drop = (status: string) => (ev: DragEvent) => {
    ev.preventDefault();
    setDragOver(null);
    const id = ev.dataTransfer.getData('text/todo-id');
    if (id) patch.mutate({ id, status });
  };

  return (
    <div className="flex h-full min-h-0">
      <div className="flex min-w-0 flex-1 flex-col">
        <div className="flex flex-wrap items-center gap-1.5 border-b border-border px-4 py-2">
          <Link
            to={href({ theme: null })}
            className={cn(
              'rounded-full px-2.5 py-0.5 text-xs',
              !themeFilter
                ? 'bg-primary text-primary-foreground'
                : 'bg-muted text-muted-foreground hover:text-foreground',
            )}
          >
            All · {items.filter((i) => i.status !== 'done').length}
          </Link>
          {themes.map((t) => {
            const open = t.items.filter((i) => i.status !== 'done').length;
            return (
              <Link
                key={t.theme}
                to={href({ theme: t.theme === themeFilter ? null : t.theme })}
                className={cn(
                  'rounded-full px-2.5 py-0.5 text-xs',
                  themeFilter === t.theme
                    ? 'bg-primary text-primary-foreground'
                    : 'bg-muted text-muted-foreground hover:text-foreground',
                )}
              >
                {t.heading.split('—')[0]?.trim()} · {open}
              </Link>
            );
          })}
        </div>

        <div className="flex min-h-0 flex-1 gap-3 overflow-x-auto p-4">
          {COLUMNS.map((col) => {
            const cards = visible
              .filter((i) => i.status === col.status)
              .sort((a, b) => (b.priority === 'urgent' ? 1 : 0) - (a.priority === 'urgent' ? 1 : 0));
            return (
              <div
                key={col.status}
                onDragOver={(ev) => {
                  ev.preventDefault();
                  setDragOver(col.status);
                }}
                onDragLeave={() => setDragOver(null)}
                onDrop={drop(col.status)}
                className={cn(
                  'flex w-64 shrink-0 flex-col rounded-lg border border-border bg-muted/30',
                  dragOver === col.status && 'border-primary bg-primary/5',
                )}
              >
                <div className="flex items-baseline justify-between px-3 py-2 text-xs font-semibold text-muted-foreground">
                  <span>{col.label}</span>
                  <span>{cards.length}</span>
                </div>
                <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2">
                  {cards.map((item) => (
                    <TodoCard
                      key={item.id}
                      item={item}
                      href={href({ selected: item.id })}
                      selected={selected === item.id}
                    />
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {selected ? <TodoDetail id={selected} closeHref={href({ selected: null })} /> : null}
    </div>
  );
};

type TodoCardProps = { item: TodoItem; href: string; selected: boolean };

const TodoCard = ({ item, href, selected }: TodoCardProps) => (
  <Link
    to={href}
    draggable
    onDragStart={(ev) => ev.dataTransfer.setData('text/todo-id', item.id)}
    className={cn(
      'block rounded-md border border-border bg-card p-2.5 text-left shadow-sm hover:border-primary/50',
      selected && 'border-primary',
    )}
  >
    <div className="text-xs leading-snug text-card-foreground">{item.title}</div>
    <div className="mt-1.5 flex flex-wrap items-center gap-1.5 text-[10px] text-muted-foreground">
      <span className="rounded bg-muted px-1 py-px">{item.theme}</span>
      {item.priority === 'urgent' && (
        <span className="flex items-center gap-0.5 rounded bg-destructive/15 px-1 py-px text-destructive">
          <AlertTriangle className="h-2.5 w-2.5" /> urgent
        </span>
      )}
      {item.due && (
        <span className="flex items-center gap-0.5">
          <CalendarClock className="h-2.5 w-2.5" /> {item.due}
        </span>
      )}
      <span>{item.created}</span>
    </div>
  </Link>
);

type TodoDetailProps = { id: string; closeHref: string };

const TodoDetail = ({ id, closeHref }: TodoDetailProps) => {
  // Same source as the board above it. Threading it down as a prop would work equally well; reading the
  // URL keeps the detail pane openable from a link without the board having rendered first.
  const { selected: project } = useSelectedProject();
  const { data, isLoading } = useTodoItem(project, id);
  const patch = useTodoPatch(project);
  const status = data?.meta.status ?? 'open';

  return (
    <div className="flex w-[28rem] shrink-0 flex-col border-l border-border">
      <div className="flex items-center justify-between gap-2 border-b border-border px-4 py-2">
        <span className="truncate font-mono text-xs text-muted-foreground">{id}</span>
        <div className="flex items-center gap-2">
          <select
            value={status}
            onChange={(ev) => patch.mutate({ id, status: ev.target.value })}
            className="rounded border border-border bg-background px-1.5 py-0.5 text-xs"
          >
            {COLUMNS.map((c) => (
              <option key={c.status} value={c.status}>
                {c.label}
              </option>
            ))}
          </select>
          <Link to={closeHref} className="text-muted-foreground hover:text-foreground">
            <X className="h-4 w-4" />
          </Link>
        </div>
      </div>
      <div className="file-viewer-md min-h-0 flex-1 overflow-y-auto px-4 py-3 text-sm">
        {isLoading || !data ? (
          <span className="text-sm text-muted-foreground">Reading…</span>
        ) : (
          <ReactMarkdown remarkPlugins={[remarkGfm]}>{data.body}</ReactMarkdown>
        )}
      </div>
    </div>
  );
};