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 12:35: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,171 @@
+# Maximize Tab View — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Add fullscreen maximize mode to each tab view, hiding Sidebar and TopBar for maximum data visibility.
+
+**Architecture:** Each view component manages its own `isFullscreen` state locally. No global state. Toggle between normal and fullscreen modes with conditional rendering.
+
+**Tech Stack:** React useState, lucide-react icons, Tailwind CSS
+
+---
+
+### Task 1: ProductDescriptions.tsx
+
+**Files:**
+- Modify: `src/components/ProductDescriptions.tsx`
+
+- [ ] **Step 1: Add imports and state**
+
+Add `Maximize2` to lucide-react imports.
+Add `useState` if not present.
+
+```tsx
+const [isFullscreen, setIsFullscreen] = useState(false);
+```
+
+- [ ] **Step 2: Add maximize button**
+
+Find the component's header section (where stats/controls are rendered).
+Add maximize button with `Maximize2` icon next to existing controls.
+
+```tsx
+<button
+  onClick={() => setIsFullscreen(true)}
+  className="p-2 text-slate-400 hover:text-slate-200 hover:bg-slate-700 rounded transition-colors"
+  title="Fullscreen"
+>
+  <Maximize2 className="w-5 h-5" />
+</button>
+```
+
+- [ ] **Step 3: Wrap content in conditional render**
+
+After existing return statement, wrap in:
+
+```tsx
+return (
+  <>
+    {isFullscreen ? (
+      <div className="fixed inset-0 z-40 bg-[#041021] p-6 overflow-auto">
+        <button
+          onClick={() => setIsFullscreen(false)}
+          className="fixed top-4 right-4 z-50 w-10 h-10 flex items-center justify-center bg-slate-800/90 backdrop-blur border border-slate-600 text-white rounded hover:bg-slate-700 hover:scale-105 transition-all"
+          title="Exit fullscreen"
+        >
+          <X className="w-5 h-5" />
+        </button>
+        {/* Existing JSX content - remove any overflow constraints */}
+        <div className="[content goes here]" />
+      </div>
+    ) : (
+      <div className="...">
+        {/* Existing JSX content - keep current overflow settings */}
+        <div className="[content goes here]" />
+      </div>
+    )}
+  </>
+);
+```
+
+---
+
+### Task 2: MatrixView.tsx
+
+**Files:**
+- Modify: `src/components/MatrixView.tsx`
+
+- [ ] **Step 1: Add imports and state**
+
+Add `Maximize2`, `X` to lucide-react imports.
+Add `useState` if not present.
+
+- [ ] **Step 2: Add maximize button**
+
+Add button in the header area (search bar section).
+
+- [ ] **Step 3: Add conditional render**
+
+Same pattern as Task 1.
+
+---
+
+### Task 3: DimensionsView.tsx
+
+**Files:**
+- Modify: `src/components/DimensionsView.tsx`
+
+- [ ] **Step 1: Add imports and state**
+
+- [ ] **Step 2: Add maximize button**
+
+- [ ] **Step 3: Add conditional render**
+
+---
+
+### Task 4: PricingView.tsx
+
+**Files:**
+- Modify: `src/components/PricingView.tsx`
+
+- [ ] **Step 1: Add imports and state**
+
+- [ ] **Step 2: Add maximize button**
+
+- [ ] **Step 3: Add conditional render**
+
+---
+
+### Task 5: ArticleDetails.tsx
+
+**Files:**
+- Modify: `src/components/ArticleDetails.tsx`
+
+- [ ] **Step 1: Add imports and state**
+
+- [ ] **Step 2: Add maximize button**
+
+- [ ] **Step 3: Add conditional render**
+
+---
+
+### Task 6: PendingValidationView.tsx
+
+**Files:**
+- Modify: `src/components/PendingValidationView.tsx`
+
+- [ ] **Step 1: Add imports and state**
+
+- [ ] **Step 2: Add maximize button**
+
+- [ ] **Step 3: Add conditional render**
+
+---
+
+### Task 7: MissingDataView.tsx
+
+**Files:**
+- Modify: `src/components/MissingDataView.tsx`
+
+- [ ] **Step 1: Add imports and state**
+
+- [ ] **Step 2: Add maximize button**
+
+- [ ] **Step 3: Add conditional render**
+
+---
+
+### Task 8: HistoryView.tsx
+
+**Files:**
+- Modify: `src/components/HistoryView.tsx`
+
+- [ ] **Step 1: Add imports and state**
+
+- [ ] **Step 2: Add maximize button**
+
+- [ ] **Step 3: Add conditional render**
+
+---
+
+**Verification:** Run `npm run lint` to ensure no TypeScript errors.