@prenta/admin 2.6.1 → 2.7.0

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 && (