Add thumbnail image display for stacks and relocate settings button to viewport area

dicom-viewer/src/App.tsx

@@ -3482,6 +3482,11 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
                       const count = imageIds.length;
                       const invalid = !Array.isArray(imageIds) || count === 0;
                       const isSelected = selectedStackIdx.includes(idx);
+                      // Prefer the middle image for a representative thumbnail, fallback to first
+                      const midIndex = Math.floor(imageIds.length / 2);
+                      const chosenImage = imageIds[midIndex] || imageIds[0];
+                      const thumbnailUrl = chosenImage ? (chosenImage.startsWith('wadouri:') ? chosenImage.slice(7) : chosenImage) : null;
+
                       return (
                         <div
                           key={idx}
@@ -3503,9 +3508,16 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
                             cursor: invalid ? 'not-allowed' : 'pointer',
                           }}
                         >
-                          <div style={{ display: 'flex', flexDirection: 'column' }}>
-                            <div style={{ fontWeight: 600 }}>{label}</div>
-                            <div style={{ fontSize: 12, opacity: 0.7 }}>{count} img{count === 1 ? '' : 's'}</div>
+                          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                            {thumbnailUrl ? (
+                              <img src={thumbnailUrl} alt={label} style={{ width: 56, height: 56, objectFit: 'cover', borderRadius: 4, background: '#111' }} />
+                            ) : (
+                              <div style={{ width: 56, height: 56, borderRadius: 4, background: '#111', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#777' }}>No Img</div>
+                            )}
+                            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                              <div style={{ fontWeight: 600 }}>{label}</div>
+                              <div style={{ fontSize: 12, opacity: 0.7 }}>{count} img{count === 1 ? '' : 's'}</div>
+                            </div>
                           </div>
                           <div style={{ fontSize: 12, opacity: 0.8 }}>{stack.studyId || ''}</div>
                         </div>
@@ -3520,26 +3532,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
       </div>
 
 
-      {/* Settings button at top-left (shift when side menu open) to avoid overlapping right-side controls */}
-      <button
-        style={{
-          position: "absolute",
-          top: 8,
-          left: sideMenuOpen ? 250 + 16 : 16,
-          zIndex: 2800,
-          padding: "6px 12px",
-          background: "#222",
-          color: "#fff",
-          border: "none",
-          borderRadius: "4px",
-          cursor: "pointer",
-          opacity: 0.85,
-          userSelect: "none",
-        }}
-        onClick={() => setSettingsOpen(true)}
-      >
-        Settings
-      </button>
+      {/* duplicate Settings button removed; the Settings button is now placed inside the viewport area */}
 
       {/* Settings Modal (viewport-local, not fixed to page) */}
       {