@mostrom/app-shell 0.1.0

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

@@ -0,0 +1,740 @@
+import * as React from "react";
+import {
+  DndContext,
+  DragOverlay,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragOverEvent,
+  type DragStartEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  horizontalListSortingStrategy,
+  verticalListSortingStrategy,
+  sortableKeyboardCoordinates,
+} from "@dnd-kit/sortable";
+import {
+  Drawer,
+  DrawerContent,
+} from "@/components/ui/drawer";
+import type {
+  SectionedListTableProps,
+  SortState,
+  DragState,
+  Assignee,
+  ItemOpenEvent,
+} from "./types";
+import { useColumnPreferences } from "./use-column-preferences";
+import { SortableSection } from "./sortable-section";
+import { SortableColumnHeader } from "./sortable-column-header";
+import { TableCellContent } from "./table-cell-content";
+import "./sectioned-list-table.css";
+
+// Prefix section IDs to distinguish from row IDs in the combined context
+const SECTION_PREFIX = "section:";
+
+function buildAssigneeId(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+function buildAssigneeEmail(name: string): string {
+  const local = name
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, ".")
+    .replace(/^\.+|\.+$/g, "");
+  return `${local}@example.com`;
+}
+
+function deriveAssigneesFromSections<T>(
+  sections: Array<{ items: T[] }>,
+  field: string
+): Assignee[] {
+  const uniqueNames = new Set<string>();
+  const derived: Assignee[] = [];
+
+  for (const section of sections) {
+    for (const item of section.items) {
+      const raw = (item as Record<string, unknown>)[field];
+      const name = typeof raw === "string" ? raw.trim() : "";
+      if (!name || uniqueNames.has(name)) continue;
+      uniqueNames.add(name);
+      const id = buildAssigneeId(name);
+      derived.push({
+        id: id ? id : `assignee-${derived.length + 1}`,
+        name,
+        email: buildAssigneeEmail(name),
+      });
+    }
+  }
+
+  return derived;
+}
+
+export function SectionedListTable<T>({
+  columns,
+  sections,
+  onSectionReorder,
+  onRowReorder,
+  onRowMoveToSection,
+  onAddColumn,
+  onAddRow,
+  onAddSection,
+  onDeleteSection,
+  onRenameSection,
+  onToggleSection,
+  onCellEdit,
+  onRowComplete,
+  onRowAction,
+  onColumnReorder,
+  onColumnResize,
+  onColumnVisibilityChange,
+  onSort,
+  filterText = "",
+  sort = { columnId: null, direction: null },
+  storageKey,
+  getItemId,
+  isItemCompleted,
+  assignees,
+  onItemOpen,
+  renderItemDetails,
+  drawerProps,
+}: SectionedListTableProps<T>) {
+  const [dragState, setDragState] = React.useState<DragState>({
+    isDragging: false,
+    dragType: null,
+    activeId: null,
+  });
+  const [sectionDropIndicator, setSectionDropIndicator] = React.useState<{
+    sectionId: string;
+    position: "before" | "after";
+  } | null>(null);
+  const [rowDropIndicator, setRowDropIndicator] = React.useState<{
+    sectionId: string;
+    index: number;
+  } | null>(null);
+  const [showColumnPicker, setShowColumnPicker] = React.useState(false);
+  const effectiveAssignees = React.useMemo(() => {
+    if (assignees && assignees.length > 0) {
+      return assignees;
+    }
+    const avatarColumn = columns.find((column) => column.type === "avatar");
+    if (!avatarColumn) {
+      return [];
+    }
+    return deriveAssigneesFromSections(sections, avatarColumn.field as string);
+  }, [assignees, columns, sections]);
+
+  // Drawer state for built-in drawer mode
+  const [selectedItem, setSelectedItem] = React.useState<T | null>(null);
+
+  // Handler for item open events - manages drawer state and calls user callback
+  const handleItemOpen = React.useCallback(
+    (event: ItemOpenEvent<T>) => {
+      console.log("[SectionedListTable] handleItemOpen called:", event, "renderItemDetails:", !!renderItemDetails);
+      if (renderItemDetails) {
+        console.log("[SectionedListTable] Setting selectedItem:", event.item);
+        setSelectedItem(event.item);
+      }
+      onItemOpen?.(event);
+    },
+    [renderItemDetails, onItemOpen]
+  );
+
+  const {
+    visibleColumns,
+    orderedColumns,
+    setColumnOrder,
+    setColumnVisibility,
+    setColumnWidth,
+  } = useColumnPreferences(columns, storageKey);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  // Determine if row drag should be disabled
+  const isRowDragDisabled = sort.columnId !== null || filterText.length > 0;
+
+  // Prefixed section IDs for drag context
+  const sectionIds = sections.map((s) => `${SECTION_PREFIX}${s.id}`);
+  const columnIds = visibleColumns.map((c) => c.id);
+
+  const parseSectionId = (id: string): string | null => {
+    if (!id.startsWith(SECTION_PREFIX)) return null;
+    return id.slice(SECTION_PREFIX.length);
+  };
+
+  const activeSection =
+    dragState.dragType === "section" && dragState.activeId
+      ? sections.find((section) => section.id === dragState.activeId) ?? null
+      : null;
+
+  const activeRow =
+    dragState.dragType === "row" && dragState.activeId
+      ? (() => {
+          for (const section of sections) {
+            const index = section.items.findIndex(
+              (item) => getItemId(item) === dragState.activeId
+            );
+            if (index !== -1) {
+              return { item: section.items[index], index };
+            }
+          }
+          return null;
+        })()
+      : null;
+
+  // Column drag handlers
+  const handleColumnDragStart = (event: DragStartEvent) => {
+    setSectionDropIndicator(null);
+    setRowDropIndicator(null);
+    setDragState({
+      isDragging: true,
+      dragType: "column",
+      activeId: event.active.id as string,
+    });
+  };
+
+  const handleColumnDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    setSectionDropIndicator(null);
+    setRowDropIndicator(null);
+    setDragState({ isDragging: false, dragType: null, activeId: null });
+
+    if (over && active.id !== over.id) {
+      const oldIndex = visibleColumns.findIndex((c) => c.id === active.id);
+      const newIndex = visibleColumns.findIndex((c) => c.id === over.id);
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const newOrder = arrayMove(
+          visibleColumns.map((c) => c.id),
+          oldIndex,
+          newIndex
+        );
+        setColumnOrder(newOrder);
+        onColumnReorder?.(arrayMove(visibleColumns, oldIndex, newIndex));
+      }
+    }
+  };
+
+  // Combined section and row drag handlers
+  const handleDragStart = (event: DragStartEvent) => {
+    setSectionDropIndicator(null);
+    setRowDropIndicator(null);
+    const activeData = event.active.data.current as
+      | { type?: "section" | "row"; sectionId?: string }
+      | undefined;
+    const id = event.active.id as string;
+
+    if (activeData?.type === "section" || id.startsWith(SECTION_PREFIX)) {
+      setDragState({
+        isDragging: true,
+        dragType: "section",
+        activeId: activeData?.sectionId ?? parseSectionId(id),
+      });
+    } else {
+      setDragState({
+        isDragging: true,
+        dragType: "row",
+        activeId: id,
+      });
+    }
+  };
+
+  const handleDragOver = (event: DragOverEvent) => {
+    const activeId = event.active.id as string;
+    const activeData = event.active.data.current as
+      | { type?: "section" | "row"; sectionId?: string; index?: number }
+      | undefined;
+
+    const isSectionDrag =
+      activeData?.type === "section" || activeId.startsWith(SECTION_PREFIX);
+    const over = event.over;
+    if (!over) {
+      if (sectionDropIndicator) setSectionDropIndicator(null);
+      if (rowDropIndicator) setRowDropIndicator(null);
+      return;
+    }
+
+    if (isSectionDrag) {
+      if (rowDropIndicator) setRowDropIndicator(null);
+
+      const activeSectionId = activeData?.sectionId ?? parseSectionId(activeId);
+      if (!activeSectionId) {
+        if (sectionDropIndicator) setSectionDropIndicator(null);
+        return;
+      }
+
+      const overId = over.id as string;
+      const overData = over.data.current as
+        | { type?: "section" | "row"; sectionId?: string; index?: number }
+        | undefined;
+      const targetSectionId = overData?.sectionId ?? parseSectionId(overId);
+
+      if (!targetSectionId || targetSectionId === activeSectionId) {
+        if (sectionDropIndicator) setSectionDropIndicator(null);
+        return;
+      }
+
+      const activeRect = event.active.rect.current.translated;
+      const activeMidY = activeRect
+        ? activeRect.top + activeRect.height / 2
+        : null;
+      const overMidY = over.rect.top + over.rect.height / 2;
+      let position: "before" | "after" =
+        activeMidY !== null && activeMidY > overMidY ? "after" : "before";
+
+      // Snap indicator direction to drag direction for smoother, predictable section placement.
+      const activeIndex = sections.findIndex((s) => s.id === activeSectionId);
+      const targetIndex = sections.findIndex((s) => s.id === targetSectionId);
+      if (activeIndex !== -1 && targetIndex !== -1) {
+        if (activeIndex < targetIndex) {
+          position = "after";
+        } else if (activeIndex > targetIndex) {
+          position = "before";
+        }
+      }
+
+      setSectionDropIndicator((prev) => {
+        if (
+          prev &&
+          prev.sectionId === targetSectionId &&
+          prev.position === position
+        ) {
+          return prev;
+        }
+        return { sectionId: targetSectionId, position };
+      });
+      return;
+    }
+
+    if (sectionDropIndicator) setSectionDropIndicator(null);
+
+    if (!activeData || activeData.type !== "row" || !activeData.sectionId) {
+      if (rowDropIndicator) setRowDropIndicator(null);
+      return;
+    }
+
+    const sourceSectionId = activeData.sectionId;
+    const overId = over.id as string;
+    const overData = over.data.current as
+      | { type?: "section" | "row"; sectionId?: string; index?: number }
+      | undefined;
+    const targetSectionId = overData?.sectionId ?? parseSectionId(overId);
+
+    if (!targetSectionId) {
+      if (rowDropIndicator) setRowDropIndicator(null);
+      return;
+    }
+
+    const targetSection = sections.find((section) => section.id === targetSectionId);
+    if (!targetSection) {
+      if (rowDropIndicator) setRowDropIndicator(null);
+      return;
+    }
+
+    let insertIndex = targetSection.items.length;
+    if (overData?.type === "row" && typeof overData.index === "number") {
+      const overIndex = overData.index;
+      if (
+        sourceSectionId === targetSectionId &&
+        typeof activeData.index === "number"
+      ) {
+        insertIndex = activeData.index < overIndex ? overIndex + 1 : overIndex;
+      } else {
+        const activeRect = event.active.rect.current.translated;
+        const activeMidY = activeRect
+          ? activeRect.top + activeRect.height / 2
+          : null;
+        const overMidY = over.rect.top + over.rect.height / 2;
+        insertIndex =
+          overIndex + (activeMidY !== null && activeMidY > overMidY ? 1 : 0);
+      }
+    } else if (overData?.type === "section") {
+      const activeRect = event.active.rect.current.translated;
+      const activeMidY = activeRect
+        ? activeRect.top + activeRect.height / 2
+        : null;
+      const overMidY = over.rect.top + over.rect.height / 2;
+      insertIndex =
+        activeMidY !== null && activeMidY < overMidY
+          ? 0
+          : targetSection.items.length;
+    }
+
+    insertIndex = Math.max(0, Math.min(insertIndex, targetSection.items.length));
+
+    const isNoOpWithinSameSection =
+      sourceSectionId === targetSectionId &&
+      typeof activeData.index === "number" &&
+      (insertIndex === activeData.index || insertIndex === activeData.index + 1);
+
+    if (isNoOpWithinSameSection) {
+      if (rowDropIndicator) setRowDropIndicator(null);
+      return;
+    }
+
+    setRowDropIndicator((prev) => {
+      if (
+        prev &&
+        prev.sectionId === targetSectionId &&
+        prev.index === insertIndex
+      ) {
+        return prev;
+      }
+      return { sectionId: targetSectionId, index: insertIndex };
+    });
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    const pendingSectionDropIndicator = sectionDropIndicator;
+    const pendingRowDropIndicator = rowDropIndicator;
+    setSectionDropIndicator(null);
+    setRowDropIndicator(null);
+    setDragState({ isDragging: false, dragType: null, activeId: null });
+
+    if (!over) return;
+
+    const activeId = active.id as string;
+    const overId = over.id as string;
+    const activeData = active.data.current as
+      | { type?: "section" | "row"; sectionId?: string; index?: number }
+      | undefined;
+    const overData = over.data.current as
+      | { type?: "section" | "row"; sectionId?: string; index?: number }
+      | undefined;
+
+    // Check if this is a section drag
+    if (activeData?.type === "section" || activeId.startsWith(SECTION_PREFIX)) {
+      const activeSectionId = activeData?.sectionId ?? parseSectionId(activeId);
+      const overSectionId =
+        pendingSectionDropIndicator?.sectionId ??
+        overData?.sectionId ??
+        (overData?.type === "section" ? overData.sectionId ?? null : parseSectionId(overId));
+
+      if (
+        activeSectionId &&
+        overSectionId &&
+        activeSectionId !== overSectionId
+      ) {
+        const oldIndex = sections.findIndex((s) => s.id === activeSectionId);
+        const overIndex = sections.findIndex((s) => s.id === overSectionId);
+        let newIndex = overIndex;
+
+        if (pendingSectionDropIndicator?.position === "before") {
+          newIndex = overIndex - (oldIndex < overIndex ? 1 : 0);
+        } else if (pendingSectionDropIndicator?.position === "after") {
+          newIndex = overIndex + (oldIndex < overIndex ? 0 : 1);
+        }
+
+        const maxIndex = sections.length - 1;
+        newIndex = Math.max(0, Math.min(maxIndex, newIndex));
+
+        if (oldIndex !== -1 && newIndex !== -1) {
+          const newSections = arrayMove(sections, oldIndex, newIndex);
+          onSectionReorder?.(newSections);
+        }
+      }
+      return;
+    }
+
+    // Row drag
+    if (!activeData || activeData.type !== "row") return;
+
+    const sourceSectionId = activeData.sectionId;
+    if (!sourceSectionId) return;
+    const sourceSection = sections.find((s) => s.id === sourceSectionId);
+    if (!sourceSection) return;
+
+    // Find target section
+    let targetSectionId = sourceSectionId;
+    if (overData?.sectionId) {
+      targetSectionId = overData.sectionId;
+    } else {
+      const parsedSectionId = parseSectionId(overId);
+      if (parsedSectionId) {
+        targetSectionId = parsedSectionId;
+      }
+    }
+
+    if (sourceSectionId === targetSectionId) {
+      // Same section reorder
+      const oldIndex = sourceSection.items.findIndex(
+        (item) => getItemId(item) === activeId
+      );
+
+      let newIndex: number;
+      if (
+        pendingRowDropIndicator &&
+        pendingRowDropIndicator.sectionId === sourceSectionId
+      ) {
+        const insertSlot = Math.max(
+          0,
+          Math.min(pendingRowDropIndicator.index, sourceSection.items.length)
+        );
+        newIndex = insertSlot > oldIndex ? insertSlot - 1 : insertSlot;
+      } else if (overData?.type === "row" && overData.index !== undefined) {
+        newIndex = overData.index;
+      } else {
+        const overItemIndex = sourceSection.items.findIndex(
+          (item) => getItemId(item) === overId
+        );
+        newIndex = overItemIndex !== -1 ? overItemIndex : sourceSection.items.length - 1;
+      }
+
+      if (oldIndex !== -1 && oldIndex !== newIndex) {
+        const newItems = arrayMove(sourceSection.items, oldIndex, newIndex);
+        onRowReorder?.(sourceSectionId, newItems);
+      }
+    } else {
+      // Cross-section move
+      const item = sourceSection.items.find((i) => getItemId(i) === activeId);
+      if (item) {
+        const targetIndex =
+          pendingRowDropIndicator?.sectionId === targetSectionId
+            ? pendingRowDropIndicator.index
+            : undefined;
+        onRowMoveToSection?.(item, sourceSectionId, targetSectionId, targetIndex);
+      }
+    }
+  };
+
+  const handleSort = (columnId: string) => {
+    let newSort: SortState;
+    if (sort.columnId === columnId) {
+      if (sort.direction === "asc") {
+        newSort = { columnId, direction: "desc" };
+      } else if (sort.direction === "desc") {
+        newSort = { columnId: null, direction: null };
+      } else {
+        newSort = { columnId, direction: "asc" };
+      }
+    } else {
+      newSort = { columnId, direction: "asc" };
+    }
+    onSort?.(newSort);
+  };
+
+  const handleColumnResize = (columnId: string, width: number) => {
+    setColumnWidth(columnId, width);
+    onColumnResize?.(columnId, width);
+  };
+
+  return (
+    <>
+    <div className="sectioned-list-table" data-testid="sectioned-list-table">
+      {/* Sticky Header */}
+      <div className="sectioned-list-header" data-testid="table-header">
+        <DndContext
+          id="column-dnd"
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={handleColumnDragStart}
+          onDragEnd={handleColumnDragEnd}
+        >
+          <SortableContext
+            items={columnIds}
+            strategy={horizontalListSortingStrategy}
+          >
+            {/* Drag handle + checkbox placeholder */}
+            <div className="column-header placeholder" style={{ width: 60 }} />
+
+            {visibleColumns.map((column) => (
+              <SortableColumnHeader
+                key={column.id}
+                column={column}
+                sort={sort}
+                onSort={handleSort}
+                onResize={(width) => handleColumnResize(column.id, width)}
+              />
+            ))}
+
+            {/* Add Column Button */}
+            <div
+              className="column-header add-column"
+              onClick={() => setShowColumnPicker(true)}
+              data-testid="add-column-button"
+            >
+              <span className="add-column-icon">+</span>
+            </div>
+          </SortableContext>
+        </DndContext>
+      </div>
+
+      {/* Column Picker Modal */}
+      {showColumnPicker && (
+        <div className="column-picker-modal" data-testid="column-picker-modal">
+          <div className="column-picker-content">
+            <h3>Column Visibility</h3>
+            {orderedColumns.map((column) => (
+              <label key={column.id} className="column-picker-item">
+                <input
+                  type="checkbox"
+                  checked={column.visible !== false}
+                  onChange={(e) => {
+                    setColumnVisibility(column.id, e.target.checked);
+                    onColumnVisibilityChange?.(column.id, e.target.checked);
+                  }}
+                  data-testid={`column-visibility-${column.id}`}
+                />
+                {column.header}
+              </label>
+            ))}
+            <div className="column-picker-actions">
+              <button onClick={() => onAddColumn?.()} data-testid="add-new-column">
+                Add new column
+              </button>
+              <button onClick={() => setShowColumnPicker(false)}>Close</button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Sections - Single DndContext for both sections and rows */}
+      <div className="sectioned-list-body">
+        <DndContext
+          id="sections-and-rows-dnd"
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
+          onDragEnd={handleDragEnd}
+          onDragCancel={() => {
+            setSectionDropIndicator(null);
+            setRowDropIndicator(null);
+            setDragState({ isDragging: false, dragType: null, activeId: null });
+          }}
+        >
+          <SortableContext
+            items={sectionIds}
+            strategy={verticalListSortingStrategy}
+          >
+            {sections.map((section) => (
+              <SortableSection
+                key={section.id}
+                sortableId={`${SECTION_PREFIX}${section.id}`}
+                section={section}
+                onToggle={() => onToggleSection?.(section.id)}
+                onRename={(name) => onRenameSection?.(section.id, name)}
+                onDelete={() => onDeleteSection?.(section.id)}
+                onAddRow={() => onAddRow?.(section.id)}
+                onCellEdit={(itemIndex, columnId, value) =>
+                  onCellEdit?.(section.id, itemIndex, columnId, value)
+                }
+                onRowComplete={(itemIndex, completed) =>
+                  onRowComplete?.(section.id, itemIndex, completed)
+                }
+                onRowAction={(itemIndex, itemId, action) =>
+                  onRowAction?.(section.id, itemIndex, itemId, action)
+                }
+                onItemOpen={handleItemOpen}
+                getItemId={getItemId}
+                isItemCompleted={isItemCompleted}
+                isDragDisabled={isRowDragDisabled}
+                columns={visibleColumns}
+                collapseDuringDrag={
+                  dragState.dragType === "section" &&
+                  dragState.activeId === section.id
+                }
+                dropIndicatorPosition={
+                  sectionDropIndicator?.sectionId === section.id
+                    ? sectionDropIndicator.position
+                    : null
+                }
+                rowDropIndicatorIndex={
+                  rowDropIndicator?.sectionId === section.id
+                    ? rowDropIndicator.index
+                    : null
+                }
+                assignees={effectiveAssignees}
+              />
+            ))}
+          </SortableContext>
+
+          <DragOverlay>
+            {dragState.dragType === "section" && activeSection ? (
+              <div className="drag-overlay-section">
+                <div className="sectioned-list-section-header">
+                  <span className="drag-icon">&#x2847;</span>
+                  <span className="section-name">{activeSection.name}</span>
+                  <span className="section-count">
+                    ({activeSection.items.length})
+                  </span>
+                </div>
+              </div>
+            ) : null}
+
+            {dragState.dragType === "row" && activeRow ? (
+              <div className="sectioned-list-row sectioned-list-row-overlay">
+                <div className="row-drag-handle">
+                  <span className="drag-icon">⠿</span>
+                </div>
+                <div className="row-checkbox-cell">
+                  <input type="checkbox" checked={isItemCompleted?.(activeRow.item) ?? false} readOnly />
+                </div>
+                {visibleColumns.map((column) => (
+                  <div
+                    key={column.id}
+                    className="row-cell"
+                    style={{ width: column.width, minWidth: column.minWidth }}
+                  >
+                    <TableCellContent
+                      column={column}
+                      item={activeRow.item}
+                      rowIndex={activeRow.index}
+                      assignees={effectiveAssignees}
+                    />
+                  </div>
+                ))}
+              </div>
+            ) : null}
+          </DragOverlay>
+        </DndContext>
+
+        {/* Add Section Button */}
+        <button
+          className="add-section-button"
+          onClick={() => onAddSection?.()}
+          data-testid="add-section-button"
+        >
+          <span className="add-section-icon">+</span>
+          <span>Add section</span>
+        </button>
+      </div>
+    </div>
+
+    {/* Built-in drawer for item details when renderItemDetails is provided */}
+    {renderItemDetails && (
+      <Drawer
+        open={selectedItem !== null}
+        onOpenChange={(open) => !open && setSelectedItem(null)}
+        direction={drawerProps?.side ?? "right"}
+      >
+        <DrawerContent
+          style={{
+            width: drawerProps?.width ?? 400,
+            maxWidth: "100vw",
+          }}
+        >
+          {selectedItem && renderItemDetails(selectedItem)}
+        </DrawerContent>
+      </Drawer>
+    )}
+    </>
+  );
+}