UI: Implement Maximize mode for tables. Added a 'MAXIMIZE' button to TopBar and an 'X' close button in fullscreen mode. Hides sidebar and header to provide maximum screen space for data tables.

2026-08-03 13:05:25 +02:00 · 2026-04-22 20:38:06 +02:00
parent bf98e4e4ba
commit b5ea911e43
5 changed files with 342 additions and 24 deletions
@@ -0,0 +1,112 @@
+# Maximize Tab View — Spec
+
+## Concept & Vision
+
+Each tab view (Matrix, Product Descriptions, Dimensions, etc.) can be maximized to fullscreen mode, hiding all navigation chrome (Sidebar, TopBar) to maximize data visibility. A floating close button allows returning to normal view. The effect is immersive and focused — like pressing F11 in a browser.
+
+## Design
+
+### Normal Mode
+- Sidebar (240px) visible on left
+- TopBar visible on top
+- Main content fills remaining space
+
+### Maximized Mode
+- Sidebar: `display: none`
+- TopBar: `display: none`
+- Fullscreen overlay covers entire viewport
+- Background: `#041021` (matches main content bg)
+- Content area: max-height `100vh`, overflow scroll
+- Floating close button: top-right corner, fixed position
+
+### Close Button
+- Position: fixed, top-right
+- Size: 40x40px
+- Background: `rgba(30, 41, 59, 0.9)` with blur
+- Border: 1px `slate-600`
+- Icon: `X` from lucide-react, white, 20px
+- Hover: bg `slate-700`, scale 1.05
+- Z-index: 50
+- Tooltip: "Exit fullscreen"
+
+## Layout & Structure
+
+### Implementation Pattern
+
+Each view component receives `isFullscreen?: boolean` prop and renders:
+
+```
+{maximizeButton && (
+  <button onClick={toggleFullscreen} className="..." title="Fullscreen">
+    <Maximize2 />
+  </button>
+)}
+
+{isFullscreen ? (
+  <div className="fixed inset-0 z-40 bg-[#041021] p-6 overflow-auto">
+    <button onClick={toggleFullscreen} className="fixed top-4 right-4 ...">
+      <X />
+    </button>
+    {/* Tab content rendered at full height */}
+  </div>
+) : (
+  <div className="...">
+    {/* Tab content normal */}
+  </div>
+)}
+```
+
+### State Management
+- Each tab manages its own `isFullscreen` state locally
+- No global state needed — each tab remembers its own fullscreen mode
+- State resets to normal when switching tabs (intentional)
+
+## Features & Interactions
+
+### Toggle Button
+- Location: Each tab view has a maximize button (icon) in its header area
+- Icon: `Maximize2` from lucide-react
+- Click: Enter fullscreen mode
+- Hover: Slight scale increase, cursor pointer
+
+### Exit Fullscreen
+- Click floating X button
+- Instantly returns to normal layout
+- No animation needed
+
+## Component Inventory
+
+### MaximizeButton (in each tab header)
+- States: default, hover
+- Color: `slate-400` default, `slate-200` hover
+
+### FullscreenCloseButton (floating)
+- States: default, hover, active
+- Default: semi-transparent dark bg, subtle border
+- Hover: lighter bg, slight scale
+- Z-index ensures it's above all content
+
+### FullscreenOverlay
+- Fixed positioning
+- Matches app background color
+- Contains scrollable content
+
+## Technical Approach
+
+- Add `isFullscreen` state to each view component
+- Add toggle function
+- Conditional rendering based on state
+- Icons from `lucide-react`: `Maximize2`, `X`
+- All styling via Tailwind classes
+- No additional dependencies
+
+## Affected Components
+
+1. `ProductDescriptions.tsx`
+2. `MatrixView.tsx`
+3. `DimensionsView.tsx`
+4. `PricingView.tsx`
+5. `ArticleDetails.tsx`
+6. `PendingValidationView.tsx`
+7. `MissingDataView.tsx`
+8. `HistoryView.tsx`