improve email settings progressive enhancement and admin layout

- semantic HTML: step numbers inside h2, strong provider names, details
  for adapter configs, strong error messages, fieldset drawer toggle hidden
- inline field errors via flash for no-JS controller fallback
- single form POST button for test email (works with and without JS)
- admin sidebar: remove brand/view-shop, move user email to footer nav
- replace inline style with .admin-setup-step-spaced class
- clean up unused CSS (.admin-brand, .admin-sidebar-header, etc.)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/css/admin/components.css

@@ -1510,6 +1510,9 @@
 }
 
 .card-radio-name {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
   font-size: 0.875rem;
   font-weight: 600;
 }
@@ -3391,26 +3394,21 @@
   margin-inline: auto;
 }
 
-/* Sidebar header (logo + user email) */
-.admin-sidebar-header {
-  padding: 1rem;
-  border-bottom: 1px solid var(--t-border-default);
-
-  & .admin-text-secondary { margin-top: 0.125rem; }
-}
-
-/* View shop link below sidebar header */
-.admin-sidebar-view-shop {
-  padding: 0.5rem;
-  border-bottom: 1px solid var(--t-border-default);
-}
-
 /* Sidebar footer (dev tools, log out) */
 .admin-sidebar-footer {
   padding: 0.5rem;
   border-top: 1px solid var(--t-border-default);
 }
 
+.admin-sidebar-email {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  color: var(--t-text-secondary);
+}
+
 /* Dev tools disclosure in sidebar footer */
 .admin-dev-tools {
   & > summary {
@@ -3446,14 +3444,6 @@
   padding: 0.5rem;
 }
 
-/* Brand wordmark in sidebar */
-.admin-brand {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  font-weight: 700;
-  letter-spacing: -0.025em;
-}
-
 /* Secondary text for user email, help text, meta info */
 .admin-text-secondary {
   font-size: 0.75rem;
@@ -4294,10 +4284,16 @@
   gap: 0.5rem;
 }
 
+.admin-setup-step-spaced { margin-top: 1.5rem; }
+
 .admin-setup-step-header {
   display: flex;
   align-items: center;
   gap: 0.625rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--admin-text-primary);
+  margin: 0;
 }
 
 .admin-setup-step-number {
@@ -4314,13 +4310,6 @@
   flex-shrink: 0;
 }
 
-.admin-setup-step-title {
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: var(--admin-text-primary);
-  margin: 0;
-}
-
 .admin-setup-step-desc {
   font-size: 0.8125rem;
   color: var(--admin-text-secondary);
@@ -4379,6 +4368,9 @@
   gap: 1.5rem;
 }
 
+/* Hide the <details> summary — CSS :has(:checked) controls visibility instead */
+.admin-adapter-config-summary { display: none; }
+
 /* Show only the adapter config matching the checked radio */
 .admin-adapter-config[data-adapter] { display: none; }
 

lib/berrypod_web/components/core_components.ex

@@ -288,7 +288,7 @@ defmodule BerrypodWeb.CoreComponents do
     ~H"""
     <p class="admin-error" id={@id} role="alert">
       <.icon name="hero-exclamation-circle" class="admin-error-icon" />
-      {render_slot(@inner_block)}
+      <strong>{render_slot(@inner_block)}</strong>
     </p>
     """
   end

lib/berrypod_web/components/layouts/admin.html.heex

@@ -1,5 +1,5 @@
 <div class="admin-layout">
-  <input id="admin-drawer" type="checkbox" class="admin-layout-toggle" />
+  <input id="admin-drawer" type="checkbox" class="admin-layout-toggle" hidden />
 
   <%!-- main content area --%>
   <div class="admin-layout-content">
@@ -20,6 +20,7 @@
 
     <%!-- page content --%>
     <main class="admin-main">
+      <.flash_group flash={@flash} />
       <div class="admin-container">
         {@inner_content}
       </div>
@@ -30,23 +31,6 @@
   <div class="admin-sidebar-wrapper">
     <label for="admin-drawer" class="admin-sidebar-overlay" aria-label="Close navigation"></label>
     <aside class="admin-sidebar">
-      <%!-- sidebar header --%>
-      <div class="admin-sidebar-header">
-        <.link navigate={~p"/admin"} class="admin-brand">
-          Berrypod
-        </.link>
-        <p class="admin-text-secondary truncate">
-          {@current_scope.user.email}
-        </p>
-      </div>
-
-      <%!-- view shop link --%>
-      <div class="admin-sidebar-view-shop">
-        <.link href={~p"/"} class="admin-btn admin-btn-ghost admin-btn-sm admin-btn-block">
-          <.icon name="hero-arrow-top-right-on-square" class="size-4" /> View shop
-        </.link>
-      </div>
-
       <%!-- nav links --%>
       <nav class="admin-sidebar-nav" aria-label="Admin navigation">
         <div class="admin-nav-group">
@@ -189,6 +173,9 @@
       <%!-- sidebar footer --%>
       <div class="admin-sidebar-footer">
         <ul class="admin-nav">
+          <li class="admin-sidebar-email truncate">
+            <.icon name="hero-user" class="size-5" /> {@current_scope.user.email}
+          </li>
           <li>
             <details class="admin-dev-tools">
               <summary>
@@ -224,5 +211,3 @@
     </aside>
   </div>
 </div>
-
-<.flash_group flash={@flash} />

lib/berrypod_web/controllers/email_settings_controller.ex

@@ -21,10 +21,9 @@ defmodule BerrypodWeb.EmailSettingsController do
         |> redirect(to: ~p"/admin/settings/email")
 
       {:error, field_errors} when is_map(field_errors) ->
-        message = field_errors |> Map.values() |> Enum.join(". ")
-
         conn
-        |> put_flash(:error, message)
+        |> put_flash(:field_errors, field_errors)
+        |> put_flash(:error_adapter, adapter_key)
         |> redirect(to: ~p"/admin/settings/email")
     end
   end

lib/berrypod_web/live/admin/email_settings.ex

@@ -11,7 +11,11 @@ defmodule BerrypodWeb.Admin.EmailSettings do
     {current_adapter, _current_values} = Mailer.current_config()
     saved_adapter = Settings.get_setting("email_adapter")
 
-    adapter_key = current_adapter || saved_adapter
+    # Controller fallback passes errors via flash after failed validation
+    flash_adapter = Phoenix.Flash.get(socket.assigns.flash, :error_adapter)
+    flash_errors = Phoenix.Flash.get(socket.assigns.flash, :field_errors) || %{}
+
+    adapter_key = flash_adapter || current_adapter || saved_adapter
     grouped = Adapters.grouped()
     all_adapters = Adapters.all()
     all_values = load_all_adapter_values()
@@ -32,7 +36,7 @@ defmodule BerrypodWeb.Admin.EmailSettings do
      |> assign(:test_error, nil)
      |> assign(:test_retryable, false)
      |> assign(:from_checklist, false)
-     |> assign(:field_errors, %{})
+     |> assign(:field_errors, flash_errors)
      |> assign(:form, to_form(%{}, as: :email))}
   end
 
@@ -188,10 +192,9 @@ defmodule BerrypodWeb.Admin.EmailSettings do
         >
           <%!-- Step 1: Choose a provider --%>
           <div class="admin-setup-step">
-            <div class="admin-setup-step-header">
+            <h2 class="admin-setup-step-header">
-              <span class="admin-setup-step-number">1</span>
+              <span class="admin-setup-step-number">1</span> Choose a provider
-              <h2 class="admin-setup-step-title">Choose a provider</h2>
+            </h2>
-            </div>
 
             <fieldset class="card-radio-fieldset" disabled={@env_locked}>
               <legend class="sr-only">Email provider</legend>
@@ -205,7 +208,10 @@ defmodule BerrypodWeb.Admin.EmailSettings do
                 />
               </div>
 
-              <details class="admin-provider-other">
+              <details
+                class="admin-provider-other"
+                open={@adapter_key in Enum.map(@advanced_adapters, & &1.key)}
+              >
                 <summary class="admin-provider-other-toggle">
                   Already have your own email server?
                 </summary>
@@ -237,10 +243,9 @@ defmodule BerrypodWeb.Admin.EmailSettings do
       <div
         :if={@email_configured}
         id="test-email-step"
-        class="admin-setup-step"
+        class="admin-setup-step admin-setup-step-spaced"
-        style="margin-top: 1.5rem;"
       >
-        <div class="admin-setup-step-header">
+        <h2 class="admin-setup-step-header">
           <span class={[
             "admin-setup-step-number",
             @test_result == :ok && "admin-setup-step-number-done",
@@ -255,17 +260,15 @@ defmodule BerrypodWeb.Admin.EmailSettings do
                 {if @selected_adapter && @selected_adapter.url, do: "4", else: "3"}
             <% end %>
           </span>
-          <h2 class="admin-setup-step-title">
+          <%= cond do %>
-            <%= cond do %>
+            <% @test_result == :ok -> %>
-              <% @test_result == :ok -> %>
+              Email is working
-                Email is working
+            <% @test_result == :error -> %>
-              <% @test_result == :error -> %>
+              Test failed
-                Test failed
+            <% true -> %>
-              <% true -> %>
+              Send a test email
-                Send a test email
+          <% end %>
-            <% end %>
+        </h2>
-          </h2>
-        </div>
 
         <%= if @test_result == :ok do %>
           <p class="admin-setup-step-desc">
@@ -308,35 +311,17 @@ defmodule BerrypodWeb.Admin.EmailSettings do
             <p class="admin-setup-step-desc">
               Send a test to <strong>{@current_scope.user.email}</strong> to check everything works.
             </p>
-            <div class="admin-row admin-row-sm">
+            <.form
-              <%!-- JS: async send via LiveView --%>
+              for={%{}}
-              <span id="test-email-js">
+              action={~p"/admin/settings/email/test"}
-                <.button
+              phx-submit="send_test"
-                  type="button"
+              method="post"
-                  phx-click="send_test"
+              class="admin-row admin-row-sm"
-                  disabled={@sending_test}
+            >
-                  phx-disable-with="Sending..."
+              <.button disabled={@sending_test} phx-disable-with="Sending...">
-                >
+                <.icon name="hero-paper-airplane" class="size-4" /> Send test email
-                  <.icon name="hero-paper-airplane" class="size-4" /> Send test email
+              </.button>
-                </.button>
+            </.form>
-              </span>
-              <%!-- No-JS: form POST fallback (hides the JS button above) --%>
-              <noscript>
-                <style>
-                  #test-email-js { display: none; }
-                </style>
-                <.form
-                  for={%{}}
-                  action={~p"/admin/settings/email/test"}
-                  method="post"
-                  style="display:inline"
-                >
-                  <.button>
-                    <.icon name="hero-paper-airplane" class="size-4" /> Send test email
-                  </.button>
-                </.form>
-              </noscript>
-            </div>
           <% end %>
         <% end %>
       </div>
@@ -354,13 +339,13 @@ defmodule BerrypodWeb.Admin.EmailSettings do
 
   defp adapter_config(assigns) do
     ~H"""
-    <div hidden={!@selected} class="admin-adapter-config" data-adapter={@adapter.key}>
+    <details open={@selected} class="admin-adapter-config" data-adapter={@adapter.key}>
+      <summary class="admin-adapter-config-summary">Configure {@adapter.name}</summary>
       <%!-- Create an account (providers with sign-up URLs) --%>
       <div :if={@adapter.url} class="admin-setup-step">
-        <div class="admin-setup-step-header">
+        <h2 class="admin-setup-step-header">
-          <span class="admin-setup-step-number">2</span>
+          <span class="admin-setup-step-number">2</span> Create a free account
-          <h2 class="admin-setup-step-title">Create a free account</h2>
+        </h2>
-        </div>
         <p class="admin-setup-step-desc">
           <.external_link href={@adapter.url} class="admin-link">
             Sign up at {@adapter.name} &nearr;
@@ -371,12 +356,12 @@ defmodule BerrypodWeb.Admin.EmailSettings do
 
       <%!-- Paste your key / server details --%>
       <div class="admin-setup-step">
-        <div class="admin-setup-step-header">
+        <h2 class="admin-setup-step-header">
           <span class="admin-setup-step-number">
             {if @adapter.url, do: "3", else: "2"}
           </span>
-          <h2 class="admin-setup-step-title">{adapter_fields_title(@adapter)}</h2>
+          {adapter_fields_title(@adapter)}
-        </div>
+        </h2>
         <p class="admin-setup-step-desc">{adapter_fields_instruction(@adapter)}</p>
         <%= for field <- @adapter.fields do %>
           <.adapter_field_input
@@ -395,7 +380,7 @@ defmodule BerrypodWeb.Admin.EmailSettings do
           </div>
         <% end %>
       </div>
-    </div>
+    </details>
     """
   end
 
@@ -435,12 +420,12 @@ defmodule BerrypodWeb.Admin.EmailSettings do
         disabled={@disabled}
         class="card-radio-input"
       />
-      <div class="card-radio-name">
+      <span class="card-radio-name">
-        {@adapter.name}
+        <strong>{@adapter.name}</strong>
         <span :if={@adapter.recommended} class="card-radio-badge card-radio-recommended">
           Recommended
         </span>
-      </div>
+      </span>
       <div :if={@adapter.free_tier} class="card-radio-description">{@adapter.free_tier}</div>
       <div :if={@adapter.setup_hint} class="card-radio-description">{@adapter.setup_hint}</div>
     </label>

test/berrypod_web/controllers/email_settings_controller_test.exs

@@ -33,14 +33,18 @@ defmodule BerrypodWeb.EmailSettingsControllerTest do
       assert Settings.get_setting("email_adapter") == "brevo"
     end
 
-    test "redirects with error on validation failure", %{conn: conn} do
+    test "redirects with field errors on validation failure", %{conn: conn} do
       conn =
         post(conn, ~p"/admin/settings/email", %{
           email: %{adapter: "brevo", brevo: %{api_key: ""}}
         })
 
       assert redirected_to(conn) =~ ~p"/admin/settings/email"
-      assert Phoenix.Flash.get(conn.assigns.flash, :error) =~ "required"
+
+      field_errors = Phoenix.Flash.get(conn.assigns.flash, :field_errors)
+      assert is_map(field_errors)
+      assert field_errors |> Map.values() |> Enum.any?(&String.contains?(&1, "required"))
+      assert Phoenix.Flash.get(conn.assigns.flash, :error_adapter) == "brevo"
     end
   end
 

test/berrypod_web/live/admin/email_settings_test.exs

@@ -252,7 +252,7 @@ defmodule BerrypodWeb.Admin.EmailSettingsTest do
       assert html =~ "sr-only"
     end
 
-    test "only selected adapter config is visible (hidden attribute)", %{conn: conn} do
+    test "only selected adapter config is open (details element)", %{conn: conn} do
       {:ok, view, _html} = live(conn, ~p"/admin/settings/email")
 
       # Select SMTP
@@ -260,12 +260,12 @@ defmodule BerrypodWeb.Admin.EmailSettingsTest do
       |> form("form[phx-change=\"form_change\"]", %{email: %{adapter: "smtp"}})
       |> render_change()
 
-      # SMTP should not be hidden
+      # SMTP details should be open
-      refute has_element?(view, ~s([data-adapter="smtp"][hidden]))
+      assert has_element?(view, ~s(details[data-adapter="smtp"][open]))
-      # Others should be hidden
+      # Others should not be open
-      assert has_element?(view, ~s([data-adapter="brevo"][hidden]))
+      refute has_element?(view, ~s(details[data-adapter="brevo"][open]))
-      assert has_element?(view, ~s([data-adapter="sendgrid"][hidden]))
+      refute has_element?(view, ~s(details[data-adapter="sendgrid"][open]))
-      assert has_element?(view, ~s([data-adapter="postal"][hidden]))
+      refute has_element?(view, ~s(details[data-adapter="postal"][open]))
     end
   end
 

test/berrypod_web/live/admin/layout_test.exs

@@ -43,10 +43,10 @@ defmodule BerrypodWeb.Admin.LayoutTest do
       assert html =~ user.email
     end
 
-    test "shows view shop and log out links", %{conn: conn} do
+    test "shows shop and log out links", %{conn: conn} do
       {:ok, view, _html} = live(conn, ~p"/admin/orders")
 
-      assert has_element?(view, ~s(a[href="/"]), "View shop")
+      assert has_element?(view, ~s(a[href="/"]), "Shop")
       assert has_element?(view, ~s(a[href="/users/log-out"]), "Log out")
     end
   end