@actuate-media/cms-admin 0.10.0 → 0.11.0

package/src/views/Settings.tsx

@@ -27,6 +27,7 @@ import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 import { useTheme } from '../components/ThemeProvider.js'
 import { RelationshipField } from '../fields/RelationshipField.js'
+import { SEOConfigPanel } from '../components/SEOConfigPanel.js'
 
 export interface SettingsProps {
   onNavigate?: (path: string) => void
@@ -149,8 +150,8 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
 
   if (loading) {
     return (
-      <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
-        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
+        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
@@ -159,11 +160,11 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
     <div className="p-3 pr-6 sm:p-4 sm:pr-8">
       {error && (
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
-          <span className="text-sm text-red-800 flex-1">{error}</span>
+          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
+          <span className="flex-1 text-sm text-red-800">{error}</span>
           <button
             onClick={refetch}
-            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
           >
             Retry
           </button>
@@ -176,7 +177,7 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
       </div>
 
       <Tabs.Root value={activeTab} onValueChange={setActiveTab}>
-        <Tabs.List className="mb-4 flex gap-1 border-b border-gray-200 overflow-x-auto">
+        <Tabs.List className="mb-4 flex gap-1 overflow-x-auto border-b border-gray-200">
           <Tabs.Trigger value="general" className={tabTriggerClass}>
             General
           </Tabs.Trigger>
@@ -186,7 +187,7 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
           {hasLayoutRegions && (
             <Tabs.Trigger value="layout" className={tabTriggerClass}>
               <span className="flex items-center gap-1.5">
-                <Layers className="w-4 h-4" />
+                <Layers className="h-4 w-4" />
                 Layout
               </span>
             </Tabs.Trigger>
@@ -194,9 +195,12 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
           <Tabs.Trigger value="security" className={tabTriggerClass}>
             Security
           </Tabs.Trigger>
+          <Tabs.Trigger value="seo" className={tabTriggerClass}>
+            SEO
+          </Tabs.Trigger>
           <Tabs.Trigger value="ai" className={tabTriggerClass}>
             <span className="flex items-center gap-1.5">
-              <Bot className="w-4 h-4" />
+              <Bot className="h-4 w-4" />
               AI
             </span>
           </Tabs.Trigger>
@@ -205,7 +209,7 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
           </Tabs.Trigger>
           <Tabs.Trigger value="updates" className={tabTriggerClass}>
             <span className="flex items-center gap-1.5">
-              <Download className="w-4 h-4" />
+              <Download className="h-4 w-4" />
               Updates
             </span>
           </Tabs.Trigger>
@@ -221,7 +225,7 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
                   type="text"
                   value={siteTitle}
                   onChange={(e) => setSiteTitle(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 />
               </div>
               <div>
@@ -230,7 +234,7 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
                   type="text"
                   value={tagline}
                   onChange={(e) => setTagline(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 />
               </div>
               <div>
@@ -239,7 +243,7 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
                   type="url"
                   value={siteUrl}
                   onChange={(e) => setSiteUrl(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 />
               </div>
             </div>
@@ -252,7 +256,7 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
                 <select
                   value={language}
                   onChange={(e) => setLanguage(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 >
                   <option value="en">English</option>
                   <option value="es">Spanish</option>
@@ -265,7 +269,7 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
                 <select
                   value={timezone}
                   onChange={(e) => setTimezone(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 >
                   <option value="UTC">UTC</option>
                   <option value="America/New_York">Eastern Time</option>
@@ -276,9 +280,9 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
               </div>
             </div>
           </div>
-          <div className="rounded-lg border border-border bg-card p-4">
-            <h3 className="mb-1 text-sm font-medium text-foreground">SEO & Robots Defaults</h3>
-            <p className="mb-4 text-xs text-muted-foreground">
+          <div className="border-border bg-card rounded-lg border p-4">
+            <h3 className="text-foreground mb-1 text-sm font-medium">SEO & Robots Defaults</h3>
+            <p className="text-muted-foreground mb-4 text-xs">
               Set the site-wide default for search engine indexing. Individual pages can inherit or
               override these rules in their SEO panel.
             </p>
@@ -359,12 +363,12 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
               </div>
             </div>
             <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
-              <h3 className="text-sm font-semibold text-gray-700 mb-2">
+              <h3 className="mb-2 text-sm font-semibold text-gray-700">
                 How Layout Inheritance Works
               </h3>
               <ul className="space-y-1.5 text-xs text-gray-600">
                 <li className="flex items-start gap-2">
-                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+                  <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
                     1
                   </span>
                   <span>
@@ -373,20 +377,20 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
                   </span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+                  <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
                     2
                   </span>
                   <span>
                     Child pages automatically inherit their parent&apos;s layout. For example,{' '}
-                    <code className="font-mono bg-gray-200 px-1 rounded">
+                    <code className="rounded bg-gray-200 px-1 font-mono">
                       /hampton-roads/thank-you
                     </code>{' '}
                     inherits from{' '}
-                    <code className="font-mono bg-gray-200 px-1 rounded">/hampton-roads</code>.
+                    <code className="rounded bg-gray-200 px-1 font-mono">/hampton-roads</code>.
                   </span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+                  <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
                     3
                   </span>
                   <span>
@@ -425,6 +429,10 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
           </div>
         </Tabs.Content>
 
+        <Tabs.Content value="seo" className="space-y-4">
+          <SEOConfigPanel />
+        </Tabs.Content>
+
         <Tabs.Content value="ai" className="space-y-4">
           <div className="rounded-lg border border-gray-200 bg-white p-4">
             <h3 className="mb-1 text-sm font-semibold text-gray-900">AI Provider & API Key</h3>
@@ -437,7 +445,7 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
                 <select
                   value={aiProvider}
                   onChange={(e) => setAiProvider(e.target.value)}
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 >
                   <option value="anthropic">Anthropic (Claude)</option>
                   <option value="openai">OpenAI (GPT)</option>
@@ -467,14 +475,14 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
                             ? 'sk-...'
                             : 'AIza...'
                       }
-                      className="w-full rounded-lg border border-gray-300 px-3 py-2 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      className="w-full rounded-lg border border-gray-300 px-3 py-2 pr-10 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                     />
                     <button
                       type="button"
                       onClick={() => setShowApiKey(!showApiKey)}
-                      className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600"
+                      className="absolute top-1/2 right-2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600"
                     >
-                      {showApiKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                      {showApiKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                     </button>
                   </div>
                   <button
@@ -496,8 +504,8 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
           </div>
 
           <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <div className="flex items-center gap-2 mb-1">
-              <Image className="w-4 h-4 text-blue-600" />
+            <div className="mb-1 flex items-center gap-2">
+              <Image className="h-4 w-4 text-blue-600" />
               <h3 className="text-sm font-semibold text-gray-900">Media Intelligence</h3>
             </div>
             <p className="mb-4 text-xs text-gray-500">AI-powered image and media analysis</p>
@@ -518,8 +526,8 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
           </div>
 
           <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <div className="flex items-center gap-2 mb-1">
-              <FileCode2 className="w-4 h-4 text-purple-600" />
+            <div className="mb-1 flex items-center gap-2">
+              <FileCode2 className="h-4 w-4 text-purple-600" />
               <h3 className="text-sm font-semibold text-gray-900">Content SEO</h3>
             </div>
             <p className="mb-4 text-xs text-gray-500">
@@ -548,8 +556,8 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
           </div>
 
           <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <div className="flex items-center gap-2 mb-1">
-              <MessageSquare className="w-4 h-4 text-green-600" />
+            <div className="mb-1 flex items-center gap-2">
+              <MessageSquare className="h-4 w-4 text-green-600" />
               <h3 className="text-sm font-semibold text-gray-900">Brand Voice & Writing</h3>
             </div>
             <p className="mb-4 text-xs text-gray-500">
@@ -572,8 +580,8 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
           </div>
 
           <div className="rounded-lg border border-gray-200 bg-white p-4">
-            <div className="flex items-center gap-2 mb-1">
-              <Sparkles className="w-4 h-4 text-yellow-600" />
+            <div className="mb-1 flex items-center gap-2">
+              <Sparkles className="h-4 w-4 text-yellow-600" />
               <h3 className="text-sm font-semibold text-gray-900">Content Quality</h3>
             </div>
             <p className="mb-4 text-xs text-gray-500">
@@ -596,11 +604,11 @@ export function Settings({ config, ..._props }: SettingsProps = {}) {
           </div>
 
           <div className="rounded-lg border border-indigo-200 bg-indigo-50 p-4">
-            <div className="flex items-center gap-2 mb-1">
-              <BookOpen className="w-4 h-4 text-indigo-600" />
+            <div className="mb-1 flex items-center gap-2">
+              <BookOpen className="h-4 w-4 text-indigo-600" />
               <h3 className="text-sm font-semibold text-indigo-900">AI Usage This Month</h3>
             </div>
-            <div className="grid grid-cols-3 gap-4 mt-3">
+            <div className="mt-3 grid grid-cols-3 gap-4">
               <div>
                 <div className="text-lg font-semibold text-indigo-900">0</div>
                 <div className="text-xs text-indigo-700">API Calls</div>
@@ -670,7 +678,7 @@ function ThemeSelect() {
     <select
       value={theme}
       onChange={(e) => setTheme(e.target.value as 'light' | 'dark' | 'system')}
-      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+      className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
     >
       <option value="light">Light</option>
       <option value="dark">Dark</option>
@@ -693,8 +701,8 @@ function ToggleSetting({
   return (
     <div className="flex items-center justify-between gap-4">
       <div className="flex-1">
-        <label className="text-sm font-medium text-foreground">{label}</label>
-        <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>
+        <label className="text-foreground text-sm font-medium">{label}</label>
+        <p className="text-muted-foreground mt-0.5 text-xs">{description}</p>
       </div>
       <button
         type="button"
@@ -702,7 +710,7 @@ function ToggleSetting({
         aria-checked={checked}
         aria-label={label}
         onClick={() => onChange(!checked)}
-        className={`relative h-6 w-11 shrink-0 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary ${checked ? 'bg-primary' : 'bg-muted'}`}
+        className={`focus:ring-primary relative h-6 w-11 shrink-0 rounded-full transition-colors focus:ring-2 focus:outline-none ${checked ? 'bg-primary' : 'bg-muted'}`}
       >
         <span
           className={`absolute top-0.5 block h-5 w-5 rounded-full bg-white transition-transform ${
@@ -853,7 +861,7 @@ function UpdatesPanel() {
             disabled={checking}
             className="flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:opacity-50"
           >
-            <RefreshCw className={`w-4 h-4 ${checking ? 'animate-spin' : ''}`} />
+            <RefreshCw className={`h-4 w-4 ${checking ? 'animate-spin' : ''}`} />
             {checking ? 'Checking...' : 'Check for Updates'}
           </button>
         </div>
@@ -862,11 +870,11 @@ function UpdatesPanel() {
       {/* Error State */}
       {checkError && (
         <div className="flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
-          <span className="text-sm text-red-800 flex-1">{checkError}</span>
+          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
+          <span className="flex-1 text-sm text-red-800">{checkError}</span>
           <button
             onClick={checkForUpdates}
-            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
           >
             Retry
           </button>
@@ -876,10 +884,10 @@ function UpdatesPanel() {
       {/* Up to Date */}
       {hasChecked && updateInfo && !updateInfo.updateAvailable && !checkError && (
         <div className="flex items-center gap-3 rounded-lg border border-green-200 bg-green-50 p-4">
-          <CheckCircle2 className="w-6 h-6 text-green-600 shrink-0" />
+          <CheckCircle2 className="h-6 w-6 shrink-0 text-green-600" />
           <div>
             <h3 className="text-sm font-semibold text-green-900">You&apos;re up to date!</h3>
-            <p className="text-sm text-green-700 mt-0.5">
+            <p className="mt-0.5 text-sm text-green-700">
               Actuate CMS <span className="font-mono">{updateInfo.current}</span> is the latest
               version.
             </p>
@@ -895,7 +903,7 @@ function UpdatesPanel() {
           >
             <div className="flex items-start gap-3">
               <ArrowUpCircle
-                className={`w-6 h-6 mt-0.5 shrink-0 ${severityColors[updateInfo.severity ?? 'patch']?.text ?? 'text-blue-700'}`}
+                className={`mt-0.5 h-6 w-6 shrink-0 ${severityColors[updateInfo.severity ?? 'patch']?.text ?? 'text-blue-700'}`}
               />
               <div className="flex-1">
                 <div className="flex items-center gap-2">
@@ -905,16 +913,16 @@ function UpdatesPanel() {
                     Update Available
                   </h3>
                   <span
-                    className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${severityColors[updateInfo.severity ?? 'patch']?.bg ?? 'bg-blue-50'} ${severityColors[updateInfo.severity ?? 'patch']?.text ?? 'text-blue-700'} border ${severityColors[updateInfo.severity ?? 'patch']?.border ?? 'border-blue-200'}`}
+                    className={`inline-flex items-center rounded px-2 py-0.5 text-xs font-medium ${severityColors[updateInfo.severity ?? 'patch']?.bg ?? 'bg-blue-50'} ${severityColors[updateInfo.severity ?? 'patch']?.text ?? 'text-blue-700'} border ${severityColors[updateInfo.severity ?? 'patch']?.border ?? 'border-blue-200'}`}
                   >
                     {severityColors[updateInfo.severity ?? 'patch']?.label ?? 'Update'}
                   </span>
                 </div>
-                <p className="text-sm mt-1" style={{ color: 'inherit' }}>
+                <p className="mt-1 text-sm" style={{ color: 'inherit' }}>
                   <span className="font-mono">{updateInfo.current}</span> &rarr;{' '}
                   <span className="font-mono font-semibold">{updateInfo.latest}</span>
                   {updateInfo.releaseDate && (
-                    <span className="text-xs ml-2 opacity-70">
+                    <span className="ml-2 text-xs opacity-70">
                       Released {updateInfo.releaseDate}
                     </span>
                   )}
@@ -931,12 +939,12 @@ function UpdatesPanel() {
               >
                 {applying ? (
                   <>
-                    <Loader2 className="w-4 h-4 animate-spin" />
+                    <Loader2 className="h-4 w-4 animate-spin" />
                     Creating PR...
                   </>
                 ) : (
                   <>
-                    <GitPullRequest className="w-4 h-4" />
+                    <GitPullRequest className="h-4 w-4" />
                     Create Update PR
                   </>
                 )}
@@ -946,8 +954,8 @@ function UpdatesPanel() {
 
             {updateInfo.updateCommand && (
               <div className="mt-3 rounded border border-gray-200 bg-white p-3">
-                <p className="text-xs text-gray-500 mb-1">Or update manually:</p>
-                <code className="block text-xs font-mono text-gray-800 bg-gray-50 rounded px-2 py-1.5 select-all">
+                <p className="mb-1 text-xs text-gray-500">Or update manually:</p>
+                <code className="block rounded bg-gray-50 px-2 py-1.5 font-mono text-xs text-gray-800 select-all">
                   {updateInfo.updateCommand}
                 </code>
               </div>
@@ -957,14 +965,14 @@ function UpdatesPanel() {
           {/* Changelog */}
           {updateInfo.changelog && updateInfo.changelog.length > 0 && (
             <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <h3 className="text-sm font-semibold text-gray-900 mb-3">Changelog</h3>
-              <div className="space-y-2 max-h-64 overflow-y-auto">
+              <h3 className="mb-3 text-sm font-semibold text-gray-900">Changelog</h3>
+              <div className="max-h-64 space-y-2 overflow-y-auto">
                 {updateInfo.changelog.map((entry) => (
                   <div key={entry.version} className="flex items-baseline gap-3 text-sm">
-                    <span className="font-mono text-xs text-gray-500 shrink-0 w-14">
+                    <span className="w-14 shrink-0 font-mono text-xs text-gray-500">
                       {entry.version}
                     </span>
-                    <span className="text-xs text-gray-400 shrink-0 w-20">{entry.date}</span>
+                    <span className="w-20 shrink-0 text-xs text-gray-400">{entry.date}</span>
                     <span className="text-gray-700">{entry.summary}</span>
                   </div>
                 ))}
@@ -978,13 +986,13 @@ function UpdatesPanel() {
       {prResult && (
         <div className="rounded-lg border border-green-200 bg-green-50 p-4">
           <div className="flex items-start gap-3">
-            <GitPullRequest className="w-5 h-5 text-green-600 mt-0.5 shrink-0" />
+            <GitPullRequest className="mt-0.5 h-5 w-5 shrink-0 text-green-600" />
             <div>
               <h3 className="text-sm font-semibold text-green-900">Pull Request Created</h3>
-              <p className="text-sm text-green-700 mt-1">
+              <p className="mt-1 text-sm text-green-700">
                 PR #{prResult.prNumber} has been created on your repository. Review and merge it to
                 apply the update, then run{' '}
-                <code className="text-xs font-mono bg-green-100 px-1 rounded">
+                <code className="rounded bg-green-100 px-1 font-mono text-xs">
                   npx prisma migrate deploy
                 </code>
                 .
@@ -993,9 +1001,9 @@ function UpdatesPanel() {
                 href={prResult.prUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-1.5 mt-2 text-sm font-medium text-green-700 hover:text-green-800"
+                className="mt-2 inline-flex items-center gap-1.5 text-sm font-medium text-green-700 hover:text-green-800"
               >
-                <ExternalLink className="w-4 h-4" />
+                <ExternalLink className="h-4 w-4" />
                 View Pull Request
               </a>
             </div>
@@ -1005,8 +1013,8 @@ function UpdatesPanel() {
 
       {/* GitHub Configuration */}
       <div className="rounded-lg border border-gray-200 bg-white p-4">
-        <h3 className="text-sm font-semibold text-gray-900 mb-1">GitHub Integration</h3>
-        <p className="text-xs text-gray-500 mb-4">
+        <h3 className="mb-1 text-sm font-semibold text-gray-900">GitHub Integration</h3>
+        <p className="mb-4 text-xs text-gray-500">
           Connect your repository to enable one-click update PRs. Credentials are encrypted at rest
           (AES-256-GCM).
         </p>
@@ -1019,11 +1027,11 @@ function UpdatesPanel() {
               value={ghRepo}
               onChange={(e) => setGhRepo(e.target.value)}
               placeholder="owner/repo"
-              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
             />
             <p className="mt-1 text-xs text-gray-500">
               e.g.{' '}
-              <code className="font-mono bg-gray-100 px-1 rounded">
+              <code className="rounded bg-gray-100 px-1 font-mono">
                 actuate-media/my-client-site
               </code>
             </p>
@@ -1044,19 +1052,19 @@ function UpdatesPanel() {
                   placeholder={
                     updateInfo?.hasGithubToken ? '••••••••••••••••' : 'ghp_... or github_pat_...'
                   }
-                  className="w-full rounded-lg border border-gray-300 px-3 py-2 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 pr-10 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 />
                 <button
                   type="button"
                   onClick={() => setShowGhToken(!showGhToken)}
-                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600"
+                  className="absolute top-1/2 right-2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600"
                 >
-                  {showGhToken ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                  {showGhToken ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                 </button>
               </div>
             </div>
             <p className="mt-1 text-xs text-gray-500">
-              Needs <code className="font-mono bg-gray-100 px-1 rounded">repo</code> scope. Create
+              Needs <code className="rounded bg-gray-100 px-1 font-mono">repo</code> scope. Create
               at{' '}
               <a
                 href="https://github.com/settings/tokens"
@@ -1077,7 +1085,7 @@ function UpdatesPanel() {
           >
             {savingConfig ? (
               <>
-                <Loader2 className="w-4 h-4 animate-spin" />
+                <Loader2 className="h-4 w-4 animate-spin" />
                 Encrypting &amp; Saving...
               </>
             ) : (
@@ -1089,10 +1097,10 @@ function UpdatesPanel() {
 
       {/* Help Text */}
       <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
-        <h3 className="text-sm font-semibold text-gray-700 mb-2">How Updates Work</h3>
+        <h3 className="mb-2 text-sm font-semibold text-gray-700">How Updates Work</h3>
         <ul className="space-y-1.5 text-xs text-gray-600">
           <li className="flex items-start gap-2">
-            <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
               1
             </span>
             <span>
@@ -1100,7 +1108,7 @@ function UpdatesPanel() {
             </span>
           </li>
           <li className="flex items-start gap-2">
-            <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
               2
             </span>
             <span>
@@ -1109,7 +1117,7 @@ function UpdatesPanel() {
             </span>
           </li>
           <li className="flex items-start gap-2">
-            <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
               3
             </span>
             <span>
@@ -1118,12 +1126,12 @@ function UpdatesPanel() {
             </span>
           </li>
           <li className="flex items-start gap-2">
-            <span className="w-4 h-4 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+            <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-[10px] font-bold text-blue-600">
               4
             </span>
             <span>
               Review and merge the PR, then deploy. Database migrations run automatically via{' '}
-              <code className="font-mono bg-gray-200 px-1 rounded">prisma migrate deploy</code>.
+              <code className="rounded bg-gray-200 px-1 font-mono">prisma migrate deploy</code>.
             </span>
           </li>
         </ul>