@actuate-media/cms-admin 0.64.0 → 0.65.0

package/src/views/FormEditor.tsx

@@ -16,6 +16,7 @@ import {
 } from 'lucide-react'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
+import { Toggle } from '../components/ui/Toggle.js'
 
 interface FormField {
   id: string
@@ -463,15 +464,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
         {expandedSection === 'analytics' && (
           <div className="border-border border-t p-4">
             <div className="mb-4 flex items-center gap-3">
-              <label className="relative inline-flex cursor-pointer items-center">
-                <input
-                  type="checkbox"
-                  checked={analytics.enabled}
-                  onChange={(e) => setAnalytics((a) => ({ ...a, enabled: e.target.checked }))}
-                  className="peer sr-only"
-                />
-                <div className="bg-muted peer peer-checked:bg-primary peer-focus:ring-ring/50 after:border-border after:bg-card h-5 w-9 rounded-full peer-focus:ring-2 peer-focus:outline-none after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:border after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white" />
-              </label>
+              <Toggle
+                checked={analytics.enabled}
+                onCheckedChange={(v) => setAnalytics((a) => ({ ...a, enabled: v }))}
+                aria-label="Push events to Google Analytics 4"
+              />
               <span className="text-foreground text-sm font-medium">
                 Push events to Google Analytics 4
               </span>

package/src/views/FormEntries.tsx

@@ -234,7 +234,7 @@ export function FormEntries({ onNavigate }: FormEntriesProps) {
     <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 text-2xl font-medium">All Entries</h1>
+          <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>

package/src/views/FormSubmissions.tsx

@@ -254,7 +254,7 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
         </button>
         <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
           <div>
-            <h1 className="text-foreground text-2xl font-medium">
+            <h1 className="text-foreground">
               {formName ? `${formName} — Submissions` : 'Submissions'}
             </h1>
             <p className="text-muted-foreground mt-1 text-sm">

package/src/views/Forms.tsx

@@ -158,7 +158,7 @@ export function Forms({ onNavigate }: FormsProps) {
     <div className="space-y-5 p-6">
       <header className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
-          <h1 className="text-foreground text-2xl font-medium">Forms</h1>
+          <h1 className="text-foreground">Forms</h1>
           <p className="text-muted-foreground mt-1 text-sm">
             Manage forms and view incoming submissions
           </p>

package/src/views/MediaBrowser.tsx

@@ -30,6 +30,7 @@ import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 import { FolderTree, type FolderSelection } from '../components/FolderTree.js'
+import { StatusBadge } from '../components/ui/StatusBadge.js'
 
 interface MediaItem {
   id: number | string
@@ -411,7 +412,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
             <FolderInput className="text-muted-foreground h-5 w-5" />
           </button>
           <div>
-            <h1 className="text-foreground mb-1 text-xl font-medium sm:text-2xl">Media Library</h1>
+            <h1 className="text-foreground mb-1">Media Library</h1>
             <p className="text-muted-foreground text-sm">{filteredAndSorted.length} files</p>
           </div>
         </div>
@@ -722,13 +723,9 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                               </td>
                               <td className="px-3 py-2">
                                 {hasIssues ? (
-                                  <span className="bg-warning/15 text-warning inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium">
-                                    <AlertTriangle className="h-3 w-3" /> Needs attention
-                                  </span>
+                                  <StatusBadge tone="warning">Needs attention</StatusBadge>
                                 ) : (
-                                  <span className="bg-success/15 text-success inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium">
-                                    Complete
-                                  </span>
+                                  <StatusBadge tone="success">Complete</StatusBadge>
                                 )}
                               </td>
                             </tr>

package/src/views/Pages/PageTagManager.tsx

@@ -85,9 +85,7 @@ export function PageTagManager({ onNavigate, startCreating = false }: PageTagMan
 
       <div className="mb-5 flex items-center justify-between">
         <div>
-          <h1 className="text-foreground mb-1 text-xl font-medium tracking-tight sm:text-2xl">
-            Page Tags
-          </h1>
+          <h1 className="text-foreground mb-1">Page Tags</h1>
           <p className="text-muted-foreground text-sm">
             Organize pages with reusable, color-coded labels.
           </p>

package/src/views/Pages/PagesListView.tsx

@@ -290,7 +290,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     <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>
+        <h1 className="text-foreground">Pages</h1>
         <p className="text-muted-foreground text-sm">
           {grandTotal} page{grandTotal === 1 ? '' : 's'} · organized by tags
         </p>

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

@@ -216,7 +216,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
     <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>
+        <h1 className="text-foreground">Posts</h1>
         <p className="text-muted-foreground text-sm">
           {totalAll} total post{totalAll === 1 ? '' : 's'} across all types
         </p>

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 */}

package/src/views/page-builder/BlockEditor.tsx

@@ -2,13 +2,13 @@
 
 import { useState, useMemo, useCallback } from 'react'
 import { Star, Copy, Trash2 } from 'lucide-react'
-import * as SwitchPrimitive from '@radix-ui/react-switch'
 import type { BlockNode, BlockTypeDefinition, FieldDefinition } from '@actuate-media/cms-core'
 import { BlockCatalog } from '@actuate-media/cms-core/page-builder'
 import { AIBlockAssist } from './AIBlockAssist.js'
 import { RelationshipField } from './RelationshipField.js'
 import { TipTapEditor } from '../../components/TipTapEditor.js'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
+import { Toggle } from '../../components/ui/Toggle.js'
 
 export interface BlockEditorProps {
   node: BlockNode
@@ -224,14 +224,11 @@ function FieldRenderer({ name, definition, value, onChange }: FieldRendererProps
       return (
         <div className="flex items-center justify-between">
           <label className="text-foreground text-sm font-medium">{label}</label>
-          <SwitchPrimitive.Root
+          <Toggle
             checked={!!value}
             onCheckedChange={(checked) => onChange(checked)}
-            className="bg-input data-[state=checked]:bg-primary relative h-5 w-9 rounded-full transition-colors"
             aria-label={label}
-          >
-            <SwitchPrimitive.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[18px]" />
-          </SwitchPrimitive.Root>
+          />
         </div>
       )
 

package/src/views/page-builder/NodeSettings.tsx

@@ -14,7 +14,7 @@ import {
   ArrowDownToLine,
   Minus,
 } from 'lucide-react'
-import * as SwitchPrimitive from '@radix-ui/react-switch'
+import { Toggle } from '../../components/ui/Toggle.js'
 import type {
   BuilderNode,
   SectionNode,
@@ -231,14 +231,11 @@ function SectionFields({
       <p className={SECTION_HEADING_CLASS}>Attributes</p>
       <div className="flex items-center justify-between">
         <label className="text-foreground text-sm font-medium">Visibility</label>
-        <SwitchPrimitive.Root
+        <Toggle
           checked={s.visibility !== 'hidden'}
           onCheckedChange={(checked) => updateSetting('visibility', checked ? 'visible' : 'hidden')}
-          className="bg-input data-[state=checked]:bg-primary relative h-5 w-9 rounded-full transition-colors"
           aria-label="Section visibility"
-        >
-          <SwitchPrimitive.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[18px]" />
-        </SwitchPrimitive.Root>
+        />
       </div>
       <div>
         <label className={LABEL_CLASS}>HTML ID</label>
@@ -389,25 +386,19 @@ function RowFields({
       <p className={SECTION_HEADING_CLASS}>Mobile</p>
       <div className="flex items-center justify-between">
         <label className="text-foreground text-sm font-medium">Reverse on Mobile</label>
-        <SwitchPrimitive.Root
+        <Toggle
           checked={!!s.reverseOnMobile}
           onCheckedChange={(checked) => updateSetting('reverseOnMobile', checked)}
-          className="bg-input data-[state=checked]:bg-primary relative h-5 w-9 rounded-full transition-colors"
           aria-label="Reverse column order on mobile"
-        >
-          <SwitchPrimitive.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[18px]" />
-        </SwitchPrimitive.Root>
+        />
       </div>
       <div className="flex items-center justify-between">
         <label className="text-foreground text-sm font-medium">Wrap on Mobile</label>
-        <SwitchPrimitive.Root
+        <Toggle
           checked={!!s.wrapOnMobile}
           onCheckedChange={(checked) => updateSetting('wrapOnMobile', checked)}
-          className="bg-input data-[state=checked]:bg-primary relative h-5 w-9 rounded-full transition-colors"
           aria-label="Wrap columns on mobile"
-        >
-          <SwitchPrimitive.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[18px]" />
-        </SwitchPrimitive.Root>
+        />
       </div>
 
       <p className={SECTION_HEADING_CLASS}>Column Presets</p>

package/src/views/page-builder/PageTemplates.tsx

@@ -47,7 +47,7 @@ export function PageTemplates({ onNavigate }: PageTemplatesProps) {
 
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <h1 className="text-foreground mb-1 text-2xl font-medium">Page Templates</h1>
+          <h1 className="text-foreground mb-1">Page Templates</h1>
           <p className="text-muted-foreground text-sm">
             {templates.length} saved template{templates.length === 1 ? '' : 's'}
           </p>

package/src/views/page-builder/SavedSections.tsx

@@ -169,7 +169,7 @@ export function SavedSections({ onNavigate, config }: SavedSectionsProps) {
     <div className="p-4 pr-8">
       <div className="mb-6 flex items-center justify-between">
         <div>
-          <h1 className="text-foreground text-2xl font-medium">Saved Sections</h1>
+          <h1 className="text-foreground">Saved Sections</h1>
           <p className="text-muted-foreground mt-1 text-sm">
             Reusable sections for the page builder
           </p>
@@ -393,7 +393,7 @@ function SectionForm({ initial, saving, onSave, onCancel }: SectionFormProps) {
           <ArrowLeft size={16} />
           Back
         </button>
-        <h1 className="text-foreground text-2xl font-medium">
+        <h1 className="text-foreground">
           {initial ? `Edit: ${initial.name}` : 'Create Saved Section'}
         </h1>
       </div>

package/src/views/page-builder/Widgets.tsx

@@ -18,7 +18,7 @@ export function Widgets({ onNavigate }: WidgetsProps) {
   return (
     <div className="p-4 pr-8">
       <div className="mb-4">
-        <h1 className="text-foreground mb-1 text-2xl font-medium">Widgets</h1>
+        <h1 className="text-foreground mb-1">Widgets</h1>
         <p className="text-muted-foreground text-sm">
           Reusable, embeddable components for pages and saved sections.
         </p>

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

@@ -19,6 +19,7 @@ import {
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
+import { Toggle } from '../../components/ui/Toggle.js'
 import type { PageSection } from '../../lib/page-editor-service.js'
 import type { ResolvedRepeater, SectionSettings } from './section-types.js'
 import {
@@ -497,28 +498,15 @@ function BooleanField({
 }) {
   return (
     <div>
-      <button
-        type="button"
-        id={id}
-        role="switch"
-        aria-checked={value}
-        onClick={() => onChange(!value)}
-        className="border-border text-foreground hover:bg-accent flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-sm"
-      >
+      <div className="border-border text-foreground flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-sm">
         <span>{field.label}</span>
-        <span
-          aria-hidden
-          className={`relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors ${
-            value ? 'bg-primary' : 'bg-muted'
-          }`}
-        >
-          <span
-            className={`bg-card inline-block h-4 w-4 transform rounded-full transition-transform ${
-              value ? 'translate-x-4' : 'translate-x-0.5'
-            }`}
-          />
-        </span>
-      </button>
+        <Toggle
+          id={id}
+          checked={value}
+          onCheckedChange={(v) => onChange(v)}
+          aria-label={field.label}
+        />
+      </div>
       {field.help && <p className="text-muted-foreground mt-1 text-xs">{field.help}</p>}
     </div>
   )

package/src/views/post-editor/PostHeaderPanel.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { X } from 'lucide-react'
+import { Toggle } from '../../components/ui/Toggle.js'
 import type { PostHeaderConfig } from '../../lib/post-editor-service.js'
 
 interface PostHeaderPanelProps {
@@ -75,29 +76,18 @@ export function PostHeaderPanel({ header, canEdit, onClose, onChange }: PostHead
           {TOGGLES.map((t) => {
             const value = header[t.key] === true
             return (
-              <button
+              <div
                 key={t.key}
-                type="button"
-                role="switch"
-                aria-checked={value}
-                disabled={!canEdit}
-                onClick={() => onChange({ [t.key]: !value } as Partial<PostHeaderConfig>)}
-                className="border-border text-foreground hover:bg-accent flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-sm disabled:opacity-50"
+                className="border-border text-foreground flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-sm"
               >
                 <span>{t.label}</span>
-                <span
-                  aria-hidden
-                  className={`relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors ${
-                    value ? 'bg-primary' : 'bg-muted'
-                  }`}
-                >
-                  <span
-                    className={`bg-card inline-block h-4 w-4 transform rounded-full transition-transform ${
-                      value ? 'translate-x-4' : 'translate-x-0.5'
-                    }`}
-                  />
-                </span>
-              </button>
+                <Toggle
+                  checked={value}
+                  disabled={!canEdit}
+                  onCheckedChange={(v) => onChange({ [t.key]: v } as Partial<PostHeaderConfig>)}
+                  aria-label={t.label}
+                />
+              </div>
             )
           })}
         </fieldset>

package/src/views/settings/components.tsx

@@ -4,6 +4,7 @@ import * as Dialog from '@radix-ui/react-dialog'
 import { AlertTriangle, Check, Loader2, Lock } from 'lucide-react'
 import { useId, type ReactNode } from 'react'
 import { Card, CardContent, CardDescription, CardHeader } from '../../components/ui/Card.js'
+import { Toggle } from '../../components/ui/Toggle.js'
 import { adminPortalContainer } from '../../lib/portal-container.js'
 import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettings.js'
 
@@ -177,23 +178,14 @@ export function SettingsToggleRow({
         </div>
         <p className="text-muted-foreground mt-0.5 text-sm">{description}</p>
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={checked}
-        aria-label={label}
-        disabled={disabled}
-        onClick={() => onChange(!checked)}
-        className={`focus-visible:ring-ring relative mt-0.5 h-6 w-11 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ${
-          checked ? 'bg-brand' : 'bg-switch-background'
-        }`}
-      >
-        <span
-          className={`bg-card absolute top-0.5 block h-5 w-5 rounded-full shadow-sm transition-transform ${
-            checked ? 'translate-x-[22px]' : 'translate-x-0.5'
-          }`}
+      <div className="mt-0.5 shrink-0">
+        <Toggle
+          checked={checked}
+          onCheckedChange={onChange}
+          disabled={disabled}
+          aria-label={label}
         />
-      </button>
+      </div>
     </div>
   )
 }