From 3d541dcc1a13615f6ca9813002995d0b162cebce Mon Sep 17 00:00:00 2001
From: Jelte Fennema-Nio <postgres@jeltef.nl>
Date: Thu, 7 Aug 2025 18:52:14 +0200
Subject: [PATCH] Make tag selectors fancy

The tag selection dropdown when creating, editing or searching patches
now look much nicer. It shows the tag color and the tag description
(which is also searchable).
---
 .../commitfest/templates/selectize_js.html    | 110 ++++++++++++------
 pgcommitfest/commitfest/views.py              |  48 ++++++++
 2 files changed, 124 insertions(+), 34 deletions(-)

diff --git a/pgcommitfest/commitfest/templates/selectize_js.html b/pgcommitfest/commitfest/templates/selectize_js.html
index 0991ac65..6da34847 100644
--- a/pgcommitfest/commitfest/templates/selectize_js.html
+++ b/pgcommitfest/commitfest/templates/selectize_js.html
@@ -1,41 +1,83 @@
 <script>
  {% for f, url in form.selectize_fields.items %}
-  $('#id_{{f}}').selectize({
-   plugins: ['remove_button'],
-   valueField: 'id',
-   labelField: 'value',
-   searchField: 'value',
-   {%if url%}
-    load: function(query, callback) {
-     if (!query.length) return callback();
-     $.ajax({
-      'url': '{{url}}',
-      'type': 'GET',
-      'dataType': 'json',
-      'data': {
-       'query': query,
-      },
-      'error': function() { callback();},
-      'success': function(res) { callback(res.values);},
-     });
+  {% if f == 'tags' or f == 'tag' %}
+   $('#id_{{f}}').selectize({
+    plugins: ['remove_button'],
+    valueField: 'id',
+    labelField: 'name',
+    searchField: ['name', 'description'],
+    placeholder: 'Select tags (type to search by name or description)...',
+    {% if tags_data %}
+     options: {{ tags_data|safe }},
+    {% endif %}
+    render: {
+     option: function(item, escape) {
+      return '<div class="option">' +
+      '<span class="tag-color" style="background-color: ' + escape(item.color) + '; width: 12px; height: 12px; display: inline-block; border-radius: 2px; margin-right: 6px;"></span>' +
+      '<strong>' + escape(item.name) + '</strong>' +
+      (item.description ? '<br><small class="text-muted">' + escape(item.description) + '</small>' : '') +
+      '</div>';
+     },
+     item: function(item, escape) {
+      return '<div class="item">' +
+      '<span class="tag-color" style="background-color: ' + escape(item.color) + '; width: 10px; height: 10px; display: inline-block; border-radius: 2px; margin-right: 4px; vertical-align: middle;"></span>' +
+      escape(item.name) +
+      '</div>';
+     }
     },
-   {%endif%}
-   onFocus: function() {
-    if (this.$input.is('[multiple]')) {
-     return;
-    }
-    this.lastValue = this.getValue();
-    this.clear(false);
-   },
-   onBlur: function() {
-    if (this.$input.is('[multiple]')) {
-     return;
-    }
-    if(this.getValue() == '') {
-     this.setValue(this.lastValue);
+    onDropdownOpen: function() {
+     var self = this;
+     var $dropdown = self.$dropdown;
+     var $options = $dropdown.find('[data-selectable]');
+     var totalOptions = self.options ? Object.keys(self.options).length : 0;
+     var visibleOptions = $options.length;
+
+     // Add footer hint if there are more options than visible (due to search filtering or scrolling)
+     if (totalOptions > 6 && !$dropdown.find('.selectize-scroll-hint').length) {
+      $dropdown.append('<div class="selectize-scroll-hint text-center text-muted small py-2 px-3" style="border-top: 1px solid #dee2e6; background-color: #f8f9fa;">' +
+       '⬇ Scroll to see all ' + totalOptions + ' tags, or type to search' +
+       '</div>');
+     }
     }
-   },
-  });
+   });
+  {% else %}
+   $('#id_{{f}}').selectize({
+    plugins: ['remove_button'],
+    valueField: 'id',
+    labelField: 'value',
+    searchField: 'value',
+    {%if url%}
+     load: function(query, callback) {
+      if (!query.length) return callback();
+      $.ajax({
+       'url': '{{url}}',
+       'type': 'GET',
+       'dataType': 'json',
+       'data': {
+        'query': query,
+       },
+       'error': function() { callback();},
+       'success': function(res) { callback(res.values);},
+      });
+     },
+    {%endif%}
+    onFocus: function() {
+     if (this.$input.is('[multiple]')) {
+      return;
+     }
+     this.lastValue = this.getValue();
+     this.clear(false);
+    },
+    onBlur: function() {
+     if (this.$input.is('[multiple]')) {
+      return;
+     }
+     if(this.getValue() == '') {
+      this.setValue(this.lastValue);
+     }
+    },
+   });
+  {% endif %}
  {%endfor%}
 </script>
 
diff --git a/pgcommitfest/commitfest/views.py b/pgcommitfest/commitfest/views.py
index 4e745ba0..215ffcb7 100644
--- a/pgcommitfest/commitfest/views.py
+++ b/pgcommitfest/commitfest/views.py
@@ -604,6 +604,21 @@ def commitfest(request, cfid):
     # the user is logged in. XXX: Figure out how to avoid doing that..
     form = CommitFestFilterForm(request.GET)
 
+    # Prepare tag data for enhanced selectize dropdown
+    import json
+
+    tags_data = json.dumps(
+        [
+            {
+                "id": tag.id,
+                "name": tag.name,
+                "color": tag.color,
+                "description": tag.description,
+            }
+            for tag in Tag.objects.all().order_by("name")
+        ]
+    )
+
     return render(
         request,
         "commitfest.html",
@@ -612,6 +627,7 @@ def commitfest(request, cfid):
             "form": form,
             "patches": patch_list.patches,
             "statussummary": statussummary,
+            "tags_data": tags_data,
             "all_tags": {t.id: t for t in Tag.objects.all()},
             "has_filter": patch_list.has_filter,
             "title": f"{cf.title} ({cf.periodstring})",
@@ -805,6 +821,21 @@ def patchform(request, patchid):
     else:
         form = PatchForm(instance=patch)
 
+    # Prepare tag data for enhanced selectize dropdown
+    import json
+
+    tags_data = json.dumps(
+        [
+            {
+                "id": tag.id,
+                "name": tag.name,
+                "color": tag.color,
+                "description": tag.description,
+            }
+            for tag in Tag.objects.all().order_by("name")
+        ]
+    )
+
     return render(
         request,
         "base_form.html",
@@ -813,6 +844,7 @@ def patchform(request, patchid):
             "form": form,
             "patch": patch,
             "title": "Edit patch",
+            "tags_data": tags_data,
             "breadcrumbs": [
                 {"title": cf.title, "href": "/%s/" % cf.pk},
                 {"title": "View patch", "href": "/%s/%s/" % (cf.pk, patch.pk)},
@@ -861,12 +893,28 @@ def newpatch(request, cfid):
     else:
         form = NewPatchForm(request=request)
 
+    # Prepare tag data for enhanced selectize dropdown
+    import json
+
+    tags_data = json.dumps(
+        [
+            {
+                "id": tag.id,
+                "name": tag.name,
+                "color": tag.color,
+                "description": tag.description,
+            }
+            for tag in Tag.objects.all().order_by("name")
+        ]
+    )
+
     return render(
         request,
         "base_form.html",
         {
             "form": form,
             "title": "New patch",
+            "tags_data": tags_data,
             "breadcrumbs": [
                 {"title": f"{cf.title} ({cf.periodstring})", "href": "/%s/" % cf.pk},
             ],