From f4497ef59d4fbf48eda9c5003494ed91c54d01b9 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 22 Sep 2025 10:59:33 +0100
Subject: [PATCH] Remove right-side stack panel implementation and update
 comments for clarity

---
 dicom-viewer/src/App.tsx | 85 +---------------------------------------
 1 file changed, 1 insertion(+), 84 deletions(-)

diff --git a/dicom-viewer/src/App.tsx b/dicom-viewer/src/App.tsx
index 2e38491..894bd85 100644
--- a/dicom-viewer/src/App.tsx
+++ b/dicom-viewer/src/App.tsx
@@ -2992,90 +2992,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
 
       {/* top stack bar removed; use right-side panel instead */}
 
-      {/* Right-side stack panel (pinnable, shows on hover when not pinned) */}
-      <div style={{ position: 'absolute', right: 0, top: 12, height: 'calc(100% - 24px)', zIndex: 2100, display: 'flex', alignItems: 'stretch', pointerEvents: 'auto' }}>
-        {/* Panel container: translateX to hide when not pinned and not hovered */}
-        <div
-          style={{
-            height: '100%',
-            width: '100%',
-            background: '#1f2428',
-            color: '#fff',
-            boxShadow: '0 2px 14px rgba(0,0,0,0.45)',
-            borderLeft: '1px solid #2f3336',
-            transform: stackPanelPinned || stackPanelOpen ? 'translateX(0)' : 'translateX(96%)',
-            transition: 'transform 220ms ease',
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'hidden',
-          }}
-        >
-          <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 }}
-              >
-                ×
-              </button>
-            </div>
-          </div>
-
-          <div style={{ overflowY: 'auto', padding: 8, flex: 1 }}>
-            {availableStacks.length === 0 ? (
-              <div style={{ color: '#999', padding: 12 }}>No stacks available</div>
-            ) : (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                {availableStacks.map((stack, idx) => {
-                  const imageIds = Array.isArray(stack.imageIds) ? stack.imageIds : [];
-                  const label = stack.name || (stack.caseId ? `Case: ${stack.caseId}` : `Stack ${idx + 1}`);
-                  const count = imageIds.length;
-                  const invalid = !Array.isArray(imageIds) || count === 0;
-                  const isSelected = selectedStackIdx.includes(idx);
-                  return (
-                    <div
-                      key={idx}
-                      draggable={!invalid}
-                      onDragStart={e => {
-                        if (invalid) return;
-                        e.dataTransfer.setData('text/stack-idx', String(idx));
-                        e.dataTransfer.effectAllowed = 'copy';
-                      }}
-                      onClick={() => { if (!invalid) handleLoadStack(0, idx); }}
-                      style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        padding: '8px 10px',
-                        background: isSelected ? '#1976d2' : 'transparent',
-                        color: isSelected ? '#fff' : '#ddd',
-                        borderRadius: 6,
-                        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>
-                      <div style={{ fontSize: 12, opacity: 0.8 }}>{stack.studyId || ''}</div>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        </div>
-
-      </div>
+      {/* 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) && (