fix(ui): lighten toolbar shortcut keycaps and fix contrast on active buttons

Adds a 'Keep Action Bar Visible' toggle (default off) under
Settings > Interface > Layout Settings. When enabled, the controls bar
(Refresh, Download, etc.) and the breadcrumb nav are wrapped in a shared
sticky container (.sticky-topbar) so both stay pinned as one unit; when
disabled, the wrapper is display: contents and the original behavior
(only the breadcrumb stays visible) is preserved.

locales/de.json

@@ -484,6 +484,8 @@
         "layoutSettings": {
             "groupByModel": "Nach Modell gruppieren",
             "groupByModelHelp": "Wenn aktiviert, wird nur die neueste Version jedes CivitAI-Modells als einzelne Karte angezeigt. Ältere Versionen werden ausgeblendet.",
+            "stickyControls": "Aktionsleiste sichtbar halten",
+            "stickyControlsHelp": "Wenn aktiviert, bleibt die Aktionsleiste (Aktualisieren, Herunterladen usw.) beim Scrollen zusammen mit der Breadcrumb-Navigation oben angeheftet.",
             "displayDensity": "Anzeige-Dichte",
             "displayDensityOptions": {
                 "default": "Standard",

locales/en.json

@@ -484,6 +484,8 @@
     "layoutSettings": {
       "groupByModel": "Group by Model",
       "groupByModelHelp": "When enabled, only the latest version of each CivitAI model is shown as a single card. Older versions are hidden.",
+      "stickyControls": "Keep Action Bar Visible",
+      "stickyControlsHelp": "When enabled, the action bar (Refresh, Download, etc.) stays pinned at the top while scrolling, together with the breadcrumb navigation.",
       "displayDensity": "Display Density",
       "displayDensityOptions": {
         "default": "Default",

locales/es.json

@@ -484,6 +484,8 @@
         "layoutSettings": {
             "groupByModel": "Agrupar por modelo",
             "groupByModelHelp": "Cuando está activado, solo se muestra la versión más reciente de cada modelo de CivitAI como una tarjeta única. Las versiones anteriores están ocultas.",
+            "stickyControls": "Mantener visible la barra de acciones",
+            "stickyControlsHelp": "Cuando está activado, la barra de acciones (Actualizar, Descargar, etc.) permanece fijada en la parte superior al desplazarse, junto con la navegación por rutas.",
             "displayDensity": "Densidad de visualización",
             "displayDensityOptions": {
                 "default": "Predeterminado",

locales/fr.json

@@ -484,6 +484,8 @@
         "layoutSettings": {
             "groupByModel": "Grouper par modèle",
             "groupByModelHelp": "Lorsque activé, seule la version la plus récente de chaque modèle CivitAI s'affiche sous forme de carte unique. Les versions plus anciennes sont masquées.",
+            "stickyControls": "Garder la barre d'actions visible",
+            "stickyControlsHelp": "Lorsque activé, la barre d'actions (Actualiser, Télécharger, etc.) reste épinglée en haut lors du défilement, avec la navigation par fil d'Ariane.",
             "displayDensity": "Densité d'affichage",
             "displayDensityOptions": {
                 "default": "Par défaut",

locales/he.json

@@ -484,6 +484,8 @@
         "layoutSettings": {
             "groupByModel": "קיבוץ לפי מודל",
             "groupByModelHelp": "כאשר מופעל, רק הגרסה העדכנית ביותר של כל מודל CivitAI מוצגת ככרטיס בודד. גרסאות ישנות יותר מוסתרות.",
+            "stickyControls": "השארת סרגל הפעולות גלוי",
+            "stickyControlsHelp": "כאשר מופעל, סרגל הפעולות (רענון, הורדה וכו') נשאר מוצמד לחלק העליון בעת גלילה, יחד עם ניווט פירורי הלחם.",
             "displayDensity": "צפיפות תצוגה",
             "displayDensityOptions": {
                 "default": "ברירת מחדל",

locales/ja.json

@@ -484,6 +484,8 @@
         "layoutSettings": {
             "groupByModel": "モデルでグループ化",
             "groupByModelHelp": "有効にすると、各CivitAIモデルの最新バージョンのみが1枚のカードとして表示され、古いバージョンは非表示になります。",
+            "stickyControls": "アクションバーを常に表示",
+            "stickyControlsHelp": "有効にすると、アクションバー（更新、ダウンロードなど）がスクロール時にパンくずナビゲーションと一緒に画面上部に固定されます。",
             "displayDensity": "表示密度",
             "displayDensityOptions": {
                 "default": "デフォルト",

locales/ko.json

@@ -484,6 +484,8 @@
         "layoutSettings": {
             "groupByModel": "모델별 그룹화",
             "groupByModelHelp": "활성화하면 각 CivitAI 모델의 최신 버전만 단일 카드로 표시되며, 이전 버전은 숨겨집니다.",
+            "stickyControls": "작업 표시줄 항상 표시",
+            "stickyControlsHelp": "활성화하면 작업 표시줄(새로고침, 다운로드 등)이 스크롤 시 브레드크럼 내비게이션과 함께 상단에 고정됩니다.",
             "displayDensity": "표시 밀도",
             "displayDensityOptions": {
                 "default": "기본",

locales/ru.json

@@ -484,6 +484,8 @@
         "layoutSettings": {
             "groupByModel": "Группировать по модели",
             "groupByModelHelp": "При включении отображается только последняя версия каждой модели CivitAI в виде одной карточки. Старые версии скрыты.",
+            "stickyControls": "Держать панель действий видимой",
+            "stickyControlsHelp": "При включении панель действий (Обновить, Загрузить и т. д.) остаётся закреплённой вверху при прокрутке вместе с навигацией по папкам.",
             "displayDensity": "Плотность отображения",
             "displayDensityOptions": {
                 "default": "По умолчанию",

locales/zh-CN.json

@@ -484,6 +484,8 @@
         "layoutSettings": {
             "groupByModel": "按模型分组",
             "groupByModelHelp": "开启后，每个 CivitAI 模型仅显示最新版本的单张卡片，旧版本将被隐藏。",
+            "stickyControls": "保持操作栏可见",
+            "stickyControlsHelp": "开启后，操作栏（刷新、下载等）会在滚动时与路径导航一起固定在页面顶部。",
             "displayDensity": "显示密度",
             "displayDensityOptions": {
                 "default": "默认",

locales/zh-TW.json

@@ -484,6 +484,8 @@
         "layoutSettings": {
             "groupByModel": "按模型分組",
             "groupByModelHelp": "啟用後，每個 CivitAI 模型僅顯示最新版本的單張卡片，舊版本將被隱藏。",
+            "stickyControls": "保持操作列可見",
+            "stickyControlsHelp": "啟用後，操作列（重新整理、下載等）會在捲動時與麵包屑導覽一起固定在頁面頂端。",
             "displayDensity": "顯示密度",
             "displayDensityOptions": {
                 "default": "預設",

py/services/settings_manager.py

@@ -116,6 +116,7 @@ DEFAULT_SETTINGS: Dict[str, Any] = {
     "backup_retention_count": 5,
     "use_new_license_icons": True,
     "group_by_model": False,
+    "sticky_controls": False,
     # AI / LLM provider configuration (BYOK)
     "llm_provider": "openai",  # "openai" | "ollama" | "custom"
     "llm_api_key": "",

static/css/layout.css

@@ -25,6 +25,23 @@
     box-shadow: var(--shadow-xs);
 }
 
+/* Wrapper around the controls bar and breadcrumb nav. With the sticky-controls
+   setting off it is transparent to layout (display: contents), preserving the
+   original behavior (only the breadcrumb stays visible). When enabled, the whole
+   wrapper sticks as one unit so the two bars can never drift apart. */
+.sticky-topbar {
+    display: contents;
+}
+
+body.sticky-controls .sticky-topbar {
+    display: block;
+    position: sticky;
+    top: 0;
+    z-index: calc(var(--z-header) - 1);
+    background: var(--bg-color);
+    box-shadow: var(--shadow-xs);
+}
+
 /* Responsive container for larger screens */
 @media (min-width: 2150px) {
     .container {
@@ -201,20 +218,17 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    margin-left: 6px;
-    min-width: 18px;
-    height: 18px;
-    padding: 0 5px;
-    font-size: 11px;
-    font-weight: 600;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    font-size: 10px;
+    font-weight: 500;
     line-height: 1;
     text-transform: uppercase;
     border-radius: var(--border-radius-xs);
     background-color: var(--shortcut-bg);
     border: 1px solid var(--shortcut-border);
-    box-shadow: var(--shortcut-shadow);
     color: var(--shortcut-text);
-    vertical-align: middle;
     opacity: 0.8;
     transition: var(--transition-base);
 }
@@ -225,10 +239,21 @@
     border-color: var(--shortcut-border-hover);
 }
 
+/* Invert the keycap on active (accent-filled) buttons for contrast.
+   Must come after the hover rule above so it wins on active+hover. */
+.control-group button.active .shortcut-key,
+.control-group button.active:hover .shortcut-key {
+    color: var(--lora-accent);
+    background: rgba(255, 255, 255, 0.92);
+    border-color: transparent;
+    opacity: 1;
+}
+
 /* Ensure correct vertical alignment for text+shortcut */
 .control-group button span {
     display: inline-flex;
     align-items: center;
+    gap: 6px;
 }
 
 /* Select dropdown styling */

static/js/managers/SettingsManager.js

@@ -1047,6 +1047,12 @@ export class SettingsManager {
             groupByModelCheckbox.checked = !!state.global.settings.group_by_model;
         }
 
+        // Set sticky controls
+        const stickyControlsCheckbox = document.getElementById('stickyControls');
+        if (stickyControlsCheckbox) {
+            stickyControlsCheckbox.checked = !!state.global.settings.sticky_controls;
+        }
+
         // Set model name display setting
         const modelNameDisplaySelect = document.getElementById('modelNameDisplay');
         if (modelNameDisplaySelect) {
@@ -3396,6 +3402,10 @@ export class SettingsManager {
         const groupByModel = !!state.global.settings.group_by_model;
         document.body.classList.toggle('group-by-model', groupByModel);
 
+        // Apply sticky controls mode (keeps the action bar visible while scrolling)
+        const stickyControls = !!state.global.settings.sticky_controls;
+        document.body.classList.toggle('sticky-controls', stickyControls);
+
     }
 }
 

static/js/state/index.js

@@ -59,6 +59,7 @@ const DEFAULT_SETTINGS_BASE = Object.freeze({
     strip_lora_on_copy: false,
     use_new_license_icons: true,
     group_by_model: false,
+    sticky_controls: false,
     llm_provider: 'openai',
     llm_api_key: '',
     llm_api_base: '',

templates/checkpoints.html

@@ -54,8 +54,10 @@
 {% endblock %}
 
 {% block content %}
+    <div class="sticky-topbar">
     {% include 'components/controls.html' %}
     {% include 'components/breadcrumb.html' %}
+    </div>
     {% include 'components/duplicates_banner.html' %}
     {% include 'components/folder_sidebar.html' %}
     

templates/components/modals/settings/interface.html

@@ -79,6 +79,9 @@
         <!-- Group by model toggle -->
         {{ sm.setting_toggle('groupByModel', 'group_by_model', 'settings.layoutSettings.groupByModel', 'settings.layoutSettings.groupByModelHelp') }}
 
+        <!-- Sticky controls toggle -->
+        {{ sm.setting_toggle('stickyControls', 'sticky_controls', 'settings.layoutSettings.stickyControls', 'settings.layoutSettings.stickyControlsHelp') }}
+
         {{ sm.setting_select('cardInfoDisplay', 'card_info_display', 'settings.layoutSettings.cardInfoDisplay', [
             ('always', 'settings.layoutSettings.cardInfoDisplayOptions.always'),
             ('hover', 'settings.layoutSettings.cardInfoDisplayOptions.hover'),

templates/embeddings.html

@@ -53,8 +53,10 @@
 {% endblock %}
 
 {% block content %}
+    <div class="sticky-topbar">
     {% include 'components/controls.html' %}
     {% include 'components/breadcrumb.html' %}
+    </div>
     {% include 'components/duplicates_banner.html' %}
     {% include 'components/folder_sidebar.html' %}
     

templates/loras.html

@@ -8,8 +8,10 @@
 {% block init_check_url %}/api/loras/list?page=1&page_size=1{% endblock %}
 
 {% block content %}
+    <div class="sticky-topbar">
     {% include 'components/controls.html' %}
     {% include 'components/breadcrumb.html' %}
+    </div>
     {% include 'components/duplicates_banner.html' %}
     {% include 'components/folder_sidebar.html' %}
 

templates/recipes.html

@@ -64,10 +64,12 @@
 {% block init_check_url %}/api/recipes?page=1&page_size=1{% endblock %}
 
 {% block content %}
-<!-- Recipe controls -->
+<!-- Sticky topbar: controls + breadcrumb -->
+<div class="sticky-topbar">
 {% include 'components/controls.html' %}
 <!-- Breadcrumb Navigation -->
 {% include 'components/breadcrumb.html' %}
+</div>
 
 <!-- Duplicates banner (hidden by default) -->
 <div id="duplicatesBanner" class="duplicates-banner" style="display: none;">