old4ever/local-cal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
local-cal/docs/superpowers/specs/2026-04-22-ai-capture-ratio-design.md

3.3 KiB
Raw Permalink Blame History

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.