@actuate-media/cms-admin 0.36.0 → 0.37.0

package/src/views/Settings.tsx

@@ -3,16 +3,9 @@
 import * as Tabs from '@radix-ui/react-tabs'
 import {
   Bot,
-  Eye,
-  EyeOff,
   Loader2,
   AlertTriangle,
   Download,
-  CheckCircle2,
-  ArrowUpCircle,
-  ExternalLink,
-  RefreshCw,
-  GitPullRequest,
   Layers,
   Users as UsersIcon,
   KeyRound,
@@ -27,6 +20,8 @@ import { SeoSettingsTab } from './settings/SeoSettingsTab.js'
 import { AISettingsTab } from './settings/AISettingsTab.js'
 import { AppearanceTab } from './settings/AppearanceTab.js'
 import { SecurityTab } from './settings/SecurityTab.js'
+import { SettingsCard } from './settings/components.js'
+import { UpdatesTab } from './settings/UpdatesTab.js'
 import { Users as UsersView } from './Users.js'
 import { ApiKeys as ApiKeysView } from './ApiKeys.js'
 
@@ -165,12 +160,15 @@ export function Settings({
   return (
     <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="h-5 w-5 shrink-0 text-red-600" />
-          <span className="flex-1 text-sm text-red-800">{error}</span>
+        <div
+          role="alert"
+          className="border-destructive/30 bg-destructive/10 text-destructive mb-4 flex items-center gap-3 rounded-lg border p-3 text-sm"
+        >
+          <AlertTriangle size={20} className="shrink-0" aria-hidden="true" />
+          <span className="flex-1">{error}</span>
           <button
             onClick={refetch}
-            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
+            className="border-destructive/40 rounded-md border px-3 py-1 transition-colors hover:opacity-80"
           >
             Retry
           </button>
@@ -178,12 +176,12 @@ export function Settings({
       )}
 
       <div className="mb-4">
-        <h1 className="mb-1 text-2xl font-semibold text-gray-900">Settings</h1>
-        <p className="text-sm text-gray-600">Manage your CMS configuration</p>
+        <h1 className="text-foreground mb-1 text-2xl font-medium">Settings</h1>
+        <p className="text-muted-foreground text-sm">Manage your CMS configuration</p>
       </div>
 
       <Tabs.Root value={activeTab} onValueChange={changeTab}>
-        <Tabs.List className="mb-4 flex gap-1 overflow-x-auto border-b border-gray-200">
+        <Tabs.List className="border-border mb-4 flex gap-1 overflow-x-auto border-b">
           <Tabs.Trigger value="general" className={tabTriggerClass}>
             General
           </Tabs.Trigger>
@@ -240,12 +238,10 @@ export function Settings({
 
         {hasLayoutRegions && (
           <Tabs.Content value="layout" 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">Default Layout Variants</h3>
-              <p className="mb-4 text-xs text-gray-500">
-                Select the default header, footer, and other layout variants used site-wide. Pages
-                can override these individually or inherit from parent pages.
-              </p>
+            <SettingsCard
+              title="Default Layout Variants"
+              description="Select the default header, footer, and other layout variants used site-wide. Pages can override these individually or inherit from parent pages."
+            >
               <div className="space-y-4">
                 {layoutRegions.map((region) => (
                   <RelationshipField
@@ -268,14 +264,11 @@ export function Settings({
                   />
                 ))}
               </div>
-            </div>
-            <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
-              <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">
+            </SettingsCard>
+            <SettingsCard title="How Layout Inheritance Works">
+              <ul className="text-muted-foreground space-y-1.5 text-sm">
                 <li className="flex items-start gap-2">
-                  <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">
+                  <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
                     1
                   </span>
                   <span>
@@ -284,20 +277,20 @@ export function Settings({
                   </span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <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">
+                  <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
                     2
                   </span>
                   <span>
                     Child pages automatically inherit their parent&apos;s layout. For example,{' '}
-                    <code className="rounded bg-gray-200 px-1 font-mono">
+                    <code className="bg-muted rounded px-1 font-mono">
                       /hampton-roads/thank-you
                     </code>{' '}
                     inherits from{' '}
-                    <code className="rounded bg-gray-200 px-1 font-mono">/hampton-roads</code>.
+                    <code className="bg-muted rounded px-1 font-mono">/hampton-roads</code>.
                   </span>
                 </li>
                 <li className="flex items-start gap-2">
-                  <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">
+                  <span className="bg-brand/10 text-brand mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[10px] font-medium">
                     3
                   </span>
                   <span>
@@ -306,7 +299,7 @@ export function Settings({
                   </span>
                 </li>
               </ul>
-            </div>
+            </SettingsCard>
           </Tabs.Content>
         )}
 
@@ -331,7 +324,7 @@ export function Settings({
         </Tabs.Content>
 
         <Tabs.Content value="updates" className="space-y-4">
-          <UpdatesPanel />
+          <UpdatesTab role={session?.user?.role} />
         </Tabs.Content>
       </Tabs.Root>
 
@@ -350,421 +343,3 @@ export function Settings({
     </div>
   )
 }
-
-// ---------------------------------------------------------------------------
-// Updates Panel
-// ---------------------------------------------------------------------------
-
-interface UpdateInfo {
-  current: string
-  latest: string
-  updateAvailable: boolean
-  severity?: 'patch' | 'minor' | 'major'
-  releaseDate?: string
-  changelog?: Array<{ version: string; date: string; summary: string }>
-  updateCommand?: string
-  hasGithubToken?: boolean
-  githubRepo?: string
-}
-
-function UpdatesPanel() {
-  const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null)
-  const [checking, setChecking] = useState(false)
-  const [checkError, setCheckError] = useState('')
-  const [applying, setApplying] = useState(false)
-  const [prResult, setPrResult] = useState<{ prUrl: string; prNumber: number } | null>(null)
-  const [hasChecked, setHasChecked] = useState(false)
-
-  // GitHub config
-  const [ghToken, setGhToken] = useState('')
-  const [ghRepo, setGhRepo] = useState('')
-  const [showGhToken, setShowGhToken] = useState(false)
-  const [savingConfig, setSavingConfig] = useState(false)
-  const [configSaved, setConfigSaved] = useState(false)
-
-  const checkForUpdates = async () => {
-    setChecking(true)
-    setCheckError('')
-    setPrResult(null)
-
-    try {
-      const res = await cmsApi<UpdateInfo>('/updates/check')
-      if (res.error) {
-        setCheckError(res.error)
-      } else if (res.data) {
-        setUpdateInfo(res.data)
-        if (res.data.githubRepo) setGhRepo(res.data.githubRepo)
-      }
-    } catch {
-      setCheckError('Unable to check for updates. Please try again.')
-    } finally {
-      setChecking(false)
-      setHasChecked(true)
-    }
-  }
-
-  const saveGitHubConfig = async () => {
-    setSavingConfig(true)
-    setConfigSaved(false)
-    try {
-      const res = await cmsApi('/updates/config', {
-        method: 'PUT',
-        body: JSON.stringify({
-          ...(ghToken ? { githubToken: ghToken } : {}),
-          ...(ghRepo ? { githubRepo: ghRepo } : {}),
-        }),
-      })
-      if (res.error) {
-        toast.error(res.error)
-      } else {
-        toast.success('GitHub configuration saved and encrypted.')
-        setConfigSaved(true)
-        setGhToken('')
-        if (updateInfo) {
-          setUpdateInfo({ ...updateInfo, hasGithubToken: true, githubRepo: ghRepo })
-        }
-      }
-    } catch {
-      toast.error('Failed to save configuration.')
-    } finally {
-      setSavingConfig(false)
-    }
-  }
-
-  const applyUpdate = async () => {
-    if (!updateInfo?.latest) return
-    setApplying(true)
-
-    try {
-      const res = await cmsApi<{ prUrl: string; prNumber: number }>('/updates/apply', {
-        method: 'POST',
-        body: JSON.stringify({ targetVersion: updateInfo.latest }),
-      })
-
-      if (res.error) {
-        toast.error(res.error)
-      } else if (res.data) {
-        setPrResult(res.data)
-        toast.success('Update PR created successfully!')
-      }
-    } catch {
-      toast.error('Failed to create update PR. Check your GitHub configuration.')
-    } finally {
-      setApplying(false)
-    }
-  }
-
-  useEffect(() => {
-    checkForUpdates()
-  }, [])
-
-  const severityColors: Record<
-    string,
-    { bg: string; text: string; border: string; label: string }
-  > = {
-    patch: { bg: 'bg-blue-50', text: 'text-blue-700', border: 'border-blue-200', label: 'Patch' },
-    minor: {
-      bg: 'bg-yellow-50',
-      text: 'text-yellow-700',
-      border: 'border-yellow-200',
-      label: 'Minor',
-    },
-    major: { bg: 'bg-red-50', text: 'text-red-700', border: 'border-red-200', label: 'Major' },
-  }
-
-  return (
-    <>
-      {/* Current Version Card */}
-      <div className="rounded-lg border border-gray-200 bg-white p-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="text-sm font-semibold text-gray-900">Actuate CMS</h3>
-            <p className="mt-1 text-sm text-gray-600">
-              Current version:{' '}
-              <span className="font-mono font-medium">{updateInfo?.current ?? '...'}</span>
-            </p>
-          </div>
-          <button
-            type="button"
-            onClick={checkForUpdates}
-            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={`h-4 w-4 ${checking ? 'animate-spin' : ''}`} />
-            {checking ? 'Checking...' : 'Check for Updates'}
-          </button>
-        </div>
-      </div>
-
-      {/* Error State */}
-      {checkError && (
-        <div className="flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <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="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
-          >
-            Retry
-          </button>
-        </div>
-      )}
-
-      {/* 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="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="mt-0.5 text-sm text-green-700">
-              Actuate CMS <span className="font-mono">{updateInfo.current}</span> is the latest
-              version.
-            </p>
-          </div>
-        </div>
-      )}
-
-      {/* Update Available */}
-      {updateInfo?.updateAvailable && (
-        <>
-          <div
-            className={`rounded-lg border p-4 ${severityColors[updateInfo.severity ?? 'patch']?.border ?? 'border-blue-200'} ${severityColors[updateInfo.severity ?? 'patch']?.bg ?? 'bg-blue-50'}`}
-          >
-            <div className="flex items-start gap-3">
-              <ArrowUpCircle
-                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">
-                  <h3
-                    className={`text-sm font-semibold ${severityColors[updateInfo.severity ?? 'patch']?.text ?? 'text-blue-700'}`}
-                  >
-                    Update Available
-                  </h3>
-                  <span
-                    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="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="ml-2 text-xs opacity-70">
-                      Released {updateInfo.releaseDate}
-                    </span>
-                  )}
-                </p>
-              </div>
-            </div>
-
-            <div className="mt-4 flex items-center gap-3">
-              <button
-                type="button"
-                onClick={applyUpdate}
-                disabled={applying}
-                className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
-              >
-                {applying ? (
-                  <>
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                    Creating PR...
-                  </>
-                ) : (
-                  <>
-                    <GitPullRequest className="h-4 w-4" />
-                    Create Update PR
-                  </>
-                )}
-              </button>
-              <span className="text-xs text-gray-500">Opens a pull request on your repository</span>
-            </div>
-
-            {updateInfo.updateCommand && (
-              <div className="mt-3 rounded border border-gray-200 bg-white p-3">
-                <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>
-            )}
-          </div>
-
-          {/* Changelog */}
-          {updateInfo.changelog && updateInfo.changelog.length > 0 && (
-            <div className="rounded-lg border border-gray-200 bg-white p-4">
-              <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="w-14 shrink-0 font-mono text-xs text-gray-500">
-                      {entry.version}
-                    </span>
-                    <span className="w-20 shrink-0 text-xs text-gray-400">{entry.date}</span>
-                    <span className="text-gray-700">{entry.summary}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-        </>
-      )}
-
-      {/* PR Created */}
-      {prResult && (
-        <div className="rounded-lg border border-green-200 bg-green-50 p-4">
-          <div className="flex items-start gap-3">
-            <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="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="rounded bg-green-100 px-1 font-mono text-xs">
-                  npx prisma migrate deploy
-                </code>
-                .
-              </p>
-              <a
-                href={prResult.prUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="mt-2 inline-flex items-center gap-1.5 text-sm font-medium text-green-700 hover:text-green-800"
-              >
-                <ExternalLink className="h-4 w-4" />
-                View Pull Request
-              </a>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* GitHub Configuration */}
-      <div className="rounded-lg border border-gray-200 bg-white p-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>
-
-        <div className="space-y-4">
-          <div>
-            <label className="mb-1 block text-sm font-medium text-gray-700">Repository</label>
-            <input
-              type="text"
-              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:ring-2 focus:ring-blue-500 focus:outline-none"
-            />
-            <p className="mt-1 text-xs text-gray-500">
-              e.g.{' '}
-              <code className="rounded bg-gray-100 px-1 font-mono">
-                actuate-media/my-client-site
-              </code>
-            </p>
-          </div>
-          <div>
-            <label className="mb-1 block text-sm font-medium text-gray-700">
-              GitHub Token
-              {updateInfo?.hasGithubToken && !ghToken && (
-                <span className="ml-2 text-xs font-normal text-green-600">Saved</span>
-              )}
-            </label>
-            <div className="flex gap-2">
-              <div className="relative flex-1">
-                <input
-                  type={showGhToken ? 'text' : 'password'}
-                  value={ghToken}
-                  onChange={(e) => setGhToken(e.target.value)}
-                  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:ring-2 focus:ring-blue-500 focus:outline-none"
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowGhToken(!showGhToken)}
-                  className="absolute top-1/2 right-2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600"
-                >
-                  {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="rounded bg-gray-100 px-1 font-mono">repo</code> scope. Create
-              at{' '}
-              <a
-                href="https://github.com/settings/tokens"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-600 hover:underline"
-              >
-                github.com/settings/tokens
-              </a>
-            </p>
-          </div>
-
-          <button
-            type="button"
-            onClick={saveGitHubConfig}
-            disabled={savingConfig || (!ghToken && !ghRepo)}
-            className="flex items-center gap-2 rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-800 disabled:opacity-50"
-          >
-            {savingConfig ? (
-              <>
-                <Loader2 className="h-4 w-4 animate-spin" />
-                Encrypting &amp; Saving...
-              </>
-            ) : (
-              'Save Configuration'
-            )}
-          </button>
-        </div>
-      </div>
-
-      {/* Help Text */}
-      <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
-        <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="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>
-              Click &quot;Check for Updates&quot; to see if a new version is available on npm.
-            </span>
-          </li>
-          <li className="flex items-start gap-2">
-            <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>
-              Add your GitHub token and repository above. They&apos;re encrypted at rest — never
-              stored in plaintext.
-            </span>
-          </li>
-          <li className="flex items-start gap-2">
-            <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>
-              Click &quot;Create Update PR&quot; to open a pull request that bumps your CMS packages
-              automatically.
-            </span>
-          </li>
-          <li className="flex items-start gap-2">
-            <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="rounded bg-gray-200 px-1 font-mono">prisma migrate deploy</code>.
-            </span>
-          </li>
-        </ul>
-      </div>
-    </>
-  )
-}

package/src/views/Users.tsx

@@ -923,7 +923,7 @@ export function Users({ embedded = false }: UsersProps = {}) {
         {/* Header */}
         <div className="border-border flex flex-col gap-3 border-b p-4 lg:flex-row lg:items-center lg:justify-between">
           <div>
-            <h2 className="text-card-foreground text-base font-medium">Team members</h2>
+            <h2 className="text-card-foreground text-lg font-medium">Team members</h2>
             <p className="text-muted-foreground text-sm">
               {peopleCount} {peopleCount === 1 ? 'person has' : 'people have'} access to this
               workspace