@knotpad/app 0.1.0 → 0.1.1

package/components/kanban/kanban-board.tsx

@@ -1,361 +0,0 @@
-"use client";
-
-import { useState, useRef, useEffect } from "react";
-import { useRouter } from "next/navigation";
-import {
-  DndContext,
-  DragEndEvent,
-  DragOverEvent,
-  DragOverlay,
-  DragStartEvent,
-  PointerSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-  pointerWithin,
-  rectIntersection,
-} from "@dnd-kit/core";
-import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { KanbanColumn } from "./kanban-column";
-import { KanbanCard } from "./kanban-card";
-import { useKanbanStatuses } from "./kanban-status-context";
-import { loadPreference, savePreference } from "@/lib/view-preferences";
-import { isOverdue } from "@/lib/task-utils";
-
-export type KanbanTask = {
-  id: string;
-  title: string;
-  status: string;
-  claimedBy: string | null;
-  claimedByAlias: string | null;
-  lastHeartbeat: string | null;
-  assigneeType: "HUMAN" | "AGENT";
-  assignee: { id: string; name: string | null; email: string | null } | null;
-  note: { id: string; title: string; folder?: { id: string; name: string } | null };
-  dueDate: string | null;
-};
-
-type Props = { tasks: KanbanTask[]; filterNoteId?: string; filterFolderId?: string };
-
-type BoardFilter = "all" | "overdue" | "agent";
-
-export function KanbanBoard({ tasks: initialTasks, filterNoteId, filterFolderId }: Props) {
-  const router = useRouter();
-  const [tasks, setTasks] = useState(initialTasks);
-  const [activeTask, setActiveTask] = useState<KanbanTask | null>(null);
-  const [density, setDensity] = useState<"comfortable" | "compact">(() =>
-    loadPreference("brief:kanban-density", "comfortable")
-  );
-  const [boardFilter, setBoardFilter] = useState<BoardFilter>(() =>
-    loadPreference("brief:kanban-filter", "all")
-  );
-  // Track the status before drag starts so we can revert on bad drops or errors.
-  const preDragStatusRef = useRef<string | null>(null);
-  // True while a drag (or its pending PATCH) is in flight. Used to avoid
-  // re-syncing from stale `initialTasks` and snapping the card back to its
-  // pre-drag column before the server refresh lands.
-  const isDraggingRef = useRef(false);
-  const kanbanStatuses = useKanbanStatuses();
-  const visibleColumns = kanbanStatuses.filter((s) => s.isVisible);
-
-  // Sync server-filtered tasks when props change, but never interrupt an active drag.
-  useEffect(() => {
-    if (!isDraggingRef.current) setTasks(initialTasks);
-  }, [initialTasks]);
-
-  useEffect(() => {
-    savePreference("brief:kanban-density", density);
-  }, [density]);
-
-  useEffect(() => {
-    savePreference("brief:kanban-filter", boardFilter);
-  }, [boardFilter]);
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
-    // Press-and-hold to "pick up" a card on touch. A generous tolerance means
-    // natural finger drift during the hold doesn't cancel the pickup and fall
-    // through to a tap (which opens the task instead of dragging it).
-    useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 25 } })
-  );
-
-  const filtered = filterNoteId ? tasks.filter((t) => t.note.id === filterNoteId) : tasks;
-  const filteredTasks = filtered.filter((task) => {
-    if (boardFilter === "overdue") return isOverdue(task);
-    if (boardFilter === "agent") return task.assigneeType === "AGENT";
-    return true;
-  });
-
-  // Collect orphaned tasks (status not in any visible column)
-  const visibleColumnKeys = new Set(visibleColumns.map((c) => c.key));
-  const orphanedTasks = filteredTasks.filter((t) => !visibleColumnKeys.has(t.status));
-
-  function handleDragStart({ active }: DragStartEvent) {
-    const task = tasks.find((t) => t.id === active.id) ?? null;
-    setActiveTask(task);
-    preDragStatusRef.current = task?.status ?? null;
-    isDraggingRef.current = true;
-  }
-
-  // over.id can be a column ID or a card ID (when hovering over a card).
-  // If it's a card ID, infer the target column from that card's current status.
-  function resolveColumn(overId: string): string | undefined {
-    return (
-      visibleColumns.find((c) => c.key === overId)?.key ??
-      tasks.find((t) => t.id === overId)?.status
-    );
-  }
-
-  function handleDragOver({ active, over }: DragOverEvent) {
-    if (!over) return;
-    const columnId = resolveColumn(over.id as string);
-    if (!columnId) return;
-
-    setTasks((prev) =>
-      prev.map((t) => (t.id === active.id ? { ...t, status: columnId } : t))
-    );
-  }
-
-  // Reusable function to move a task to a new status. Used by both drag-end
-  // and the context-menu "Move to status" action. Optimistic with revert on failure.
-  // `prevStatus` is the status to compare against (the task's status *before* the
-  // move). It defaults to the current state value, but callers that have already
-  // applied an optimistic update must pass the original status explicitly —
-  // otherwise the current-state read will already equal `newStatus` and the
-  // PATCH will be skipped.
-  async function moveTask(taskId: string, newStatus: string, prevStatus?: string) {
-    const currentState = tasks.find((t) => t.id === taskId)?.status;
-    const originalStatus = prevStatus ?? currentState;
-    if (!originalStatus || newStatus === originalStatus) return;
-
-    // Optimistic update (idempotent — caller may have already applied it)
-    setTasks((prev) => prev.map((t) => (t.id === taskId ? { ...t, status: newStatus } : t)));
-
-    try {
-      const res = await fetch(`/api/tasks/${taskId}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ status: newStatus }),
-      });
-      if (!res.ok) throw new Error("patch failed");
-      router.refresh();
-    } catch {
-      // Revert optimistic update on failure.
-      setTasks((prev) => prev.map((t) => (t.id === taskId ? { ...t, status: originalStatus } : t)));
-    }
-  }
-
-  async function handleDragEnd({ active, over }: DragEndEvent) {
-    setActiveTask(null);
-
-    const columnId = over ? resolveColumn(over.id as string) : undefined;
-
-    // Dropped outside any valid target — revert to original status.
-    if (!columnId) {
-      if (preDragStatusRef.current) {
-        setTasks((prev) =>
-          prev.map((t) =>
-            t.id === active.id ? { ...t, status: preDragStatusRef.current! } : t
-          )
-        );
-      }
-      preDragStatusRef.current = null;
-      isDraggingRef.current = false;
-      return;
-    }
-    // Capture the pre-drag status BEFORE resetting the ref, so moveTask can
-    // compare against the *original* column (not the one dragOver already set).
-    const prevStatus = preDragStatusRef.current;
-    preDragStatusRef.current = null;
-
-    // Apply the resolved column immediately — don't rely on dragOver having
-    // already fired (touch drags can drop before a final dragOver event).
-    setTasks((prev) =>
-      prev.map((t) => (t.id === active.id ? { ...t, status: columnId } : t))
-    );
-
-    isDraggingRef.current = false;
-    // Pass the pre-drag status so moveTask compares against the *original*
-    // column, not the one handleDragOver already applied optimistically.
-    await moveTask(active.id as string, columnId, prevStatus ?? undefined);
-  }
-
-  if (filtered.length === 0) {
-    return (
-      <div className="flex flex-1 flex-col items-center justify-center gap-3 text-center">
-        <p className="text-sm font-medium text-zinc-500">No tasks yet</p>
-        <p className="text-xs text-zinc-700 max-w-xs">
-          Write a note and add <code className="font-mono text-zinc-500">- [ ] Task description</code> to create tasks.
-        </p>
-      </div>
-    );
-  }
-
-  const boardScopeLabel = filterNoteId
-    ? "Filtered to one note"
-    : filterFolderId
-    ? "Filtered to one folder"
-    : "All visible tasks";
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={(args) => {
-        const hits = pointerWithin(args);
-        return hits.length > 0 ? hits : rectIntersection(args);
-      }}
-      autoScroll={{ threshold: { x: 0.1, y: 0.1 } }}
-      onDragStart={handleDragStart}
-      onDragOver={handleDragOver}
-      onDragEnd={handleDragEnd}
-    >
-      <div className="flex h-full min-h-0 flex-col gap-3 p-3 md:p-4">
-        <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-zinc-800 bg-zinc-950/60 px-3 py-2">
-          <p className="text-xs text-zinc-500">{boardScopeLabel}</p>
-          <div className="flex flex-wrap items-center gap-2">
-            <div
-              aria-label="Quick filters"
-              className="inline-flex items-center rounded-md border border-zinc-800 bg-zinc-950 p-1"
-            >
-              {[
-                { key: "all", label: "All" },
-                { key: "overdue", label: "Overdue" },
-                { key: "agent", label: "Agent" },
-              ].map((filterOption) => (
-                <button
-                  key={filterOption.key}
-                  type="button"
-                  aria-pressed={boardFilter === filterOption.key}
-                  onClick={() => setBoardFilter(filterOption.key as BoardFilter)}
-                  className={`rounded px-2 py-1 text-xs transition-colors ${
-                    boardFilter === filterOption.key
-                      ? "bg-zinc-800 text-zinc-200"
-                      : "text-zinc-500 hover:text-zinc-300"
-                  }`}
-                >
-                  {filterOption.label}
-                </button>
-              ))}
-            </div>
-            <div
-              aria-label="Card density"
-              className="inline-flex items-center rounded-md border border-zinc-800 bg-zinc-950 p-1"
-            >
-              <button
-                type="button"
-                aria-pressed={density === "comfortable"}
-                onClick={() => setDensity("comfortable")}
-                className={`rounded px-2 py-1 text-xs transition-colors ${
-                  density === "comfortable"
-                    ? "bg-zinc-800 text-zinc-200"
-                    : "text-zinc-500 hover:text-zinc-300"
-                }`}
-              >
-                Comfortable
-              </button>
-              <button
-                type="button"
-                aria-pressed={density === "compact"}
-                onClick={() => setDensity("compact")}
-                className={`rounded px-2 py-1 text-xs transition-colors ${
-                  density === "compact"
-                    ? "bg-zinc-800 text-zinc-200"
-                    : "text-zinc-500 hover:text-zinc-300"
-                }`}
-              >
-                Compact
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div className="flex min-h-0 flex-col gap-3 overflow-y-auto md:flex-row md:overflow-x-auto md:overflow-y-hidden">
-          {visibleColumns.map((col) => {
-            const colTasks = filteredTasks.filter((t) => t.status === col.key);
-            return (
-              <SortableContext
-                key={col.key}
-                id={col.key}
-                items={colTasks.map((t) => t.id)}
-                strategy={verticalListSortingStrategy}
-              >
-                <KanbanColumn
-                  id={col.key}
-                  label={col.label}
-                  color={col.color}
-                  count={colTasks.length}
-                  density={density}
-                  isFilteredEmpty={boardFilter !== "all" && colTasks.length === 0}
-                >
-                  {colTasks.map((task) => (
-                    <KanbanCard
-                      key={task.id}
-                      task={task}
-                      onMoveTask={moveTask}
-                      backHref={
-                        filterNoteId
-                          ? `/kanban?note=${filterNoteId}`
-                          : filterFolderId
-                          ? `/kanban?folder=${filterFolderId}`
-                          : "/kanban"
-                      }
-                    />
-                  ))}
-                </KanbanColumn>
-              </SortableContext>
-            );
-          })}
-
-          {/* Orphaned tasks column - tasks with status not in visible columns */}
-          {orphanedTasks.length > 0 && (
-            <SortableContext
-              key="orphaned"
-              id="orphaned"
-              items={orphanedTasks.map((t) => t.id)}
-              strategy={verticalListSortingStrategy}
-            >
-              <KanbanColumn
-                id="orphaned"
-                label="Uncategorized"
-                color="border-zinc-600"
-                count={orphanedTasks.length}
-                density={density}
-              >
-                {orphanedTasks.map((task) => (
-                  <KanbanCard
-                    key={task.id}
-                    task={task}
-                    onMoveTask={moveTask}
-                    backHref={
-                      filterNoteId
-                        ? `/kanban?note=${filterNoteId}`
-                        : filterFolderId
-                        ? `/kanban?folder=${filterFolderId}`
-                        : "/kanban"
-                    }
-                  />
-                ))}
-              </KanbanColumn>
-            </SortableContext>
-          )}
-        </div>
-      </div>
-
-      <DragOverlay>
-        {activeTask && (
-          <KanbanCard
-            task={activeTask}
-            isDragging
-            backHref={
-              filterNoteId
-                ? `/kanban?note=${filterNoteId}`
-                : filterFolderId
-                ? `/kanban?folder=${filterFolderId}`
-                : "/kanban"
-            }
-          />
-        )}
-      </DragOverlay>
-    </DndContext>
-  );
-}

package/components/kanban/kanban-card-menu.tsx

@@ -1,102 +0,0 @@
-"use client";
-
-import React, { forwardRef } from "react";
-import type { KanbanTask } from "./kanban-board";
-import type { KanbanStatusConfig } from "@/lib/kanban-status";
-
-// Map status border-color classes to a dot color class for the menu indicator.
-const DOT_COLORS: Record<string, string> = {
-  "border-zinc-700": "bg-zinc-500",
-  "border-violet-700": "bg-violet-500",
-  "border-blue-700": "bg-blue-500",
-  "border-amber-700": "bg-amber-500",
-  "border-emerald-700": "bg-emerald-500",
-  "border-zinc-600": "bg-zinc-400",
-};
-
-type MenuProps = {
-  task: KanbanTask;
-  statuses: KanbanStatusConfig[];
-  onSelect: (statusKey: string) => void;
-  onClose: () => void;
-  /** When true, renders without the floating wrapper (for MobileBottomSheet). */
-  mobile?: boolean;
-  /** Position for the desktop floating menu. */
-  pos?: { top: number; left: number };
-};
-
-function StatusList({
-  task,
-  statuses,
-  onSelect,
-  onClose,
-}: Pick<MenuProps, "task" | "statuses" | "onSelect" | "onClose">) {
-  return (
-    <div className="flex flex-col">
-      {statuses.map((s) => {
-        const isCurrent = s.key === task.status;
-        const dotColor = DOT_COLORS[s.color] ?? "bg-zinc-500";
-        return (
-          <button
-            key={s.key}
-            type="button"
-            disabled={isCurrent}
-            onMouseDown={(e) => {
-              // Use mousedown so the menu closes before the outside-click handler fires
-              e.preventDefault();
-              if (!isCurrent) {
-                onSelect(s.key);
-                onClose();
-              }
-            }}
-            onTouchEnd={(e) => {
-              e.preventDefault();
-              if (!isCurrent) {
-                onSelect(s.key);
-                onClose();
-              }
-            }}
-            className={`flex items-center gap-2.5 px-3 py-2 text-sm text-left transition-colors ${
-              isCurrent
-                ? "text-zinc-500 cursor-default"
-                : "text-zinc-300 hover:bg-zinc-800 active:bg-zinc-700"
-            }`}
-          >
-            <span className={`h-2 w-2 shrink-0 rounded-full ${dotColor}`} aria-hidden />
-            <span className="flex-1 truncate">{s.label}</span>
-            {isCurrent && (
-              <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden className="text-zinc-500 shrink-0">
-                <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z" />
-              </svg>
-            )}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
-/**
- * Status picker menu for kanban cards.
- * Desktop: rendered as a fixed-position floating menu.
- * Mobile: rendered inline inside a MobileBottomSheet (pass `mobile` prop).
- */
-export const KanbanCardMenu = forwardRef<HTMLDivElement, MenuProps>(
-  function KanbanCardMenu({ task, statuses, onSelect, onClose, mobile, pos }, ref) {
-    if (mobile) {
-      return (
-        <StatusList task={task} statuses={statuses} onSelect={onSelect} onClose={onClose} />
-      );
-    }
-
-    return (
-      <div
-        ref={ref}
-        className="fixed z-[70] w-44 rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-xl"
-        style={pos ? { top: pos.top, left: pos.left } : undefined}
-      >
-        <StatusList task={task} statuses={statuses} onSelect={onSelect} onClose={onClose} />
-      </div>
-    );
-  }
-);

package/components/kanban/kanban-card.tsx

@@ -1,227 +0,0 @@
-"use client";
-
-import { useState, useRef, useEffect } from "react";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { useRouter } from "next/navigation";
-import type { KanbanTask } from "./kanban-board";
-import { isOverdue } from "@/lib/task-utils";
-import { useIsMobile } from "@/lib/use-is-mobile";
-import { useKanbanStatuses } from "./kanban-status-context";
-import { KanbanCardMenu } from "./kanban-card-menu";
-import { MobileBottomSheet } from "@/components/notes/mobile-bottom-sheet";
-import { createPortal } from "react-dom";
-
-type Props = {
-  task: KanbanTask;
-  isDragging?: boolean;
-  backHref: string;
-  onMoveTask?: (taskId: string, newStatus: string) => void;
-};
-
-export function KanbanCard({ task, isDragging, backHref, onMoveTask }: Props) {
-  const router = useRouter();
-  const isMobile = useIsMobile();
-  const statuses = useKanbanStatuses();
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging: isSortableDragging } =
-    useSortable({ id: task.id });
-
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [menuPos, setMenuPos] = useState<{ top: number; left: number } | null>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isSortableDragging ? 0.4 : 1,
-    touchAction: "none" as const,
-  };
-
-  const assigneeLabel =
-    task.assigneeType === "AGENT"
-      ? task.claimedByAlias
-        ? `@agent:${task.claimedByAlias}`
-        : "@agent"
-      : task.assignee?.name
-      ? `@${task.assignee.name}`
-      : null;
-
-  // Stale if claimed and no heartbeat for >30 minutes
-  const isStale =
-    task.claimedBy != null &&
-    task.lastHeartbeat != null &&
-    Date.now() - new Date(task.lastHeartbeat).getTime() > 30 * 60 * 1000;
-
-  const taskIsOverdue = isOverdue(task);
-  const formattedDueDate = task.dueDate
-    ? new Date(task.dueDate).toLocaleDateString(undefined, { month: "short", day: "numeric" })
-    : null;
-
-  // Dismiss floating menu on outside click or Escape
-  useEffect(() => {
-    if (!menuOpen || isMobile) return;
-    function onMouseDown(e: MouseEvent) {
-      if (
-        menuRef.current && !menuRef.current.contains(e.target as Node) &&
-        buttonRef.current && !buttonRef.current.contains(e.target as Node)
-      ) {
-        setMenuOpen(false);
-        setMenuPos(null);
-      }
-    }
-    function onKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") { setMenuOpen(false); setMenuPos(null); }
-    }
-    document.addEventListener("mousedown", onMouseDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => { document.removeEventListener("mousedown", onMouseDown); document.removeEventListener("keydown", onKeyDown); };
-  }, [menuOpen, isMobile]);
-
-  function handleMenuButton(e: React.MouseEvent) {
-    e.stopPropagation();
-    e.preventDefault();
-    if (menuOpen) { setMenuOpen(false); setMenuPos(null); return; }
-    if (isMobile) {
-      setMenuOpen(true);
-    } else {
-      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-      setMenuPos({ top: rect.bottom + 4, left: Math.min(rect.left, window.innerWidth - 200) });
-      setMenuOpen(true);
-    }
-  }
-
-  function handleContextMenu(e: React.MouseEvent) {
-    e.preventDefault();
-    e.stopPropagation();
-    if (isMobile) return; // long-press not needed on mobile (we have the button)
-    setMenuPos({ top: e.clientY, left: Math.min(e.clientX, window.innerWidth - 200) });
-    setMenuOpen(true);
-  }
-
-  function handleSelectStatus(statusKey: string) {
-    setMenuOpen(false);
-    setMenuPos(null);
-    if (statusKey !== task.status && onMoveTask) {
-      onMoveTask(task.id, statusKey);
-    }
-  }
-
-  function handleCardClick(e: React.MouseEvent) {
-    // Don't navigate if clicking the menu button or menu itself
-    if (buttonRef.current?.contains(e.target as Node)) return;
-    if (menuRef.current?.contains(e.target as Node)) return;
-    router.push(`/tasks/${task.id}?from=${encodeURIComponent(backHref)}`);
-  }
-
-  function handleCardKeyDown(e: React.KeyboardEvent) {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      router.push(`/tasks/${task.id}?from=${encodeURIComponent(backHref)}`);
-    }
-  }
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      {...attributes}
-      {...listeners}
-      data-kanban-card
-      onContextMenu={handleContextMenu}
-      className={`group relative rounded-md border p-2.5 cursor-grab active:cursor-grabbing select-none [-webkit-touch-callout:none] [-webkit-user-select:none] transition-[transform,box-shadow,border-color] duration-150 active:scale-[1.02] active:border-zinc-500 active:shadow-lg active:shadow-black/30 ${
-        taskIsOverdue
-          ? "border-red-800/60 bg-red-950/40"
-          : "border-zinc-700 bg-zinc-900"
-      } ${isDragging ? "shadow-lg shadow-black/40 rotate-1" : "hover:border-zinc-600"}`}
-    >
-      {/* Card body — click navigates to task */}
-      <div
-        role="link"
-        tabIndex={0}
-        onClick={handleCardClick}
-        onKeyDown={handleCardKeyDown}
-        draggable={false}
-        className="block pr-6"
-      >
-        <div className="flex items-start gap-1.5">
-          <p className="flex-1 text-sm font-medium leading-snug text-zinc-100 line-clamp-2">
-            {task.title}
-          </p>
-          {taskIsOverdue && <span title="Overdue" className="shrink-0 text-red-400 text-xs">!</span>}
-          {isStale && <span title="No heartbeat — agent may be inactive" className="shrink-0 text-amber-400 text-xs">⚠</span>}
-        </div>
-        <div className="mt-1.5 flex items-center gap-1.5 text-xs text-zinc-600">
-          {task.note.folder && (
-            <>
-              <span className="truncate max-w-[80px] text-zinc-500">{task.note.folder.name}</span>
-              <span>/</span>
-            </>
-          )}
-          <span className="truncate max-w-[100px]">{task.note.title}</span>
-          {formattedDueDate && (
-            <>
-              <span>·</span>
-              <span className={taskIsOverdue ? "text-red-300" : "text-zinc-500"}>{formattedDueDate}</span>
-            </>
-          )}
-          {assigneeLabel && (
-            <>
-              <span>·</span>
-              <span className={task.assigneeType === "AGENT" ? "text-blue-400" : "text-zinc-500"}>
-                {assigneeLabel}
-              </span>
-            </>
-          )}
-        </div>
-      </div>
-
-      {/* "..." menu button */}
-      <button
-        ref={buttonRef}
-        type="button"
-        aria-label="Move task"
-        onPointerDown={(e) => e.stopPropagation()}
-        onTouchStart={(e) => e.stopPropagation()}
-        onClick={handleMenuButton}
-        className="absolute top-1.5 right-1.5 flex h-6 w-6 items-center justify-center rounded text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 opacity-0 group-hover:opacity-100 md:opacity-0 md:group-hover:opacity-100 max-md:opacity-70 transition-opacity"
-      >
-        <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden>
-          <circle cx="8" cy="3" r="1.5" />
-          <circle cx="8" cy="8" r="1.5" />
-          <circle cx="8" cy="13" r="1.5" />
-        </svg>
-      </button>
-
-      {/* Desktop: floating context menu */}
-      {!isMobile && menuOpen && menuPos && createPortal(
-        <KanbanCardMenu
-          ref={menuRef}
-          task={task}
-          statuses={statuses}
-          pos={menuPos}
-          onSelect={handleSelectStatus}
-          onClose={() => { setMenuOpen(false); setMenuPos(null); }}
-        />,
-        document.body,
-      )}
-
-      {/* Mobile: bottom sheet */}
-      {isMobile && (
-        <MobileBottomSheet
-          open={menuOpen}
-          onClose={() => { setMenuOpen(false); setMenuPos(null); }}
-          title="Move to status"
-        >
-          <KanbanCardMenu
-            task={task}
-            statuses={statuses}
-            onSelect={handleSelectStatus}
-            onClose={() => { setMenuOpen(false); setMenuPos(null); }}
-            mobile
-          />
-        </MobileBottomSheet>
-      )}
-    </div>
-  );
-}