Add toggle functionality for top stack bar visibility and persistent button to reveal it

dicom-viewer/src/App.tsx

@@ -173,6 +173,8 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
   const [presetsOpen, setPresetsOpen] = useState(false);
 
   const [settingsOpen, setSettingsOpen] = useState(false);
+  // Control visibility of the global top stack bar (hidden by default)
+  const [topBarVisible, setTopBarVisible] = useState(false);
 
   const [fullscreenHoverIdx, setFullscreenHoverIdx] = useState<number | null>(null);
   const [openDropdownIdx, setOpenDropdownIdx] = useState<number | null>(null);
@@ -2983,27 +2985,45 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
         </div>
       )}
 
-      {/* Top bar stack browser */}
-      <div
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          minHeight: 54,
-          background: "#23272bE6", // slightly transparent for layering
-          color: "#fff",
-          zIndex: 1001, // higher than most overlays but below modals
-          display: "flex",
-          alignItems: "center",
-          borderBottom: "2px solid #444",
-          padding: "0 16px",
-          gap: 18,
-          overflowX: "auto",
-          userSelect: "none",
-          pointerEvents: "auto",
-        }}
-      >
+      {/* Top bar stack browser (hidden by default) */}
+      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
+        <button
+          onClick={() => setTopBarVisible(v => !v)}
+          style={{
+            background: topBarVisible ? "#1976d2" : "#333",
+            color: "#fff",
+            border: "none",
+            padding: "8px 12px",
+            borderRadius: 4,
+            cursor: "pointer",
+          }}
+          aria-pressed={topBarVisible}
+          aria-label={topBarVisible ? "Hide stack bar" : "Show stack bar"}
+        >
+          {topBarVisible ? "Hide Stack Bar" : "Show Stack Bar"}
+        </button>
+
+        {topBarVisible && (
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              minHeight: 54,
+              background: "#23272bE6", // slightly transparent for layering
+              color: "#fff",
+              zIndex: 1001, // higher than most overlays but below modals
+              display: "flex",
+              alignItems: "center",
+              borderBottom: "2px solid #444",
+              padding: "0 16px",
+              gap: 18,
+              overflowX: "auto",
+              userSelect: "none",
+              pointerEvents: "auto",
+            }}
+          >
         {/* Group stacks by studyId or studyInstanceUID or 'Unspecified' */}
         {(() => {
           const groups: Record<string, { idx: number; stack: StackEntry }[]> = {};
@@ -3063,9 +3083,31 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
             </div>
           ));
         })()}
+          </div>
+        )}
       </div>
+      {/* Persistent floating button to reveal the stack bar */}
+      <button
+        onClick={() => setTopBarVisible(true)}
+        style={{
+          position: "absolute",
+          top: 12,
+          left: 12,
+          zIndex: 2000,
+          background: "#1976d2",
+          color: "#fff",
+          border: "none",
+          padding: "8px 10px",
+          borderRadius: 6,
+          cursor: "pointer",
+          boxShadow: "0 2px 10px rgba(0,0,0,0.3)",
+        }}
+        aria-label="Show stack bar"
+      >
+        Show Stacks
+      </button>
 
-      <div>
+  <div>
         {/* Side menu toggle button */}
         <button
           style={{