notifications pinned at bottom

[simo6529]

Summary by CodeRabbit

• Bug Fixes

  • Notifications pane now reliably stays pinned to the bottom when new items appear, not just on window resize.
  • Improved compatibility across browsers/environments by handling cases where certain observers aren’t available.
  • Eliminates rare errors and reduces jank by properly cleaning up observers and animation frames.

• Refactor

  • Adopted environment-aware observation to trigger bottom-sticking updates with robust initialization and cleanup, improving stability without changing existing behavior.

[coderabbitai]

Walkthrough

Introduces environment-aware observation for scroll “stick to bottom” behavior in Notifications.tsx, using ResizeObserver if available, otherwise MutationObserver. Adds scheduleStickToBottom with requestAnimationFrame, sets up observers with guards, and implements thorough cleanup for observers and pending animation frames.

Changes

Cohort / File(s)	Summary
Observer fallback and cleanup components/brain/notifications/Notifications.tsx	Replace unconditional ResizeObserver with feature-detected ResizeObserver/MutationObserver. Add scheduleStickToBottom via rAF. Observe size/attribute changes to trigger bottom-sticking. Implement disconnect and rAF cancellation in cleanup. Preserve existing scroll/prepend logic and initial pinned-to-bottom behavior.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Component as Notifications.tsx
  participant Browser as Env (ResizeObserver/MutationObserver)
  participant RAF as requestAnimationFrame
  participant Scroll as ScrollContainer

  User->>Component: Mount
  Component->>Browser: Feature-detect observers
  alt ResizeObserver available
    Component->>Browser: new ResizeObserver(callback)
    Browser-->>Component: size change callback
  else MutationObserver available
    Component->>Browser: new MutationObserver(callback)
    Browser-->>Component: mutations callback
  else No observers
    Note over Component: No automatic triggers
  end

  Component->>RAF: scheduleStickToBottom()
  RAF-->>Component: frame callback
  Component->>Scroll: if pinned, scrollToBottom()

  User->>Component: Unmount
  Component->>Browser: disconnect()
  Component->>RAF: cancelAnimationFrame()

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Notifications black out on scroll #1511: Adjusts the same Notifications scroll/pinning logic and observer handling, likely overlapping behavior and cleanup patterns.

Suggested reviewers

• ragnep

Poem

I twitch my ears at bottom’s brink,
With Resize or Mutation—blink!
I schedule hops on rAF time,
Then tidy trails, so none unwind.
Scrolls stick snug where messages drop—
A rabbit’s work: observe, then hop. 🐇✨

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ 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 succinctly conveys the primary change that notifications will now stick to the bottom of the view.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch notifications-first-load

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7525e4a and ebe4042.

📒 Files selected for processing (1)

• components/brain/notifications/Notifications.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx}: Do not include any comments in the code
Use react-query for data fetching
Always add readonly before props

Follow existing code style and naming conventions

Files:

• components/brain/notifications/Notifications.tsx

**/*.tsx

📄 CodeRabbit inference engine (.cursorrules)

**/*.tsx: Use FontAwesome for icons
Use TailwindCSS for styling

Use React functional components with hooks for UI components

Files:

• components/brain/notifications/Notifications.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (1)

components/brain/notifications/Notifications.tsx (1)

207-260: Solid observer fallback and cleanup

Nice job adding feature detection plus matching cleanup for both observer types, and queuing the scroll update via requestAnimationFrame. This keeps the “pinned to bottom” behavior reliable across environments while avoiding leaks.

---

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

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud