@actuate-media/cms-admin 0.71.1 → 0.72.1

package/src/views/Dashboard.tsx

@@ -41,6 +41,7 @@ import {
 } from 'lucide-react'
 import { useApiData } from '../lib/useApiData.js'
 import { editPathForDoc } from '../lib/collection-routes.js'
+import { authorAvatar } from '../components/ui/AuthorAvatar.js'
 import { OnboardingBlock, shouldShowOnboarding } from './dashboard/OnboardingBlock.js'
 import type { OnboardingSignals } from './dashboard/OnboardingBlock.js'
 
@@ -173,45 +174,15 @@ function todayDateString(): string {
   })
 }
 
-// Deterministic colour per author so avatars stay stable across renders
-// without storing anything in state or hitting the server.
-const AVATAR_COLORS = [
-  '#7C3AED', // purple
-  '#E11D48', // rose
-  '#059669', // emerald
-  '#0891B2', // cyan
-  '#D97706', // amber
-  '#4F46E5', // indigo
-  '#DC2626', // red
-] as const
-
-function hashString(s: string): number {
-  let h = 0
-  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0
-  return Math.abs(h)
-}
-
-function authorAvatar(name: string | null | undefined): { color: string; initials: string } {
-  const safe = (name ?? '').trim() || 'User'
-  const parts = safe.split(/\s+/).filter(Boolean)
-  const initials =
-    parts.length >= 2
-      ? `${parts[0]![0]}${parts[parts.length - 1]![0]}`.toUpperCase()
-      : safe.slice(0, 2).toUpperCase()
-  const color = AVATAR_COLORS[hashString(safe) % AVATAR_COLORS.length]!
-  return { color, initials }
-}
-
 /**
  * Semantic state styling uses theme tokens (`success` / `warning` / `info`
  * / `brand`) so the dashboard tracks the design system in both light and
- * dark mode. Two deliberate exceptions remain as raw values:
+ * dark mode. One deliberate exception remains as raw values:
  *   - Error states keep `text-red-*` / `bg-red-*`. The `--destructive`
  *     token's dark value is intentionally dark (low contrast as TEXT on a
  *     dark card), so tokenizing error text here would regress contrast.
  *     Promoting error to a token is a separate, admin-wide change.
- *   - `AVATAR_COLORS` are dynamic per-author hashes (allowed: truly
- *     dynamic values, applied via inline style).
+ * Author avatar colors moved to the shared `AuthorAvatar` component.
  */
 function statusBadge(status: string): {
   label: string

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/page-editor/PageSectionEditor.tsx

@@ -145,6 +145,10 @@ export function PageSectionEditor({
     if (!documentId) {
       setPage(emptyPage(initialParentId ?? null))
       setLoading(false)
+      // Start a brand-new page the way WordPress does: name it first. The
+      // settings modal opens with the title focused and the slug/path
+      // deriving live, so the required fields are done before building.
+      setSettingsOpen(true)
       return
     }
 

package/src/views/page-editor/PageSettingsModal.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { normalizeSlug, validateSlug } from '@actuate-media/cms-core/client'
 import { Modal } from '../../components/ui/Modal.js'
 import { Button } from '../../components/ui/Button.js'
@@ -49,6 +49,9 @@ export function PageSettingsModal({
   // Auto-derive slug/path from title until the user edits slug manually.
   const [slugTouched, setSlugTouched] = useState(Boolean(page.slug))
   const [parentOptions, setParentOptions] = useState<ParentOption[] | null>(null)
+  // Land the user in the Title field (WordPress-style "name it first"),
+  // rather than Radix's default focus on the header close button.
+  const titleRef = useRef<HTMLInputElement | null>(null)
 
   useEffect(() => {
     if (!open) return
@@ -118,29 +121,49 @@ export function PageSettingsModal({
       open={open}
       onClose={onClose}
       title="Page settings"
+      initialFocusRef={titleRef}
       actions={
         <>
           <Button variant="ghost" onClick={onClose}>
             Cancel
           </Button>
-          <Button variant="primary" onClick={handleSave} disabled={!canEdit || Boolean(slugError)}>
+          <Button
+            variant="primary"
+            form="page-settings-form"
+            type="submit"
+            disabled={!canEdit || Boolean(slugError)}
+          >
             Done
           </Button>
         </>
       }
     >
-      <div className="space-y-3">
+      {/* A real form so Enter in any field confirms the dialog — matters
+          for the new-page flow where this modal is the first stop. */}
+      <form
+        id="page-settings-form"
+        className="space-y-3"
+        onSubmit={(e) => {
+          e.preventDefault()
+          handleSave()
+        }}
+      >
         <div>
           <label className={LABEL} htmlFor="ps-title">
             Title <span className="text-destructive">*</span>
           </label>
           <input
             id="ps-title"
+            ref={titleRef}
             className={INPUT}
             value={title}
             disabled={!canEdit}
+            placeholder="e.g. About Us"
             onChange={(e) => handleTitle(e.target.value)}
           />
+          <p className="text-muted-foreground mt-1 text-xs">
+            The slug and path below follow the title until you edit them.
+          </p>
         </div>
         <div className="grid grid-cols-2 gap-3">
           <div>
@@ -240,7 +263,7 @@ export function PageSettingsModal({
             onChange={(e) => setSeoDescription(e.target.value)}
           />
         </div>
-      </div>
+      </form>
     </Modal>
   )
 }