refactor(web): split ThreadChip into composable primitives#271
Merged
Conversation
Replace BaseThreadChip/ThreadChip pair with ThreadChip, ThreadSummaryCard, and ThreadSummaryHoverCard primitives plus a ThreadChipWithSummary convenience. Drops the "unstyled" variant in favor of inline rendering composed with the new hover card. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThreadChip is refactored from a hover-card-backed component into a plain button chip; hover and summary UI moved into ThreadSummaryCard/ThreadSummaryHoverCard/ThreadChipWithSummary. Callers across markdown, signals, and thread-toolbar were updated to the new APIs. ChangesThreadChip Refactor to Modular Summary Components
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/web/src/components/threads/thread-toolbar/support-intelligence.tsx (1)
670-778: ⚡ Quick winConsider reusing ThreadSummaryCard to reduce duplication.
Similar to quick-actions.tsx, this hover card content duplicates the thread summary layout from
ThreadSummaryCard. Consider refactoring to reuse the shared component and reduce maintenance burden.🤖 Prompt for 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. In `@apps/web/src/components/threads/thread-toolbar/support-intelligence.tsx` around lines 670 - 778, This hover card duplicates the thread summary UI; replace the inline markup with the existing ThreadSummaryCard component to avoid duplication: remove the manual layout that reads duplicateSuggestion.thread and render <ThreadSummaryCard thread={duplicateSuggestion.thread} /> (or pass the specific props ThreadSummaryCard expects) from support-intelligence.tsx, making sure to surface the same fields (name, author, createdAt, status, priority, assignedUserId/assignedUser) and any small-variant/display props used in quick-actions.tsx so status/priority/assignee and avatar fallback behavior remain identical.apps/web/src/components/threads/thread-toolbar/quick-actions.tsx (1)
540-653: ⚡ Quick winConsider reusing ThreadSummaryCard to reduce duplication.
The hover card content (lines 540-653) duplicates much of the layout logic from
ThreadSummaryCard. While the custom layout with action buttons may justify this, consider extracting the shared thread details section (name, author, date, status, priority, assignee) intoThreadSummaryCardand rendering it here to reduce maintenance burden.🤖 Prompt for 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. In `@apps/web/src/components/threads/thread-toolbar/quick-actions.tsx` around lines 540 - 653, The hover-card duplicates the thread-detail UI already implemented in ThreadSummaryCard; extract the shared section (name, author/avatar, createdAt formatting, status via StatusIndicator/StatusText, priority via PriorityIndicator/PriorityText, and assignee/avatar) into a reusable ThreadSummaryCard prop API that accepts the thread object (e.g., thread: duplicateSuggestion.thread) and flags to hide or show action buttons; then replace the duplicated JSX block in quick-actions.tsx with a call to ThreadSummaryCard (passing buildThreadParam where needed and preserving formatRelativeTime behavior) so the hover card composes the card and only adds its custom action buttons.
🤖 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 `@apps/web/src/components/chips.tsx`:
- Around line 135-143: The avatar source is using the wrong property: change
references of thread.assignedUser?.image to the nested user image
thread.assignedUser?.user?.image (and similarly use
thread.assignedUser?.user?.name for fallback/display if appropriate) in the
Avatar and span rendering inside the conditional block that checks
thread.assignedUserId and thread.assignedUser?.name; update the Avatar prop src
and any fallback/name usage so it mirrors how the author avatar is retrieved
(i.e., use the nested user relation).
---
Nitpick comments:
In `@apps/web/src/components/threads/thread-toolbar/quick-actions.tsx`:
- Around line 540-653: The hover-card duplicates the thread-detail UI already
implemented in ThreadSummaryCard; extract the shared section (name,
author/avatar, createdAt formatting, status via StatusIndicator/StatusText,
priority via PriorityIndicator/PriorityText, and assignee/avatar) into a
reusable ThreadSummaryCard prop API that accepts the thread object (e.g.,
thread: duplicateSuggestion.thread) and flags to hide or show action buttons;
then replace the duplicated JSX block in quick-actions.tsx with a call to
ThreadSummaryCard (passing buildThreadParam where needed and preserving
formatRelativeTime behavior) so the hover card composes the card and only adds
its custom action buttons.
In `@apps/web/src/components/threads/thread-toolbar/support-intelligence.tsx`:
- Around line 670-778: This hover card duplicates the thread summary UI; replace
the inline markup with the existing ThreadSummaryCard component to avoid
duplication: remove the manual layout that reads duplicateSuggestion.thread and
render <ThreadSummaryCard thread={duplicateSuggestion.thread} /> (or pass the
specific props ThreadSummaryCard expects) from support-intelligence.tsx, making
sure to surface the same fields (name, author, createdAt, status, priority,
assignedUserId/assignedUser) and any small-variant/display props used in
quick-actions.tsx so status/priority/assignee and avatar fallback behavior
remain identical.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: e0731fe2-51d6-48ae-8838-e829772641cf
📒 Files selected for processing (6)
apps/web/src/components/chips.tsxapps/web/src/components/markdown/rich-markdown.tsxapps/web/src/components/signals/action-row/rows.tsxapps/web/src/components/threads/thread-toolbar/quick-actions.tsxapps/web/src/components/threads/thread-toolbar/support-intelligence.tsxapps/web/src/components/threads/updates.tsx
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
No issues found across 6 files
Confidence score: 5/5
- Automated review surfaced no issues in the provided summaries.
- No files require special attention.
Auto-approved: This is a well-structured refactor that splits ThreadChip into composable primitives (ThreadChip, ThreadSummaryCard, ThreadSummaryHoverCard) without changing behavior, and the AI review found no issues.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
There was a problem hiding this comment.
1 issue found across 1 file (changes from recent commits).
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="apps/web/src/components/chips.tsx">
<violation number="1" location="apps/web/src/components/chips.tsx:140">
P2: The assignee row now shows the author's avatar instead of the assignee's avatar, causing incorrect user identity in the summary card.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
BaseThreadChip/ThreadChippair with three primitives:ThreadChip(chip-only),ThreadSummaryCard(panel content),ThreadSummaryHoverCard(hover-card wrapper around any trigger element)ThreadChipWithSummaryas a thin convenience composing the aboveunstyledchip variant; the signals action rows now render their inline thread reference directly (avatar + name +#shortIdin aLink) and wrap it withThreadSummaryHoverCardfor the summary previewduplicateThreadinclude inthreads/updates.tsxso the new summary card can render the assignee avatarTest plan
bun run --filter web typecheck🤖 Generated with Claude Code
Summary by cubic
Split the thread mention UI into three composable primitives—
ThreadChip,ThreadSummaryCard, andThreadSummaryHoverCard—to make hover previews reusable across the app. Also fixed the assignee avatar in the summary card to use the author image.Refactors
ThreadChip(chip-only),ThreadSummaryCard(panel content),ThreadSummaryHoverCard(wrap any trigger), andThreadChipWithSummary(convenience).ThreadChipWithSummary; signals action rows now inline render (avatar + name +#shortId) wrapped inThreadSummaryHoverCard.ThreadChipfor chip-only use.assignedUser.userso the summary can show the assignee details.Migration
ThreadChipfor chip-only rendering.ThreadSummaryHoverCardto add a summary preview.ThreadChipWithSummarywhen you want a chip with a preview.variant="unstyled"usage and inline the content where needed.Written for commit d2e2b96. Summary will update on new commits.
Summary by CodeRabbit
New Features
Refactor