From 3368b0d1d20fdffca48c8175b468f8736d4e8c98 Mon Sep 17 00:00:00 2001
From: Julien Herr <julien@herr.fr>
Date: Sat, 23 May 2026 21:41:25 +0200
Subject: [PATCH] feat(admin): collapse create-feed form into accordion

Wrap the "Create New Feed" form in a native <details> accordion, collapsed
by default and auto-opened when no feeds exist. After creating a feed,
redirect to the "Your Feeds" anchor so the new feed is immediately visible.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/routes/admin.test.ts   |  2 +-
 src/routes/admin.tsx       | 13 +++++++++----
 src/routes/admin/feeds.tsx |  2 +-
 src/styles/components.css  | 33 +++++++++++++++++++++++++++++++++
 4 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/routes/admin.test.ts b/src/routes/admin.test.ts
index ea70941..4cd54ad 100644
--- a/src/routes/admin.test.ts
+++ b/src/routes/admin.test.ts
@@ -148,7 +148,7 @@ describe("Admin Routes", () => {
         });
 
         expect(res.status).toBe(302); // Redirects back to dashboard
-        expect(res.headers.get("Location")).toBe("/admin?view=list");
+        expect(res.headers.get("Location")).toBe("/admin?view=list#your-feeds");
 
         // Verify feed was created in KV
         const feedList = (await mockEnv.EMAIL_STORAGE.get(
diff --git a/src/routes/admin.tsx b/src/routes/admin.tsx
index 2af2186..8565e64 100644
--- a/src/routes/admin.tsx
+++ b/src/routes/admin.tsx
@@ -383,8 +383,13 @@ app.get("/", async (c) => {
           </div>
         </div>
 
-        <div class="card">
-          <h2>Create New Feed</h2>
+        <details
+          class="card create-feed-card"
+          open={feedsWithConfig.length === 0}
+        >
+          <summary class="create-feed-summary">
+            <h2>Create New Feed</h2>
+          </summary>
           <form action="/admin/feeds/create" method="post">
             <div class="form-group">
               <label for="title">Feed Title</label>
@@ -458,7 +463,7 @@ app.get("/", async (c) => {
               Create Feed
             </button>
           </form>
-        </div>
+        </details>
 
         {message === "bulkDeleted" && (
           <div class="card">
@@ -471,7 +476,7 @@ app.get("/", async (c) => {
           </div>
         )}
 
-        <div class="toolbar">
+        <div class="toolbar" id="your-feeds">
           <div class="toolbar-group">
             <h2 style="margin: 0;">Your Feeds</h2>
             <span class="pill" id="feed-total-count">
diff --git a/src/routes/admin/feeds.tsx b/src/routes/admin/feeds.tsx
index c964937..344f117 100644
--- a/src/routes/admin/feeds.tsx
+++ b/src/routes/admin/feeds.tsx
@@ -212,7 +212,7 @@ feedsRouter.post("/create", async (c) => {
       });
     }
 
-    return c.redirect(`/admin?view=${view}`);
+    return c.redirect(`/admin?view=${view}#your-feeds`);
   } catch (error) {
     logger.error("Error creating feed", { error: String(error) });
     if (c.req.header("Content-Type")?.includes("application/json")) {
diff --git a/src/styles/components.css b/src/styles/components.css
index b03af62..2f35a67 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -13,6 +13,39 @@
   margin-top: 0;
 }
 
+/* Create-feed accordion */
+.create-feed-card > summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  cursor: pointer;
+  list-style: none;
+}
+
+.create-feed-card > summary::-webkit-details-marker {
+  display: none;
+}
+
+.create-feed-summary h2 {
+  margin: 0;
+}
+
+.create-feed-card > summary::after {
+  content: "+";
+  color: var(--color-primary);
+  font-size: var(--font-size-xl);
+  line-height: 1;
+}
+
+.create-feed-card[open] > summary::after {
+  content: "\2212";
+}
+
+.create-feed-card[open] > summary {
+  margin-bottom: var(--spacing-md);
+}
+
 /* Feed header styling */
 .feed-header {
   margin-bottom: var(--spacing-md);