From 7f2d1670a04c80ec807d730be9380b112c5137f7 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Fri, 27 Jun 2025 10:12:17 +0800
Subject: [PATCH] feat: add startExpanded option to renderShowcaseContent for
 improved showcase interaction

---
 static/js/components/shared/showcase/ShowcaseView.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/static/js/components/shared/showcase/ShowcaseView.js b/static/js/components/shared/showcase/ShowcaseView.js
index d3133b7b..7f65a59f 100644
--- a/static/js/components/shared/showcase/ShowcaseView.js
+++ b/static/js/components/shared/showcase/ShowcaseView.js
@@ -71,10 +71,10 @@ export async function loadExampleImages(images, modelHash) {
  * Render showcase content
  * @param {Array} images - Array of images/videos to show
  * @param {Array} exampleFiles - Local example files
- * @param {Object} options - Options for rendering
+ * @param {boolean} startExpanded - Whether to start in expanded state
  * @returns {string} HTML content
  */
-export function renderShowcaseContent(images, exampleFiles = []) {
+export function renderShowcaseContent(images, exampleFiles = [], startExpanded = false) {
     if (!images?.length) {
         // Show empty state with import interface
         return renderImportInterface(true);
@@ -113,10 +113,10 @@ export function renderShowcaseContent(images, exampleFiles = []) {
     
     return `
         <div class="scroll-indicator" onclick="toggleShowcase(this)">
-            <i class="fas fa-chevron-down"></i>
-            <span>Scroll or click to show ${filteredImages.length} examples</span>
+            <i class="fas fa-chevron-${startExpanded ? 'up' : 'down'}"></i>
+            <span>Scroll or click to ${startExpanded ? 'hide' : 'show'} ${filteredImages.length} examples</span>
         </div>
-        <div class="carousel collapsed">
+        <div class="carousel ${startExpanded ? '' : 'collapsed'}">
             ${hiddenNotification}
             <div class="carousel-container">
                 ${filteredImages.map((img, index) => renderMediaItem(img, index, exampleFiles)).join('')}
@@ -406,7 +406,7 @@ 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);
+            showcaseTab.innerHTML = renderShowcaseContent(allImages, updatedFilesResult.files, true);
             
             // Re-initialize showcase functionality
             const carousel = showcaseTab.querySelector('.carousel');