From 15292f66fc5621741516e1fc3209c41333e75c80 Mon Sep 17 00:00:00 2001
From: Carlos Arias <hi@carlosarias.com>
Date: Fri, 24 Jul 2026 02:35:20 +0000
Subject: [PATCH] admin: fix login screen showing both panels + add dashboard
 links

- .panel's display:flex was overriding the [hidden] attribute, so the Sign-in
  form and 'You're in' panel showed at once regardless of session. Force
  [hidden] { display:none !important } so they toggle.
- 'You're in' now links to Web Designer, Manage projects, and the site.
---
 app/src/pages/admin/index.astro | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/src/pages/admin/index.astro b/app/src/pages/admin/index.astro
index 11d6aa5..e97f648 100644
--- a/app/src/pages/admin/index.astro
+++ b/app/src/pages/admin/index.astro
@@ -27,6 +27,10 @@ import { SITE } from "../../lib/blog-data.js";
                 --rule:#2a2c33; --seal:#e8564a; --card:#191a1f; }
       }
       * { box-sizing: border-box; }
+      /* .panel sets display:flex, which would otherwise beat the [hidden]
+         attribute's UA display:none — force hidden to win so the login and
+         signed-in panels actually toggle. */
+      [hidden] { display: none !important; }
       body {
         margin: 0; min-height: 100dvh; display: grid; place-items: center;
         background: var(--paper); color: var(--ink); font-family: var(--sans);
@@ -65,6 +69,9 @@ import { SITE } from "../../lib/blog-data.js";
       .steps li { position: relative; padding-left: 1.1rem; font-size: 0.88rem; line-height: 1.5; color: var(--ink3); }
       .steps li::before { content:""; position:absolute; left:0; top:0.62em; width:0.5rem; height:1px; background:var(--seal); }
       a.link { color: var(--ink); border-bottom: 1px solid var(--ink4); text-decoration: none; }
+      .links { display: flex; flex-direction: column; gap: 0.7rem; }
+      .links a { align-self: flex-start; font-size: 0.95rem; }
+      .links a:hover { border-bottom-color: var(--seal); }
       .ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
       .mono-note { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em;
                    text-transform: uppercase; color: var(--ink4); }
@@ -101,12 +108,14 @@ import { SITE } from "../../lib/blog-data.js";
           <h1>You&rsquo;re in.</h1>
           <p class="sub">Signed in as <strong id="who"></strong>. The editing console is now active across the site.</p>
         </div>
+        <div class="links">
+          <a class="link" href="/admin/designer">Web Designer &rarr;</a>
+          <a class="link" href="/admin/projects">Manage projects &rarr;</a>
+          <a class="link" href="/">Go to the site &rarr;</a>
+        </div>
         <ul class="steps">
-          <li>Open any page (start with the <a class="link" href="/">homepage</a>).</li>
-          <li>Click the <strong>▲ astroagent</strong> handle at the bottom.</li>
-          <li>Tell it what to change, review the preview, then Publish.</li>
+          <li>Or open any page and click the <strong>▲ astroagent</strong> handle to edit it in place.</li>
         </ul>
-        <a class="link" href="/" style="font-size:.9rem">Go to the site &rarr;</a>
         <button class="ghost" id="out" type="button" style="margin-top:.4rem">Sign out</button>
       </div>