misc: add search filter on theme selection page (#74800)

hobo/static/css/style.scss

@@ -387,3 +387,7 @@ div.app-parameters--values label {
 	display: block;
 	font-weight: bold;
 }
+
+#theme-filter {
+	margin-bottom: 1em;
+}

hobo/static/js/hobo.js

@@ -39,4 +39,20 @@ $(function() {
     if ($id_name.data('_changed')) return;
     $id_name.val(URLify($(this).val()).replace(/-/g, '_').substring(0, 50));
   });
+
+  $('#theme-filter-input').on('change keyup', function() {
+    var q = $(this).val();
+    if (q) {
+      q = window.URLify(q, 50);
+      $('#themes-list > div').each(function(idx, elem) {
+        if ($(elem).data('search').indexOf(q) > -1) {
+          $(elem).show();
+        } else {
+          $(elem).hide();
+        }
+      });
+    } else {
+      $('#themes-list > div').show();
+    }
+  });
 });

hobo/theme/templates/hobo/theme_home.html

@@ -1,6 +1,11 @@
 {% extends "hobo/base.html" %}
 {% load i18n %}
 
+{% block extrascripts %}
+  {{ block.super }}
+  <script src="/static/admin/js/urlify.js"></script>
+{% endblock %}
+
 {% block breadcrumb %}
   {{ block.super }}
   <a href="{% url 'theme-home' %}">{% trans 'Theme' %}</a>
@@ -14,13 +19,19 @@
 {% endblock %}
 
 {% block content %}
+  {% if selected_theme %}
+    <p>{% trans "Current theme:" %} {{ selected_theme.label }}</p>
+  {% endif %}
 
+  <div id="theme-filter">
+    {% trans "Filter:" %} <input type="search" name="q" id="theme-filter-input" autocomplete="off">
+  </div>
   <form action="{% url 'theme-select' %}" method="post">
     {% csrf_token %}
     <div class="objects-list" id="themes-list">
       {% for theme in themes %}
-        <div data-id="{{theme.id}}">
-          <label style="border-color: {{theme.variables.theme_color}}"><input type="radio" name="theme" value="{{theme.id}}" {% if theme.id == selected_theme %}checked="checked"{% endif %}/>{{theme.label}}</label>
+        <div data-id="{{theme.id}}" data-search="{{ theme.id }} {{ theme.label|slugify }}">
+          <label style="border-color: {{theme.variables.theme_color}}"><input type="radio" name="theme" value="{{theme.id}}" {% if theme.id == selected_theme.id %}checked="checked"{% endif %}/>{{theme.label}}</label>
         </div>
       {% endfor %}
     </div>

hobo/theme/views.py

@@ -25,7 +25,7 @@ from django.views.generic import RedirectView, TemplateView
 from hobo.environment.forms import VariablesFormMixin
 
 from .forms import ThemeOptionsForm
-from .utils import get_selected_theme, get_themes, set_theme
+from .utils import get_selected_theme, get_theme, get_themes, set_theme
 
 
 class HomeView(TemplateView):
@@ -46,7 +46,7 @@ class HomeView(TemplateView):
         if random.random() < 0.1:
             # easter egg, sometimes it gets sorted by colour
             context['themes'].sort(key=hsv)
-        context['selected_theme'] = get_selected_theme()
+        context['selected_theme'] = get_theme(get_selected_theme())
 
         return context