feat(ui): redesign model modal showcase as on-demand gallery

locales/en.json

@@ -1533,6 +1533,30 @@
         "examples": "Loading examples...",
         "versions": "Loading versions..."
       },
+      "showcase": {
+        "hiddenBySfw": "{count} hidden by SFW-only setting",
+        "showExamples": "Show examples",
+        "showCount": "Show examples ({count})",
+        "hideExamples": "Hide examples",
+        "addExamples": "Add examples",
+        "previousExample": "Previous example",
+        "nextExample": "Next example",
+        "noExamples": "No example images available",
+        "addMoreExamples": "Add more examples",
+        "dragDrop": "Drag & drop images or videos here",
+        "or": "or",
+        "selectFiles": "Select Files",
+        "supportedFormats": "Supported formats: jpg, png, gif, webp, avif, jxl, mp4, webm",
+        "importing": "Importing files...",
+        "noSupportedFiles": "No supported files selected. Please select image or video files.",
+        "allFiltered": "All example images are filtered due to NSFW content settings",
+        "sfwOnlyEnabled": "Your settings are currently set to show only safe-for-work content",
+        "changeInSettings": "You can change this in Settings",
+        "nsfwMature": "Mature Content",
+        "nsfwR": "R-rated Content",
+        "nsfwX": "X-rated Content",
+        "nsfwXxx": "XXX-rated Content"
+      },
       "versions": {
         "heading": "Model versions",
         "copy": "Track and manage every version of this model in one place.",

static/css/components/lora-modal/showcase.css

@@ -4,19 +4,268 @@
   margin-top: var(--space-4);
 }
 
-.carousel {
+/* Gallery: collapsed indicator bar + expanded main viewer with thumbnail strip */
-  transition: max-height 0.3s ease-in-out;
+
+/* Collapsed indicator bar — slim, no remote media is rendered until expanded */
+.gallery-indicator-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  background: var(--lora-surface);
+  border: 1px solid var(--lora-border);
+  border-radius: var(--border-radius-sm);
+}
+
+.gallery-preview-thumb {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--border-radius-xs);
+  overflow: hidden;
+  flex-shrink: 0;
+  background: var(--bg-color);
+}
+
+.gallery-preview-thumb img,
+.gallery-preview-thumb video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.gallery-indicator-bar .gallery-show-btn {
+  flex: 1;
+  justify-content: flex-start;
+}
+
+.gallery-indicator-bar .gallery-import-btn {
+  margin-left: auto;
+}
+
+/* Expanded gallery toolbar */
+.gallery-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-2);
+}
+
+/* Position badge floats over the main media, bottom-right */
+.gallery-position-badge {
+  position: absolute;
+  right: var(--space-2);
+  bottom: var(--space-2);
+  z-index: 6;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 0.8em;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}
+
+/* While the gallery is expanded the thumbnail strip sits in the modal's
+   bottom-right corner, where the back-to-top button would overlap it */
+.modal-content.showcase-expanded .back-to-top {
+  display: none;
+}
+
+.gallery-toolbar .gallery-import-btn {
+  margin-left: auto;
+}
+
+.gallery-show-btn,
+.gallery-import-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-xs);
+  color: var(--text-color);
+  font-size: 0.9em;
+  cursor: pointer;
+  transition: var(--transition-base);
+}
+
+.gallery-show-btn:hover,
+.gallery-import-btn:hover {
+  border-color: var(--lora-accent);
+  color: var(--lora-accent);
+}
+
+.nsfw-filter-notification {
+  font-size: 0.85em;
+  color: var(--text-color);
+  opacity: 0.7;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Main viewer — the container hugs the active media's aspect ratio
+   (--media-aspect = width/height, set per item) so no dead space remains.
+   overflow: hidden also clips the hoisted metadata panel while it is
+   translated below the bottom edge, so it never extends the modal's
+   scrollable height (which caused a scroll jump when it appeared) */
+.gallery-main {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--border-radius-sm);
+}
+
+.main-media-container {
+  position: relative;
+  margin: 0 auto;
+  width: min(100%, calc(min(75vh, 800px) * var(--media-aspect, 1.3333)));
+  aspect-ratio: var(--media-aspect, 1.3333);
+  max-height: min(75vh, 800px);
+  background: var(--lora-surface);
+  border-radius: var(--border-radius-sm);
   overflow: hidden;
 }
 
-.carousel.collapsed {
+.main-media-container .media-wrapper {
-  max-height: 0;
+  width: 100%;
+  height: 100%;
+  margin-bottom: 0;
 }
 
-.carousel-container {
+.main-media-container .media-wrapper img,
+.main-media-container .media-wrapper video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  cursor: zoom-in;
+}
+
+/* Nav buttons float over the media, visible on hover */
+.gallery-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 6;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  opacity: 0;
+  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  pointer-events: none;
+}
+
+.gallery-nav.prev {
+  left: var(--space-2);
+}
+
+.gallery-nav.next {
+  right: var(--space-2);
+}
+
+.gallery-main:hover .gallery-nav,
+.gallery-nav:focus-visible {
+  opacity: 0.9;
+  pointer-events: auto;
+}
+
+.gallery-nav:hover {
+  opacity: 1;
+  border-color: var(--lora-accent);
+  color: var(--lora-accent);
+}
+
+/* Thumbnail strip */
+.gallery-strip {
   display: flex;
-  flex-direction: column;
+  gap: var(--space-1);
-  gap: var(--space-2);
+  margin-top: var(--space-2);
+  overflow-x: auto;
+  padding-bottom: var(--space-1);
+}
+
+.gallery-thumb {
+  position: relative;
+  width: 72px;
+  height: 72px;
+  flex-shrink: 0;
+  border: 2px solid var(--border-color);
+  border-radius: var(--border-radius-xs);
+  overflow: hidden;
+  background: var(--lora-surface);
+  cursor: pointer;
+  padding: 0;
+  transition: border-color 0.15s ease;
+}
+
+.gallery-thumb:hover {
+  border-color: var(--text-color);
+}
+
+.gallery-thumb.active {
+  border-color: var(--lora-accent);
+}
+
+.gallery-thumb .thumb-media {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.gallery-thumb .thumb-media.blurred {
+  filter: blur(8px);
+}
+
+.gallery-thumb .thumb-video-badge,
+.gallery-thumb .thumb-nsfw-badge {
+  position: absolute;
+  bottom: 3px;
+  right: 3px;
+  font-size: 10px;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: var(--border-radius-xs);
+  padding: 1px 4px;
+  pointer-events: none;
+}
+
+.gallery-thumb .thumb-nsfw-badge {
+  top: 3px;
+  bottom: auto;
+}
+
+.gallery-strip::-webkit-scrollbar {
+  height: 6px;
+}
+
+.gallery-strip::-webkit-scrollbar-thumb {
+  background-color: var(--border-color);
+  border-radius: 3px;
+}
+
+/* Inline import zone toggled from the toolbar */
+.gallery-import-zone {
+  margin-top: var(--space-2);
+}
+
+.gallery-import-zone.hidden {
+  display: none;
+}
+
+.gallery-import-zone .example-import-area {
+  margin-top: 0;
 }
 
 .media-wrapper {
@@ -31,16 +280,6 @@
   margin-bottom: 0;
 }
 
-.media-wrapper img,
-.media-wrapper video {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
 .no-examples {
   text-align: center;
   padding: var(--space-3);
@@ -48,11 +287,6 @@
   opacity: 0.7;
 }
 
-/* Adjust the media wrapper for tab system */
-#showcase-tab .carousel-container {
-  margin-top: var(--space-2);
-}
-
 /* Add styles for blurred showcase content */
 .nsfw-media-wrapper {
   position: relative;
@@ -217,6 +451,24 @@
   pointer-events: auto;
 }
 
+/* Hoisted panel: pinned to the bottom of .gallery-main at full column width */
+.gallery-main > .image-metadata-panel {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 7;
+  max-height: 60%;
+  border-radius: var(--border-radius-sm);
+  border: 1px solid var(--border-color);
+}
+
+.gallery-main > .image-metadata-panel.visible {
+  transform: translateY(0);
+  opacity: 0.98;
+  pointer-events: auto;
+}
+
 /* Adjust to dark theme */
 [data-theme="dark"] .image-metadata-panel {
   background: var(--card-bg);
@@ -388,31 +640,6 @@
   opacity: 0.8;
 }
 
-/* Scroll Indicator */
-.scroll-indicator {
-  cursor: pointer;
-  padding: var(--space-2);
-  background: var(--lora-surface);
-  border: 1px solid var(--lora-border);
-  border-radius: var(--border-radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  margin-bottom: var(--space-2);
-  transition: background-color 0.2s, transform 0.2s;
-}
-
-.scroll-indicator:hover {
-  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
-  transform: translateY(-1px);
-}
-
-.scroll-indicator span {
-  font-size: 0.9em;
-  color: var(--text-color);
-}
-
 .lazy {
   opacity: 0;
   transition: opacity 0.3s;

static/js/components/shared/ModelCard.js

@@ -1,7 +1,6 @@
 import { showToast, openCivitai, openHuggingFace, copyToClipboard, copyLoraSyntax, sendLoraToWorkflow, sendEmbeddingToWorkflow, openExampleImagesFolder, buildLoraSyntax, sendModelPathToWorkflow } from '../../utils/uiHelpers.js';
 import { state, getCurrentPageState } from '../../state/index.js';
 import { showModelModal } from './ModelModal.js';
-import { toggleShowcase } from './showcase/ShowcaseView.js';
 import { bulkManager } from '../../managers/BulkManager.js';
 import { modalManager } from '../../managers/ModalManager.js';
 import { NSFW_LEVELS, getBaseModelAbbreviation, getSubTypeAbbreviation, getMatureBlurThreshold, MODEL_SUBTYPE_DISPLAY_NAMES } from '../../utils/constants.js';
@@ -304,10 +303,20 @@ function handleCardClick(card, modelType) {
     }
 }
 
+// Preview URL is not in the dataset; read it from the card's rendered media
+function getCardPreviewUrl(card) {
+    const cardMedia = card.querySelector('.card-preview img, .card-preview video');
+    if (!cardMedia) return '';
+    return cardMedia.tagName === 'VIDEO'
+        ? (cardMedia.dataset.src || '')
+        : (cardMedia.src || '');
+}
+
 async function showModelModalFromCard(card, modelType) {
     // Create model metadata object
     const modelMeta = {
         sha256: card.dataset.sha256,
+        preview_url: getCardPreviewUrl(card),
         file_path: card.dataset.filepath,
         model_name: card.dataset.name,
         file_name: card.dataset.file_name,
@@ -397,6 +406,7 @@ function showExampleAccessModal(card, modelType) {
             // Get the model data from card dataset (works for both lora and checkpoint)
             const modelMeta = {
                 sha256: card.dataset.sha256,
+                preview_url: getCardPreviewUrl(card),
                 file_path: card.dataset.filepath,
                 model_name: card.dataset.name,
                 file_name: card.dataset.file_name,
@@ -421,30 +431,18 @@ function showExampleAccessModal(card, modelType) {
             // Show the model modal
             await showModelModal(modelMeta, modelType);
 
-            // Scroll to import area after modal is visible
+            // Reveal the import entry once the modal content has rendered
             setTimeout(() => {
-                const importArea = document.querySelector('.example-import-area');
+                // Gallery mode: the import button is always visible — expand the zone
+                const importBtn = document.querySelector('#modelModal .gallery-import-btn');
+                if (importBtn) {
+                    importBtn.click();
+                    return;
+                }
+                // Empty state: the import area is the whole tab content — scroll to it
+                const importArea = document.querySelector('#modelModal .example-import-area');
                 if (importArea) {
-                    const showcaseTab = document.getElementById('showcase-tab');
+                    importArea.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-                    if (showcaseTab) {
-                        // First make sure showcase tab is visible
-                        const tabBtn = document.querySelector('.tab-btn[data-tab="showcase"]');
-                        if (tabBtn && !tabBtn.classList.contains('active')) {
-                            tabBtn.click();
-                        }
-
-                        // Then toggle showcase if collapsed
-                        const carousel = showcaseTab.querySelector('.carousel');
-                        if (carousel && carousel.classList.contains('collapsed')) {
-                            const scrollIndicator = showcaseTab.querySelector('.scroll-indicator');
-                            if (scrollIndicator) {
-                                toggleShowcase(scrollIndicator);
-                            }
-                        }
-
-                        // Finally scroll to the import area
-                        importArea.scrollIntoView({ behavior: 'smooth' });
-                    }
                 }
             }, 500);
         };

static/js/components/shared/ModelModal.js

@@ -2,8 +2,6 @@ import { showToast, openCivitai, sendLoraToWorkflow, sendEmbeddingToWorkflow, se
 import { modalManager } from '../../managers/ModalManager.js';
 import { MODEL_TYPES } from '../../api/apiConfig.js';
 import {
-    toggleShowcase,
-    setupShowcaseScroll,
     scrollToTop,
     loadExampleImages
 } from './showcase/ShowcaseView.js';
@@ -727,8 +725,6 @@ export async function showModelModal(model, modelType) {
         updateCardUpdateAvailability(hasUpdate);
     }
 
-    let showcaseCleanup;
-
     const onCloseCallback = function () {
         // Clean up all handlers when modal closes for LoRA
         const modalElement = document.getElementById(modalId);
@@ -736,10 +732,6 @@ export async function showModelModal(model, modelType) {
             modalElement.removeEventListener('click', modalElement._clickHandler);
             delete modalElement._clickHandler;
         }
-        if (showcaseCleanup) {
-            showcaseCleanup();
-            showcaseCleanup = null;
-        }
         cleanupNavigationShortcuts();
     };
 
@@ -759,6 +751,14 @@ export async function showModelModal(model, modelType) {
         if (modelType === 'embeddings' && modelWithFullData.folder) {
             activeModalElement.dataset.folder = modelWithFullData.folder;
         }
+        // Show the back-to-top button once the modal content is scrolled
+        const modalContent = activeModalElement.querySelector('.modal-content');
+        const backToTopBtn = activeModalElement.querySelector('.back-to-top');
+        if (modalContent && backToTopBtn) {
+            modalContent.addEventListener('scroll', () => {
+                backToTopBtn.classList.toggle('visible', modalContent.scrollTop > 300);
+            });
+        }
     }
     updateVersionsTabBadge(updateAvailabilityState.hasUpdateAvailable);
     const versionsTabController = initVersionsTab({
@@ -771,7 +771,6 @@ export async function showModelModal(model, modelType) {
         onUpdateStatusChange: handleUpdateStatusChange,
     });
     setupEditableFields(modelWithFullData.file_path, modelType);
-    showcaseCleanup = setupShowcaseScroll(modalId);
     setupTabSwitching({
         onTabChange: async (tab) => {
             if (tab === 'versions') {
@@ -814,7 +813,7 @@ export async function showModelModal(model, modelType) {
     const customImages = modelWithFullData.civitai?.customImages || [];
     // Combine images - regular images first, then custom images
     const allImages = [...regularImages, ...customImages];
-    loadExampleImages(allImages, modelWithFullData.sha256);
+    loadExampleImages(allImages, modelWithFullData.sha256, modelWithFullData.preview_url || '');
 }
 
 function renderLoraSpecificContent(lora, escapedWords) {
@@ -1316,7 +1315,6 @@ async function handleSendToWorkflow(target, modelType) {
 // Export the model modal API
 const modelModal = {
     show: showModelModal,
-    toggleShowcase,
     scrollToTop
 };
 

static/js/components/shared/showcase/MediaRenderers.js

@@ -4,9 +4,9 @@
  */
 
 /**
- * Generate video wrapper HTML
+ * Generate video wrapper HTML. The wrapper fills its container (the gallery's
+ * main viewer) and the media is letterboxed inside via object-fit: contain.
  * @param {Object} media - Media metadata
- * @param {number} heightPercent - Height percentage for container
  * @param {boolean} shouldBlur - Whether content should be blurred
  * @param {string} nsfwText - NSFW warning text
  * @param {string} metadataPanel - Metadata panel HTML
@@ -15,11 +15,11 @@
  * @param {string} mediaControlsHtml - HTML for media control buttons
  * @returns {string} HTML content
  */
-export function generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl, mediaControlsHtml = '') {
+export function generateVideoWrapper(media, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl, mediaControlsHtml = '') {
     const nsfwLevel = media.nsfwLevel !== undefined ? media.nsfwLevel : 0;
 
     return `
-        <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%" data-short-id="${media.id || ''}" data-nsfw-level="${nsfwLevel}">
+        <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" data-short-id="${media.id || ''}" data-nsfw-level="${nsfwLevel}">
             ${shouldBlur ? `
                 <button class="toggle-blur-btn showcase-toggle-btn" title="Toggle blur">
                     <i class="fas fa-eye"></i>
@@ -48,9 +48,9 @@ export function generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText,
 }
 
 /**
- * Generate image wrapper HTML
+ * Generate image wrapper HTML. The wrapper fills its container (the gallery's
+ * main viewer) and the media is letterboxed inside via object-fit: contain.
  * @param {Object} media - Media metadata
- * @param {number} heightPercent - Height percentage for container
  * @param {boolean} shouldBlur - Whether content should be blurred
  * @param {string} nsfwText - NSFW warning text
  * @param {string} metadataPanel - Metadata panel HTML
@@ -59,11 +59,11 @@ export function generateVideoWrapper(media, heightPercent, shouldBlur, nsfwText,
  * @param {string} mediaControlsHtml - HTML for media control buttons
  * @returns {string} HTML content
  */
-export function generateImageWrapper(media, heightPercent, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl, mediaControlsHtml = '') {
+export function generateImageWrapper(media, shouldBlur, nsfwText, metadataPanel, localUrl, remoteUrl, mediaControlsHtml = '') {
     const nsfwLevel = media.nsfwLevel !== undefined ? media.nsfwLevel : 0;
 
     return `
-        <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" style="padding-bottom: ${heightPercent}%" data-short-id="${media.id || ''}" data-nsfw-level="${nsfwLevel}">
+        <div class="media-wrapper ${shouldBlur ? 'nsfw-media-wrapper' : ''}" data-short-id="${media.id || ''}" data-nsfw-level="${nsfwLevel}">
             ${shouldBlur ? `
                 <button class="toggle-blur-btn showcase-toggle-btn" title="Toggle blur">
                     <i class="fas fa-eye"></i>

static/js/components/shared/showcase/MediaUtils.js

@@ -213,59 +213,54 @@ export function getRenderedMediaRect(mediaElement, containerWidth, containerHeig
 }
 
 /**
- * Initialize metadata panel interaction handlers
+ * Initialize metadata panel interaction handlers: hover over the media reveals
+ * the panel and media controls (same as the legacy carousel). Panel-internal
+ * buttons and wheel isolation are bound here as well.
  * @param {HTMLElement} container - Container element with media wrappers
  */
 export function initMetadataPanelHandlers(container) {
     const mediaWrappers = container.querySelectorAll('.media-wrapper');
 
     mediaWrappers.forEach(wrapper => {
-        // Get the metadata panel and media element (img or video)
         const metadataPanel = wrapper.querySelector('.image-metadata-panel');
+        if (!metadataPanel) return;
+
         const mediaControls = wrapper.querySelector('.media-controls');
         const mediaElement = wrapper.querySelector('img, video');
 
-        if (!mediaElement) return;
+        if (mediaElement) {
+            let isOverMetadataPanel = false;
 
-        let isOverMetadataPanel = false;
+            // Hovering the actual media content reveals the metadata panel and controls
+            wrapper.addEventListener('mousemove', (e) => {
+                const rect = wrapper.getBoundingClientRect();
+                const mouseX = e.clientX - rect.left;
+                const mouseY = e.clientY - rect.top;
 
-        // Add event listeners to the wrapper for mouse tracking
+                const mediaRect = getRenderedMediaRect(mediaElement, rect.width, rect.height);
-        wrapper.addEventListener('mousemove', (e) => {
+                const isOverMedia = (
-            // Get mouse position relative to wrapper
+                    mouseX >= mediaRect.left &&
-            const rect = wrapper.getBoundingClientRect();
+                    mouseX <= mediaRect.right &&
-            const mouseX = e.clientX - rect.left;
+                    mouseY >= mediaRect.top &&
-            const mouseY = e.clientY - rect.top;
+                    mouseY <= mediaRect.bottom
+                );
 
-            // Get the actual displayed dimensions of the media element
+                if (isOverMedia || isOverMetadataPanel) {
-            const mediaRect = getRenderedMediaRect(mediaElement, rect.width, rect.height);
+                    metadataPanel.classList.add('visible');
+                    if (mediaControls) mediaControls.classList.add('visible');
+                } else {
+                    metadataPanel.classList.remove('visible');
+                    if (mediaControls) mediaControls.classList.remove('visible');
+                }
+            });
 
-            // Check if mouse is over the actual media content
+            wrapper.addEventListener('mouseleave', () => {
-            const isOverMedia = (
+                if (!isOverMetadataPanel) {
-                mouseX >= mediaRect.left && 
+                    metadataPanel.classList.remove('visible');
-                mouseX <= mediaRect.right && 
+                    if (mediaControls) mediaControls.classList.remove('visible');
-                mouseY >= mediaRect.top && 
+                }
-                mouseY <= mediaRect.bottom
+            });
-            );
 
-            // Show metadata panel and controls when over media content or metadata panel itself
-            if (isOverMedia || isOverMetadataPanel) {
-                if (metadataPanel) metadataPanel.classList.add('visible');
-                if (mediaControls) mediaControls.classList.add('visible');
-            } else {
-                if (metadataPanel) metadataPanel.classList.remove('visible');
-                if (mediaControls) mediaControls.classList.remove('visible');
-            }
-        });
-        
-        wrapper.addEventListener('mouseleave', () => {
-            if (!isOverMetadataPanel) {
-                if (metadataPanel) metadataPanel.classList.remove('visible');
-                if (mediaControls) mediaControls.classList.remove('visible');
-            }
-        });
-        
-        // Add mouse enter/leave events for the metadata panel itself
-        if (metadataPanel) {
             metadataPanel.addEventListener('mouseenter', () => {
                 isOverMetadataPanel = true;
                 metadataPanel.classList.add('visible');
@@ -274,129 +269,114 @@ export function initMetadataPanelHandlers(container) {
 
             metadataPanel.addEventListener('mouseleave', () => {
                 isOverMetadataPanel = false;
-                // Only hide if mouse is not over the media
+                metadataPanel.classList.remove('visible');
-                const rect = wrapper.getBoundingClientRect();
+                if (mediaControls) mediaControls.classList.remove('visible');
-                const mediaRect = getRenderedMediaRect(mediaElement, rect.width, rect.height);
-                const mouseX = event.clientX - rect.left;
-                const mouseY = event.clientY - rect.top;
-                
-                const isOverMedia = (
-                    mouseX >= mediaRect.left && 
-                    mouseX <= mediaRect.right && 
-                    mouseY >= mediaRect.top && 
-                    mouseY <= mediaRect.bottom
-                );
-                
-                if (!isOverMedia) {
-                    metadataPanel.classList.remove('visible');
-                    if (mediaControls) mediaControls.classList.remove('visible');
-                }
             });
-            
-            // Prevent events from bubbling
-            metadataPanel.addEventListener('click', (e) => {
-                e.stopPropagation();
-            });
-            
-            // Handle copy prompt buttons
-            const copyBtns = metadataPanel.querySelectorAll('.copy-prompt-btn');
-            copyBtns.forEach(copyBtn => {
-                const promptIndex = copyBtn.dataset.promptIndex;
-                const promptElement = wrapper.querySelector(`#prompt-${promptIndex}`);
-                
-                copyBtn.addEventListener('click', async (e) => {
-                    e.stopPropagation();
-                    
-                    if (!promptElement) return;
-                    
-                    try {
-                        await copyToClipboard(promptElement.textContent, 'Prompt copied to clipboard');
-                    } catch (err) {
-                        console.error('Copy failed:', err);
-                        showToast('toast.triggerWords.copyFailed', {}, 'error');
-                    }
-                });
-            });
-            
-            // Handle send prompt buttons
-            const sendBtns = metadataPanel.querySelectorAll('.send-prompt-btn');
-            sendBtns.forEach(sendBtn => {
-                const promptIndex = sendBtn.dataset.promptIndex;
-                const promptElement = wrapper.querySelector(`#prompt-${promptIndex}`);
-                
-                sendBtn.addEventListener('click', async (e) => {
-                    e.stopPropagation();
-                    
-                    if (!promptElement) return;
-                    
-                    let promptText = promptElement.textContent || '';
-                    if (!promptText.trim()) {
-                        showToast('toast.recipes.noPromptToSend', {}, 'warning');
-                        return;
-                    }
-                    
-                    // Respect strip <lora> setting from global state
-                    if (state.global.settings?.strip_lora_on_copy) {
-                        promptText = stripLoraTags(promptText);
-                    }
-                    
-                    sendPromptToWorkflow(promptText);
-                });
-            });
-            
-            // Handle send params buttons
-            const paramsBtn = metadataPanel.querySelector('.send-params-btn');
-            if (paramsBtn) {
-                paramsBtn.addEventListener('click', async (e) => {
-                    e.stopPropagation();
-                    
-                    // Collect gen params from the param-tag elements
-                    const tagsContainer = wrapper.querySelector('.params-tags');
-                    if (!tagsContainer) return;
-                    
-                    const paramTags = tagsContainer.querySelectorAll('.param-tag');
-                    const genParams = {};
-                    
-                    // Map display labels to genParams keys
-                    const labelToKey = {
-                        'Seed': 'seed',
-                        'Steps': 'steps',
-                        'Sampler': 'sampler',
-                        'CFG': 'cfg_scale',
-                    };
-                    
-                    paramTags.forEach(tag => {
-                        const nameEl = tag.querySelector('.param-name');
-                        const valueEl = tag.querySelector('.param-value');
-                        if (!nameEl || !valueEl) return;
-                        
-                        const label = nameEl.textContent.replace(':', '').trim();
-                        const key = labelToKey[label];
-                        if (key) {
-                            genParams[key] = valueEl.textContent.trim();
-                        }
-                    });
-                    
-                    if (Object.keys(genParams).length === 0) {
-                        showToast('No sendable parameters found', {}, 'warning');
-                        return;
-                    }
-                    
-                    await sendGenParamsToWorkflow(genParams);
-                });
-            }
-            
-            // Prevent panel scroll from causing modal scroll
-            metadataPanel.addEventListener('wheel', (e) => {
-                const isAtTop = metadataPanel.scrollTop === 0;
-                const isAtBottom = metadataPanel.scrollHeight - metadataPanel.scrollTop === metadataPanel.clientHeight;
-                
-                // Only prevent default if scrolling would cause the panel to scroll
-                if ((e.deltaY < 0 && !isAtTop) || (e.deltaY > 0 && !isAtBottom)) {
-                    e.stopPropagation();
-                }
-            }, { passive: true });
         }
+
+        // Prevent events from bubbling
+        metadataPanel.addEventListener('click', (e) => {
+            e.stopPropagation();
+        });
+
+        // Handle copy prompt buttons
+        const copyBtns = metadataPanel.querySelectorAll('.copy-prompt-btn');
+        copyBtns.forEach(copyBtn => {
+            const promptIndex = copyBtn.dataset.promptIndex;
+            const promptElement = wrapper.querySelector(`#prompt-${promptIndex}`);
+
+            copyBtn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+
+                if (!promptElement) return;
+
+                try {
+                    await copyToClipboard(promptElement.textContent, 'Prompt copied to clipboard');
+                } catch (err) {
+                    console.error('Copy failed:', err);
+                    showToast('toast.triggerWords.copyFailed', {}, 'error');
+                }
+            });
+        });
+
+        // Handle send prompt buttons
+        const sendBtns = metadataPanel.querySelectorAll('.send-prompt-btn');
+        sendBtns.forEach(sendBtn => {
+            const promptIndex = sendBtn.dataset.promptIndex;
+            const promptElement = wrapper.querySelector(`#prompt-${promptIndex}`);
+
+            sendBtn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+
+                if (!promptElement) return;
+
+                let promptText = promptElement.textContent || '';
+                if (!promptText.trim()) {
+                    showToast('toast.recipes.noPromptToSend', {}, 'warning');
+                    return;
+                }
+
+                // Respect strip <lora> setting from global state
+                if (state.global.settings?.strip_lora_on_copy) {
+                    promptText = stripLoraTags(promptText);
+                }
+
+                sendPromptToWorkflow(promptText);
+            });
+        });
+
+        // Handle send params buttons
+        const paramsBtn = metadataPanel.querySelector('.send-params-btn');
+        if (paramsBtn) {
+            paramsBtn.addEventListener('click', async (e) => {
+                e.stopPropagation();
+
+                // Collect gen params from the param-tag elements
+                const tagsContainer = wrapper.querySelector('.params-tags');
+                if (!tagsContainer) return;
+
+                const paramTags = tagsContainer.querySelectorAll('.param-tag');
+                const genParams = {};
+
+                // Map display labels to genParams keys
+                const labelToKey = {
+                    'Seed': 'seed',
+                    'Steps': 'steps',
+                    'Sampler': 'sampler',
+                    'CFG': 'cfg_scale',
+                };
+
+                paramTags.forEach(tag => {
+                    const nameEl = tag.querySelector('.param-name');
+                    const valueEl = tag.querySelector('.param-value');
+                    if (!nameEl || !valueEl) return;
+
+                    const label = nameEl.textContent.replace(':', '').trim();
+                    const key = labelToKey[label];
+                    if (key) {
+                        genParams[key] = valueEl.textContent.trim();
+                    }
+                });
+
+                if (Object.keys(genParams).length === 0) {
+                    showToast('No sendable parameters found', {}, 'warning');
+                    return;
+                }
+
+                await sendGenParamsToWorkflow(genParams);
+            });
+        }
+
+        // Prevent panel scroll from causing modal scroll
+        metadataPanel.addEventListener('wheel', (e) => {
+            const isAtTop = metadataPanel.scrollTop === 0;
+            const isAtBottom = metadataPanel.scrollHeight - metadataPanel.scrollTop === metadataPanel.clientHeight;
+
+            // Only prevent default if scrolling would cause the panel to scroll
+            if ((e.deltaY < 0 && !isAtTop) || (e.deltaY > 0 && !isAtBottom)) {
+                e.stopPropagation();
+            }
+        }, { passive: true });
     });
 }
 
@@ -525,6 +505,12 @@ export function initMediaControlHandlers(container) {
                     const result = await response.json();
                     
                     if (result.success) {
+                        // Let the gallery refresh itself (removes thumbnail + selects a neighbor)
+                        mediaWrapper.dispatchEvent(new CustomEvent('example-media-deleted', {
+                            bubbles: true,
+                            detail: { shortId }
+                        }));
+
                         // Success: remove the media wrapper from the DOM
                         mediaWrapper.style.opacity = '0';
                         mediaWrapper.style.height = '0';
@@ -649,7 +635,7 @@ export function initMediaControlHandlers(container) {
     // Initialize NSFW level buttons
     initSetNsfwHandlers(container);
     
-    // Media control visibility is now handled in initMetadataPanelHandlers
+    // Media control visibility is handled with pure CSS (.media-wrapper:hover .media-controls)
     // Any click handlers or other functionality can still be added here
 }
 

static/js/components/shared/showcase/ShowcaseView.js

@@ -1,6 +1,12 @@
 /**
  * ShowcaseView.js
  * Shared showcase component for displaying examples in model modals (Lora/Checkpoint)
+ *
+ * The showcase starts collapsed as a slim indicator bar ("Show N examples"),
+ * so opening the modal never triggers remote image fetches. Expanding reveals
+ * a gallery: a single main viewer with prev/next controls, a horizontal
+ * thumbnail strip for overview/random access, and an always-visible import
+ * entry — no scrolling through a vertical stack of full-width examples.
  */
 import { showToast } from '../../../utils/uiHelpers.js';
 import { state } from '../../../state/index.js';
@@ -16,27 +22,34 @@ import {
 } from './MediaUtils.js';
 import { generateMetadataPanel } from './MetadataPanel.js';
 import { generateImageWrapper, generateVideoWrapper } from './MediaRenderers.js';
-import { getShowcaseUrl } from '../../../utils/civitaiUtils.js';
+import { getShowcaseUrl, getThumbnailUrl } from '../../../utils/civitaiUtils.js';
 import { openMediaViewer } from '../MediaViewer.js';
+import { escapeAttribute } from '../utils.js';
 
-export const showcaseListenerMetrics = {
+/**
-    wheelListeners: 0,
+ * Current gallery state. The model modal is a singleton, so a single module-level
-    mutationObservers: 0,
+ * state object is sufficient; it is replaced on every render.
-    backToTopHandlers: 0,
+ *
+ * The gallery starts collapsed: only the indicator bar renders, so remote
+ * example images are never fetched until the user explicitly expands the
+ * gallery — same lazy behavior as the legacy collapsed carousel.
+ */
+const galleryState = {
+    rawImages: [],
+    images: [],
+    exampleFiles: [],
+    activeIndex: 0,
+    previewUrl: '',
+    expanded: false,
 };
 
-export function resetShowcaseListenerMetrics() {
-    showcaseListenerMetrics.wheelListeners = 0;
-    showcaseListenerMetrics.mutationObservers = 0;
-    showcaseListenerMetrics.backToTopHandlers = 0;
-}
-
 /**
  * Load example images asynchronously
  * @param {Array} images - Array of image objects (both regular and custom)
  * @param {string} modelHash - Model hash for fetching local files
+ * @param {string} previewUrl - Model preview URL shown in the collapsed state
  */
-export async function loadExampleImages(images, modelHash) {
+export async function loadExampleImages(images, modelHash, previewUrl = '') {
     try {
         const showcaseTab = document.getElementById('showcase-tab');
         if (!showcaseTab) return;
@@ -59,18 +72,11 @@ export async function loadExampleImages(images, modelHash) {
         }
 
         // Then render with both remote images and local files
-        showcaseTab.innerHTML = renderShowcaseContent(images, localFiles);
+        showcaseTab.innerHTML = renderShowcaseContent(images, localFiles, previewUrl);
 
-        // Re-initialize the showcase event listeners
+        const gallery = showcaseTab.querySelector('.showcase-gallery');
-        const carousel = showcaseTab.querySelector('.carousel');
+        if (gallery) {
-        if (carousel) {
+            initShowcaseContent(gallery);
-            // Always bind scroll-indicator click events (even when collapsed)
-            bindScrollIndicatorEvents(carousel);
-            
-            // Only initialize full showcase content when expanded
-            if (!carousel.classList.contains('collapsed')) {
-                initShowcaseContent(carousel);
-            }
         }
 
         // Initialize the example import functionality
@@ -90,16 +96,44 @@ export async function loadExampleImages(images, modelHash) {
 }
 
 /**
- * Render showcase content
+ * Render a small local preview thumbnail for the collapsed indicator bar
+ * (local file, no remote fetch)
+ * @param {string} previewUrl - Model preview URL
+ * @returns {string} HTML content, empty when no preview exists
+ */
+function renderPreviewThumb(previewUrl) {
+    if (!previewUrl) return '';
+    const isVideo = previewUrl.endsWith('.mp4') || previewUrl.endsWith('.webm');
+    const media = isVideo
+        ? `<video src="${escapeAttribute(previewUrl)}" muted playsinline preload="metadata"></video>`
+        : `<img src="${escapeAttribute(previewUrl)}" alt="" loading="lazy">`;
+    return `<span class="gallery-preview-thumb">${media}</span>`;
+}
+
+/**
+ * Render showcase content: collapsed indicator bar by default, gallery
+ * (main viewer + thumbnail strip + import entry) when expanded
  * @param {Array} images - Array of images/videos to show
  * @param {Array} exampleFiles - Local example files
- * @param {boolean} startExpanded - Whether to start in expanded state
+ * @param {string} previewUrl - Model preview URL for the collapsed indicator bar
+ * @param {boolean} expanded - Whether to render the full gallery (loads remote media)
  * @returns {string} HTML content
  */
-export function renderShowcaseContent(images, exampleFiles = [], startExpanded = false) {
+export function renderShowcaseContent(images, exampleFiles = [], previewUrl = '', expanded = false) {
+    galleryState.rawImages = images || [];
+    galleryState.exampleFiles = exampleFiles;
+    galleryState.previewUrl = previewUrl;
+    galleryState.expanded = expanded;
+
     if (!images?.length) {
-        // Show empty state with import interface
+        galleryState.images = [];
-        return renderImportInterface(true);
+        galleryState.activeIndex = 0;
+        // Empty state: show the import interface directly
+        return `
+            <div class="showcase-gallery">
+                ${renderImportInterface(true)}
+            </div>
+        `;
     }
 
     // Filter images based on SFW setting
@@ -118,39 +152,148 @@ export function renderShowcaseContent(images, exampleFiles = [], startExpanded =
 
     // Show message if no images are available after filtering
     if (filteredImages.length === 0) {
+        galleryState.images = [];
+        galleryState.activeIndex = 0;
         return `
             <div class="no-examples">
-                <p>All example images are filtered due to NSFW content settings</p>
+                <p>${translate('modals.model.showcase.allFiltered', {}, 'All example images are filtered due to NSFW content settings')}</p>
-                <p class="nsfw-filter-info">Your settings are currently set to show only safe-for-work content</p>
+                <p class="nsfw-filter-info">${translate('modals.model.showcase.sfwOnlyEnabled', {}, 'Your settings are currently set to show only safe-for-work content')}</p>
-                <p>You can change this in Settings <i class="fas fa-cog"></i></p>
+                <p>${translate('modals.model.showcase.changeInSettings', {}, 'You can change this in Settings')} <i class="fas fa-cog"></i></p>
             </div>
         `;
     }
 
+    galleryState.images = filteredImages;
+    if (galleryState.activeIndex >= filteredImages.length || galleryState.activeIndex < 0) {
+        galleryState.activeIndex = 0;
+    }
+
     // Show hidden content notification if applicable
     const hiddenNotification = hiddenCount > 0 ?
-        `<div class="nsfw-filter-notification">
+        `<span class="nsfw-filter-notification">
-            <i class="fas fa-eye-slash"></i> ${hiddenCount} ${hiddenCount === 1 ? 'image' : 'images'} hidden due to SFW-only setting
+            <i class="fas fa-eye-slash"></i> ${translate('modals.model.showcase.hiddenBySfw', { count: hiddenCount }, `${hiddenCount} hidden by SFW-only setting`)}
-        </div>` : '';
+        </span>` : '';
+
+    const exampleImagesPath = state.global.settings.example_images_path;
+    const isPathConfigured = exampleImagesPath && exampleImagesPath.trim() !== '';
+    const count = filteredImages.length;
+
+    const importZone = isPathConfigured ? `<div class="gallery-import-zone hidden" id="galleryImportZone">
+                ${renderImportInterface(false)}
+            </div>` : '';
+
+    // Collapsed resting state: a slim indicator bar only — remote examples are
+    // not rendered (and therefore not fetched) until the user expands.
+    if (!expanded) {
+        const showText = translate('modals.model.showcase.showExamples', {}, 'Show examples');
+        return `
+        <div class="showcase-gallery">
+            <div class="gallery-indicator-bar">
+                ${renderPreviewThumb(previewUrl)}
+                <button class="gallery-show-btn" id="galleryShowBtn">
+                    <i class="fas fa-chevron-down"></i> ${translate('modals.model.showcase.showCount', { count }, `${showText} (${count})`)}
+                </button>
+                ${hiddenNotification}
+                <button class="gallery-import-btn" id="galleryImportBtn" title="${translate('modals.model.showcase.addExamples', {}, 'Add examples')}">
+                    <i class="fas fa-plus"></i> ${translate('modals.model.showcase.addExamples', {}, 'Add examples')}
+                </button>
+            </div>
+            ${importZone}
+        </div>
+        `;
+    }
+
+    const showNav = count > 1;
+    const positionText = `${galleryState.activeIndex + 1} / ${count}`;
+    const activeImg = filteredImages[galleryState.activeIndex];
+    const mediaAspect = mediaAspectRatio(activeImg);
 
     return `
-        <div class="scroll-indicator">
+        <div class="showcase-gallery">
-            <i class="fas fa-chevron-${startExpanded ? 'up' : 'down'}"></i>
+            <div class="gallery-toolbar">
-            <span>Scroll or click to ${startExpanded ? 'hide' : 'show'} ${filteredImages.length} examples</span>
+                ${hiddenNotification}
-        </div>
+                <button class="gallery-show-btn" id="galleryShowBtn">
-        <div class="carousel ${startExpanded ? '' : 'collapsed'}">
+                    <i class="fas fa-chevron-up"></i> ${translate('modals.model.showcase.hideExamples', {}, 'Hide examples')}
-            ${hiddenNotification}
+                </button>
-            <div class="carousel-container">
+                <button class="gallery-import-btn" id="galleryImportBtn" title="${translate('modals.model.showcase.addExamples', {}, 'Add examples')}">
-                ${filteredImages.map((img, index) => renderMediaItem(img, index, exampleFiles)).join('')}
+                    <i class="fas fa-plus"></i> ${translate('modals.model.showcase.addExamples', {}, 'Add examples')}
+                </button>
             </div>
-            
+            <div class="gallery-main">
-            ${renderImportInterface(false)}
+                <div class="main-media-container" id="mainMediaContainer" style="--media-aspect: ${mediaAspect}">
+                    ${renderMediaItem(activeImg, galleryState.activeIndex, exampleFiles)}
+                    ${renderPositionBadge(positionText)}
+                </div>
+                ${showNav ? `<button class="gallery-nav prev" id="galleryPrevBtn" title="${translate('modals.model.showcase.previousExample', {}, 'Previous example')}">
+                    <i class="fas fa-chevron-left"></i>
+                </button>
+                <button class="gallery-nav next" id="galleryNextBtn" title="${translate('modals.model.showcase.nextExample', {}, 'Next example')}">
+                    <i class="fas fa-chevron-right"></i>
+                </button>` : ''}
+            </div>
+            <div class="gallery-strip" id="galleryStrip">
+                ${filteredImages.map((img, index) => renderThumbnail(img, index, exampleFiles)).join('')}
+            </div>
+            ${importZone}
         </div>
     `;
 }
 
 /**
- * Render a single media item (image or video)
+ * Render the position badge that floats over the main media
+ * @param {string} positionText - e.g. "3 / 10"
+ * @returns {string} HTML for the badge
+ */
+function renderPositionBadge(positionText) {
+    return `<span class="gallery-position-badge" id="galleryPosition">${positionText}</span>`;
+}
+
+/**
+ * Compute the aspect ratio (w/h) for the main viewer, falling back to 4:3
+ * when dimensions are missing (prevents NaN layout)
+ * @param {Object} img - Image/video metadata
+ * @returns {number} width / height
+ */
+function mediaAspectRatio(img) {
+    const w = img?.width || 4;
+    const h = img?.height || 3;
+    return w / h;
+}
+
+/**
+ * Render a thumbnail for the gallery strip
+ * @param {Object} img - Image/video metadata
+ * @param {number} index - Index in the array
+ * @param {Array} exampleFiles - Local files
+ * @returns {string} HTML for the thumbnail button
+ */
+function renderThumbnail(img, index, exampleFiles) {
+    const localFile = findLocalFile(img, index, exampleFiles);
+
+    const originalRemoteUrl = img.url || '';
+    const isVideo = localFile ? localFile.is_video :
+        originalRemoteUrl.endsWith('.mp4') || originalRemoteUrl.endsWith('.webm');
+    const mediaType = isVideo ? 'video' : 'image';
+
+    const thumbUrl = localFile ? localFile.path : getThumbnailUrl(originalRemoteUrl, mediaType);
+
+    const nsfwLevel = img.nsfwLevel !== undefined ? img.nsfwLevel : 0;
+    const matureBlurThreshold = getMatureBlurThreshold(state.settings);
+    const shouldBlur = state.settings.blur_mature_content && nsfwLevel >= matureBlurThreshold;
+
+    const activeClass = index === galleryState.activeIndex ? ' active' : '';
+    const blurClass = shouldBlur ? ' blurred' : '';
+    const mediaHtml = isVideo ?
+        `<video class="thumb-media${blurClass}" src="${escapeAttribute(thumbUrl)}" muted playsinline preload="metadata"></video>
+         <i class="fas fa-play thumb-video-badge"></i>` :
+        `<img class="thumb-media${blurClass}" src="${escapeAttribute(thumbUrl)}" loading="lazy" alt="">`;
+    const nsfwBadge = shouldBlur ? '<i class="fas fa-eye-slash thumb-nsfw-badge"></i>' : '';
+
+    return `<button class="gallery-thumb${activeClass}" data-index="${index}">${mediaHtml}${nsfwBadge}</button>`;
+}
+
+/**
+ * Render the active media item in the main viewer
  * @param {Object} img - Image/video metadata
  * @param {number} index - Index in the array
  * @param {Array} exampleFiles - Local files
@@ -173,19 +316,6 @@ function renderMediaItem(img, index, exampleFiles) {
 
     const localUrl = localFile ? localFile.path : '';
 
-    // Calculate appropriate aspect ratio
-    // Defensive fallback: 0 width/height → 4:3 default (prevents NaN layout)
-    const safeW = img.width || 4;
-    const safeH = img.height || 3;
-    const aspectRatio = (safeH / safeW) * 100;
-    const containerWidth = 800; // modal content maximum width
-    const minHeightPercent = 40; 
-    const maxHeightPercent = (window.innerHeight * 0.6 / containerWidth) * 100;
-    const heightPercent = Math.max(
-        minHeightPercent,
-        Math.min(maxHeightPercent, aspectRatio)
-    );
-    
     // Extract CivitAI image ID from CDN URL for import status check
     const cdnImageId = (img.url || '').match(/\/(\d+)\.(?:jpeg|jpg|png|webp|gif)(?:\?|#|$)/)?.[1] || '';
 
@@ -195,13 +325,13 @@ function renderMediaItem(img, index, exampleFiles) {
     const shouldBlur = state.settings.blur_mature_content && nsfwLevel >= matureBlurThreshold;
 
     // Determine NSFW warning text based on level
-    let nsfwText = "Mature Content";
+    let nsfwText = translate('modals.model.showcase.nsfwMature', {}, 'Mature Content');
     if (nsfwLevel >= NSFW_LEVELS.XXX) {
-        nsfwText = "XXX-rated Content";
+        nsfwText = translate('modals.model.showcase.nsfwXxx', {}, 'XXX-rated Content');
     } else if (nsfwLevel >= NSFW_LEVELS.X) {
-        nsfwText = "X-rated Content";
+        nsfwText = translate('modals.model.showcase.nsfwX', {}, 'X-rated Content');
     } else if (nsfwLevel >= NSFW_LEVELS.R) {
-        nsfwText = "R-rated Content";
+        nsfwText = translate('modals.model.showcase.nsfwR', {}, 'R-rated Content');
     }
 
     // Extract metadata from the image
@@ -270,13 +400,13 @@ function renderMediaItem(img, index, exampleFiles) {
     // Generate the appropriate wrapper based on media type
     if (isVideo) {
         return generateVideoWrapper(
-            img, heightPercent, shouldBlur, nsfwText, metadataPanel, 
+            img, shouldBlur, nsfwText, metadataPanel,
             localUrl, remoteUrl, mediaControlsHtml
         );
     }
 
     return generateImageWrapper(
-        img, heightPercent, shouldBlur, nsfwText, metadataPanel, 
+        img, shouldBlur, nsfwText, metadataPanel,
         localUrl, remoteUrl, mediaControlsHtml
     );
 }
@@ -308,6 +438,264 @@ function findLocalFile(img, index, exampleFiles) {
     return localFile;
 }
 
+/**
+ * Switch the main viewer to another example (wraps around)
+ * @param {number} index - Target index in galleryState.images
+ */
+export function updateMainDisplay(index) {
+    const count = galleryState.images.length;
+    if (!count || !galleryState.expanded) return;
+
+    galleryState.activeIndex = ((index % count) + count) % count;
+
+    const container = document.getElementById('mainMediaContainer');
+    if (!container) return;
+
+    const activeImg = galleryState.images[galleryState.activeIndex];
+    container.style.setProperty('--media-aspect', mediaAspectRatio(activeImg));
+    // The badge lives inside the container, so rebuild it together with the media
+    container.innerHTML = renderMediaItem(
+        activeImg,
+        galleryState.activeIndex,
+        galleryState.exampleFiles
+    ) + renderPositionBadge(`${galleryState.activeIndex + 1} / ${count}`);
+
+    // Update thumbnail active state and scroll it into view
+    document.querySelectorAll('.gallery-strip .gallery-thumb').forEach(thumb => {
+        const isActive = Number(thumb.dataset.index) === galleryState.activeIndex;
+        thumb.classList.toggle('active', isActive);
+        if (isActive) {
+            thumb.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+        }
+    });
+
+    initMainMediaInteractions(container);
+}
+
+/**
+ * Build the item list for the full-size media viewer from current gallery state
+ * @returns {Array<{url: string, type: string}>}
+ */
+function buildViewerItems() {
+    return galleryState.images.map((img, index) => {
+        const localFile = findLocalFile(img, index, galleryState.exampleFiles);
+        const originalRemoteUrl = img.url || '';
+        const isVideo = localFile ? localFile.is_video :
+            originalRemoteUrl.endsWith('.mp4') || originalRemoteUrl.endsWith('.webm');
+        return {
+            url: localFile?.path || getShowcaseUrl(originalRemoteUrl, isVideo ? 'video' : 'image'),
+            type: isVideo ? 'video' : 'image'
+        };
+    });
+}
+
+/**
+ * Wire up interactions for the media currently shown in the main viewer
+ * @param {HTMLElement} container - The main media container
+ */
+function initMainMediaInteractions(container) {
+    initLazyLoading(container);
+    initNsfwBlurHandlers(container);
+    initMetadataPanelHandlers(container);
+    initMediaControlHandlers(container);
+    positionAllMediaControls(container);
+
+    // Hoist the metadata panel to the gallery-main level so it spans the full
+    // column width (legacy behavior) instead of being squeezed to the media's
+    // width. Handler references stay valid — they are bound to the element.
+    const panel = container.querySelector('.image-metadata-panel');
+    const galleryMain = container.closest('.gallery-main');
+    if (panel && galleryMain) {
+        // Drop the panel of the previously displayed item, if any
+        galleryMain.querySelectorAll(':scope > .image-metadata-panel').forEach(p => p.remove());
+        galleryMain.appendChild(panel);
+    }
+
+    // Click-to-view: open full-size media viewer at the active index
+    const mediaEl = container.querySelector('.media-wrapper img, .media-wrapper video');
+    if (mediaEl) {
+        mediaEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+            openMediaViewer(buildViewerItems(), galleryState.activeIndex);
+        });
+    }
+
+    // Reposition controls once media dimensions are known
+    container.querySelectorAll('img, video').forEach(media => {
+        media.addEventListener('load', () => positionAllMediaControls(container));
+        if (media.tagName === 'VIDEO') {
+            media.addEventListener('loadedmetadata', () => positionAllMediaControls(container));
+        }
+    });
+}
+
+/**
+ * Scroll to top of modal content
+ * @param {HTMLElement} button - Back to top button
+ */
+export function scrollToTop(button) {
+    const modalContent = button.closest('.modal-content');
+    if (modalContent) {
+        modalContent.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    }
+}
+
+/**
+ * Toggle the inline import zone; without a configured path, open settings instead
+ * @param {HTMLElement} gallery - The gallery root element
+ */
+function toggleImportZone(gallery) {
+    const exampleImagesPath = state.global.settings.example_images_path;
+    const isPathConfigured = exampleImagesPath && exampleImagesPath.trim() !== '';
+    if (!isPathConfigured) {
+        openSettingsForExampleImages();
+        return;
+    }
+    gallery.querySelector('.gallery-import-zone')?.classList.toggle('hidden');
+}
+
+/**
+ * Remove a deleted custom example from the gallery and re-render
+ * @param {string} shortId - Custom image short id
+ */
+function handleExampleDeleted(shortId) {
+    const isDeleted = (img) => img.id === shortId;
+    galleryState.rawImages = galleryState.rawImages.filter(img => !isDeleted(img));
+    galleryState.images = galleryState.images.filter(img => !isDeleted(img));
+    galleryState.exampleFiles = galleryState.exampleFiles.filter(
+        file => !file.name.startsWith(`custom_${shortId}`)
+    );
+    if (galleryState.activeIndex >= galleryState.images.length) {
+        galleryState.activeIndex = Math.max(0, galleryState.images.length - 1);
+    }
+
+    rerenderGallery(galleryState.expanded);
+}
+
+/**
+ * Re-render the gallery in place from current state and rebind everything
+ * @param {boolean} expanded - Whether the re-rendered gallery starts expanded
+ */
+function rerenderGallery(expanded) {
+    const showcaseTab = document.getElementById('showcase-tab');
+    if (!showcaseTab) return;
+
+    showcaseTab.innerHTML = renderShowcaseContent(
+        galleryState.rawImages,
+        galleryState.exampleFiles,
+        galleryState.previewUrl,
+        expanded
+    );
+
+    const gallery = showcaseTab.querySelector('.showcase-gallery');
+    if (gallery) {
+        initShowcaseContent(gallery);
+    }
+
+    const modelHash = document.querySelector('.showcase-section')?.dataset.modelHash;
+    if (modelHash) {
+        initExampleImport(modelHash, showcaseTab);
+    }
+}
+
+// Track the gallery whose controls need repositioning on window resize
+let resizeBoundGallery = null;
+
+// Scroll-to-expand: expands the collapsed gallery when the user keeps
+// scrolling down near the bottom of the modal (legacy muscle memory)
+let scrollExpandTarget = null;
+
+function setupScrollToExpand(gallery) {
+    const modalContent = gallery.closest('.modal-content');
+    if (!modalContent) return;
+    if (scrollExpandTarget === modalContent) return; // already bound
+    scrollExpandTarget = modalContent;
+
+    modalContent.addEventListener('wheel', (event) => {
+        if (galleryState.expanded || !galleryState.images.length) return;
+        if (event.deltaY <= 0) return;
+        const nearBottom = modalContent.scrollHeight - modalContent.scrollTop - modalContent.clientHeight < 100;
+        if (nearBottom) {
+            rerenderGallery(true);
+        }
+    }, { passive: true });
+}
+
+/**
+ * Initialize all gallery interactions
+ * @param {HTMLElement} gallery - The .showcase-gallery element
+ */
+export function initShowcaseContent(gallery) {
+    if (!gallery) return;
+
+    // While expanded the thumbnail strip occupies the modal's bottom-right
+    // corner; hide the back-to-top button there (Hide examples is the
+    // equivalent "return to top" affordance)
+    gallery.closest('.modal-content')?.classList.toggle('showcase-expanded', galleryState.expanded);
+
+    // Toolbar: show/hide toggle (expanding renders the gallery and starts remote loads)
+    gallery.querySelector('#galleryShowBtn')?.addEventListener('click', () => {
+        rerenderGallery(!galleryState.expanded);
+    });
+
+    // Same expansion via mouse wheel near the bottom of the modal
+    setupScrollToExpand(gallery);
+
+    // Toolbar: import toggle; scroll the freshly opened zone into view
+    gallery.querySelector('#galleryImportBtn')?.addEventListener('click', () => {
+        toggleImportZone(gallery);
+        const zone = gallery.querySelector('.gallery-import-zone:not(.hidden)');
+        zone?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    });
+
+    // Prev/next navigation (wraps around)
+    gallery.querySelector('#galleryPrevBtn')?.addEventListener('click', () => {
+        updateMainDisplay(galleryState.activeIndex - 1);
+    });
+    gallery.querySelector('#galleryNextBtn')?.addEventListener('click', () => {
+        updateMainDisplay(galleryState.activeIndex + 1);
+    });
+
+    // Thumbnail strip: click to select, wheel scrolls horizontally
+    gallery.querySelectorAll('.gallery-thumb').forEach(thumb => {
+        thumb.addEventListener('click', () => {
+            updateMainDisplay(Number(thumb.dataset.index));
+        });
+    });
+    const strip = gallery.querySelector('.gallery-strip');
+    if (strip) {
+        strip.addEventListener('wheel', (e) => {
+            if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return; // let native horizontal scrolling through
+            e.preventDefault();
+            strip.scrollLeft += e.deltaY;
+        }, { passive: false });
+    }
+
+    // Custom example deleted elsewhere (media controls) → refresh gallery
+    gallery.addEventListener('example-media-deleted', (e) => {
+        handleExampleDeleted(e.detail?.shortId);
+    });
+
+    // Main viewer interactions (only exists in the expanded state)
+    const container = gallery.querySelector('.main-media-container');
+    if (container && galleryState.expanded) {
+        initMainMediaInteractions(container);
+    }
+
+    // Reposition controls on window resize
+    resizeBoundGallery = gallery;
+}
+
+// Bind the resize handler once; it always repositions the latest gallery
+window.addEventListener('resize', () => {
+    if (resizeBoundGallery && resizeBoundGallery.isConnected) {
+        positionAllMediaControls(resizeBoundGallery);
+    }
+});
+
 /**
  * Render the import interface for example images
  * @param {boolean} isEmpty - Whether there are no existing examples
@@ -353,20 +741,22 @@ function renderImportInterface(isEmpty) {
             <div class="import-container" id="exampleImportContainer">
                 <div class="import-placeholder">
                     <i class="fas fa-cloud-upload-alt"></i>
-                    <h3>${isEmpty ? 'No example images available' : 'Add more examples'}</h3>
+                    <h3>${isEmpty
-                    <p>Drag & drop images or videos here</p>
+                        ? translate('modals.model.showcase.noExamples', {}, 'No example images available')
-                    <p class="sub-text">or</p>
+                        : translate('modals.model.showcase.addMoreExamples', {}, 'Add more examples')}</h3>
+                    <p>${translate('modals.model.showcase.dragDrop', {}, 'Drag & drop images or videos here')}</p>
+                    <p class="sub-text">${translate('modals.model.showcase.or', {}, 'or')}</p>
                     <button class="select-files-btn" id="selectExampleFilesBtn">
-                        <i class="fas fa-folder-open"></i> Select Files
+                        <i class="fas fa-folder-open"></i> ${translate('modals.model.showcase.selectFiles', {}, 'Select Files')}
                     </button>
-                    <p class="import-formats">Supported formats: jpg, png, gif, webp, avif, jxl, mp4, webm</p>
+                    <p class="import-formats">${translate('modals.model.showcase.supportedFormats', {}, 'Supported formats: jpg, png, gif, webp, avif, jxl, mp4, webm')}</p>
                 </div>
                 <input type="file" id="exampleFilesInput" multiple accept="image/*,image/avif,image/jxl,video/mp4,video/webm" style="display: none;">
                 <div class="import-progress-container" style="display: none;">
                     <div class="import-progress">
                         <div class="progress-bar"></div>
                     </div>
-                    <span class="progress-text">Importing files...</span>
+                    <span class="progress-text">${translate('modals.model.showcase.importing', {}, 'Importing files...')}</span>
                 </div>
             </div>
         </div>
@@ -487,7 +877,7 @@ async function handleImportFiles(files, modelHash, importContainer) {
     });
 
     if (validFiles.length === 0) {
-        alert('No supported files selected. Please select image or video files.');
+        showToast('modals.model.showcase.noSupportedFiles', {}, 'warning');
         return;
     }
 
@@ -535,7 +925,7 @@ async function handleImportFiles(files, modelHash, importContainer) {
             throw new Error(updatedFilesResult.error || 'Failed to get updated file list');
         }
 
-        // Re-render the showcase content
+        // Re-render the showcase content, expanded so the user sees the result
         const showcaseTab = document.getElementById('showcase-tab');
         if (showcaseTab) {
             // Get the updated images from the result
@@ -543,12 +933,16 @@ async function handleImportFiles(files, modelHash, importContainer) {
             const customImages = result.custom_images || [];
             // Combine both arrays for rendering
             const allImages = [...regularImages, ...customImages];
-            showcaseTab.innerHTML = renderShowcaseContent(allImages, updatedFilesResult.files, true);
+            showcaseTab.innerHTML = renderShowcaseContent(allImages, updatedFilesResult.files, galleryState.previewUrl, true);
 
-            // Re-initialize showcase functionality
+            // Re-initialize gallery functionality
-            const carousel = showcaseTab.querySelector('.carousel');
+            const gallery = showcaseTab.querySelector('.showcase-gallery');
-            if (carousel && !carousel.classList.contains('collapsed')) {
+            if (gallery) {
-                initShowcaseContent(carousel);
+                initShowcaseContent(gallery);
+                // Select the most recently imported example
+                updateMainDisplay(galleryState.images.length - 1);
+                // Keep the import zone expanded so multi-file imports can continue
+                gallery.querySelector('.gallery-import-zone')?.classList.remove('hidden');
             }
 
             // Initialize the import UI for the new content
@@ -579,239 +973,3 @@ async function handleImportFiles(files, modelHash, importContainer) {
         showToast('toast.import.importFailed', { message: error.message }, 'error');
     }
 }
-
-/**
- * Toggle showcase expansion
- * @param {HTMLElement} element - The scroll indicator element
- */
-export function toggleShowcase(element) {
-    const carousel = element.nextElementSibling;
-    const isCollapsed = carousel.classList.contains('collapsed');
-    const indicator = element.querySelector('span');
-    const icon = element.querySelector('i');
-    
-    carousel.classList.toggle('collapsed');
-    
-    if (isCollapsed) {
-        const count = carousel.querySelectorAll('.media-wrapper').length;
-        indicator.textContent = `Scroll or click to hide examples`;
-        icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
-        initShowcaseContent(carousel);
-    } else {
-        const count = carousel.querySelectorAll('.media-wrapper').length;
-        indicator.textContent = `Scroll or click to show ${count} examples`;
-        icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
-        
-        // Make sure any open metadata panels get closed
-        const carouselContainer = carousel.querySelector('.carousel-container');
-        if (carouselContainer) {
-            carouselContainer.style.height = '0';
-            setTimeout(() => {
-                carouselContainer.style.height = '';
-            }, 300);
-        }
-    }
-}
-
-/**
- * Bind scroll-indicator click events (works even when carousel is collapsed)
- * @param {HTMLElement} carousel - The carousel element
- */
-function bindScrollIndicatorEvents(carousel) {
-    if (!carousel) return;
-
-    const scrollIndicator = carousel.previousElementSibling;
-    if (scrollIndicator && scrollIndicator.classList.contains('scroll-indicator')) {
-        // Remove previous listeners to avoid duplicates
-        scrollIndicator.onclick = null;
-        scrollIndicator.removeEventListener('click', scrollIndicator._leftClickHandler);
-        scrollIndicator.removeEventListener('mousedown', scrollIndicator._middleClickHandler);
-
-        // Handler for left-click (button 0) - uses 'click' event
-        scrollIndicator._leftClickHandler = (event) => {
-            if (event.button === 0) {
-                event.preventDefault();
-                toggleShowcase(scrollIndicator);
-            }
-        };
-
-        // Handler for middle-click (button 1) - uses 'mousedown' event
-        scrollIndicator._middleClickHandler = (event) => {
-            if (event.button === 1) {
-                event.preventDefault();
-                toggleShowcase(scrollIndicator);
-            }
-        };
-
-        scrollIndicator.addEventListener('click', scrollIndicator._leftClickHandler);
-        scrollIndicator.addEventListener('mousedown', scrollIndicator._middleClickHandler);
-    }
-}
-
-/**
- * Initialize all showcase content interactions
- * @param {HTMLElement} carousel - The carousel element
- */
-export function initShowcaseContent(carousel) {
-    if (!carousel) return;
-    
-    initLazyLoading(carousel);
-    initNsfwBlurHandlers(carousel);
-    initMetadataPanelHandlers(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);
-    
-    // Add window resize handler
-    const resizeHandler = () => positionAllMediaControls(carousel);
-    window.removeEventListener('resize', resizeHandler);
-    window.addEventListener('resize', resizeHandler);
-    
-    // Handle images loading which might change dimensions
-    const mediaElements = carousel.querySelectorAll('img, video');
-    mediaElements.forEach(media => {
-        media.addEventListener('load', () => positionAllMediaControls(carousel));
-        if (media.tagName === 'VIDEO') {
-            media.addEventListener('loadedmetadata', () => positionAllMediaControls(carousel));
-        }
-    });
-}
-
-/**
- * Scroll to top of modal content
- * @param {HTMLElement} button - Back to top button
- */
-export function scrollToTop(button) {
-    const modalContent = button.closest('.modal-content');
-    if (modalContent) {
-        modalContent.scrollTo({
-            top: 0,
-            behavior: 'smooth'
-        });
-    }
-}
-
-/**
- * Set up showcase scroll functionality
- * @param {string} modalId - ID of the modal element
- */
-export function setupShowcaseScroll(modalId) {
-    const wheelOptions = { passive: false };
-    const wheelHandler = (event) => {
-        const modalContent = document.querySelector(`#${modalId} .modal-content`);
-        if (!modalContent) return;
-        
-        const showcase = modalContent.querySelector('.showcase-section');
-        if (!showcase) return;
-        
-        const carousel = showcase.querySelector('.carousel');
-        const scrollIndicator = showcase.querySelector('.scroll-indicator');
-        
-        if (carousel?.classList.contains('collapsed') && event.deltaY > 0) {
-            const isNearBottom = modalContent.scrollHeight - modalContent.scrollTop - modalContent.clientHeight < 100;
-            
-            if (isNearBottom) {
-                toggleShowcase(scrollIndicator);
-                event.preventDefault();
-            }
-        }
-    };
-    document.addEventListener('wheel', wheelHandler, wheelOptions);
-    showcaseListenerMetrics.wheelListeners += 1;
-    
-    // Use MutationObserver to set up back-to-top button when modal content is added
-    const observer = new MutationObserver((mutations) => {
-        for (const mutation of mutations) {
-            if (mutation.type === 'childList' && mutation.addedNodes.length) {
-                const modal = document.getElementById(modalId);
-                if (modal && modal.querySelector('.modal-content')) {
-                    setupBackToTopButton(modal.querySelector('.modal-content'));
-                }
-            }
-        }
-    });
-    
-    observer.observe(document.body, { childList: true, subtree: true });
-    showcaseListenerMetrics.mutationObservers += 1;
-    
-    // Try to set up the button immediately in case the modal is already open
-    const modalContent = document.querySelector(`#${modalId} .modal-content`);
-    if (modalContent) {
-        setupBackToTopButton(modalContent);
-    }
-
-    let cleanedUp = false;
-
-    return () => {
-        if (cleanedUp) {
-            return;
-        }
-        cleanedUp = true;
-        document.removeEventListener('wheel', wheelHandler, wheelOptions);
-        showcaseListenerMetrics.wheelListeners -= 1;
-        observer.disconnect();
-        showcaseListenerMetrics.mutationObservers -= 1;
-        const modalContent = document.querySelector(`#${modalId} .modal-content`);
-        teardownBackToTopButton(modalContent);
-    };
-}
-
-/**
- * Set up back-to-top button
- * @param {HTMLElement} modalContent - Modal content element
- */
-function setupBackToTopButton(modalContent) {
-    teardownBackToTopButton(modalContent);
-
-    const handler = () => {
-        const backToTopBtn = modalContent.querySelector('.back-to-top');
-        if (backToTopBtn) {
-            if (modalContent.scrollTop > 300) {
-                backToTopBtn.classList.add('visible');
-            } else {
-                backToTopBtn.classList.remove('visible');
-            }
-        }
-    };
-
-    modalContent._backToTopScrollHandler = handler;
-    modalContent.addEventListener('scroll', handler);
-    showcaseListenerMetrics.backToTopHandlers += 1;
-    handler();
-}
-
-function teardownBackToTopButton(modalContent) {
-    if (!modalContent) {
-        return;
-    }
-
-    const existingHandler = modalContent._backToTopScrollHandler;
-    if (existingHandler) {
-        modalContent.removeEventListener('scroll', existingHandler);
-        delete modalContent._backToTopScrollHandler;
-        showcaseListenerMetrics.backToTopHandlers -= 1;
-    }
-}

tests/frontend/components/modelMetadata.renamePath.test.js

@@ -45,8 +45,6 @@ vi.mock(MODAL_MANAGER_MODULE, () => ({
 }));
 
 vi.mock(SHOWCASE_MODULE, () => ({
-  toggleShowcase: vi.fn(),
-  setupShowcaseScroll: vi.fn(),
   scrollToTop: vi.fn(),
   loadExampleImages: vi.fn(),
 }));

tests/frontend/components/modelModal.licenseIcons.test.js

@@ -43,8 +43,6 @@ vi.mock(MODAL_MANAGER_MODULE, () => ({
 }));
 
 vi.mock(SHOWCASE_MODULE, () => ({
-  toggleShowcase: vi.fn(),
-  setupShowcaseScroll: vi.fn(),
   scrollToTop: vi.fn(),
   loadExampleImages: vi.fn(),
 }));

tests/frontend/components/showcase.gallery.test.js

@@ -0,0 +1,200 @@
+import { describe, it, beforeEach, afterEach, expect } from 'vitest';
+
+const { SHOWCASE_MODULE, MEDIA_UTILS_MODULE, MEDIA_VIEWER_MODULE } = vi.hoisted(() => ({
+  SHOWCASE_MODULE: new URL('../../../static/js/components/shared/showcase/ShowcaseView.js', import.meta.url).pathname,
+  MEDIA_UTILS_MODULE: new URL('../../../static/js/components/shared/showcase/MediaUtils.js', import.meta.url).pathname,
+  MEDIA_VIEWER_MODULE: new URL('../../../static/js/components/shared/MediaViewer.js', import.meta.url).pathname,
+}));
+
+vi.mock(MEDIA_UTILS_MODULE, () => ({
+  initLazyLoading: vi.fn(),
+  initNsfwBlurHandlers: vi.fn(),
+  initMetadataPanelHandlers: vi.fn(),
+  initMediaControlHandlers: vi.fn(),
+  positionAllMediaControls: vi.fn(),
+}));
+
+vi.mock(MEDIA_VIEWER_MODULE, () => ({
+  openMediaViewer: vi.fn(),
+}));
+
+const PREVIEW_URL = '/loras_static/preview/abc.png';
+
+const IMAGES = [
+  { url: 'https://image.civitai.com/abc/111.jpeg', width: 512, height: 768, nsfwLevel: 0 },
+  { url: 'https://image.civitai.com/abc/222.jpeg', width: 768, height: 512, nsfwLevel: 0 },
+  { url: 'https://image.civitai.com/abc/333.mp4', width: 512, height: 512, nsfwLevel: 0 },
+];
+
+describe('Showcase gallery', () => {
+  let state;
+
+  beforeEach(async () => {
+    Element.prototype.scrollIntoView = vi.fn();
+    const stateModule = await import('../../../static/js/state/index.js');
+    state = stateModule.state;
+    state.settings.show_only_sfw = false;
+    state.settings.blur_mature_content = false;
+    state.global.settings.example_images_path = '/tmp/examples';
+    document.body.innerHTML = '';
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('starts collapsed: slim indicator bar only, no remote examples rendered', async () => {
+    const { renderShowcaseContent } = await import(SHOWCASE_MODULE);
+
+    const html = renderShowcaseContent(IMAGES, [], PREVIEW_URL);
+    const host = document.createElement('div');
+    host.innerHTML = html;
+
+    expect(host.querySelector('.showcase-gallery')).toBeTruthy();
+    expect(host.querySelector('.gallery-indicator-bar')).toBeTruthy();
+    // Collapsed bar carries the count and the local preview thumbnail
+    expect(host.querySelector('#galleryShowBtn')?.textContent).toContain('3');
+    expect(host.querySelector('.gallery-preview-thumb img')?.getAttribute('src')).toBe(PREVIEW_URL);
+    expect(host.querySelector('#galleryImportBtn')).toBeTruthy();
+    // No thumbnails / media wrappers → no remote fetches until expanded
+    expect(host.querySelectorAll('.gallery-thumb')).toHaveLength(0);
+    expect(host.querySelector('.media-wrapper')).toBeNull();
+    // Import zone exists but stays collapsed
+    const zone = host.querySelector('.gallery-import-zone');
+    expect(zone?.classList.contains('hidden')).toBe(true);
+  });
+
+  it('expanded render shows toolbar, main viewer, thumbnails and nav controls', async () => {
+    const { renderShowcaseContent } = await import(SHOWCASE_MODULE);
+
+    const html = renderShowcaseContent(IMAGES, [], PREVIEW_URL, true);
+    const host = document.createElement('div');
+    host.innerHTML = html;
+
+    expect(host.querySelector('.gallery-indicator-bar')).toBeNull();
+    expect(host.querySelector('#galleryPosition')?.textContent).toBe('1 / 3');
+    expect(host.querySelector('.main-media-container .media-wrapper')).toBeTruthy();
+    expect(host.querySelectorAll('.gallery-thumb')).toHaveLength(3);
+    expect(host.querySelector('.gallery-thumb.active')?.dataset.index).toBe('0');
+    expect(host.querySelector('#galleryPrevBtn')).toBeTruthy();
+    expect(host.querySelector('#galleryNextBtn')).toBeTruthy();
+  });
+
+  it('show/hide button toggles between indicator bar and gallery', async () => {
+    const { renderShowcaseContent, initShowcaseContent } = await import(SHOWCASE_MODULE);
+
+    document.body.innerHTML = `<div id="showcase-tab">${renderShowcaseContent(IMAGES, [], PREVIEW_URL)}</div>`;
+    initShowcaseContent(document.querySelector('.showcase-gallery'));
+
+    // Expand
+    document.querySelector('#galleryShowBtn').click();
+    expect(document.querySelectorAll('.gallery-thumb')).toHaveLength(3);
+    expect(document.querySelector('.gallery-indicator-bar')).toBeNull();
+
+    // Collapse back to the indicator bar
+    document.querySelector('#galleryShowBtn').click();
+    expect(document.querySelectorAll('.gallery-thumb')).toHaveLength(0);
+    expect(document.querySelector('.gallery-indicator-bar')).toBeTruthy();
+    expect(document.querySelector('.gallery-preview-thumb img')?.getAttribute('src')).toBe(PREVIEW_URL);
+  });
+
+  it('omits the import zone when the example images path is not configured', async () => {
+    const { renderShowcaseContent } = await import(SHOWCASE_MODULE);
+    state.global.settings.example_images_path = '';
+
+    const html = renderShowcaseContent(IMAGES, [], PREVIEW_URL, true);
+    const host = document.createElement('div');
+    host.innerHTML = html;
+
+    expect(host.querySelector('#galleryImportBtn')).toBeTruthy();
+    expect(host.querySelector('.gallery-import-zone')).toBeNull();
+  });
+
+  it('filters NSFW examples and reports the hidden count', async () => {
+    const { renderShowcaseContent } = await import(SHOWCASE_MODULE);
+    state.settings.show_only_sfw = true;
+
+    const images = [
+      IMAGES[0],
+      { url: 'https://image.civitai.com/abc/444.jpeg', width: 10, height: 10, nsfwLevel: 32 },
+    ];
+    const html = renderShowcaseContent(images, [], '', true);
+    const host = document.createElement('div');
+    host.innerHTML = html;
+
+    expect(host.querySelectorAll('.gallery-thumb')).toHaveLength(1);
+    expect(host.querySelector('.nsfw-filter-notification')).toBeTruthy();
+    // Only one example left → no prev/next controls
+    expect(host.querySelector('#galleryPrevBtn')).toBeNull();
+  });
+
+  it('renders the import interface when there are no examples', async () => {
+    const { renderShowcaseContent } = await import(SHOWCASE_MODULE);
+
+    const html = renderShowcaseContent([], [], PREVIEW_URL);
+    const host = document.createElement('div');
+    host.innerHTML = html;
+
+    expect(host.querySelector('.example-import-area.empty')).toBeTruthy();
+    expect(host.querySelector('#selectExampleFilesBtn')).toBeTruthy();
+  });
+
+  it('renders the setup guidance when the path is missing and there are no examples', async () => {
+    const { renderShowcaseContent } = await import(SHOWCASE_MODULE);
+    state.global.settings.example_images_path = '';
+
+    const html = renderShowcaseContent([], []);
+    const host = document.createElement('div');
+    host.innerHTML = html;
+
+    expect(host.querySelector('.import-container--needs-setup')).toBeTruthy();
+    expect(host.querySelector('#openExampleSettingsBtn')).toBeTruthy();
+  });
+
+  it('switches the main display, position and active thumbnail when expanded', async () => {
+    const { renderShowcaseContent, updateMainDisplay } = await import(SHOWCASE_MODULE);
+
+    document.body.innerHTML = `<div id="showcase-tab">${renderShowcaseContent(IMAGES, [], PREVIEW_URL, true)}</div>`;
+
+    updateMainDisplay(2);
+
+    const activeThumb = document.querySelector('.gallery-thumb.active');
+    expect(activeThumb?.dataset.index).toBe('2');
+    expect(document.querySelector('#galleryPosition')?.textContent).toBe('3 / 3');
+    const mainWrapper = document.querySelector('#mainMediaContainer .media-wrapper');
+    expect(mainWrapper).toBeTruthy();
+    // The third example is a video
+    expect(mainWrapper.querySelector('video')).toBeTruthy();
+
+    // Wraps around past the end
+    updateMainDisplay(3);
+    expect(document.querySelector('.gallery-thumb.active')?.dataset.index).toBe('0');
+    expect(document.querySelector('#galleryPosition')?.textContent).toBe('1 / 3');
+  });
+
+  it('fits the main viewer to the active media aspect ratio', async () => {
+    const { renderShowcaseContent, updateMainDisplay } = await import(SHOWCASE_MODULE);
+
+    document.body.innerHTML = `<div id="showcase-tab">${renderShowcaseContent(IMAGES, [], PREVIEW_URL, true)}</div>`;
+
+    // First image is portrait 512x768 → aspect 0.667
+    const container = document.getElementById('mainMediaContainer');
+    expect(container.style.getPropertyValue('--media-aspect')).toBe(String(512 / 768));
+
+    // Second image is landscape 768x512 → aspect 1.5
+    updateMainDisplay(1);
+    expect(container.style.getPropertyValue('--media-aspect')).toBe('1.5');
+  });
+
+  it('ignores main-display updates while collapsed', async () => {
+    const { renderShowcaseContent, updateMainDisplay } = await import(SHOWCASE_MODULE);
+
+    document.body.innerHTML = `<div id="showcase-tab">${renderShowcaseContent(IMAGES, [], PREVIEW_URL)}</div>`;
+
+    updateMainDisplay(1);
+
+    // Still collapsed: indicator bar untouched, no gallery rendered
+    expect(document.querySelector('.gallery-indicator-bar')).toBeTruthy();
+    expect(document.querySelectorAll('.gallery-thumb')).toHaveLength(0);
+  });
+});

tests/frontend/components/showcase.listenerMetrics.test.js

@@ -1,72 +0,0 @@
-import { describe, it, beforeEach, afterEach, expect } from 'vitest';
-
-const { SHOWCASE_MODULE } = vi.hoisted(() => ({
-    SHOWCASE_MODULE: new URL('../../../static/js/components/shared/showcase/ShowcaseView.js', import.meta.url).pathname,
-}));
-
-describe('Showcase listener metrics', () => {
-    beforeEach(() => {
-        document.body.innerHTML = `
-            <div id="modelModal">
-                <div class="modal-content">
-                    <div class="showcase-section">
-                        <div class="carousel collapsed">
-                            <div class="scroll-indicator"></div>
-                        </div>
-                        <button class="back-to-top"></button>
-                    </div>
-                </div>
-            </div>
-        `;
-    });
-
-    afterEach(() => {
-        document.body.innerHTML = '';
-    });
-
-    it('tracks wheel/mutation/back-to-top listeners and resets after cleanup', async () => {
-        const {
-            setupShowcaseScroll,
-            resetShowcaseListenerMetrics,
-            showcaseListenerMetrics,
-        } = await import(SHOWCASE_MODULE);
-
-        resetShowcaseListenerMetrics();
-
-        expect(showcaseListenerMetrics.wheelListeners).toBe(0);
-        expect(showcaseListenerMetrics.mutationObservers).toBe(0);
-        expect(showcaseListenerMetrics.backToTopHandlers).toBe(0);
-
-        const cleanup = setupShowcaseScroll('modelModal');
-
-        expect(showcaseListenerMetrics.wheelListeners).toBe(1);
-        expect(showcaseListenerMetrics.mutationObservers).toBe(1);
-        expect(showcaseListenerMetrics.backToTopHandlers).toBe(1);
-
-        cleanup();
-
-        expect(showcaseListenerMetrics.wheelListeners).toBe(0);
-        expect(showcaseListenerMetrics.mutationObservers).toBe(0);
-        expect(showcaseListenerMetrics.backToTopHandlers).toBe(0);
-    });
-
-    it('remains stable after repeated setup/cleanup cycles', async () => {
-        const {
-            setupShowcaseScroll,
-            resetShowcaseListenerMetrics,
-            showcaseListenerMetrics,
-        } = await import(SHOWCASE_MODULE);
-
-        resetShowcaseListenerMetrics();
-
-        const cleanupA = setupShowcaseScroll('modelModal');
-        cleanupA();
-
-        const cleanupB = setupShowcaseScroll('modelModal');
-        cleanupB();
-
-        expect(showcaseListenerMetrics.wheelListeners).toBe(0);
-        expect(showcaseListenerMetrics.mutationObservers).toBe(0);
-        expect(showcaseListenerMetrics.backToTopHandlers).toBe(0);
-    });
-});