@prenta/admin 2.6.1 → 2.8.0

package/src/views/MediaBrowser.tsx

@@ -33,8 +33,10 @@ import { cmsApi } from '../lib/api.js'
 import { useVirtualWindow, VirtualTablePadding } from '../components/virtual-window.js'
 import { FolderTree, type FolderSelection } from '../components/FolderTree.js'
 import { Button } from '../components/ui/Button.js'
+import { TIER_MEDIA } from '../lib/tiers.js'
+import { useSheetFocus } from '../lib/sheet-focus.js'
 import { StatusBadge } from '../components/ui/StatusBadge.js'
-import { StatPill } from '../components/ui/StatPill.js'
+import { CountChip } from '../components/ui/CountChip.js'
 import { hasLowQualityAlt, MediaSeoAudit, type MediaSeoAuditItem } from './MediaSeoAudit.js'
 
 interface MediaItem {
@@ -153,6 +155,13 @@ function buildMediaApiUrl(folderSel: FolderSelection): string {
 export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
   const [folderSel, setFolderSel] = useState<FolderSelection>({ type: 'smart', smart: 'all' })
   const [sidebarOpen, setSidebarOpen] = useState(true)
+  // Below 769px the folder tree stacks above the grid, so it starts closed
+  // there; the folder button opens it.
+  useEffect(() => {
+    if (typeof window.matchMedia === 'function' && window.matchMedia(TIER_MEDIA.mobile).matches) {
+      setSidebarOpen(false)
+    }
+  }, [])
 
   const apiUrl = useMemo(() => buildMediaApiUrl(folderSel), [folderSel])
   const { data, loading, error, refetch } = useApiData<{
@@ -213,6 +222,8 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
   const gridColumns = useGridColumns(activeItem !== null)
   const gridScrollRef = useRef<HTMLDivElement>(null)
   const listScrollRef = useRef<HTMLDivElement>(null)
+  /** The grid's or list's scroll position when a card opened the detail panel. */
+  const savedListScroll = useRef(0)
   const gridRowCount = gridColumns > 0 ? Math.ceil(filteredAndSorted.length / gridColumns) : 0
   const gridWindow = useVirtualWindow({
     count: gridRowCount,
@@ -243,6 +254,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
   }, [mediaItems])
 
   const openDetail = useCallback((item: MediaItem) => {
+    savedListScroll.current = (gridScrollRef.current ?? listScrollRef.current)?.scrollTop ?? 0
     setActiveItem(item)
     setEditAlt(item.altTag ?? '')
     setEditIsDecorative(item.isDecorative === true)
@@ -517,6 +529,21 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
   }
 
   const panelOpen = activeItem !== null
+  const detailPanelRef = useRef<HTMLDivElement>(null)
+  // Below 769px the detail panel is a sheet over the content column
+  // (`[data-inspector-open]` in responsive.css hides the grid, tabs and
+  // header), so the card that opened it leaves the screen. Focus moves into
+  // the panel and back when it closes. The hidden scroll box comes back at the
+  // top, and the virtualised window wouldn't follow (no scroll event), so its
+  // position, saved when a card opens the panel, goes back first. Grid cards
+  // aren't focusable, so focus lands on the list itself.
+  useSheetFocus(panelOpen, detailPanelRef, {
+    restore: () => {
+      const scroller = gridScrollRef.current ?? listScrollRef.current
+      if (scroller) scroller.scrollTop = savedListScroll.current
+    },
+    fallback: () => gridScrollRef.current ?? listScrollRef.current,
+  })
   const issues = activeItem
     ? [
         ...(!hasAccessibleAlt(activeItem) ? ['Missing alt tag'] : []),
@@ -574,7 +601,8 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
         </div>
       )}
 
-      <div className="mb-4 flex items-center justify-between">
+      {/* Actions sit level with the title, as in Media.html (`.mc-hdr-row`). */}
+      <div className="mb-4 flex items-start justify-between">
         <div className="flex items-center gap-3">
           <button
             type="button"
@@ -586,17 +614,22 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
             <FolderInput className="text-muted-foreground h-5 w-5" aria-hidden />
           </button>
           <div>
-            <h1 className="text-foreground mb-1">Media Library</h1>
-            <div className="flex flex-wrap items-center gap-1.5">
-              <StatPill value={mediaStats.total} label="Total Files" />
-              <StatPill value={mediaStats.images} label="Images" />
-              <StatPill value={mediaStats.videos} label="Videos" />
-              <StatPill value={mediaStats.documents} label="Documents" />
-              <StatPill value={formatStorage(mediaStats.bytes)} label="Storage used" />
+            {/* Title = sidebar label (SHELL.md §4); copy from Media.html. */}
+            <h1 className="text-foreground leading-[normal]">Media</h1>
+            <p className="text-body text-sub mt-[3px] leading-[normal]">
+              Manage and optimize all your media assets
+            </p>
+            <div className="mt-[18px] flex flex-wrap items-center gap-1.5">
+              <CountChip n={mediaStats.total} label="Total Files" />
+              <CountChip n={mediaStats.images} label="Images" />
+              <CountChip n={mediaStats.videos} label="Videos" />
+              <CountChip n={mediaStats.documents} label="Documents" />
+              <CountChip n={formatStorage(mediaStats.bytes)} label="Storage used" />
             </div>
           </div>
         </div>
-        <div>
+        {/* Below 769px Upload floats above the tab bar. */}
+        <div data-header-actions="">
           <input
             ref={fileInputRef}
             type="file"
@@ -612,6 +645,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
             onClick={() => fileInputRef.current?.click()}
             loading={uploading}
             leftIcon={<Upload size={16} aria-hidden />}
+            data-fab=""
           >
             {uploading ? 'Uploading...' : 'Upload Files'}
           </Button>
@@ -671,9 +705,9 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
           onRetry={refetch}
         />
       ) : (
-        <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
+        <div className="mobile:flex-col flex min-h-0 flex-1 gap-4 overflow-hidden">
           {sidebarOpen && (
-            <div className="border-border bg-card flex w-56 shrink-0 flex-col overflow-hidden rounded-lg border">
+            <div className="border-border bg-card mobile:max-h-[40vh] mobile:w-full flex w-56 shrink-0 flex-col overflow-hidden rounded-lg border">
               <FolderTree
                 scope="media"
                 selected={folderSel}
@@ -688,7 +722,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
             </div>
           )}
 
-          <div className="flex min-w-0 flex-1 flex-col">
+          <div className="mobile:min-h-0 flex min-w-0 flex-1 flex-col">
             <div className="border-border bg-card mb-4 rounded-lg border">
               <div className="flex items-center justify-between p-3">
                 <div className="flex flex-1 items-center gap-3">
@@ -794,7 +828,11 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                   className={`border-border bg-card overflow-hidden rounded-lg border transition-all duration-200 ${panelOpen ? 'min-w-0 flex-1' : 'w-full'}`}
                 >
                   {viewMode === 'grid' ? (
-                    <div ref={gridScrollRef} className="h-full overflow-y-auto p-2 sm:p-3">
+                    <div
+                      ref={gridScrollRef}
+                      tabIndex={-1}
+                      className="h-full overflow-y-auto p-2 sm:p-3"
+                    >
                       <div className="relative" style={{ height: gridRowCount * 220 }}>
                         {gridWindow.rows.map((virtualRow) => (
                           <div
@@ -906,7 +944,11 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                       </div>
                     </div>
                   ) : (
-                    <div ref={listScrollRef} className="h-full overflow-auto">
+                    <div
+                      ref={listScrollRef}
+                      tabIndex={-1}
+                      className="h-full overflow-auto outline-none"
+                    >
                       {/* min-w keeps the list columns readable; narrow viewports scroll sideways. */}
                       <table className="w-full min-w-[640px]">
                         <thead className="border-border bg-muted sticky top-0 border-b">
@@ -1009,17 +1051,25 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                 </div>
 
                 {panelOpen && activeItem && (
-                  <div className="border-border bg-card flex w-80 shrink-0 flex-col overflow-y-auto rounded-lg border lg:w-96">
+                  <div
+                    ref={detailPanelRef}
+                    data-inspector-open=""
+                    tabIndex={-1}
+                    role="region"
+                    aria-label={`${activeItem.name} details`}
+                    className="border-border bg-card mobile:w-full flex w-80 shrink-0 flex-col overflow-y-auto rounded-lg border lg:w-96"
+                  >
                     <div className="border-border bg-card sticky top-0 z-10 flex items-center justify-between border-b p-4">
                       <h3 className="text-foreground truncate text-sm font-medium">
                         {activeItem.name}
                       </h3>
                       <button
+                        type="button"
                         onClick={closeDetail}
-                        className="hover:bg-muted rounded p-1 transition-colors"
+                        className="hover:bg-muted prenta-touch-target mobile:-my-2.5 mobile:-mr-2.5 mobile:h-11 mobile:w-11 flex items-center justify-center rounded p-1 transition-colors"
                         aria-label="Close panel"
                       >
-                        <X className="text-muted-foreground h-4 w-4" />
+                        <X className="text-muted-foreground h-4 w-4" aria-hidden />
                       </button>
                     </div>
 
@@ -1035,7 +1085,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                       </div>
 
                       {issues.length > 0 && (
-                        <div className="border-warning/30 bg-warning/10 mx-4 mt-4 rounded-lg border p-4">
+                        <div className="border-warning/30 bg-warn-l mx-4 mt-4 rounded-lg border p-4">
                           <div className="flex items-start gap-2">
                             <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" />
                             <div>
@@ -1166,7 +1216,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                           {activeItem.aiAltSuggestion !== undefined &&
                             editAlt !== activeItem.aiAltSuggestion &&
                             !editIsDecorative && (
-                              <div className="border-warning/40 bg-warning/10 mt-2 flex items-start justify-between gap-2 rounded-lg border p-4 text-xs">
+                              <div className="border-warning/40 bg-warn-l mt-2 flex items-start justify-between gap-2 rounded-lg border p-4 text-xs">
                                 <span className="text-foreground">
                                   AI suggestion:{' '}
                                   {activeItem.aiAltSuggestion.trim()
@@ -1301,7 +1351,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                             ))}
                           </div>
                         ) : (
-                          <div className="border-warning/30 bg-warning/10 rounded-lg border p-4">
+                          <div className="border-warning/30 bg-warn-l rounded-lg border p-4">
                             <div className="flex items-start gap-2">
                               <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" />
                               <div>

package/src/views/Pages/PagesListView.tsx

@@ -52,6 +52,15 @@ import { AuthorAvatar } from '../../components/ui/AuthorAvatar.js'
 import { Button } from '../../components/ui/Button.js'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
 import { RowActionButton, RowActions } from '../../components/ui/RowActions.js'
+import {
+  cardCell,
+  cardColumnHeader,
+  cardRow,
+  cardRowGroup,
+  cardTable,
+} from '../../components/ui/card-table.js'
+import { TIER_MEDIA, useMediaQuery } from '../../lib/tiers.js'
+import { CardListControls, type CardSortOption } from '../../components/ui/CardListControls.js'
 import { PagesTreeTable } from './PagesTreeTable.js'
 
 /**
@@ -62,7 +71,7 @@ import { PagesTreeTable } from './PagesTreeTable.js'
  *
  * Routing:
  *   - Row click → /pages/:id/edit (the page builder).
- *   - "+ New page" lives in the top bar (computePageActions).
+ *   - "+ New page" sits on the right of the page header.
  *   - "Manage tags" (in the tag bar) → /pages/tags.
  */
 
@@ -83,6 +92,15 @@ const TOGGLEABLE_COLUMNS: Array<{ key: ToggleableColumn; label: string }> = [
 ]
 
 const PAGE_SIZE = 25
+
+/** The sortable columns, for the phone sort select (the header's labels). */
+const PAGE_SORT_OPTIONS: CardSortOption<SortBy>[] = [
+  { field: 'title', label: 'Title' },
+  { field: 'author', label: 'Author' },
+  { field: 'status', label: 'Status' },
+  { field: 'modified', label: 'Last Modified' },
+  { field: 'seo', label: 'SEO' },
+]
 const VIEW_MODE_KEY = 'prenta.pages.viewMode'
 const HIDDEN_COLUMNS_KEY = 'prenta.pages.hiddenColumns'
 
@@ -228,10 +246,14 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     return rows
   }, [displayGroups, grouped])
   const listScrollRef = useRef<HTMLDivElement>(null)
+  // Below 769px the rows are cards (`table[data-cards]`), taller than the
+  // 56px estimate the window places them by, so every row is mounted.
+  const cards = useMediaQuery(TIER_MEDIA.mobile)
   const listWindow = useVirtualWindow({
     count: tableRows.length,
     scrollRef: listScrollRef,
     estimateSize: 56,
+    enabled: !cards,
   })
 
   // ─── Tree mode ─────────────────────────────────────────────────────
@@ -535,7 +557,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     // Fill the shell's <main> and scroll the table card internally so the
     // pagination footer stays reachable (h-full + main overflow-y-auto alone
     // clips the footer — see #736).
-    <div className="flex h-full min-h-0 flex-col gap-4 p-4 sm:p-6">
+    <div className="mobile:h-auto flex h-full min-h-0 flex-col gap-4 p-4 sm:p-6">
       {/* Header — the "+ New page" primary action sits on the right, per
           the design's `.page-hdr` / `.hdr-r` layout. */}
       <div className="flex flex-wrap items-start justify-between gap-3">
@@ -547,16 +569,20 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
               : `${grandTotal} page${grandTotal === 1 ? '' : 's'} · organized by tags`}
           </p>
         </div>
-        <Button
-          type="button"
-          variant="primary"
-          size="sm"
-          className="shadow-sm"
-          onClick={() => onNavigate('/pages/new')}
-          leftIcon={<Plus size={16} aria-hidden />}
-        >
-          New page
-        </Button>
+        {/* Below 769px the create action floats above the tab bar. */}
+        <div data-header-actions="" className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="primary"
+            size="sm"
+            className="shadow-sm"
+            onClick={() => onNavigate('/pages/new')}
+            leftIcon={<Plus size={16} aria-hidden />}
+            data-fab=""
+          >
+            New page
+          </Button>
+        </div>
       </div>
 
       {/* Controls row */}
@@ -676,8 +702,38 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
         />
       )}
 
-      {/* Table card — flex-1 + min-h-0 so the body scrolls; footer stays pinned. */}
-      <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-[var(--bdr)] bg-[var(--card)] shadow-sm">
+      {/* Phones: the table header's sort and select-all, out of reach on cards. */}
+      {treeMode ? null : (
+        <CardListControls
+          selectAll={{
+            checked: allOnPageSelected,
+            onChange: toggleAllOnPage,
+            disabled: visiblePages.length === 0,
+          }}
+          sort={{
+            options: PAGE_SORT_OPTIONS.filter(
+              (option) =>
+                (option.field !== 'author' || showAuthor) && (option.field !== 'seo' || showSeo),
+            ),
+            field: sortBy,
+            dir,
+            onChange: (field, nextDir) => {
+              setSortBy(field)
+              setDir(nextDir)
+            },
+          }}
+        />
+      )}
+
+      {/* Table card — flex-1 + min-h-0 so the body scrolls; footer stays pinned.
+          On mobile the list rows are cards themselves, so this frame drops. */}
+      <div
+        className={`flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-[var(--bdr)] bg-[var(--card)] shadow-sm ${
+          treeMode
+            ? ''
+            : 'mobile:flex-none mobile:overflow-visible mobile:rounded-none mobile:border-0 mobile:bg-transparent mobile:shadow-none'
+        }`}
+      >
         {treeMode ? (
           <div className="min-h-0 flex-1 overflow-auto">
             <PagesTreeTable
@@ -705,11 +761,14 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
           <>
             {/* Both-axis scroll: tall lists scroll vertically; narrow viewports
                 keep column widths and scroll sideways instead of crushing. */}
-            <div ref={listScrollRef} className="min-h-0 flex-1 overflow-auto">
+            <div
+              ref={listScrollRef}
+              className="mobile:flex-none mobile:overflow-visible min-h-0 flex-1 overflow-auto"
+            >
               <table
                 className="w-full table-fixed"
                 style={{ minWidth: tableMinWidth }}
-                role="table"
+                {...cardTable}
                 aria-label="Pages"
               >
                 <colgroup>
@@ -722,9 +781,9 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   {showSeo && <col style={{ width: '80px' }} />}
                   <col style={{ width: '110px' }} />
                 </colgroup>
-                <thead className="bg-muted/40 border-b border-[var(--bdr)]">
-                  <tr className="text-xs text-[var(--sub)]">
-                    <th scope="col" className="px-3 py-2.5 text-left">
+                <thead {...cardRowGroup} className="bg-muted/40 border-b border-[var(--bdr)]">
+                  <tr {...cardRow} className="text-xs text-[var(--sub)]">
+                    <th {...cardColumnHeader} scope="col" className="px-3 py-2.5 text-left">
                       <input
                         type="checkbox"
                         aria-label="Select all pages on this page"
@@ -734,6 +793,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                       />
                     </th>
                     <th
+                      {...cardColumnHeader}
                       scope="col"
                       aria-sort={ariaSortFor('title')}
                       className="px-3 py-2.5 text-left"
@@ -747,12 +807,13 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                       />
                     </th>
                     {showTags && (
-                      <th scope="col" className="px-3 py-2.5 text-left">
+                      <th {...cardColumnHeader} scope="col" className="px-3 py-2.5 text-left">
                         <span className="text-xs font-medium tracking-wider uppercase">Tags</span>
                       </th>
                     )}
                     {showAuthor && (
                       <th
+                        {...cardColumnHeader}
                         scope="col"
                         aria-sort={ariaSortFor('author')}
                         className="px-3 py-2.5 text-left"
@@ -767,6 +828,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                       </th>
                     )}
                     <th
+                      {...cardColumnHeader}
                       scope="col"
                       aria-sort={ariaSortFor('status')}
                       className="px-3 py-2.5 text-left"
@@ -780,6 +842,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                       />
                     </th>
                     <th
+                      {...cardColumnHeader}
                       scope="col"
                       aria-sort={ariaSortFor('modified')}
                       className="px-3 py-2.5 text-left"
@@ -794,6 +857,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                     </th>
                     {showSeo && (
                       <th
+                        {...cardColumnHeader}
                         scope="col"
                         aria-sort={ariaSortFor('seo')}
                         className="px-3 py-2.5 text-left"
@@ -807,12 +871,12 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                         />
                       </th>
                     )}
-                    <th scope="col" className="px-3 py-2.5 text-right">
+                    <th {...cardColumnHeader} scope="col" className="px-3 py-2.5 text-right">
                       <span className="sr-only">Actions</span>
                     </th>
                   </tr>
                 </thead>
-                <tbody>
+                <tbody {...cardRowGroup}>
                   {loading && pages.length === 0 && <LoadingRows columns={columnCount} />}
                   {!loading && error && (
                     <tr>
@@ -1119,8 +1183,8 @@ function GroupBlock({
   return (
     <>
       {showHeader && (
-        <tr className="bg-muted/30 border-b border-[var(--bdr)]">
-          <td colSpan={columns} className="px-3 py-2">
+        <tr {...cardRow} className="bg-muted/30 border-b border-[var(--bdr)]">
+          <td {...cardCell()} colSpan={columns} className="px-3 py-2">
             <span className="inline-flex items-center gap-2 text-xs font-medium tracking-wider text-[var(--txt)] uppercase">
               {color && <span aria-hidden className={`h-2 w-2 rounded-full ${dotFor(color)}`} />}
               {label}
@@ -1291,20 +1355,29 @@ function PageRow({
 }) {
   return (
     <tr
+      {...cardRow}
+      data-state={selected ? 'selected' : undefined}
       className={`group border-b border-[var(--bdr)] transition-colors last:border-b-0 hover:bg-[var(--acc-l)] ${
         selected ? 'bg-[var(--acc-l)]' : ''
       }`}
     >
-      <td className="px-3 py-3" onClick={(e) => e.stopPropagation()}>
-        <input
-          type="checkbox"
-          aria-label={`Select "${page.title}"`}
-          checked={selected}
-          onChange={onSelect}
-          className="accent-primary rounded border-[var(--bdr)]"
-        />
+      <td
+        {...cardCell({ role: 'check' })}
+        className="px-3 py-3"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* The label is the card's 44px hit area on mobile (responsive.css). */}
+        <label className="inline-flex cursor-pointer">
+          <input
+            type="checkbox"
+            aria-label={`Select "${page.title}"`}
+            checked={selected}
+            onChange={onSelect}
+            className="accent-primary rounded border-[var(--bdr)]"
+          />
+        </label>
       </td>
-      <td className="px-3 py-3">
+      <td {...cardCell({ role: 'title' })} className="px-3 py-3">
         <button type="button" onClick={onOpen} className="block w-full min-w-0 text-left">
           <span className="block truncate text-sm font-medium text-[var(--txt)] group-hover:text-[var(--acc)]">
             {page.title}
@@ -1313,7 +1386,7 @@ function PageRow({
         </button>
       </td>
       {showTags && (
-        <td className="px-3 py-3">
+        <td {...cardCell({ label: 'Tags' })} className="px-3 py-3">
           <PageTagsCell
             tagSlugs={page.tags}
             primaryTagId={page.primaryTagId}
@@ -1322,25 +1395,28 @@ function PageRow({
         </td>
       )}
       {showAuthor && (
-        <td className="px-3 py-3">
+        <td {...cardCell({ label: 'Author' })} className="px-3 py-3">
           <div className="flex items-center gap-2">
             <AuthorAvatar name={page.authorName} size={28} />
             <span className="truncate text-sm text-[var(--txt)]">{page.authorName}</span>
           </div>
         </td>
       )}
-      <td className="px-3 py-3">
+      <td {...cardCell({ label: 'Status' })} className="px-3 py-3">
         <PostStatusBadge status={page.status} />
       </td>
-      <td className="px-3 py-3 text-sm text-[var(--sub)] tabular-nums">
+      <td
+        {...cardCell({ label: 'Last Modified' })}
+        className="px-3 py-3 text-sm text-[var(--sub)] tabular-nums"
+      >
         {formatDateShort(page.lastModified)}
       </td>
       {showSeo && (
-        <td className="px-3 py-3">
+        <td {...cardCell({ label: 'SEO' })} className="px-3 py-3">
           <SeoScoreIndicator score={page.seoScore} />
         </td>
       )}
-      <td className="px-3 py-3">
+      <td {...cardCell({ role: 'actions' })} className="px-3 py-3">
         <RowActions>
           <RowActionButton aria-label={`Edit "${page.title}"`} title="Edit" onClick={onOpen}>
             <PenLine size={13} aria-hidden />

package/src/views/Posts/NewPostTypeInstructions.tsx

@@ -1,8 +1,9 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { ArrowLeft, Check, Copy, Sparkles } from 'lucide-react'
+import { Check, Copy, Sparkles } from 'lucide-react'
 import { toast } from 'sonner'
+import { Breadcrumb } from '../../components/ui/Breadcrumb.js'
 import { resolvePostTypeIcon, type PostTypeIconName } from '../../components/posts/icons.js'
 import { paletteFor } from '../../components/posts/badges.js'
 import { POST_TYPE_PRESETS, type PresetColor, type QuickPreset } from './post-type-presets.js'
@@ -104,16 +105,20 @@ export function NewPostTypeInstructions({ onNavigate }: { onNavigate: (p: string
 
   return (
     <div className="mx-auto flex h-full max-w-3xl flex-col gap-6 p-4 sm:p-6">
-      <button
-        type="button"
-        onClick={() => onNavigate('/posts/types')}
-        className="text-muted-foreground hover:text-foreground inline-flex w-fit items-center gap-1.5 text-sm transition-colors"
-      >
-        <ArrowLeft className="h-3.5 w-3.5" aria-hidden />
-        Back to Post Types
-      </button>
-
       <div className="flex flex-col gap-1">
+        <Breadcrumb
+          className="mb-1"
+          items={[
+            { label: 'Dashboard', path: '/' },
+            { label: 'Posts', path: '/posts' },
+            {
+              label: 'Post Types',
+              path: '/posts/types',
+              onClick: () => onNavigate('/posts/types'),
+            },
+            { label: 'Add a Post Type' },
+          ]}
+        />
         <h1 className="text-foreground">Add a Post Type</h1>
         <p className="text-muted-foreground text-sm">
           Post Types are content models defined in{' '}

package/src/views/Posts/PostTypesView.tsx

@@ -5,6 +5,9 @@ import { LayoutTemplate, Plus } from 'lucide-react'
 import { fetchPosts, type PostType } from '../../lib/posts-service.js'
 import { paletteFor } from '../../components/posts/badges.js'
 import { resolvePostTypeIcon } from '../../components/posts/icons.js'
+import { Breadcrumb } from '../../components/ui/Breadcrumb.js'
+import { PageHeader } from '../../components/ui/PageHeader.js'
+import { Button } from '../../components/ui/Button.js'
 
 /**
  * Post Types — card grid that mirrors the reference screenshot. Each
@@ -61,12 +64,31 @@ export function PostTypesView({ onNavigate }: PostTypesViewProps) {
 
   return (
     <div className="flex h-full flex-col gap-6 p-4 sm:p-6">
-      <div className="flex flex-col gap-1">
-        <h1 className="text-foreground">Post Types</h1>
-        <p className="text-muted-foreground text-sm">
-          Define content models and their fields. All types share the same default fields.
-        </p>
-      </div>
+      <PageHeader
+        flush
+        title="Post Types"
+        subtitle="Define content models and their fields. All types share the same default fields."
+        breadcrumb={
+          <Breadcrumb
+            items={[
+              { label: 'Dashboard', path: '/' },
+              { label: 'Posts', path: '/posts' },
+              { label: 'Post Types' },
+            ]}
+          />
+        }
+        actions={
+          // Floats above the tab bar below 769px (data-fab).
+          <Button
+            type="button"
+            onClick={() => onNavigate('/posts/types/new')}
+            leftIcon={<Plus size={16} aria-hidden />}
+            data-fab=""
+          >
+            New Post Type
+          </Button>
+        }
+      />
 
       {loading && <CardGridSkeleton />}
       {!loading && error && (