@actuate-media/cms-admin 0.64.0 → 0.66.0

package/src/views/Pages/PagesListView.tsx

@@ -6,6 +6,8 @@ import {
   ChevronLeft,
   ChevronRight,
   ChevronUp,
+  Copy,
+  PenLine,
   Plus,
   Search,
   Tag as TagIcon,
@@ -20,6 +22,8 @@ import {
   bulkChangePageTags,
   bulkDeletePages,
   bulkUpdatePages,
+  deletePage,
+  duplicatePage,
   fetchPagesDataset,
   groupPages,
   type BulkResult,
@@ -32,6 +36,7 @@ import {
 import { PostStatusBadge, SeoScoreIndicator } from '../../components/posts/badges.js'
 import { PageTagChip, PageTagsCell } from '../../components/pages/tag-badges.js'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
+import { RowActionButton, RowActions } from '../../components/ui/RowActions.js'
 
 /**
  * Pages management surface — table with a tag-chip filter bar, group-by,
@@ -70,6 +75,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
   const [error, setError] = useState<string | null>(null)
   const [refreshToken, setRefreshToken] = useState(0)
   const [pendingDelete, setPendingDelete] = useState(false)
+  const [rowDelete, setRowDelete] = useState<Page | null>(null)
 
   const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
   useEffect(() => {
@@ -284,16 +290,69 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     afterBulk()
   }
 
+  // ─── Row actions ───────────────────────────────────────────────────
+
+  const runDuplicate = async (p: Page) => {
+    const promise = duplicatePage(p.id).then((r) => {
+      if (r.error) throw new Error(r.error)
+      return r
+    })
+    toast.promise(promise, {
+      loading: `Duplicating "${p.title}"…`,
+      success: `"${p.title}" duplicated`,
+      error: (e: Error) => e.message || 'Duplicate failed',
+    })
+    try {
+      await promise
+      setRefreshToken((t) => t + 1)
+    } catch {
+      /* surfaced via toast.promise */
+    }
+  }
+
+  const runRowDelete = async (p: Page) => {
+    const promise = deletePage(p.id).then((r) => {
+      if (r.error) throw new Error(r.error)
+    })
+    toast.promise(promise, {
+      loading: `Deleting "${p.title}"…`,
+      success: `"${p.title}" moved to trash`,
+      error: (e: Error) => e.message || 'Delete failed',
+    })
+    try {
+      await promise
+      setSelected((s) => {
+        const next = new Set(s)
+        next.delete(p.id)
+        return next
+      })
+      setRefreshToken((t) => t + 1)
+    } catch {
+      /* surfaced via toast.promise */
+    }
+  }
+
   // ─── Render ────────────────────────────────────────────────────────
 
   return (
     <div className="flex h-full flex-col gap-4 p-4 sm:p-6">
-      {/* Header */}
-      <div className="flex flex-col gap-1">
-        <h1 className="text-foreground text-xl font-medium tracking-tight sm:text-2xl">Pages</h1>
-        <p className="text-muted-foreground text-sm">
-          {grandTotal} page{grandTotal === 1 ? '' : 's'} · organized by tags
-        </p>
+      {/* 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">
+        <div className="flex flex-col gap-1">
+          <h1 className="text-foreground">Pages</h1>
+          <p className="text-muted-foreground text-sm">
+            {grandTotal} page{grandTotal === 1 ? '' : 's'} · organized by tags
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => onNavigate('/pages/new')}
+          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 page
+        </button>
       </div>
 
       {/* Controls row */}
@@ -410,6 +469,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
               <col style={{ width: '120px' }} />
               <col style={{ width: '130px' }} />
               <col style={{ width: '80px' }} />
+              <col style={{ width: '110px' }} />
             </colgroup>
             <thead className="border-border bg-muted/40 border-b">
               <tr className="text-muted-foreground text-xs">
@@ -474,13 +534,16 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                     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 && error && (
                 <tr>
-                  <td colSpan={7} className="px-3 py-12 text-center">
+                  <td colSpan={8} className="px-3 py-12 text-center">
                     <div className="text-foreground mb-2 text-sm font-medium">{error}</div>
                     <button
                       onClick={() => setRefreshToken((t) => t + 1)}
@@ -516,6 +579,8 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
                         resolveTag={(slug) => tagBySlug.get(slug)}
                         onSelect={() => toggleOne(p.id)}
                         onOpen={() => onNavigate(`/pages/${p.id}/edit`)}
+                        onDuplicate={() => void runDuplicate(p)}
+                        onDelete={() => setRowDelete(p)}
                       />
                     ))}
                   </GroupBlock>
@@ -536,6 +601,19 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
         )}
       </div>
 
+      <ConfirmDialog
+        open={rowDelete !== null}
+        title={`Delete "${rowDelete?.title ?? ''}"?`}
+        description="The page moves to trash and can be restored for 30 days."
+        confirmLabel="Delete"
+        destructive
+        onClose={() => setRowDelete(null)}
+        onConfirm={() => {
+          if (rowDelete) void runRowDelete(rowDelete)
+          setRowDelete(null)
+        }}
+      />
+
       <ConfirmDialog
         open={pendingDelete}
         title={`Delete ${deletablePages.length} page${deletablePages.length === 1 ? '' : 's'}?`}
@@ -636,7 +714,7 @@ function GroupBlock({
     <>
       {showHeader && (
         <tr className="bg-muted/30 border-border border-b">
-          <td colSpan={7} className="px-3 py-2">
+          <td colSpan={8} className="px-3 py-2">
             <span className="text-foreground inline-flex items-center gap-2 text-xs font-medium tracking-wider uppercase">
               {color && <span aria-hidden className={`h-2 w-2 rounded-full ${dotFor(color)}`} />}
               {label}
@@ -779,12 +857,16 @@ function PageRow({
   resolveTag,
   onSelect,
   onOpen,
+  onDuplicate,
+  onDelete,
 }: {
   page: Page
   selected: boolean
   resolveTag: (slug: string) => { name: string; color: string | null } | undefined
   onSelect: () => void
   onOpen: () => void
+  onDuplicate: () => void
+  onDelete: () => void
 }) {
   return (
     <tr
@@ -835,6 +917,29 @@ function PageRow({
       <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}>
+            <PenLine size={13} aria-hidden />
+          </RowActionButton>
+          <RowActionButton
+            aria-label={`Duplicate "${page.title}"`}
+            title="Duplicate"
+            onClick={onDuplicate}
+          >
+            <Copy size={12} aria-hidden />
+          </RowActionButton>
+          <RowActionButton
+            aria-label={`Delete "${page.title}"`}
+            title={page.isHomepage ? 'The homepage cannot be deleted' : 'Delete'}
+            danger
+            disabled={page.isHomepage}
+            onClick={onDelete}
+          >
+            <Trash2 size={12} aria-hidden />
+          </RowActionButton>
+        </RowActions>
+      </td>
     </tr>
   )
 }
@@ -844,7 +949,7 @@ function LoadingRows() {
     <>
       {Array.from({ length: 8 }).map((_, i) => (
         <tr key={i} className="border-border border-b last:border-b-0">
-          {Array.from({ length: 7 }).map((__, j) => (
+          {Array.from({ length: 8 }).map((__, j) => (
             <td key={j} className="px-3 py-3">
               <div className="bg-muted h-4 w-full animate-pulse rounded" />
             </td>
@@ -866,7 +971,7 @@ function EmptyRow({
 }) {
   return (
     <tr>
-      <td colSpan={7} className="px-3 py-16 text-center">
+      <td colSpan={8} className="px-3 py-16 text-center">
         <div className="text-foreground mb-2 text-sm font-medium">
           {filtersActive ? 'No pages match your filters' : 'No pages yet'}
         </div>

package/src/views/Pages.tsx

@@ -276,7 +276,7 @@ export function Pages({ onNavigate }: PagesProps) {
             <FolderInput className="text-muted-foreground h-5 w-5" />
           </button>
           <div>
-            <h1 className="text-foreground text-xl font-medium sm:text-2xl">Pages</h1>
+            <h1 className="text-foreground">Pages</h1>
             <p className="text-muted-foreground text-sm">
               {totalCount} page{totalCount !== 1 ? 's' : ''}
             </p>

package/src/views/Posts/NewPostPicker.tsx

@@ -62,9 +62,7 @@ export function NewPostPicker({ onNavigate }: { onNavigate: (path: string) => vo
       </button>
 
       <div className="flex flex-col gap-1">
-        <h1 className="text-foreground text-xl font-medium tracking-tight sm:text-2xl">
-          Choose a Post Type
-        </h1>
+        <h1 className="text-foreground">Choose a Post Type</h1>
         <p className="text-muted-foreground text-sm">
           Pick which content model you want to use for this post. Each type has its own fields, URL
           base, and SEO defaults.

package/src/views/Posts/NewPostTypeInstructions.tsx

@@ -114,9 +114,7 @@ export function NewPostTypeInstructions({ onNavigate }: { onNavigate: (p: string
       </button>
 
       <div className="flex flex-col gap-1">
-        <h1 className="text-foreground text-xl font-medium tracking-tight sm:text-2xl">
-          Add a Post Type
-        </h1>
+        <h1 className="text-foreground">Add a Post Type</h1>
         <p className="text-muted-foreground text-sm">
           Post Types are content models defined in{' '}
           <code className="font-mono">actuate.config.ts</code>. Start from a quick template or fill

package/src/views/Posts/PostTypesView.tsx

@@ -61,9 +61,7 @@ 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 text-xl font-medium tracking-tight sm:text-2xl">
-          Post Types
-        </h1>
+        <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>

package/src/views/Posts/PostsListView.tsx

@@ -6,7 +6,10 @@ import {
   ChevronLeft,
   ChevronRight,
   ChevronUp,
+  Copy,
   Loader2,
+  PenLine,
+  Plus,
   Search,
   Settings,
   Trash2,
@@ -16,6 +19,8 @@ import { toast } from 'sonner'
 import {
   bulkDeletePosts,
   bulkUpdatePosts,
+  deletePost,
+  duplicatePost,
   fetchPosts,
   type Post,
   type PostStatus,
@@ -29,6 +34,7 @@ import {
   paletteFor,
 } from '../../components/posts/badges.js'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
+import { RowActionButton, RowActions } from '../../components/ui/RowActions.js'
 
 /**
  * All Posts management surface — table with type tabs, controls row,
@@ -69,6 +75,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
   const [error, setError] = useState<string | null>(null)
   const [refreshToken, setRefreshToken] = useState(0)
   const [pendingBulk, setPendingBulk] = useState<null | 'delete' | 'publish' | 'draft'>(null)
+  const [rowDelete, setRowDelete] = useState<Post | null>(null)
 
   const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
   useEffect(() => {
@@ -132,6 +139,14 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
     () => (data?.types ?? []).reduce((sum, t) => sum + t.postCount, 0),
     [data?.types],
   )
+
+  // Header CTA target: one Post Type → its editor, several → the picker,
+  // none → the Post Type setup instructions.
+  const newPostPath = useMemo(() => {
+    const typeList = data?.types ?? []
+    if (typeList.length === 1) return `/${typeList[0]!.slug}/new`
+    return typeList.length > 1 ? '/posts/new' : '/posts/types/new'
+  }, [data?.types])
   const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
   const posts = data?.posts ?? []
   const types = data?.types ?? []
@@ -210,16 +225,69 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
     setRefreshToken((t) => t + 1)
   }
 
+  // ─── Row actions ──────────────────────────────────────────────────
+
+  const runDuplicate = async (p: Post) => {
+    const promise = duplicatePost(p.postTypeId, p.id).then((r) => {
+      if (r.error) throw new Error(r.error)
+      return r
+    })
+    toast.promise(promise, {
+      loading: `Duplicating "${p.title}"…`,
+      success: `"${p.title}" duplicated`,
+      error: (e: Error) => e.message || 'Duplicate failed',
+    })
+    try {
+      await promise
+      setRefreshToken((t) => t + 1)
+    } catch {
+      /* surfaced via toast.promise */
+    }
+  }
+
+  const runRowDelete = async (p: Post) => {
+    const promise = deletePost(p.postTypeId, p.id).then((r) => {
+      if (r.error) throw new Error(r.error)
+    })
+    toast.promise(promise, {
+      loading: `Deleting "${p.title}"…`,
+      success: `"${p.title}" moved to trash`,
+      error: (e: Error) => e.message || 'Delete failed',
+    })
+    try {
+      await promise
+      setSelected((s) => {
+        const next = new Set(s)
+        next.delete(p.id)
+        return next
+      })
+      setRefreshToken((t) => t + 1)
+    } catch {
+      /* surfaced via toast.promise */
+    }
+  }
+
   // ─── Render ───────────────────────────────────────────────────────
 
   return (
     <div className="flex h-full flex-col gap-4 p-4 sm:p-6">
-      {/* Header */}
-      <div className="flex flex-col gap-1">
-        <h1 className="text-foreground text-xl font-medium tracking-tight sm:text-2xl">Posts</h1>
-        <p className="text-muted-foreground text-sm">
-          {totalAll} total post{totalAll === 1 ? '' : 's'} across all types
-        </p>
+      {/* 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">
+        <div className="flex flex-col gap-1">
+          <h1 className="text-foreground">Posts</h1>
+          <p className="text-muted-foreground text-sm">
+            {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>
       </div>
 
       {/* Type tabs */}
@@ -269,6 +337,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
               <col style={{ width: '130px' }} />
               <col style={{ width: '120px' }} />
               <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">
@@ -335,13 +404,16 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     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 && posts.length === 0 && <LoadingRows />}
               {!loading && error && (
                 <tr>
-                  <td colSpan={7} className="px-3 py-12 text-center">
+                  <td colSpan={8} className="px-3 py-12 text-center">
                     <div className="text-foreground mb-2 text-sm font-medium">{error}</div>
                     <button
                       onClick={() => setRefreshToken((t) => t + 1)}
@@ -368,6 +440,8 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     selected={selected.has(p.id)}
                     onSelect={() => toggleOne(p.id)}
                     onOpen={() => onNavigate(`/posts/${p.postTypeId}/${p.id}/edit`)}
+                    onDuplicate={() => void runDuplicate(p)}
+                    onDelete={() => setRowDelete(p)}
                   />
                 ))}
             </tbody>
@@ -384,6 +458,19 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
         />
       </div>
 
+      <ConfirmDialog
+        open={rowDelete !== null}
+        title={`Delete "${rowDelete?.title ?? ''}"?`}
+        description="The post moves to trash and can be restored for 30 days."
+        confirmLabel="Delete"
+        destructive
+        onClose={() => setRowDelete(null)}
+        onConfirm={() => {
+          if (rowDelete) void runRowDelete(rowDelete)
+          setRowDelete(null)
+        }}
+      />
+
       <ConfirmDialog
         open={pendingBulk === 'delete'}
         title={`Delete ${selected.size} post${selected.size === 1 ? '' : 's'}?`}
@@ -669,11 +756,15 @@ function PostRow({
   selected,
   onSelect,
   onOpen,
+  onDuplicate,
+  onDelete,
 }: {
   post: Post
   selected: boolean
   onSelect: () => void
   onOpen: () => void
+  onDuplicate: () => void
+  onDelete: () => void
 }) {
   const p = paletteFor(post.postTypeAccentColor)
   return (
@@ -693,7 +784,19 @@ function PostRow({
       </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={`block h-9 w-9 shrink-0 rounded-md ${p.bg.split(' ')[0]}`} />
+          {post.imageUrl ? (
+            <img
+              src={post.imageUrl}
+              alt=""
+              loading="lazy"
+              className="block h-9 w-9 shrink-0 rounded-md object-cover"
+            />
+          ) : (
+            <span
+              aria-hidden
+              className={`block h-9 w-9 shrink-0 rounded-md ${p.bg.split(' ')[0]}`}
+            />
+          )}
           <span className="min-w-0">
             <span className="text-foreground group-hover:text-primary block truncate text-sm font-medium">
               {post.title}
@@ -727,6 +830,28 @@ function PostRow({
       <td className="px-3 py-3">
         <SeoScoreIndicator score={post.seoScore} />
       </td>
+      <td className="px-3 py-3">
+        <RowActions>
+          <RowActionButton aria-label={`Edit "${post.title}"`} title="Edit" onClick={onOpen}>
+            <PenLine size={13} aria-hidden />
+          </RowActionButton>
+          <RowActionButton
+            aria-label={`Duplicate "${post.title}"`}
+            title="Duplicate"
+            onClick={onDuplicate}
+          >
+            <Copy size={12} aria-hidden />
+          </RowActionButton>
+          <RowActionButton
+            aria-label={`Delete "${post.title}"`}
+            title="Delete"
+            danger
+            onClick={onDelete}
+          >
+            <Trash2 size={12} aria-hidden />
+          </RowActionButton>
+        </RowActions>
+      </td>
     </tr>
   )
 }
@@ -737,7 +862,7 @@ function LoadingRows() {
     <>
       {rows.map((_, i) => (
         <tr key={i} className="border-border border-b last:border-b-0">
-          {Array.from({ length: 7 }).map((__, j) => (
+          {Array.from({ length: 8 }).map((__, j) => (
             <td key={j} className="px-3 py-3">
               <div className="bg-muted h-4 w-full animate-pulse rounded" />
             </td>
@@ -759,7 +884,7 @@ function EmptyRow({
 }) {
   return (
     <tr>
-      <td colSpan={7} className="px-3 py-16 text-center">
+      <td colSpan={8} className="px-3 py-16 text-center">
         <div className="text-foreground mb-2 text-sm font-medium">
           {filtersActive ? 'No posts match the current filters.' : 'No posts yet.'}
         </div>

package/src/views/Profile.tsx

@@ -21,7 +21,7 @@ export function Profile({ session }: ProfileProps = {}) {
   return (
     <div className="p-3 pr-6 sm:p-4 sm:pr-8">
       <div className="mb-4">
-        <h1 className="text-foreground mb-1 text-2xl font-medium">Your profile</h1>
+        <h1 className="text-foreground mb-1">Your profile</h1>
         <p className="text-muted-foreground text-sm">
           Manage your account details and sign-in security.
         </p>

package/src/views/Redirects.tsx

@@ -143,7 +143,7 @@ export function Redirects({ onNavigate }: RedirectsProps) {
 
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <h1 className="text-foreground mb-1 text-xl font-medium sm:text-2xl">Redirects</h1>
+          <h1 className="text-foreground mb-1">Redirects</h1>
           <p className="text-muted-foreground text-sm">
             {filteredAndSorted.length} total redirects
           </p>

package/src/views/SEO.tsx

@@ -138,7 +138,7 @@ export function SEO({ onNavigate, initialTab = 'overview' }: SEOProps) {
     <div className="space-y-6 p-6">
       <header className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
-          <h1 className="text-foreground text-2xl font-medium">SEO Operations Center</h1>
+          <h1 className="text-foreground">SEO Operations Center</h1>
           <p className="text-muted-foreground mt-1 text-sm">
             Monitor, fix, and automate SEO across your content, redirects, and technical setup.
           </p>

package/src/views/ScriptTagEditor.tsx

@@ -135,9 +135,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
           <ArrowLeft className="h-4 w-4" />
           Back to Script Tags
         </button>
-        <h1 className="text-foreground text-2xl font-medium">
-          {isNew ? 'New Script Tag' : 'Edit Script Tag'}
-        </h1>
+        <h1 className="text-foreground">{isNew ? 'New Script Tag' : 'Edit Script Tag'}</h1>
       </div>
 
       <div className="border-warning/30 bg-warning/10 mb-6 rounded-lg border p-3">

package/src/views/ScriptTags.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react'
 import { Code2, Plus, Loader2, AlertTriangle } from 'lucide-react'
 import { toast } from 'sonner'
 import { EnabledSwitch } from '../components/EnabledSwitch.js'
+import { StatPill } from '../components/ui/StatPill.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 
@@ -123,10 +124,25 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
 
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <h1 className="text-foreground mb-1 text-2xl font-medium">Script Tags</h1>
+          <h1 className="text-foreground mb-1">Script Tags</h1>
           <p className="text-muted-foreground text-sm">
             Manage tracking codes, analytics, and custom scripts injected into your site
           </p>
+          {tags.length > 0 && (
+            <div className="mt-3 flex flex-wrap gap-1.5">
+              <StatPill value={tags.length} label="Total" />
+              <StatPill
+                value={tags.filter((t) => t.enabled).length}
+                label="Active"
+                valueClassName="text-[var(--suc)]"
+              />
+              <StatPill
+                value={tags.filter((t) => !t.enabled).length}
+                label="Inactive"
+                valueClassName="text-[var(--muted)]"
+              />
+            </div>
+          )}
         </div>
         <button
           type="button"

package/src/views/Settings.tsx

@@ -179,7 +179,7 @@ export function Settings({
       )}
 
       <div className="mb-4">
-        <h1 className="text-foreground mb-1 text-2xl font-medium">Settings</h1>
+        <h1 className="text-foreground mb-1">Settings</h1>
         <p className="text-muted-foreground text-sm">Manage your CMS configuration</p>
       </div>
 

package/src/views/Users.tsx

@@ -28,6 +28,7 @@ import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 import { Button } from '../components/ui/Button.js'
 import { EmptyState } from '../components/ui/EmptyState.js'
+import { FilterPill } from '../components/ui/FilterPill.js'
 import { Skeleton } from '../components/ui/Skeleton.js'
 import { ConfirmDialog } from '../components/ui/ConfirmDialog.js'
 import { UserDetailDrawer } from './users/UserDetailDrawer.js'
@@ -964,24 +965,11 @@ export function Users({ embedded = false }: UsersProps = {}) {
           role="group"
           aria-label="Filter by role"
         >
-          {ROLE_PILLS.map((pill) => {
-            const active = roleFilter === pill
-            return (
-              <button
-                key={pill}
-                type="button"
-                onClick={() => setRoleFilter(pill)}
-                aria-pressed={active}
-                className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
-                  active
-                    ? 'bg-brand text-brand-foreground'
-                    : 'bg-muted text-muted-foreground hover:bg-accent'
-                }`}
-              >
-                {pill}
-              </button>
-            )
-          })}
+          {ROLE_PILLS.map((pill) => (
+            <FilterPill key={pill} active={roleFilter === pill} onClick={() => setRoleFilter(pill)}>
+              {pill}
+            </FilterPill>
+          ))}
         </div>
 
         {/* Table / states */}