Unify page layouts, compact headers and shared UI styling

frontend/app/ui/AdminShell.tsx

@@ -2,6 +2,7 @@
 
 import type { ReactNode } from 'react'
 import SettingsNavigation from './SettingsNavigation'
+import PageHeading from './PageHeading'
 
 type AdminShellProps = {
   title: string
@@ -16,14 +17,7 @@ export default function AdminShell({ title, subtitle, actions, rail, children }:
     <div className="admin-shell admin-shell--top-nav">
       <SettingsNavigation />
       <main className="card admin-card">
-        <div className="admin-header">
-          <div>
-            <span className="section-kicker">Configuration</span>
-            <h1>{title}</h1>
-            {subtitle && <p className="lede">{subtitle}</p>}
-          </div>
-          {actions}
-        </div>
+        <PageHeading title={title} description={subtitle} actions={actions} />
         {children}
         {rail && <details className="admin-supplemental"><summary>Additional information</summary>{rail}</details>}
       </main>

frontend/app/ui/ApplicationChrome.tsx

@@ -10,7 +10,7 @@ import WorkspaceNavigation from './WorkspaceNavigation'
 
 export default function ApplicationChrome() {
   const pathname = usePathname()
-  if (pathname === '/login') return null
+  if (['/login', '/forgot-password', '/reset-password', '/signup'].includes(pathname)) return null
   return <>
     <header className="header">
       <div className="header-left"><a className="brand-link" href="/"><BrandingLogo className="brand-logo brand-logo--header" /><div className="brand-stack"><div className="brand">Magent</div><div className="tagline">GrizzlyFlix media operations</div></div></a></div>

frontend/app/ui/AuthLayout.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+import MagentMark from './MagentMark'
+
+export default function AuthLayout({ title, description, children, footer }: {
+  title: string
+  description: string
+  children: ReactNode
+  footer?: ReactNode
+}) {
+  return (
+    <main className="login-page">
+      <section className="login-card" aria-labelledby="login-title">
+        <div className="login-brand"><a href="/login" aria-label="Magent sign in"><MagentMark /><span>Magent</span></a><span className="login-beta">Beta</span></div>
+        <header><h1 id="login-title">{title}</h1><p>{description}</p></header>
+        {children}
+        {footer && <footer>{footer}</footer>}
+      </section>
+      <p className="login-credit">Grizzlyflix · Request. Watch. Enjoy.</p>
+    </main>
+  )
+}

frontend/app/ui/PageHeading.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+
+type PageHeadingProps = {
+  title: string
+  description?: string
+  eyebrow?: string
+  leading?: ReactNode
+  actions?: ReactNode
+}
+
+/** A flat, shared page title. Panels belong to the content below it. */
+export default function PageHeading({ title, description, eyebrow, leading, actions }: PageHeadingProps) {
+  return (
+    <header className="page-heading">
+      <div className="page-heading-main">
+        {leading && <div className="page-heading-leading">{leading}</div>}
+        <div className="page-heading-copy">
+          {eyebrow && <span className="page-heading-eyebrow">{eyebrow}</span>}
+          <h1>{title}</h1>
+          {description && <p>{description}</p>}
+        </div>
+      </div>
+      {actions && <div className="page-heading-actions">{actions}</div>}
+    </header>
+  )
+}