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 { Button } from "@/components/ui/button";
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 BoardColumnProps {
  columnId: string;
  label: string;
  items: ViewObject[];
  dotClass: string;
  borderTopClass: string;
  onAddTask?: () => void;
}

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

export function BoardColumn({
  columnId,
  label,
  items,
  dotClass,
  borderTopClass,
  onAddTask,
}: 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 p-2">
          <Button
            type="button"
            variant="ghost"
            size="sm"
            className="w-full justify-start gap-2 text-muted-foreground hover:text-foreground"
            onClick={onAddTask}
          >
            <Plus className="h-4 w-4" />
            Add task
          </Button>
        </div>
      </div>
    </div>
  );
}