collapse dev tools into disclosure in admin sidebar

LiveDashboard, Errors, and Jobs are now behind a "Developer tools"
toggle, keeping View shop and Log out as the prominent footer links.

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

assets/css/admin/components.css

@@ -3286,6 +3286,35 @@
   border-top: 1px solid var(--t-border-default);
 }
 
+/* Dev tools disclosure in sidebar footer */
+.admin-dev-tools {
+  & > summary {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    color: var(--t-text-secondary);
+    cursor: pointer;
+    list-style: none;
+
+    &::marker, &::-webkit-details-marker { display: none; }
+  }
+
+  & > summary:hover { color: var(--t-text-primary); }
+
+  & .admin-dev-tools-chevron {
+    margin-left: auto;
+    transition: transform 0.15s ease;
+  }
+
+  &[open] .admin-dev-tools-chevron { transform: rotate(90deg); }
+
+  & > .admin-nav {
+    padding-left: 1rem;
+  }
+}
+
 /* Sidebar nav area */
 .admin-sidebar-nav {
   flex: 1;

assets/css/admin/icons.css

@@ -1166,6 +1166,18 @@
   height: 1.5rem;
 }
 
+.hero-wrench-screwdriver {
+  --hero-wrench-screwdriver: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="M11.42%2015.17%2017.25%2021A2.652%202.652%200%200%200%2021%2017.25l-5.877-5.877M11.42%2015.17l2.496-3.03c.317-.384.74-.626%201.208-.766M11.42%2015.17l-4.655%205.653a2.548%202.548%200%201%201-3.586-3.586l6.837-5.63m5.108-.233c.55-.164%201.163-.188%201.743-.14a4.5%204.5%200%200%200%204.486-6.336l-3.276%203.277a3.004%203.004%200%200%201-2.25-2.25l3.276-3.276a4.5%204.5%200%200%200-6.336%204.486c.091%201.076-.071%202.264-.904%202.95l-.102.085m-1.745%201.437L5.909%207.5H4.5L2.25%203.75l1.5-1.5L7.5%204.5v1.409l4.26%204.26m-1.745%201.437%201.745-1.437m6.615%208.206L15.75%2015.75M4.867%2019.125h.008v.008h-.008v-.008Z"/></svg>');
+  -webkit-mask: var(--hero-wrench-screwdriver);
+  mask: var(--hero-wrench-screwdriver);
+  mask-repeat: no-repeat;
+  background-color: currentColor;
+  vertical-align: middle;
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
 .hero-x-circle {
   --hero-x-circle: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="none"%20viewBox="0%200%2024%2024"%20stroke-width="1.5"%20stroke="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20stroke-linecap="round"%20stroke-linejoin="round"%20d="m9.75%209.75%204.5%204.5m0-4.5-4.5%204.5M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200Z"/></svg>');
   -webkit-mask: var(--hero-x-circle);

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

@@ -199,19 +199,29 @@
             </.link>
           </li>
           <li>
-            <.link href={~p"/admin/dashboard"}>
+            <details class="admin-dev-tools">
-              <.icon name="hero-chart-bar" class="size-5" /> LiveDashboard
+              <summary>
-            </.link>
+                <.icon name="hero-wrench-screwdriver" class="size-5" /> Developer tools
-          </li>
+                <.icon name="hero-chevron-right" class="size-4 admin-dev-tools-chevron" />
-          <li>
+              </summary>
-            <.link href={~p"/admin/errors"}>
+              <ul class="admin-nav">
-              <.icon name="hero-bug-ant" class="size-5" /> Errors
+                <li>
-            </.link>
+                  <.link href={~p"/admin/dashboard"}>
-          </li>
+                    <.icon name="hero-chart-bar" class="size-5" /> LiveDashboard
-          <li>
+                  </.link>
-            <.link href={~p"/admin/oban"}>
+                </li>
-              <.icon name="hero-queue-list" class="size-5" /> Jobs
+                <li>
-            </.link>
+                  <.link href={~p"/admin/errors"}>
+                    <.icon name="hero-bug-ant" class="size-5" /> Errors
+                  </.link>
+                </li>
+                <li>
+                  <.link href={~p"/admin/oban"}>
+                    <.icon name="hero-queue-list" class="size-5" /> Jobs
+                  </.link>
+                </li>
+              </ul>
+            </details>
           </li>
           <li>
             <.link href={~p"/users/log-out"} method="delete">