@actuate-media/cms-admin 0.71.0 → 0.72.0

package/src/views/Pages/PagesListView.tsx

@@ -2,10 +2,12 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
+  Check,
   ChevronDown,
   ChevronLeft,
   ChevronRight,
   ChevronUp,
+  Columns3,
   Copy,
   List,
   ListTree,
@@ -44,6 +46,7 @@ import {
 } from '../../lib/pages-tree.js'
 import { PostStatusBadge, SeoScoreIndicator } from '../../components/posts/badges.js'
 import { PageTagChip, PageTagsCell } from '../../components/pages/tag-badges.js'
+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'
@@ -69,8 +72,17 @@ type SortBy = 'title' | 'author' | 'status' | 'modified' | 'seo'
 type Dir = 'asc' | 'desc'
 type ViewMode = 'list' | 'tree'
 
+/** Optional flat-list columns the user can hide (design's "Tweaks" panel). */
+type ToggleableColumn = 'tags' | 'author' | 'seo'
+const TOGGLEABLE_COLUMNS: Array<{ key: ToggleableColumn; label: string }> = [
+  { key: 'tags', label: 'Tags' },
+  { key: 'author', label: 'Author' },
+  { key: 'seo', label: 'SEO score' },
+]
+
 const PAGE_SIZE = 25
 const VIEW_MODE_KEY = 'actuate.pages.viewMode'
+const HIDDEN_COLUMNS_KEY = 'actuate.pages.hiddenColumns'
 
 function readStoredViewMode(): ViewMode {
   if (typeof window === 'undefined') return 'list'
@@ -81,6 +93,20 @@ function readStoredViewMode(): ViewMode {
   }
 }
 
+function readStoredHiddenColumns(): Set<ToggleableColumn> {
+  if (typeof window === 'undefined') return new Set()
+  try {
+    const raw = localStorage.getItem(HIDDEN_COLUMNS_KEY)
+    if (!raw) return new Set()
+    const known = new Set(TOGGLEABLE_COLUMNS.map((c) => c.key))
+    const parsed: unknown = JSON.parse(raw)
+    if (!Array.isArray(parsed)) return new Set()
+    return new Set(parsed.filter((v): v is ToggleableColumn => known.has(v as ToggleableColumn)))
+  } catch {
+    return new Set()
+  }
+}
+
 export function PagesListView({ onNavigate }: PagesListViewProps) {
   const [search, setSearch] = useState('')
   const [debouncedSearch, setDebouncedSearch] = useState('')
@@ -92,6 +118,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
   const [page, setPage] = useState(1)
   const [selected, setSelected] = useState<Set<string>>(new Set())
   const [viewMode, setViewMode] = useState<ViewMode>(readStoredViewMode)
+  const [hiddenCols, setHiddenCols] = useState<Set<ToggleableColumn>>(readStoredHiddenColumns)
   // null = "not yet touched" → falls back to the default expand state
   // (all root nodes with children open) computed from the current tree.
   const [expandedOverride, setExpandedOverride] = useState<Set<string> | null>(null)
@@ -223,6 +250,38 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     }
   }
 
+  const toggleColumn = (key: ToggleableColumn) => {
+    setHiddenCols((prev) => {
+      const next = new Set(prev)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      try {
+        localStorage.setItem(HIDDEN_COLUMNS_KEY, JSON.stringify([...next]))
+      } catch {
+        /* storage unavailable — the choice still applies for the session */
+      }
+      return next
+    })
+    // Hiding the column you're sorted by would leave an invisible sort —
+    // fall back to the default title sort instead.
+    if ((key === 'author' && sortBy === 'author') || (key === 'seo' && sortBy === 'seo')) {
+      setSortBy('title')
+      setDir('asc')
+    }
+  }
+
+  const showTags = !hiddenCols.has('tags')
+  const showAuthor = !hiddenCols.has('author')
+  const showSeo = !hiddenCols.has('seo')
+  // checkbox + title + status + modified + actions are always visible.
+  const columnCount = 5 + (showTags ? 1 : 0) + (showAuthor ? 1 : 0) + (showSeo ? 1 : 0)
+  // The table is `table-fixed`, so the flexible Title column only gets
+  // whatever the min-width leaves after the fixed columns (400px always
+  // visible + optional ones). Keep ≥240px for the title or it collapses
+  // and headers overlap on narrow viewports.
+  const tableMinWidth =
+    400 + 240 + (showTags ? 200 : 0) + (showAuthor ? 170 : 0) + (showSeo ? 80 : 0)
+
   const handleSort = useCallback(
     (field: SortBy) => {
       if (sortBy === field) {
@@ -520,6 +579,8 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
 
         <ViewModeToggle mode={viewMode} onChange={changeViewMode} />
 
+        {!treeMode && <ColumnsMenu hidden={hiddenCols} onToggle={toggleColumn} />}
+
         <span className="ml-auto text-sm text-[var(--sub)] tabular-nums">
           {treeMode
             ? treeFiltersActive
@@ -611,15 +672,20 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
             {/* Horizontal scroll on narrow viewports: the fixed columns keep their
             width and the table scrolls sideways instead of crushing content. */}
             <div className="overflow-x-auto">
-              <table className="w-full min-w-[800px] table-fixed" role="table" aria-label="Pages">
+              <table
+                className="w-full table-fixed"
+                style={{ minWidth: tableMinWidth }}
+                role="table"
+                aria-label="Pages"
+              >
                 <colgroup>
                   <col style={{ width: '40px' }} />
                   <col />
-                  <col style={{ width: '200px' }} />
-                  <col style={{ width: '170px' }} />
+                  {showTags && <col style={{ width: '200px' }} />}
+                  {showAuthor && <col style={{ width: '170px' }} />}
                   <col style={{ width: '120px' }} />
                   <col style={{ width: '130px' }} />
-                  <col style={{ width: '80px' }} />
+                  {showSeo && <col style={{ width: '80px' }} />}
                   <col style={{ width: '110px' }} />
                 </colgroup>
                 <thead className="bg-muted/40 border-b border-[var(--bdr)]">
@@ -646,22 +712,26 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                         onSort={handleSort}
                       />
                     </th>
-                    <th scope="col" className="px-3 py-2.5 text-left">
-                      <span className="text-xs font-medium tracking-wider uppercase">Tags</span>
-                    </th>
-                    <th
-                      scope="col"
-                      aria-sort={ariaSortFor('author')}
-                      className="px-3 py-2.5 text-left"
-                    >
-                      <SortHeader
-                        label="Author"
-                        field="author"
-                        current={sortBy}
-                        dir={dir}
-                        onSort={handleSort}
-                      />
-                    </th>
+                    {showTags && (
+                      <th scope="col" className="px-3 py-2.5 text-left">
+                        <span className="text-xs font-medium tracking-wider uppercase">Tags</span>
+                      </th>
+                    )}
+                    {showAuthor && (
+                      <th
+                        scope="col"
+                        aria-sort={ariaSortFor('author')}
+                        className="px-3 py-2.5 text-left"
+                      >
+                        <SortHeader
+                          label="Author"
+                          field="author"
+                          current={sortBy}
+                          dir={dir}
+                          onSort={handleSort}
+                        />
+                      </th>
+                    )}
                     <th
                       scope="col"
                       aria-sort={ariaSortFor('status')}
@@ -688,29 +758,31 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                         onSort={handleSort}
                       />
                     </th>
-                    <th
-                      scope="col"
-                      aria-sort={ariaSortFor('seo')}
-                      className="px-3 py-2.5 text-left"
-                    >
-                      <SortHeader
-                        label="SEO"
-                        field="seo"
-                        current={sortBy}
-                        dir={dir}
-                        onSort={handleSort}
-                      />
-                    </th>
+                    {showSeo && (
+                      <th
+                        scope="col"
+                        aria-sort={ariaSortFor('seo')}
+                        className="px-3 py-2.5 text-left"
+                      >
+                        <SortHeader
+                          label="SEO"
+                          field="seo"
+                          current={sortBy}
+                          dir={dir}
+                          onSort={handleSort}
+                        />
+                      </th>
+                    )}
                     <th scope="col" className="px-3 py-2.5 text-right">
                       <span className="sr-only">Actions</span>
                     </th>
                   </tr>
                 </thead>
                 <tbody>
-                  {loading && pages.length === 0 && <LoadingRows />}
+                  {loading && pages.length === 0 && <LoadingRows columns={columnCount} />}
                   {!loading && error && (
                     <tr>
-                      <td colSpan={8} className="px-3 py-12 text-center">
+                      <td colSpan={columnCount} className="px-3 py-12 text-center">
                         <div className="mb-2 text-sm font-medium text-[var(--txt)]">{error}</div>
                         <button
                           onClick={() => setRefreshToken((t) => t + 1)}
@@ -723,6 +795,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                   )}
                   {!loading && !error && pages.length === 0 && (
                     <EmptyRow
+                      columns={columnCount}
                       filtersActive={filtersAreActive}
                       onClear={clearFilters}
                       onNewPage={() => onNavigate('/pages/new')}
@@ -737,12 +810,16 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                         label={group.label}
                         color={group.color}
                         count={group.pages.length}
+                        columns={columnCount}
                       >
                         {group.pages.map((p) => (
                           <PageRow
                             key={p.id}
                             page={p}
                             selected={selected.has(p.id)}
+                            showTags={showTags}
+                            showAuthor={showAuthor}
+                            showSeo={showSeo}
                             resolveTag={(slug) => tagBySlug.get(slug)}
                             onSelect={() => toggleOne(p.id)}
                             onOpen={() => onNavigate(`/pages/${p.id}/edit`)}
@@ -880,6 +957,70 @@ function ViewModeToggle({
   )
 }
 
+/**
+ * Column visibility menu — the product translation of the design's
+ * floating "Tweaks" panel. Optional columns can be hidden per user;
+ * the choice persists in localStorage alongside the view mode.
+ */
+function ColumnsMenu({
+  hidden,
+  onToggle,
+}: {
+  hidden: Set<ToggleableColumn>
+  onToggle: (key: ToggleableColumn) => void
+}) {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button
+          type="button"
+          aria-label="Choose visible columns"
+          className="inline-flex items-center gap-1.5 rounded-lg border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-1.5 text-sm text-[var(--txt)] shadow-sm transition-colors hover:bg-[var(--acc-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none"
+        >
+          <Columns3 size={15} aria-hidden />
+          Columns
+          <ChevronDown className="h-3 w-3 text-[var(--sub)]" aria-hidden />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal container={adminPortalContainer()}>
+        <DropdownMenu.Content
+          align="end"
+          sideOffset={4}
+          className="bg-popover z-50 w-44 rounded-lg border border-[var(--bdr)] p-1 shadow-md"
+        >
+          <DropdownMenu.Label className="px-2 py-1.5 text-[10px] font-medium tracking-wider text-[var(--sub)] uppercase">
+            Columns
+          </DropdownMenu.Label>
+          {TOGGLEABLE_COLUMNS.map((col) => {
+            const visible = !hidden.has(col.key)
+            return (
+              <DropdownMenu.CheckboxItem
+                key={col.key}
+                checked={visible}
+                onCheckedChange={() => onToggle(col.key)}
+                onSelect={(e) => e.preventDefault()}
+                className="focus:bg-accent flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm text-[var(--txt)] outline-none"
+              >
+                <span
+                  aria-hidden
+                  className={`flex h-4 w-4 items-center justify-center rounded border ${
+                    visible
+                      ? 'bg-primary border-transparent text-white'
+                      : 'border-[var(--bdr)] bg-[var(--card)]'
+                  }`}
+                >
+                  {visible && <Check size={11} strokeWidth={3} />}
+                </span>
+                {col.label}
+              </DropdownMenu.CheckboxItem>
+            )
+          })}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  )
+}
+
 function FilterSelect({
   label,
   value,
@@ -914,19 +1055,21 @@ function GroupBlock({
   label,
   color,
   count,
+  columns,
   children,
 }: {
   showHeader: boolean
   label: string
   color: string | null
   count: number
+  columns: number
   children: React.ReactNode
 }) {
   return (
     <>
       {showHeader && (
         <tr className="bg-muted/30 border-b border-[var(--bdr)]">
-          <td colSpan={8} className="px-3 py-2">
+          <td 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}
@@ -1066,6 +1209,9 @@ function TagMenu({
 function PageRow({
   page,
   selected,
+  showTags,
+  showAuthor,
+  showSeo,
   resolveTag,
   onSelect,
   onOpen,
@@ -1074,6 +1220,9 @@ function PageRow({
 }: {
   page: Page
   selected: boolean
+  showTags: boolean
+  showAuthor: boolean
+  showSeo: boolean
   resolveTag: (slug: string) => { name: string; color: string | null } | undefined
   onSelect: () => void
   onOpen: () => void
@@ -1096,39 +1245,41 @@ function PageRow({
         />
       </td>
       <td className="px-3 py-3">
-        <button type="button" onClick={onOpen} className="flex w-full items-center gap-3 text-left">
-          <span aria-hidden className="bg-muted block h-9 w-9 shrink-0 rounded-md" />
-          <span className="min-w-0">
-            <span className="block truncate text-sm font-medium text-[var(--txt)] group-hover:text-[var(--acc)]">
-              {page.title}
-            </span>
-            <span className="block truncate text-xs text-[var(--sub)]">{page.path}</span>
+        <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}
           </span>
+          <span className="block truncate text-xs text-[var(--sub)]">{page.path}</span>
         </button>
       </td>
-      <td className="px-3 py-3">
-        <PageTagsCell tagSlugs={page.tags} primaryTagId={page.primaryTagId} resolve={resolveTag} />
-      </td>
-      <td className="px-3 py-3">
-        <div className="flex items-center gap-2">
-          <span
-            aria-hidden
-            className="bg-muted inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-medium text-[var(--sub)]"
-          >
-            {page.authorInitials}
-          </span>
-          <span className="truncate text-sm text-[var(--txt)]">{page.authorName}</span>
-        </div>
-      </td>
+      {showTags && (
+        <td className="px-3 py-3">
+          <PageTagsCell
+            tagSlugs={page.tags}
+            primaryTagId={page.primaryTagId}
+            resolve={resolveTag}
+          />
+        </td>
+      )}
+      {showAuthor && (
+        <td 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">
         <PostStatusBadge status={page.status} />
       </td>
       <td className="px-3 py-3 text-sm text-[var(--sub)] tabular-nums">
         {formatDateShort(page.lastModified)}
       </td>
-      <td className="px-3 py-3">
-        <SeoScoreIndicator score={page.seoScore} />
-      </td>
+      {showSeo && (
+        <td className="px-3 py-3">
+          <SeoScoreIndicator score={page.seoScore} />
+        </td>
+      )}
       <td className="px-3 py-3">
         <RowActions>
           <RowActionButton aria-label={`Edit "${page.title}"`} title="Edit" onClick={onOpen}>
@@ -1156,12 +1307,12 @@ function PageRow({
   )
 }
 
-function LoadingRows() {
+function LoadingRows({ columns }: { columns: number }) {
   return (
     <>
       {Array.from({ length: 8 }).map((_, i) => (
         <tr key={i} className="border-b border-[var(--bdr)] last:border-b-0">
-          {Array.from({ length: 8 }).map((__, j) => (
+          {Array.from({ length: columns }).map((__, j) => (
             <td key={j} className="px-3 py-3">
               <div className="bg-muted h-4 w-full animate-pulse rounded" />
             </td>
@@ -1173,17 +1324,19 @@ function LoadingRows() {
 }
 
 function EmptyRow({
+  columns,
   filtersActive,
   onClear,
   onNewPage,
 }: {
+  columns: number
   filtersActive: boolean
   onClear: () => void
   onNewPage: () => void
 }) {
   return (
     <tr>
-      <td colSpan={8} className="px-3 py-16 text-center">
+      <td colSpan={columns} className="px-3 py-16 text-center">
         <div className="mb-2 text-sm font-medium text-[var(--txt)]">
           {filtersActive ? 'No pages match your filters' : 'No pages yet'}
         </div>

package/src/views/Pages/PagesTreeTable.tsx

@@ -17,6 +17,7 @@ import { ChevronDown, Copy, GripVertical, PenLine, Plus, Trash2 } from 'lucide-r
 import type { Page } from '../../lib/pages-service.js'
 import type { PageTreeRow } from '../../lib/pages-tree.js'
 import { PostStatusBadge, SeoScoreIndicator } from '../../components/posts/badges.js'
+import { AuthorAvatar } from '../../components/ui/AuthorAvatar.js'
 import { Button } from '../../components/ui/Button.js'
 import { RowActionButton, RowActions } from '../../components/ui/RowActions.js'
 
@@ -354,12 +355,7 @@ function TreeRow({
       </td>
       <td className="px-3 align-middle">
         <div className="flex items-center gap-[7px]">
-          <span
-            aria-hidden
-            className="inline-flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full bg-[var(--acc-l)] text-[9px] font-medium text-[var(--acc)]"
-          >
-            {page.authorInitials}
-          </span>
+          <AuthorAvatar name={page.authorName} size={22} />
           <span className="truncate text-[13px] text-[var(--txt)]">{page.authorName}</span>
         </div>
       </td>

package/src/views/Posts/PostsListView.tsx

@@ -33,6 +33,7 @@ import {
   SeoScoreIndicator,
   paletteFor,
 } from '../../components/posts/badges.js'
+import { AuthorAvatar } from '../../components/ui/AuthorAvatar.js'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
 import { RowActionButton, RowActions } from '../../components/ui/RowActions.js'
 
@@ -812,12 +813,7 @@ function PostRow({
       </td>
       <td className="px-3 py-3">
         <div className="flex items-center gap-2">
-          <span
-            aria-hidden
-            className="bg-muted text-muted-foreground inline-flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-medium"
-          >
-            {post.authorInitials}
-          </span>
+          <AuthorAvatar name={post.authorName} size={28} />
           <span className="text-foreground truncate text-sm">{post.authorName}</span>
         </div>
       </td>

package/src/views/ScriptTags.tsx

@@ -371,8 +371,9 @@ export function ScriptTags({ initialSelectedId, initialNew }: ScriptTagsProps) {
               </button>
             </div>
           ) : (
-            <div className="overflow-hidden rounded-lg border border-[var(--bdr)] bg-[var(--card)]">
-              <table className="w-full text-sm" aria-label="Script tags">
+            <div className="overflow-x-auto rounded-lg border border-[var(--bdr)] bg-[var(--card)]">
+              {/* min-w keeps the 8 columns readable; narrow viewports scroll sideways. */}
+              <table className="w-full min-w-[920px] text-sm" aria-label="Script tags">
                 <thead>
                   <tr className="bg-muted border-b border-[var(--bdr)]">
                     <th className="w-9 px-3 py-3">

package/src/views/seo/AuditTab.tsx

@@ -282,7 +282,7 @@ export function AuditTab({
           />
         ) : (
           <div className="overflow-x-auto">
-            <table className="w-full text-sm" aria-label="SEO issues">
+            <table className="w-full min-w-[680px] text-sm" aria-label="SEO issues">
               <thead>
                 <tr className="text-muted-foreground border-border border-b text-left">
                   <th className="py-2 pr-4 font-medium">Severity</th>

package/src/views/seo/ContentTab.tsx

@@ -116,7 +116,7 @@ export function ContentTab({
               />
             ) : (
               <div className="overflow-x-auto">
-                <table className="w-full text-sm" aria-label="Content SEO">
+                <table className="w-full min-w-[640px] text-sm" aria-label="Content SEO">
                   <thead>
                     <tr className="border-b border-[var(--bdr)] text-left text-[var(--sub)]">
                       <th className="py-2 pr-4 font-medium">Title</th>

package/src/views/seo/OverviewTab.tsx

@@ -216,7 +216,7 @@ export function OverviewTab({
           <SeoEmptyState title="No search performance data" />
         ) : (
           <div className="overflow-x-auto">
-            <table className="w-full text-sm" aria-label="Search performance">
+            <table className="w-full min-w-[640px] text-sm" aria-label="Search performance">
               <thead>
                 <tr className="text-muted-foreground border-border border-b text-left">
                   <th className="py-2 pr-4 font-medium">Page</th>

package/src/views/seo/RedirectsTab.tsx

@@ -327,7 +327,7 @@ export function RedirectsTab() {
               />
             ) : (
               <div className="overflow-x-auto">
-                <table className="w-full text-sm" aria-label="Redirect rules">
+                <table className="w-full min-w-[760px] text-sm" aria-label="Redirect rules">
                   <thead>
                     <tr className="text-muted-foreground border-border border-b text-left">
                       <th className="py-2 pr-4 font-medium">Source</th>

package/src/views/seo/TechnicalTab.tsx

@@ -362,7 +362,7 @@ function AiCrawlerCard() {
             </div>
           </dl>
           <div className="overflow-x-auto">
-            <table className="w-full text-sm" aria-label="AI crawler activity by bot">
+            <table className="w-full min-w-[640px] text-sm" aria-label="AI crawler activity by bot">
               <thead>
                 <tr className="border-border text-muted-foreground border-b text-left">
                   <th scope="col" className="py-2 pr-3 font-medium">