16 lines
1.1 KiB
Markdown
16 lines
1.1 KiB
Markdown
# 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).
|