@mostrom/app-shell 0.1.0

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

@@ -0,0 +1,251 @@
+import * as React from "react";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import type { Assignee, ColumnDefinition, ItemOpenEvent, Section, TableTaskAction } from "./types";
+import { SortableRow } from "./sortable-row";
+
+interface SortableSectionProps<T> {
+  sortableId: string;
+  section: Section<T>;
+  columns: ColumnDefinition<T>[];
+  onToggle: () => void;
+  onRename: (name: string) => void;
+  onDelete: () => void;
+  onAddRow: () => void;
+  onCellEdit: (itemIndex: number, columnId: string, value: unknown) => void;
+  onRowComplete: (itemIndex: number, completed: boolean) => void;
+  onRowAction?: (itemIndex: number, itemId: string, action: TableTaskAction) => void;
+  /** Callback fired when an item is opened */
+  onItemOpen?: (event: ItemOpenEvent<T>) => void;
+  getItemId: (item: T) => string;
+  isItemCompleted?: (item: T) => boolean;
+  isDragDisabled: boolean;
+  collapseDuringDrag?: boolean;
+  dropIndicatorPosition?: "before" | "after" | null;
+  rowDropIndicatorIndex?: number | null;
+  /** List of available assignees for the assignee selector */
+  assignees?: Assignee[];
+}
+
+export function SortableSection<T>({
+  sortableId,
+  section,
+  columns,
+  onToggle,
+  onRename,
+  onDelete,
+  onAddRow,
+  onCellEdit,
+  onRowComplete,
+  onRowAction,
+  onItemOpen,
+  getItemId,
+  isItemCompleted,
+  isDragDisabled,
+  collapseDuringDrag = false,
+  dropIndicatorPosition = null,
+  rowDropIndicatorIndex = null,
+  assignees,
+}: SortableSectionProps<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 = {
+    // Use translate-only transform to avoid text scaling artifacts while sorting.
+    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 rowIds = section.items.map(getItemId);
+
+  const handleDoubleClick = () => {
+    setIsEditing(true);
+    setEditName(section.name);
+    setTimeout(() => inputRef.current?.focus(), 0);
+  };
+
+  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);
+  };
+
+  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={`sectioned-list-section ${isDragging ? "dragging" : ""}`}
+      data-testid={`section-${section.id}`}
+    >
+      {dropIndicatorPosition === "before" && (
+        <div className="section-drop-indicator section-drop-indicator-before" />
+      )}
+
+      <div
+        className="sectioned-list-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>
+
+      {showContextMenu && (
+        <div
+          className="context-menu"
+          style={{ left: contextMenuPos.x, top: contextMenuPos.y }}
+          data-testid={`section-context-menu-${section.id}`}
+        >
+          <button onClick={onDelete} data-testid={`section-delete-${section.id}`}>
+            Delete section
+          </button>
+        </div>
+      )}
+
+      {/* Collapse content during drag for smooth Asana-style section dragging */}
+      {!isContentCollapsed && (
+        <div className="sectioned-list-section-content">
+          <SortableContext items={rowIds} strategy={verticalListSortingStrategy}>
+            {section.items.map((item, index) => (
+              <React.Fragment key={getItemId(item)}>
+                {rowDropIndicatorIndex === index && (
+                  <div className="row-drop-indicator" />
+                )}
+                <SortableRow
+                  item={item}
+                  itemId={getItemId(item)}
+                  index={index}
+                  columns={columns}
+                  sectionId={section.id}
+                  onCellEdit={(columnId, value) => onCellEdit(index, columnId, value)}
+                  onComplete={(completed) => onRowComplete(index, completed)}
+                  onTaskAction={
+                    onRowAction
+                      ? (action) => onRowAction(index, getItemId(item), action)
+                      : undefined
+                  }
+                  onItemOpen={
+                    onItemOpen
+                      ? (source) =>
+                          onItemOpen({
+                            item,
+                            itemId: getItemId(item),
+                            sectionId: section.id,
+                            source,
+                          })
+                      : undefined
+                  }
+                  isCompleted={isItemCompleted?.(item) ?? false}
+                  isDragDisabled={isDragDisabled}
+                  assignees={assignees}
+                />
+              </React.Fragment>
+            ))}
+            {rowDropIndicatorIndex === section.items.length && (
+              <div className="row-drop-indicator" />
+            )}
+          </SortableContext>
+
+          <div
+            className="add-task-row"
+            onClick={onAddRow}
+            data-testid={`add-task-${section.id}`}
+          >
+            <span className="add-task-icon">+</span>
+            <span className="add-task-text">Add task...</span>
+          </div>
+        </div>
+      )}
+
+      {dropIndicatorPosition === "after" && (
+        <div className="section-drop-indicator section-drop-indicator-after" />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,129 @@
+import * as React from "react";
+import Badge from "@cloudscape-design/components/badge";
+import type { Assignee, ColumnDefinition, TableBadgeColor } from "./types";
+import { AssigneeSelector } from "@/components/ui/assignee-selector";
+
+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 "";
+}
+
+function getInitials(name: string): string {
+  const parts = name
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean);
+
+  if (parts.length === 0) return "?";
+
+  return parts
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? "")
+    .join("");
+}
+
+function asNumber(value: unknown): number | null {
+  if (typeof value === "number") return Number.isFinite(value) ? value : null;
+  if (typeof value === "string" && value.trim()) {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+}
+
+function formatCurrency(value: unknown, column: ColumnDefinition<unknown>): string {
+  const numeric = asNumber(value);
+  if (numeric == null) return "";
+  return new Intl.NumberFormat(column.currencyLocale ?? "en-US", {
+    style: "currency",
+    currency: column.currencyCode ?? "USD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(numeric);
+}
+
+function getBadgeColor(column: ColumnDefinition<unknown>, value: string): TableBadgeColor {
+  return column.badgeColorMap?.[value] ?? column.defaultBadgeColor ?? "blue";
+}
+
+interface TableCellContentProps<T> {
+  column: ColumnDefinition<T>;
+  item: T;
+  rowIndex: number;
+  /** List of available assignees for the assignee selector */
+  assignees?: Assignee[];
+  /** Callback when a cell value changes */
+  onFieldChange?: (field: string, value: unknown) => void;
+}
+
+export function TableCellContent<T>({ column, item, rowIndex, assignees, onFieldChange }: TableCellContentProps<T>) {
+  const [isAssigneeSelectorOpen, setIsAssigneeSelectorOpen] = React.useState(false);
+  void rowIndex;
+  const value = (item as Record<string, unknown>)[column.field];
+
+  switch (column.type) {
+    case "currency": {
+      return formatCurrency(value, column as ColumnDefinition<unknown>);
+    }
+    case "badge": {
+      const text = toText(value);
+      if (!text) return null;
+      return <Badge color={getBadgeColor(column as ColumnDefinition<unknown>, text)}>{text}</Badge>;
+    }
+    case "avatar": {
+      const text = toText(value);
+      const canEditAssignee = Boolean(
+        onFieldChange &&
+        assignees &&
+        assignees.length > 0
+      );
+      const currentAssignee = assignees?.find((a) => a.name === text);
+
+      if (canEditAssignee) {
+        return (
+          <AssigneeSelector
+            open={isAssigneeSelectorOpen}
+            onOpenChange={setIsAssigneeSelectorOpen}
+            assignees={assignees ?? []}
+            selectedId={currentAssignee?.id}
+            onSelect={(assignee) => {
+              if (!onFieldChange) return;
+              onFieldChange(column.field, assignee?.name ?? "");
+            }}
+            mode="popover"
+            align="start"
+          >
+            <button
+              type="button"
+              className="table-avatar table-avatar-editable"
+              title={text ? `${text} (click to change)` : "Assign someone"}
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsAssigneeSelectorOpen(true);
+              }}
+            >
+              {getInitials(text)}
+            </button>
+          </AssigneeSelector>
+        );
+      }
+
+      return (
+        <div className="table-avatar" title={text || "Unassigned"}>
+          {getInitials(text)}
+        </div>
+      );
+    }
+    case "text":
+    default: {
+      return toText(value);
+    }
+  }
+}
+
+export function getEditableCellValue<T>(column: ColumnDefinition<T>, item: T): string {
+  const value = (item as Record<string, unknown>)[column.field];
+  return toText(value);
+}

package/src/components/sectioned-list-table/types.ts

@@ -0,0 +1,120 @@
+import type { ReactNode } from "react";
+import type { Assignee } from "@/components/ui/assignee-selector";
+
+// Re-export Assignee from shared location
+export type { Assignee };
+
+export type TableBadgeColor = "red" | "blue" | "green" | "grey";
+export type TableColumnType = "text" | "currency" | "badge" | "avatar";
+export type TableTaskAction =
+  | "duplicate"
+  | "markComplete"
+  | "addSubtask"
+  | "openTaskDetails"
+  | "openInNewTab"
+  | "copyTaskLink"
+  | "delete";
+
+/** Event fired when an item is opened (click, context menu, or keyboard) */
+export interface ItemOpenEvent<T> {
+  item: T;
+  itemId: string;
+  sectionId: string;
+  source: "click" | "context-menu" | "keyboard";
+}
+
+/** Configuration for the built-in drawer */
+export interface DrawerProps {
+  /** Which side the drawer opens from */
+  side?: "right" | "left";
+  /** Width of the drawer */
+  width?: number | string;
+}
+
+export interface ColumnDefinition<T = Record<string, unknown>> {
+  id: string;
+  header: string;
+  field: Extract<keyof T, string>;
+  type?: TableColumnType;
+  editable?: boolean;
+  badgeColorMap?: Record<string, TableBadgeColor>;
+  defaultBadgeColor?: TableBadgeColor;
+  currencyCode?: string;
+  currencyLocale?: string;
+  width?: number;
+  minWidth?: number;
+  sortable?: boolean;
+  resizable?: boolean;
+  visible?: boolean;
+}
+
+export interface Section<T = Record<string, unknown>> {
+  id: string;
+  name: string;
+  items: T[];
+  collapsed?: boolean;
+}
+
+export interface SortState {
+  columnId: string | null;
+  direction: "asc" | "desc" | null;
+}
+
+export interface ColumnPreferences {
+  order: string[];
+  visibility: Record<string, boolean>;
+  widths: Record<string, number>;
+}
+
+export interface SectionedListTableProps<T = Record<string, unknown>> {
+  columns: ColumnDefinition<T>[];
+  sections: Section<T>[];
+  onSectionReorder?: (sections: Section<T>[]) => void;
+  onRowReorder?: (sectionId: string, items: T[]) => void;
+  onRowMoveToSection?: (
+    item: T,
+    fromSectionId: string,
+    toSectionId: string,
+    targetIndex?: number
+  ) => void;
+  onAddColumn?: () => void;
+  onAddRow?: (sectionId: string) => void;
+  onAddSection?: () => void;
+  onDeleteSection?: (sectionId: string) => void;
+  onRenameSection?: (sectionId: string, newName: string) => void;
+  onToggleSection?: (sectionId: string) => void;
+  onCellEdit?: (sectionId: string, itemIndex: number, columnId: string, value: unknown) => void;
+  onRowComplete?: (sectionId: string, itemIndex: number, completed: boolean) => void;
+  onRowAction?: (
+    sectionId: string,
+    itemIndex: number,
+    itemId: string,
+    action: TableTaskAction
+  ) => void;
+  onColumnReorder?: (columns: ColumnDefinition<T>[]) => void;
+  onColumnResize?: (columnId: string, width: number) => void;
+  onColumnVisibilityChange?: (columnId: string, visible: boolean) => void;
+  onSort?: (sort: SortState) => void;
+  onFilter?: (filterText: string) => void;
+  filterText?: string;
+  sort?: SortState;
+  storageKey?: string;
+  getItemId: (item: T) => string;
+  isItemCompleted?: (item: T) => boolean;
+  /** List of available assignees for the assignee selector */
+  assignees?: Assignee[];
+
+  // Item Details Drawer
+  /** Callback fired when an item is opened (click, context menu, or keyboard) */
+  onItemOpen?: (event: ItemOpenEvent<T>) => void;
+  /** Render function for item details - when provided, enables built-in drawer */
+  renderItemDetails?: (item: T) => ReactNode;
+  /** Configuration for the built-in drawer */
+  drawerProps?: DrawerProps;
+}
+
+export interface DragState {
+  isDragging: boolean;
+  dragType: "section" | "row" | "column" | null;
+  activeId: string | null;
+}

package/src/components/sectioned-list-table/use-column-preferences.ts

@@ -0,0 +1,103 @@
+import * as React from "react";
+import type { ColumnDefinition, ColumnPreferences } from "./types";
+
+const DEFAULT_PREFERENCES: ColumnPreferences = {
+  order: [],
+  visibility: {},
+  widths: {},
+};
+
+export function useColumnPreferences<T>(
+  columns: ColumnDefinition<T>[],
+  storageKey?: string
+) {
+  const [preferences, setPreferences] = React.useState<ColumnPreferences>(() => {
+    if (!storageKey) return DEFAULT_PREFERENCES;
+    try {
+      const stored = localStorage.getItem(`column-prefs-${storageKey}`);
+      if (stored) {
+        return JSON.parse(stored);
+      }
+    } catch {
+      // Ignore localStorage errors
+    }
+    return DEFAULT_PREFERENCES;
+  });
+
+  // Save to localStorage when preferences change
+  React.useEffect(() => {
+    if (!storageKey) return;
+    try {
+      localStorage.setItem(`column-prefs-${storageKey}`, JSON.stringify(preferences));
+    } catch {
+      // Ignore localStorage errors
+    }
+  }, [preferences, storageKey]);
+
+  // Get ordered and filtered columns based on preferences
+  const orderedColumns = React.useMemo(() => {
+    const columnMap = new Map(columns.map((col) => [col.id, col]));
+    const order = preferences.order.length > 0 ? preferences.order : columns.map((c) => c.id);
+
+    return order
+      .filter((id) => columnMap.has(id))
+      .map((id) => {
+        const col = columnMap.get(id)!;
+        const isVisible = preferences.visibility[id] ?? col.visible ?? true;
+        const width = preferences.widths[id] ?? col.width;
+        return { ...col, visible: isVisible, width };
+      })
+      .concat(
+        // Add any new columns not in saved order
+        columns.filter((col) => !order.includes(col.id)).map((col) => ({
+          ...col,
+          visible: preferences.visibility[col.id] ?? col.visible ?? true,
+          width: preferences.widths[col.id] ?? col.width,
+        }))
+      );
+  }, [columns, preferences]);
+
+  const visibleColumns = React.useMemo(
+    () => orderedColumns.filter((col) => col.visible !== false),
+    [orderedColumns]
+  );
+
+  const setColumnOrder = React.useCallback((order: string[]) => {
+    setPreferences((prev) => ({ ...prev, order }));
+  }, []);
+
+  const setColumnVisibility = React.useCallback((columnId: string, visible: boolean) => {
+    setPreferences((prev) => ({
+      ...prev,
+      visibility: { ...prev.visibility, [columnId]: visible },
+    }));
+  }, []);
+
+  const setColumnWidth = React.useCallback((columnId: string, width: number) => {
+    setPreferences((prev) => ({
+      ...prev,
+      widths: { ...prev.widths, [columnId]: width },
+    }));
+  }, []);
+
+  const resetPreferences = React.useCallback(() => {
+    setPreferences(DEFAULT_PREFERENCES);
+    if (storageKey) {
+      try {
+        localStorage.removeItem(`column-prefs-${storageKey}`);
+      } catch {
+        // Ignore
+      }
+    }
+  }, [storageKey]);
+
+  return {
+    orderedColumns,
+    visibleColumns,
+    preferences,
+    setColumnOrder,
+    setColumnVisibility,
+    setColumnWidth,
+    resetPreferences,
+  };
+}