Update index.html

index.html

@@ -81,7 +81,7 @@
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                 </button>
             </div>
-            <div id="model-selector" class="panel-content flex-grow overflow-y-auto px-2 space-y-1 pb-5"></div>
+            <div id="model-selector" class="panel-content flex-grow overflow-y-auto px-2 space-y-2 pb-5"></div>
         </div>
     </aside>
 
@@ -210,23 +210,40 @@
         function setupUI() {
             const modelSelector = document.getElementById('model-selector');
             modelFiles.forEach(fileName => {
-                const btn = document.createElement('button');
-                btn.textContent = fileName.replace('.glb', '').replace(/(\d)/, ' $1').toUpperCase();
-                btn.className = 'list-item w-full text-left px-4 py-3 rounded-lg text-white';
-                btn.dataset.model = fileName;
-                btn.onclick = () => loadAndSwitchModel(fileName);
-                modelSelector.appendChild(btn);
+                const container = document.createElement('div');
+                container.className = 'list-item w-full flex items-center p-2 rounded-lg cursor-pointer';
+                container.dataset.model = fileName;
+                container.onclick = () => loadAndSwitchModel(fileName);
+
+                const thumb = document.createElement('img');
+                // Assumes a .png thumbnail exists for each .glb model in '/glb/thumbnails/'
+                thumb.src = `/glb/thumbnails/${fileName.replace('.glb', '.png')}`;
+                thumb.alt = `Thumbnail for ${fileName}`;
+                thumb.className = 'w-20 h-16 object-cover rounded-md mr-3 bg-gray-800';
+                // Basic error handling for thumbnails
+                thumb.onerror = () => { thumb.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; };
+                
+                const name = document.createElement('span');
+                name.textContent = fileName.replace('.glb', '').replace(/(\d)/, ' $1').toUpperCase();
+                name.className = 'text-white font-medium';
+
+                container.appendChild(thumb);
+                container.appendChild(name);
+                modelSelector.appendChild(container);
             });
+
             const panoramaGallery = document.getElementById('panorama-gallery');
             panoramaFiles.forEach(fileName => {
                 const container = document.createElement('div');
                 container.className = 'list-item aspect-video rounded-lg overflow-hidden cursor-pointer ring-2 ring-transparent';
                 container.dataset.image = fileName;
                 container.onclick = () => setPanorama(fileName);
+                
                 const thumb = document.createElement('img');
                 thumb.src = `/jpg/thumbnails/${fileName}`;
                 thumb.className = 'w-full h-full object-cover';
                 thumb.alt = `Thumbnail for ${fileName}`;
+                
                 container.appendChild(thumb);
                 panoramaGallery.appendChild(container);
             });