From f58c55a1ff7e0a87415b32ab6ba82cce622f1b5f Mon Sep 17 00:00:00 2001
From: Francisco Penedo Alvarez <fran@franpenedo.com>
Date: Sat, 21 Mar 2026 21:38:29 +0100
Subject: [PATCH] Make user selector html only

---
 src/hxbooks/templates/base.html.j2            | 33 ++++++++-----
 .../templates/components/header.html.j2       | 46 ++++++-------------
 2 files changed, 35 insertions(+), 44 deletions(-)

diff --git a/src/hxbooks/templates/base.html.j2 b/src/hxbooks/templates/base.html.j2
index 2c5aa19..e810be4 100644
--- a/src/hxbooks/templates/base.html.j2
+++ b/src/hxbooks/templates/base.html.j2
@@ -17,19 +17,20 @@
 
   <script src="{{ url_for('static', filename='htmx.min.js') }}"></script>
   {#
-  <script src="{{ url_for('static', filename='alpine.min.js') }}" defer></script> #}
-  {#
-  <script src="{{ url_for('static', filename='tom-select.complete.min.js') }}"></script> #}
+  < script src="{{ url_for('static', filename='alpine.min.js') }}" defer>
+  </script> #}
+    {#
+    <script src="{{ url_for('static', filename='tom-select.complete.min.js') }}"></script> #}
 
-  <script>
-    // HTMX error handling
-    document.addEventListener('htmx:responseError', function (evt) {
-      const error_dialog = document.querySelector('#error-alert');
-      error_dialog.querySelector('.modal-title').textContent = 'Error ' + evt.detail.xhr.status;
-      error_dialog.querySelector('.modal-body').innerHTML = evt.detail.xhr.response;
-      new bootstrap.Modal(error_dialog).show();
-    });
-  </script>
+    <script>
+      // HTMX error handling
+      document.addEventListener('htmx:responseError', function (evt) {
+        const error_dialog = document.querySelector('#error-alert');
+        error_dialog.querySelector('.modal-title').textContent = 'Error ' + evt.detail.xhr.status;
+        error_dialog.querySelector('.modal-body').innerHTML = evt.detail.xhr.response;
+        new bootstrap.Modal(error_dialog).show();
+      });
+    </script>
 
 </head>
 
@@ -90,6 +91,14 @@
 
   <!-- Bootstrap JS -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+
+  <script>
+    htmx.onLoad(function (content) {
+      content.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(function (dropdownToggle) {
+        new bootstrap.Dropdown(dropdownToggle);
+      });
+    })
+  </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/hxbooks/templates/components/header.html.j2 b/src/hxbooks/templates/components/header.html.j2
index 405251b..c01dc6a 100644
--- a/src/hxbooks/templates/components/header.html.j2
+++ b/src/hxbooks/templates/components/header.html.j2
@@ -14,40 +14,22 @@
 
     <!-- User Selector -->
     <div class="navbar-nav ms-auto">
-      <div class="nav-item dropdown position-static">
-        <button class="btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown"
-          data-bs-boundary="viewport" data-bs-reference="parent">
-          {% if session.get('viewing_as_user') %}
-          👤 {{ session.get('viewing_as_user') }}
-          {% else %}
-          🌐 All Users
-          {% endif %}
-        </button>
-        <ul class="dropdown-menu dropdown-menu-end mobile-dropdown">
-          <li>
-            <h6 class="dropdown-header">View as User</h6>
-          </li>
-          <li>
-            <a class="dropdown-item {% if not session.get('viewing_as_user') %}active{% endif %}"
-              href="{{ url_for('main.set_viewing_user', username='') }}">
-              🌐 All Users
-            </a>
-          </li>
-          {% if users %}
-          <li>
-            <hr class="dropdown-divider">
-          </li>
+      <form action="" method="get" class="d-flex align-items-center">
+        <label for="user-select" class="text-white me-2 mb-0 d-none d-sm-inline">View as:</label>
+        <select id="user-select" name="user-select" class="form-select form-select-sm"
+          onchange="window.location.href=this.value" style="max-width: 120px; min-width: 100px;">
+          <option value="{{ url_for('main.set_viewing_user', username='') }}" {% if not session.get('viewing_as_user')
+            %}selected{% endif %}>
+            🌐 All Users
+          </option>
           {% for user in users %}
-          <li>
-            <a class="dropdown-item {% if session.get('viewing_as_user') == user.username %}active{% endif %}"
-              href="{{ url_for('main.set_viewing_user', username=user.username) }}">
-              👤 {{ user.username.title() }}
-            </a>
-          </li>
+          <option value="{{ url_for('main.set_viewing_user', username=user.username) }}" {% if
+            session.get('viewing_as_user')==user.username %}selected{% endif %}>
+            👤 {{ user.username.title() }}
+          </option>
           {% endfor %}
-          {% endif %}
-        </ul>
-      </div>
+        </select>
+      </form>
     </div>
   </div>
 </header>
\ No newline at end of file