feat(bulk): reorganize context menu with sections and submenu for workflow actions

Group 15 flat menu items into 5 logical sections (Workflow, Metadata, Attributes, Organize, Download) with section headers to reduce cognitive load. Nest the three workflow-related actions (Append, Replace, Copy Syntax) into a single "Send to Workflow" hover-triggered submenu. Add submenu infrastructure to BaseContextMenu with mouseover/mouseout boundary detection, 250ms close delay, and viewport-aware positioning. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
feat(bulk): add "Download Example Images" to bulk select context menu (#923 )
2026-06-25 04:21:17 -03:00 · 2026-05-11 21:06:47 +08:00 · 2026-05-11 18:05:00 +08:00 · 2026-05-10 22:22:24 +08:00 · 2026-05-08 14:55:53 +08:00
21 changed files with 829 additions and 83 deletions
--- a/locales/de.json
+++ b/locales/de.json
@@ -692,9 +692,18 @@
            "unfavorite": "Aus Favoriten entfernen",
            "deleteAll": "Ausgewählte löschen",
            "downloadMissingLoras": "Fehlende LoRAs herunterladen",
+            "downloadExamples": "Beispielbilder herunterladen",
            "clear": "Auswahl löschen",
            "skipMetadataRefreshCount": "Überspringen（{count} Modelle）",
            "resumeMetadataRefreshCount": "Fortsetzen（{count} Modelle）",
+            "sendToWorkflow": "An Workflow senden",
+            "sections": {
+                "workflow": "Workflow",
+                "metadata": "Metadaten",
+                "attributes": "Attribute",
+                "organize": "Organisieren",
+                "download": "Download"
+            },
            "autoOrganizeProgress": {
                "initializing": "Automatische Organisation wird initialisiert...",
                "starting": "Automatische Organisation für {type} wird gestartet...",
--- a/locales/en.json
+++ b/locales/en.json
@@ -692,9 +692,18 @@
            "unfavorite": "Remove from Favorites",
            "deleteAll": "Delete Selected",
            "downloadMissingLoras": "Download Missing LoRAs",
+            "downloadExamples": "Download Example Images",
            "clear": "Clear Selection",
            "skipMetadataRefreshCount": "Skip ({count} models)",
            "resumeMetadataRefreshCount": "Resume ({count} models)",
+            "sendToWorkflow": "Send to Workflow",
+            "sections": {
+                "workflow": "Workflow",
+                "metadata": "Metadata",
+                "attributes": "Attributes",
+                "organize": "Organize",
+                "download": "Download"
+            },
            "autoOrganizeProgress": {
                "initializing": "Initializing auto-organize...",
                "starting": "Starting auto-organize for {type}...",
--- a/locales/es.json
+++ b/locales/es.json
@@ -692,9 +692,18 @@
            "unfavorite": "Quitar de favoritos",
            "deleteAll": "Eliminar seleccionados",
            "downloadMissingLoras": "Descargar LoRAs faltantes",
+            "downloadExamples": "Descargar imágenes de ejemplo",
            "clear": "Limpiar selección",
            "skipMetadataRefreshCount": "Omitir（{count} modelos）",
            "resumeMetadataRefreshCount": "Reanudar（{count} modelos）",
+            "sendToWorkflow": "Enviar al workflow",
+            "sections": {
+                "workflow": "Workflow",
+                "metadata": "Metadatos",
+                "attributes": "Atributos",
+                "organize": "Organizar",
+                "download": "Descargar"
+            },
            "autoOrganizeProgress": {
                "initializing": "Inicializando auto-organización...",
                "starting": "Iniciando auto-organización para {type}...",
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -692,9 +692,18 @@
            "unfavorite": "Retirer des favoris",
            "deleteAll": "Supprimer la sélection",
            "downloadMissingLoras": "Télécharger les LoRAs manquants",
+            "downloadExamples": "Télécharger les images d'exemple",
            "clear": "Effacer la sélection",
            "skipMetadataRefreshCount": "Ignorer（{count} modèles）",
            "resumeMetadataRefreshCount": "Reprendre（{count} modèles）",
+            "sendToWorkflow": "Envoyer au workflow",
+            "sections": {
+                "workflow": "Workflow",
+                "metadata": "Métadonnées",
+                "attributes": "Attributs",
+                "organize": "Organiser",
+                "download": "Télécharger"
+            },
            "autoOrganizeProgress": {
                "initializing": "Initialisation de l'auto-organisation...",
                "starting": "Démarrage de l'auto-organisation pour {type}...",
--- a/locales/he.json
+++ b/locales/he.json
@@ -692,9 +692,18 @@
            "unfavorite": "הסר ממועדפים",
            "deleteAll": "מחק נבחרים",
            "downloadMissingLoras": "הורדת LoRAs חסרים",
+            "downloadExamples": "הורד תמונות דוגמה",
            "clear": "נקה בחירה",
            "skipMetadataRefreshCount": "דילוג（{count} מודלים）",
            "resumeMetadataRefreshCount": "המשך（{count} מודלים）",
+            "sendToWorkflow": "שלח ל-Workflow",
+            "sections": {
+                "workflow": "Workflow",
+                "metadata": "מטא-נתונים",
+                "attributes": "מאפיינים",
+                "organize": "ארגן",
+                "download": "הורדה"
+            },
            "autoOrganizeProgress": {
                "initializing": "מאתחל ארגון אוטומטי...",
                "starting": "מתחיל ארגון אוטומטי עבור {type}...",
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -692,9 +692,18 @@
            "unfavorite": "お気に入りから削除",
            "deleteAll": "選択したものを削除",
            "downloadMissingLoras": "不足している LoRA をダウンロード",
+            "downloadExamples": "例画像をダウンロード",
            "clear": "選択をクリア",
            "skipMetadataRefreshCount": "スキップ（{count}モデル）",
            "resumeMetadataRefreshCount": "再開（{count}モデル）",
+            "sendToWorkflow": "ワークフローに送信",
+            "sections": {
+                "workflow": "ワークフロー",
+                "metadata": "メタデータ",
+                "attributes": "属性",
+                "organize": "整理",
+                "download": "ダウンロード"
+            },
            "autoOrganizeProgress": {
                "initializing": "自動整理を初期化中...",
                "starting": "{type}の自動整理を開始中...",
--- a/locales/ko.json
+++ b/locales/ko.json
@@ -692,9 +692,18 @@
            "unfavorite": "즐겨찾기 해제",
            "deleteAll": "선택된 항목 삭제",
            "downloadMissingLoras": "누락된 LoRA 다운로드",
+            "downloadExamples": "예시 이미지 다운로드",
            "clear": "선택 지우기",
            "skipMetadataRefreshCount": "건너뛰기（{count}개 모델）",
            "resumeMetadataRefreshCount": "재개（{count}개 모델）",
+            "sendToWorkflow": "워크플로우로 보내기",
+            "sections": {
+                "workflow": "워크플로우",
+                "metadata": "메타데이터",
+                "attributes": "속성",
+                "organize": "정리",
+                "download": "다운로드"
+            },
            "autoOrganizeProgress": {
                "initializing": "자동 정리 초기화 중...",
                "starting": "{type}에 대한 자동 정리 시작...",
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -692,9 +692,18 @@
            "unfavorite": "Удалить из избранного",
            "deleteAll": "Удалить выбранные",
            "downloadMissingLoras": "Скачать отсутствующие LoRAs",
+            "downloadExamples": "Загрузить примеры изображений",
            "clear": "Очистить выбор",
            "skipMetadataRefreshCount": "Пропустить（{count} моделей）",
            "resumeMetadataRefreshCount": "Возобновить（{count} моделей）",
+            "sendToWorkflow": "Отправить в Workflow",
+            "sections": {
+                "workflow": "Workflow",
+                "metadata": "Метаданные",
+                "attributes": "Атрибуты",
+                "organize": "Организовать",
+                "download": "Скачать"
+            },
            "autoOrganizeProgress": {
                "initializing": "Инициализация автоматической организации...",
                "starting": "Запуск автоматической организации для {type}...",
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -692,9 +692,18 @@
            "unfavorite": "取消收藏",
            "deleteAll": "删除已选",
            "downloadMissingLoras": "下载缺失的 LoRAs",
+            "downloadExamples": "下载示例图片",
            "clear": "清除选择",
            "skipMetadataRefreshCount": "跳过（{count} 个模型）",
            "resumeMetadataRefreshCount": "恢复（{count} 个模型）",
+            "sendToWorkflow": "发送到工作流",
+            "sections": {
+                "workflow": "工作流",
+                "metadata": "元数据",
+                "attributes": "属性",
+                "organize": "整理",
+                "download": "下载"
+            },
            "autoOrganizeProgress": {
                "initializing": "正在初始化自动整理...",
                "starting": "正在为 {type} 启动自动整理...",
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -692,9 +692,18 @@
            "unfavorite": "取消收藏",
            "deleteAll": "刪除所選",
            "downloadMissingLoras": "下載缺失的 LoRAs",
+            "downloadExamples": "下載範例圖片",
            "clear": "清除選取",
            "skipMetadataRefreshCount": "跳過（{count} 個模型）",
            "resumeMetadataRefreshCount": "恢復（{count} 個模型）",
+            "sendToWorkflow": "發送到工作流",
+            "sections": {
+                "workflow": "工作流",
+                "metadata": "元數據",
+                "attributes": "屬性",
+                "organize": "整理",
+                "download": "下載"
+            },
            "autoOrganizeProgress": {
                "initializing": "正在初始化自動整理...",
                "starting": "正在開始自動整理 {type}...",
--- a/py/config.py
+++ b/py/config.py
@@ -172,6 +172,12 @@ class Config:
        self.extra_unet_roots: List[str] = []
        self.extra_embeddings_roots: List[str] = []
        self.recipes_path: str = ""
+
+        # Load extra folder paths from active library settings before symlink scan
+        # so both primary and extra paths are discovered in a single pass.
+        if not standalone_mode:
+            self._load_extra_paths_from_settings()
+
        # Scan symbolic links during initialization
        self._initialize_symlink_mappings()

@@ -179,6 +185,96 @@ class Config:
            # Save the paths to settings.json when running in ComfyUI mode
            self.save_folder_paths_to_settings()

+    def _load_extra_paths_from_settings(self) -> None:
+        """Read extra folder paths from the active library and apply them.
+
+        Called during ``Config.__init__`` before the symlink scan so both primary and
+        extra paths are discovered in a single pass.  Mirrors the extra-path
+        portion of ``_apply_library_paths`` without replacing the primary roots
+        that were already resolved from ComfyUI's ``folder_paths``.
+        """
+        try:
+            from .services.settings_manager import get_settings_manager
+
+            settings_manager = get_settings_manager()
+            library_name = settings_manager.get_active_library_name()
+            libraries = settings_manager.get_libraries()
+
+            if not library_name or library_name not in libraries:
+                return
+
+            library_config = libraries[library_name]
+            if not isinstance(library_config, dict):
+                return
+
+            extra_folder_paths = library_config.get("extra_folder_paths")
+            if not isinstance(extra_folder_paths, dict):
+                return
+
+            extra_lora = extra_folder_paths.get("loras", []) or []
+            extra_checkpoint = extra_folder_paths.get("checkpoints", []) or []
+            extra_unet = extra_folder_paths.get("unet", []) or []
+            extra_embedding = extra_folder_paths.get("embeddings", []) or []
+
+            if not any([extra_lora, extra_checkpoint, extra_unet, extra_embedding]):
+                return
+
+            filtered_extra_lora = self._filter_overlapping_extra_lora_paths(
+                self.loras_roots, extra_lora
+            )
+            self.extra_loras_roots = self._prepare_lora_paths(filtered_extra_lora)
+            (
+                _,
+                self.extra_checkpoints_roots,
+                self.extra_unet_roots,
+            ) = self._prepare_checkpoint_paths(extra_checkpoint, extra_unet)
+            self.extra_embeddings_roots = self._prepare_embedding_paths(
+                extra_embedding
+            )
+
+            recipes_path = library_config.get("recipes_path", "")
+            if isinstance(recipes_path, str) and recipes_path:
+                self.recipes_path = recipes_path
+
+            if self.extra_loras_roots:
+                logger.info(
+                    "Found extra LoRA roots:"
+                    + "\n - "
+                    + "\n - ".join(self.extra_loras_roots)
+                )
+            if self.extra_checkpoints_roots:
+                logger.info(
+                    "Found extra checkpoint roots:"
+                    + "\n - "
+                    + "\n - ".join(self.extra_checkpoints_roots)
+                )
+            if self.extra_unet_roots:
+                logger.info(
+                    "Found extra diffusion model roots:"
+                    + "\n - "
+                    + "\n - ".join(self.extra_unet_roots)
+                )
+            if self.extra_embeddings_roots:
+                logger.info(
+                    "Found extra embedding roots:"
+                    + "\n - "
+                    + "\n - ".join(self.extra_embeddings_roots)
+                )
+
+            logger.info(
+                "Applied library settings for '%s' with extra paths: loras=%s, "
+                "checkpoints=%s, embeddings=%s",
+                library_name,
+                extra_lora,
+                extra_checkpoint,
+                extra_embedding,
+            )
+
+        except Exception as exc:
+            logger.debug(
+                "Could not load extra paths from library settings: %s", exc
+            )
+
    def save_folder_paths_to_settings(self):
        """Persist ComfyUI-derived folder paths to the multi-library settings."""
        try:
--- a/py/lora_manager.py
+++ b/py/lora_manager.py
@@ -184,39 +184,6 @@ class LoraManager:
    async def _initialize_services(cls):
        """Initialize all services using the ServiceRegistry"""
        try:
-            # Apply library settings to load extra folder paths before scanning
-            # Only apply if extra paths haven't been loaded yet (preserves test mocks)
-            try:
-                from .services.settings_manager import get_settings_manager
-
-                settings_manager = get_settings_manager()
-                library_name = settings_manager.get_active_library_name()
-                libraries = settings_manager.get_libraries()
-                if library_name and library_name in libraries:
-                    library_config = libraries[library_name]
-                    # Only apply settings if extra paths are not already configured
-                    # This preserves values set by tests via monkeypatch
-                    extra_paths = library_config.get("extra_folder_paths", {})
-                    has_extra_paths = (
-                        config.extra_loras_roots
-                        or config.extra_checkpoints_roots
-                        or config.extra_unet_roots
-                        or config.extra_embeddings_roots
-                    )
-                    if not has_extra_paths and any(extra_paths.values()):
-                        config.apply_library_settings(library_config)
-                        logger.info(
-                            "Applied library settings for '%s' with extra paths: loras=%s, checkpoints=%s, embeddings=%s",
-                            library_name,
-                            extra_paths.get("loras", []),
-                            extra_paths.get("checkpoints", []),
-                            extra_paths.get("embeddings", []),
-                        )
-            except Exception as exc:
-                logger.warning(
-                    "Failed to apply library settings during initialization: %s", exc
-                )
-
            # Initialize CivitaiClient first to ensure it's ready for other services
            await ServiceRegistry.get_civitai_client()

--- a/static/css/components/media-viewer.css
+++ b/static/css/components/media-viewer.css
@@ -0,0 +1,124 @@
+.media-viewer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+.media-viewer-overlay.active {
+  background: rgba(0, 0, 0, 0.92);
+}
+
+.media-viewer-close {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: #fff;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10001;
+  transition: background 0.2s ease;
+  opacity: 0;
+}
+
+.media-viewer-overlay.active .media-viewer-close {
+  opacity: 1;
+}
+
+.media-viewer-close:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.media-viewer-content-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 90vw;
+  max-height: 95vh;
+  cursor: default;
+}
+
+.media-viewer-media {
+  display: block;
+  max-width: 90vw;
+  max-height: 85vh;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+}
+
+.media-viewer-video {
+  max-height: 80vh;
+}
+
+.media-viewer-counter {
+  margin-top: 8px;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 0.85em;
+  text-align: center;
+  min-height: 1.2em;
+}
+
+.media-viewer-title {
+  margin-top: 4px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.9em;
+  text-align: center;
+  max-width: 90vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.media-viewer-nav {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 48px;
+  height: 80px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.06);
+  border: none;
+  color: #fff;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10001;
+  opacity: 0;
+  transition: opacity 0.2s ease, background 0.2s ease;
+}
+
+.media-viewer-overlay.active .media-viewer-nav {
+  opacity: 1;
+}
+
+.media-viewer-nav:hover {
+  background: rgba(255, 255, 255, 0.18);
+}
+
+.media-viewer-prev {
+  left: 16px;
+}
+
+.media-viewer-next {
+  right: 16px;
+}
--- a/static/css/components/menu.css
+++ b/static/css/components/menu.css
@@ -41,6 +41,63 @@
    text-align: center;
 }

+/* Section Headers */
+.context-menu-section-header {
+    padding: 6px 12px 2px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-muted);
+    cursor: default;
+    user-select: none;
+}
+
+/* Submenu */
+.context-menu-item.has-submenu {
+    position: relative;
+    justify-content: space-between;
+}
+
+.submenu-arrow {
+    margin-left: auto;
+    font-size: 10px;
+    width: auto !important;
+}
+
+.context-submenu {
+    position: absolute;
+    left: calc(100% - 4px);
+    top: -1px;
+    display: none;
+    background: var(--lora-surface);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    padding: 0;
+    min-width: 200px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    z-index: 1001;
+    backdrop-filter: blur(10px);
+}
+
+.context-submenu .context-menu-item {
+    white-space: nowrap;
+    margin: 0;
+}
+
+.context-submenu .context-menu-item:first-child {
+    padding-top: 9px;
+}
+
+.context-submenu .context-menu-item:last-child {
+    padding-bottom: 9px;
+}
+
+.context-submenu.flip-left {
+    left: auto;
+    right: 100%;
+}
+
 /* NSFW Level Selector */
 .nsfw-level-selector {
    position: fixed;
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -39,6 +39,7 @@
@import 'components/keyboard-nav.css'; /* Add keyboard navigation component */
@import 'components/statistics.css'; /* Add statistics component */
@import 'components/sidebar.css'; /* Add sidebar component */
+@import 'components/media-viewer.css';

 .initialization-notice {
    display: flex;
--- a/static/js/components/ContextMenu/BaseContextMenu.js
+++ b/static/js/components/ContextMenu/BaseContextMenu.js
@@ -3,32 +3,113 @@ export class BaseContextMenu {
        this.menu = document.getElementById(menuId);
        this.cardSelector = cardSelector;
        this.currentCard = null;
-        
+        this.submenuTimeout = null;
+        this.openSubmenu = null;
+
        if (!this.menu) {
            console.error(`Context menu element with ID ${menuId} not found`);
            return;
        }
-        
+
        this.init();
    }

    init() {
-        // Hide menu on regular clicks
-        document.addEventListener('click', () => this.hideMenu());
+        // Hide menu when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!this.menu.contains(e.target)) {
+                this.hideMenu();
+            }
+        });

-        // Handle menu item clicks
+        // Handle menu item clicks (including submenu items)
        this.menu.addEventListener('click', (e) => {
            const menuItem = e.target.closest('.context-menu-item');
            if (!menuItem || !this.currentCard) return;

+            // Ignore clicks on submenu trigger (has-submenu parent)
+            if (menuItem.classList.contains('has-submenu')) return;
+
            const action = menuItem.dataset.action;
            if (!action) return;
-            
+
            this.handleMenuAction(action, menuItem);
            this.hideMenu();
        });
+
+        // Submenu hover handling
+        // Use mouseover/mouseout (which bubble) with relatedTarget checks
+        // to reliably detect crossing the .has-submenu boundary
+        this.menu.addEventListener('mouseover', (e) => {
+            const trigger = e.target.closest('.has-submenu');
+            if (!trigger) return;
+
+            // Only act when entering from outside this trigger's tree
+            if (e.relatedTarget && trigger.contains(e.relatedTarget)) return;
+
+            this._openSubmenu(trigger);
+        });
+
+        this.menu.addEventListener('mouseout', (e) => {
+            const trigger = e.target.closest('.has-submenu');
+            if (!trigger) return;
+
+            // Only close when leaving the trigger's tree entirely
+            if (e.relatedTarget && trigger.contains(e.relatedTarget)) return;
+
+            this._scheduleSubmenuClose(trigger);
+        });
    }
-    
+
+    _openSubmenu(trigger) {
+        // Clear any pending close
+        if (this.submenuTimeout) {
+            clearTimeout(this.submenuTimeout);
+            this.submenuTimeout = null;
+        }
+
+        // Hide any previously open submenu
+        if (this.openSubmenu && this.openSubmenu !== trigger) {
+            this._hideSubmenu(this.openSubmenu);
+        }
+
+        const submenu = trigger.querySelector('.context-submenu');
+        if (!submenu) return;
+
+        submenu.style.display = 'block';
+        this.openSubmenu = trigger;
+        this._positionSubmenu(submenu);
+    }
+
+    _scheduleSubmenuClose(trigger) {
+        this.submenuTimeout = setTimeout(() => {
+            this._hideSubmenu(trigger);
+            this.submenuTimeout = null;
+        }, 250);
+    }
+
+    _hideSubmenu(trigger) {
+        const submenu = trigger.querySelector('.context-submenu');
+        if (submenu) {
+            submenu.style.display = 'none';
+            submenu.classList.remove('flip-left');
+        }
+        if (this.openSubmenu === trigger) {
+            this.openSubmenu = null;
+        }
+    }
+
+    _positionSubmenu(submenu) {
+        const submenuRect = submenu.getBoundingClientRect();
+        const viewportWidth = document.documentElement.clientWidth;
+
+        if (submenuRect.right > viewportWidth) {
+            submenu.classList.add('flip-left');
+        } else {
+            submenu.classList.remove('flip-left');
+        }
+    }
+
    handleMenuAction(action, menuItem) {
        // Override in subclass
        console.warn('handleMenuAction not implemented');
@@ -40,34 +121,41 @@ export class BaseContextMenu {

        // Get menu dimensions
        const menuRect = this.menu.getBoundingClientRect();
-        
+
        // Get viewport dimensions
        const viewportWidth = document.documentElement.clientWidth;
        const viewportHeight = document.documentElement.clientHeight;
-        
+
        // Calculate position
        let finalX = x;
        let finalY = y;
-        
+
        // Ensure menu doesn't go offscreen right
        if (x + menuRect.width > viewportWidth) {
            finalX = x - menuRect.width;
        }
-        
+
        // Ensure menu doesn't go offscreen bottom
        if (y + menuRect.height > viewportHeight) {
            finalY = y - menuRect.height;
        }
-        
+
        // Position menu
        this.menu.style.left = `${finalX}px`;
        this.menu.style.top = `${finalY}px`;
    }

    hideMenu() {
+        if (this.submenuTimeout) {
+            clearTimeout(this.submenuTimeout);
+            this.submenuTimeout = null;
+        }
+        if (this.openSubmenu) {
+            this._hideSubmenu(this.openSubmenu);
+        }
        if (this.menu) {
            this.menu.style.display = 'none';
        }
        this.currentCard = null;
    }
-}
+}
--- a/static/js/components/ContextMenu/BulkContextMenu.js
+++ b/static/js/components/ContextMenu/BulkContextMenu.js
@@ -4,6 +4,7 @@ import { bulkManager } from '../../managers/BulkManager.js';
 import { updateElementText, translate } from '../../utils/i18nHelpers.js';
 import { bulkMissingLoraDownloadManager } from '../../managers/BulkMissingLoraDownloadManager.js';
 import { showToast } from '../../utils/uiHelpers.js';
+import { getModelApiClient } from '../../api/modelApiFactory.js';

 export class BulkContextMenu extends BaseContextMenu {
    constructor() {
@@ -50,6 +51,14 @@ export class BulkContextMenu extends BaseContextMenu {
        if (copyAllItem) {
            copyAllItem.style.display = config.copyAll ? 'flex' : 'none';
        }
+
+        // Submenu parent visibility
+        const sendToWorkflowSubmenu = this.menu.querySelector('[data-has-submenu="send-to-workflow"]');
+        if (sendToWorkflowSubmenu) {
+            const hasWorkflowActions = config.sendToWorkflow || config.copyAll;
+            sendToWorkflowSubmenu.style.display = hasWorkflowActions ? 'flex' : 'none';
+        }
+
        if (refreshAllItem) {
            refreshAllItem.style.display = config.refreshAll ? 'flex' : 'none';
        }
@@ -107,6 +116,13 @@ export class BulkContextMenu extends BaseContextMenu {
            downloadMissingLorasItem.style.display = currentModelType === 'recipes' ? 'flex' : 'none';
        }

+        const downloadExampleImagesItem = this.menu.querySelector('[data-action="download-example-images"]');
+        if (downloadExampleImagesItem) {
+            // Show on model pages (loras, checkpoints, embeddings), hide on recipes
+            const modelPages = ['loras', 'checkpoints', 'embeddings'];
+            downloadExampleImagesItem.style.display = modelPages.includes(currentModelType) ? 'flex' : 'none';
+        }
+
        const skipMetadataRefreshItem = this.menu.querySelector('[data-action="skip-metadata-refresh"]');
        const resumeMetadataRefreshItem = this.menu.querySelector('[data-action="resume-metadata-refresh"]');

@@ -140,6 +156,14 @@ export class BulkContextMenu extends BaseContextMenu {
                );
            }
        }
+
+        // Hide empty sections
+        this.menu.querySelectorAll('.context-menu-section').forEach(section => {
+            const items = Array.from(section.querySelectorAll('.context-menu-item'))
+                .filter(item => !item.closest('.context-submenu'));
+            const allHidden = items.length > 0 && items.every(item => item.style.display === 'none');
+            section.style.display = allHidden ? 'none' : '';
+        });
    }

    updateSelectedCountHeader() {
@@ -235,6 +259,9 @@ export class BulkContextMenu extends BaseContextMenu {
            case 'download-missing-loras':
                this.handleDownloadMissingLoras();
                break;
+            case 'download-example-images':
+                this.handleDownloadExampleImages();
+                break;
            case 'clear':
                bulkManager.clearSelection();
                break;
@@ -277,4 +304,31 @@ export class BulkContextMenu extends BaseContextMenu {

        await bulkMissingLoraDownloadManager.downloadMissingLoras(selectedRecipes);
    }
+
+    async handleDownloadExampleImages() {
+        if (state.selectedModels.size === 0) {
+            return;
+        }
+
+        const hashes = new Set();
+        for (const filePath of state.selectedModels) {
+            const escapedPath = CSS.escape(filePath);
+            const card = document.querySelector(`.model-card[data-filepath="${escapedPath}"]`);
+            if (card?.dataset?.sha256) {
+                hashes.add(card.dataset.sha256);
+            }
+        }
+
+        if (hashes.size === 0) {
+            showToast('No valid model hashes found in selection', {}, 'warning');
+            return;
+        }
+
+        try {
+            const apiClient = getModelApiClient();
+            await apiClient.downloadExampleImages([...hashes]);
+        } catch (error) {
+            console.error('Bulk download example images failed:', error);
+        }
+    }
 }
--- a/static/js/components/RecipeModal.js
+++ b/static/js/components/RecipeModal.js
@@ -6,6 +6,7 @@ import { setSessionItem, removeSessionItem } from '../utils/storageHelpers.js';
 import { fetchRecipeDetails, updateRecipeMetadata } from '../api/recipeApi.js';
 import { downloadManager } from '../managers/DownloadManager.js';
 import { MODEL_TYPES } from '../api/apiConfig.js';
+import { openMediaViewer } from './shared/MediaViewer.js';

 const ALLOWED_GEN_PARAM_KEYS = new Set([
    'prompt',
@@ -112,6 +113,23 @@ class RecipeModal {

        // Set up document click handler to close edit fields
        document.addEventListener('click', (event) => {
+            const recipeModal = document.getElementById('recipeModal');
+            if (recipeModal && recipeModal.style.display !== 'none') {
+                const mediaEl = event.target.closest('.recipe-preview-media');
+                if (mediaEl && mediaEl.tagName) {
+                    event.stopPropagation();
+                    const isVideo = mediaEl.tagName === 'VIDEO';
+                    const url = mediaEl.src || mediaEl.currentSrc;
+                    if (url) {
+                        openMediaViewer(url, {
+                            type: isVideo ? 'video' : 'image',
+                            title: document.getElementById('recipeModalTitle')?.textContent || ''
+                        });
+                    }
+                    return;
+                }
+            }
+
            // Handle title edit
            const titleEditor = document.getElementById('recipeTitleEditor');
            if (titleEditor && titleEditor.classList.contains('active') &&
--- a/static/js/components/shared/MediaViewer.js
+++ b/static/js/components/shared/MediaViewer.js
@@ -0,0 +1,204 @@
+let activeViewer = null;
+
+function createMediaElement(item) {
+    const { url, type = 'image' } = item;
+    if (type === 'video') {
+        const el = document.createElement('video');
+        el.controls = true;
+        el.autoplay = true;
+        el.loop = true;
+        el.muted = true;
+        el.className = 'media-viewer-media media-viewer-video';
+        el.src = url;
+        return el;
+    }
+    const el = document.createElement('img');
+    el.className = 'media-viewer-media media-viewer-image';
+    el.src = url;
+    el.alt = 'Full size preview';
+    el.draggable = false;
+    return el;
+}
+
+function preloadAdjacent(items, index) {
+    [index - 1, index + 1].forEach(i => {
+        if (i >= 0 && i < items.length && items[i].type !== 'video') {
+            const preload = new Image();
+            preload.src = items[i].url;
+        }
+    });
+}
+
+export function openMediaViewer(arg1, arg2, arg3) {
+    closeMediaViewer();
+
+    let items, currentIndex, title = '';
+
+    if (Array.isArray(arg1)) {
+        items = arg1;
+        currentIndex = typeof arg2 === 'number' ? arg2 : 0;
+        title = (arg3 && arg3.title) || '';
+    } else {
+        items = [{ url: arg1, type: (arg2 && arg2.type) || 'image' }];
+        currentIndex = 0;
+        title = (arg2 && arg2.title) || '';
+    }
+
+    if (currentIndex < 0 || currentIndex >= items.length) currentIndex = 0;
+
+    const overlay = document.createElement('div');
+    overlay.className = 'media-viewer-overlay';
+    overlay.setAttribute('role', 'dialog');
+    overlay.setAttribute('aria-label', title || 'Media viewer');
+
+    const closeBtn = document.createElement('button');
+    closeBtn.className = 'media-viewer-close';
+    closeBtn.innerHTML = '<i class="fas fa-times"></i>';
+    closeBtn.title = 'Close (Esc)';
+    closeBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        closeMediaViewer();
+    });
+
+    const contentContainer = document.createElement('div');
+    contentContainer.className = 'media-viewer-content-container';
+
+    let mediaElement = createMediaElement(items[currentIndex]);
+    contentContainer.appendChild(mediaElement);
+
+    const hasNavigation = items.length > 1;
+
+    const counter = document.createElement('div');
+    counter.className = 'media-viewer-counter';
+    counter.textContent = hasNavigation ? `${currentIndex + 1} / ${items.length}` : '';
+    contentContainer.appendChild(counter);
+
+    if (title) {
+        const titleBar = document.createElement('div');
+        titleBar.className = 'media-viewer-title';
+        titleBar.textContent = title;
+        contentContainer.appendChild(titleBar);
+    }
+
+    let prevBtn, nextBtn;
+    if (hasNavigation) {
+        prevBtn = document.createElement('button');
+        prevBtn.className = 'media-viewer-nav media-viewer-prev';
+        prevBtn.innerHTML = '<i class="fas fa-chevron-left"></i>';
+        prevBtn.title = 'Previous (←)';
+        nextBtn = document.createElement('button');
+        nextBtn.className = 'media-viewer-nav media-viewer-next';
+        nextBtn.innerHTML = '<i class="fas fa-chevron-right"></i>';
+        nextBtn.title = 'Next (→)';
+
+        const navigate = (delta) => {
+            const newIndex = (currentIndex + delta + items.length) % items.length;
+            currentIndex = newIndex;
+
+            const oldMedia = contentContainer.querySelector('.media-viewer-media');
+            const newMedia = createMediaElement(items[currentIndex]);
+
+            if (oldMedia) {
+                if (oldMedia.tagName === 'VIDEO') {
+                    oldMedia.pause();
+                    oldMedia.src = '';
+                }
+                oldMedia.replaceWith(newMedia);
+            }
+            mediaElement = newMedia;
+
+            counter.textContent = `${currentIndex + 1} / ${items.length}`;
+            preloadAdjacent(items, currentIndex);
+        };
+
+        prevBtn.addEventListener('click', (e) => { e.stopPropagation(); navigate(-1); });
+        nextBtn.addEventListener('click', (e) => { e.stopPropagation(); navigate(1); });
+
+        overlay.appendChild(prevBtn);
+        overlay.appendChild(nextBtn);
+    }
+
+    overlay.appendChild(closeBtn);
+    overlay.appendChild(contentContainer);
+    document.body.appendChild(overlay);
+
+    requestAnimationFrame(() => {
+        overlay.classList.add('active');
+    });
+
+    overlay.addEventListener('click', (e) => {
+        if (e.target === overlay) {
+            closeMediaViewer();
+        }
+    });
+
+    const keyHandler = (e) => {
+        if (e.key === 'Escape') {
+            closeMediaViewer();
+            return;
+        }
+        if (hasNavigation) {
+            if (e.key === 'ArrowLeft') {
+                e.stopPropagation();
+                e.preventDefault();
+                prevBtn.click();
+                return;
+            }
+            if (e.key === 'ArrowRight') {
+                e.stopPropagation();
+                e.preventDefault();
+                nextBtn.click();
+                return;
+            }
+        }
+    };
+    document.addEventListener('keydown', keyHandler, true);
+
+    activeViewer = { overlay, keyHandler };
+    preloadAdjacent(items, currentIndex);
+
+    if (items[currentIndex].type === 'video') {
+        const recipeVideo = document.getElementById('recipeModalVideo');
+        if (recipeVideo && !recipeVideo.paused) {
+            recipeVideo.pause();
+        }
+    }
+}
+
+export function closeMediaViewer() {
+    if (!activeViewer) return;
+
+    const { overlay, keyHandler } = activeViewer;
+
+    const video = overlay.querySelector('video');
+    if (video) {
+        video.pause();
+        video.src = '';
+    }
+
+    const img = overlay.querySelector('img');
+    if (img) {
+        img.src = '';
+    }
+
+    document.removeEventListener('keydown', keyHandler, true);
+
+    overlay.classList.remove('active');
+    overlay.addEventListener('transitionend', () => {
+        if (overlay.parentNode) {
+            overlay.parentNode.removeChild(overlay);
+        }
+    }, { once: true });
+
+    setTimeout(() => {
+        if (overlay.parentNode) {
+            overlay.parentNode.removeChild(overlay);
+        }
+    }, 500);
+
+    activeViewer = null;
+}
+
+export function isMediaViewerOpen() {
+    return activeViewer !== null;
+}
--- a/static/js/components/shared/showcase/ShowcaseView.js
+++ b/static/js/components/shared/showcase/ShowcaseView.js
@@ -17,6 +17,7 @@ import {
 import { generateMetadataPanel } from './MetadataPanel.js';
 import { generateImageWrapper, generateVideoWrapper } from './MediaRenderers.js';
 import { getShowcaseUrl } from '../../../utils/civitaiUtils.js';
+import { openMediaViewer } from '../MediaViewer.js';

 export const showcaseListenerMetrics = {
    wheelListeners: 0,
@@ -640,6 +641,27 @@ export function initShowcaseContent(carousel) {
    initMediaControlHandlers(carousel);
    positionAllMediaControls(carousel);

+    // Click-to-view: open full-size media viewer when clicking showcase images/videos
+    const viewerElements = carousel.querySelectorAll('.media-wrapper img, .media-wrapper video');
+    const allItems = [];
+    const elementIndexMap = new Map();
+    viewerElements.forEach((el) => {
+        const isVideo = el.tagName === 'VIDEO';
+        const url = el.src || el.dataset.localSrc || el.dataset.remoteSrc;
+        if (url) {
+            elementIndexMap.set(el, allItems.length);
+            allItems.push({ url, type: isVideo ? 'video' : 'image' });
+        }
+    });
+    viewerElements.forEach((mediaEl) => {
+        const idx = elementIndexMap.get(mediaEl);
+        if (idx === undefined) return;
+        mediaEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            openMediaViewer(allItems, idx);
+        });
+    });
+
    // Bind scroll-indicator click events
    bindScrollIndicatorEvents(carousel);
    
--- a/templates/components/context_menu.html
+++ b/templates/components/context_menu.html
@@ -53,49 +53,74 @@
        <span>{{ t('loras.bulkOperations.selected', {'count': 0}) }}</span>
    </div>
    <div class="context-menu-separator"></div>
-    <div class="context-menu-item" data-action="refresh-all">
-        <i class="fas fa-sync-alt"></i> <span>{{ t('loras.bulkOperations.refreshAll') }}</span>
+    <div class="context-menu-section" data-section="workflow">
+        <div class="context-menu-section-header">{{ t('loras.bulkOperations.sections.workflow') }}</div>
+        <div class="context-menu-item has-submenu" data-has-submenu="send-to-workflow">
+            <i class="fas fa-paper-plane"></i>
+            <span>{{ t('loras.bulkOperations.sendToWorkflow') }}</span>
+            <i class="fas fa-chevron-right submenu-arrow"></i>
+            <div class="context-submenu">
+                <div class="context-menu-item" data-action="send-to-workflow-append">
+                    <i class="fas fa-paper-plane"></i> <span>{{ t('loras.contextMenu.sendToWorkflowAppend') }}</span>
+                </div>
+                <div class="context-menu-item" data-action="send-to-workflow-replace">
+                    <i class="fas fa-exchange-alt"></i> <span>{{ t('loras.contextMenu.sendToWorkflowReplace') }}</span>
+                </div>
+                <div class="context-menu-item" data-action="copy-all">
+                    <i class="fas fa-copy"></i> <span>{{ t('loras.bulkOperations.copyAll') }}</span>
+                </div>
+            </div>
+        </div>
    </div>
-    <div class="context-menu-item" data-action="check-updates">
-        <i class="fas fa-bell"></i> <span>{{ t('loras.bulkOperations.checkUpdates') }}</span>
+    <div class="context-menu-section" data-section="metadata">
+        <div class="context-menu-section-header">{{ t('loras.bulkOperations.sections.metadata') }}</div>
+        <div class="context-menu-item" data-action="refresh-all">
+            <i class="fas fa-sync-alt"></i> <span>{{ t('loras.bulkOperations.refreshAll') }}</span>
+        </div>
+        <div class="context-menu-item" data-action="check-updates">
+            <i class="fas fa-bell"></i> <span>{{ t('loras.bulkOperations.checkUpdates') }}</span>
+        </div>
+        <div class="context-menu-item" data-action="skip-metadata-refresh">
+            <i class="fas fa-ban"></i> <span>{{ t('loras.bulkOperations.skipMetadataRefresh') }}</span>
+        </div>
+        <div class="context-menu-item" data-action="resume-metadata-refresh">
+            <i class="fas fa-redo"></i> <span>{{ t('loras.bulkOperations.resumeMetadataRefresh') }}</span>
+        </div>
    </div>
-    <div class="context-menu-item" data-action="copy-all">
-        <i class="fas fa-copy"></i> <span>{{ t('loras.bulkOperations.copyAll') }}</span>
+    <div class="context-menu-section" data-section="attributes">
+        <div class="context-menu-section-header">{{ t('loras.bulkOperations.sections.attributes') }}</div>
+        <div class="context-menu-item" data-action="add-tags">
+            <i class="fas fa-tags"></i> <span>{{ t('loras.bulkOperations.addTags') }}</span>
+        </div>
+        <div class="context-menu-item" data-action="set-base-model">
+            <i class="fas fa-layer-group"></i> <span>{{ t('loras.bulkOperations.setBaseModel') }}</span>
+        </div>
+        <div class="context-menu-item" data-action="set-favorite">
+            <i class="fas fa-star"></i> <span>{{ t('loras.bulkOperations.setFavorite') }}</span>
+        </div>
+        <div class="context-menu-item" data-action="set-content-rating">
+            <i class="fas fa-exclamation-triangle"></i> <span>{{ t('loras.bulkOperations.setContentRating') }}</span>
+        </div>
    </div>
-    <div class="context-menu-item" data-action="send-to-workflow-append">
-        <i class="fas fa-paper-plane"></i> <span>{{ t('loras.contextMenu.sendToWorkflowAppend') }}</span>
+    <div class="context-menu-section" data-section="organize">
+        <div class="context-menu-section-header">{{ t('loras.bulkOperations.sections.organize') }}</div>
+        <div class="context-menu-item" data-action="auto-organize">
+            <i class="fas fa-magic"></i> <span>{{ t('loras.bulkOperations.autoOrganize') }}</span>
+        </div>
+        <div class="context-menu-item" data-action="move-all">
+            <i class="fas fa-folder-open"></i> <span>{{ t('loras.bulkOperations.moveAll') }}</span>
+        </div>
    </div>
-    <div class="context-menu-item" data-action="send-to-workflow-replace">
-        <i class="fas fa-exchange-alt"></i> <span>{{ t('loras.contextMenu.sendToWorkflowReplace') }}</span>
-    </div>
-    <div class="context-menu-item" data-action="auto-organize">
-        <i class="fas fa-magic"></i> <span>{{ t('loras.bulkOperations.autoOrganize') }}</span>
-    </div>
-    <div class="context-menu-item" data-action="add-tags">
-        <i class="fas fa-tags"></i> <span>{{ t('loras.bulkOperations.addTags') }}</span>
-    </div>
-    <div class="context-menu-item" data-action="set-base-model">
-        <i class="fas fa-layer-group"></i> <span>{{ t('loras.bulkOperations.setBaseModel') }}</span>
-    </div>
-    <div class="context-menu-item" data-action="set-favorite">
-        <i class="fas fa-star"></i> <span>{{ t('loras.bulkOperations.setFavorite') }}</span>
-    </div>
-    <div class="context-menu-item" data-action="set-content-rating">
-        <i class="fas fa-exclamation-triangle"></i> <span>{{ t('loras.bulkOperations.setContentRating') }}</span>
-    </div>
-    <div class="context-menu-item" data-action="skip-metadata-refresh">
-        <i class="fas fa-ban"></i> <span>{{ t('loras.bulkOperations.skipMetadataRefresh') }}</span>
-    </div>
-    <div class="context-menu-item" data-action="resume-metadata-refresh">
-        <i class="fas fa-redo"></i> <span>{{ t('loras.bulkOperations.resumeMetadataRefresh') }}</span>
+    <div class="context-menu-section" data-section="download">
+        <div class="context-menu-section-header">{{ t('loras.bulkOperations.sections.download') }}</div>
+        <div class="context-menu-item" data-action="download-example-images">
+            <i class="fas fa-download"></i> <span>{{ t('loras.bulkOperations.downloadExamples') }}</span>
+        </div>
+        <div class="context-menu-item" data-action="download-missing-loras">
+            <i class="fas fa-download"></i> <span>{{ t('loras.bulkOperations.downloadMissingLoras') }}</span>
+        </div>
    </div>
    <div class="context-menu-separator"></div>
-    <div class="context-menu-item" data-action="download-missing-loras">
-        <i class="fas fa-download"></i> <span>{{ t('loras.bulkOperations.downloadMissingLoras') }}</span>
-    </div>
-    <div class="context-menu-item" data-action="move-all">
-        <i class="fas fa-folder-open"></i> <span>{{ t('loras.bulkOperations.moveAll') }}</span>
-    </div>
    <div class="context-menu-item delete-item" data-action="delete-all">
        <i class="fas fa-trash"></i> <span>{{ t('loras.bulkOperations.deleteAll') }}</span>
    </div>
Author	SHA1	Message	Date
Will Miao	75f74d54d8	feat(bulk): reorganize context menu with sections and submenu for workflow actions Group 15 flat menu items into 5 logical sections (Workflow, Metadata, Attributes, Organize, Download) with section headers to reduce cognitive load. Nest the three workflow-related actions (Append, Replace, Copy Syntax) into a single "Send to Workflow" hover-triggered submenu. Add submenu infrastructure to BaseContextMenu with mouseover/mouseout boundary detection, 250ms close delay, and viewport-aware positioning. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-11 21:06:47 +08:00
Will Miao	ab6100f596	feat(bulk): add "Download Example Images" to bulk select context menu (#923 ) Allows downloading example images only for selected models instead of the entire library. Reuses the existing /api/lm/force-download-example-images endpoint which already accepts an array of model hashes. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-11 18:05:00 +08:00
Will Miao	5d3ab3bbf8	feat(showcase): click-to-view full-size image/video in recipe and model modals (#926 ) - Add MediaViewer overlay for full-size image/video display with prev/next navigation, direction keys, counter, and adjacent preloading - Recipe modal: click preview image/video opens full-size viewer - Model showcase: click any example image/video opens viewer with full gallery navigation; blurred NSFW content opens directly to clear view - Use Map<Element, number> for DOM-index mapping instead of URL comparison to avoid index mismatch from lazy-loaded vs data-attribute URLs	2026-05-10 22:22:24 +08:00
Will Miao	d9dc0dba8d	perf(startup): load extra model paths during Config init to avoid double symlink scan Move extra folder path resolution from _initialize_services (app.on_startup) into Config.__init__ via new _load_extra_paths_from_settings() method. This eliminates a redundant second symlink scan and consolidates all 'Found roots' / 'Found extra roots' logs into one contiguous block during custom node import, before the ComfyUI server starts.	2026-05-08 14:55:53 +08:00