@exxatdesignux/ui 0.2.9 → 0.2.10

package/template/components/page-header.tsx

@@ -6,8 +6,8 @@
  * Sits at the top of a page's main content, BELOW the breadcrumb/topbar.
  * Uses Ivy Presto (Adobe Fonts) for the title via font-heading CSS variable.
  *
- * **Variant `collaboration`** — optional access line + stacked collaborator faces
- * and an invite control ahead of the primary `actions` slot (Question bank pattern).
+ * **Variant `collaboration`** — optional access line + collaborator faces (or **Add collaborator**
+ * when the roster is empty) ahead of the primary `actions` slot; **Invite people** stays in **⋯ More**.
  *
  * WCAG 2.1 AA:
  *  ✓ <h1> landmark — one per page (WCAG 1.3.1)
@@ -17,9 +17,12 @@
 
 import * as React from "react"
 import { cn } from "@/lib/utils"
+import {
+  COLLABORATION_HEADER_ADD_LABEL,
+  type CollaboratorAccessRole,
+} from "@/lib/collaborator-access"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
-import { Tip } from "@/components/ui/tip"
 import {
   Tooltip,
   TooltipContent,
@@ -33,6 +36,10 @@ export interface PageHeaderCollaborator {
   name: string
   imageUrl?: string | null
   initials?: string
+  email?: string
+  access?: CollaboratorAccessRole
+  /** Org / directory role tags (e.g. Faculty, Program coordinator). */
+  roles?: string[]
 }
 
 export interface PageHeaderProps {
@@ -40,7 +47,7 @@ export interface PageHeaderProps {
   title: string
   /** Short descriptor or date shown below the title (and below `accessInfo` when set) */
   subtitle?: string
-  /** Layout preset — `collaboration` enables access line + face stack + invite ahead of `actions`. */
+  /** Layout preset — `collaboration` enables access line + face stack ahead of `actions`. */
   variant?: PageHeaderVariant
   /**
    * Role / access copy or badges — rendered between the title and subtitle when
@@ -51,9 +58,9 @@ export interface PageHeaderProps {
   collaborators?: PageHeaderCollaborator[]
   /** Max faces before a `+N` chip — default 4 */
   collaboratorDisplayLimit?: number
-  /** Outline control beside the stack — e.g. open share / invite dialog */
-  onAddCollaborator?: () => void
-  /** Accessible name for the invite control — default “Invite people” */
+  /** Opens the invite collaborators sheet when a face, overflow chip, or empty-state CTA is activated. */
+  onCollaboratorsOpen?: () => void
+  /** Label for the empty-roster header control — default **Add collaborator**. */
   addCollaboratorLabel?: string
   /** Optional slot for right-aligned actions (buttons, selectors, etc.) */
   actions?: React.ReactNode
@@ -63,17 +70,38 @@ export interface PageHeaderProps {
   showTitleBlock?: boolean
 }
 
-function PageHeaderCollaborationFaces({
+function PageHeaderCollaborationAccess({
   people,
   limit,
-  addLabel,
-  onAdd,
+  onOpenCollaborators,
+  addCollaboratorLabel,
 }: {
   people: PageHeaderCollaborator[]
   limit: number
-  addLabel: string
-  onAdd?: () => void
+  onOpenCollaborators?: () => void
+  addCollaboratorLabel: string
 }) {
+  if (people.length === 0) {
+    return (
+      <div
+        role="group"
+        aria-label="People with access"
+        className="flex shrink-0 items-center"
+      >
+        <Button
+          type="button"
+          variant="outline"
+          size="lg"
+          onClick={onOpenCollaborators}
+          disabled={!onOpenCollaborators}
+        >
+          <i className="fa-light fa-user-plus" aria-hidden="true" />
+          {addCollaboratorLabel}
+        </Button>
+      </div>
+    )
+  }
+
   const visible = people.slice(0, limit)
   const overflow = Math.max(0, people.length - visible.length)
   const names = people.map(p => p.name).join(", ")
@@ -84,17 +112,19 @@ function PageHeaderCollaborationFaces({
       aria-label={names ? `People with access: ${names}` : "People with access"}
       className="flex shrink-0 items-center gap-2 sm:gap-2.5"
     >
-      {visible.length > 0 && (
-        <div className="flex -space-x-2 ps-0.5">
-          {visible.map((c, index) => (
-            <Tooltip key={c.id}>
-              <TooltipTrigger asChild>
-                <Avatar
-                  size="sm"
-                  shape="circle"
-                  className="relative ring-2 ring-background"
-                  style={{ zIndex: 10 + index }}
-                >
+      <div className="flex -space-x-2 ps-0.5">
+        {visible.map((c, index) => (
+          <Tooltip key={c.id}>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                className="relative rounded-full ring-2 ring-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                style={{ zIndex: 10 + index }}
+                aria-label={`Open collaborators — ${c.name}`}
+                onClick={onOpenCollaborators}
+                disabled={!onOpenCollaborators}
+              >
+                <Avatar size="sm" shape="circle" className="pointer-events-none">
                   {c.imageUrl ? (
                     <AvatarImage src={c.imageUrl} alt="" referrerPolicy="no-referrer" />
                   ) : null}
@@ -102,34 +132,23 @@ function PageHeaderCollaborationFaces({
                     {(c.initials ?? c.name.slice(0, 2)).toUpperCase()}
                   </AvatarFallback>
                 </Avatar>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">{c.name}</TooltipContent>
-            </Tooltip>
-          ))}
-          {overflow > 0 && (
-            <div
-              className="relative z-30 flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium tabular-nums text-muted-foreground ring-2 ring-background sm:size-7"
-              aria-label={`${overflow} more people with access`}
-            >
-              +{overflow}
-            </div>
-          )}
-        </div>
-      )}
-      {onAdd ? (
-        <Tip side="bottom" label={addLabel}>
-          <Button
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">{c.name}</TooltipContent>
+          </Tooltip>
+        ))}
+        {overflow > 0 && (
+          <button
             type="button"
-            variant="outline"
-            size="icon"
-            className="size-8 min-h-8 min-w-8 shrink-0 rounded-full border-dashed"
-            aria-label={addLabel}
-            onClick={onAdd}
+            className="relative z-30 flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium tabular-nums text-muted-foreground ring-2 ring-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:size-7"
+            aria-label={`Open collaborators — ${overflow} more people with access`}
+            onClick={onOpenCollaborators}
+            disabled={!onOpenCollaborators}
           >
-            <i className="fa-light fa-user-plus text-sm" aria-hidden="true" />
-          </Button>
-        </Tip>
-      ) : null}
+            +{overflow}
+          </button>
+        )}
+      </div>
     </div>
   )
 }
@@ -141,18 +160,16 @@ export function PageHeader({
   accessInfo,
   collaborators,
   collaboratorDisplayLimit = 4,
-  onAddCollaborator,
-  addCollaboratorLabel = "Invite people",
+  onCollaboratorsOpen,
+  addCollaboratorLabel = COLLABORATION_HEADER_ADD_LABEL,
   actions,
   className,
   showTitleBlock = true,
 }: PageHeaderProps) {
   const isCollaboration = variant === "collaboration"
   const showAccess = Boolean(isCollaboration && accessInfo)
-  const showFaceRail =
-    isCollaboration &&
-    ((collaborators && collaborators.length > 0) || Boolean(onAddCollaborator))
-  const showActionsColumn = Boolean(actions) || showFaceRail
+  const showCollaborationAccess = isCollaboration
+  const showActionsColumn = Boolean(actions) || showCollaborationAccess
 
   return (
     <div
@@ -183,12 +200,12 @@ export function PageHeader({
 
       {showActionsColumn && (
         <div className="flex flex-wrap items-center gap-2 sm:gap-3 shrink-0 sm:ms-auto sm:justify-end">
-          {showFaceRail ? (
-            <PageHeaderCollaborationFaces
+          {showCollaborationAccess ? (
+            <PageHeaderCollaborationAccess
               people={collaborators ?? []}
               limit={collaboratorDisplayLimit}
-              addLabel={addCollaboratorLabel}
-              onAdd={onAddCollaborator}
+              onOpenCollaborators={onCollaboratorsOpen}
+              addCollaboratorLabel={addCollaboratorLabel}
             />
           ) : null}
           {actions}

package/template/components/placements-board-view.tsx

@@ -164,7 +164,7 @@ function BoardPhaseColumnHeader({
               </button>
             </DropdownMenuTrigger>
           </Tip>
-          <DropdownMenuContent align="end" className="min-w-44">
+          <DropdownMenuContent align="end">
             <div className="px-2 pt-2 pb-1">
               <div className="relative">
                 <i
@@ -222,11 +222,11 @@ function BoardPhaseColumnHeader({
                     {menu.sortableColumns.map(col => (
                       <React.Fragment key={col.key}>
                         <DropdownMenuItem onClick={() => menu.onSortByField(col.key, "asc")}>
-                          <i className="fa-light fa-arrow-up-az" aria-hidden="true" />
+                          <i className="fa-light fa-arrow-up-a-z" aria-hidden="true" />
                           {col.label} — ascending
                         </DropdownMenuItem>
                         <DropdownMenuItem onClick={() => menu.onSortByField(col.key, "desc")}>
-                          <i className="fa-light fa-arrow-down-az" aria-hidden="true" />
+                          <i className="fa-light fa-arrow-down-a-z" aria-hidden="true" />
                           {col.label} — descending
                         </DropdownMenuItem>
                       </React.Fragment>

package/template/components/placements-page-header.tsx

@@ -131,7 +131,7 @@ export function PlacementsPageHeader({
                 </Button>
               </DropdownMenuTrigger>
             </Tip>
-            <DropdownMenuContent align="end" className="w-52">
+            <DropdownMenuContent align="end">
               <DropdownMenuItem
                 shortcut="⌘⇧E"
                 onSelect={() => {

package/template/components/placements-table-columns.tsx

@@ -18,6 +18,7 @@ import {
   WeeksProgressCell,
 } from "@/components/data-list-table-cells"
 import { uniquePlacementFieldOptions, type Placement } from "@/lib/mock/placements"
+import { formatDateUS } from "@/lib/date-filter"
 import type { PlacementLifecycleTabId } from "@/lib/placement-lifecycle"
 
 const COLUMN_SELECT: ColumnDef<Placement> = {
@@ -443,7 +444,7 @@ const PLACEMENT_COLUMNS_ONGOING: ColumnDef<Placement>[] = [
     sortKey: "endDate",
     filter: { type: "date", icon: "fa-calendar-days", operators: ["is", "is_not"] },
     cell: (row) => (
-      <span className="text-sm text-foreground/80 tabular-nums whitespace-nowrap">{row.endDate}</span>
+      <span className="text-sm text-foreground/80 tabular-nums whitespace-nowrap">{formatDateUS(row.endDate)}</span>
     ),
   },
   {
@@ -454,7 +455,7 @@ const PLACEMENT_COLUMNS_ONGOING: ColumnDef<Placement>[] = [
     sortable: true,
     sortKey: "lastCheckin",
     cell: (row) => (
-      <span className="text-sm text-foreground/80 whitespace-nowrap">{row.lastCheckin}</span>
+      <span className="text-sm text-foreground/80 whitespace-nowrap">{formatDateUS(row.lastCheckin)}</span>
     ),
   },
   COLUMN_ACTIONS,

package/template/components/product-switcher.tsx

@@ -79,7 +79,6 @@ export function ProductSwitcher() {
           </DropdownMenuTrigger>
 
           <DropdownMenuContent
-            className="w-56"
             align="start"
             side="bottom"
             sideOffset={4}

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

@@ -13,24 +13,25 @@ import {
   LIST_HUB_STATUS_TINT_NEUTRAL,
   LIST_HUB_STATUS_TINT_SUCCESS,
   LIST_HUB_STATUS_TINT_WARNING,
-  QUESTION_BANK_STATUS_BADGE_CLASS,
-  QUESTION_BANK_STATUS_ICON,
-  QUESTION_BANK_STATUS_LABEL,
 } from "@/lib/list-status-badges"
+import { formatDateUS } from "@/lib/date-filter"
 import { BoardCardTwoLineBlock } from "@/components/data-views/board-card-primitives"
 import {
   ListPageBoardCard,
   ListPageBoardCardAvatar,
-  ListPageBoardCardBadgeRow,
   ListPageBoardCardBody,
   ListPageBoardCardHeader,
   ListPageBoardCardTitleRow,
 } from "@/components/data-views/list-page-board-card"
-import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
 import {
   ListPageBoardTemplate,
   type ListPageBoardColumnDef,
 } from "@/components/data-views/list-page-board-template"
+import {
+  QuestionBankFavoriteButton,
+  QUESTION_BANK_FAVORITE_HOVER_GROUP,
+} from "@/components/question-bank-favorite-button"
+import { cn } from "@/lib/utils"
 
 const NEUTRAL_COUNT_BADGE = "bg-muted/90 text-foreground"
 
@@ -58,27 +59,6 @@ const TYPE_BADGE: Record<QuestionBankType, string> = {
   short_answer: LIST_HUB_STATUS_TINT_WARNING,
 }
 
-const STATUS_BOARD_COLUMNS: ListPageBoardColumnDef<QuestionBankItem>[] = [
-  {
-    id: "published",
-    label: "Published",
-    description: "Live in bank",
-    filter: r => r.status === "published",
-  },
-  {
-    id: "draft",
-    label: "Draft",
-    description: "Work in progress",
-    filter: r => r.status === "draft",
-  },
-  {
-    id: "in_review",
-    label: "In review",
-    description: "Awaiting approval",
-    filter: r => r.status === "in_review",
-  },
-]
-
 const DIFF_ORDER: QuestionBankDifficulty[] = ["easy", "medium", "hard"]
 const TYPE_ORDER: QuestionBankType[] = ["multiple_choice", "true_false", "short_answer"]
 
@@ -136,38 +116,45 @@ function useQuestionBankBoardModel(rows: QuestionBankItem[], groupByColumnKey: s
       const { columns, badgeMap } = typeBoardColumns()
       return { columns, badgeMap }
     }
-    return {
-      columns: STATUS_BOARD_COLUMNS,
-      badgeMap: QUESTION_BANK_STATUS_BADGE_CLASS as Record<string, string>,
-    }
+    const { columns, badgeMap } = topicBoardColumns(rows)
+    return { columns, badgeMap }
   }, [rows, groupByColumnKey])
 }
 
-function QuestionBankBoardCard({ row }: { row: QuestionBankItem }) {
+function QuestionBankBoardCard({
+  row,
+  onToggleFavorite,
+}: {
+  row: QuestionBankItem
+  onToggleFavorite: (row: QuestionBankItem) => void
+}) {
   const initials = initialsFromDisplayName(row.author)
   return (
-    <ListPageBoardCard className="w-full">
+    <ListPageBoardCard className={cn(QUESTION_BANK_FAVORITE_HOVER_GROUP, "w-full")}>
       <ListPageBoardCardHeader>
         <ListPageBoardCardTitleRow
-          title={row.stem}
-          titleClassName="line-clamp-2"
-          trailing={<ListPageBoardCardAvatar initials={initials} />}
+          title={(
+            <span className="block">
+              <span className="line-clamp-2">{row.stem}</span>
+              <span className="mt-0.5 block font-mono text-xs font-normal text-muted-foreground">
+                {row.questionId}
+              </span>
+            </span>
+          )}
+          trailing={(
+            <div className="flex shrink-0 items-start gap-1">
+              <QuestionBankFavoriteButton row={row} onToggleFavorite={onToggleFavorite} />
+              <ListPageBoardCardAvatar initials={initials} />
+            </div>
+          )}
         />
-        <ListPageBoardCardBadgeRow>
-          <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]}
-          />
-        </ListPageBoardCardBadgeRow>
         <ListPageBoardCardBody>
           <BoardCardTwoLineBlock
             iconClass="fa-tag"
             line1={row.topic}
             line2={row.type.replace(/_/g, " ")}
           />
-          <BoardCardTwoLineBlock iconClass="fa-calendar-days" line1={row.updatedAt} line2="Updated" />
+          <BoardCardTwoLineBlock iconClass="fa-calendar-days" line1={formatDateUS(row.updatedAt)} line2="Updated" />
         </ListPageBoardCardBody>
       </ListPageBoardCardHeader>
     </ListPageBoardCard>
@@ -175,7 +162,6 @@ function QuestionBankBoardCard({ row }: { row: QuestionBankItem }) {
 }
 
 export const QUESTION_BANK_BOARD_GROUP_OPTIONS = [
-  { key: "status", label: "Status" },
   { key: "topic", label: "Topic" },
   { key: "difficulty", label: "Difficulty" },
   { key: "type", label: "Type" },
@@ -184,12 +170,14 @@ export const QUESTION_BANK_BOARD_GROUP_OPTIONS = [
 export function QuestionBankBoardView({
   rows,
   groupByColumnKey,
+  onToggleFavorite,
 }: {
   rows: QuestionBankItem[]
   groupByColumnKey: string
+  onToggleFavorite: (row: QuestionBankItem) => void
 }) {
   const allowed = QUESTION_BANK_BOARD_GROUP_OPTIONS.some(o => o.key === groupByColumnKey)
-  const key = allowed ? groupByColumnKey : "status"
+  const key = allowed ? groupByColumnKey : "topic"
   const { columns, badgeMap } = useQuestionBankBoardModel(rows, key)
 
   return (
@@ -199,7 +187,7 @@ export function QuestionBankBoardView({
       getRowKey={r => r.id}
       columnCountBadgeClassName={badgeMap}
       emptyColumnLabel="No questions"
-      renderCard={row => <QuestionBankBoardCard row={row} />}
+      renderCard={row => <QuestionBankBoardCard row={row} onToggleFavorite={onToggleFavorite} />}
     />
   )
 }