@prenta/admin 2.6.1 → 2.8.0

package/src/views/Posts/PostsListView.tsx

@@ -38,6 +38,15 @@ import {
 import { AuthorAvatar } from '../../components/ui/AuthorAvatar.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'
 
 /**
  * All Posts management surface — table with type tabs, controls row,
@@ -49,8 +58,7 @@ import { RowActionButton, RowActions } from '../../components/ui/RowActions.js'
  *   - Row click → /posts/{postTypeId}/{postId}/edit (the section-based Post
  *     editor, seeded from the post type's template).
  *   - "Manage types" → /posts/types.
- *   - "+ New Post" lives in the top bar (computePageActions); the page
- *     itself doesn't render that button.
+ *   - "+ New Post" sits on the right of the page header.
  */
 
 interface PostsListViewProps {
@@ -62,6 +70,16 @@ type Dir = 'asc' | 'desc'
 
 const PAGE_SIZE = 10
 
+/** The sortable columns, for the phone sort select (the header's labels). */
+const POST_SORT_OPTIONS: CardSortOption<SortBy>[] = [
+  { field: 'title', label: 'Title' },
+  { field: 'type', label: 'Type' },
+  { field: 'author', label: 'Author' },
+  { field: 'status', label: 'Status' },
+  { field: 'date', label: 'Date' },
+  { field: 'seo', label: 'SEO' },
+]
+
 /**
  * The table is `table-fixed`, so the flexible Title column only gets whatever
  * the min-width leaves after the seven fixed columns (810px). The previous
@@ -164,10 +182,14 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
   const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
   const posts = data?.posts ?? []
   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: posts.length,
     scrollRef: listScrollRef,
     estimateSize: 56,
+    enabled: !cards,
   })
   const types = data?.types ?? []
   const authors = data?.authors ?? []
@@ -296,7 +318,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
   return (
     // Fill the shell's <main> and scroll the table card internally so the
     // pagination footer stays reachable (same layout bug as Pages — #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 Post" 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">
@@ -306,14 +328,19 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
             {totalAll} total post{totalAll === 1 ? '' : 's'} across all types
           </p>
         </div>
-        <button
-          type="button"
-          onClick={() => onNavigate(newPostPath)}
-          className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2"
-        >
-          <Plus className="h-3.5 w-3.5" aria-hidden />
-          New Post
-        </button>
+        {/* Below 769px the create action floats above the tab bar. */}
+        <div data-header-actions="" className="flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => onNavigate(newPostPath)}
+            data-variant="primary"
+            data-fab=""
+            className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 text-sm font-medium shadow-sm transition-colors focus:outline-none focus-visible:ring-2"
+          >
+            <Plus className="h-3.5 w-3.5" aria-hidden />
+            New Post
+          </button>
+        </div>
       </div>
 
       {/* Type tabs */}
@@ -351,15 +378,36 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
         />
       )}
 
+      {/* Phones: the table header's sort and select-all, out of reach on cards. */}
+      <CardListControls
+        selectAll={{
+          checked: allOnPageSelected,
+          onChange: toggleAllOnPage,
+          disabled: posts.length === 0,
+        }}
+        sort={{
+          options: POST_SORT_OPTIONS,
+          field: sortBy,
+          dir,
+          onChange: (field, nextDir) => {
+            setSortBy(field)
+            setDir(nextDir)
+          },
+        }}
+      />
+
       {/* Table card — flex-1 + min-h-0 so the body scrolls; footer stays pinned. */}
-      <div className="border-border bg-card flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border shadow-sm">
+      <div className="border-border bg-card mobile:flex-none mobile:overflow-visible mobile:rounded-none mobile:border-0 mobile:bg-transparent mobile:shadow-none flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border shadow-sm">
         {/* 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: TABLE_MIN_WIDTH }}
-            role="table"
+            {...cardTable}
             aria-label="Posts"
           >
             <colgroup>
@@ -372,9 +420,9 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
               <col style={{ width: '90px' }} />
               <col style={{ width: '110px' }} />
             </colgroup>
-            <thead className="border-border bg-muted/40 border-b">
-              <tr className="text-muted-foreground text-xs">
-                <th scope="col" className="px-3 py-2.5 text-left">
+            <thead {...cardRowGroup} className="border-border bg-muted/40 border-b">
+              <tr {...cardRow} className="text-muted-foreground text-xs">
+                <th {...cardColumnHeader} scope="col" className="px-3 py-2.5 text-left">
                   <input
                     type="checkbox"
                     aria-label="Select all posts on this page"
@@ -383,7 +431,12 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     className="border-border accent-primary rounded"
                   />
                 </th>
-                <th scope="col" aria-sort={ariaSortFor('title')} className="px-3 py-2.5 text-left">
+                <th
+                  {...cardColumnHeader}
+                  scope="col"
+                  aria-sort={ariaSortFor('title')}
+                  className="px-3 py-2.5 text-left"
+                >
                   <SortHeader
                     label="Title"
                     field="title"
@@ -392,7 +445,12 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
-                <th scope="col" aria-sort={ariaSortFor('type')} className="px-3 py-2.5 text-left">
+                <th
+                  {...cardColumnHeader}
+                  scope="col"
+                  aria-sort={ariaSortFor('type')}
+                  className="px-3 py-2.5 text-left"
+                >
                   <SortHeader
                     label="Type"
                     field="type"
@@ -401,7 +459,12 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
-                <th scope="col" aria-sort={ariaSortFor('author')} className="px-3 py-2.5 text-left">
+                <th
+                  {...cardColumnHeader}
+                  scope="col"
+                  aria-sort={ariaSortFor('author')}
+                  className="px-3 py-2.5 text-left"
+                >
                   <SortHeader
                     label="Author"
                     field="author"
@@ -410,7 +473,12 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
-                <th scope="col" aria-sort={ariaSortFor('status')} className="px-3 py-2.5 text-left">
+                <th
+                  {...cardColumnHeader}
+                  scope="col"
+                  aria-sort={ariaSortFor('status')}
+                  className="px-3 py-2.5 text-left"
+                >
                   <SortHeader
                     label="Status"
                     field="status"
@@ -419,7 +487,12 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
-                <th scope="col" aria-sort={ariaSortFor('date')} className="px-3 py-2.5 text-left">
+                <th
+                  {...cardColumnHeader}
+                  scope="col"
+                  aria-sort={ariaSortFor('date')}
+                  className="px-3 py-2.5 text-left"
+                >
                   <SortHeader
                     label="Date"
                     field="date"
@@ -428,7 +501,12 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
-                <th scope="col" aria-sort={ariaSortFor('seo')} className="px-3 py-2.5 text-left">
+                <th
+                  {...cardColumnHeader}
+                  scope="col"
+                  aria-sort={ariaSortFor('seo')}
+                  className="px-3 py-2.5 text-left"
+                >
                   <SortHeader
                     label="SEO"
                     field="seo"
@@ -437,12 +515,12 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </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 && posts.length === 0 && <LoadingRows />}
               {!loading && error && (
                 <tr>
@@ -817,20 +895,29 @@ function PostRow({
   const p = paletteFor(post.postTypeAccentColor)
   return (
     <tr
+      {...cardRow}
+      data-state={selected ? 'selected' : undefined}
       className={`border-border hover:bg-muted/30 group border-b transition-colors last:border-b-0 ${
         selected ? 'bg-primary/5' : ''
       }`}
     >
-      <td className="px-3 py-3" onClick={(e) => e.stopPropagation()}>
-        <input
-          type="checkbox"
-          aria-label={`Select "${post.title}"`}
-          checked={selected}
-          onChange={onSelect}
-          className="border-border accent-primary rounded"
-        />
+      <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 "${post.title}"`}
+            checked={selected}
+            onChange={onSelect}
+            className="border-border accent-primary rounded"
+          />
+        </label>
       </td>
-      <td className="px-3 py-3">
+      <td {...cardCell({ role: 'title' })} className="px-3 py-3">
         <button type="button" onClick={onOpen} className="flex w-full items-center gap-3 text-left">
           {post.imageUrl ? (
             <img
@@ -856,25 +943,28 @@ function PostRow({
           </span>
         </button>
       </td>
-      <td className="px-3 py-3">
+      <td {...cardCell({ label: 'Type' })} className="px-3 py-3">
         <PostTypeBadge label={post.postTypeName} color={post.postTypeAccentColor} />
       </td>
-      <td className="px-3 py-3">
+      <td {...cardCell({ label: 'Author' })} className="px-3 py-3">
         <div className="flex items-center gap-2">
           <AuthorAvatar name={post.authorName} size={28} />
           <span className="text-foreground truncate text-sm">{post.authorName}</span>
         </div>
       </td>
-      <td className="px-3 py-3">
+      <td {...cardCell({ label: 'Status' })} className="px-3 py-3">
         <PostStatusBadge status={post.status} />
       </td>
-      <td className="text-muted-foreground px-3 py-3 text-sm tabular-nums">
+      <td
+        {...cardCell({ label: 'Date' })}
+        className="text-muted-foreground px-3 py-3 text-sm tabular-nums"
+      >
         {formatDateShort(post.updatedDate)}
       </td>
-      <td className="px-3 py-3">
+      <td {...cardCell({ label: 'SEO' })} className="px-3 py-3">
         <SeoScoreIndicator score={post.seoScore} />
       </td>
-      <td className="px-3 py-3">
+      <td {...cardCell({ role: 'actions' })} className="px-3 py-3">
         <RowActions>
           <RowActionButton aria-label={`Edit "${post.title}"`} title="Edit" onClick={onOpen}>
             <PenLine size={13} aria-hidden />

package/src/views/SEO.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 /**
- * SEO Operations Center — eight-tab workflow surface (Overview / Content /
+ * SEO — eight-tab workflow surface (Overview / Content /
  * Links / Technical / AI visibility / Redirects / Audit / Proposals). Tab +
  * deep-link state is driven by the `?tab=` query string so audits, issues,
  * redirects, proposals, and content editors are all linkable. All data flows
@@ -152,24 +152,39 @@ export function SEO({ onNavigate, initialTab = 'overview' }: SEOProps) {
 
   return (
     <div className="space-y-6 p-6">
-      <header className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <header className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        {/* Title = sidebar label (SHELL.md §4); copy from SEO.html. */}
         <div>
-          <h1 className="text-foreground">SEO Operations Center</h1>
+          <h1 className="text-foreground">SEO</h1>
           <p className="text-muted-foreground mt-1 text-sm">
-            Monitor, fix, and automate SEO across your content, redirects, and technical setup.
+            Search engine optimization across all your content
           </p>
         </div>
-        <div className="flex items-center gap-3">
+        {/* Collapse to icons at tablet (AI Copilot keeps its text) and on
+            mobile (all of them). */}
+        <div data-header-actions="" className="flex shrink-0 items-center gap-3 whitespace-nowrap">
           {typeof score === 'number' && (
             <span className="text-muted-foreground flex items-center gap-2 text-sm">
               Site score <ScorePill score={score} />
             </span>
           )}
-          <button className={btnSecondary} onClick={() => setCopilotOpen(true)}>
+          <button
+            type="button"
+            className={btnSecondary}
+            onClick={() => setCopilotOpen(true)}
+            data-variant="secondary"
+            data-keep-label=""
+          >
             <Bot className="h-4 w-4" aria-hidden />
             AI Copilot
           </button>
-          <button className={btnPrimary} onClick={handleRunAudit} disabled={auditing}>
+          <button
+            type="button"
+            className={btnPrimary}
+            onClick={handleRunAudit}
+            disabled={auditing}
+            data-variant="primary"
+          >
             <RefreshCw className={`h-4 w-4 ${auditing ? 'animate-spin' : ''}`} aria-hidden />
             {auditing ? 'Running audit…' : 'Run audit'}
           </button>
@@ -201,7 +216,7 @@ export function SEO({ onNavigate, initialTab = 'overview' }: SEOProps) {
               <Tabs.Trigger
                 key={t.id}
                 value={t.id}
-                className="text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-primary focus-visible:ring-ring -mb-px flex items-center gap-2 border-b-2 border-transparent px-3 py-2.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none"
+                className="text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-primary focus-visible:ring-ring -mb-px flex shrink-0 items-center gap-2 border-b-2 border-transparent px-3 py-2.5 text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:outline-none"
               >
                 <Icon className="h-4 w-4" aria-hidden />
                 {t.label}