@mostrom/app-shell 0.1.0

package/src/components/sectioned-list-board/sortable-card.tsx

@@ -0,0 +1,314 @@
+import * as React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import type { BoardTaskAction, SortableBoardCardProps } from "./types";
+import { BoardCardContent } from "./board-card-content";
+
+function toText(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return "";
+}
+
+export function SortableBoardCard<T>({
+  item,
+  itemId,
+  index,
+  sectionId,
+  cardConfig,
+  isCompleted,
+  isDragDisabled,
+  onTitleEdit,
+  onComplete,
+  onTaskAction,
+  onFieldChange,
+  onItemOpen,
+  assignees,
+}: SortableBoardCardProps<T>) {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [editTitle, setEditTitle] = React.useState("");
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const justDragged = React.useRef(false);
+  const clickTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const title = toText((item as Record<string, unknown>)[cardConfig.titleField]);
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: itemId,
+    disabled: isDragDisabled,
+    data: { type: "card", sectionId, index },
+  });
+
+  // Track when drag ends to prevent click from firing
+  React.useEffect(() => {
+    if (!isDragging && justDragged.current === false) {
+      // Not dragging and wasn't dragging
+    } else if (isDragging) {
+      justDragged.current = true;
+    } else if (!isDragging && justDragged.current) {
+      // Drag just ended, keep flag true briefly
+      const timeout = setTimeout(() => {
+        justDragged.current = false;
+      }, 100);
+      return () => clearTimeout(timeout);
+    }
+  }, [isDragging]);
+
+  const style: React.CSSProperties = {
+    transform: transform
+      ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
+      : undefined,
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+  const draggableProps = !isDragDisabled ? { ...attributes, ...listeners } : {};
+
+  const handleDoubleClick = () => {
+    // Cancel any pending single-click action
+    if (clickTimeoutRef.current) {
+      clearTimeout(clickTimeoutRef.current);
+      clickTimeoutRef.current = null;
+    }
+    if (!onTitleEdit) return;
+    setEditTitle(title);
+    setIsEditing(true);
+    setTimeout(() => inputRef.current?.focus(), 0);
+  };
+
+  const handleBlur = () => {
+    setIsEditing(false);
+    if (editTitle.trim() && editTitle !== title) {
+      onTitleEdit?.(editTitle.trim());
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleBlur();
+    } else if (e.key === "Escape") {
+      setIsEditing(false);
+      setEditTitle(title);
+    }
+  };
+
+  // Handle click to open item details
+  // Use a delay to allow double-click to cancel single click (for title editing)
+  const handleClick = (e: React.MouseEvent) => {
+    // Don't open if we just finished dragging
+    if (justDragged.current) {
+      return;
+    }
+
+    // Don't open if clicking interactive elements
+    const target = e.target as HTMLElement;
+    if (
+      target.closest("[data-no-item-open]") ||
+      target.closest("input") ||
+      target.closest("button") ||
+      target.closest('[role="checkbox"]') ||
+      target.closest('[data-slot="select"]') ||
+      target.closest('[data-slot="popover"]') ||
+      target.closest('[role="combobox"]')
+    ) {
+      return;
+    }
+
+    // Don't open if currently editing
+    if (isEditing) {
+      return;
+    }
+
+    // If title editing is enabled, delay the click to allow double-click to cancel it
+    if (onTitleEdit) {
+      // Clear any existing timeout
+      if (clickTimeoutRef.current) {
+        clearTimeout(clickTimeoutRef.current);
+      }
+      // Delay the item open to allow double-click to cancel
+      clickTimeoutRef.current = setTimeout(() => {
+        clickTimeoutRef.current = null;
+        onItemOpen?.("click");
+      }, 200); // 200ms is a typical double-click threshold
+    } else {
+      // No title editing, open immediately
+      onItemOpen?.("click");
+    }
+  };
+
+  // Handle keyboard to open item details
+  const handleCardKeyDown = (e: React.KeyboardEvent) => {
+    // Only handle Enter when not editing and not on interactive elements
+    if (e.key === "Enter" && !isEditing) {
+      const target = e.target as HTMLElement;
+      if (
+        target.closest("input") ||
+        target.closest("button") ||
+        target.closest('[role="checkbox"]')
+      ) {
+        return;
+      }
+      e.preventDefault();
+      onItemOpen?.("keyboard");
+    }
+  };
+
+  const taskLink = React.useMemo(() => {
+    if (typeof window === "undefined") return null;
+    const url = new URL(window.location.href);
+    url.hash = `task-${itemId}`;
+    return url.toString();
+  }, [itemId]);
+
+  const handleTaskAction = (action: BoardTaskAction) => {
+    onTaskAction?.(action);
+
+    if (action === "markComplete") {
+      onComplete?.(!isCompleted);
+      return;
+    }
+
+    if (action === "copyTaskLink") {
+      if (taskLink && typeof navigator !== "undefined" && navigator.clipboard) {
+        void navigator.clipboard.writeText(taskLink);
+      }
+      return;
+    }
+
+    if (action === "openTaskDetails") {
+      // Use callback if provided, otherwise fall back to hash navigation
+      if (onItemOpen) {
+        onItemOpen("context-menu");
+      } else if (taskLink && typeof window !== "undefined") {
+        window.location.hash = `task-${itemId}`;
+      }
+      return;
+    }
+
+    if (action === "openInNewTab") {
+      if (taskLink && typeof window !== "undefined") {
+        window.open(taskLink, "_blank", "noopener,noreferrer");
+      }
+    }
+  };
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div
+          ref={setNodeRef}
+          style={style}
+          className={`board-card ${isCompleted ? "completed" : ""} ${isDragging ? "dragging" : ""} ${!isDragDisabled ? "draggable" : "drag-disabled"}`}
+          data-testid={`board-card-${itemId}`}
+          {...draggableProps}
+          onClick={handleClick}
+          onDoubleClick={handleDoubleClick}
+          onKeyDown={handleCardKeyDown}
+          tabIndex={0}
+          role="button"
+        >
+          {/* Card Content */}
+          {/* Completion Checkbox */}
+          {onComplete && (
+            <div className="card-checkbox">
+              <input
+                type="checkbox"
+                checked={isCompleted}
+                onChange={(e) => onComplete(e.target.checked)}
+                onPointerDown={(e) => e.stopPropagation()}
+                onClick={(e) => e.stopPropagation()}
+                data-testid={`card-checkbox-${itemId}`}
+                aria-label="Mark task complete"
+              />
+            </div>
+          )}
+
+          <div className="card-content">
+            {isEditing ? (
+              <input
+                ref={inputRef}
+                type="text"
+                className="card-title-input"
+                value={editTitle}
+                onChange={(e) => setEditTitle(e.target.value)}
+                onBlur={handleBlur}
+                onKeyDown={handleKeyDown}
+                onPointerDown={(e) => e.stopPropagation()}
+                onClick={(e) => e.stopPropagation()}
+                data-testid={`card-title-input-${itemId}`}
+              />
+            ) : (
+              <BoardCardContent
+                item={item}
+                cardConfig={cardConfig}
+                onFieldChange={onFieldChange}
+                interactive
+                assignees={assignees}
+              />
+            )}
+          </div>
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent
+        data-testid={`board-card-context-menu-${itemId}`}
+      >
+        <ContextMenuItem
+          data-testid={`board-card-duplicate-${itemId}`}
+          onSelect={() => handleTaskAction("duplicate")}
+        >
+          Duplicate Task
+        </ContextMenuItem>
+        <ContextMenuItem
+          data-testid={`board-card-mark-complete-${itemId}`}
+          onSelect={() => handleTaskAction("markComplete")}
+        >
+          Mark Complete
+        </ContextMenuItem>
+        <ContextMenuItem
+          data-testid={`board-card-add-subtask-${itemId}`}
+          onSelect={() => handleTaskAction("addSubtask")}
+        >
+          Add Subtask
+        </ContextMenuItem>
+        <ContextMenuItem
+          data-testid={`board-card-open-details-${itemId}`}
+          onSelect={() => handleTaskAction("openTaskDetails")}
+        >
+          Open Task Details
+        </ContextMenuItem>
+        <ContextMenuItem
+          data-testid={`board-card-open-new-tab-${itemId}`}
+          onSelect={() => handleTaskAction("openInNewTab")}
+        >
+          Open in new Tab
+        </ContextMenuItem>
+        <ContextMenuItem
+          data-testid={`board-card-copy-link-${itemId}`}
+          onSelect={() => handleTaskAction("copyTaskLink")}
+        >
+          Copy Task Link
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem
+          data-testid={`board-card-delete-${itemId}`}
+          variant="destructive"
+          onSelect={() => handleTaskAction("delete")}
+        >
+          Delete Task
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/src/components/sectioned-list-board/sortable-section.tsx

@@ -0,0 +1,319 @@
+import * as React from "react";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { MoreHorizontal, Plus } from "lucide-react";
+import type { SortableBoardSectionProps } from "./types";
+import { SortableBoardCard } from "./sortable-card";
+
+export function SortableBoardSection<T>({
+  sortableId,
+  section,
+  getItemId,
+  cardConfig,
+  onItemFieldChange,
+  onToggle,
+  onRename,
+  onAddItem,
+  onDelete,
+  onItemTitleEdit,
+  onItemComplete,
+  onItemAction,
+  onItemOpen,
+  isDragDisabled,
+  isItemCompleted,
+  collapseDuringDrag = false,
+  dropIndicatorPosition = null,
+  cardDropIndicatorIndex = null,
+  assignees,
+}: SortableBoardSectionProps<T>) {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [editName, setEditName] = React.useState(section.name);
+  const [showContextMenu, setShowContextMenu] = React.useState(false);
+  const [contextMenuPos, setContextMenuPos] = React.useState({ x: 0, y: 0 });
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: sortableId,
+    data: { type: "section", sectionId: section.id },
+  });
+
+  const style: React.CSSProperties = {
+    transform: transform
+      ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
+      : undefined,
+    transition,
+    opacity: isDragging ? 0.75 : 1,
+  };
+
+  const isContentCollapsed =
+    Boolean(section.collapsed) || isDragging || collapseDuringDrag;
+  const cardIds = section.items.map(getItemId);
+
+  const startRename = () => {
+    setIsEditing(true);
+    setEditName(section.name);
+    setTimeout(() => inputRef.current?.focus(), 0);
+  };
+
+  const handleDoubleClick = () => {
+    startRename();
+  };
+
+  const handleBlur = () => {
+    setIsEditing(false);
+    if (editName.trim() && editName !== section.name) {
+      onRename(editName.trim());
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleBlur();
+    } else if (e.key === "Escape") {
+      setIsEditing(false);
+      setEditName(section.name);
+    }
+  };
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
+    setContextMenuPos({ x: e.clientX, y: e.clientY });
+    setShowContextMenu(true);
+  };
+
+  const handleMenuButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const rect = e.currentTarget.getBoundingClientRect();
+    setContextMenuPos({ x: rect.left, y: rect.bottom + 6 });
+    setShowContextMenu((prev) => !prev);
+  };
+
+  const handleRenameFromMenu = () => {
+    setShowContextMenu(false);
+    startRename();
+  };
+
+  const handleToggleFromMenu = () => {
+    setShowContextMenu(false);
+    onToggle();
+  };
+
+  const handleDeleteFromMenu = () => {
+    setShowContextMenu(false);
+    onDelete();
+  };
+
+  React.useEffect(() => {
+    const handleClick = () => setShowContextMenu(false);
+    if (showContextMenu) {
+      document.addEventListener("click", handleClick);
+      return () => document.removeEventListener("click", handleClick);
+    }
+  }, [showContextMenu]);
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`board-section ${isDragging ? "dragging" : ""}`}
+      data-testid={`board-section-${section.id}`}
+    >
+      {dropIndicatorPosition === "before" && (
+        <div className="section-drop-indicator section-drop-indicator-before" />
+      )}
+
+      <div
+        className="board-section-header"
+        onContextMenu={handleContextMenu}
+      >
+        <button
+          className="section-drag-handle"
+          {...attributes}
+          {...listeners}
+          data-testid={`section-drag-handle-${section.id}`}
+          title="Drag to reorder section"
+        >
+          <span className="drag-icon">&#x2847;</span>
+        </button>
+
+        <button
+          className="section-collapse-toggle"
+          onClick={onToggle}
+          data-testid={`section-toggle-${section.id}`}
+          aria-expanded={!isContentCollapsed}
+        >
+          <span className={`chevron ${isContentCollapsed ? "collapsed" : ""}`}>
+            &#x25BC;
+          </span>
+        </button>
+
+        {isEditing ? (
+          <input
+            ref={inputRef}
+            type="text"
+            className="section-name-input"
+            value={editName}
+            onChange={(e) => setEditName(e.target.value)}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            data-testid={`section-name-input-${section.id}`}
+          />
+        ) : (
+          <span
+            className="section-name"
+            onDoubleClick={handleDoubleClick}
+            data-testid={`section-name-${section.id}`}
+          >
+            {section.name}
+          </span>
+        )}
+
+        <span className="section-count">({section.items.length})</span>
+        <div className="section-header-actions">
+          <button
+            className="section-add-task-header-btn"
+            onClick={onAddItem}
+            data-testid={`section-add-task-header-${section.id}`}
+            aria-label="Add task"
+            title="Add task"
+          >
+            <Plus className="section-header-action-icon" size={16} />
+          </button>
+          <button
+            className="section-menu-btn"
+            onClick={handleMenuButtonClick}
+            data-testid={`section-menu-trigger-${section.id}`}
+            aria-haspopup="menu"
+            aria-expanded={showContextMenu}
+            aria-label="Section options"
+            title="Section options"
+          >
+            <MoreHorizontal className="section-header-action-icon" size={20} />
+          </button>
+        </div>
+
+      </div>
+
+      {showContextMenu && (
+        <div
+          className="context-menu"
+          style={{ left: contextMenuPos.x, top: contextMenuPos.y }}
+          data-testid={`section-context-menu-${section.id}`}
+        >
+          <button onClick={handleRenameFromMenu} data-testid={`section-rename-${section.id}`}>
+            Rename section
+          </button>
+          <button onClick={handleToggleFromMenu} data-testid={`section-toggle-menu-${section.id}`}>
+            {section.collapsed ? "Expand section" : "Collapse section"}
+          </button>
+          <button
+            className="destructive"
+            onClick={handleDeleteFromMenu}
+            data-testid={`section-delete-${section.id}`}
+          >
+            Delete section
+          </button>
+        </div>
+      )}
+
+      {!isContentCollapsed && (
+        <div className="board-section-content">
+          <SortableContext items={cardIds} strategy={verticalListSortingStrategy}>
+            {section.items.length === 0 ? (
+              <div className="board-section-empty" data-testid={`section-empty-${section.id}`}>
+                <button
+                  className="board-add-task-button board-add-task-button-empty"
+                  onClick={onAddItem}
+                  data-testid={`section-add-task-${section.id}`}
+                >
+                  + Add Task
+                </button>
+              </div>
+            ) : (
+              <>
+                {section.items.map((item, index) => (
+                  <React.Fragment key={getItemId(item)}>
+                    {cardDropIndicatorIndex === index && (
+                      <div className="card-drop-indicator" data-testid="card-drop-indicator" />
+                    )}
+                    <SortableBoardCard
+                      item={item}
+                      itemId={getItemId(item)}
+                      index={index}
+                      sectionId={section.id}
+                      cardConfig={cardConfig}
+                      isCompleted={isItemCompleted?.(item) ?? false}
+                      isDragDisabled={isDragDisabled}
+                      onTitleEdit={
+                        onItemTitleEdit
+                          ? (title) => onItemTitleEdit(getItemId(item), title)
+                          : undefined
+                      }
+                      onComplete={
+                        onItemComplete
+                          ? (completed) => onItemComplete(getItemId(item), completed)
+                          : undefined
+                      }
+                      onFieldChange={
+                        onItemFieldChange
+                          ? (field, value) => onItemFieldChange(getItemId(item), field, value)
+                          : undefined
+                      }
+                      onTaskAction={
+                        onItemAction
+                          ? (action) => onItemAction(getItemId(item), action)
+                          : undefined
+                      }
+                      onItemOpen={
+                        onItemOpen
+                          ? (source) => {
+                              console.log("[SortableBoardSection] onItemOpen wrapper called, source:", source);
+                              onItemOpen({
+                                item,
+                                itemId: getItemId(item),
+                                sectionId: section.id,
+                                source,
+                              });
+                            }
+                          : undefined
+                      }
+                      assignees={assignees}
+                    />
+                  </React.Fragment>
+                ))}
+                {cardDropIndicatorIndex === section.items.length && (
+                  <div className="card-drop-indicator" data-testid="card-drop-indicator" />
+                )}
+                <button
+                  className="board-add-task-button"
+                  onClick={onAddItem}
+                  data-testid={`section-add-task-${section.id}`}
+                >
+                  + Add Task
+                </button>
+              </>
+            )}
+            {section.items.length === 0 && cardDropIndicatorIndex === section.items.length && (
+              <div className="card-drop-indicator" data-testid="card-drop-indicator" />
+            )}
+          </SortableContext>
+        </div>
+      )}
+
+      {dropIndicatorPosition === "after" && (
+        <div className="section-drop-indicator section-drop-indicator-after" />
+      )}
+    </div>
+  );
+}