admin users: nest user detail panels and add clear/reset control

Author: TheQuantifier

web/admin.html

@@ -92,6 +92,7 @@ <h2>Users</h2>
               list="adminUserOptions"
             />
             <button class="btn btn--primary" id="userSearchBtn" type="button">Find User</button>
+            <button class="btn btn--link" id="userClearBtn" type="button" aria-label="Clear selected user data">X</button>
           </div>
         </div>
         <div id="usersPanelBody">
@@ -136,10 +137,7 @@ <h2>Users</h2>
           <span id="usersPageInfo" class="subtle">Page 1 of 1</span>
           <button class="btn" id="usersNextPage" type="button" disabled>Next →</button>
         </nav>
-        </div>
-      </section>
-
-      <section id="userDataSections" class="admin-grid is-hidden">
+        <section id="userDataSections" class="admin-grid is-hidden">
         <section class="card admin-panel" id="recordsPanel">
           <div class="admin-panel-header">
             <div>
@@ -247,6 +245,8 @@ <h2>Budgets</h2>
           </div>
         </section>
       </section>
+        </div>
+      </section>
 
       <section class="card admin-panel" id="settingsPanel">
         <div class="admin-panel-header">

web/scripts/admin.js

@@ -14,6 +14,7 @@ const els = {
   usersStatus: document.getElementById("usersStatus"),
   userSearch: document.getElementById("userSearch"),
   userSearchBtn: document.getElementById("userSearchBtn"),
+  userClearBtn: document.getElementById("userClearBtn"),
   userOptions: document.getElementById("adminUserOptions"),
   usersPrevPage: document.getElementById("usersPrevPage"),
   usersNextPage: document.getElementById("usersNextPage"),
@@ -1154,6 +1155,14 @@ function tryOpenUserDropdown() {
   }
 }
 
+function clearSelectedUserPanels() {
+  if (els.userSearch) {
+    els.userSearch.value = "";
+  }
+  resetUserScopedData();
+  setStatus(els.usersStatus, "");
+}
+
 function bindEvents() {
   document.querySelectorAll(".admin-sort-btn[data-table][data-key]").forEach((btn) => {
     btn.addEventListener("click", () => {
@@ -1167,6 +1176,13 @@ function bindEvents() {
     });
   }
 
+  if (els.userClearBtn) {
+    els.userClearBtn.addEventListener("click", () => {
+      clearSelectedUserPanels();
+      loadUsers({ resetPage: true, evaluateSelection: false });
+    });
+  }
+
   if (els.userSearch) {
     els.userSearch.addEventListener("keydown", (event) => {
       if (event.key === "Enter") {

web/styles/admin.css

@@ -140,6 +140,22 @@
   min-width: 200px;
 }
 
+#userClearBtn {
+  min-width: 2rem;
+  padding-inline: 0.55rem;
+  color: #c81e1e;
+  border: 1px solid color-mix(in srgb, #c81e1e 35%, var(--border));
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, #fff 92%, #ffebeb);
+  font-weight: 700;
+}
+
+#userClearBtn:hover,
+#userClearBtn:focus-visible {
+  color: #8f1414;
+  border-color: color-mix(in srgb, #8f1414 45%, var(--border));
+}
+
 .admin-form {
   display: grid;
   gap: var(--space-3);