feat(content-sidebar): focused state for threaded-replies in activity-feed-v2#4650
feat(content-sidebar): focused state for threaded-replies in activity-feed-v2#4650mrscobbler wants to merge 1 commit into
Conversation
…-feed-v2 When a comment or annotation is deep-linked via activeFeedEntryId, paint a focused chrome on the matching thread by recoloring the vendor card's existing border + background. The wrapper around ThreadedAnnotation is display: contents by default so layout is untouched for unfocused rows and the vendor's gap/padding contract is preserved. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
WalkthroughActivityFeedV2 now forwards ChangesActivity feed focus state
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 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.
🧹 Nitpick comments (1)
src/elements/content-sidebar/activity-feed-v2/FeedItemRow.tsx (1)
155-155: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
keyon the single root wrapper<div>is redundant.React only uses
keyto reconcile siblings in a list. Since this<div>is the sole element returned byFeedItemRow, and the list key is already applied whereFeedItemRowis rendered (ActivityFeedV2.tsxLine 363), thekey={item.id}here has no effect. Harmless, but can be dropped for clarity.Also applies to: 220-220
🤖 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 `@src/elements/content-sidebar/activity-feed-v2/FeedItemRow.tsx` at line 155, The single root wrapper div in FeedItemRow has a redundant key prop, since React only uses keys among sibling list items and the parent render in ActivityFeedV2 already provides the list key. Remove key={item.id} from the root div in FeedItemRow (and the similar duplicate occurrence in the same component) while keeping the existing className and structure unchanged.
🤖 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.
Nitpick comments:
In `@src/elements/content-sidebar/activity-feed-v2/FeedItemRow.tsx`:
- Line 155: The single root wrapper div in FeedItemRow has a redundant key prop,
since React only uses keys among sibling list items and the parent render in
ActivityFeedV2 already provides the list key. Remove key={item.id} from the root
div in FeedItemRow (and the similar duplicate occurrence in the same component)
while keeping the existing className and structure unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 07e8e2aa-1785-4faf-afb0-08f7e8da4ce2
📒 Files selected for processing (3)
src/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.scsssrc/elements/content-sidebar/activity-feed-v2/ActivityFeedV2.tsxsrc/elements/content-sidebar/activity-feed-v2/FeedItemRow.tsx
| resolvedBy={item.resolvedBy} | ||
| userSelectorProps={userSelectorProps} | ||
| /> | ||
| <div key={item.id} className={threadRowClassName}> |
There was a problem hiding this comment.
Do we have need any tests for these changes to make sure nothing breaks adding a non-semantic div around the activity item?
| : item.annotationTarget; | ||
| return ( | ||
| <ActivityFeed.List.ThreadedAnnotation | ||
| key={item.id} |
There was a problem hiding this comment.
This doesn't affect rendering in any way downstream?
| display: contents; | ||
|
|
||
| &.is-focused [class*='threadedAnnotations'] { | ||
| border-color: $bdl-box-blue-80; |
There was a problem hiding this comment.
we should use bp tokens. for $bdl-box-blue-80, it should be "--bp-box-blue-80"
|
|
||
| &.is-focused [class*='threadedAnnotations'] { | ||
| border-color: $bdl-box-blue-80; | ||
| background-color: rgba($bdl-box-blue, 0.04); |
There was a problem hiding this comment.
we should use blueprint tokens
| userSelectorProps, | ||
| }: FeedItemRowProps) => { | ||
| const threadRowClassName = classNames('bcs-NewActivityFeed-threadRow', { | ||
| 'is-focused': item.id === activeFeedEntryId, |
There was a problem hiding this comment.
would this be always active? when would the focus turn off? is the logic inside the consumer of buie then?
3 participants
Summary
activeFeedEntryIdmatches the row id.@box/threaded-annotationsor@box/activity-feed— overrides the vendor card's border + background only when the wrapper has.is-focused.display: contentsby default so unfocused layout is byte-identical to today.Test plan
<li data-activity-id>is still emitted (scroll-to-id still works) — key now lives on the wrapper divFollow-up: scroll-block tuning (
{ block: 'center' }) for deep-links depends on an@box/activity-feedAPI change tracked separately.🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Bug Fixes