Skip to content

refactor(ui): converge attachment thumbnail + file card onto maka radius/surface tokens - #670

Merged
Astro-Han merged 1 commit into
mainfrom
refactor/546-attachment-visual-converge
Jul 9, 2026
Merged

refactor(ui): converge attachment thumbnail + file card onto maka radius/surface tokens#670
Astro-Han merged 1 commit into
mainfrom
refactor/546-attachment-visual-converge

Conversation

@Astro-Han

Copy link
Copy Markdown
Contributor

Summary

Converge the two attachment surfaces (image thumbnail in chat-view, file card in composer + sent turns) onto Maka's radius-token + surface-alpha system. They were the last chat-area holdouts still styled with raw shadcn semantic aliases (bg-muted, border-border) and the deprecated rounded-lg. Tail of #546 PR5 (chat-message polish).

Why

Refs #546

Every other chat surface uses the --foreground-alpha-* surface fills and --radius-* tokens; these two lagged behind. The file card also had a concentric-radius defect: inner icon tile and remove button shared the outer card's 8px radius instead of stepping down a tier.

Scope

Changed:

  • Thumbnail placeholder (packages/ui/src/chat-view.tsx): bg-mutedbg-[var(--foreground-alpha-6)] (matches the file card's own placeholder fill), border-borderborder-[var(--border)], and drop the /60 magic alpha stacked on the 50%-ink --muted-foreground (it dipped below the contrast floor).
  • Radius (chat-view.tsx + packages/ui/src/attachment-file-card.tsx): retire the deprecated rounded-lg alias → rounded-md (surface, 8px) on thumbnail + lightbox; file card's inner icon tile and remove button → rounded-sm (control, 6px) so the nested corners read concentric.
  • Contract (apps/desktop/src/main/__tests__/attachment-frontend-contract.test.ts): a governance (#546) block pins the converged form so the surfaces cannot drift back to shadcn aliases / deprecated radius.

Not included: image-attachment fixture + screenshot pipeline coverage (the pending/lightbox states need a seeded fixture — no runtime behavior changes here to warrant it).

Verification

  • npm run -w @maka/desktop test2264 pass / 0 fail (radius-governance, foreground-alpha, chat-cascade contracts, and check-console/a11y/copy all green).
  • npm run -w @maka/desktop build:main + full @maka/* builds clean (tsc no type errors).
  • New governance assertions execute and pass; the existing renderToStaticMarkup(ChatView) render test still passes.

User-facing impact

Effectively none visible. Confirmed by static token math (values are fixed oklch alphas / px, not render-dependent):

  • File card inner corners 8px → 6px (rounded-mdrounded-sm): the only persistent visible change — a 2px tighter radius on the icon tile + remove button, only when a non-image attachment (pdf/doc/…) is present. This is the intended concentric-radius fix.
  • Image thumbnail radius unchanged (rounded-lg and rounded-md both resolve to --radius-surface = 8px; alias hygiene only).
  • Placeholder fill 5% → 6% foreground alpha (1% delta, not perceptible) and loading-spinner tint (transient) are the only other deltas.

No docs / changelog / migration impact.

Reviewer notes

The rounded-lgrounded-md swaps are behavior-neutral by design — styles.css aliases both to --radius-surface. The real geometry change is rounded-mdrounded-sm on the file card's nested elements only.

Checklist

  • Scope matches the PR title and excludes unrelated changes
  • Verification lists commands/results
  • User-facing impact noted (2px file-card inner radius; rest imperceptible/transient)
  • Risk/review focus called out (only real geometry change is the concentric-radius step-down)
  • UI changes: no screenshot — the sole persistent delta is a computed 2px radius on the file card's inner tile/button, derived from fixed radius tokens (8px→6px) and pinned by the computed-style contract; not render-environment dependent

…ius/surface tokens (#546)

The attachment surfaces were the last chat-area holdouts still styled with
raw shadcn semantic aliases and the deprecated `rounded-lg`, off the
surface-alpha + radius-token system every other chat surface uses (the
tail of #546 PR5).

- Thumbnail placeholder (chat-view): `bg-muted` -> `--foreground-alpha-6`
  (matches the file card's own placeholder fill), `border-border` ->
  `border-[var(--border)]`, and drop the `/60` magic alpha stacked on the
  50%-ink `--muted-foreground` (it dipped below the contrast floor).
- Radius: retire the deprecated `rounded-lg` alias -> `rounded-md`
  (surface, 8px) on thumbnail + lightbox; the file card's inner icon tile
  and remove button move to `rounded-sm` (control, 6px) so the nested
  corners read concentric instead of matching the outer card radius.
- Pin the converged form in attachment-frontend-contract.test.ts so the
  surfaces cannot drift back to shadcn aliases / deprecated radius.

No behavior change. Full desktop suite green (2264 tests); radius
governance + foreground-alpha contracts unaffected.
@Astro-Han
Astro-Han merged commit ba235bf into main Jul 9, 2026
5 of 6 checks passed
@Astro-Han
Astro-Han deleted the refactor/546-attachment-visual-converge branch July 9, 2026 12:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant