@mostrom/app-shell 0.1.0

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

@@ -0,0 +1,731 @@
+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,
+  sortableKeyboardCoordinates,
+} from "@dnd-kit/sortable";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import {
+  Drawer,
+  DrawerContent,
+} from "@/components/ui/drawer";
+import { ArrowUpDown, Check, ChevronDown, Filter } from "lucide-react";
+import type { SectionedListBoardProps, DragState, Assignee, ItemOpenEvent } from "./types";
+import { SortableBoardSection } from "./sortable-section";
+import { DateRangeFilter } from "./date-range-filter";
+import { BoardCardContent } from "./board-card-content";
+import "./sectioned-list-board.css";
+
+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 SectionedListBoard<T>({
+  sections,
+  getItemId,
+  cardConfig,
+  onItemFieldChange,
+  isItemCompleted,
+  onSectionReorder,
+  onToggleSection,
+  onRenameSection,
+  onAddSection,
+  onDeleteSection,
+  onItemReorder,
+  onItemMoveToSection,
+  onAddItem,
+  onItemTitleEdit,
+  onItemComplete,
+  onItemAction,
+  filterOptions,
+  sortOptions,
+  filter = { field: null, value: null },
+  sort = { field: null, direction: null },
+  onFilterChange,
+  onSortChange,
+  dateRange = { from: undefined, to: undefined },
+  onDateRangeChange,
+  dateRangeLabel,
+  assignees,
+  onItemOpen,
+  renderItemDetails,
+  drawerProps,
+}: SectionedListBoardProps<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 [cardDropIndicator, setCardDropIndicator] = React.useState<{
+    sectionId: string;
+    index: number;
+  } | null>(null);
+  const effectiveAssignees = React.useMemo(() => {
+    if (assignees && assignees.length > 0) {
+      return assignees;
+    }
+    if (!cardConfig.avatarField) {
+      return [];
+    }
+    return deriveAssigneesFromSections(
+      sections,
+      cardConfig.avatarField.field as string
+    );
+  }, [assignees, sections, cardConfig.avatarField]);
+
+  // 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("[SectionedListBoard] handleItemOpen called:", event, "renderItemDetails:", !!renderItemDetails);
+      if (renderItemDetails) {
+        console.log("[SectionedListBoard] Setting selectedItem:", event.item);
+        setSelectedItem(event.item);
+      }
+      onItemOpen?.(event);
+    },
+    [renderItemDetails, onItemOpen]
+  );
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  // Determine if card drag should be disabled
+  const isCardDragDisabled = sort.field !== null || filter.field !== null;
+
+  const sectionIds = sections.map((s) => `${SECTION_PREFIX}${s.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 activeCard =
+    dragState.dragType === "card" && 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, sectionId: section.id };
+            }
+          }
+          return null;
+        })()
+      : null;
+
+  const handleDragStart = (event: DragStartEvent) => {
+    setSectionDropIndicator(null);
+    setCardDropIndicator(null);
+    const activeData = event.active.data.current as
+      | { type?: "section" | "card"; 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: "card",
+        activeId: id,
+      });
+    }
+  };
+
+  const handleDragOver = (event: DragOverEvent) => {
+    const activeId = event.active.id as string;
+    const activeData = event.active.data.current as
+      | { type?: "section" | "card"; 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 (cardDropIndicator) setCardDropIndicator(null);
+      return;
+    }
+
+    if (isSectionDrag) {
+      if (cardDropIndicator) setCardDropIndicator(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" | "card"; sectionId?: string; index?: number }
+        | undefined;
+      const targetSectionId = overData?.sectionId ?? parseSectionId(overId);
+
+      if (!targetSectionId || targetSectionId === activeSectionId) {
+        if (sectionDropIndicator) setSectionDropIndicator(null);
+        return;
+      }
+
+      const activeIndex = sections.findIndex((s) => s.id === activeSectionId);
+      const targetIndex = sections.findIndex((s) => s.id === targetSectionId);
+      let position: "before" | "after" = activeIndex < targetIndex ? "after" : "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 !== "card" || !activeData.sectionId) {
+      if (cardDropIndicator) setCardDropIndicator(null);
+      return;
+    }
+
+    const sourceSectionId = activeData.sectionId;
+    const overId = over.id as string;
+    const overData = over.data.current as
+      | { type?: "section" | "card"; sectionId?: string; index?: number }
+      | undefined;
+    const targetSectionId = overData?.sectionId ?? parseSectionId(overId);
+
+    if (!targetSectionId) {
+      if (cardDropIndicator) setCardDropIndicator(null);
+      return;
+    }
+
+    const targetSection = sections.find((section) => section.id === targetSectionId);
+    if (!targetSection) {
+      if (cardDropIndicator) setCardDropIndicator(null);
+      return;
+    }
+
+    let insertIndex = targetSection.items.length;
+    if (overData?.type === "card" && 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") {
+      insertIndex = 0;
+    }
+
+    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 (cardDropIndicator) setCardDropIndicator(null);
+      return;
+    }
+
+    setCardDropIndicator((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 pendingCardDropIndicator = cardDropIndicator;
+    setSectionDropIndicator(null);
+    setCardDropIndicator(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" | "card"; sectionId?: string; index?: number }
+      | undefined;
+    const overData = over.data.current as
+      | { type?: "section" | "card"; sectionId?: string; index?: number }
+      | undefined;
+
+    // Section drag
+    if (activeData?.type === "section" || activeId.startsWith(SECTION_PREFIX)) {
+      const activeSectionId = activeData?.sectionId ?? parseSectionId(activeId);
+      const overSectionId =
+        pendingSectionDropIndicator?.sectionId ??
+        overData?.sectionId ??
+        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;
+    }
+
+    // Card drag
+    if (!activeData || activeData.type !== "card") return;
+
+    const sourceSectionId = activeData.sectionId;
+    if (!sourceSectionId) return;
+    const sourceSection = sections.find((s) => s.id === sourceSectionId);
+    if (!sourceSection) return;
+
+    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 (
+        pendingCardDropIndicator &&
+        pendingCardDropIndicator.sectionId === sourceSectionId
+      ) {
+        const insertSlot = Math.max(
+          0,
+          Math.min(pendingCardDropIndicator.index, sourceSection.items.length)
+        );
+        newIndex = insertSlot > oldIndex ? insertSlot - 1 : insertSlot;
+      } else if (overData?.type === "card" && 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);
+        onItemReorder?.(sourceSectionId, newItems);
+      }
+    } else {
+      // Cross-section move
+      const item = sourceSection.items.find((i) => getItemId(i) === activeId);
+      if (item) {
+        const targetIndex =
+          pendingCardDropIndicator?.sectionId === targetSectionId
+            ? pendingCardDropIndicator.index
+            : undefined;
+        onItemMoveToSection?.(item, sourceSectionId, targetSectionId, targetIndex);
+      }
+    }
+  };
+
+  const handleFilterChange = (field: string | null, value: string | null) => {
+    onFilterChange?.({ field, value });
+  };
+
+  const handleSortChange = (field: string | null) => {
+    if (!field) {
+      onSortChange?.({ field: null, direction: null });
+      return;
+    }
+    if (sort.field === field) {
+      if (sort.direction === "asc") {
+        onSortChange?.({ field, direction: "desc" });
+      } else if (sort.direction === "desc") {
+        onSortChange?.({ field: null, direction: null });
+      } else {
+        onSortChange?.({ field, direction: "asc" });
+      }
+    } else {
+      onSortChange?.({ field, direction: "asc" });
+    }
+  };
+
+  return (
+    <>
+    <div className="sectioned-list-board" data-testid="sectioned-list-board">
+      {/* Filter/Sort/Date Controls */}
+      {(filterOptions || sortOptions || onDateRangeChange) && (
+        <div className="board-controls" data-testid="board-controls">
+          {filterOptions && filterOptions.length > 0 && (
+            <div className="board-filter-controls">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    className="board-dropdown-trigger"
+                    data-testid="board-filter-select"
+                  >
+                    <Filter size={16} />
+                    <span>
+                      {filter.value
+                        ? filterOptions.find((o) => o.value === filter.value)?.label ?? "Filter"
+                        : "Filter"}
+                    </span>
+                    <ChevronDown size={14} />
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem
+                    onClick={() => handleFilterChange(null, null)}
+                    className={!filter.value ? "bg-gray-100" : ""}
+                  >
+                    <span className="w-4 mr-2">
+                      {!filter.value && <Check size={14} />}
+                    </span>
+                    All
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  {filterOptions.map((option) => (
+                    <DropdownMenuItem
+                      key={option.id}
+                      onClick={() => handleFilterChange(option.field, option.value)}
+                      className={filter.value === option.value ? "bg-gray-100" : ""}
+                    >
+                      <span className="w-4 mr-2">
+                        {filter.value === option.value && <Check size={14} />}
+                      </span>
+                      {option.label}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          )}
+
+          {sortOptions && sortOptions.length > 0 && (
+            <div className="board-sort-controls">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <button
+                    className="board-dropdown-trigger"
+                    data-testid="board-sort-select"
+                  >
+                    <ArrowUpDown size={16} />
+                    <span>
+                      {sort.field
+                        ? `${sortOptions.find((o) => o.field === sort.field)?.label ?? "Sort"}${sort.direction === "asc" ? " ↑" : sort.direction === "desc" ? " ↓" : ""}`
+                        : "Sort"}
+                    </span>
+                    <ChevronDown size={14} />
+                  </button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <DropdownMenuItem
+                    onClick={() => handleSortChange(null)}
+                    className={!sort.field ? "bg-gray-100" : ""}
+                  >
+                    <span className="w-4 mr-2">
+                      {!sort.field && <Check size={14} />}
+                    </span>
+                    None
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  {sortOptions.map((option) => (
+                    <DropdownMenuItem
+                      key={option.id}
+                      onClick={() => handleSortChange(option.field)}
+                      className={sort.field === option.field ? "bg-gray-100" : ""}
+                    >
+                      <span className="w-4 mr-2">
+                        {sort.field === option.field && <Check size={14} />}
+                      </span>
+                      {option.label}
+                      {sort.field === option.field && sort.direction && (
+                        <span className="ml-auto text-gray-500">
+                          {sort.direction === "asc" ? "↑" : "↓"}
+                        </span>
+                      )}
+                    </DropdownMenuItem>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          )}
+
+          {onDateRangeChange && (
+            <div className="board-date-controls">
+              <DateRangeFilter
+                dateRange={dateRange}
+                onDateRangeChange={onDateRangeChange}
+                label={dateRangeLabel}
+              />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Board Sections */}
+      <div className="board-sections-container">
+        <DndContext
+          id="board-dnd"
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
+          onDragEnd={handleDragEnd}
+          onDragCancel={() => {
+            setSectionDropIndicator(null);
+            setCardDropIndicator(null);
+            setDragState({ isDragging: false, dragType: null, activeId: null });
+          }}
+        >
+          <SortableContext
+            items={sectionIds}
+            strategy={horizontalListSortingStrategy}
+          >
+            {sections.map((section) => (
+              <SortableBoardSection
+                key={section.id}
+                sortableId={`${SECTION_PREFIX}${section.id}`}
+                section={section}
+                getItemId={getItemId}
+                cardConfig={cardConfig}
+                onItemFieldChange={
+                  onItemFieldChange
+                    ? (itemId, field, value) =>
+                        onItemFieldChange(section.id, itemId, field, value)
+                    : undefined
+                }
+                isItemCompleted={isItemCompleted}
+                onToggle={() => onToggleSection?.(section.id)}
+                onRename={(name) => onRenameSection?.(section.id, name)}
+                onAddItem={() => onAddItem?.(section.id)}
+                onDelete={() => onDeleteSection?.(section.id)}
+                onItemTitleEdit={
+                  onItemTitleEdit
+                    ? (itemId, title) => onItemTitleEdit(section.id, itemId, title)
+                    : undefined
+                }
+                onItemComplete={
+                  onItemComplete
+                    ? (itemId, completed) => onItemComplete(section.id, itemId, completed)
+                    : undefined
+                }
+                onItemAction={
+                  onItemAction
+                    ? (itemId, action) => onItemAction(section.id, itemId, action)
+                    : undefined
+                }
+                onItemOpen={handleItemOpen}
+                isDragDisabled={isCardDragDisabled}
+                collapseDuringDrag={
+                  dragState.dragType === "section" &&
+                  dragState.activeId === section.id
+                }
+                dropIndicatorPosition={
+                  sectionDropIndicator?.sectionId === section.id
+                    ? sectionDropIndicator.position
+                    : null
+                }
+                cardDropIndicatorIndex={
+                  cardDropIndicator?.sectionId === section.id
+                    ? cardDropIndicator.index
+                    : null
+                }
+                assignees={effectiveAssignees}
+              />
+            ))}
+          </SortableContext>
+
+          <DragOverlay>
+            {dragState.dragType === "section" && activeSection ? (
+              <div className="drag-overlay-section">
+                <div className="board-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 === "card" && activeCard ? (
+              <div className="board-card board-card-overlay">
+                {isItemCompleted && (
+                  <div className="card-checkbox">
+                    <input
+                      type="checkbox"
+                      checked={isItemCompleted(activeCard.item)}
+                      readOnly
+                    />
+                  </div>
+                )}
+                <div className="card-content">
+                  <BoardCardContent
+                    item={activeCard.item}
+                    cardConfig={cardConfig}
+                    interactive={false}
+                  />
+                </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) => {
+          console.log("[SectionedListBoard] Drawer onOpenChange:", open);
+          if (!open) setSelectedItem(null);
+        }}
+        direction={drawerProps?.side ?? "right"}
+      >
+        <DrawerContent
+          className="!max-w-none"
+          style={{
+            width: drawerProps?.width ?? 400,
+            maxWidth: "100vw",
+          }}
+        >
+          {selectedItem && renderItemDetails(selectedItem)}
+        </DrawerContent>
+      </Drawer>
+    )}
+    </>
+  );
+}