refactor: redesign composer quote cards as compact horizontal chips

[hrayleung]

Summary

• Composer quote cards are now compact 160×76pt chips arranged in a horizontal scroll, instead of stacking as full-width rows that pushed the editor down.
• Each chip drops the visible "Replying to " header — that source info moves into the hover tooltip — so the card surface is just the truncated quoted text against a subtle background with a left accent bar.
• Dismiss button shrinks to 16pt with a material backdrop and only fades in on hover, matching the minimal look from the design reference.
• Same treatment applied to both the compact composer and the expanded composer's Quotes section (which previously had a vertical scroll capped at 168pt).

Files

• Sources/UI/QuoteCardViews.swift — new composerQuoteBody layout, QuoteCardLayout constants, smaller hover-revealed dismiss button, tooltip composition.
• Sources/UI/CompactComposerOverlayRows.swift — quoteCardsRow swapped from VStack to horizontal ScrollView + HStack.
• Sources/UI/ExpandedComposerOverlay.swift — Quotes accessory section swapped to the same horizontal layout.

The message-side MessageQuoteCardView is untouched.

Test plan

• Open composer with one quote — card renders compact with left accent and no header text.
• Add multiple quotes — they line up horizontally and overflow scrolls instead of pushing the editor.
• Hover a card — dismiss button fades in; clicking it removes that quote.
• Hover a card — tooltip shows "Replying to {model}" + the full quoted text.
• Repeat in the expanded composer (Quotes section).
• Confirm the in-message MessageQuoteCardView rendering is unchanged.

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added hover effects and tooltips for quote interactions

• UI/UX Improvements

  • Changed quote display from vertical to horizontal scrolling layout
  • Updated quote card styling with improved visual hierarchy
  • Enhanced composer overlay with refined padding and alignment

[coderabbitai]

Warning

Rate limit exceeded

@hrayleung has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 51 minutes and 54 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1fffe1ca-32cf-4bd3-97f1-26b2090cc892

📥 Commits

Reviewing files that changed from the base of the PR and between a0970ee and 4ac3afd.

📒 Files selected for processing (1)

• Sources/UI/QuoteCardViews.swift

📝 Walkthrough

Walkthrough

Quote card components are redesigned with internal hover-state tracking and tooltip generation. The composer variant adopts a compact fixed-size layout with layered styling that conditionally displays the dismiss accessory on hover. Both CompactComposerOverlayRows and ExpandedComposerOverlay switch from vertical to horizontal scrolling to display the new cards.

Changes

Quote Card Redesign for Horizontal Overlay Layout

Layer / File(s)	Summary
Quote Card State & Tooltip Sources/UI/QuoteCardViews.swift	QuoteCardContainer gains @State isHovering property and composerTooltip computed property that builds tooltip text from composer header (with optional model name) and quoted text.
Quote Card Layout Constants Sources/UI/QuoteCardViews.swift	QuoteCardLayout introduces composer-specific sizing constants for fixed width, height, and line limit.
Composer Card Design & Dismiss Button Styling Sources/UI/QuoteCardViews.swift	The .composer variant is redesigned as a fixed-size card with layered background/stroke, hover-driven accessory opacity, and .help(composerTooltip) attachment. QuoteDismissButton icon sizing and hover-dependent opacity/background visuals updated to respond to isHovering state.
Horizontal Scrolling Overlay Views Sources/UI/CompactComposerOverlayRows.swift, Sources/UI/ExpandedComposerOverlay.swift	Quote sections switch from vertical VStack to horizontal HStack inside ScrollView with top alignment and explicit padding. Height constraints removed.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• hrayleung/Jin#309: Both PRs modify the same composer quote card UI (Sources/UI/QuoteCardViews.swift) and related composer overlay rows/expanded overlays—rewriting the composer presentation, dismiss button/hover behavior, and making composer quote views equatable.

Poem

🐰 Cards now scroll sideways, neat,
With hover hints so sweet,
A fixed-size design so tight,
Dismiss buttons glow just right,
Tooltips whisper what to do!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and specifically describes the main change: redesigning composer quote cards as compact horizontal chips, which is the central purpose of the refactor across all modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/elastic-volhard-daed9b

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@Sources/UI/QuoteCardViews.swift`:
- Around line 197-206: The accessory overlay is only visible on pointer hover
(isHovering) so keyboard focus doesn't reveal it; update the overlay to also
show when the dismiss button is focused by adding focus tracking and combining
it with isHovering (e.g., add a Bool binding like isDismissButtonFocused passed
into QuoteDismissButton and expose a `@FocusState` inside QuoteDismissButton to
set that binding when focused), then change the opacity condition from
.opacity(isHovering ? 1 : 0) to .opacity((isHovering || isDismissButtonFocused)
? 1 : 0) so the accessory becomes visible for sighted keyboard users as well.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fc240dfa-5d31-4b70-a92f-f4a286365c5c

📥 Commits

Reviewing files that changed from the base of the PR and between 186af14 and a0970ee.

📒 Files selected for processing (3)

• Sources/UI/CompactComposerOverlayRows.swift
• Sources/UI/ExpandedComposerOverlay.swift
• Sources/UI/QuoteCardViews.swift