84 lines
3.3 KiB
Markdown
84 lines
3.3 KiB
Markdown
# AI Capture Ratio Design
|
|
|
|
## Summary
|
|
|
|
Adjust the non-mobile AI capture composer so the text area and attachments panel use a `70 / 30` split instead of equal columns. Within the attachments panel, image previews should stack vertically with one preview per row. Example prompts should form a masonry-style cluster inside the composer footer rather than reading as a flat uniform row.
|
|
|
|
## Goal
|
|
|
|
Give the text composer more room for prompt entry while keeping attachments visible and useful as a clearly secondary surface.
|
|
|
|
## Scope
|
|
|
|
- Update the non-mobile `AIToolbar` layout only.
|
|
- Keep mobile behavior unchanged.
|
|
- Change the attachments preview layout so each image preview occupies its own full-width row.
|
|
- Change the example prompt area so prompts form a masonry-style cluster within their parent.
|
|
- Update tests that lock down the desktop layout contract.
|
|
|
|
## Non-Goals
|
|
|
|
- No changes to the page-level placement of the AI capture section.
|
|
- No changes to mobile stacking behavior.
|
|
- No changes to attachment upload behavior, image removal behavior, or summary behavior.
|
|
- No visual redesign of the prompt footer, buttons, or copy.
|
|
|
|
|
|
## Design
|
|
|
|
### Main Composer Layout
|
|
|
|
For every non-mobile width, the AI capture composer will use a two-column grid with this ratio:
|
|
|
|
- Left column: `70%` equivalent width for the text composer
|
|
- Right column: `30%` equivalent width for the attachments panel
|
|
|
|
Implementation will use a Tailwind arbitrary grid template in the existing `useIsMobile()` branch inside `src/components/ai-toolbar.tsx`.
|
|
|
|
### Attachments Preview Layout
|
|
|
|
When image previews are present, the attachments panel will render them in a vertical list rather than a two-column thumbnail grid.
|
|
|
|
Expected behavior:
|
|
|
|
- Each preview takes the full available width of the attachments panel.
|
|
- Previews stack top-to-bottom with consistent spacing.
|
|
- Existing remove actions stay attached to each preview card.
|
|
- Mobile can share the same one-per-row preview layout without introducing a separate preview treatment.
|
|
|
|
### Example Prompt Layout
|
|
|
|
The example prompt area below the textarea should feel denser and more editorial than a single flat row of chips.
|
|
|
|
Expected behavior:
|
|
|
|
- Prompts remain inside the existing composer footer area.
|
|
- Prompt chips wrap into a masonry-style cluster rather than a rigid single-row strip.
|
|
- Chip widths remain content-driven so the cluster feels packed and varied.
|
|
- The prompt area should still read as secondary to the textarea itself.
|
|
|
|
## Files Affected
|
|
|
|
- `src/components/ai-toolbar.tsx`
|
|
- `tests/ai-toolbar.test.ts`
|
|
|
|
## Testing
|
|
|
|
Add or update tests to verify:
|
|
|
|
- non-mobile layout uses a `70 / 30` grid split
|
|
- desktop/non-mobile preview layout is row-stacked instead of `grid-cols-2`
|
|
- example prompts use a masonry-style clustered layout rather than a flat row contract
|
|
|
|
Then run:
|
|
|
|
- `bun test`
|
|
- `bun run type:check`
|
|
- `bun run lint`
|
|
|
|
## Risks
|
|
|
|
- A narrower attachments panel may make attachment copy feel dense, so only the layout ratio should change unless the implementation reveals a real readability issue.
|
|
- A vertical preview list may increase panel height when many images are attached, but that is preferable to shrinking previews into a dense grid.
|
|
- A masonry prompt cluster can become visually noisy if spacing is too tight, so the implementation should preserve clear separation from the textarea and maintain readable chip padding.
|