Skip to content

Collapsible drop#1866

Merged
prxt6529 merged 10 commits intomainfrom
collapsible-drop
Feb 2, 2026
Merged

Collapsible drop#1866
prxt6529 merged 10 commits intomainfrom
collapsible-drop

Conversation

@prxt6529
Copy link
Copy Markdown
Collaborator

@prxt6529 prxt6529 commented Feb 2, 2026

Summary by CodeRabbit

  • New Features

    • Collapsible preview for long notifications with compact collapsed state and smooth expand/collapse animation and auto-scroll on expand
  • Improvements

    • Automatic overflow detection and visual fades for clearer previews
    • Smarter scroll-to-unread behavior to avoid redundant jumps
    • "New messages" / scroll-to-unread control refreshed: smaller label, updated styling, dismissible (including Escape key)
  • Style

    • Unread divider color updated from rose to indigo

Signed-off-by: prxt6529 <prxt@6529.io>
Signed-off-by: prxt6529 <prxt@6529.io>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Feb 2, 2026

Warning

Rate limit exceeded

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

⌛ 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.

📝 Walkthrough

Walkthrough

Adds a new client-side CollapsibleDropPreview component and wires it into NotificationDrop/Drop/WaveDrop for content-only wrapping; also changes unread-divider dismissal/visibility, refines wave scrolling guards, tweaks styles, and adjusts a collected-pages API query parameter.

Changes

Cohort / File(s) Summary
New Collapsible Preview
components/brain/notifications/subcomponents/CollapsibleDropPreview.tsx
New React client component implementing self-measurement (ResizeObserver), overflow detection, collapsed/expanded/normal render modes, animated height transitions, multi-slice preview rendering, and expand/scroll coordination.
Notification wrapper & props
components/brain/notifications/subcomponents/NotificationDrop.tsx
Wraps drop content with CollapsibleDropPreview; expands NotificationDropProps with interaction handlers and activeDrop; updates imports and call sites. Attention: new prop wiring and click callbacks.
Drop / WaveDrop content wrapping
components/waves/drops/Drop.tsx, components/waves/drops/WaveDrop.tsx
Adds wrapContentOnly?: (content)=>React.ReactNode to DropProps/WaveDropProps, forwards wrapper through Drop composition, memoizes Drop context. Attention: new public prop and forwarded usage.
Wave & participation forwarding
components/waves/drops/..., components/waves/drops/ParticipationDrop.tsx
Threads wrapContentOnly through Wave/Participation drop render paths to enable content-only wrappers (used by CollapsibleDropPreview).
Scroll guard / serial scroll
components/waves/drops/wave-drops-all/hooks/useWaveDropsSerialScroll.ts
Adds lastScrolledToSerialRef to avoid redundant smooth-scrolling, adjusts control flow and timing (500→600ms), and refines fetch/scroll branches. Attention: guard semantics and timing.
Unread divider / dismiss handling
components/waves/drops/wave-drops-all/subcomponents/WaveDropsContent.tsx, components/waves/drops/WaveDropsScrollToUnreadButton.tsx, components/drops/view/UnreadDivider.tsx
WaveDropsContent: removes setter usage for unread divider (dismiss handler now no-op). ScrollToUnreadButton: adds userDismissed, Escape dismissal, visibility logic, and styling changes (rose→indigo). UnreadDivider: cosmetic color/padding reorder. Attention: UX/visibility changes.
Markdown renderers (style reorder)
components/drops/view/part/DropPartMarkdown.tsx
Reorders Tailwind class tokens across renderers and adds an unused _node destructured param. Attention: cosmetic changes and potential lint for unused param.
Collected pages URL tweak
components/user/collected/UserPageCollected.tsx
Appends account_for_consolidations=false to transfer fetch URL. Attention: API query param change.

Sequence Diagram(s)

sequenceDiagram
  participant Notif as NotificationDrop
  participant Coll as CollapsibleDropPreview
  participant Meas as ResizeObserver/Measurer
  participant DOM as Browser (scrollIntoView)
  Notif->>Coll: render(children wrapped)
  Coll->>Meas: attach & measure width/height
  Meas-->>Coll: measured sizes (height, overflow)
  alt overflow detected
    User->>Coll: click expand control
    Coll->>Coll: animate height (collapsed→measured)
    Coll->>DOM: scrollIntoView (post-expand)
  end
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

Suggested reviewers

  • simo6529

Poem

🐰 I measured the widths with a twitch of my nose,
Folded the preview where mystery grows,
Click once to unroll the tale held tight,
Fades and slices unfold into light,
Hop—now the drop blooms and off I go! 🥕

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Collapsible drop' directly reflects the main change: a new CollapsibleDropPreview component with related integration throughout the codebase.

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

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch collapsible-drop

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

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

Signed-off-by: prxt6529 <prxt@6529.io>
Signed-off-by: prxt6529 <prxt@6529.io>
Signed-off-by: prxt6529 <prxt@6529.io>
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
components/waves/drops/wave-drops-all/hooks/useWaveDropsSerialScroll.ts (1)

239-256: ⚠️ Potential issue | 🟠 Major

Reset lastScrolledToSerialRef on failed/aborted scrolls to allow retries.
Line 245 clears the ref only on success; if fetch/scroll fails, the guard at Line 269 prevents any retry with the same serialTarget.

Suggested fix
-    try {
+    let didSucceed = false;
+    try {
@@
-      const success = await smoothScrollWithRetries();
+      const success = await smoothScrollWithRetries();
+      didSucceed = success;
@@
-    } finally {
+    } finally {
+      if (!didSucceed || signal.aborted) {
+        lastScrolledToSerialRef.current = null;
+      }
       scrollOperationLockRef.current = false;
       setIsScrolling(false);
     }
🤖 Fix all issues with AI agents
In `@components/brain/notifications/subcomponents/CollapsibleDropPreview.tsx`:
- Around line 116-140: The expand flow and scroll need to respect the user's
prefers-reduced-motion setting: detect reduced motion (e.g. const prefersReduced
= window.matchMedia('(prefers-reduced-motion: reduce)').matches or a
usePrefersReducedMotion hook) in onExpand and the effect that handles
measuredHeight/isExpanded; if prefersReduced is true, setAnimateMaxHeight to
measuredHeight immediately (no requestAnimationFrame choreography) and when
calling expandedRef.current?.scrollIntoView use behavior: 'auto' instead of
'smooth' (or skip scrolling). Also ensure the CSS transition that animates
max-height (used with setAnimateMaxHeight) is disabled when prefersReduced is
true so no max-height transition occurs.
- Around line 185-195: The hidden measurer wrappers currently rely on
aria-hidden but remain keyboard-focusable; update the three offscreen measurer
divs in the CollapsibleDropPreview component (the wrappers that check hostWidth
> 0, the second measured return, and the initial unmeasured state) to include
the inert attribute alongside aria-hidden so the subtree is removed from the tab
order; ensure you add inert to the divs that contain ref={measureRef} and the
surrounding offscreen wrapper and, if supporting older browsers, ensure the
wicg-inert polyfill is loaded at app startup.

In `@components/waves/drops/wave-drops-all/subcomponents/WaveDropsContent.tsx`:
- Around line 79-82: The empty handleDismissUnread breaks persisting unread
clears; replace the no-op with logic that calls the unread-clear API returned by
useUnreadDivider (e.g., the setter or onDismissUnread callback provided by that
hook) or, if an onDismissUnread prop exists, invoke onDismissUnread so the
unreadDividerSerialNo is cleared/persisted and the dismiss state survives
remounts; update the handler in WaveDropsContent (handleDismissUnread) to call
the appropriate function from useUnreadDivider/onDismissUnread instead of doing
nothing.

In `@components/waves/drops/WaveDrop.tsx`:
- Around line 372-375: The conditional in WaveDrop.tsx accesses
previousDrop.author.handle without ensuring previousDrop exists, which can crash
on the first reply; update the expression that compares drop.author.handle to
previousDrop.author.handle to first guard previousDrop (e.g., check previousDrop
truthiness or use optional chaining like previousDrop?.author?.handle) or
reorder the conditions so previousDrop is verified before accessing its author
in the compound condition involving drop.reply_to, previousDrop, and
dropViewDropId.

In `@components/waves/drops/WaveDropsScrollToUnreadButton.tsx`:
- Around line 130-146: The Escape key handler can remain active after the user
dismisses the button because isButtonVisible currently ignores userDismissed;
update the visibility logic and effect dependencies so the listener is removed
when dismissed: include !userDismissed in the isButtonVisible computation (where
unreadPosition, unreadDividerSerialNo, hasSeenDivider are checked) and add
userDismissed to the useEffect dependency array (alongside onDismiss) so the
effect re-runs and cleans up the keydown listener when userDismissed changes.

Comment thread components/brain/notifications/subcomponents/CollapsibleDropPreview.tsx Outdated
Comment thread components/waves/drops/wave-drops-all/subcomponents/WaveDropsContent.tsx Outdated
Comment thread components/waves/drops/WaveDrop.tsx
Comment thread components/waves/drops/WaveDropsScrollToUnreadButton.tsx Outdated
Signed-off-by: prxt6529 <prxt@6529.io>
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@components/brain/notifications/subcomponents/CollapsibleDropPreview.tsx`:
- Around line 170-176: The current early return removes the offscreen measurer
once hasMeasured && !isOverflowing, preventing future re-measure when children
grow; keep the measurer mounted in that branch (render the visible host wrapper
using hostRef and also render the offscreen measurer element/component
hidden/offscreen but still in the tree) so measuredHeight and isOverflowing can
be updated when async content changes; ensure the same measurer ref (e.g.,
measurerRef) and measurement logic that updates measuredHeight/isOverflowing
remain active while leaving the visible children unchanged.

Signed-off-by: prxt6529 <prxt@6529.io>
Signed-off-by: prxt6529 <prxt@6529.io>
Signed-off-by: prxt6529 <prxt@6529.io>
Signed-off-by: prxt6529 <prxt@6529.io>
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented Feb 2, 2026

@prxt6529 prxt6529 merged commit 07c6d44 into main Feb 2, 2026
7 checks passed
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.

2 participants