ComfyUI-Lora-Manager/templates/components/controls.html

<div class="controls">
    <div id="excludedViewBanner" class="excluded-view-banner hidden">
        <div class="excluded-view-banner__content">
            <div class="excluded-view-banner__title">
                <i class="fas fa-eye-slash"></i>
                <span>{{ t('globalContextMenu.manageExcludedModels.label', default='Excluded Models') }}</span>
            </div>
            <button id="excludedViewBackBtn" class="excluded-view-banner__back">
                <i class="fas fa-arrow-left"></i>
                <span>{{ t('common.actions.back', default='Back') }}</span>
            </button>
        </div>
    </div>
    <div class="actions">
        <div class="action-buttons">
            <div title="{{ t('loras.controls.sort.title') }}" class="control-group">
                <select id="sortSelect">
                    <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>
                    </optgroup>
                    <optgroup label="{{ t('loras.controls.sort.date') }}">
                        <option value="date:desc">{{ t('loras.controls.sort.dateDesc') }}</option>
                        <option value="date:asc">{{ t('loras.controls.sort.dateAsc') }}</option>
                    </optgroup>
                    <optgroup label="{{ t('loras.controls.sort.size') }}">
                        <option value="size:desc">{{ t('loras.controls.sort.sizeDesc') }}</option>
                        <option value="size:asc">{{ t('loras.controls.sort.sizeAsc') }}</option>
                    </optgroup>
                    {% if page_id != 'embeddings' %}
                        <optgroup label="{{ t('loras.controls.sort.usage', default='Usage') }}">
                            <option value="usage:desc">{{ t('loras.controls.sort.usageDesc', default='Times used (high to low)') }}</option>
                            <option value="usage:asc">{{ t('loras.controls.sort.usageAsc', default='Times used (low to high)') }}</option>
                        </optgroup>
                    {% endif %}
                </select>
            </div>
            <div title="{{ t('loras.controls.refresh.title') }}" class="control-group dropdown-group">
                <button data-action="refresh" class="dropdown-main"><i class="fas fa-sync"></i> <span>{{ t('common.actions.refresh') }}</span></button>
                <button class="dropdown-toggle" aria-label="Show refresh options">
                    <i class="fas fa-caret-down"></i>
                </button>
                <div class="dropdown-menu">
                    <div class="dropdown-item" data-action="full-rebuild" title="{{ t('loras.controls.refresh.fullTooltip') }}">
                        <i class="fas fa-tools"></i> <span>{{ t('loras.controls.refresh.full') }}</span>
                    </div>
                </div>
            </div>
            
            <div class="control-group">
                <button data-action="fetch" title="{{ t('loras.controls.fetch.title') }}"><i class="fas fa-download"></i> <span>{{ t('loras.controls.fetch.action') }}</span></button>
            </div>
            <div class="control-group">
                <button data-action="download" title="{{ t('loras.controls.download.title') }}">
                    <i class="fas fa-cloud-download-alt"></i> <span>{{ t('loras.controls.download.action') }}</span>
                </button>
            </div>
            <div class="control-group">
                <button id="bulkOperationsBtn" data-action="bulk" title="{{ t('loras.controls.bulk.title') }}">
                    <i class="fas fa-th-large"></i> <span><span>{{ t('loras.controls.bulk.action') }}</span> <div class="shortcut-key">B</div></span>
                </button>
            </div>
            <div class="control-group">
                <button id="findDuplicatesBtn" data-action="find-duplicates" title="{{ t('loras.controls.duplicates.title') }}">
                    <i class="fas fa-clone"></i> <span>{{ t('loras.controls.duplicates.action') }}</span>
                    <span id="duplicatesBadge" class="badge"></span>
                </button>
            </div>
            <div class="control-group">
                <button id="favoriteFilterBtn" data-action="toggle-favorites" class="favorite-filter" title="{{ t('loras.controls.favorites.title') }}">
                    <i class="fas fa-star"></i> <span>{{ t('loras.controls.favorites.action') }}</span>
                </button>
            </div>
            <div class="control-group dropdown-group update-filter-group">
                <button id="updateFilterBtn" data-action="toggle-updates" class="dropdown-main update-filter" title="{{ t('loras.controls.updates.title') }}">
                    <i class="fas fa-exclamation-circle"></i> <span>{{ t('loras.controls.updates.action') }}</span>
                </button>
                <button id="updateFilterMenuToggle" class="dropdown-toggle" aria-label="{{ t('loras.controls.updates.menuLabel') }}">
                    <i class="fas fa-caret-down"></i>
                </button>
                <div class="dropdown-menu">
                    <div id="checkUpdatesMenuItem" class="dropdown-item" data-action="check-updates" title="{{ t('loras.controls.updates.checkTooltip') }}">
                        <i class="fas fa-sync-alt"></i> <span>{{ t('loras.controls.updates.check') }}</span>
                    </div>
                </div>
            </div>
            <div id="customFilterIndicator" class="control-group hidden">
                <div class="filter-active">
                    <i class="fas fa-filter"></i> <span class="customFilterText" title=""></span>
                    <i class="fas fa-times-circle clear-filter"></i>
                </div>
            </div>
        </div>
        
        <div class="controls-right">
            <div class="control-group doctor-control-group">
                <button id="doctorTriggerBtn" class="doctor-trigger" title="{{ t('doctor.buttonTitle', default='Run diagnostics and common fixes') }}">
                    <i class="fas fa-stethoscope"></i>
                    <span>{{ t('doctor.title', default='Doctor') }}</span>
                    <span id="doctorStatusBadge" class="doctor-status-badge hidden" aria-hidden="true"></span>
                </button>
            </div>
            <div class="keyboard-nav-hint tooltip">
                <i class="fas fa-keyboard"></i>
                <span class="tooltiptext">
                    <span>{{ t('keyboard.navigation') }}</span>
                    <table class="keyboard-shortcuts">
                        <tr>
                            <td><span class="key">Page Up</span></td>
                            <td>{{ t('keyboard.shortcuts.pageUp') }}</td>
                        </tr>
                        <tr>
                            <td><span class="key">Page Down</span></td>
                            <td>{{ t('keyboard.shortcuts.pageDown') }}</td>
                        </tr>
                        <tr>
                            <td><span class="key">Home</span></td>
                            <td>{{ t('keyboard.shortcuts.home') }}</td>
                        </tr>
                        <tr>
                            <td><span class="key">End</span></td>
                            <td>{{ t('keyboard.shortcuts.end') }}</td>
                        </tr>
                    </table>
                </span>
            </div>
        </div>
    </div>
</div>