@prenta/admin 2.6.1 → 2.7.0

package/src/views/Dashboard.tsx

@@ -9,10 +9,12 @@
  * (the design uses plain progress bars + colored dots), keeping the bundle
  * and TTI cost low.
  *
- * Responsive layout:
- *   <  640px (mobile):  stat cards 2-col, main grid stacks, quick actions scroll-x
- *   640-1023 (tablet):  stat cards 3-col, main grid stacks
- *   >= 1024 (desktop):  stat cards 5-col, main grid is `1fr 320px`
+ * Responsive layout (SHELL.md §8, cms-layouts.css):
+ *   ≤ 768px (mobile):   stat cards 2-col (an odd last card spans both), main
+ *                       grid stacks, quick actions scroll-x
+ *   769–1024 (tablet):  stat cards 2+3, main grid stacks
+ *   1025–1399:          stat cards 2+3, main grid is `1fr 320px`
+ *   ≥ 1400:             stat cards in one row
  */
 
 import { useEffect, useMemo, useState } from 'react'
@@ -46,6 +48,7 @@ import { AuthorAvatar } from '../components/ui/AuthorAvatar.js'
 import { PanelSection, PANEL_LIST_ROW_CLASS } from '../components/ui/PanelSection.js'
 import { OnboardingBlock, shouldShowOnboarding } from './dashboard/OnboardingBlock.js'
 import type { OnboardingSignals } from './dashboard/OnboardingBlock.js'
+import { kpiCardSpan, kpiGridClass } from './dashboard/kpi-grid.js'
 
 interface DashboardStats {
   totalDocuments: number
@@ -197,7 +200,7 @@ function statusBadge(status: string): {
     case 'DRAFT':
       return { label: 'Draft', cls: 'bg-muted text-muted-foreground' }
     case 'SCHEDULED':
-      return { label: 'Scheduled', cls: 'bg-warning/10 text-warning' }
+      return { label: 'Scheduled', cls: 'bg-warn-l text-warning' }
     case 'IN_REVIEW':
       return { label: 'In Review', cls: 'bg-info/10 text-info' }
     default:
@@ -568,14 +571,14 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       )}
 
       {error && exhausted && (
-        <div className="border-warning/30 bg-warning/10 flex items-center gap-3 rounded-lg border p-4">
+        <div className="border-warning/30 bg-warn-l flex items-center gap-3 rounded-lg border p-4">
           <AlertTriangle className="text-warning h-5 w-5 shrink-0" />
           <span className="text-warning flex-1 text-sm">
             Some dashboard data may be unavailable.
           </span>
           <button
             onClick={refetch}
-            className="border-warning/40 text-warning hover:bg-warning/10 rounded-lg border px-3 py-1 text-sm transition-colors"
+            className="border-warning/40 text-warning hover:bg-warn-l rounded-lg border px-3 py-1 text-sm transition-colors"
           >
             Retry
           </button>
@@ -603,10 +606,14 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
             )}
           </p>
         </div>
-        <div className="flex items-center gap-2">
+        {/* Header actions collapse to icons at tablet and mobile; New Post
+            floats above the tab bar on mobile. */}
+        <div data-header-actions="" className="flex items-center gap-2">
           <button
             type="button"
             onClick={() => nav(heroNewPostPath)}
+            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 />
@@ -617,6 +624,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
               href={siteUrl}
               target="_blank"
               rel="noopener noreferrer"
+              data-variant="secondary"
               className="border-border bg-card text-foreground hover:bg-accent inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors"
             >
               <ExternalLink className="h-3.5 w-3.5" aria-hidden />
@@ -641,8 +649,9 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       </div>
 
       {/* Stat cards ─────────────────────────────────────────────────── */}
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
-        {statCards.map((card) => {
+      <div data-kpi-grid="" className={kpiGridClass(statCards.length)}>
+        {statCards.map((card, index) => {
+          const span = kpiCardSpan(index, statCards.length)
           const Inner = (
             <>
               <div
@@ -674,12 +683,15 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
               key={card.label}
               type="button"
               onClick={() => nav(card.href!)}
-              className="bg-card border-border rounded-xl border p-4 text-left shadow-sm transition-shadow hover:shadow-md"
+              className={`bg-card border-border rounded-xl border p-4 text-left shadow-sm transition-shadow hover:shadow-md ${span}`}
             >
               {Inner}
             </button>
           ) : (
-            <div key={card.label} className="bg-card border-border rounded-xl border p-4 shadow-sm">
+            <div
+              key={card.label}
+              className={`bg-card border-border rounded-xl border p-4 shadow-sm ${span}`}
+            >
               {Inner}
             </div>
           )
@@ -690,7 +702,8 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
       {showOnboarding ? (
         <OnboardingBlock signals={onboardingSignals} onNavigate={onNavigate} />
       ) : (
-        <div className="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_320px]">
+        // One column up to 1024px (cms-layouts.css `.grid2`, tablet).
+        <div className="not-narrow:grid-cols-[minmax(0,1fr)_320px] grid grid-cols-1 gap-4">
           {/* Recent Activity ───────────────────────────────────────── */}
           <PanelSection
             title="Recent Activity"

package/src/views/DocumentEdit.tsx

@@ -19,6 +19,8 @@ import { FieldRenderer } from '../fields/FieldRenderer.js'
 import { RelationshipField } from '../fields/RelationshipField.js'
 import { Button } from '../components/ui/Button.js'
 import { Badge } from '../components/ui/Badge.js'
+import { Breadcrumb } from '../components/ui/Breadcrumb.js'
+import { PageHeader } from '../components/ui/PageHeader.js'
 import { LivePreview } from '../components/LivePreview.js'
 import { VersionHistory } from '../components/VersionHistory.js'
 import { PresenceIndicator } from '../components/PresenceIndicator.js'
@@ -35,6 +37,11 @@ export interface DocumentEditProps {
   documentId?: string
   config: any
   onNavigate?: (path: string) => void
+  /**
+   * The list this screen was reached from (`/<slug>` or `/collections/<slug>`).
+   * Cancel and the breadcrumb go back to it; a new document opens under it.
+   */
+  listPath?: string
 }
 
 export function DocumentEdit({
@@ -42,6 +49,7 @@ export function DocumentEdit({
   documentId,
   config,
   onNavigate,
+  listPath = `/${collectionSlug}`,
 }: DocumentEditProps) {
   const isNew = !documentId
   const [values, setValues] = useState<Record<string, any>>({})
@@ -94,6 +102,10 @@ export function DocumentEdit({
   const displayTitle = isNew
     ? `New ${collection?.labels?.singular ?? collectionSlug}`
     : `Edit ${values[useAsTitleField] ?? 'Document'}`
+  const collectionPlural: string = collection?.labels?.plural ?? collectionSlug
+  const crumbTitle = isNew
+    ? `New ${collection?.labels?.singular ?? collectionSlug}`
+    : String(values[useAsTitleField] || 'Untitled')
 
   const isDirty =
     JSON.stringify(values) !== JSON.stringify(initialValues) ||
@@ -109,7 +121,29 @@ export function DocumentEdit({
 
   // Warn before discarding unsaved changes on client-side navigation (Cancel,
   // sidebar/breadcrumb links) and on browser unload/refresh.
-  useNavigationBlocker(isDirty)
+  const releaseNavigationBlock = useNavigationBlocker(isDirty)
+
+  // While a new document is being created its fields are read-only: the editor
+  // moves to the created document afterwards, so anything typed during the
+  // POST would be dropped without a prompt. Focus goes back to the field it
+  // was in if the create fails.
+  const fieldsRef = useRef<HTMLDivElement>(null)
+  const creating = isNew && saving
+  useEffect(() => {
+    const el = fieldsRef.current as (HTMLDivElement & { inert?: boolean }) | null
+    if (!el || !creating) return
+    const focused = el.contains(document.activeElement)
+      ? (document.activeElement as HTMLElement)
+      : null
+    el.inert = true
+    return () => {
+      el.inert = false
+      // Only put focus back if nothing else has it (the inert fields dropped
+      // it); don't pull it from wherever the user has moved since.
+      const active = document.activeElement
+      if (focused?.isConnected && (!active || active === document.body)) focused.focus()
+    }
+  }, [creating])
 
   const SEO_FIELDS: (keyof SEOData)[] = [
     'metaTitle',
@@ -195,7 +229,10 @@ export function DocumentEdit({
           setInitialSeoData(seoData)
           setInitialLayoutAssignments(layoutAssignments)
           if (newId && onNavigate) {
-            onNavigate(`/${collectionSlug}/${newId}`)
+            // Saved: the baseline update above lands on the next render, after
+            // this navigation, so clear the unsaved-changes guard first.
+            releaseNavigationBlock()
+            onNavigate(`${listPath}/${newId}`)
           }
         }
       } else {
@@ -277,7 +314,7 @@ export function DocumentEdit({
       toast.success('Document duplicated')
       const newId = res.data?.id
       if (newId && onNavigate) {
-        onNavigate(`/${collectionSlug}/${newId}`)
+        onNavigate(`${listPath}/${newId}`)
       }
     }
   }
@@ -300,7 +337,7 @@ export function DocumentEdit({
       ? 'bg-success/10 text-success'
       : docStatus === 'SCHEDULED'
         ? 'bg-info/10 text-info'
-        : 'bg-warning/10 text-warning'
+        : 'bg-warn-l text-warning'
 
   if (loading) {
     return (
@@ -312,56 +349,70 @@ export function DocumentEdit({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <h1 className="text-2xl font-medium">{displayTitle}</h1>
-          <span
-            className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${statusColor}`}
-          >
-            {docStatus}
-          </span>
-          {documentId && <PresenceIndicator documentId={documentId} />}
-          {isDirty && <span className="text-warning text-xs font-medium">Unsaved changes</span>}
-        </div>
-        <div className="flex items-center gap-2">
-          <button
-            onClick={() => setShowPreview((v) => !v)}
-            className="hover:bg-muted inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
-            title={showPreview ? 'Hide preview' : 'Show preview'}
-          >
-            {showPreview ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-            Preview
-          </button>
-          {!isNew && (
-            <>
-              <button
-                onClick={() => setShowShareLink(true)}
-                className="hover:bg-muted inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
-                title="Share a signed preview link for the current draft"
-              >
-                <Share2 className="h-4 w-4" />
-                Share preview
-              </button>
-              <button
-                onClick={() => setShowVersions(true)}
-                className="hover:bg-muted inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
-                title="Version history"
-              >
-                <Clock className="h-4 w-4" />
-                History
-              </button>
-              <button
-                onClick={handleDuplicate}
-                className="hover:bg-muted inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
-                title="Duplicate this document"
-              >
-                <Copy className="h-4 w-4" />
-                Duplicate
-              </button>
-            </>
-          )}
-        </div>
-      </div>
+      <PageHeader
+        flush
+        title={displayTitle}
+        breadcrumb={
+          <Breadcrumb
+            items={[
+              { label: 'Dashboard', path: '/' },
+              { label: collectionPlural, path: listPath },
+              { label: crumbTitle },
+            ]}
+          />
+        }
+        subtitle={
+          <>
+            <span
+              className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${statusColor}`}
+            >
+              {docStatus}
+            </span>
+            {documentId && <PresenceIndicator documentId={documentId} />}
+            {isDirty && <span className="text-warning text-xs font-medium">Unsaved changes</span>}
+          </>
+        }
+        actions={
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setShowPreview((v) => !v)}
+              className="hover:bg-muted inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+              title={showPreview ? 'Hide preview' : 'Show preview'}
+            >
+              {showPreview ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              Preview
+            </button>
+            {!isNew && (
+              <>
+                <button
+                  onClick={() => setShowShareLink(true)}
+                  className="hover:bg-muted inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+                  title="Share a signed preview link for the current draft"
+                >
+                  <Share2 className="h-4 w-4" />
+                  Share preview
+                </button>
+                <button
+                  onClick={() => setShowVersions(true)}
+                  className="hover:bg-muted inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+                  title="Version history"
+                >
+                  <Clock className="h-4 w-4" />
+                  History
+                </button>
+                <button
+                  onClick={handleDuplicate}
+                  className="hover:bg-muted inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+                  title="Duplicate this document"
+                >
+                  <Copy className="h-4 w-4" />
+                  Duplicate
+                </button>
+              </>
+            )}
+          </div>
+        }
+      />
 
       <div className={showPreview ? 'grid grid-cols-2 gap-6' : ''}>
         <div className="space-y-6">
@@ -378,7 +429,11 @@ export function DocumentEdit({
               </p>
             </div>
           ) : (
-            <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <div
+              ref={fieldsRef}
+              aria-busy={creating || undefined}
+              className="grid grid-cols-1 gap-6 lg:grid-cols-3"
+            >
               <div className="space-y-6 lg:col-span-2">
                 {mainFields.map((field: any) => (
                   <FieldRenderer
@@ -528,7 +583,7 @@ export function DocumentEdit({
           )}
 
           <div className="sticky bottom-0 flex items-center justify-end gap-3 border-t border-[var(--border)] bg-[var(--background)] px-4 py-3">
-            <Button variant="secondary" onClick={() => onNavigate?.(`/${collectionSlug}`)}>
+            <Button variant="secondary" onClick={() => onNavigate?.(listPath)}>
               Cancel
             </Button>
             <Button variant="primary" loading={saving} onClick={handleSave} data-shortcut="save">

package/src/views/FormDeliveries.tsx

@@ -8,6 +8,8 @@
 import { useCallback, useEffect, useState } from 'react'
 import { AlertTriangle, RefreshCw, RotateCcw } from 'lucide-react'
 import { toast } from 'sonner'
+import { Breadcrumb } from '../components/ui/Breadcrumb.js'
+import { PageHeader } from '../components/ui/PageHeader.js'
 import {
   fetchFormDeliveries,
   retryFormDelivery,
@@ -104,23 +106,34 @@ export function FormDeliveries({ onNavigate }: FormDeliveriesProps) {
     // Fill the shell's <main> and scroll the table card internally so the
     // pagination footer stays reachable (#736 sibling).
     <div className="flex h-full min-h-0 flex-col gap-4 p-6">
-      <div className="flex shrink-0 items-start justify-between gap-4">
-        <div>
-          <h1 className="text-foreground text-2xl font-medium">Deliveries</h1>
-          <p className="text-muted-foreground text-sm">
-            Failed or retrying notification and webhook deliveries. Leads stay saved — retry here
-            without re-submitting the form.
-          </p>
-        </div>
-        <button
-          type="button"
-          onClick={() => void load()}
-          className="border-border bg-card text-foreground hover:bg-muted inline-flex h-10 items-center gap-2 rounded-md border px-3 text-sm font-medium"
-          aria-label="Refresh deliveries"
-        >
-          <RefreshCw size={16} />
-          Refresh
-        </button>
+      {/* Title = sidebar label ("SMTP Log", SHELL.md §2). */}
+      <div className="shrink-0">
+        <PageHeader
+          flush
+          title="SMTP Log"
+          subtitle="Failed or retrying notification and webhook deliveries. Leads stay saved — retry here without re-submitting the form."
+          breadcrumb={
+            <Breadcrumb
+              items={[
+                { label: 'Dashboard', path: '/' },
+                { label: 'Forms', path: '/forms' },
+                { label: 'SMTP Log' },
+              ]}
+            />
+          }
+          actions={
+            <button
+              type="button"
+              onClick={() => void load()}
+              data-variant="secondary"
+              className="border-border bg-card text-foreground hover:bg-muted inline-flex h-10 items-center gap-2 rounded-md border px-3 text-sm font-medium"
+              aria-label="Refresh deliveries"
+            >
+              <RefreshCw size={16} aria-hidden />
+              Refresh
+            </button>
+          }
+        />
       </div>
 
       {loading ? (

package/src/views/FormEntries.tsx

@@ -26,14 +26,16 @@ import { emitFormsChanged, onFormsChanged } from '../lib/forms-events.js'
 import { FormEntryDetailPane } from '../components/forms/FormEntryDetailPane.js'
 import { EntriesTable } from '../components/forms/EntriesTable.js'
 import { ExportMenu } from '../components/forms/ExportMenu.js'
+import { Breadcrumb } from '../components/ui/Breadcrumb.js'
 import { ConfirmDialog } from '../components/ui/ConfirmDialog.js'
+import { PageHeader } from '../components/ui/PageHeader.js'
 import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
 import {
   FormsEmptyState,
   FormsErrorState,
   FormsLoading,
   FormsPagination,
-  SummaryChip,
+  EntryCountChips,
 } from '../components/forms/primitives.js'
 
 export interface FormEntriesProps {
@@ -202,27 +204,33 @@ export function FormEntries({ onNavigate }: FormEntriesProps) {
 
   return (
     <div className="space-y-5 p-6">
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-        <div>
-          <h1 className="text-foreground">All Entries</h1>
-          <p className="text-muted-foreground mt-1 text-sm">
-            {total} {total === 1 ? 'submission' : 'submissions'} across your forms
-          </p>
-        </div>
-        <ExportMenu formId={scopedFormId} disabled={counts !== null && counts.total === 0} />
-      </div>
+      <PageHeader
+        flush
+        title="All Entries"
+        subtitle={`${total} ${total === 1 ? 'submission' : 'submissions'} across your forms`}
+        breadcrumb={
+          <Breadcrumb
+            items={[
+              { label: 'Dashboard', path: '/' },
+              { label: 'Forms', path: '/forms' },
+              { label: 'All Entries' },
+            ]}
+          />
+        }
+        actions={
+          <ExportMenu formId={scopedFormId} disabled={counts !== null && counts.total === 0} />
+        }
+      />
 
       {counts && (
-        <div className="flex flex-wrap gap-2">
-          <SummaryChip value={counts.total} label="total" />
-          <SummaryChip
-            value={counts.unread}
-            label="unread"
-            tone={counts.unread > 0 ? 'destructive' : 'neutral'}
-          />
-          <SummaryChip value={counts.starred} label="starred" tone="warning" />
-          <SummaryChip value={counts.thisWeek} label="this week" />
-        </div>
+        <EntryCountChips
+          counts={counts}
+          filter={filter}
+          onFilter={(next) => {
+            setFilter(next)
+            setPage(1)
+          }}
+        />
       )}
 
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">

package/src/views/FormSubmissions.tsx

@@ -11,7 +11,7 @@
  * empty / filtered-empty / error states are all handled.
  */
 import { useCallback, useEffect, useState } from 'react'
-import { ArrowLeft, Inbox, Search } from 'lucide-react'
+import { Inbox, Search } from 'lucide-react'
 import { toast } from 'sonner'
 import {
   bulkUpdateEntries,
@@ -28,14 +28,16 @@ import { emitFormsChanged, onFormsChanged } from '../lib/forms-events.js'
 import { FormEntryDetailPane } from '../components/forms/FormEntryDetailPane.js'
 import { EntriesTable } from '../components/forms/EntriesTable.js'
 import { ExportMenu } from '../components/forms/ExportMenu.js'
+import { Breadcrumb } from '../components/ui/Breadcrumb.js'
 import { ConfirmDialog } from '../components/ui/ConfirmDialog.js'
+import { PageHeader } from '../components/ui/PageHeader.js'
 import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
 import {
   FormsEmptyState,
   FormsErrorState,
   FormsLoading,
   FormsPagination,
-  SummaryChip,
+  EntryCountChips,
 } from '../components/forms/primitives.js'
 
 export interface FormSubmissionsProps {
@@ -67,7 +69,9 @@ function filterToParams(filter: StatusFilter): Partial<FetchFormEntriesParams> {
   }
 }
 
-export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
+// `onNavigate` stays in the props for callers; the breadcrumb routes through
+// AdminLinks now that it replaces the old "Back to Forms" button.
+export function FormSubmissions({ formId }: FormSubmissionsProps) {
   const [formName, setFormName] = useState<string>('')
   const [entries, setEntries] = useState<FormSubmission[]>([])
   const [total, setTotal] = useState(0)
@@ -211,39 +215,33 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
 
   return (
     <div className="space-y-5 p-6">
-      <div>
-        <button
-          type="button"
-          onClick={() => onNavigate?.('/forms')}
-          className="text-muted-foreground hover:text-foreground mb-3 inline-flex items-center gap-2 text-sm transition-colors"
-        >
-          <ArrowLeft className="h-4 w-4" aria-hidden />
-          Back to Forms
-        </button>
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          <div>
-            <h1 className="text-foreground">
-              {formName ? `${formName} — Submissions` : 'Submissions'}
-            </h1>
-            <p className="text-muted-foreground mt-1 text-sm">
-              {total} {total === 1 ? 'submission' : 'submissions'}
-            </p>
-          </div>
-          <ExportMenu formId={formId} disabled={counts !== null && counts.total === 0} />
-        </div>
-      </div>
+      {/* A form's entries are a second-level screen: the title is the form's
+          sidebar label and the crumb leads back to Forms (Inbox.html). */}
+      <PageHeader
+        flush
+        title={formName || 'Submissions'}
+        subtitle={`${total} ${total === 1 ? 'submission' : 'submissions'}`}
+        breadcrumb={
+          <Breadcrumb
+            items={[
+              { label: 'Dashboard', path: '/' },
+              { label: 'Forms', path: '/forms' },
+              { label: formName || 'Submissions' },
+            ]}
+          />
+        }
+        actions={<ExportMenu formId={formId} disabled={counts !== null && counts.total === 0} />}
+      />
 
       {counts && (
-        <div className="flex flex-wrap gap-2">
-          <SummaryChip value={counts.total} label="total" />
-          <SummaryChip
-            value={counts.unread}
-            label="unread"
-            tone={counts.unread > 0 ? 'destructive' : 'neutral'}
-          />
-          <SummaryChip value={counts.starred} label="starred" tone="warning" />
-          <SummaryChip value={counts.thisWeek} label="this week" />
-        </div>
+        <EntryCountChips
+          counts={counts}
+          filter={filter}
+          onFilter={(next) => {
+            setFilter(next)
+            setPage(1)
+          }}
+        />
       )}
 
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">