From dba24389370e4bc075908f7ef53926fb0da7d07d Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Wed, 18 Jun 2025 09:59:07 -0500
Subject: [PATCH] Refactor brand management UI; replace datalist with combo box
 widget and enhance styling for better usability

---
 static/css/widget.css   |  20 ++++++++
 static/js/datalist.js   |  20 --------
 templates/layout.html   |  17 +------
 templates/settings.html | 108 ++++++++++++++++++++++------------------
 4 files changed, 82 insertions(+), 83 deletions(-)
 create mode 100644 static/css/widget.css
 delete mode 100644 static/js/datalist.js

diff --git a/static/css/widget.css b/static/css/widget.css
new file mode 100644
index 0000000..237a70d
--- /dev/null
+++ b/static/css/widget.css
@@ -0,0 +1,20 @@
+.combo-box-widget .form-control:focus,
+.combo-box-widget .form-select:focus,
+.combo-box-widget .btn:focus {
+    box-shadow: none !important;
+    outline: none !important;
+    border-color: #ced4da !important; /* Bootstrap’s default neutral border */
+    background-color: inherit; /* Or explicitly #fff if needed */
+    color: inherit;
+}
+
+.combo-box-widget .btn-primary:focus,
+.combo-box-widget .btn-danger:focus {
+    background-color: inherit; /* Keep button from darkening */
+    color: inherit;
+}
+
+.combo-box-widget:focus-within {
+    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
+    border-radius: 0.375rem;
+}
diff --git a/static/js/datalist.js b/static/js/datalist.js
deleted file mode 100644
index d17a9fc..0000000
--- a/static/js/datalist.js
+++ /dev/null
@@ -1,20 +0,0 @@
-document.querySelectorAll('[data-datalist-bind]').forEach(input => {
-    const datalistSelector = input.dataset.datalistBind;
-    const hiddenSelector = input.dataset.hiddenTarget;
-    const datalist = document.querySelector(datalistSelector);
-    const hidden = document.querySelector(hiddenSelector);
-
-    if (!datalist || !hidden) return;
-
-    input.addEventListener('input', function () {
-        const value = this.value;
-        const options = datalist.querySelectorAll('option');
-        let foundId = '';
-        options.forEach(option => {
-            if (option.value === value) {
-                foundId = option.dataset.id || '';
-            }
-        });
-        hidden.value = foundId;
-    });
-});
diff --git a/templates/layout.html b/templates/layout.html
index c6fb91d..fa3f463 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -17,22 +17,10 @@
         href="https://cdn.datatables.net/v/bs5/jq-3.7.0/moment-2.29.4/dt-2.3.2/b-3.2.3/b-colvis-3.2.3/b-print-3.2.3/cr-2.1.1/cc-1.0.4/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sr-1.4.1/datatables.min.css"
         rel="stylesheet" integrity="sha384-gdnBcErvPbrURVoR9w3NhVMliw+ZmcTCmq+64xj2Ksx21nRJFX3qW0zFvBotL5rm"
         crossorigin="anonymous">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/widget.css') }}">
     <style>
         {% block style %}
-        input[type="checkbox"][disabled] {
-            pointer-events: none;
-            opacity: 1;
-            filter: none;
-            appearance: auto;
-            -webkit-appearance: checkbox;
-            background-color: white !important;
-            color: black !important;
-        }
-
-        input[type="checkbox"][disabled]::-moz-checkbox {
-            background-color: white;
-        }
-            {% endblock %}
+        {% endblock %}
     </style>
 </head>
 
@@ -74,7 +62,6 @@
         src="https://cdn.datatables.net/v/bs5/jq-3.7.0/moment-2.29.4/dt-2.3.2/b-3.2.3/b-colvis-3.2.3/b-print-3.2.3/cr-2.1.1/cc-1.0.4/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sr-1.4.1/datatables.min.js"
         integrity="sha384-tNYRX2RiDDDRKCJgPF8Pw3rTxC1GUe1pt5qH1SBmwcazrEUj7Ii4C1Tz9wCCRUI4"
         crossorigin="anonymous"></script>
-    <script src="{{ url_for('static', filename='js/datalist.js') }}"></script>
     <script>
         const searchInput = document.querySelector('#search');
         const searchButton = document.querySelector('#searchButton');
diff --git a/templates/settings.html b/templates/settings.html
index 0cb99b2..0127317 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -12,62 +12,74 @@
 
     <div class="container">
         <label for="brandInput" class="form-label">Brands</label>
-        <div class="input-group">
-            <input type="text" class="form-control rounded-bottom-0" id="brandInput" name="brandInput" placeholder="Add a new brand">
-            <button type="button" class="btn btn-primary rounded-bottom-0" id="addBrandButton" onclick="addBrand();" disabled>
-                {{ icons.plus(16) }}
-            </button>
-            <button type="button" class="btn btn-danger rounded-bottom-0" id="removeBrandButton" onclick="removeSelectedBrands()" disabled>
-                {{ icons.minus(16) }}
-            </button>
-        </div>
-        <select class="form-select border-top-0 rounded-top-0" id="brandList" size="10" multiple>
-            {% for brand in brands %}
+        <div class="combo-box-widget">
+            <div class="input-group">
+                <input type="text" class="form-control rounded-bottom-0" id="brandInput" name="brandInput" placeholder="Add a new brand">
+                <button type="button" class="btn btn-primary rounded-bottom-0" id="addBrandButton" onclick="SettingsPage.addBrand();" disabled>
+                    {{ icons.plus(16) }}
+                </button>
+                <button type="button" class="btn btn-danger rounded-bottom-0" id="removeBrandButton" onclick="SettingsPage.removeSelectedBrands()" disabled>
+                    {{ icons.minus(16) }}
+                </button>
+            </div>
+            <select class="form-select border-top-0 rounded-top-0" id="brandList" size="10" multiple>
+                {% for brand in brands %}
                 <option value="{{ brand.id }}">{{ brand.name }}</option>
-            {% endfor %}
-        </select>
+                {% endfor %}
+            </select>
+        </div>
     </div>
 </form>
 {% endblock %}
 
 {% block script %}
-const brandInput = document.querySelector('#brandInput');
-const brandList = document.querySelector('#brandList');
-const addBrandButton = document.querySelector('#addBrandButton');
-const removeBrandButton = document.querySelector('#removeBrandButton');
+const SettingsPage = (() => {
+    const brandInput = document.querySelector('#brandInput');
+    const brandList = document.querySelector('#brandList');
+    const addBrandButton = document.querySelector('#addBrandButton');
+    const removeBrandButton = document.querySelector('#removeBrandButton');
+    let tempIdCounter = -1;
 
-brandInput.addEventListener('input', () => {
-    addBrandButton.disabled = brandInput.value.trim() === '';
-});
+    function init() {
+        brandInput.addEventListener('input', () => {
+            addBrandButton.disabled = brandInput.value.trim() === '';
+        });
 
-brandList.addEventListener('change', () => {
-    removeBrandButton.disabled = brandList.selectedOptions.length === 0;
-});
-
-function sortOptions() {
-    const options = Array.from(brandList.options);
-    options.sort((a, b) => a.text.localeCompare(b.text));
-    brandList.innerHTML = '';
-    options.forEach(option => brandList.appendChild(option));
-}
-
-let tempIdCounter = -1;
-
-function addBrand() {
-    const newBrand = brandInput.value.trim();
-    if (newBrand) {
-        const option = document.createElement('option');
-        option.textContent = newBrand;
-        option.value = tempIdCounter--;
-        brandList.appendChild(option);
-        brandInput.value = '';
-        addBrandButton.disabled = true;
-        sortOptions();
+        brandList.addEventListener('change', () => {
+            removeBrandButton.disabled = brandList.selectedOptions.length === 0;
+        });
     }
-}
 
-function removeSelectedBrands() {
-    Array.from(brandList.selectedOptions).forEach(option => option.remove());
-    removeBrandButton.disabled = true;
-}
+    function addBrand() {
+        const newBrand = brandInput.value.trim();
+        if (newBrand) {
+            const option = document.createElement('option');
+            option.textContent = newBrand;
+            option.value = tempIdCounter--;
+            brandList.appendChild(option);
+            brandInput.value = '';
+            addBrandButton.disabled = true;
+            sortOptions();
+        }
+    }
+
+    function removeSelectedBrands() {
+        Array.from(brandList.selectedOptions).forEach(option => option.remove());
+        removeBrandButton.disabled = true;
+    }
+
+    function sortOptions() {
+        Array.from(brandList.options)
+            .sort((a, b) => a.text.localeCompare(b.text))
+            .forEach(option => brandList.appendChild(option));
+    }
+
+    return {
+        init,
+        addBrand,
+        removeSelectedBrands
+    };
+})();
+
+document.addEventListener('DOMContentLoaded', SettingsPage.init);
 {% endblock %}
\ No newline at end of file