From 70cc754f3e871d0fff64f8cfaea8cb90fb4c266b Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Wed, 25 Oct 2023 10:45:33 -0500
Subject: [PATCH] Use `<b-select>` for theme picker

instead of webhelpers2.html.tags.select() which seems to break for me
in dev now with python 3.10
---
 tailbone/static/css/layout.css |  4 ----
 tailbone/subscribers.py        |  2 +-
 tailbone/templates/base.mako   | 22 ++++++++++++++++------
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/tailbone/static/css/layout.css b/tailbone/static/css/layout.css
index bdf35410..20dbf6b7 100644
--- a/tailbone/static/css/layout.css
+++ b/tailbone/static/css/layout.css
@@ -57,10 +57,6 @@ header span.header-text {
     margin-right: 10px;
 }
 
-header .level .theme-picker {
-    display: inline-flex;
-}
-
 #content-title h1 {
     margin-bottom: 0;
     margin-right: 1rem;
diff --git a/tailbone/subscribers.py b/tailbone/subscribers.py
index b724a4c5..1143b510 100644
--- a/tailbone/subscribers.py
+++ b/tailbone/subscribers.py
@@ -158,7 +158,7 @@ def before_render(event):
                                                        default=['falafel'])
             if 'default' not in available:
                 available.insert(0, 'default')
-            options = [tags.Option(theme) for theme in available]
+            options = [tags.Option(theme, value=theme) for theme in available]
             renderer_globals['theme_picker_options'] = options
 
         # heck while we're assuming the classic web app here...
diff --git a/tailbone/templates/base.mako b/tailbone/templates/base.mako
index 8558eeb7..53dc3423 100644
--- a/tailbone/templates/base.mako
+++ b/tailbone/templates/base.mako
@@ -392,13 +392,19 @@
             % if expose_theme_picker and request.has_perm('common.change_app_theme'):
                 <div class="level-item">
                   ${h.form(url('change_theme'), method="post", ref='themePickerForm')}
-                  ${h.csrf_token(request)}
-                  Theme:
-                  <div class="theme-picker">
-                    <div class="select">
-                      ${h.select('theme', theme, theme_picker_options, **{'@change': 'changeTheme()'})}
+                    ${h.csrf_token(request)}
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                      <span>Theme:</span>
+                      <b-select name="theme"
+                                v-model="globalTheme"
+                                @change="changeTheme()">
+                        % for option in theme_picker_options:
+                            <option value="${option.value}">
+                              ${option.label}
+                            </option>
+                        % endfor
+                      </b-select>
                     </div>
-                  </div>
                   ${h.end_form()}
                 </div>
             % endif
@@ -840,6 +846,10 @@
         contentTitleHTML: ${json.dumps(capture(self.content_title))|n},
         feedbackMessage: "",
 
+        % if expose_theme_picker and request.has_perm('common.change_app_theme'):
+            globalTheme: ${json.dumps(theme)|n},
+        % endif
+
         % if can_edit_help:
             configureFieldsHelp: false,
         % endif