updated season league view page

internal/embedfs/web/js/admin.js

@@ -236,45 +236,18 @@ function sortRolesColumn(field, currentOrder, currentOrderBy) {
 }
 
 // Handle HTMX navigation and initialization
+// Tab navigation active state is handled by tabs.js (generic).
+// This file only handles admin-specific concerns (flatpickr, multi-select).
 document.addEventListener("DOMContentLoaded", function () {
   // Initialize flatpickr on page load
   initFlatpickr();
 
-  // Update active nav item after HTMX navigation
   document.body.addEventListener("htmx:afterSwap", function (event) {
-    if (event.detail.target.id === "admin-content") {
-      // Get the current URL path
-      const path = window.location.pathname;
-      const section = path.split("/").pop() || "users";
-
-      // Update active state on nav items
-      document.querySelectorAll("nav a").forEach(function (link) {
-        const href = link.getAttribute("href");
-        if (href && href.includes("/" + section)) {
-          link.classList.remove(
-            "border-transparent",
-            "text-subtext0",
-            "hover:text-text",
-            "hover:border-surface2"
-          );
-          link.classList.add("border-blue", "text-blue", "font-semibold");
-        } else {
-          link.classList.remove("border-blue", "text-blue", "font-semibold");
-          link.classList.add(
-            "border-transparent",
-            "text-subtext0",
-            "hover:text-text",
-            "hover:border-surface2"
-          );
-        }
-      });
-
-      // Re-initialize flatpickr after content swap
-      initFlatpickr();
-    }
-
-    // Re-initialize flatpickr when audit results are updated
-    if (event.detail.target.id === "audit-results-container") {
+    // Re-initialize flatpickr after admin content swap
+    if (
+      event.detail.target.id === "admin-content" ||
+      event.detail.target.id === "audit-results-container"
+    ) {
       initFlatpickr();
     }
   });

internal/embedfs/web/js/tabs.js

@@ -0,0 +1,50 @@
+// Generic tab navigation handler
+// Manages active tab styling after HTMX content swaps.
+//
+// Usage: Add data-tab-nav="<content-target-id>" to your <nav> element.
+// Tab links inside the nav should have href attributes ending with the section name.
+//
+// Example:
+//   <nav data-tab-nav="admin-content">
+//     <a href="/admin/users" hx-post="/admin/users" hx-target="#admin-content">Users</a>
+//   </nav>
+//   <main id="admin-content">...</main>
+
+(function () {
+  var activeClasses = ["border-blue", "text-blue", "font-semibold"];
+  var inactiveClasses = [
+    "border-transparent",
+    "text-subtext0",
+    "hover:text-text",
+    "hover:border-surface2",
+  ];
+
+  function updateActiveTab(targetId) {
+    var nav = document.querySelector('[data-tab-nav="' + targetId + '"]');
+    if (!nav) return;
+
+    var path = window.location.pathname;
+    var section = path.split("/").pop() || "";
+
+    nav.querySelectorAll("a").forEach(function (link) {
+      var href = link.getAttribute("href");
+      var isActive = href && href.endsWith("/" + section);
+
+      activeClasses.forEach(function (cls) {
+        isActive ? link.classList.add(cls) : link.classList.remove(cls);
+      });
+      inactiveClasses.forEach(function (cls) {
+        isActive ? link.classList.remove(cls) : link.classList.add(cls);
+      });
+    });
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    document.body.addEventListener("htmx:afterSwap", function (event) {
+      var targetId = event.detail.target.id;
+      if (targetId) {
+        updateActiveTab(targetId);
+      }
+    });
+  });
+})();