From d2d109a69c5524d4946cf5b78d31e47a6323dd9f Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Fri, 26 Jun 2026 09:53:04 +0800
Subject: [PATCH] feat(ui): replace native sort select with custom dropdown
 sized to selected text

---
 static/css/layout.css                         | 151 +++++++++
 static/js/components/controls/PageControls.js |   2 +
 static/js/components/controls/SortDropdown.js | 290 ++++++++++++++++++
 static/js/recipes.js                          |   2 +
 templates/components/controls.html            |   9 +-
 5 files changed, 452 insertions(+), 2 deletions(-)
 create mode 100644 static/js/components/controls/SortDropdown.js

diff --git a/static/css/layout.css b/static/css/layout.css
index 7122cc3b..863a3ba1 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -281,6 +281,157 @@
     box-shadow: none;
 }
 
+/* === Sort dropdown — decoupled trigger width ===========================
+   The native <select> sizes its trigger to the widest <option>, wasting
+   horizontal space when a short option is selected. This custom trigger
+   sizes to the currently selected text only; the dropdown menu sizes to
+   its content independently. The native <select> is kept in the DOM
+   (visually hidden) so existing JS that reads/writes `.value` / `.disabled`
+   and dynamically adds/removes <option>s keeps working. */
+
+.sort-dropdown-group {
+    position: relative;
+    display: flex;
+}
+
+.sort-trigger {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 100px;
+    max-width: 240px;
+    padding: 4px 10px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid var(--border-color);
+    background: var(--card-bg);
+    color: var(--text-color);
+    font-size: 0.85em;
+    cursor: pointer;
+    transition: var(--transition-base);
+    box-shadow: var(--shadow-xs);
+}
+
+.sort-trigger:hover,
+.sort-trigger:focus-visible {
+    border-color: var(--lora-accent);
+    background: var(--bg-color);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-lg);
+    outline: none;
+}
+
+.sort-trigger:active {
+    transform: translateY(0);
+    box-shadow: var(--shadow-xs);
+}
+
+.sort-trigger__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sort-trigger__caret {
+    opacity: 0.8;
+    transition: transform var(--transition-base);
+    flex-shrink: 0;
+}
+
+.sort-dropdown-group.active .sort-trigger__caret {
+    transform: rotate(180deg);
+}
+
+.sort-dropdown-group.active .sort-trigger {
+    border-color: var(--lora-accent);
+    box-shadow: 0 0 0 2px color-mix(in oklch, var(--lora-accent) 15%, transparent);
+}
+
+/* Disabled state — mirrors the native :disabled look (used when VLM is active) */
+.sort-dropdown-group.is-disabled .sort-trigger {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+    background: var(--bg-color);
+    border-color: var(--border-color);
+    box-shadow: none;
+    transform: none;
+}
+
+/* Dropdown menu — sizes to its content, independent of trigger width.
+   Inherits base .dropdown-menu styling; capped for very long i18n text. */
+.sort-dropdown-menu {
+    min-width: max-content;
+    max-width: 320px;
+    width: max-content;
+}
+
+/* Optgroup label rendered as a section header */
+.sort-dropdown-group .sort-optgroup-label {
+    padding: 8px 12px 4px;
+    font-size: 0.75em;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-muted);
+    cursor: default;
+    user-select: none;
+}
+
+.sort-dropdown-group .sort-optgroup-label:first-child {
+    padding-top: 4px;
+}
+
+/* Option items */
+.sort-dropdown-group .sort-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px;
+    color: var(--text-color);
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+    white-space: nowrap;
+}
+
+.sort-dropdown-group .sort-option::before {
+    content: '';
+    width: 14px;
+    flex-shrink: 0;
+    text-align: center;
+    font-weight: 700;
+}
+
+.sort-dropdown-group .sort-option:hover {
+    background-color: color-mix(in oklch, var(--lora-accent) 10%, transparent);
+}
+
+.sort-dropdown-group .sort-option.is-selected {
+    color: var(--lora-accent);
+    font-weight: 600;
+}
+
+.sort-dropdown-group .sort-option.is-selected::before {
+    content: '\2713';
+    color: var(--lora-accent);
+}
+
+/* Visually hidden native <select> — kept in the DOM for programmatic access.
+   High-specificity selector overrides .control-group select { min-width: 100px }. */
+.control-group .sort-select-native {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    min-width: 0;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+    opacity: 0;
+    pointer-events: none;
+}
+
 /* Ensure hidden class works properly */
 .hidden {
     display: none !important;
diff --git a/static/js/components/controls/PageControls.js b/static/js/components/controls/PageControls.js
index e0d614bb..849e256a 100644
--- a/static/js/components/controls/PageControls.js
+++ b/static/js/components/controls/PageControls.js
@@ -4,6 +4,7 @@ import { getStorageItem, setStorageItem, removeStorageItem, getSessionItem, setS
 import { showToast, openCivitaiByMetadata } from '../../utils/uiHelpers.js';
 import { performModelUpdateCheck } from '../../utils/updateCheckHelpers.js';
 import { sidebarManager } from '../SidebarManager.js';
+import { initSortDropdown } from './SortDropdown.js';
 
 /**
  * PageControls class - Unified control management for model pages
@@ -106,6 +107,7 @@ export class PageControls {
         // Sort select handler
         const sortSelect = document.getElementById('sortSelect');
         if (sortSelect) {
+            initSortDropdown(sortSelect);
             sortSelect.value = this.pageState.sortBy;
             sortSelect.addEventListener('change', async (e) => {
                 this.pageState.sortBy = e.target.value;
diff --git a/static/js/components/controls/SortDropdown.js b/static/js/components/controls/SortDropdown.js
new file mode 100644
index 00000000..ab73b76d
--- /dev/null
+++ b/static/js/components/controls/SortDropdown.js
@@ -0,0 +1,290 @@
+// SortDropdown.js — Decoupled sort trigger.
+//
+// The native <select> sizes its trigger to the widest <option>, so long
+// options (e.g. "Fewest versions first") or long i18n translations force the
+// control to be far wider than the selected text needs. This module wraps the
+// existing <select> with a custom trigger + menu that mirror its state, so the
+// trigger sizes to the selected text while the menu sizes to its content.
+//
+// The native <select> stays in the DOM (visually hidden) so existing code that
+// reads/writes `.value` / `.disabled` and dynamically adds/removes <option>s
+// (e.g. the VLM temporary option) keeps working unchanged. The `value` and
+// `disabled` setters are overridden on the instance to keep the trigger label
+// and disabled styling in sync with programmatic changes.
+//
+// Keyboard navigation (arrows, Home/End, type-to-select) mirrors native
+// <select> behavior so the control remains fully accessible.
+
+const SORT_GROUP_SELECTOR = '.sort-dropdown-group';
+const ACTIVE_GROUP_SELECTOR = '.sort-dropdown-group.active, .dropdown-group.active';
+
+/**
+ * Initialize a decoupled sort dropdown around a native <select>.
+ * Idempotent: safe to call more than once on the same element.
+ * @param {HTMLSelectElement|null} select
+ * @returns {void}
+ */
+export function initSortDropdown(select) {
+    if (!select) return;
+
+    const group = select.closest(SORT_GROUP_SELECTOR);
+    if (!group || group.dataset.sortReady === '1') return;
+
+    const trigger = group.querySelector('.sort-trigger');
+    const menu = group.querySelector('.sort-dropdown-menu');
+    const label = group.querySelector('.sort-trigger__label');
+    if (!trigger || !menu || !label) return;
+
+    const getOptions = () => menu.querySelectorAll('.sort-option');
+
+    const buildItem = (opt) => {
+        const item = document.createElement('div');
+        item.className = 'sort-option';
+        item.setAttribute('role', 'option');
+        item.tabIndex = -1;
+        item.dataset.value = opt.value;
+        item.textContent = opt.textContent;
+        item.addEventListener('click', (event) => {
+            event.stopPropagation();
+            if (select.disabled) return;
+            choose(opt.value);
+            close();
+        });
+        return item;
+    };
+
+    const buildMenu = () => {
+        menu.innerHTML = '';
+        const fragment = document.createDocumentFragment();
+        for (const child of Array.from(select.children)) {
+            if (child.tagName === 'OPTGROUP') {
+                const header = document.createElement('div');
+                header.className = 'sort-optgroup-label';
+                header.textContent = child.label || '';
+                fragment.appendChild(header);
+                for (const opt of Array.from(child.children)) {
+                    fragment.appendChild(buildItem(opt));
+                }
+            } else if (child.tagName === 'OPTION') {
+                fragment.appendChild(buildItem(child));
+            }
+        }
+        menu.appendChild(fragment);
+        syncSelected();
+    };
+
+    const syncSelected = () => {
+        const value = select.value;
+        let labelText = '';
+        let matched = false;
+        getOptions().forEach((el) => {
+            const selected = el.dataset.value === value;
+            el.classList.toggle('is-selected', selected);
+            el.setAttribute('aria-selected', selected ? 'true' : 'false');
+            if (selected) {
+                labelText = el.textContent;
+                matched = true;
+            }
+        });
+        if (!matched) {
+            const opt = select.querySelector(`option[value="${cssEscape(value)}"]`);
+            labelText = opt
+                ? opt.textContent
+                : (select.options[select.selectedIndex]?.textContent ?? '');
+        }
+        label.textContent = labelText;
+    };
+
+    const choose = (value) => {
+        if (select.value === value) return;
+        select.value = value;
+        select.dispatchEvent(new Event('change', { bubbles: true }));
+    };
+
+    const open = () => {
+        document.querySelectorAll(ACTIVE_GROUP_SELECTOR).forEach((g) => {
+            if (g !== group) g.classList.remove('active');
+        });
+        group.classList.add('active');
+        trigger.setAttribute('aria-expanded', 'true');
+        // Focus the currently selected option (or the first option) so
+        // keyboard navigation starts from a sensible position.
+        requestAnimationFrame(() => {
+            const selected = menu.querySelector('.sort-option.is-selected');
+            (selected || getOptions()[0])?.focus();
+        });
+    };
+
+    const close = () => {
+        group.classList.remove('active');
+        trigger.setAttribute('aria-expanded', 'false');
+    };
+
+    const toggle = () => {
+        if (group.classList.contains('active')) close();
+        else open();
+    };
+
+    // ---- keyboard navigation ----
+
+    // Type-to-select buffer: accumulate characters and reset after a pause.
+    // Shared between trigger and menu keydown handlers.
+    let typeBuffer = '';
+    let typeTimer = null;
+
+    const focusOptionByText = (prefix) => {
+        const options = getOptions();
+        const lower = prefix.toLowerCase();
+        for (let i = 0; i < options.length; i++) {
+            if (options[i].textContent.toLowerCase().startsWith(lower)) {
+                options[i].focus();
+                return;
+            }
+        }
+    };
+
+    const moveFocus = (options, direction) => {
+        const focused = menu.querySelector('.sort-option:focus');
+        let idx = focused ? Array.from(options).indexOf(focused) : -1;
+        idx = Math.max(0, Math.min(options.length - 1, idx + direction));
+        options[idx]?.focus();
+    };
+
+    const handleTypeToSelect = (event) => {
+        if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return false;
+        event.preventDefault();
+        clearTimeout(typeTimer);
+        typeBuffer += event.key;
+        focusOptionByText(typeBuffer);
+        typeTimer = setTimeout(() => { typeBuffer = ''; }, 800);
+        return true;
+    };
+
+    trigger.addEventListener('click', (event) => {
+        event.stopPropagation();
+        if (select.disabled) return;
+        toggle();
+    });
+
+    trigger.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape') {
+            close();
+        } else if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+            event.preventDefault();
+            if (!select.disabled) toggle();
+        } else if (!group.classList.contains('active')) {
+            // Type-to-select on closed dropdown: open and highlight match
+            if (handleTypeToSelect(event)) {
+                open();
+            }
+        }
+    });
+
+    menu.addEventListener('keydown', (event) => {
+        const options = getOptions();
+        if (options.length === 0) return;
+
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                close();
+                trigger.focus();
+                return;
+
+            case 'ArrowDown':
+                event.preventDefault();
+                moveFocus(options, 1);
+                return;
+
+            case 'ArrowUp':
+                event.preventDefault();
+                moveFocus(options, -1);
+                return;
+
+            case 'Home':
+                event.preventDefault();
+                options[0]?.focus();
+                return;
+
+            case 'End':
+                event.preventDefault();
+                options[options.length - 1]?.focus();
+                return;
+
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (select.disabled) return;
+                const focused = menu.querySelector('.sort-option:focus');
+                if (focused) {
+                    choose(focused.dataset.value);
+                    close();
+                    trigger.focus();
+                }
+                return;
+        }
+
+        handleTypeToSelect(event);
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', (event) => {
+        if (!group.contains(event.target)) {
+            close();
+            trigger.focus();
+        }
+    });
+
+    // ---- property overrides ----
+
+    // Override `value` and `disabled` on this instance so programmatic
+    // changes (loadSortPreference, VLM toggle, excluded-view sync, ...) keep
+    // the trigger label and disabled styling in sync without touching callers.
+    const proto = Object.getPrototypeOf(select);
+    const valueDescriptor =
+        Object.getOwnPropertyDescriptor(proto, 'value') ||
+        Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value');
+    const disabledDescriptor =
+        Object.getOwnPropertyDescriptor(proto, 'disabled') ||
+        Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'disabled');
+
+    if (valueDescriptor) {
+        Object.defineProperty(select, 'value', {
+            get() { return valueDescriptor.get.call(this); },
+            set(v) {
+                valueDescriptor.set.call(this, v);
+                syncSelected();
+            },
+            configurable: true,
+        });
+    }
+
+    if (disabledDescriptor) {
+        Object.defineProperty(select, 'disabled', {
+            get() { return disabledDescriptor.get.call(this); },
+            set(v) {
+                disabledDescriptor.set.call(this, v);
+                group.classList.toggle('is-disabled', Boolean(v));
+                trigger.disabled = Boolean(v);
+                if (v) close();
+            },
+            configurable: true,
+        });
+    }
+
+    // Rebuild the menu when <option>s change (VLM adds/removes a temporary
+    // option at runtime).
+    const observer = new MutationObserver(() => buildMenu());
+    observer.observe(select, { childList: true });
+
+    buildMenu();
+    group.dataset.sortReady = '1';
+}
+
+function cssEscape(value) {
+    if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+        return CSS.escape(value);
+    }
+    // Fallback for environments without CSS.escape
+    return String(value).replace(/[!"#$%&'()*+,./:;<=>?@[\]^`{|}~\\ -]/g, '\\$&');
+}
diff --git a/static/js/recipes.js b/static/js/recipes.js
index 73accc93..2b96f2e1 100644
--- a/static/js/recipes.js
+++ b/static/js/recipes.js
@@ -10,6 +10,7 @@ import { DuplicatesManager } from './components/DuplicatesManager.js';
 import { refreshVirtualScroll } from './utils/infiniteScroll.js';
 import { refreshRecipes, RecipeSidebarApiClient } from './api/recipeApi.js';
 import { sidebarManager } from './components/SidebarManager.js';
+import { initSortDropdown } from './components/controls/SortDropdown.js';
 
 class RecipePageControls {
     constructor() {
@@ -239,6 +240,7 @@ class RecipeManager {
         // Sort select
         const sortSelect = document.getElementById('sortSelect');
         if (sortSelect) {
+            initSortDropdown(sortSelect);
             sortSelect.value = this.pageState.sortBy || 'date:desc';
             sortSelect.addEventListener('change', () => {
                 this.pageState.sortBy = sortSelect.value;
diff --git a/templates/components/controls.html b/templates/components/controls.html
index 1c122b96..700fa580 100644
--- a/templates/components/controls.html
+++ b/templates/components/controls.html
@@ -15,8 +15,13 @@
     {% endif %}
     <div class="actions">
         <div class="action-buttons">
-            <div title="{% if page_id == 'recipes' %}{{ t('recipes.controls.sort.title') }}{% else %}{{ t('loras.controls.sort.title') }}{% endif %}" class="control-group">
-                <select id="sortSelect">
+            <div title="{% if page_id == 'recipes' %}{{ t('recipes.controls.sort.title') }}{% else %}{{ t('loras.controls.sort.title') }}{% endif %}" class="control-group sort-dropdown-group dropdown-group" data-sort-dropdown>
+                <button type="button" class="sort-trigger" aria-haspopup="listbox" aria-expanded="false">
+                    <span class="sort-trigger__label"></span>
+                    <i class="fas fa-caret-down sort-trigger__caret" aria-hidden="true"></i>
+                </button>
+                <div class="dropdown-menu sort-dropdown-menu" role="listbox"></div>
+                <select id="sortSelect" class="sort-select-native" tabindex="-1" aria-hidden="true">
                     <optgroup label="{{ t('loras.controls.sort.name') }}">
                         <option value="name:asc">{{ t('loras.controls.sort.nameAsc') }}</option>
                         <option value="name:desc">{{ t('loras.controls.sort.nameDesc') }}</option>