@exxatdesignux/ui 0.2.19 → 0.4.0

package/template/components/{question-bank-page-header.tsx → library-page-header.tsx}

@@ -15,9 +15,9 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Tip } from "@/components/ui/tip"
 import { COLLABORATION_HEADER_ADD_LABEL } from "@/lib/collaborator-access"
-import { QUESTION_BANK_HEADER_COLLABORATORS } from "@/lib/mock/question-bank-header-collaborators"
+import { LIBRARY_HEADER_COLLABORATORS } from "@/lib/mock/library-header-collaborators"
 
-export interface QuestionBankPageHeaderProps {
+export interface LibraryPageHeaderProps {
   /** Scoped hub title (All / My / folder name) — keep in sync with `SiteHeader`. */
   title: string
   questionCount: number
@@ -51,7 +51,7 @@ export interface QuestionBankPageHeaderProps {
   onCustomizeFolder?: () => void
 }
 
-export function QuestionBankPageHeader({
+export function LibraryPageHeader({
   title,
   questionCount,
   onNewQuestion,
@@ -61,7 +61,7 @@ export function QuestionBankPageHeader({
   showTitleBlock = true,
   variant = "default",
   accessInfo,
-  collaborators = QUESTION_BANK_HEADER_COLLABORATORS,
+  collaborators = LIBRARY_HEADER_COLLABORATORS,
   collaboratorDisplayLimit = 3,
   onAddCollaborator = () => {},
   onCollaboratorsOpen,
@@ -71,7 +71,7 @@ export function QuestionBankPageHeader({
   subtitleOverride,
   hideActions = false,
   onCustomizeFolder,
-}: QuestionBankPageHeaderProps) {
+}: LibraryPageHeaderProps) {
   const [moreOpen, setMoreOpen] = React.useState(false)
   const countLine =
     subtitleOverride ??
@@ -91,7 +91,7 @@ export function QuestionBankPageHeader({
       showTitleBlock={showTitleBlock}
       actions={
         hideActions ? undefined : (
-          <div className="flex items-center gap-2" role="group" aria-label="Question bank actions">
+          <div className="flex items-center gap-2" role="group" aria-label="Library actions">
             {!hideNewQuestion ? (
               <Tip side="bottom" label="Create a new question (demo)">
                 <Button type="button" size="lg" onClick={onNewQuestion}>

package/template/components/library-panel-activator.tsx

@@ -0,0 +1,8 @@
+"use client"
+
+import { SecondaryPanelHubActivator } from "@/components/templates/secondary-panel-hub-template"
+
+/** Opens the Library secondary panel while this route is mounted. */
+export function LibraryPanelActivator() {
+  return <SecondaryPanelHubActivator panelId="library" />
+}

package/template/components/{question-bank-secondary-nav.tsx → library-secondary-nav.tsx}

@@ -1,8 +1,8 @@
 "use client"
 
 /**
- * Question bank secondary sidebar — All / My / folder tree (Font Awesome only).
- * Scope syncs to the main hub via `?scope=` + optional `folderId=` (`lib/question-bank-nav.ts`).
+ * Library secondary sidebar — All / My / folder tree (Font Awesome only).
+ * Scope syncs to the main hub via `?scope=` + optional `folderId=` (`lib/library-nav.ts`).
  */
 
 import * as React from "react"
@@ -27,18 +27,18 @@ import {
 import { Kbd, KbdGroup } from "@/components/ui/kbd"
 import { Tip } from "@/components/ui/tip"
 import { cn } from "@/lib/utils"
-import type { QuestionBankFolder } from "@/lib/mock/question-bank-folders"
-import { DEFAULT_QUESTION_BANK_FOLDERS, newFolderId, collectFolderDescendantIds } from "@/lib/mock/question-bank-folders"
-import { useSecondaryPanel } from "@/components/secondary-panel"
-import { QuestionBankNewFolderSheet } from "@/components/question-bank-new-folder-sheet"
+import type { LibraryFolder } from "@/lib/mock/library-folders"
+import { DEFAULT_LIBRARY_FOLDERS, newFolderId, collectFolderDescendantIds } from "@/lib/mock/library-folders"
+import { useSecondaryPanel } from "@/components/sidebar"
+import { LibraryNewFolderSheet } from "@/components/library-new-folder-sheet"
 import {
-  isQuestionBankNavActive,
-  parseQuestionBankNav,
-  QUESTION_BANK_FAVORITES_FOLDER_ID,
-  questionBankFavoritesFolderHref,
-  questionBankHubScopeHref,
-} from "@/lib/question-bank-nav"
-import { QuestionBankFolderTreeBranch } from "@/components/data-views/question-bank-folder-tree-branch"
+  isLibraryNavActive,
+  parseLibraryNav,
+  LIBRARY_FAVORITES_FOLDER_ID,
+  libraryFavoritesFolderHref,
+  libraryHubScopeHref,
+} from "@/lib/library-nav"
+import { LibraryFolderTreeBranch } from "@/components/data-views/library-folder-tree-branch"
 
 function NavRow({
   href,
@@ -119,31 +119,31 @@ function IconNavRow({
   )
 }
 
-export function QuestionBankSecondaryNav() {
+export function LibrarySecondaryNav() {
   const pathname = usePathname()
   const router = useRouter()
   const searchParams = useSearchParams()
   const searchParamsKey = searchParams.toString()
-  const { openPanel, questionBankFolderBridge, questionBankAccessBridge, secondaryPanelCompact } =
+  const { openPanel, libraryFolderBridge, libraryAccessBridge, secondaryPanelCompact } =
     useSecondaryPanel()
   const [newFolderOpen, setNewFolderOpen] = React.useState(false)
   const [newFolderParentId, setNewFolderParentId] = React.useState<string | null>(null)
-  const [customizingFolder, setCustomizingFolder] = React.useState<QuestionBankFolder | null>(null)
-  const [deleteFolder, setDeleteFolder] = React.useState<QuestionBankFolder | null>(null)
+  const [customizingFolder, setCustomizingFolder] = React.useState<LibraryFolder | null>(null)
+  const [deleteFolder, setDeleteFolder] = React.useState<LibraryFolder | null>(null)
   const nav = React.useMemo(
-    () => parseQuestionBankNav(new URLSearchParams(searchParamsKey)),
+    () => parseLibraryNav(new URLSearchParams(searchParamsKey)),
     [searchParamsKey],
   )
 
-  const folders = questionBankFolderBridge?.folders ?? DEFAULT_QUESTION_BANK_FOLDERS
-  const canManageFolders = questionBankFolderBridge != null
-  const canManageAccess = questionBankAccessBridge != null
+  const folders = libraryFolderBridge?.folders ?? DEFAULT_LIBRARY_FOLDERS
+  const canManageFolders = libraryFolderBridge != null
+  const canManageAccess = libraryAccessBridge != null
 
   /** Favorites is a primary nav row (with All / My), not under “Folders”. */
   const folderTreeRoots = React.useMemo(
     () =>
       folders
-        .filter(f => f.parentId === null && f.id !== QUESTION_BANK_FAVORITES_FOLDER_ID)
+        .filter(f => f.parentId === null && f.id !== LIBRARY_FAVORITES_FOLDER_ID)
         .sort((a, b) => a.name.localeCompare(b.name)),
     [folders],
   )
@@ -160,22 +160,22 @@ export function QuestionBankSecondaryNav() {
     setNewFolderOpen(true)
   }, [])
 
-  const openCustomizeFolder = React.useCallback((folder: QuestionBankFolder) => {
+  const openCustomizeFolder = React.useCallback((folder: LibraryFolder) => {
     setCustomizingFolder(folder)
     setNewFolderParentId(folder.parentId)
     setNewFolderOpen(true)
   }, [])
 
   const openManageAccess = React.useCallback(() => {
-    questionBankAccessBridge?.openManageAccess()
-  }, [questionBankAccessBridge])
+    libraryAccessBridge?.openManageAccess()
+  }, [libraryAccessBridge])
 
-  const openDeleteFolder = React.useCallback((folder: QuestionBankFolder) => {
+  const openDeleteFolder = React.useCallback((folder: LibraryFolder) => {
     setDeleteFolder(folder)
   }, [])
 
   const commitDeleteFolder = React.useCallback(() => {
-    if (!deleteFolder || !questionBankFolderBridge) return
+    if (!deleteFolder || !libraryFolderBridge) return
     const victim = deleteFolder
     const parent = victim.parentId
     const desc = collectFolderDescendantIds(folders, victim.id)
@@ -189,14 +189,14 @@ export function QuestionBankSecondaryNav() {
     const reassignTarget =
       parentStillExists ? parent : (fallbackRoot ?? remaining[0]!.id)
 
-    questionBankFolderBridge.onFoldersChange(remaining)
-    questionBankFolderBridge.onItemsChange(prev =>
+    libraryFolderBridge.onFoldersChange(remaining)
+    libraryFolderBridge.onItemsChange(prev =>
       prev.map(item => (desc.has(item.folderId) ? { ...item, folderId: reassignTarget } : item)),
     )
 
     if (nav.scope === "folder" && nav.folderId && desc.has(nav.folderId)) {
       router.replace(
-        questionBankHubScopeHref(
+        libraryHubScopeHref(
           pathname,
           new URLSearchParams(searchParamsKey),
           parentStillExists
@@ -207,13 +207,13 @@ export function QuestionBankSecondaryNav() {
     }
 
     setDeleteFolder(null)
-  }, [deleteFolder, folders, nav.folderId, nav.scope, pathname, questionBankFolderBridge, router, searchParamsKey])
+  }, [deleteFolder, folders, nav.folderId, nav.scope, pathname, libraryFolderBridge, router, searchParamsKey])
 
   const sheetParentId = customizingFolder?.parentId ?? newFolderParentId
 
   const flattenedFolderLinks = React.useMemo(() => {
-    const out: QuestionBankFolder[] = []
-    const walk = (folder: QuestionBankFolder) => {
+    const out: LibraryFolder[] = []
+    const walk = (folder: LibraryFolder) => {
       out.push(folder)
       folders
         .filter(c => c.parentId === folder.id)
@@ -226,7 +226,7 @@ export function QuestionBankSecondaryNav() {
 
   const hubNavModals = (
     <>
-      <QuestionBankNewFolderSheet
+      <LibraryNewFolderSheet
         open={newFolderOpen}
         onOpenChange={open => {
           setNewFolderOpen(open)
@@ -242,11 +242,11 @@ export function QuestionBankSecondaryNav() {
             ? "Update the folder name, color, and icon shown in the navigation and folder views."
             : sheetParentId
               ? "The folder is created inside the folder selected in the navigation."
-              : "Add a top-level folder to the question bank."
+              : "Add a top-level folder to the library."
         }
         onCreated={folder => {
           if (customizingFolder) {
-            questionBankFolderBridge?.onFoldersChange(prev =>
+            libraryFolderBridge?.onFoldersChange(prev =>
               prev.map(item =>
                 item.id === customizingFolder.id
                   ? {
@@ -259,7 +259,7 @@ export function QuestionBankSecondaryNav() {
               ),
             )
           } else {
-            questionBankFolderBridge?.onFoldersChange(prev => [...prev, { ...folder, id: newFolderId() }])
+            libraryFolderBridge?.onFoldersChange(prev => [...prev, { ...folder, id: newFolderId() }])
           }
           setNewFolderOpen(false)
           setCustomizingFolder(null)
@@ -280,13 +280,13 @@ export function QuestionBankSecondaryNav() {
           <DialogFooter className="gap-2 sm:gap-0">
             <Button type="button" variant="outline" size="sm" onClick={() => setDeleteFolder(null)}>
               Cancel
-              <KbdGroup className="ml-1.5">
+              <KbdGroup className="ms-1.5">
                 <Kbd variant="bare">Esc</Kbd>
               </KbdGroup>
             </Button>
             <Button type="button" variant="destructive" size="sm" onClick={commitDeleteFolder}>
               Delete
-              <KbdGroup className="ml-1.5">
+              <KbdGroup className="ms-1.5">
                 <Kbd variant="bare">⏎</Kbd>
               </KbdGroup>
             </Button>
@@ -299,7 +299,7 @@ export function QuestionBankSecondaryNav() {
   if (secondaryPanelCompact) {
     return (
       <>
-        <nav className="flex min-h-0 flex-1 flex-col" role="navigation" aria-label="Question bank">
+        <nav className="flex min-h-0 flex-1 flex-col" role="navigation" aria-label="Library">
           <div className="flex flex-col items-center border-b border-sidebar-border/60 px-1 py-2">
             <Tip label="Show labels" side="right">
               <Button
@@ -308,7 +308,7 @@ export function QuestionBankSecondaryNav() {
                 variant="ghost"
                 className="size-9 shrink-0"
                 aria-label="Show labels"
-                onClick={() => openPanel("question-bank")}
+                onClick={() => openPanel("library")}
               >
                 <i className="fa-light fa-angles-right text-[15px]" aria-hidden="true" />
               </Button>
@@ -316,25 +316,25 @@ export function QuestionBankSecondaryNav() {
           </div>
           <ul className="flex flex-1 flex-col items-center gap-1 overflow-y-auto px-1 py-2" role="list">
             <IconNavRow
-              href={questionBankHubScopeHref(pathname, searchParams, { scope: "all" })}
-              active={isQuestionBankNavActive(pathname, nav, "all")}
+              href={libraryHubScopeHref(pathname, searchParams, { scope: "all" })}
+              active={isLibraryNavActive(pathname, nav, "all")}
               iconClass="fa-table-list"
               label="All questions"
-              onClick={() => openPanel("question-bank")}
+              onClick={() => openPanel("library")}
             />
             <IconNavRow
-              href={questionBankHubScopeHref(pathname, searchParams, { scope: "my" })}
-              active={isQuestionBankNavActive(pathname, nav, "my")}
+              href={libraryHubScopeHref(pathname, searchParams, { scope: "my" })}
+              active={isLibraryNavActive(pathname, nav, "my")}
               iconClass="fa-user"
               label="My questions"
-              onClick={() => openPanel("question-bank")}
+              onClick={() => openPanel("library")}
             />
             <IconNavRow
-              href={questionBankFavoritesFolderHref(pathname, searchParams)}
-              active={isQuestionBankNavActive(pathname, nav, "folder", QUESTION_BANK_FAVORITES_FOLDER_ID)}
+              href={libraryFavoritesFolderHref(pathname, searchParams)}
+              active={isLibraryNavActive(pathname, nav, "folder", LIBRARY_FAVORITES_FOLDER_ID)}
               iconClass="fa-star"
               label="Favorites"
-              onClick={() => openPanel("question-bank")}
+              onClick={() => openPanel("library")}
             />
             <li className="flex w-full justify-center pt-1" role="none">
               <DropdownMenu>
@@ -354,18 +354,18 @@ export function QuestionBankSecondaryNav() {
                     <div className="px-2 py-1.5 text-xs text-muted-foreground">No folders</div>
                   ) : (
                     flattenedFolderLinks.map(folder => {
-                      const href = questionBankHubScopeHref(pathname, searchParams, {
+                      const href = libraryHubScopeHref(pathname, searchParams, {
                         scope: "folder",
                         folderId: folder.id,
                       })
-                      const active = isQuestionBankNavActive(pathname, nav, "folder", folder.id)
+                      const active = isLibraryNavActive(pathname, nav, "folder", folder.id)
                       return (
                         <DropdownMenuItem key={folder.id} asChild>
                           <Link
                             href={href}
                             scroll={false}
                             className={cn(active && "bg-accent")}
-                            onClick={() => openPanel("question-bank")}
+                            onClick={() => openPanel("library")}
                           >
                             {folder.name}
                           </Link>
@@ -401,27 +401,27 @@ export function QuestionBankSecondaryNav() {
 
   return (
     <>
-      <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-4" role="navigation" aria-label="Question bank">
+      <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-4" role="navigation" aria-label="Library">
         <ul className="space-y-0.5" role="list">
           <NavRow
-            href={questionBankHubScopeHref(pathname, searchParams, { scope: "all" })}
-            active={isQuestionBankNavActive(pathname, nav, "all")}
+            href={libraryHubScopeHref(pathname, searchParams, { scope: "all" })}
+            active={isLibraryNavActive(pathname, nav, "all")}
             iconClass="fa-table-list"
             label="All questions"
-            onClick={() => openPanel("question-bank")}
+            onClick={() => openPanel("library")}
           />
           <NavRow
-            href={questionBankHubScopeHref(pathname, searchParams, { scope: "my" })}
-            active={isQuestionBankNavActive(pathname, nav, "my")}
+            href={libraryHubScopeHref(pathname, searchParams, { scope: "my" })}
+            active={isLibraryNavActive(pathname, nav, "my")}
             iconClass="fa-user"
             label="My questions"
           />
           <NavRow
-            href={questionBankFavoritesFolderHref(pathname, searchParams)}
-            active={isQuestionBankNavActive(pathname, nav, "folder", QUESTION_BANK_FAVORITES_FOLDER_ID)}
+            href={libraryFavoritesFolderHref(pathname, searchParams)}
+            active={isLibraryNavActive(pathname, nav, "folder", LIBRARY_FAVORITES_FOLDER_ID)}
             iconClass="fa-star"
             label="Favorites"
-            onClick={() => openPanel("question-bank")}
+            onClick={() => openPanel("library")}
           />
           <li role="presentation" className="select-none">
             <div className="flex items-center justify-between gap-2 px-2 pt-3 pb-1">
@@ -445,7 +445,7 @@ export function QuestionBankSecondaryNav() {
           </li>
           {folderTreeRoots.map(folder => (
             <li key={folder.id} className="min-w-0 w-full list-none">
-              <QuestionBankFolderTreeBranch
+              <LibraryFolderTreeBranch
                 folder={folder}
                 folders={folders}
                 pathname={pathname}