From 82d4c942554f932d91ec6a640762b2bb5491ae38 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 22 Sep 2025 11:03:30 +0100
Subject: [PATCH] Refactor right-side stack panel to simplify open state
 management and remove pinning functionality

---
 dicom-viewer/src/App.tsx | 32 +++++++++++++-------------------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/dicom-viewer/src/App.tsx b/dicom-viewer/src/App.tsx
index 894bd85..4fba525 100644
--- a/dicom-viewer/src/App.tsx
+++ b/dicom-viewer/src/App.tsx
@@ -176,9 +176,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
   // Settings open state
   // (top bar removed; stack browser moved to right-side panel)
 
-  // Right-side stack panel pinned state (false = auto-hide, true = pinned open)
-  const [stackPanelPinned, setStackPanelPinned] = useState(false);
-  // Local open state toggled by small button (replaces hover-to-open)
+  // Right-side stack panel open state (toggled by button)
   const [stackPanelOpen, setStackPanelOpen] = useState(false);
 
   const [fullscreenHoverIdx, setFullscreenHoverIdx] = useState<number | null>(null);
@@ -2995,7 +2993,7 @@ 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 */}
-      {! (stackPanelPinned || stackPanelOpen) && (
+      {!stackPanelOpen && (
         <button
           onClick={() => setStackPanelOpen(true)}
           aria-pressed={false}
@@ -3006,24 +3004,27 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
             top: '50%',
             transform: 'translateY(-50%)',
             zIndex: 2500,
-            width: 40,
-            height: 64,
+            width: 24,
+            height: 24,
+            padding: 0,
             background: '#1976d2',
             color: '#fff',
             border: 'none',
-            borderRadius: 8,
+            borderRadius: 4,
             cursor: 'pointer',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            boxShadow: '0 2px 8px rgba(0,0,0,0.3)'
+            boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
+            lineHeight: 1,
+            fontSize: 12,
           }}
         >
           ▶
         </button>
       )}
 
-  <div>
+      <div>
         {/* Side menu toggle button */}
         <button
           style={{
@@ -3409,7 +3410,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
         </div>
 
         {/* Right-side panel occupies layout space when visible or pinned */}
-  <div style={{ width: stackPanelPinned || stackPanelOpen ? 320 : 28, transition: 'width 220ms ease', display: 'flex', flexDirection: 'column', pointerEvents: 'auto' }}>
+        <div style={{ width: stackPanelOpen ? 320 : 28, transition: 'width 220ms ease', display: 'flex', flexDirection: 'column', pointerEvents: 'auto' }}>
           {/* 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) */}
@@ -3432,17 +3433,10 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', borderBottom: '1px solid #2b2f31' }}>
                 <div style={{ fontWeight: 700 }}>Stacks</div>
                 <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-                  <button
-                    title={stackPanelPinned ? 'Unpin panel' : 'Pin panel'}
-                    onClick={() => setStackPanelPinned(p => !p)}
-                    style={{ background: stackPanelPinned ? '#1976d2' : '#333', color: '#fff', border: 'none', padding: '6px 8px', borderRadius: 4, cursor: 'pointer' }}
-                  >
-                    {stackPanelPinned ? 'Pinned' : 'Pin'}
-                  </button>
                   <button
                     title="Close"
-                    onClick={() => { setStackPanelPinned(false); setStackPanelOpen(false); }}
-                    style={{ background: 'transparent', color: '#fff', border: 'none', cursor: 'pointer', fontSize: 18 }}
+                    onClick={() => { setStackPanelOpen(false); }}
+                    style={{ background: 'transparent', color: '#fff', border: 'none', cursor: 'pointer', fontSize: 16 }}
                   >
                     ×
                   </button>