Refactor brand management UI; replace datalist with combo box widget and enhance styling for better usability

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;
+}

static/js/datalist.js

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

templates/layout.html

@@ -17,21 +17,9 @@
         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 %}
     </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');

templates/settings.html

@@ -12,12 +12,13 @@
 
     <div class="container">
         <label for="brandInput" class="form-label">Brands</label>
+        <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="addBrand();" disabled>
+                <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="removeSelectedBrands()" disabled>
+                <button type="button" class="btn btn-danger rounded-bottom-0" id="removeBrandButton" onclick="SettingsPage.removeSelectedBrands()" disabled>
                     {{ icons.minus(16) }}
                 </button>
             </div>
@@ -27,15 +28,19 @@
                 {% endfor %}
             </select>
         </div>
+    </div>
 </form>
 {% endblock %}
 
 {% block script %}
+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;
 
+    function init() {
         brandInput.addEventListener('input', () => {
             addBrandButton.disabled = brandInput.value.trim() === '';
         });
@@ -43,16 +48,8 @@ brandInput.addEventListener('input', () => {
         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) {
@@ -70,4 +67,19 @@ 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 %}