@mostrom/app-shell 0.1.0

package/src/components/sectioned-list-table/sortable-column-header.tsx

@@ -0,0 +1,120 @@
+import * as React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import type { ColumnDefinition, SortState } from "./types";
+
+interface SortableColumnHeaderProps<T> {
+  column: ColumnDefinition<T>;
+  sort: SortState;
+  onSort: (columnId: string) => void;
+  onResize: (width: number) => void;
+}
+
+export function SortableColumnHeader<T>({
+  column,
+  sort,
+  onSort,
+  onResize,
+}: SortableColumnHeaderProps<T>) {
+  const [isResizing, setIsResizing] = React.useState(false);
+  const [startX, setStartX] = React.useState(0);
+  const [startWidth, setStartWidth] = React.useState(column.width ?? 150);
+  const headerRef = React.useRef<HTMLDivElement>(null);
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: column.id });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+    width: column.width,
+    minWidth: column.minWidth ?? 80,
+  };
+
+  const isSorted = sort.columnId === column.id;
+  const sortDirection = isSorted ? sort.direction : null;
+
+  const handleSortClick = () => {
+    if (column.sortable) {
+      onSort(column.id);
+    }
+  };
+
+  const handleResizeStart = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizing(true);
+    setStartX(e.clientX);
+    setStartWidth(headerRef.current?.offsetWidth ?? column.width ?? 150);
+  };
+
+  React.useEffect(() => {
+    if (!isResizing) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const diff = e.clientX - startX;
+      const newWidth = Math.max(80, startWidth + diff);
+      onResize(newWidth);
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isResizing, startX, startWidth, onResize]);
+
+  return (
+    <div
+      ref={(node) => {
+        setNodeRef(node);
+        (headerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      }}
+      style={style}
+      className={`column-header ${isDragging ? "dragging" : ""} ${isSorted ? "sorted" : ""}`}
+      data-testid={`column-header-${column.id}`}
+    >
+      <div
+        className="column-header-content"
+        {...attributes}
+        {...listeners}
+      >
+        <span
+          className={`column-header-text ${column.sortable ? "sortable" : ""}`}
+          onClick={handleSortClick}
+        >
+          {column.header}
+          {column.sortable && (
+            <span className="sort-indicator" data-testid={`sort-indicator-${column.id}`}>
+              {sortDirection === "asc" && " ↑"}
+              {sortDirection === "desc" && " ↓"}
+              {!sortDirection && " ↕"}
+            </span>
+          )}
+        </span>
+      </div>
+
+      {/* Resize Handle */}
+      {column.resizable !== false && (
+        <div
+          className="column-resize-handle"
+          onMouseDown={handleResizeStart}
+          data-testid={`column-resize-${column.id}`}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/sectioned-list-table/sortable-row.tsx

@@ -0,0 +1,420 @@
+import * as React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { Assignee, ColumnDefinition, TableTaskAction } from "./types";
+import { TableCellContent, getEditableCellValue } from "./table-cell-content";
+
+interface SortableRowProps<T> {
+  item: T;
+  itemId: string;
+  index: number;
+  columns: ColumnDefinition<T>[];
+  sectionId: string;
+  onCellEdit: (columnId: string, value: unknown) => void;
+  onComplete: (completed: boolean) => void;
+  onTaskAction?: (action: TableTaskAction) => void;
+  /** Callback fired when the item is opened (click, context menu, or keyboard) */
+  onItemOpen?: (source: "click" | "context-menu" | "keyboard") => void;
+  isCompleted: boolean;
+  isDragDisabled: boolean;
+  /** List of available assignees for the assignee selector */
+  assignees?: Assignee[];
+}
+
+export function SortableRow<T>({
+  item,
+  itemId,
+  index,
+  columns,
+  sectionId,
+  onCellEdit,
+  onComplete,
+  onTaskAction,
+  onItemOpen,
+  isCompleted,
+  isDragDisabled,
+  assignees,
+}: SortableRowProps<T>) {
+  const justDragged = React.useRef(false);
+  const clickOpenTimeoutRef = React.useRef<number | null>(null);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: itemId,
+    disabled: isDragDisabled,
+    data: { type: "row", 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 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 clearPendingItemOpen = React.useCallback(() => {
+    if (clickOpenTimeoutRef.current !== null) {
+      window.clearTimeout(clickOpenTimeoutRef.current);
+      clickOpenTimeoutRef.current = null;
+    }
+  }, []);
+
+  React.useEffect(() => {
+    return () => {
+      clearPendingItemOpen();
+    };
+  }, [clearPendingItemOpen]);
+
+  // Handle click to open item details
+  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"]') ||
+      target.closest(".row-drag-handle") ||
+      target.closest(".row-checkbox-cell")
+    ) {
+      return;
+    }
+
+    // If this click is part of a double-click sequence, keep inline edit behavior.
+    if (e.detail > 1) {
+      clearPendingItemOpen();
+      return;
+    }
+
+    // Editable cells support double-click inline edit; delay open slightly so edit can win.
+    if (target.closest("[data-editable-cell]")) {
+      clearPendingItemOpen();
+      clickOpenTimeoutRef.current = window.setTimeout(() => {
+        onItemOpen?.("click");
+        clickOpenTimeoutRef.current = null;
+      }, 220);
+      return;
+    }
+
+    clearPendingItemOpen();
+    onItemOpen?.("click");
+  };
+
+  const handleRowDoubleClick = () => {
+    clearPendingItemOpen();
+  };
+
+  // Handle keyboard to open item details
+  const handleRowKeyDown = (e: React.KeyboardEvent) => {
+    // Only handle Enter when not on interactive elements
+    if (e.key === "Enter") {
+      const target = e.target as HTMLElement;
+      if (
+        target.closest("input") ||
+        target.closest("button") ||
+        target.closest('[role="checkbox"]')
+      ) {
+        return;
+      }
+      e.preventDefault();
+      onItemOpen?.("keyboard");
+    }
+  };
+
+  const handleTaskAction = (action: TableTaskAction) => {
+    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={`sectioned-list-row ${isCompleted ? "completed" : ""} ${isDragging ? "dragging" : ""}`}
+          data-testid={`row-${itemId}`}
+          onClick={handleClick}
+          onDoubleClick={handleRowDoubleClick}
+          onKeyDown={handleRowKeyDown}
+          tabIndex={0}
+          role="button"
+        >
+          {/* Drag Handle */}
+          {!isDragDisabled ? (
+            <button
+              className="row-drag-handle"
+              {...attributes}
+              {...listeners}
+              data-testid={`row-drag-handle-${itemId}`}
+              title="Drag to reorder"
+            >
+              <span className="drag-icon">⠿</span>
+            </button>
+          ) : (
+            <div
+              className="row-drag-handle disabled"
+              title="Clear sort/filter to reorder"
+              data-testid={`row-drag-handle-disabled-${itemId}`}
+            >
+              <span className="drag-icon">⠿</span>
+            </div>
+          )}
+
+          {/* Checkbox */}
+          <div className="row-checkbox-cell">
+            <input
+              type="checkbox"
+              checked={isCompleted}
+              onChange={(e) => onComplete(e.target.checked)}
+              data-testid={`row-checkbox-${itemId}`}
+            />
+          </div>
+
+          {/* Data Cells */}
+          {columns.map((column) => (
+            <EditableCell
+              key={column.id}
+              column={column}
+              item={item}
+              rowIndex={index}
+              onEdit={(value) => onCellEdit(column.field, value)}
+              onFieldChange={(field, value) => onCellEdit(field, value)}
+              itemId={itemId}
+              assignees={assignees}
+            />
+          ))}
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent data-testid={`row-context-menu-${itemId}`}>
+        <ContextMenuItem
+          data-testid={`row-duplicate-${itemId}`}
+          onSelect={() => handleTaskAction("duplicate")}
+        >
+          Duplicate Task
+        </ContextMenuItem>
+        <ContextMenuItem
+          data-testid={`row-mark-complete-${itemId}`}
+          onSelect={() => handleTaskAction("markComplete")}
+        >
+          Mark Complete
+        </ContextMenuItem>
+        <ContextMenuItem
+          data-testid={`row-add-subtask-${itemId}`}
+          onSelect={() => handleTaskAction("addSubtask")}
+        >
+          Add Subtask
+        </ContextMenuItem>
+        <ContextMenuItem
+          data-testid={`row-open-details-${itemId}`}
+          onSelect={() => handleTaskAction("openTaskDetails")}
+        >
+          Open Task Details
+        </ContextMenuItem>
+        <ContextMenuItem
+          data-testid={`row-open-new-tab-${itemId}`}
+          onSelect={() => handleTaskAction("openInNewTab")}
+        >
+          Open in new Tab
+        </ContextMenuItem>
+        <ContextMenuItem
+          data-testid={`row-copy-link-${itemId}`}
+          onSelect={() => handleTaskAction("copyTaskLink")}
+        >
+          Copy Task Link
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem
+          data-testid={`row-delete-${itemId}`}
+          variant="destructive"
+          onSelect={() => handleTaskAction("delete")}
+        >
+          Delete Task
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
+interface EditableCellProps<T> {
+  column: ColumnDefinition<T>;
+  item: T;
+  rowIndex: number;
+  onEdit: (value: unknown) => void;
+  onFieldChange?: (field: string, value: unknown) => void;
+  itemId: string;
+  assignees?: Assignee[];
+}
+
+function EditableCell<T>({
+  column,
+  item,
+  rowIndex,
+  onEdit,
+  onFieldChange,
+  itemId,
+  assignees,
+}: EditableCellProps<T>) {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [editValue, setEditValue] = React.useState("");
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const cellValue = getEditableCellValue(column, item);
+  const priorityOptions =
+    column.type === "badge" &&
+    column.field === "priority" &&
+    column.badgeColorMap
+      ? Object.keys(column.badgeColorMap)
+      : [];
+  const isPriorityDropdown = priorityOptions.length > 0;
+  const isEditable =
+    (column.type === undefined || column.type === "text") &&
+    column.editable !== false;
+
+  const handleDoubleClick = () => {
+    if (!isEditable) {
+      return;
+    }
+    setEditValue(cellValue);
+    setIsEditing(true);
+    setTimeout(() => inputRef.current?.focus(), 0);
+  };
+
+  const handleBlur = () => {
+    setIsEditing(false);
+    // Only update if value actually changed
+    if (editValue !== cellValue) {
+      onEdit(editValue);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleBlur();
+    } else if (e.key === "Escape") {
+      setIsEditing(false);
+    }
+  };
+
+  return (
+    <div
+      className="row-cell"
+      style={{ width: column.width, minWidth: column.minWidth }}
+      data-testid={`cell-${itemId}-${column.id}`}
+      data-editable-cell={isEditable || isPriorityDropdown ? "true" : undefined}
+      onDoubleClick={handleDoubleClick}
+    >
+      {isPriorityDropdown ? (
+        <Select value={cellValue} onValueChange={onEdit}>
+          <SelectTrigger
+            data-testid={`cell-select-${itemId}-${column.id}`}
+            aria-label={`${column.header} value`}
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {priorityOptions.map((option) => (
+              <SelectItem key={option} value={option}>
+                {option}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      ) : isEditing ? (
+        <input
+          ref={inputRef}
+          type="text"
+          className="cell-input"
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          data-testid={`cell-input-${itemId}-${column.id}`}
+        />
+      ) : (
+        <TableCellContent
+          column={column}
+          item={item}
+          rowIndex={rowIndex}
+          assignees={assignees}
+          onFieldChange={onFieldChange}
+        />
+      )}
+    </div>
+  );
+}