@exxatdesignux/ui 0.1.0 → 0.2.7

package/template/components/hub-tree-panel-view.tsx

@@ -0,0 +1,672 @@
+"use client"
+
+/**
+ * **Tree view** — `ListPageTreePanelShell` + outline tree + read-only details (`FolderDetailsShell`).
+ * Hub wiring (folders, mock sheet) stays in the caller; this module hosts question-bank demo wiring only.
+ */
+
+import * as React from "react"
+import {
+  ArrowRightLeft,
+  CheckCircle2Icon,
+  ChevronRightIcon,
+  FileIcon,
+  FolderIcon,
+  Hourglass,
+  PencilLine,
+  X,
+} from "lucide-react"
+import { ListHubStatusBadge, LIST_HUB_INSPECTOR_CHIP_SHELL } from "@/components/list-hub-status-badge"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { Separator } from "@/components/ui/separator"
+import { Tip } from "@/components/ui/tip"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { ListPageTreePanelShell } from "@/components/data-views/list-page-tree-panel-shell"
+import { ListPageSplitDetailsPlaceholder } from "@/components/data-views/list-page-split-details-placeholder"
+import { ListPageTreeColumnHeader } from "@/components/data-views/list-page-tree-column-header"
+import { QuestionBankNewFolderSheet } from "@/components/question-bank-new-folder-sheet"
+import type {
+  QuestionBankItem,
+  QuestionBankDifficulty,
+  QuestionBankStatus,
+} from "@/lib/mock/question-bank"
+import type { QuestionBankFolder, QuestionBankFolderColorKey } from "@/lib/mock/question-bank-folders"
+import { QUESTION_BANK_STATUS_BADGE_CLASS, QUESTION_BANK_STATUS_ICON } from "@/lib/list-status-badges"
+import { formatDateUS } from "@/lib/date-filter"
+import {
+  deriveBloomLevel,
+  deriveLastEditedLine,
+  deriveQuestionItemCode,
+  deriveTags,
+  QUESTION_TYPE_ABBREV,
+} from "@/lib/mock/question-bank-inspector"
+import { FolderDetailsShell } from "@/components/folder-details-shell"
+import { initialsFromDisplayName } from "@/lib/initials-from-name"
+
+const DIFFICULTY_LABEL: Record<QuestionBankDifficulty, string> = {
+  easy: "Easy",
+  medium: "Medium",
+  hard: "Hard",
+}
+
+/** Inspector header label — “Saved” for published matches reviewer checklist language. */
+const INSPECTOR_STATUS_LABEL: Record<QuestionBankStatus, string> = {
+  published: "Saved",
+  draft: "Draft",
+  in_review: "In review",
+}
+
+// ============================================================================
+// TreeItem — recursive folder/question renderer using Collapsible
+// ============================================================================
+
+interface TreeItemProps {
+  folder: QuestionBankFolder
+  folders: QuestionBankFolder[]
+  questions: QuestionBankItem[]
+  selectedItemId: string | null
+  depth?: number
+  onSelectItem: (itemId: string) => void
+}
+
+function TreeItem({
+  folder,
+  folders,
+  questions,
+  selectedItemId,
+  depth = 0,
+  onSelectItem,
+}: TreeItemProps) {
+  const childFolders = folders
+    .filter(f => f.parentId === folder.id)
+    .sort((a, b) => a.name.localeCompare(b.name))
+  const childQuestions = questions
+    .filter(q => q.folderId === folder.id)
+
+  const hasChildren = childFolders.length > 0 || childQuestions.length > 0
+  const isFolderSelected = selectedItemId === folder.id
+  const indent = depth * 12
+
+  return (
+    <Collapsible>
+      {/* Folder row */}
+      <div className="group flex items-center hover:bg-muted/50">
+        <div style={{ width: indent }} className="shrink-0" />
+
+        {/* Expand chevron or spacer */}
+        {hasChildren ? (
+          <CollapsibleTrigger asChild>
+            <button
+              type="button"
+              className="flex h-8 w-5 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-none"
+            >
+              <ChevronRightIcon className="h-3.5 w-3.5 transition-transform duration-150 group-data-[state=open]:rotate-90 [[data-state=open]_&]:rotate-90" />
+            </button>
+          </CollapsibleTrigger>
+        ) : (
+          <div className="w-5 shrink-0" />
+        )}
+
+        {/* Folder button */}
+        <button
+          type="button"
+          onClick={() => onSelectItem(folder.id)}
+          className={cn(
+            "flex flex-1 items-center gap-2 py-1.5 pr-3 text-left text-sm transition-colors duration-75",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+            isFolderSelected
+              ? "bg-accent text-accent-foreground"
+              : "text-foreground",
+          )}
+          aria-selected={isFolderSelected}
+          role="option"
+        >
+          <FolderIcon
+            className={cn(
+              "h-4 w-4 shrink-0",
+              isFolderSelected ? "fill-current opacity-80" : "text-muted-foreground",
+            )}
+          />
+          <span className="truncate leading-tight">{folder.name}</span>
+          {hasChildren && (
+            <span className="ml-auto shrink-0 text-xs tabular-nums text-muted-foreground">
+              {childFolders.length + childQuestions.length}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* Children */}
+      {hasChildren && (
+        <CollapsibleContent>
+          {childFolders.map(child => (
+            <TreeItem
+              key={child.id}
+              folder={child}
+              folders={folders}
+              questions={questions}
+              selectedItemId={selectedItemId}
+              depth={depth + 1}
+              onSelectItem={onSelectItem}
+            />
+          ))}
+          {childQuestions.map(question => {
+            const isSelected = selectedItemId === question.id
+            return (
+              <div key={question.id} className="group flex items-center hover:bg-muted/50">
+                <div style={{ width: indent + 12 + 20 }} className="shrink-0" />
+                <button
+                  type="button"
+                  onClick={() => onSelectItem(question.id)}
+                  className={cn(
+                    "flex flex-1 items-center gap-2 py-1.5 pr-3 text-left text-sm transition-colors duration-75",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+                    isSelected
+                      ? "bg-accent text-accent-foreground"
+                      : "text-foreground",
+                  )}
+                  aria-selected={isSelected}
+                  role="option"
+                >
+                  <FileIcon
+                    className={cn(
+                      "h-3.5 w-3.5 shrink-0",
+                      isSelected ? "fill-current opacity-80" : "text-muted-foreground",
+                    )}
+                  />
+                  <span className="truncate leading-tight">{question.stem}</span>
+                </button>
+              </div>
+            )
+          })}
+        </CollapsibleContent>
+      )}
+    </Collapsible>
+  )
+}
+
+// ============================================================================
+// DetailsPanel — right panel content (folder or question details)
+// ============================================================================
+
+function DetailSection({
+  title,
+  children,
+  className,
+}: {
+  title: string
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <section className={cn("min-w-0", className)}>
+      <h3 className="mb-2 text-xs font-medium text-muted-foreground">{title}</h3>
+      {children}
+    </section>
+  )
+}
+
+function InspectorSectionTitle({ children, id }: { children: React.ReactNode; id?: string }) {
+  return (
+    <p
+      id={id}
+      className="mb-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground"
+    >
+      {children}
+    </p>
+  )
+}
+
+interface DetailsPanelProps {
+  selectedItemId: string | null
+  folders: QuestionBankFolder[]
+  questions: QuestionBankItem[]
+  /** Clears tree selection (header dismiss). */
+  onClearSelection?: () => void
+}
+
+function DetailsPanel({ selectedItemId, folders, questions, onClearSelection }: DetailsPanelProps) {
+  if (!selectedItemId) {
+    return (
+      <ListPageSplitDetailsPlaceholder title="Nothing selected" />
+    )
+  }
+
+  const folder = folders.find(f => f.id === selectedItemId)
+  if (folder) {
+    return (
+      <FolderDetailsShell
+        folder={folder}
+        folders={folders}
+        questions={questions}
+        onClearSelection={onClearSelection}
+      />
+    )
+  }
+
+  const question = questions.find(q => q.id === selectedItemId)
+  if (question) {
+    const parentFolder = folders.find(f => f.id === question.folderId)
+    const folderLeafName = parentFolder?.name ?? "—"
+    const itemCode = deriveQuestionItemCode(question)
+    const bloom = deriveBloomLevel(question)
+    const tags = deriveTags(question)
+    const createdBy = question.createdBy ?? question.author
+    const creatorInitials = initialsFromDisplayName(createdBy)
+    const createdAtLabel = formatDateUS(question.createdAt ?? question.updatedAt)
+    const lastEditedLine = deriveLastEditedLine(question)
+    const versionLabel = question.version ?? "v1"
+
+    return (
+      <div className="flex h-full min-h-0 flex-col overflow-hidden bg-card">
+        <header className="shrink-0 border-b border-border/60 bg-muted/10 px-4 pb-4 pt-3">
+          <div className="flex items-start justify-between gap-3">
+            <ListHubStatusBadge
+              surface="detail"
+              label={INSPECTOR_STATUS_LABEL[question.status]}
+              tintClassName={QUESTION_BANK_STATUS_BADGE_CLASS[question.status]}
+              icon={QUESTION_BANK_STATUS_ICON[question.status]}
+            />
+            {onClearSelection ? (
+              <Tip label="Close details" side="bottom">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  className="shrink-0 text-muted-foreground hover:text-foreground"
+                  onClick={onClearSelection}
+                  aria-label="Close details"
+                >
+                  <X className="size-4" aria-hidden />
+                </Button>
+              </Tip>
+            ) : null}
+          </div>
+          <h2 className="mt-3 text-lg font-semibold leading-snug tracking-tight text-foreground">{question.stem}</h2>
+          <div className="mt-3 flex flex-wrap gap-2">
+            <Tip label="Opens the full editor when your bank workflow is connected." side="bottom">
+              <span className="inline-flex">
+                <Button type="button" size="sm" className="gap-1.5 shadow-sm" disabled>
+                  <PencilLine className="size-3.5" aria-hidden />
+                  Edit question
+                </Button>
+              </span>
+            </Tip>
+            <Tip
+              label={
+                question.status === "draft"
+                  ? "Already a draft."
+                  : "Revert connects when your assessments API is wired."
+              }
+              side="bottom"
+            >
+              <span className="inline-flex">
+                <Button type="button" variant="outline" size="sm" className="gap-1.5" disabled={question.status === "draft"}>
+                  <Hourglass className="size-3.5" aria-hidden />
+                  Revert to draft
+                </Button>
+              </span>
+            </Tip>
+            <Tip label="Move question connects when folder APIs are wired." side="bottom">
+              <span className="inline-flex">
+                <Button type="button" variant="outline" size="sm" className="gap-1.5" disabled>
+                  <ArrowRightLeft className="size-3.5" aria-hidden />
+                  Move
+                </Button>
+              </span>
+            </Tip>
+          </div>
+        </header>
+
+        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+          <div className="space-y-5 px-4 py-4">
+            <dl className="space-y-2.5 text-sm">
+              <div className="grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] gap-x-3 gap-y-0.5">
+                <dt className="text-muted-foreground">Bloom&apos;s</dt>
+                <dd className="font-medium text-foreground">{bloom}</dd>
+              </div>
+              <div className="grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] gap-x-3 gap-y-0.5">
+                <dt className="text-muted-foreground">Difficulty</dt>
+                <dd className="font-medium text-foreground">{DIFFICULTY_LABEL[question.difficulty]}</dd>
+              </div>
+              <div className="grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] gap-x-3 gap-y-0.5">
+                <dt className="text-muted-foreground">Type</dt>
+                <dd className="font-medium text-foreground">{QUESTION_TYPE_ABBREV[question.type]}</dd>
+              </div>
+              <div className="grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] gap-x-3 gap-y-0.5">
+                <dt className="text-muted-foreground">Folder</dt>
+                <dd className="min-w-0 font-medium text-foreground">{folderLeafName}</dd>
+              </div>
+              <div className="grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] items-center gap-x-3 gap-y-0.5">
+                <dt className="text-muted-foreground">Code</dt>
+                <dd>
+                  <span className="inline-flex rounded-md border border-rose-200/90 bg-rose-50 px-2 py-0.5 font-mono text-xs font-medium leading-none text-rose-950 shadow-sm dark:border-rose-500/35 dark:bg-rose-950/45 dark:text-rose-50">
+                    {itemCode}
+                  </span>
+                </dd>
+              </div>
+            </dl>
+
+            {tags.length > 0 ? (
+              <div>
+                <InspectorSectionTitle>Tags</InspectorSectionTitle>
+                <div className="flex flex-wrap gap-2" role="list" aria-label="Question tags">
+                  {tags.map(raw => {
+                    const label = raw.replace(/^#/, "").trim()
+                    return (
+                      <Badge
+                        key={label}
+                        variant="outline"
+                        role="listitem"
+                        className={cn(
+                          LIST_HUB_INSPECTOR_CHIP_SHELL,
+                          "border-border/60 bg-muted/15 font-normal text-foreground",
+                        )}
+                      >
+                        #{label}
+                      </Badge>
+                    )
+                  })}
+                </div>
+              </div>
+            ) : null}
+
+            <Separator className="bg-border/60" />
+
+            <section className="min-w-0">
+              <InspectorSectionTitle>Creator &amp; history</InspectorSectionTitle>
+              <div className="space-y-3 text-sm">
+                <div className="flex gap-3">
+                  <span
+                    className="flex size-8 shrink-0 items-center justify-center rounded-full bg-pink-500/15 text-xs font-semibold text-pink-950 dark:bg-pink-500/25 dark:text-pink-50"
+                    aria-hidden
+                  >
+                    {creatorInitials}
+                  </span>
+                  <div className="min-w-0">
+                    <p className="text-xs text-muted-foreground">Created by</p>
+                    <p className="font-medium leading-snug text-foreground">{createdBy}</p>
+                    <p className="mt-0.5 text-xs text-muted-foreground">{createdAtLabel}</p>
+                  </div>
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">Last edited</p>
+                  <p className="font-medium text-foreground">{lastEditedLine}</p>
+                </div>
+                <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+                  <p className="text-sm">
+                    <span className="text-muted-foreground">Version </span>
+                    <span className="font-medium tabular-nums text-foreground">{versionLabel}</span>
+                  </p>
+                  <Tip label="Version history opens when connected to your CMS.">
+                    <span className="inline-flex">
+                      <Button
+                        type="button"
+                        variant="link"
+                        className="h-auto gap-1 px-0 py-0 text-xs font-normal"
+                        disabled
+                      >
+                        Version history
+                        <ChevronRightIcon className="size-3.5 opacity-70" aria-hidden />
+                      </Button>
+                    </span>
+                  </Tip>
+                </div>
+              </div>
+            </section>
+
+            <Separator className="bg-border/60" />
+
+            <section className="min-w-0">
+              <InspectorSectionTitle>Usage</InspectorSectionTitle>
+              <dl className="space-y-2 text-sm">
+                <div className="grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] gap-x-3">
+                  <dt className="text-muted-foreground">Used in</dt>
+                  <dd className="font-medium text-foreground">
+                    {question.examUsageCount != null ? `${question.examUsageCount} exams` : "—"}
+                  </dd>
+                </div>
+                <div className="grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] gap-x-3">
+                  <dt className="text-muted-foreground">PBI</dt>
+                  <dd className="font-semibold tabular-nums text-foreground">
+                    {question.pbi != null ? question.pbi.toFixed(2) : "—"}
+                  </dd>
+                </div>
+                <div className="grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] gap-x-3">
+                  <dt className="text-muted-foreground">Avg score</dt>
+                  <dd className="font-medium text-foreground">
+                    {question.avgScoreCorrectPct != null ? `${question.avgScoreCorrectPct}% correct` : "—"}
+                  </dd>
+                </div>
+                <div className="grid grid-cols-[minmax(5.5rem,auto)_minmax(0,1fr)] gap-x-3">
+                  <dt className="text-muted-foreground">Last used</dt>
+                  <dd className="font-medium text-foreground">{question.lastUsedLabel ?? "—"}</dd>
+                </div>
+              </dl>
+            </section>
+
+            {question.type === "multiple_choice" && question.options && question.options.length > 0 ? (
+              <>
+                <Separator className="bg-border/60" />
+                <DetailSection title="Answer choices">
+                  <ul className="flex flex-col gap-2" aria-label="Multiple choice options">
+                    {question.options.map((opt, idx) => {
+                      const letter = String.fromCharCode(65 + idx)
+                      const isCorrect = Boolean(opt.isCorrect)
+                      return (
+                        <li
+                          key={`${question.id}-opt-${idx}`}
+                          className={cn(
+                            "flex items-start gap-2.5 rounded-lg border px-3 py-2.5 text-sm transition-colors",
+                            isCorrect
+                              ? "border-emerald-500/40 bg-emerald-500/10 shadow-[inset_0_0_0_1px] shadow-emerald-500/15"
+                              : "border-border/50 bg-muted/10",
+                          )}
+                        >
+                          <span
+                            className={cn(
+                              "flex size-7 shrink-0 items-center justify-center rounded-md border text-xs font-semibold tabular-nums",
+                              isCorrect
+                                ? "border-emerald-500/40 bg-emerald-500/15 text-emerald-900 dark:text-emerald-100"
+                                : "border-border/60 bg-background text-muted-foreground",
+                            )}
+                          >
+                            {letter}
+                          </span>
+                          <span
+                            className={cn(
+                              "min-w-0 flex-1 leading-snug",
+                              isCorrect ? "font-medium text-foreground" : "text-foreground/90",
+                            )}
+                          >
+                            {opt.text}
+                          </span>
+                          {isCorrect ? (
+                            <span className="flex shrink-0 items-center gap-1 text-emerald-600 dark:text-emerald-400">
+                              <CheckCircle2Icon className="size-4" aria-hidden />
+                              <span className="sr-only">Correct answer</span>
+                            </span>
+                          ) : null}
+                        </li>
+                      )
+                    })}
+                  </ul>
+                </DetailSection>
+              </>
+            ) : null}
+
+            {question.type === "true_false" ? (
+              <>
+                <Separator className="bg-border/60" />
+                <DetailSection title="Response format">
+                  <p className="rounded-lg border border-border/50 bg-muted/10 px-3 py-3 text-xs leading-relaxed text-muted-foreground">
+                    Learners choose <span className="font-medium text-foreground">True</span> or{" "}
+                    <span className="font-medium text-foreground">False</span>. No options list is shown in the bank
+                    preview.
+                  </p>
+                </DetailSection>
+              </>
+            ) : null}
+
+            {question.type === "short_answer" ? (
+              <>
+                <Separator className="bg-border/60" />
+                <DetailSection title="Response format">
+                  <p className="rounded-lg border border-border/50 bg-muted/10 px-3 py-3 text-xs leading-relaxed text-muted-foreground">
+                    Free-text response; grading rules and sample answers are managed when the question is edited in the
+                    full editor.
+                  </p>
+                </DetailSection>
+              </>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full min-h-0 flex-col items-center justify-center bg-gradient-to-b from-muted/25 to-card px-6 py-10 text-center text-muted-foreground">
+      <div className="mb-3 flex size-12 items-center justify-center rounded-xl border border-border/60 bg-muted/20">
+        <FileIcon className="size-6 opacity-50" aria-hidden />
+      </div>
+      <p className="text-sm font-medium text-foreground">Item not found</p>
+      <p className="mt-1 max-w-[14rem] text-xs leading-relaxed text-muted-foreground">
+        This selection is no longer in the tree. Choose another folder or question.
+      </p>
+    </div>
+  )
+}
+
+// ============================================================================
+// HubTreePanelView — tree + details wiring (question bank demo; reusable shell above)
+// ============================================================================
+
+export interface HubTreePanelViewProps {
+  items: QuestionBankItem[]
+  folders: QuestionBankFolder[]
+  onItemsChange: (items: QuestionBankItem[]) => void
+  onFoldersChange: (folders: QuestionBankFolder[]) => void
+}
+
+export function HubTreePanelView({
+  items,
+  folders,
+  onFoldersChange,
+}: HubTreePanelViewProps) {
+  const [selectedItemId, setSelectedItemId] = React.useState<string | null>(null)
+  const [newFolderOpen, setNewFolderOpen] = React.useState(false)
+  const [newFolderParentId, setNewFolderParentId] = React.useState<string | null>(null)
+  const [customizingFolder, setCustomizingFolder] = React.useState<QuestionBankFolder | null>(null)
+
+  const rootFolders = React.useMemo(
+    () => folders.filter(f => f.parentId === null).sort((a, b) => a.name.localeCompare(b.name)),
+    [folders],
+  )
+
+  const handleNewFolderCreated = React.useCallback(
+    (newFolder: { name: string; icon: string; colorKey: QuestionBankFolderColorKey; parentId: string | null }) => {
+      if (customizingFolder) {
+        onFoldersChange(
+          folders.map(f =>
+            f.id === customizingFolder.id
+              ? { ...f, name: newFolder.name, icon: newFolder.icon, colorKey: newFolder.colorKey }
+              : f,
+          ),
+        )
+        setCustomizingFolder(null)
+      } else {
+        onFoldersChange([
+          ...folders,
+          {
+            id: `fld-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`,
+            name: newFolder.name,
+            icon: newFolder.icon,
+            colorKey: newFolder.colorKey,
+            parentId: newFolder.parentId,
+          },
+        ])
+      }
+      setNewFolderOpen(false)
+    },
+    [customizingFolder, folders, onFoldersChange],
+  )
+
+  return (
+    <>
+      <ListPageTreePanelShell
+        resizableGroupId="hub-tree-panel"
+        ariaLabel="Folder tree and details"
+        tree={
+          <>
+            <ListPageTreeColumnHeader
+              title="Questions"
+              trailing={
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      size="icon-sm"
+                      variant="ghost"
+                      onClick={() => {
+                        setNewFolderParentId(null)
+                        setCustomizingFolder(null)
+                        setNewFolderOpen(true)
+                      }}
+                      aria-label="Add folder"
+                    >
+                      <i className="fa-light fa-folder-plus text-xs" aria-hidden="true" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top" sideOffset={4}>
+                    Add folder
+                  </TooltipContent>
+                </Tooltip>
+              }
+            />
+
+            <div className="min-h-0 flex-1 overflow-y-auto py-1" role="listbox" aria-label="Folder tree">
+              {rootFolders.length === 0 ? (
+                <p className="px-3 py-4 text-sm text-muted-foreground">No folders</p>
+              ) : (
+                rootFolders.map(folder => (
+                  <TreeItem
+                    key={folder.id}
+                    folder={folder}
+                    folders={folders}
+                    questions={items}
+                    selectedItemId={selectedItemId}
+                    depth={0}
+                    onSelectItem={setSelectedItemId}
+                  />
+                ))
+              )}
+            </div>
+          </>
+        }
+        details={
+          <DetailsPanel
+            selectedItemId={selectedItemId}
+            folders={folders}
+            questions={items}
+            onClearSelection={() => setSelectedItemId(null)}
+          />
+        }
+      />
+
+      <QuestionBankNewFolderSheet
+        open={newFolderOpen}
+        onOpenChange={setNewFolderOpen}
+        parentFolderId={customizingFolder?.parentId ?? newFolderParentId}
+        customizingFolder={customizingFolder}
+        onCreated={handleNewFolderCreated}
+      />
+    </>
+  )
+}