@drawnagency/primitives 0.1.77 → 0.1.78

package/src/components/shell/MediaFolderTree.tsx

@@ -0,0 +1,127 @@
+import { useRef } from "react";
+import { ChevronRight, Folder, LayoutGrid } from "lucide-react";
+import { cn } from "../../lib/cn";
+import type { MediaFolder, MediaItem } from "../../media/types";
+import { buildFolderTree, type FolderTreeNode } from "../../lib/media-folders";
+import { useFolderDropTarget } from "../../hooks/useMediaFolderDnd";
+
+export interface MediaFolderDndBindings {
+  foldersRef: React.RefObject<Record<string, MediaFolder>>;
+  itemsByIdRef: React.RefObject<Record<string, MediaItem>>;
+  onMoveMedia: (ids: string[], target: string | null) => void;
+  onMoveFolder: (id: string, target: string | null) => void;
+}
+
+export interface MediaFolderTreeProps {
+  folders: Record<string, MediaFolder>;
+  counts: Record<string, number>;
+  totalCount: number;
+  currentFolderId: string | null;
+  onNavigate: (id: string | null) => void;
+  expandedIds: Set<string>;
+  onExpand: (id: string) => void;
+  onToggleExpand: (id: string) => void;
+  dnd?: MediaFolderDndBindings;
+}
+
+
+function useRowDropTarget(
+  targetFolderId: string | null,
+  dnd: MediaFolderDndBindings | undefined,
+  onDragHover?: () => void,
+) {
+  const emptyFoldersRef = useRef<Record<string, MediaFolder>>({});
+  const emptyItemsRef = useRef<Record<string, MediaItem>>({});
+  return useFolderDropTarget<HTMLDivElement>({
+    targetFolderId,
+    enabled: dnd !== undefined,
+    foldersRef: dnd?.foldersRef ?? emptyFoldersRef,
+    itemsByIdRef: dnd?.itemsByIdRef ?? emptyItemsRef,
+    onMoveMedia: dnd?.onMoveMedia ?? (() => {}),
+    onMoveFolder: dnd?.onMoveFolder ?? (() => {}),
+    onDragHover,
+  });
+}
+
+const rowClass = (active: boolean, isDropTarget: boolean) =>
+  cn(
+    "flex w-full cursor-pointer items-center gap-1.5 rounded px-2 py-1.5 text-sm transition-colors",
+    active ? "bg-primary/10 font-medium text-primary" : "text-base-contrast hover:bg-base-accent",
+    isDropTarget && "ring-2 ring-primary ring-inset",
+  );
+
+function TreeRow({
+  node, depth, props,
+}: { node: FolderTreeNode; depth: number; props: MediaFolderTreeProps }) {
+  const { currentFolderId, onNavigate, expandedIds, onExpand, onToggleExpand, counts, dnd } = props;
+  const expanded = expandedIds.has(node.id);
+  const { ref, isDropTarget } = useRowDropTarget(node.id, dnd, () => onExpand(node.id));
+
+  return (
+    <div>
+      <div
+        ref={ref}
+        role="button"
+        tabIndex={0}
+        onClick={() => onNavigate(node.id)}
+        onKeyDown={(e) => { if (e.key === "Enter") onNavigate(node.id); }}
+        className={rowClass(currentFolderId === node.id, isDropTarget)}
+        style={{ paddingLeft: `${8 + depth * 14}px` }}
+      >
+        {node.children.length > 0 ? (
+          <button
+            type="button"
+            aria-label={`${expanded ? "Collapse" : "Expand"} ${node.name}`}
+            aria-expanded={expanded}
+            onClick={(e) => { e.stopPropagation(); onToggleExpand(node.id); }}
+            // Enter/Space keydown bubbles to the row BEFORE the button's
+            // synthetic click fires — stop it so the row doesn't navigate.
+            onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") e.stopPropagation(); }}
+            className="shrink-0 rounded p-0.5 hover:bg-base-200"
+          >
+            <ChevronRight size={12} className={cn("transition-transform", expanded && "rotate-90")} />
+          </button>
+        ) : (
+          <span className="w-[17px] shrink-0" />
+        )}
+        <Folder size={14} className="shrink-0 text-base-contrast-light" />
+        <span className="min-w-0 flex-1 truncate">{node.name}</span>
+        {(counts[node.id] ?? 0) > 0 && (
+          <span className="shrink-0 text-xs text-base-contrast-light">{counts[node.id]}</span>
+        )}
+      </div>
+      {expanded &&
+        node.children.map((child) => (
+          <TreeRow key={child.id} node={child} depth={depth + 1} props={props} />
+        ))}
+    </div>
+  );
+}
+
+export function MediaFolderTree(props: MediaFolderTreeProps) {
+  const { folders, totalCount, currentFolderId, onNavigate, dnd } = props;
+  const tree = buildFolderTree(folders);
+  const root = useRowDropTarget(null, dnd);
+
+  return (
+    <nav aria-label="Media folders" className="flex flex-col gap-0.5">
+      <div
+        ref={root.ref}
+        role="button"
+        tabIndex={0}
+        onClick={() => onNavigate(null)}
+        onKeyDown={(e) => { if (e.key === "Enter") onNavigate(null); }}
+        className={rowClass(currentFolderId === null, root.isDropTarget)}
+      >
+        <LayoutGrid size={14} className="shrink-0 text-base-contrast-light" />
+        <span className="min-w-0 flex-1 truncate">All media</span>
+        {totalCount > 0 && (
+          <span className="shrink-0 text-xs text-base-contrast-light">{totalCount}</span>
+        )}
+      </div>
+      {tree.map((node) => (
+        <TreeRow key={node.id} node={node} depth={0} props={props} />
+      ))}
+    </nav>
+  );
+}