fix(showcase): support middle-click and left-click to expand showcase

Fix showcase expansion to work with both left-click and middle-click (drag scroll).

Problem: The scroll-indicator click events were only bound when the carousel
was in expanded state. Initial collapsed state meant no click handlers were
attached, so clicking did nothing.

Solution:
- Extract scroll-indicator event binding into separate bindScrollIndicatorEvents()
- Call bindScrollIndicatorEvents() immediately when showcase loads, regardless
  of collapsed state
- Separate handlers for left-click (click event) and middle-click (mousedown
  event) to avoid double-triggering

Changes:
- Add bindScrollIndicatorEvents() function for early event binding
- Use click event for left mouse button (button 0)
- Use mousedown event for middle mouse button (button 1)
- Update loadExampleImages() to bind events immediately
- Update initShowcaseContent() to use the new function

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

@@ -61,8 +61,14 @@ export async function loadExampleImages(images, modelHash) {
         
         // Re-initialize the showcase event listeners
         const carousel = showcaseTab.querySelector('.carousel');
-        if (carousel && !carousel.classList.contains('collapsed')) {
-            initShowcaseContent(carousel);
+        if (carousel) {
+            // 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
@@ -576,6 +582,41 @@ export function toggleShowcase(element) {
     }
 }
 
+/**
+ * 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
@@ -589,15 +630,8 @@ export function initShowcaseContent(carousel) {
     initMediaControlHandlers(carousel);
     positionAllMediaControls(carousel);
 
-    // Bind scroll-indicator click to toggleShowcase
-    const scrollIndicator = carousel.previousElementSibling;
-    if (scrollIndicator && scrollIndicator.classList.contains('scroll-indicator')) {
-        // Remove previous click listeners to avoid duplicates
-        scrollIndicator.onclick = null;
-        scrollIndicator.removeEventListener('click', scrollIndicator._toggleShowcaseHandler);
-        scrollIndicator._toggleShowcaseHandler = () => toggleShowcase(scrollIndicator);
-        scrollIndicator.addEventListener('click', scrollIndicator._toggleShowcaseHandler);
-    }
+    // Bind scroll-indicator click events
+    bindScrollIndicatorEvents(carousel);
     
     // Add window resize handler
     const resizeHandler = () => positionAllMediaControls(carousel);