admin redesign: topbar state zone, podcast hub tabs, AnalyticsPanel CSS classes, useAutosave

2026-06-01 11:45:52 -04:00
parent a58d75c425
commit b9ed8761db
5 changed files with 277 additions and 54 deletions
@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react'
+
+interface AdminCollapsibleCardProps {
+  title: string
+  subtitle?: string
+  hint?: string
+  previewUrl?: string
+  children: ReactNode
+  open?: boolean
+  className?: string
+}
+
+/**
+ * Reusable collapsible card for admin forms.
+ * Replaces the repeated <details>/<summary> pattern throughout AdminPage.
+ */
+export function AdminCollapsibleCard({
+  title,
+  subtitle,
+  hint = 'Expand to edit',
+  previewUrl,
+  children,
+  open = false,
+  className = '',
+}: AdminCollapsibleCardProps) {
+  return (
+    <details className={`admin-collapsible-card ${className}`.trim()} open={open}>
+      <summary className="admin-collapsible-summary">
+        <div>
+          <strong>{title}</strong>
+          {subtitle && <p>{subtitle}</p>}
+        </div>
+        <div className="admin-collapsible-actions">
+          {previewUrl && (
+            <a
+              href={previewUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="btn-admin-secondary"
+              onClick={e => e.stopPropagation()}
+            >
+              Preview
+            </a>
+          )}
+          <span className="admin-collapsible-hint">{hint}</span>
+        </div>
+      </summary>
+      <div className="admin-collapsible-body">{children}</div>
+    </details>
+  )
+}