Craze-Data-check/docs/superpowers/plans/2026-04-22-maximize-tab-plan.md

# 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.