refactor: Add MediaRenderers, MediaUtils, MetadataPanel, and ShowcaseView components for enhanced media handling in showcase

- Implemented MediaRenderers.js to generate HTML for video and image wrappers, including NSFW handling and media controls.
- Created MediaUtils.js for utility functions to manage media loading, lazy loading, and metadata panel interactions.
- Developed MetadataPanel.js to generate metadata panels for media items, including prompts and generation parameters.
- Introduced ShowcaseView.js to render showcase content, manage media items, and handle file imports with drag-and-drop support.

static/js/components/loraModal/index.js

@@ -7,11 +7,12 @@ import { showToast, copyToClipboard } from '../../utils/uiHelpers.js';
 import { modalManager } from '../../managers/ModalManager.js';
 import { 
     renderShowcaseContent, 
-    toggleShowcase, 
+    initShowcaseContent, 
+    toggleShowcase,
     setupShowcaseScroll, 
     scrollToTop,
-    initExampleImport 
-} from './ShowcaseView.js';
+    initExampleImport
+} from '../shared/showcase/ShowcaseView.js';
 import { setupTabSwitching, loadModelDescription } from './ModelDescription.js';
 import { renderTriggerWords, setupTriggerWordsEditMode } from './TriggerWords.js';
 import { parsePresets, renderPresetTags } from './PresetTags.js';
@@ -175,7 +176,7 @@ export function showLoraModal(lora) {
     
     modalManager.showModal('loraModal', content);
     setupEditableFields(lora.file_path);
-    setupShowcaseScroll();
+    setupShowcaseScroll('loraModal');
     setupTabSwitching();
     setupTagTooltip();
     setupTriggerWordsEditMode();
@@ -232,13 +233,8 @@ async function loadExampleImages(images, modelHash) {
         
         // Re-initialize the showcase event listeners
         const carousel = showcaseTab.querySelector('.carousel');
-        if (carousel) {
-            // Only initialize if we actually have examples and they're expanded
-            if (!carousel.classList.contains('collapsed')) {
-                initLazyLoading(carousel);
-                initNsfwBlurHandlers(carousel);
-                initMetadataPanelHandlers(carousel);
-            }
+        if (carousel && !carousel.classList.contains('collapsed')) {
+            initShowcaseContent(carousel);
         }
         
         // Initialize the example import functionality
@@ -368,5 +364,4 @@ function setupEditableFields(filePath) {
     });
 }
 
-// Export functions for global access
-export { toggleShowcase, scrollToTop };
+window.scrollToTop = scrollToTop;