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

@@ -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;

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...

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)}
+                    ${h.csrf_token(request)}
-                  Theme:
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
-                  <div class="theme-picker">
+                      <span>Theme:</span>
-                    <div class="select">
+                      <b-select name="theme"
-                      ${h.select('theme', theme, theme_picker_options, **{'@change': 'changeTheme()'})}
+                                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