canopycms 0.0.0

package/src/editor/EntryNavigator.tsx

@@ -0,0 +1,665 @@
+'use client'
+
+import React, { useMemo, useRef, useEffect } from 'react'
+import type { ContentId, LogicalPath } from '../paths/types'
+
+import {
+  ActionIcon,
+  Badge,
+  Box,
+  Group,
+  Menu,
+  ScrollArea,
+  Stack,
+  Text,
+  Tooltip,
+  Tree,
+  useTree,
+  type RenderTreeNodePayload,
+  type TreeNodeData,
+  rem,
+} from '@mantine/core'
+import {
+  IconArrowDown,
+  IconArrowUp,
+  IconDots,
+  IconEdit,
+  IconFolderPlus,
+  IconPlus,
+  IconTrash,
+} from '@tabler/icons-react'
+
+import { calculatePathToEntry } from './editor-utils'
+
+// TreeController type from Mantine's useTree hook
+type TreeController = ReturnType<typeof useTree>
+
+export interface EntryNavItem {
+  path: LogicalPath
+  label: string
+  status?: string
+  collectionPath?: LogicalPath
+  contentId?: ContentId // 12-char embedded ID for ordering
+  /** True when this entry's file conflicted during rebase */
+  conflictNotice?: boolean
+}
+
+export interface EntryNavCollection {
+  path: LogicalPath
+  label: string
+  type: 'collection' | 'entry'
+  contentId?: ContentId // 12-char embedded ID for ordering
+  order?: readonly string[] // Order array for interleaving entries and children
+  entries?: EntryNavItem[]
+  children?: EntryNavCollection[]
+  /** True when this collection's .collection.json conflicted during rebase */
+  conflictNotice?: boolean
+  onAdd?: () => void
+  onEdit?: () => void
+  onAddSubCollection?: () => void
+  onDelete?: () => void
+}
+
+export interface EntryNavigatorProps {
+  items?: EntryNavItem[]
+  collections?: EntryNavCollection[]
+  selectedPath?: string
+  onSelect: (id: string) => void
+  onTreeControllerReady?: (controller: TreeController) => void
+  expandedStateRef?: React.MutableRefObject<Record<string, boolean>>
+  onExpandedStateChange?: (state: Record<string, boolean>) => void
+  /** Called when user requests to delete an entry */
+  onDeleteEntry?: (path: LogicalPath) => void
+  /** Called when user requests to rename an entry */
+  onRenameEntry?: (path: LogicalPath) => void
+  /** Called when user reorders an entry within a collection */
+  onReorderEntry?: (
+    collectionPath: LogicalPath,
+    contentId: string,
+    direction: 'up' | 'down',
+  ) => void
+  /** If provided, this collection path's node is hidden but its children are rendered at the top level */
+  hiddenRootPath?: string
+}
+
+export const EntryNavigator: React.FC<EntryNavigatorProps> = ({
+  items,
+  collections,
+  selectedPath,
+  onSelect,
+  onTreeControllerReady,
+  expandedStateRef,
+  onExpandedStateChange,
+  onDeleteEntry,
+  onRenameEntry,
+  onReorderEntry,
+  hiddenRootPath,
+}) => {
+  const selectedNodeRef = useRef<HTMLDivElement>(null)
+  const hasScrolledRef = useRef(false)
+  // Track expanded state synchronously to avoid race conditions on unmount
+  const localExpandedStateRef = useRef<Record<string, boolean>>(expandedStateRef?.current ?? {})
+  const treeData = useMemo<TreeNodeData[]>(() => {
+    if (collections?.length) {
+      const toTree = (col: EntryNavCollection): TreeNodeData => {
+        if (col.type === 'entry') {
+          const entry = col.entries?.[0]
+          return {
+            value: entry?.path ?? `collection:${col.path}`,
+            label: entry?.label ?? col.label,
+            nodeProps: {
+              status: entry?.status,
+              isEntry: true,
+              entryPath: entry?.path,
+            },
+            children: [],
+          }
+        }
+        const entries = col.entries ?? []
+        const childCollections = col.children ?? []
+        const totalChildren = entries.length + childCollections.length
+        const order = col.order ?? []
+
+        // Build entry nodes keyed by contentId
+        const entryNodesByContentId = new Map<string, TreeNodeData>()
+        entries.forEach((entry) => {
+          const node: TreeNodeData = {
+            value: entry.path,
+            label: entry.label,
+            nodeProps: {
+              status: entry.status,
+              isEntry: true,
+              entryPath: entry.path,
+              contentId: entry.contentId,
+              conflictNotice: entry.conflictNotice,
+              parentCollectionPath: col.path,
+              childIndex: 0, // Will be set below
+              totalChildrenCount: totalChildren,
+            },
+          }
+          if (entry.contentId) {
+            entryNodesByContentId.set(entry.contentId, node)
+          }
+        })
+
+        // Build child collection nodes keyed by contentId
+        const childNodesByContentId = new Map<string, TreeNodeData>()
+        childCollections.forEach((child) => {
+          const childTree = toTree(child)
+          const node: TreeNodeData = {
+            ...childTree,
+            nodeProps: {
+              ...childTree.nodeProps,
+              contentId: child.contentId,
+              parentCollectionPath: col.path,
+              childIndex: 0, // Will be set below
+              totalChildrenCount: totalChildren,
+            },
+          }
+          if (child.contentId) {
+            childNodesByContentId.set(child.contentId, node)
+          }
+        })
+
+        // Interleave entries and children based on order array
+        const allChildren: TreeNodeData[] = []
+        const usedContentIds = new Set<string>()
+
+        // First, add items in order
+        for (const contentId of order) {
+          const entryNode = entryNodesByContentId.get(contentId)
+          if (entryNode) {
+            entryNode.nodeProps = {
+              ...entryNode.nodeProps,
+              childIndex: allChildren.length,
+            }
+            allChildren.push(entryNode)
+            usedContentIds.add(contentId)
+            continue
+          }
+          const childNode = childNodesByContentId.get(contentId)
+          if (childNode) {
+            childNode.nodeProps = {
+              ...childNode.nodeProps,
+              childIndex: allChildren.length,
+            }
+            allChildren.push(childNode)
+            usedContentIds.add(contentId)
+          }
+        }
+
+        // Add any entries not in order (alphabetically)
+        const unorderedEntries = entries
+          .filter((e) => !e.contentId || !usedContentIds.has(e.contentId))
+          .sort((a, b) => (a.label ?? '').localeCompare(b.label ?? ''))
+        for (const entry of unorderedEntries) {
+          const node: TreeNodeData = {
+            value: entry.path,
+            label: entry.label,
+            nodeProps: {
+              status: entry.status,
+              isEntry: true,
+              entryPath: entry.path,
+              contentId: entry.contentId,
+              conflictNotice: entry.conflictNotice,
+              parentCollectionPath: col.path,
+              childIndex: allChildren.length,
+              totalChildrenCount: totalChildren,
+            },
+          }
+          allChildren.push(node)
+        }
+
+        // Add any child collections not in order (alphabetically)
+        const unorderedChildren = childCollections
+          .filter((c) => !c.contentId || !usedContentIds.has(c.contentId))
+          .sort((a, b) => (a.label ?? '').localeCompare(b.label ?? ''))
+        for (const child of unorderedChildren) {
+          const childTree = toTree(child)
+          const node: TreeNodeData = {
+            ...childTree,
+            nodeProps: {
+              ...childTree.nodeProps,
+              contentId: child.contentId,
+              parentCollectionPath: col.path,
+              childIndex: allChildren.length,
+              totalChildrenCount: totalChildren,
+            },
+          }
+          allChildren.push(node)
+        }
+
+        // Collections should always have children array (even if empty) to show chevron
+        // This matches standard file tree UI behavior where folders always show expand/collapse
+        return {
+          value: `collection:${col.path}`,
+          label: col.label,
+          nodeProps: {
+            isCollection: true,
+            type: col.type,
+            collectionPath: col.path,
+            conflictNotice: col.conflictNotice,
+            onAdd: col.onAdd,
+            onEdit: col.onEdit,
+            onAddSubCollection: col.onAddSubCollection,
+            onDelete: col.onDelete,
+          },
+          children: allChildren,
+        }
+      }
+
+      // If hiddenRootPath is set and matches a single root collection, return its children directly
+      // This allows the root collection's order/context to be used for top-level item reordering
+      if (hiddenRootPath && collections.length === 1 && collections[0].path === hiddenRootPath) {
+        const rootNode = toTree(collections[0])
+        return rootNode.children ?? []
+      }
+
+      return collections.map(toTree)
+    }
+
+    const flatItems = items ?? []
+    return flatItems.map((item) => ({
+      value: item.path,
+      label: item.label,
+      nodeProps: { status: item.status, isEntry: true, entryPath: item.path },
+    }))
+  }, [collections, items, hiddenRootPath])
+
+  // Initialize tree controller
+  const tree = useTree({
+    initialExpandedState: expandedStateRef?.current ?? {},
+    onNodeExpand: (value) => {
+      // Update local state synchronously
+      localExpandedStateRef.current = {
+        ...localExpandedStateRef.current,
+        [value]: true,
+      }
+      // Notify parent immediately
+      onExpandedStateChange?.(localExpandedStateRef.current)
+    },
+    onNodeCollapse: (value) => {
+      // Update local state synchronously
+      localExpandedStateRef.current = {
+        ...localExpandedStateRef.current,
+        [value]: false,
+      }
+      // Notify parent immediately
+      onExpandedStateChange?.(localExpandedStateRef.current)
+    },
+  })
+
+  // Forward tree controller to parent for collapse/expand all functionality
+
+  useEffect(() => {
+    onTreeControllerReady?.(tree)
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- fire only when callback ref changes, not on tree state
+  }, [onTreeControllerReady])
+
+  // Cleanup: save current state when component unmounts
+  // Empty dependency array ensures this only runs on mount/unmount, not on re-renders
+  useEffect(() => {
+    return () => {
+      onExpandedStateChange?.(localExpandedStateRef.current)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  // Restore state on mount and when selectedPath changes
+  useEffect(() => {
+    if (!selectedPath || !treeData) return
+
+    const savedState = expandedStateRef?.current ?? {}
+
+    // Calculate path to current entry and merge with saved state
+    const pathToEntry = calculatePathToEntry(selectedPath, treeData)
+    const baseState = { ...savedState, ...pathToEntry }
+
+    // Only update if state actually changed to avoid infinite loops
+    const currentStateJson = JSON.stringify(tree.expandedState)
+    const newStateJson = JSON.stringify(baseState)
+    if (currentStateJson !== newStateJson) {
+      tree.setExpandedState(baseState)
+      localExpandedStateRef.current = baseState
+      // Notify parent of the merged state
+      onExpandedStateChange?.(baseState)
+    }
+    // Dependencies limited to data changes only to prevent infinite update loops
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedPath, treeData])
+
+  // Auto-scroll to selected entry when drawer opens
+  useEffect(() => {
+    if (selectedPath && selectedNodeRef.current && !hasScrolledRef.current) {
+      // Small delay to ensure tree expansion completes first
+      const timeoutId = setTimeout(() => {
+        selectedNodeRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'nearest',
+        })
+        hasScrolledRef.current = true
+      }, 100)
+
+      return () => clearTimeout(timeoutId)
+    }
+  }, [selectedPath, tree.expandedState])
+
+  // Reset scroll flag when component mounts (drawer opens)
+  useEffect(() => {
+    hasScrolledRef.current = false
+  }, [])
+
+  const Chevron = ({ expanded, visible }: { expanded: boolean; visible: boolean }) => (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      style={{ opacity: visible ? 0.9 : 0 }}
+    >
+      {expanded ? (
+        <path d="M7.41 8.59 12 13.17 16.59 8.59 18 10l-6 6-6-6z" />
+      ) : (
+        <path d="M10 6 8.59 7.41 13.17 12 8.59 16.59 10 18l6-6z" />
+      )}
+    </svg>
+  )
+
+  const renderNode = ({
+    node,
+    elementProps,
+    hasChildren,
+    expanded,
+    level,
+  }: RenderTreeNodePayload) => {
+    const status = node.nodeProps?.status as string | undefined
+    const onAdd = node.nodeProps?.onAdd as (() => void) | undefined
+    const onEdit = node.nodeProps?.onEdit as (() => void) | undefined
+    const onAddSubCollection = node.nodeProps?.onAddSubCollection as (() => void) | undefined
+    const onDelete = node.nodeProps?.onDelete as (() => void) | undefined
+    const entryPath = node.nodeProps?.entryPath as LogicalPath | undefined
+    const contentId = node.nodeProps?.contentId as string | undefined
+    const parentCollectionPath = node.nodeProps?.parentCollectionPath as LogicalPath | undefined
+    const childIndex = node.nodeProps?.childIndex as number | undefined
+    const totalChildrenCount = node.nodeProps?.totalChildrenCount as number | undefined
+    const isCollection = node.nodeProps?.isCollection as boolean | undefined
+    const isEntry = node.nodeProps?.isEntry as boolean | undefined
+    const conflictNotice = node.nodeProps?.conflictNotice as boolean | undefined
+    const isLeaf = !hasChildren || isEntry
+    const selected = node.value === selectedPath
+
+    // For collections, always show chevron (even if empty) to match standard tree UI
+    // Mantine only provides hasChildren=true if children.length > 0, but we want
+    // collections to always be expandable
+    const showChevron = hasChildren || Boolean(isCollection)
+
+    // Reordering is available for both entries and collections that have contentId and parent path
+    const canReorder =
+      onReorderEntry && contentId && parentCollectionPath && typeof childIndex === 'number'
+    const canMoveUp = canReorder && childIndex > 0
+    const canMoveDown =
+      canReorder && typeof totalChildrenCount === 'number' && childIndex < totalChildrenCount - 1
+
+    // Determine if we should show a context menu
+    // Collections show menu for add/edit/delete actions OR for reordering (subcollections)
+    const hasCollectionMenu =
+      isCollection && (onAdd || onEdit || onAddSubCollection || onDelete || canReorder)
+    const hasEntryMenu = isEntry && entryPath && (onDeleteEntry || onRenameEntry || onReorderEntry)
+
+    return (
+      <Box
+        {...elementProps}
+        ref={selected ? selectedNodeRef : undefined}
+        data-testid={`entry-nav-item-${String(node.label ?? '')
+          .toLowerCase()
+          .replace(/\s+/g, '-')}`}
+        onClick={(event) => {
+          elementProps.onClick(event)
+          if (isLeaf && isEntry) {
+            onSelect(node.value)
+          }
+        }}
+        style={{
+          ...elementProps.style,
+          marginBottom: 4,
+          borderRadius: 10,
+          paddingInline: 10,
+          paddingBlock: 6,
+          paddingLeft: `calc(${rem(8)} + ${rem(level * 12)})`,
+          backgroundColor: selected ? 'var(--mantine-color-brand-0)' : undefined,
+          border: selected ? '1px solid var(--mantine-color-brand-3)' : '1px solid transparent',
+          transition: 'background-color 120ms ease, border-color 120ms ease',
+        }}
+      >
+        <Group gap="xs" justify="space-between" wrap="nowrap">
+          <Group gap={6} wrap="nowrap">
+            <Box
+              w={18}
+              h={18}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Chevron expanded={expanded} visible={showChevron} />
+            </Box>
+            <Text size="sm" fw={selected ? 600 : 500} truncate="end">
+              {node.label}
+            </Text>
+            {status && (
+              <Badge size="xs" variant="light" color="gray">
+                {status}
+              </Badge>
+            )}
+            {conflictNotice && (
+              <Tooltip
+                label="This content was updated on the base branch — a reviewer will reconcile"
+                withArrow
+              >
+                <Badge size="xs" variant="light" color="orange" data-testid="conflict-badge">
+                  conflict
+                </Badge>
+              </Tooltip>
+            )}
+          </Group>
+          <Group gap={4} wrap="nowrap">
+            {hasCollectionMenu && (
+              <Menu shadow="md" width={200} withinPortal position="bottom-end">
+                <Menu.Target>
+                  <ActionIcon
+                    size="xs"
+                    variant="subtle"
+                    color="gray"
+                    onClick={(event) => event.stopPropagation()}
+                    aria-label="Collection actions"
+                    data-testid={`collection-menu-${String(node.label ?? '')
+                      .toLowerCase()
+                      .replace(/\s+/g, '-')}`}
+                  >
+                    <IconDots size={14} />
+                  </ActionIcon>
+                </Menu.Target>
+                <Menu.Dropdown>
+                  {canReorder && (
+                    <>
+                      <Menu.Item
+                        leftSection={<IconArrowUp size={14} />}
+                        disabled={!canMoveUp}
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          onReorderEntry?.(parentCollectionPath!, contentId!, 'up')
+                        }}
+                      >
+                        Move Up
+                      </Menu.Item>
+                      <Menu.Item
+                        leftSection={<IconArrowDown size={14} />}
+                        disabled={!canMoveDown}
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          onReorderEntry?.(parentCollectionPath!, contentId!, 'down')
+                        }}
+                      >
+                        Move Down
+                      </Menu.Item>
+                      {(onAdd || onAddSubCollection || onEdit || onDelete) && <Menu.Divider />}
+                    </>
+                  )}
+                  {onAdd && (
+                    <Menu.Item
+                      leftSection={<IconPlus size={14} />}
+                      onClick={(event) => {
+                        event.stopPropagation()
+                        onAdd()
+                      }}
+                      data-testid="add-entry-menu-item"
+                    >
+                      Add Entry
+                    </Menu.Item>
+                  )}
+                  {onAddSubCollection && (
+                    <Menu.Item
+                      leftSection={<IconFolderPlus size={14} />}
+                      onClick={(event) => {
+                        event.stopPropagation()
+                        onAddSubCollection()
+                      }}
+                    >
+                      Add Sub-Collection
+                    </Menu.Item>
+                  )}
+                  {(onAdd || onAddSubCollection) && (onEdit || onDelete) && <Menu.Divider />}
+                  {onEdit && (
+                    <Menu.Item
+                      leftSection={<IconEdit size={14} />}
+                      onClick={(event) => {
+                        event.stopPropagation()
+                        onEdit()
+                      }}
+                    >
+                      Edit Collection
+                    </Menu.Item>
+                  )}
+                  {onDelete && (
+                    <Menu.Item
+                      leftSection={<IconTrash size={14} />}
+                      color="red"
+                      onClick={(event) => {
+                        event.stopPropagation()
+                        onDelete()
+                      }}
+                    >
+                      Delete Collection
+                    </Menu.Item>
+                  )}
+                </Menu.Dropdown>
+              </Menu>
+            )}
+            {hasEntryMenu && (
+              <Menu shadow="md" width={150} withinPortal position="bottom-end">
+                <Menu.Target>
+                  <ActionIcon
+                    size="xs"
+                    variant="subtle"
+                    color="gray"
+                    onClick={(event) => event.stopPropagation()}
+                    aria-label="Entry actions"
+                    data-testid={`entry-menu-${String(node.label ?? '')
+                      .toLowerCase()
+                      .replace(/\s+/g, '-')}`}
+                  >
+                    <IconDots size={14} />
+                  </ActionIcon>
+                </Menu.Target>
+                <Menu.Dropdown>
+                  {onReorderEntry && contentId && parentCollectionPath && (
+                    <>
+                      <Menu.Item
+                        leftSection={<IconArrowUp size={14} />}
+                        disabled={!canMoveUp}
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          onReorderEntry(parentCollectionPath, contentId, 'up')
+                        }}
+                      >
+                        Move Up
+                      </Menu.Item>
+                      <Menu.Item
+                        leftSection={<IconArrowDown size={14} />}
+                        disabled={!canMoveDown}
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          onReorderEntry(parentCollectionPath, contentId, 'down')
+                        }}
+                      >
+                        Move Down
+                      </Menu.Item>
+                      {(onRenameEntry || onDeleteEntry) && <Menu.Divider />}
+                    </>
+                  )}
+                  {onRenameEntry && (
+                    <Menu.Item
+                      leftSection={<IconEdit size={14} />}
+                      onClick={(event) => {
+                        event.stopPropagation()
+                        onRenameEntry(entryPath)
+                      }}
+                      data-testid="rename-entry-menu-item"
+                    >
+                      Rename Entry
+                    </Menu.Item>
+                  )}
+                  {onDeleteEntry && (
+                    <Menu.Item
+                      leftSection={<IconTrash size={14} />}
+                      color="red"
+                      onClick={(event) => {
+                        event.stopPropagation()
+                        onDeleteEntry(entryPath)
+                      }}
+                      data-testid="delete-entry-menu-item"
+                    >
+                      Delete Entry
+                    </Menu.Item>
+                  )}
+                </Menu.Dropdown>
+              </Menu>
+            )}
+          </Group>
+        </Group>
+      </Box>
+    )
+  }
+
+  return (
+    <Stack
+      h="100%"
+      style={{ display: 'flex', flexDirection: 'column' }}
+      gap={0}
+      data-testid="entry-navigator"
+    >
+      <ScrollArea type="auto" offsetScrollbars style={{ flex: 1 }}>
+        {treeData.length === 0 ? (
+          <Text size="xs" c="dimmed" py="sm">
+            No content
+          </Text>
+        ) : (
+          <Box py="sm">
+            <Tree
+              data={treeData}
+              tree={tree}
+              renderNode={renderNode}
+              selectOnClick={false}
+              levelOffset="sm"
+            />
+          </Box>
+        )}
+      </ScrollArea>
+    </Stack>
+  )
+}
+
+export default EntryNavigator