From 2f14631ad06e7ba8923dc213c24453a4c04054d5 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 22 Sep 2025 11:26:30 +0100
Subject: [PATCH] Enhance right-side stack panel interaction with hover button
 and settings button adjustments

---
 dicom-viewer/src/App.tsx | 56 ++++++++++++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 14 deletions(-)

diff --git a/dicom-viewer/src/App.tsx b/dicom-viewer/src/App.tsx
index 94b70f8..3cc717c 100644
--- a/dicom-viewer/src/App.tsx
+++ b/dicom-viewer/src/App.tsx
@@ -178,6 +178,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
 
   // Right-side stack panel open state (toggled by button)
   const [stackPanelOpen, setStackPanelOpen] = useState(false);
+  const [showOpenButtonHover, setShowOpenButtonHover] = useState(false);
 
   const [fullscreenHoverIdx, setFullscreenHoverIdx] = useState<number | null>(null);
   const [openDropdownIdx, setOpenDropdownIdx] = useState<number | null>(null);
@@ -2992,32 +2993,39 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
 
       {/* Right-side stack panel is implemented in the main content flex container below */}
 
-      {/* Floating right-edge toggle — always visible so users can open the panel */}
-      {!stackPanelOpen && (
+      {/* Right-edge hover strip to reveal open button */}
+      <div
+        onMouseEnter={() => { if (!stackPanelOpen) setShowOpenButtonHover(true); }}
+        onMouseLeave={() => { if (!stackPanelOpen) setShowOpenButtonHover(false); }}
+        style={{ position: 'absolute', right: 0, top: 0, height: '100%', width: 56, zIndex: 2400, pointerEvents: stackPanelOpen ? 'none' : 'auto' }}
+      />
+
+      {/* Open button only visible when hover strip is active */}
+      {showOpenButtonHover && !stackPanelOpen && (
         <button
           onClick={() => setStackPanelOpen(true)}
+          onMouseEnter={() => setShowOpenButtonHover(true)}
+          onMouseLeave={() => setShowOpenButtonHover(false)}
           aria-pressed={false}
           title="Open stacks"
           style={{
             position: 'absolute',
-            right: 8,
+            right: 14,
             top: '50%',
             transform: 'translateY(-50%)',
-            zIndex: 2500,
-            width: 24,
-            height: 24,
-            padding: 0,
+            zIndex: 2700,
+            width: 28,
+            height: 48,
             background: '#1976d2',
             color: '#fff',
             border: 'none',
-            borderRadius: 4,
+            borderRadius: 6,
             cursor: 'pointer',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
-            lineHeight: 1,
-            fontSize: 12,
+            boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+            pointerEvents: 'auto'
           }}
         >
           ▶
@@ -3407,10 +3415,30 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
           }}
         >
           {viewports}
+          {/* Settings button positioned relative to the viewport area so it doesn't shift when the right panel opens */}
+          <button
+            style={{
+              position: 'absolute',
+              top: 8,
+              right: 8,
+              zIndex: 2600,
+              padding: '6px 12px',
+              background: '#222',
+              color: '#fff',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer',
+              opacity: 0.85,
+              userSelect: 'none',
+            }}
+            onClick={() => setSettingsOpen(true)}
+          >
+            Settings
+          </button>
         </div>
 
-        {/* Right-side panel occupies layout space when visible or pinned */}
-        <div style={{ width: stackPanelOpen ? 320 : 28, transition: 'width 220ms ease', display: 'flex', flexDirection: 'column', pointerEvents: 'auto' }}>
+  {/* Right-side panel occupies layout space when visible; when closed width is 0 and it doesn't catch pointer events */}
+  <div style={{ width: stackPanelOpen ? 320 : 0, transition: 'width 220ms ease', display: 'flex', flexDirection: 'column', pointerEvents: stackPanelOpen ? 'auto' : 'none', overflow: 'hidden' }}>
           {/* Reuse the existing right-side panel markup but ensure pointerEvents are enabled inside */}
           <div style={{ pointerEvents: 'auto', width: '100%', height: '100%' }}>
             {/* Panel (same content as before) */}
@@ -3498,7 +3526,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
           position: "absolute",
           top: 8,
           left: sideMenuOpen ? 250 + 16 : 16,
-          zIndex: 2600,
+          zIndex: 2800,
           padding: "6px 12px",
           background: "#222",
           color: "#fff",