lcbp3/specs/200-fullstacks/240-ai-console-collapsible-cards/research.md

Research: AI Console Collapsible Cards

Design & Mockup Research

We researched the Stitch project 6165107555700812297 screen "AI Console with Fixed Collapsible Cards" (screen name 30ce3255a7444cc99e4009fa303d948c).

Key Findings

1. The mockup implements a master section toggle and individual card toggles.
2. The HTML/CSS structure uses class-based animations (collapsed / collapsed-content) transitioning max-height, opacity, and overflow.
3. In Next.js/Tailwind, we can achieve this smoothly using standard state variables and Tailwind transition utilities (transition-all duration-300 ease-in-out combined with max-h-0 / max-h-[500px] and opacity-0 / opacity-100).

Decisions

• Decision: Use React state + tailwind transitions + localStorage persistence.
• Rationale: Keeps implementation light, reactive, and aligned with standard Next.js client component patterns without introducing heavy external libraries.
• Alternatives Considered:
  • Radix UI Collapsible component (not necessary as simple CSS transitions on max-height do the job with fewer imports).