ubiquitous-invention/apps/web/components/views/board/board-column.tsx

"use client";

import * as React from "react";
import { useDroppable } from "@dnd-kit/core";
import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
import { Plus } from "lucide-react";

import { ScrollArea } from "@/components/ui/scroll-area";
import type { ViewObject } from "@/lib/hooks/use-view-data";
import { cn } from "@/lib/utils";

import { BoardCard } from "./board-card";

export interface BoardColumnInlineCreate {
  isCreating: boolean;
  newTitle: string;
  onNewTitleChange: (value: string) => void;
  onOpen: () => void;
  onSubmit: () => void;
  onCancel: () => void;
  isPending: boolean;
}

export interface BoardColumnProps {
  columnId: string;
  label: string;
  items: ViewObject[];
  dotClass: string;
  borderTopClass: string;
  inlineCreate: BoardColumnInlineCreate;
}

function formatColumnLabel(id: string): string {
  return id.replace(/_/g, " ");
}

export function BoardColumn({
  columnId,
  label,
  items,
  dotClass,
  borderTopClass,
  inlineCreate,
}: BoardColumnProps) {
  const { setNodeRef, isOver } = useDroppable({
    id: columnId,
    data: { type: "column", columnId },
  });

  const ids = items.map((i) => i.id);
  const displayLabel = label || formatColumnLabel(columnId);
  const showEmptyDropLine = items.length === 0 && isOver;

  return (
    <div
      className={cn(
        "flex h-full min-h-[min(420px,70vh)] w-[min(100%,290px)] min-w-[280px] max-w-[300px] shrink-0 flex-col overflow-hidden rounded-lg border border-border/60 bg-muted/40 shadow-sm dark:bg-muted/25",
        borderTopClass,
      )}
    >
      <header className="shrink-0 border-b border-border/50 px-3 py-2.5">
        <div className="flex items-center gap-2">
          <span
            className={cn("h-2 w-2 shrink-0 rounded-full", dotClass)}
            aria-hidden
          />
          <h3 className="min-w-0 flex-1 truncate text-sm font-semibold capitalize text-foreground">
            {displayLabel}
          </h3>
          <span className="tabular-nums text-xs font-medium text-muted-foreground">
            {items.length}
          </span>
        </div>
      </header>

      <div ref={setNodeRef} className="relative flex min-h-0 flex-1 flex-col">
        {showEmptyDropLine && (
          <div
            className="pointer-events-none absolute inset-x-2 top-2 z-0 h-0.5 rounded-full bg-primary/80 shadow-[0_0_10px_hsl(var(--primary)/0.5)]"
            aria-hidden
          />
        )}
        <ScrollArea className="min-h-0 flex-1 px-2 pt-2">
          <SortableContext items={ids} strategy={verticalListSortingStrategy}>
            <ul className="flex flex-col gap-2 pb-2">
              {items.map((object) => (
                <li key={object.id}>
                  <BoardCard object={object} />
                </li>
              ))}
            </ul>
          </SortableContext>
        </ScrollArea>

        <div className="shrink-0 border-t border-border/40">
          {inlineCreate.isCreating ? (
            <div className="flex items-center gap-2 px-2 py-2">
              <input
                autoFocus
                className="min-w-0 flex-1 rounded-md border border-border/60 bg-background px-2 py-1.5 text-sm outline-none ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
                placeholder="Task title…"
                value={inlineCreate.newTitle}
                onChange={(e) => inlineCreate.onNewTitleChange(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter" && inlineCreate.newTitle.trim()) {
                    e.preventDefault();
                    inlineCreate.onSubmit();
                  }
                  if (e.key === "Escape") {
                    inlineCreate.onCancel();
                  }
                }}
                onBlur={() => {
                  if (inlineCreate.isPending) return;
                  if (inlineCreate.newTitle.trim()) {
                    inlineCreate.onSubmit();
                  } else {
                    inlineCreate.onCancel();
                  }
                }}
              />
            </div>
          ) : (
            <button
              type="button"
              className="flex w-full items-center gap-2 px-2 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground"
              onClick={inlineCreate.onOpen}
            >
              <Plus className="size-4 shrink-0" />
              Add task
            </button>
          )}
        </div>
      </div>
    </div>
  );
}