@exxatdesignux/ui 0.2.8 → 0.2.10

package/template/components/question-bank-page-header.tsx

@@ -11,10 +11,10 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } 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"
 
 export interface QuestionBankPageHeaderProps {
@@ -23,17 +23,27 @@ export interface QuestionBankPageHeaderProps {
   questionCount: number
   onNewQuestion: () => void
   onExport: () => void
-  showMetrics: boolean
-  onToggleMetrics: () => void
+  /** Omitted on surfaces without a metric strip (e.g. dedicated search). */
+  showMetrics?: boolean
+  onToggleMetrics?: () => void
   showTitleBlock?: boolean
-  /** `collaboration` adds access line + collaborator stack + invite before CTAs. */
+  /** `collaboration` adds access line + collaborator stack before CTAs. */
   variant?: PageHeaderVariant
   /** Optional role / access row when `variant="collaboration"` (badge + copy). */
   accessInfo?: React.ReactNode
   collaborators?: PageHeaderCollaborator[]
   collaboratorDisplayLimit?: number
   onAddCollaborator?: () => void
+  onCollaboratorsOpen?: () => void
+  /** Empty-roster header CTA — default **Add collaborator**. */
+  collaborationAddLabel?: string
   addCollaboratorLabel?: string
+  /** When false, the primary “New question” button is omitted (e.g. search landing). */
+  hideNewQuestion?: boolean
+  /** Replaces the default “N questions · Last updated…” subtitle when set. */
+  subtitleOverride?: string
+  /** Omits the action column (e.g. search landing before first query). */
+  hideActions?: boolean
 }
 
 export function QuestionBankPageHeader({
@@ -49,10 +59,17 @@ export function QuestionBankPageHeader({
   collaborators = QUESTION_BANK_HEADER_COLLABORATORS,
   collaboratorDisplayLimit = 4,
   onAddCollaborator = () => {},
+  onCollaboratorsOpen,
+  collaborationAddLabel = COLLABORATION_HEADER_ADD_LABEL,
   addCollaboratorLabel = "Invite people",
+  hideNewQuestion = false,
+  subtitleOverride,
+  hideActions = false,
 }: QuestionBankPageHeaderProps) {
   const [moreOpen, setMoreOpen] = React.useState(false)
-  const countLine = `${questionCount} ${questionCount === 1 ? "question" : "questions"} · Last updated now`
+  const countLine =
+    subtitleOverride ??
+    `${questionCount} ${questionCount === 1 ? "question" : "questions"} · Last updated now`
   const resolvedAccess = variant === "collaboration" ? accessInfo : undefined
 
   return (
@@ -63,56 +80,71 @@ export function QuestionBankPageHeader({
       accessInfo={resolvedAccess}
       collaborators={variant === "collaboration" ? collaborators : undefined}
       collaboratorDisplayLimit={collaboratorDisplayLimit}
-      onAddCollaborator={variant === "collaboration" ? onAddCollaborator : undefined}
-      addCollaboratorLabel={addCollaboratorLabel}
+      onCollaboratorsOpen={onCollaboratorsOpen ?? onAddCollaborator}
+      addCollaboratorLabel={collaborationAddLabel}
       showTitleBlock={showTitleBlock}
-      actions={(
-        <div className="flex items-center gap-2" role="group" aria-label="Question bank actions">
-          <Tip side="bottom" label="Create a new question (demo)">
-            <Button type="button" size="lg" onClick={onNewQuestion}>
-              <i className="fa-light fa-plus" aria-hidden="true" />
-              New question
-            </Button>
-          </Tip>
-          <DropdownMenu open={moreOpen} onOpenChange={setMoreOpen}>
-            <Tip side="bottom" label="More actions">
-              <DropdownMenuTrigger asChild>
-                <Button
-                  type="button"
-                  size="lg"
-                  variant="outline"
-                  className="aspect-square px-0"
-                  aria-label="More actions"
-                >
-                  <i className="fa-light fa-ellipsis text-base" aria-hidden="true" />
+      actions={
+        hideActions ? undefined : (
+          <div className="flex items-center gap-2" role="group" aria-label="Question bank actions">
+            {!hideNewQuestion ? (
+              <Tip side="bottom" label="Create a new question (demo)">
+                <Button type="button" size="lg" onClick={onNewQuestion}>
+                  <i className="fa-light fa-plus" aria-hidden="true" />
+                  New question
                 </Button>
-              </DropdownMenuTrigger>
-            </Tip>
-            <DropdownMenuContent align="end" className="w-52">
-              <DropdownMenuItem
-                onSelect={() => {
-                  window.setTimeout(() => onExport(), 0)
-                }}
-              >
-                <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
-                Export
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                onSelect={() => {
-                  window.setTimeout(() => onToggleMetrics(), 0)
-                }}
-              >
-                <i
-                  className={`fa-light ${showMetrics ? "fa-eye-slash" : "fa-eye"}`}
-                  aria-hidden="true"
-                />
-                {showMetrics ? "Hide metric section" : "Show metric section"}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      )}
+              </Tip>
+            ) : null}
+            <DropdownMenu open={moreOpen} onOpenChange={setMoreOpen}>
+              <Tip side="bottom" label="More actions">
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type="button"
+                    size="lg"
+                    variant="outline"
+                    className="aspect-square px-0"
+                    aria-label="More actions"
+                  >
+                    <i className="fa-light fa-ellipsis text-base" aria-hidden="true" />
+                  </Button>
+                </DropdownMenuTrigger>
+              </Tip>
+              <DropdownMenuContent align="end">
+                {variant === "collaboration" ? (
+                  <DropdownMenuItem
+                    onSelect={() => {
+                      window.setTimeout(() => onAddCollaborator(), 0)
+                    }}
+                  >
+                    <i className="fa-light fa-user-plus" aria-hidden="true" />
+                    {addCollaboratorLabel}
+                  </DropdownMenuItem>
+                ) : null}
+                <DropdownMenuItem
+                  onSelect={() => {
+                    window.setTimeout(() => onExport(), 0)
+                  }}
+                >
+                  <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
+                  Export
+                </DropdownMenuItem>
+                {onToggleMetrics != null ? (
+                  <DropdownMenuItem
+                    onSelect={() => {
+                      window.setTimeout(() => onToggleMetrics(), 0)
+                    }}
+                  >
+                    <i
+                      className={`fa-light ${(showMetrics ?? false) ? "fa-eye-slash" : "fa-eye"}`}
+                      aria-hidden="true"
+                    />
+                    {(showMetrics ?? false) ? "Hide metric section" : "Show metric section"}
+                  </DropdownMenuItem>
+                ) : null}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        )
+      }
     />
   )
 }

package/template/components/question-bank-panel-activator.tsx

@@ -1,9 +1,8 @@
 "use client"
 
-import { useAutoPanel } from "@/components/secondary-panel"
+import { SecondaryPanelHubActivator } from "@/components/templates/secondary-panel-hub-template"
 
-/** Opens the Question bank secondary panel while this route is mounted (same pattern as rotations). */
+/** Opens the Question bank secondary panel while this route is mounted. */
 export function QuestionBankPanelActivator() {
-  useAutoPanel("question-bank")
-  return null
+  return <SecondaryPanelHubActivator panelId="question-bank" />
 }