diff --git a/docs/superpowers/plans/2026-04-22-maximize-tab-plan.md b/docs/superpowers/plans/2026-04-22-maximize-tab-plan.md new file mode 100644 index 0000000..c4abec3 --- /dev/null +++ b/docs/superpowers/plans/2026-04-22-maximize-tab-plan.md @@ -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 + +``` + +- [ ] **Step 3: Wrap content in conditional render** + +After existing return statement, wrap in: + +```tsx +return ( + <> + {isFullscreen ? ( +