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.

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.

<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:

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.