add drag-and-drop for cards and columns with keyboard support

2026-02-15 18:55:35 +02:00
parent cc2a72b999
commit f225ef1ace
4 changed files with 426 additions and 67 deletions
--- a/src/components/board/DragOverlayContent.tsx
+++ b/src/components/board/DragOverlayContent.tsx
@@ -0,0 +1,81 @@
+import type { Card, Column, Label } from "@/types/board";
+import { LabelDots } from "@/components/board/LabelDots";
+import { ChecklistBar } from "@/components/board/ChecklistBar";
+import { format, isPast, isToday } from "date-fns";
+
+interface CardOverlayProps {
+  card: Card;
+  boardLabels: Label[];
+}
+
+export function CardOverlay({ card, boardLabels }: CardOverlayProps) {
+  const hasDueDate = card.dueDate != null;
+  const dueDate = hasDueDate ? new Date(card.dueDate!) : null;
+  const overdue = dueDate != null && isPast(dueDate) && !isToday(dueDate);
+
+  return (
+    <div className="w-[260px] rotate-2 scale-[1.03] rounded-lg bg-pylon-surface p-3 opacity-90 shadow-xl">
+      {/* Label dots */}
+      {card.labels.length > 0 && (
+        <div className="mb-2">
+          <LabelDots labelIds={card.labels} boardLabels={boardLabels} />
+        </div>
+      )}
+
+      {/* Card title */}
+      <p className="text-sm font-medium text-pylon-text">{card.title}</p>
+
+      {/* Footer row: due date + checklist */}
+      {(hasDueDate || card.checklist.length > 0) && (
+        <div className="mt-2 flex items-center gap-3">
+          {dueDate && (
+            <span
+              className={`font-mono text-xs ${
+                overdue
+                  ? "rounded bg-pylon-danger/10 px-1 py-0.5 text-pylon-danger"
+                  : "text-pylon-text-secondary"
+              }`}
+            >
+              {format(dueDate, "MMM d")}
+            </span>
+          )}
+          {card.checklist.length > 0 && (
+            <ChecklistBar checklist={card.checklist} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ColumnOverlayProps {
+  column: Column;
+}
+
+export function ColumnOverlay({ column }: ColumnOverlayProps) {
+  return (
+    <div className="w-[280px] rotate-1 scale-[1.02] rounded-lg bg-pylon-column p-3 opacity-90 shadow-xl">
+      <div className="flex items-center gap-2 border-b border-border pb-2">
+        <span className="truncate font-mono text-xs font-semibold uppercase tracking-widest text-pylon-text-secondary">
+          {column.title}
+        </span>
+        <span className="shrink-0 font-mono text-xs text-pylon-text-secondary">
+          {column.cardIds.length}
+        </span>
+      </div>
+      <div className="mt-2 space-y-1">
+        {column.cardIds.slice(0, 3).map((_, i) => (
+          <div
+            key={i}
+            className="h-6 rounded bg-pylon-surface/50"
+          />
+        ))}
+        {column.cardIds.length > 3 && (
+          <p className="text-center font-mono text-xs text-pylon-text-secondary">
+            +{column.cardIds.length - 3} more
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}