admin layout redesign

frontend/src/layouts/Layout.astro

@@ -7,6 +7,7 @@ import '@fontsource-variable/jetbrains-mono';
 import ThemeSwitcher from '../components/react/ThemeSwitcher';
 import Search from '../components/react/Search';
 import LogoutButton from '../components/react/LogoutButton';
+import EditableText from '../components/react/EditableText';
 
 interface Props {
 	title: string;
@@ -80,10 +81,34 @@ const fullTitle = `${title} | ${siteConfig.title}`;
         <nav class="max-w-6xl mx-auto px-4 md:px-6 py-4 md:py-8">
             <header class="glass px-4 py-3 md:px-6 md:py-4 flex flex-col md:flex-row items-center justify-between gap-4">
                 <div class="w-full md:w-auto text-center md:text-left">
-                    <a href="/" class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-mauve to-blue block">
-                        {siteConfig.title}
-                    </a>
-                    <p class="text-[8px] md:text-[10px] text-subtext0 uppercase tracking-widest">{siteConfig.subtitle}</p>
+                    {isAdmin ? (
+                        <EditableText
+                            client:load
+                            initial={siteConfig.title}
+                            fieldKey="title"
+                            isAdmin
+                            ariaLabel="site title"
+                            className="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-mauve to-blue inline-block"
+                        />
+                    ) : (
+                        <a href="/" class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-mauve to-blue block">
+                            {siteConfig.title}
+                        </a>
+                    )}
+                    {isAdmin ? (
+                        <div class="text-[8px] md:text-[10px] text-subtext0 uppercase tracking-widest">
+                            <EditableText
+                                client:load
+                                initial={siteConfig.subtitle}
+                                fieldKey="subtitle"
+                                isAdmin
+                                ariaLabel="site subtitle"
+                                className="inline"
+                            />
+                        </div>
+                    ) : (
+                        <p class="text-[8px] md:text-[10px] text-subtext0 uppercase tracking-widest">{siteConfig.subtitle}</p>
+                    )}
                 </div>
                 <div class="flex gap-2 md:gap-3 items-center text-sm md:text-base w-full md:w-auto justify-center md:justify-end">
                     <a href="/" class="text-subtext0 hover:text-text transition-colors px-2 py-1">Home</a>
@@ -91,9 +116,9 @@ const fullTitle = `${title} | ${siteConfig.title}`;
                     {isAdmin && (
                         <div class="flex items-center gap-1 pl-2 ml-1 border-l border-surface1/60">
                             <a
-                                href="/admin"
+                                href="/"
                                 class="inline-flex items-center gap-1.5 text-xs uppercase tracking-wider px-2.5 py-1 rounded-full bg-mauve/15 text-mauve border border-mauve/30 hover:bg-mauve/25 transition-colors"
-                                title="Admin dashboard"
+                                title="Signed in as admin"
                             >
                                 <span class="w-1.5 h-1.5 rounded-full bg-mauve animate-pulse"></span>
                                 Admin
@@ -111,7 +136,18 @@ const fullTitle = `${title} | ${siteConfig.title}`;
         </main>
 
         <footer class="max-w-6xl mx-auto px-4 md:px-6 py-8 md:py-12 text-center text-xs md:text-sm text-subtext1 border-t border-white/5 mt-8 md:mt-12">
-            <p class="mb-2">{siteConfig.footer}</p>
+            <p class="mb-2">
+                {isAdmin ? (
+                    <EditableText
+                        client:load
+                        initial={siteConfig.footer}
+                        fieldKey="footer"
+                        isAdmin
+                        ariaLabel="footer text"
+                        className="inline"
+                    />
+                ) : siteConfig.footer}
+            </p>
             <div class="text-xs text-subtext0 mb-2">
                 <a href="/feed.xml" class="hover:text-mauve transition-colors">RSS</a>
             </div>