@exxatdesignux/ui 0.2.18 → 0.2.19

package/template/components/new-question-composer.tsx

@@ -7,21 +7,10 @@
  *
  *   ├─ PageHeader (title + actions; parent trail is in `SiteHeader`)
  *   │     · "New question" + "V1 · Last updated …" subtitle
- *   │     · single primary CTA — Save as draft (⏎)
- *   │     · ⋯ overflow menu (⌘⌥M) for inspector toggle + discard
- *   ├─ 2-column layout (lg+): page scrolls as one; inspector card `sticky` on lg+
- *   │     ┌─ Builder (left, no card chrome)
- *   │     │     · Question prompt        (h1-style Textarea — type-aware)
- *   │     │     · Answer block — varies by question type
- *   │     │     · Explanation / rubric / model answer
- *   │     │     · References             (repeatable list)
- *   │     └─ Inspector (right, bg-card panel)
- *   │           · Question format        (SelectionTileGrid → compact)
- *   │           · Location               (folder SelectionTileGrid)
- *   │           · Difficulty / Bloom / NBME (chips)
- *   │           · Tags                   (Input + Badge list)
- *   │       Sidebar-style collapse (⌘⌥]) — collapsed rail mimics
- *   │       `NestedSecondaryPanelShell` icon mode.
+ *   │     · Save question (⏎) + Save as draft + ⋯ discard (⌘⌥M)
+ *   └─ Single column (`FocusedWorkflowPageTemplate` — see `docs/focused-workflow-page-pattern.md`)
+ *         · Details — format, folder, difficulty, Bloom, NBME, tags
+ *         · Question prompt, answer block, explanation, references
  *
  * Composes existing primitives — `PageHeader`, `Form`/`FormField`,
  * `Input`, `Textarea`, `Checkbox`, `Badge`, `Button`, `Tip`, `Kbd`,
@@ -776,11 +765,9 @@ export function NewQuestionComposer({
   const router = useRouter()
   const [submitting, setSubmitting] = React.useState(false)
   const [tagDraft, setTagDraft] = React.useState("")
-  const [inspectorOpen, setInspectorOpen] = React.useState(true)
   const [moreOpen, setMoreOpen] = React.useState(false)
-  /** Question-type chooser visibility — collapses into a single
-      "selected type" tile once the author picks the first time so the
-      inspector stays compact for the rest of the authoring flow. */
+  const [inspectorOpen, setInspectorOpen] = React.useState(true)
+  /** Question-type chooser — collapses to a compact row after first pick. */
   const [typeChooserOpen, setTypeChooserOpen] = React.useState(true)
   /** Local folder list — extended in-place when the author adds one
       from the location picker so the new entry is selectable without
@@ -1102,11 +1089,6 @@ export function NewQuestionComposer({
             disabled={submitting}
             onInvoke={() => setMoreOpen(o => !o)}
           />
-          <Shortcut
-            keys="⌘⌥]"
-            disabled={submitting}
-            onInvoke={() => setInspectorOpen(o => !o)}
-          />
 
           <form
             onSubmit={form.handleSubmit(values => persist({ ...values, status: "in_review" }, "publish"))}

package/template/components/product-switcher.tsx

@@ -52,6 +52,7 @@ export function ProductSwitcher() {
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
               size="lg"
+              tooltip={iconRail ? current.label : undefined}
               className={cn(
                 "items-start py-2 text-sidebar-foreground data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
                 expandedOrMobile &&
@@ -91,8 +92,8 @@ export function ProductSwitcher() {
 
           <DropdownMenuContent
             align="start"
-            side="bottom"
-            sideOffset={4}
+            side={iconRail ? "right" : "bottom"}
+            sideOffset={iconRail ? 8 : 4}
           >
             <DropdownMenuLabel className="text-xs text-muted-foreground">
               Switch product

package/template/components/question-bank-client.tsx

@@ -27,6 +27,7 @@ import { QUESTION_BANK_ITEMS } from "@/lib/mock/question-bank"
 import { QUESTION_BANK_HEADER_COLLABORATORS } from "@/lib/mock/question-bank-header-collaborators"
 import { DEFAULT_QUESTION_BANK_FOLDERS, type QuestionBankFolder } from "@/lib/mock/question-bank-folders"
 import { questionBankKpiInsight, questionBankKpiMetrics } from "@/lib/mock/question-bank-kpi"
+import { QUESTION_BANK_SUPPORTED_VIEWS } from "@/lib/question-bank-supported-views"
 import {
   applyQuestionBankHubDisplayFilters,
   isQuestionBankDefaultNav,
@@ -122,7 +123,6 @@ export function QuestionBankClient() {
 
   // Stable Set of tab ids — defaults are constant so this only updates if tabs change.
   const tabIds = React.useMemo(() => new Set(tabs.map(t => t.id)), [tabs])
-
   // Keep the latest pathname / searchParamsKey / tabIds available to the (stable) hashchange
   // listener via refs, so we don't re-subscribe a window listener on every URL change.
   const navRef = React.useRef({ pathname, searchParamsKey, tabIds, hubBasePath })
@@ -314,6 +314,7 @@ export function QuestionBankClient() {
                   onFoldersChange={setFolders}
                   onItemsChange={setItems}
                   view={tab.viewType}
+                  supportedViewTypes={QUESTION_BANK_SUPPORTED_VIEWS}
                   onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
                 />
               )}
@@ -417,6 +418,7 @@ export function QuestionBankClient() {
                 />
               )}
               showMetrics={showMetrics}
+              supportedViewTypes={QUESTION_BANK_SUPPORTED_VIEWS}
               exportOpen={exportOpen}
               onExportOpenChange={setExportOpen}
               exportTotalRows={count}
@@ -433,6 +435,7 @@ export function QuestionBankClient() {
                   onFoldersChange={setFolders}
                   onItemsChange={setItems}
                   view={tab.viewType}
+                  supportedViewTypes={QUESTION_BANK_SUPPORTED_VIEWS}
                   onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
                 />
               )}

package/template/components/question-bank-folder-columns-panel.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { cn } from "@/lib/utils"
+import { ListPageFolderColumnsPanel } from "@/components/data-views/list-page-folder-columns-panel"
+import { FolderDetailsShell } from "@/components/folder-details-shell"
+import type { QuestionBankItem } from "@/lib/mock/question-bank"
+import {
+  type QuestionBankFolder,
+  QUESTION_BANK_FOLDER_COLOR_STYLES,
+  QUESTION_BANK_FOLDER_ICON_COLORS,
+} from "@/lib/mock/question-bank-folders"
+
+function isQuestionBankFolder(
+  item: QuestionBankFolder | QuestionBankItem,
+): item is QuestionBankFolder {
+  return "parentId" in item && !("stem" in item)
+}
+
+export interface QuestionBankFolderColumnsPanelProps {
+  folders: QuestionBankFolder[]
+  rows: QuestionBankItem[]
+  panelRenderDetail: (row: QuestionBankItem) => React.ReactNode
+  onAddFolder: (parentId: string | null) => void
+  onAddQuestion: (parentId: string | null) => void
+  onCustomizeFolder?: (folder: QuestionBankFolder) => void
+}
+
+/** Question bank **panel** view — Miller columns over folders + questions. */
+export function QuestionBankFolderColumnsPanel({
+  folders,
+  rows,
+  panelRenderDetail,
+  onAddFolder,
+  onAddQuestion,
+  onCustomizeFolder,
+}: QuestionBankFolderColumnsPanelProps) {
+  return (
+    <ListPageFolderColumnsPanel<QuestionBankFolder, QuestionBankItem>
+      folders={folders}
+      items={rows}
+      isFolder={isQuestionBankFolder}
+      getFolderParentId={f => f.parentId}
+      getFolderName={f => f.name}
+      getItemFolderId={i => i.folderId}
+      getItemLabel={i => i.stem}
+      renderItemDetail={panelRenderDetail}
+      onAddFolder={onAddFolder}
+      onAddItem={onAddQuestion}
+      addItemAriaLabel="Add question"
+      renderFolderDetail={(folder, { folders: allFolders, items }) => (
+        <FolderDetailsShell folder={folder} folders={allFolders} questions={items} />
+      )}
+      renderFolderRowClassName={(folder, { isSelected, depth }) =>
+        !isSelected && folder.colorKey && depth > 0
+          ? QUESTION_BANK_FOLDER_COLOR_STYLES[folder.colorKey]?.tile
+          : undefined
+      }
+      renderFolderIcon={(folder, { isSelected }) => (
+        <i
+          className={cn(
+            "fa-folder shrink-0 text-sm",
+            isSelected ? "fa-solid" : "fa-light",
+            folder.colorKey && QUESTION_BANK_FOLDER_ICON_COLORS[folder.colorKey],
+          )}
+          aria-hidden="true"
+        />
+      )}
+      renderItemMeta={(item, { isSelected }) =>
+        item.type === "multiple_choice"
+          ? "MCQ"
+          : item.difficulty?.charAt(0).toUpperCase() ?? ""
+      }
+      renderFolderActions={folder => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="button"
+              size="icon-xs"
+              variant="ghost"
+              aria-label={`Actions for folder ${folder.name}`}
+              className="shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+            >
+              <i className="fa-light fa-ellipsis text-xs" aria-hidden="true" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onSelect={() => onCustomizeFolder?.(folder)}>
+              <i className="fa-light fa-wand-magic-sparkles text-xs" aria-hidden="true" />
+              Customize
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    />
+  )
+}