Enhance settings page; integrate combo box widgets for brands, types, sections, and functions, and add pencil icon for editing functionality

templates/fragments/_combobox_fragment.html

@@ -0,0 +1,29 @@
+{% import "fragments/_icon_fragment.html" as icons %}
+
+{% macro render_combobox(id, options, label=none, placeholder=none) %}
+    {% if label %}
+        <label for="{{ id }}-input" class="form-label">{{ label }}</label>
+    {% endif %}
+    <div class="combo-box-widget" id="{{ id }}-container">
+        <div class="input-group">
+            <input type="text" class="form-control rounded-bottom-0" id="{{ id }}-input"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}>
+            <button type="button" class="btn btn-primary rounded-bottom-0" id="{{ id }}-add" disabled>
+                {{ icons.plus(16) }}
+            </button>
+            <button type="button" class="btn btn-danger rounded-bottom-0" id="{{ id }}-remove" disabled>
+                {{ icons.minus(16) }}
+            </button>
+        </div>
+        <select class="form-select border-top-0 rounded-top-0" id="{{ id }}-list" name="{{ id }}" size="10" multiple>
+            {% for option in options %}
+            <option value="{{ option.id }}">{{ option.name }}</option>
+            {% endfor %}
+        </select>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            ComboBoxWidget.initComboBox("{{ id }}");
+        });
+    </script>
+{% endmacro %}