@exxatdesignux/ui 0.2.9 → 0.2.11

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

@@ -0,0 +1,436 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+
+import { OsFolderGlyph } from "@/components/data-views/os-folder-glyph"
+import { AskLeoComposer } from "@/components/ask-leo-composer"
+import { useAskLeo, useAskLeoPageContext } from "@/components/ask-leo-sidebar"
+import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
+import { Button } from "@/components/ui/button"
+import { Shortcut } from "@/components/ui/dropdown-menu"
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
+import { Tip } from "@/components/ui/tip"
+import { useAltKeyLabel, useModKeyLabel } from "@/hooks/use-mod-key-label"
+import {
+  DEFAULT_QUESTION_BANK_FOLDERS,
+  type QuestionBankFolder,
+  type QuestionBankFolderColorKey,
+} from "@/lib/mock/question-bank-folders"
+import { QUESTION_BANK_ITEMS, type QuestionBankItem } from "@/lib/mock/question-bank"
+import { QUESTION_BANK_HUB_ASK_LEO_PROMPTS } from "@/lib/question-bank-hub-search"
+import {
+  QUESTION_BANK_LIBRARY_PATH,
+  QUESTION_BANK_NAV_MY_AUTHOR,
+  questionBankNavHref,
+} from "@/lib/question-bank-nav"
+import { cn } from "@/lib/utils"
+
+const NEW_QUESTION_PROMPT =
+  "Help me create a new assessment question. Start by asking for topic, item type, difficulty, and learning objective, then draft the stem, answer choices, and rationale."
+
+const TEMPLATE_PROMPT =
+  "Walk me through choosing a question template (MCQ, OSCE, short answer, true/false) and produce a starter item with stem, options, rationale, and tags."
+
+const IMPORT_PROMPT =
+  "Guide me through importing assessment questions in bulk. Ask about source format (CSV, QTI, copy/paste), then outline what columns and mappings I need."
+
+/** Rotating example queries — read like something a user would actually type into search. */
+const HUB_COMPOSER_PLACEHOLDERS = [
+  "all the questions I used in last year's assessment",
+  "what did we run for the spring OSCE checkout?",
+  "Clinical folder, cardiology tagged, for third-year summative",
+  "find QB-2024-0012 and anything like it",
+  "that anemia vignette from the shelf-style block",
+  "MCQs I still need before next week's diabetes station",
+] as const
+
+interface ScopeChip {
+  id: string
+  label: string
+  href: string
+  count: number
+  folderGlyph: {
+    colorKey: QuestionBankFolderColorKey
+    icon: string
+    variant?: "solid" | "outline"
+  }
+}
+
+interface CreateTile {
+  id: string
+  label: string
+  description: string
+  icon: string
+  iconTint: string
+  onClick: () => void
+  badge?: "AI" | null
+  shortcutKeys?: string
+}
+
+interface FolderTile extends QuestionBankFolder {
+  count: number
+}
+
+function buildScopeChips(items: QuestionBankItem[]): ScopeChip[] {
+  const mine = items.filter(
+    i => i.author === QUESTION_BANK_NAV_MY_AUTHOR || i.createdBy === QUESTION_BANK_NAV_MY_AUTHOR,
+  ).length
+  return [
+    {
+      id: "all",
+      label: "All",
+      count: items.length,
+      href: QUESTION_BANK_LIBRARY_PATH,
+      folderGlyph: { colorKey: "muted", icon: "fa-layer-group", variant: "outline" },
+    },
+    {
+      id: "my",
+      label: "Mine",
+      count: mine,
+      href: questionBankNavHref({ scope: "my" }),
+      folderGlyph: { colorKey: "brand", icon: "fa-user" },
+    },
+  ]
+}
+
+function buildFolderTiles(items: QuestionBankItem[], folders: QuestionBankFolder[]): FolderTile[] {
+  const byFolder = new Map<string, number>()
+  for (const i of items) byFolder.set(i.folderId, (byFolder.get(i.folderId) ?? 0) + 1)
+  return folders
+    .filter(f => f.parentId === null)
+    .map(f => ({ ...f, count: byFolder.get(f.id) ?? 0 }))
+}
+
+// Static derivations of immutable mock data — computed once at module load,
+// not per render of the hub. Re-derive only if the underlying mock arrays change.
+const HUB_SCOPES = buildScopeChips(QUESTION_BANK_ITEMS)
+const HUB_FOLDER_TILES = buildFolderTiles(QUESTION_BANK_ITEMS, DEFAULT_QUESTION_BANK_FOLDERS)
+
+function isMineQuestionBankItem(i: QuestionBankItem): boolean {
+  return i.author === QUESTION_BANK_NAV_MY_AUTHOR || i.createdBy === QUESTION_BANK_NAV_MY_AUTHOR
+}
+
+const HUB_MINE_RECENTS = [...QUESTION_BANK_ITEMS]
+  .filter(isMineQuestionBankItem)
+  .sort((a, b) => (a.updatedAt < b.updatedAt ? 1 : -1))
+  .slice(0, 3)
+
+const HUB_ASK_LEO_PAGE_CONTEXT = {
+  title: "Question hub",
+  description:
+    "Browse and organize assessment items with AI-assisted workflows. The hub search field opens discovery results on `/question-bank/find` with your wording applied to the list; use the library’s Search in the sidebar for `/question-bank/list`. Pick a suggestion below when you want a full Ask Leo thread.",
+  suggestions: [...QUESTION_BANK_HUB_ASK_LEO_PROMPTS],
+  data: { surface: "question-bank-discovery-hub" as const },
+}
+
+function formatRelativeDate(iso: string): string {
+  const now = Date.now()
+  const t = new Date(iso).getTime()
+  if (Number.isNaN(t)) return iso
+  const diffDays = Math.round((now - t) / 86_400_000)
+  if (diffDays <= 0) return "today"
+  if (diffDays === 1) return "yesterday"
+  if (diffDays < 7) return `${diffDays}d ago`
+  if (diffDays < 30) return `${Math.round(diffDays / 7)}w ago`
+  if (diffDays < 365) return `${Math.round(diffDays / 30)}mo ago`
+  return `${Math.round(diffDays / 365)}y ago`
+}
+
+export function QuestionBankHubClient() {
+  const router = useRouter()
+  const { openWithPrompt, toggle } = useAskLeo()
+  const mod = useModKeyLabel()
+  const alt = useAltKeyLabel()
+
+  const [hubComposerValue, setHubComposerValue] = React.useState("")
+  const [hubComposerExpanded, setHubComposerExpanded] = React.useState(false)
+
+  const scopes = HUB_SCOPES
+  const folderTiles = HUB_FOLDER_TILES
+  const recents = HUB_MINE_RECENTS
+
+  useAskLeoPageContext(HUB_ASK_LEO_PAGE_CONTEXT)
+
+  const sendLeoSuggestion = React.useCallback(
+    (prompt: string) => {
+      openWithPrompt(prompt)
+    },
+    [openWithPrompt],
+  )
+
+  const openCreateQuestion = React.useCallback(() => {
+    openWithPrompt(NEW_QUESTION_PROMPT)
+  }, [openWithPrompt])
+
+  const onHubComposerSubmit = React.useCallback(
+    (message: string) => {
+      router.push(questionBankNavHref({ scope: "all", q: message.trim(), hubFind: true }))
+    },
+    [router],
+  )
+
+  const createShortcut = `${mod}${alt}N`
+
+  const hubFolderBrowserTileClass = cn(
+    "flex w-full flex-col items-center gap-2 rounded-xl border border-transparent p-3 text-center transition-colors",
+    "hover:border-border/80 hover:bg-muted/35",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  )
+
+  const createTiles = React.useMemo<CreateTile[]>(
+    () => [
+      {
+        id: "scratch",
+        label: "From scratch",
+        description: "Start with an empty editor and build the item by hand.",
+        icon: "fa-pen-to-square",
+        iconTint: "bg-brand/15 text-brand",
+        onClick: openCreateQuestion,
+        shortcutKeys: createShortcut,
+      },
+      {
+        id: "ask-leo",
+        label: "Draft with Ask Leo",
+        description: "Describe the outcome and let Leo propose stem, options, and rationale.",
+        icon: "fa-star-christmas",
+        iconTint: "bg-brand/15 text-brand",
+        badge: "AI",
+        onClick: openCreateQuestion,
+      },
+      {
+        id: "template",
+        label: "From a template",
+        description: "Pick MCQ, OSCE, short answer or true/false — Leo fills the scaffold.",
+        icon: "fa-clone",
+        iconTint: "bg-sky-500/15 text-sky-700 dark:text-sky-300",
+        onClick: () => sendLeoSuggestion(TEMPLATE_PROMPT),
+      },
+      {
+        id: "import",
+        label: "Import in bulk",
+        description: "Bring in CSV, QTI, or paste from another tool — Leo will map the columns.",
+        icon: "fa-file-import",
+        iconTint: "bg-muted text-muted-foreground",
+        onClick: () => sendLeoSuggestion(IMPORT_PROMPT),
+      },
+    ],
+    [openCreateQuestion, sendLeoSuggestion, createShortcut],
+  )
+
+  return (
+    <PrimaryPageTemplate
+      siteHeader={{
+        breadcrumbs: [{ label: "Dashboard", href: "/dashboard" }],
+        title: "Question hub",
+      }}
+      maxWidthClassName="max-w-5xl"
+      contentClassName="px-4 py-8 md:px-6 md:py-10"
+    >
+      <Shortcut keys={createShortcut} onInvoke={openCreateQuestion} />
+      {/* ⌘⌥K (Ask Leo toggle) is bound globally in AskLeoProvider — do not double-bind here. */}
+
+      <div className="flex min-h-0 flex-1 flex-col gap-10">
+        <header>
+          <h1 className="text-2xl font-semibold tracking-tight text-foreground md:text-3xl" style={{ fontFamily: "var(--font-heading)" }}>
+            Question hub
+          </h1>
+        </header>
+
+        <div className="min-w-0">
+          <p className="sr-only">
+            Example searches rotate in the field. Type your own request in plain language, then press Enter to open
+            the library with that AI search applied to the question list. This control does not open Ask Leo.
+          </p>
+          <div
+            className={cn(
+              "min-w-0 max-w-full border border-[color:var(--control-border)] bg-card shadow-sm transition-[border-radius,padding,box-shadow] duration-200 ease-out",
+              hubComposerExpanded ? "rounded-2xl p-1.5 shadow-md" : "rounded-full px-1 py-1",
+            )}
+          >
+            <AskLeoComposer
+              value={hubComposerValue}
+              onChange={setHubComposerValue}
+              onSubmit={onHubComposerSubmit}
+              onExpandedChange={setHubComposerExpanded}
+              animatedPlaceholders={[...HUB_COMPOSER_PLACEHOLDERS]}
+              animatedPlaceholderIntervalMs={4800}
+              animatedPlaceholderMaxLines={2}
+              leadingSlot="ai-mark"
+              inputLabel="AI search"
+              submitAppearance="search"
+              submitButtonAriaLabel="Run AI search"
+              placeholder="Search the bank…"
+              className="[&_form>div]:rounded-none [&_form>div]:border-0 [&_form>div]:bg-transparent [&_form>div]:shadow-none"
+            />
+          </div>
+        </div>
+
+        {recents.length > 0 && (
+          <section aria-labelledby="qb-recent" className="space-y-4">
+            <div className="flex items-baseline justify-between gap-3">
+              <h2 id="qb-recent" className="text-base font-semibold tracking-tight text-foreground">
+                Continue where you left off
+              </h2>
+              <Link
+                href={questionBankNavHref({ scope: "my" })}
+                className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+              >
+                View all
+                <i className="fa-light fa-arrow-right ms-1.5 text-xs" aria-hidden="true" />
+              </Link>
+            </div>
+            <ul className="grid gap-3 md:grid-cols-3" role="list">
+              {recents.map(item => (
+                <li key={item.id}>
+                  <Link
+                    href={questionBankNavHref({ scope: "my" })}
+                    className="group flex h-full flex-col gap-3 rounded-xl border border-border bg-card p-4 transition hover:border-interactive-hover hover:bg-interactive-hover/30 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    <div className="flex items-center gap-2">
+                      <span className="truncate font-mono text-xs text-muted-foreground">{item.questionId}</span>
+                      <span className="truncate text-xs text-muted-foreground">{item.topic}</span>
+                    </div>
+                    <p className="line-clamp-3 text-sm font-medium text-foreground group-hover:text-foreground">
+                      {item.stem}
+                    </p>
+                    <div className="mt-auto flex justify-end text-xs text-muted-foreground">
+                      <span className="shrink-0">{formatRelativeDate(item.updatedAt)}</span>
+                    </div>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </section>
+        )}
+
+        <section aria-labelledby="qb-browse" className="space-y-4">
+          <div className="flex items-baseline justify-between gap-3">
+            <h2 id="qb-browse" className="text-base font-semibold tracking-tight text-foreground">
+              Browse the library
+            </h2>
+            <Link
+              href={QUESTION_BANK_LIBRARY_PATH}
+              className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+            >
+              Open full library
+              <i className="fa-light fa-arrow-right ms-1.5 text-xs" aria-hidden="true" />
+            </Link>
+          </div>
+
+          <div
+            className="grid w-full grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
+            role="list"
+            aria-label="Library scopes and top folders"
+          >
+            {scopes.map(s => (
+              <div key={s.id} role="listitem" className="min-w-0">
+                <Link
+                  href={s.href}
+                  className={hubFolderBrowserTileClass}
+                >
+                  <OsFolderGlyph
+                    colorKey={s.folderGlyph.colorKey}
+                    icon={s.folderGlyph.icon}
+                    size="md"
+                    variant={s.folderGlyph.variant ?? "solid"}
+                  />
+                  <span className="line-clamp-2 w-full text-xs font-medium text-foreground">{s.label}</span>
+                  <span className="text-[11px] leading-snug text-muted-foreground tabular-nums">
+                    {s.count} {s.count === 1 ? "question" : "questions"}
+                  </span>
+                </Link>
+              </div>
+            ))}
+            {folderTiles.map(f => (
+              <div key={f.id} role="listitem" className="min-w-0">
+                <Link
+                  href={questionBankNavHref({ scope: "folder", folderId: f.id })}
+                  className={hubFolderBrowserTileClass}
+                >
+                  <OsFolderGlyph colorKey={f.colorKey} icon={f.icon} size="md" />
+                  <span className="line-clamp-2 w-full text-xs font-medium text-foreground">{f.name}</span>
+                  <span className="text-[11px] leading-snug text-muted-foreground tabular-nums">
+                    {f.count} {f.count === 1 ? "question" : "questions"}
+                  </span>
+                </Link>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section aria-labelledby="qb-create" className="space-y-4">
+          <div className="flex flex-wrap items-baseline justify-between gap-3">
+            <h2 id="qb-create" className="text-base font-semibold tracking-tight text-foreground">
+              Create a question
+            </h2>
+            <Tip
+              label={(
+                <span className="inline-flex items-center gap-1.5">
+                  Ask Leo
+                  <KbdGroup>
+                    <Kbd>{mod}</Kbd>
+                    <Kbd>{alt}</Kbd>
+                    <Kbd>K</Kbd>
+                  </KbdGroup>
+                </span>
+              )}
+            >
+              <Button type="button" variant="ghost" size="sm" onClick={toggle}>
+                <i className="fa-duotone fa-solid fa-star-christmas text-brand" aria-hidden="true" />
+                Open Ask Leo
+              </Button>
+            </Tip>
+          </div>
+
+          <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4" role="list">
+            {createTiles.map(tile => (
+              <li key={tile.id}>
+                <button
+                  type="button"
+                  onClick={tile.onClick}
+                  className="group flex h-full w-full flex-col items-start gap-3 rounded-xl border border-border bg-card p-4 text-left transition hover:border-interactive-hover hover:bg-interactive-hover/30 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <span className="flex w-full items-center justify-between">
+                    <span
+                      className={cn(
+                        "inline-flex h-10 w-10 items-center justify-center rounded-lg",
+                        tile.iconTint,
+                      )}
+                      aria-hidden="true"
+                    >
+                      <i
+                        className={cn(
+                          tile.badge === "AI" ? "fa-duotone fa-solid" : "fa-light",
+                          tile.icon,
+                          "text-lg",
+                        )}
+                      />
+                    </span>
+                    {tile.badge === "AI" && (
+                      <span className="inline-flex items-center rounded-full bg-brand/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-brand">
+                        AI
+                      </span>
+                    )}
+                  </span>
+                  <span className="space-y-1">
+                    <span className="block text-sm font-semibold text-foreground">{tile.label}</span>
+                    <span className="block text-xs leading-relaxed text-muted-foreground">
+                      {tile.description}
+                    </span>
+                  </span>
+                  {tile.shortcutKeys && (
+                    <KbdGroup className="mt-auto">
+                      <Kbd variant="bare">{tile.shortcutKeys}</Kbd>
+                    </KbdGroup>
+                  )}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </section>
+      </div>
+    </PrimaryPageTemplate>
+  )
+}

package/template/components/question-bank-list-view.tsx

@@ -1,37 +1,38 @@
 "use client"
 
-import * as React from "react"
 import type { QuestionBankItem } from "@/lib/mock/question-bank"
-import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
 import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
+import { formatDateUS } from "@/lib/date-filter"
 import {
-  QUESTION_BANK_STATUS_BADGE_CLASS,
-  QUESTION_BANK_STATUS_ICON,
-  QUESTION_BANK_STATUS_LABEL,
-} from "@/lib/list-status-badges"
+  QuestionBankFavoriteButton,
+  QUESTION_BANK_FAVORITE_HOVER_GROUP,
+} from "@/components/question-bank-favorite-button"
 
-function QuestionBankListRow({ row }: { row: QuestionBankItem }) {
+function QuestionBankListRow({
+  row,
+  onToggleFavorite,
+}: {
+  row: QuestionBankItem
+  onToggleFavorite: (row: QuestionBankItem) => void
+}) {
   return (
     <li>
       <ListPageBoardCard
+        className={QUESTION_BANK_FAVORITE_HOVER_GROUP}
         layout="row"
         rowContainerClassName="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:gap-4"
-        rowEnd={
-          <div className="flex shrink-0 items-center gap-2">
-            <ListHubStatusBadge
-              surface="board"
-              label={QUESTION_BANK_STATUS_LABEL[row.status]}
-              tintClassName={QUESTION_BANK_STATUS_BADGE_CLASS[row.status]}
-              icon={QUESTION_BANK_STATUS_ICON[row.status]}
-            />
+        rowEnd={(
+          <div className="flex shrink-0 items-center gap-1">
+            <QuestionBankFavoriteButton row={row} onToggleFavorite={onToggleFavorite} />
             <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
           </div>
-        }
+        )}
       >
         <div className="space-y-0.5">
           <p className="line-clamp-2 text-sm font-semibold text-foreground">{row.stem}</p>
+          <p className="font-mono text-xs text-muted-foreground">{row.questionId}</p>
           <p className="text-xs text-muted-foreground">
-            {row.topic} · Updated {row.updatedAt}
+            {row.topic} · Updated {formatDateUS(row.updatedAt)}
           </p>
           <p className="text-xs text-muted-foreground">{row.author}</p>
         </div>
@@ -40,7 +41,13 @@ function QuestionBankListRow({ row }: { row: QuestionBankItem }) {
   )
 }
 
-export function QuestionBankListView({ rows }: { rows: QuestionBankItem[] }) {
+export function QuestionBankListView({
+  rows,
+  onToggleFavorite,
+}: {
+  rows: QuestionBankItem[]
+  onToggleFavorite: (row: QuestionBankItem) => void
+}) {
   if (rows.length === 0) {
     return (
       <div className="px-4 py-16 text-center lg:px-6">
@@ -52,7 +59,7 @@ export function QuestionBankListView({ rows }: { rows: QuestionBankItem[] }) {
   return (
     <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
       {rows.map(row => (
-        <QuestionBankListRow key={row.id} row={row} />
+        <QuestionBankListRow key={row.id} row={row} onToggleFavorite={onToggleFavorite} />
       ))}
     </ul>
   )

package/template/components/question-bank-new-folder-sheet.tsx

@@ -131,32 +131,41 @@ export function QuestionBankNewFolderSheet({
         side="right"
         showCloseButton={false}
         showOverlay={false}
-        className="z-[60] flex w-full max-w-md flex-col gap-0 overflow-hidden rounded-xl border border-border p-0 shadow-xl sm:max-w-md"
+        className="z-[60] w-80 sm:max-w-80 flex flex-col gap-0 overflow-hidden rounded-xl border border-border p-0 shadow-xl"
         style={{ top: "0.5rem", bottom: "0.5rem", right: "0.5rem", height: "calc(100vh - 1rem)" }}
       >
-        {open ? (
-          <>
-            <Shortcut keys="Enter" onInvoke={() => !createDisabled && commit()} />
-            <Shortcut keys="Esc" onInvoke={() => onOpenChange(false)} />
-
-            <div className="flex items-center justify-between gap-3 px-4 pt-5 pb-6">
-              <SheetTitle className="text-base font-semibold leading-tight">
-                {customizingFolder ? "Customize Folder" : "New folder"}
-              </SheetTitle>
-              <Tip label="Close" side="bottom">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon-sm"
-                  aria-label="Close"
-                  onClick={() => onOpenChange(false)}
-                >
-                  <i className="fa-light fa-xmark text-[13px]" aria-hidden="true" />
-                </Button>
-              </Tip>
-            </div>
-
-            <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-4 pb-4 pt-2">
+        <Shortcut keys="Enter" disabled={createDisabled} onInvoke={commit} />
+
+        <div className="flex items-center justify-between gap-3 px-4 pt-5 pb-3">
+          <SheetTitle className="text-base font-semibold leading-tight">
+            {customizingFolder ? "Customize folder" : "New folder"}
+          </SheetTitle>
+          <Tip label="Close" side="bottom">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Close"
+              onClick={() => onOpenChange(false)}
+            >
+              <i className="fa-light fa-xmark text-[13px]" aria-hidden="true" />
+            </Button>
+          </Tip>
+        </div>
+
+        <p id="new-folder-panel-desc" className="px-4 pb-3 text-sm text-muted-foreground -mt-1">
+          {descriptionText}
+        </p>
+
+        <form
+          id="new-folder-form"
+          className="flex min-h-0 flex-1 flex-col"
+          onSubmit={event => {
+            event.preventDefault()
+            commit()
+          }}
+        >
+          <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-4 pb-4">
               <div className="flex flex-col items-center gap-4">
                 <FolderTilePreview
                   name={draft.name}
@@ -224,24 +233,29 @@ export function QuestionBankNewFolderSheet({
                   ))}
                 </div>
               </div>
-            </div>
-
-            <div className="mt-auto flex flex-row flex-wrap justify-end gap-2 border-t border-border px-4 py-4">
-              <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
-                Cancel
-                <KbdGroup className="ms-1.5">
-                  <Kbd variant="bare">Esc</Kbd>
-                </KbdGroup>
-              </Button>
-              <Button type="button" disabled={createDisabled} onClick={commit}>
-                {customizingFolder ? "Update folder" : "Create folder"}
-                <KbdGroup className="ms-1.5">
-                  <Kbd variant="bare">⏎</Kbd>
-                </KbdGroup>
-              </Button>
-            </div>
-          </>
-        ) : null}
+          </div>
+
+          <div className="flex items-center gap-2 border-t border-border px-4 py-3">
+            <Button
+              type="button"
+              variant="outline"
+              className="flex-1"
+              onClick={() => onOpenChange(false)}
+            >
+              Cancel
+              <KbdGroup className="ml-1.5"><Kbd variant="bare">Esc</Kbd></KbdGroup>
+            </Button>
+            <Button
+              type="submit"
+              className="flex-1"
+              disabled={createDisabled}
+            >
+              <i className="fa-light fa-folder text-[13px]" aria-hidden="true" />
+              {customizingFolder ? "Update folder" : "Create folder"}
+              <KbdGroup className="ml-1.5"><Kbd variant="bare">⏎</Kbd></KbdGroup>
+            </Button>
+          </div>
+        </form>
       </SheetContent>
     </Sheet>
   )

package/template/components/question-bank-os-folder-view.tsx

@@ -39,12 +39,6 @@ import {
   type QuestionBankFolder,
   type QuestionBankFolderColorKey,
 } from "@/lib/mock/question-bank-folders"
-import {
-  QUESTION_BANK_STATUS_BADGE_CLASS,
-  QUESTION_BANK_STATUS_ICON,
-  QUESTION_BANK_STATUS_LABEL,
-} from "@/lib/list-status-badges"
-import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
 import {
   ListPageViewFrame,
   LIST_PAGE_VIEW_FRAME_MAX_WIDE,
@@ -389,7 +383,7 @@ export function QuestionBankOsFolderView({
                         </Button>
                       </DropdownMenuTrigger>
                     </Tip>
-                    <DropdownMenuContent align="end" className="w-40">
+                    <DropdownMenuContent align="end">
                       <DropdownMenuItem
                         onSelect={() => {
                           setTimeout(() => startRename(folder), 0)
@@ -434,12 +428,7 @@ export function QuestionBankOsFolderView({
                 <i className="fa-solid fa-file-lines text-3xl text-muted-foreground" aria-hidden="true" />
               </div>
               <span className="line-clamp-2 w-full text-xs font-medium text-foreground">{q.stem}</span>
-              <ListHubStatusBadge
-                surface="board"
-                label={QUESTION_BANK_STATUS_LABEL[q.status]}
-                tintClassName={QUESTION_BANK_STATUS_BADGE_CLASS[q.status]}
-                icon={QUESTION_BANK_STATUS_ICON[q.status]}
-              />
+              <span className="w-full font-mono text-xs text-muted-foreground">{q.questionId}</span>
             </div>
             <div className="absolute end-1.5 top-1.5 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
               <DropdownMenu>
@@ -455,7 +444,7 @@ export function QuestionBankOsFolderView({
                     </Button>
                   </DropdownMenuTrigger>
                 </Tip>
-                <DropdownMenuContent align="end" className="w-56">
+                <DropdownMenuContent align="end">
                   <DropdownMenuSub>
                     <DropdownMenuSubTrigger>
                       <i className="fa-solid fa-folder-arrow-up me-2 text-xs" aria-hidden="true" />