Top Rep categories on profile hover-card#1625
Conversation
WalkthroughRefactors notification items to render a new NotificationHeader component, centralizes wave navigation via a new useWaveNavigation hook, adds UserProfileTooltipTopRep, introduces size support for UserStatsRow, tweaks small UI classes, and updates tests/mocks. No public API removals; two new components and one new hook added. Changes
Sequence Diagram(s)sequenceDiagram
participant Notif as Notification component
participant Header as NotificationHeader
participant Hook as useWaveNavigation
participant Router as NextRouter
Notif->>Header: render(author, children, actions)
Header-->>Notif: user invokes action (reply / quote / follow)
Notif->>Hook: call navigateToWave(waveId, serialNo, isDirectMessage)
Hook->>Router: router.push(getWaveRoute(..., isDirectMessage, isApp))
Router-->>Hook: route change completes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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)
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: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
components/brain/notifications/identity-subscribed/NotificationIdentitySubscribed.tsx (1)
20-31: Replace<img>with Next.js<Image>component.The avatar rendering uses an HTML
<img>tag instead of the Next.js<Image>component, violating coding guidelines.As per coding guidelines:
+import Image from "next/image"; + - {notification.related_identity.pfp ? ( - <img - src={getScaledImageUri( - notification.related_identity.pfp, - ImageScale.W_AUTO_H_50 - )} - alt="#" - className="tw-flex-shrink-0 tw-object-contain tw-h-full tw-w-full tw-rounded-md tw-bg-iron-800 tw-ring-1 tw-ring-iron-700" - /> - ) : ( - <div className="tw-flex-shrink-0 tw-object-contain tw-h-full tw-w-full tw-rounded-md tw-bg-iron-800 tw-ring-1 tw-ring-iron-700" /> - )} + {notification.related_identity.pfp ? ( + <Image + src={getScaledImageUri( + notification.related_identity.pfp, + ImageScale.W_AUTO_H_50 + )} + alt={notification.related_identity.handle ?? "User avatar"} + width={28} + height={28} + className="tw-flex-shrink-0 tw-object-contain tw-rounded-md tw-bg-iron-800 tw-ring-1 tw-ring-iron-700" + /> + ) : ( + <div className="tw-flex-shrink-0 tw-h-7 tw-w-7 tw-rounded-md tw-bg-iron-800 tw-ring-1 tw-ring-iron-700" /> + )}
🧹 Nitpick comments (1)
components/brain/notifications/drop-quoted/NotificationDropQuoted.tsx (1)
65-131: Consider extracting avatar rendering into a reusable component.The avatar rendering pattern (lines 69-81) is duplicated across multiple notification components in this PR (NotificationDropQuoted, NotificationDropReacted, NotificationDropReplied, NotificationIdentitySubscribed). Consider extracting this into a shared
NotificationAvatarcomponent to reduce duplication and improve maintainability.Example structure:
interface NotificationAvatarProps { readonly pfp: string | null; readonly handle: string | null; } function NotificationAvatar({ pfp, handle }: NotificationAvatarProps) { return ( <div className="tw-h-7 tw-w-7 tw-flex-shrink-0"> {pfp ? ( <Image src={getScaledImageUri(pfp, ImageScale.W_AUTO_H_50)} alt={handle ?? "User avatar"} width={28} height={28} className="tw-flex-shrink-0 tw-object-contain tw-rounded-md tw-bg-iron-800 tw-ring-1 tw-ring-iron-700" /> ) : ( <div className="tw-flex-shrink-0 tw-h-7 tw-w-7 tw-rounded-md tw-bg-iron-800 tw-ring-1 tw-ring-iron-700" /> )} </div> ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (11)
components/brain/notifications/drop-quoted/NotificationDropQuoted.tsx(2 hunks)components/brain/notifications/drop-reacted/NotificationDropReacted.tsx(1 hunks)components/brain/notifications/drop-replied/NotificationDropReplied.tsx(2 hunks)components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsx(2 hunks)components/brain/notifications/identity-subscribed/NotificationIdentitySubscribed.tsx(3 hunks)components/brain/notifications/wave-created/NotificationWaveCreated.tsx(3 hunks)components/header/header-search/HeaderSearchModal.tsx(1 hunks)components/user/utils/UserCICAndLevel.tsx(1 hunks)components/user/utils/UserFollowBtn.tsx(1 hunks)components/user/utils/profile/UserProfileTooltip.tsx(4 hunks)components/user/utils/profile/UserProfileTooltipTopRep.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Do not include any comments in the code; it should be self-explanatory
Write correct, up-to-date, bug-free, fully componentized, secure, and efficient code
Include all required imports and ensure proper naming of key components
Use NextJS features that match the current version
**/*.{ts,tsx,js,jsx}: Enforce ≥ 80% line coverage for files changed sincemainvianpm run test
All code must pass ESLint (Next's Core Web Vitals + React Hooks rules) vianpm run lint
Use<Link>from Next.js for internal navigation instead of<a>tags or HTML anchors
Use<Image>fromnext/imageinstead of HTML<img>elements
Files:
components/brain/notifications/wave-created/NotificationWaveCreated.tsxcomponents/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsxcomponents/user/utils/UserFollowBtn.tsxcomponents/user/utils/profile/UserProfileTooltipTopRep.tsxcomponents/user/utils/profile/UserProfileTooltip.tsxcomponents/header/header-search/HeaderSearchModal.tsxcomponents/user/utils/UserCICAndLevel.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsxcomponents/brain/notifications/drop-replied/NotificationDropReplied.tsxcomponents/brain/notifications/identity-subscribed/NotificationIdentitySubscribed.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,jsx}: Use FontAwesome for icons in React components
Use TailwindCSS for styling in React components
Use react-query for data fetching
Always addreadonlybefore props in React components
Files:
components/brain/notifications/wave-created/NotificationWaveCreated.tsxcomponents/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsxcomponents/user/utils/UserFollowBtn.tsxcomponents/user/utils/profile/UserProfileTooltipTopRep.tsxcomponents/user/utils/profile/UserProfileTooltip.tsxcomponents/header/header-search/HeaderSearchModal.tsxcomponents/user/utils/UserCICAndLevel.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsxcomponents/brain/notifications/drop-replied/NotificationDropReplied.tsxcomponents/brain/notifications/identity-subscribed/NotificationIdentitySubscribed.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: All code must pass TypeScript type checking vianpm run type-check(tsc --noEmit)
Use'use cache'directive at the top of Server Components or functions to explicitly opt-in to caching in Next.js 16
Files:
components/brain/notifications/wave-created/NotificationWaveCreated.tsxcomponents/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsxcomponents/user/utils/UserFollowBtn.tsxcomponents/user/utils/profile/UserProfileTooltipTopRep.tsxcomponents/user/utils/profile/UserProfileTooltip.tsxcomponents/header/header-search/HeaderSearchModal.tsxcomponents/user/utils/UserCICAndLevel.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsxcomponents/brain/notifications/drop-replied/NotificationDropReplied.tsxcomponents/brain/notifications/identity-subscribed/NotificationIdentitySubscribed.tsx
🧠 Learnings (2)
📚 Learning: 2025-11-25T08:37:14.950Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T08:37:14.950Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use `<Link>` from Next.js for internal navigation instead of `<a>` tags or HTML anchors
Applied to files:
components/brain/notifications/drop-quoted/NotificationDropQuoted.tsx
📚 Learning: 2025-11-25T08:37:14.950Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T08:37:14.950Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use `<Image>` from `next/image` instead of HTML `<img>` elements
Applied to files:
components/brain/notifications/drop-quoted/NotificationDropQuoted.tsx
🧬 Code graph analysis (8)
components/brain/notifications/wave-created/NotificationWaveCreated.tsx (2)
helpers/image.helpers.ts (1)
getScaledImageUri(17-45)components/utils/tooltip/UserProfileTooltipWrapper.tsx (1)
UserProfileTooltipWrapper(12-34)
components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsx (1)
helpers/image.helpers.ts (1)
getScaledImageUri(17-45)
components/user/utils/profile/UserProfileTooltipTopRep.tsx (2)
entities/IProfile.ts (1)
ApiProfileRepRatesState(327-333)helpers/Helpers.ts (1)
formatNumberWithCommas(102-119)
components/user/utils/profile/UserProfileTooltip.tsx (4)
entities/IProfile.ts (1)
ApiProfileRepRatesState(327-333)components/user/utils/UserCICAndLevel.tsx (1)
UserCICAndLevel(11-45)helpers/Helpers.ts (1)
cicToType(485-503)components/user/utils/profile/UserProfileTooltipTopRep.tsx (1)
UserProfileTooltipTopRep(7-52)
components/brain/notifications/drop-reacted/NotificationDropReacted.tsx (1)
helpers/image.helpers.ts (1)
getScaledImageUri(17-45)
components/brain/notifications/drop-quoted/NotificationDropQuoted.tsx (5)
helpers/image.helpers.ts (1)
getScaledImageUri(17-45)components/utils/tooltip/UserProfileTooltipWrapper.tsx (1)
UserProfileTooltipWrapper(12-34)helpers/Helpers.ts (1)
getTimeAgoShort(563-589)components/waves/drops/Drop.tsx (1)
Drop(41-119)helpers/waves/drop.helpers.ts (1)
Drop(14-14)
components/brain/notifications/drop-replied/NotificationDropReplied.tsx (1)
helpers/image.helpers.ts (1)
getScaledImageUri(17-45)
components/brain/notifications/identity-subscribed/NotificationIdentitySubscribed.tsx (1)
components/utils/tooltip/UserProfileTooltipWrapper.tsx (1)
UserProfileTooltipWrapper(12-34)
⏰ 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 (10)
components/header/header-search/HeaderSearchModal.tsx (1)
933-933: LGTM! Minor styling improvement.The addition of
tw-border-solidmakes the border style explicit and aligns with best practices for clarity.components/user/utils/UserFollowBtn.tsx (1)
30-30: LGTM! Button sizing adjustment aligns with layout updates.The increased padding for the SMALL button size is consistent with the updated notification header layouts where follow buttons are now inline with author information.
components/user/utils/UserCICAndLevel.tsx (1)
31-31: LGTM! Positioning adjustment improves visual alignment.The updated vertical positioning for the MEDIUM size CIC indicator improves alignment with the level badge.
components/user/utils/profile/UserProfileTooltipTopRep.tsx (1)
40-46: No changes needed—the color classes are properly defined.The custom color classes
tw-text-greenandtw-text-redare correctly defined in your Tailwind configuration as root-level colors (green: "#3CCB7F"andred: "#F97066"), which generates the utilitiestw-text-greenandtw-text-redautomatically. This pattern is used consistently throughout the codebase and is valid Tailwind syntax.components/brain/notifications/wave-created/NotificationWaveCreated.tsx (1)
46-99: Layout restructure looks good.The refactored layout successfully consolidates the follow buttons into a right-aligned container and integrates the UserProfileTooltipWrapper for enhanced user experience. The responsive breakpoints and spacing are well-structured.
components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsx (1)
71-112: Layout restructure aligns well with PR objectives.The header refactoring successfully moves the follow button into the main content flow with proper responsive behavior. The integration of UserProfileTooltipWrapper enhances the user experience.
components/user/utils/profile/UserProfileTooltip.tsx (4)
38-48: New reputation ratings query implemented correctly.The repRates query follows the established patterns with proper query key structure, error handling via react-query, and appropriate enabling conditions. The endpoint format is consistent with the API structure.
93-124: Layout restructure successfully integrates new components.The refactored layout effectively incorporates UserCICAndLevel and repositions the follow button while maintaining proper responsive behavior and spacing. The consolidation of CIC and level into a single component improves maintainability.
126-126: Verify the bio truncation reduction is intentional.The line-clamp has been reduced from 6 lines to 2 lines, which significantly limits the bio text displayed. This might truncate important user information in the tooltip.
Please confirm whether reducing the bio display from 6 lines to 2 lines aligns with the design requirements for the tooltip. This substantial reduction may negatively impact users with longer bio descriptions.
162-162: Top REP component integration looks good.The UserProfileTooltipTopRep component is properly integrated at the bottom of the tooltip, receiving the repRates data as expected. This aligns with the PR objective of displaying top reputation categories on the profile hover-card.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsx (1)
63-105: Consistent refactoring using NotificationHeader.The refactoring properly delegates avatar rendering to
NotificationHeaderand maintains the Drop content below. This resolves the previous review comment about<img>usage since avatar rendering is now centralized.components/brain/notifications/drop-reacted/NotificationDropReacted.tsx (1)
164-198: Clean refactoring with NotificationHeader.The restructuring properly uses
NotificationHeaderwithactionElementas children and delegates avatar rendering to the shared component. The Drop props and handlers are correctly maintained.
🧹 Nitpick comments (3)
components/brain/notifications/drop-reacted/NotificationDropReacted.tsx (2)
4-4: Unused import:Link.The
Linkimport appears to be unused after the refactoring toNotificationHeader. Consider removing it.-import Link from "next/link";
94-100: Consider using Next.js<Image>for custom emoji.While less critical than avatar images, the coding guidelines specify using
<Image>fromnext/imageinstead of HTML<img>elements. Custom emojis could benefit from Next.js image optimization.+import Image from "next/image";emojiNode = ( - <img + <Image src={custom.skins[0].src} alt={rawId} + width={20} + height={20} className="tw-max-w-5 tw-max-h-5 tw-object-contain" /> );Note: Ensure the emoji CDN domain is configured in
next.config.jsremotePatterns.components/brain/notifications/wave-created/NotificationWaveCreated.tsx (1)
64-68: Consider handling the loading state for wave name.When
waveis loading, theLinkrenders with a validhrefbut empty text content. This could briefly show a clickable but empty link.You could conditionally render the link only when the wave name is available:
- <Link - href={invitationHref} - className="tw-text-sm tw-font-medium tw-no-underline tw-text-primary-400 hover:tw-text-primary-300"> - {wave?.name} - </Link> + {wave?.name && ( + <Link + href={invitationHref} + className="tw-text-sm tw-font-medium tw-no-underline tw-text-primary-400 hover:tw-text-primary-300"> + {wave.name} + </Link> + )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
components/brain/notifications/drop-quoted/NotificationDropQuoted.tsx(3 hunks)components/brain/notifications/drop-reacted/NotificationDropReacted.tsx(3 hunks)components/brain/notifications/drop-replied/NotificationDropReplied.tsx(2 hunks)components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsx(2 hunks)components/brain/notifications/identity-subscribed/NotificationIdentitySubscribed.tsx(1 hunks)components/brain/notifications/subcomponents/NotificationHeader.tsx(1 hunks)components/brain/notifications/wave-created/NotificationWaveCreated.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- components/brain/notifications/drop-replied/NotificationDropReplied.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Do not include any comments in the code; it should be self-explanatory
Write correct, up-to-date, bug-free, fully componentized, secure, and efficient code
Include all required imports and ensure proper naming of key components
Use NextJS features that match the current version
**/*.{ts,tsx,js,jsx}: Enforce ≥ 80% line coverage for files changed sincemainvianpm run test
All code must pass ESLint (Next's Core Web Vitals + React Hooks rules) vianpm run lint
Use<Link>from Next.js for internal navigation instead of<a>tags or HTML anchors
Use<Image>fromnext/imageinstead of HTML<img>elements
Files:
components/brain/notifications/wave-created/NotificationWaveCreated.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsxcomponents/brain/notifications/identity-subscribed/NotificationIdentitySubscribed.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsxcomponents/brain/notifications/subcomponents/NotificationHeader.tsxcomponents/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,jsx}: Use FontAwesome for icons in React components
Use TailwindCSS for styling in React components
Use react-query for data fetching
Always addreadonlybefore props in React components
Files:
components/brain/notifications/wave-created/NotificationWaveCreated.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsxcomponents/brain/notifications/identity-subscribed/NotificationIdentitySubscribed.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsxcomponents/brain/notifications/subcomponents/NotificationHeader.tsxcomponents/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: All code must pass TypeScript type checking vianpm run type-check(tsc --noEmit)
Use'use cache'directive at the top of Server Components or functions to explicitly opt-in to caching in Next.js 16
Files:
components/brain/notifications/wave-created/NotificationWaveCreated.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsxcomponents/brain/notifications/identity-subscribed/NotificationIdentitySubscribed.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsxcomponents/brain/notifications/subcomponents/NotificationHeader.tsxcomponents/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsx
🧠 Learnings (4)
📚 Learning: 2025-11-25T08:37:14.950Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T08:37:14.950Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use `<Image>` from `next/image` instead of HTML `<img>` elements
Applied to files:
components/brain/notifications/wave-created/NotificationWaveCreated.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsxcomponents/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsx
📚 Learning: 2025-11-25T08:37:14.950Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T08:37:14.950Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use `<Link>` from Next.js for internal navigation instead of `<a>` tags or HTML anchors
Applied to files:
components/brain/notifications/wave-created/NotificationWaveCreated.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsxcomponents/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsx
📚 Learning: 2025-11-25T08:37:14.950Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T08:37:14.950Z
Learning: Fix issues with modernization aligned to React 19.2, React Compiler, and Next.js 16 conventions; do not add `// eslint-disable` comments unless explicitly instructed
Applied to files:
components/brain/notifications/wave-created/NotificationWaveCreated.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsxcomponents/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsx
📚 Learning: 2025-11-25T08:35:58.729Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T08:35:58.729Z
Learning: Applies to **/*.{tsx,jsx} : Use FontAwesome for icons in React components
Applied to files:
components/brain/notifications/wave-created/NotificationWaveCreated.tsx
🧬 Code graph analysis (5)
components/brain/notifications/wave-created/NotificationWaveCreated.tsx (3)
components/brain/notifications/subcomponents/NotificationHeader.tsx (1)
NotificationHeader(12-49)components/waves/header/WaveHeaderFollow.tsx (1)
WaveHeaderFollow(38-186)helpers/Helpers.ts (1)
getTimeAgoShort(563-589)
components/brain/notifications/drop-quoted/NotificationDropQuoted.tsx (4)
components/brain/notifications/subcomponents/NotificationHeader.tsx (1)
NotificationHeader(12-49)helpers/Helpers.ts (1)
getTimeAgoShort(563-589)components/waves/drops/Drop.tsx (1)
Drop(41-119)helpers/waves/drop.helpers.ts (1)
Drop(14-14)
components/brain/notifications/drop-reacted/NotificationDropReacted.tsx (1)
components/brain/notifications/subcomponents/NotificationHeader.tsx (1)
NotificationHeader(12-49)
components/brain/notifications/subcomponents/NotificationHeader.tsx (3)
generated/models/ApiProfileMin.ts (1)
ApiProfileMin(16-133)helpers/image.helpers.ts (1)
getScaledImageUri(17-45)components/utils/tooltip/UserProfileTooltipWrapper.tsx (1)
UserProfileTooltipWrapper(12-34)
components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsx (3)
components/brain/notifications/subcomponents/NotificationHeader.tsx (1)
NotificationHeader(12-49)helpers/Helpers.ts (1)
getTimeAgoShort(563-589)components/waves/drops/Drop.tsx (1)
Drop(41-119)
⏰ 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 (3)
components/brain/notifications/drop-quoted/NotificationDropQuoted.tsx (1)
59-101: Clean refactoring to use NotificationHeader component.The restructuring to use
NotificationHeaderwith the "quoted you" label and timestamp as children is well-organized. The Drop component receives all necessary props for interaction handling.components/brain/notifications/identity-subscribed/NotificationIdentitySubscribed.tsx (1)
12-33: Clean refactoring to use NotificationHeader.The component now uses the shared
NotificationHeaderwith proper props for author, actions, and children content. This aligns well with the other notification components.components/brain/notifications/wave-created/NotificationWaveCreated.tsx (1)
41-76: Clean refactor to header-centric composition.The component correctly uses
NotificationHeaderto consolidate author, content, and actions rendering. The conditional rendering ofWaveHeaderFollowwhenwaveis available provides graceful degradation during loading or error states.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
__tests__/components/notifications/NotificationsContext.test.tsx (2)
83-98: Consider removing hardcoded timeout to avoid flaky tests.The hardcoded 700ms timeout couples the test to internal iOS delay implementation details. If the delay changes, the test becomes brittle or flaky.
Consider alternatives:
- Mock out the delay mechanism entirely
- Use a test helper that waits for the actual callback registration
- Replace time-based waiting with condition-based waiting
Apply this approach to decouple from timing:
- // Wait for initialization to complete (includes 500ms iOS delay) - await act(async () => { - await new Promise((r) => setTimeout(r, 700)); - }); - - expect(actionCallback).not.toBeNull(); + // Wait until callback is registered + await act(async () => { + while (!actionCallback) { + await new Promise((r) => setTimeout(r, 50)); + } + });
5-5: Consider adding type safety to test mocks.Multiple uses of
anytype reduce type safety. While common in tests, adding proper types improves maintainability and catches interface changes.Example for line 86:
import type { ActionPerformed } from '@capacitor/push-notifications'; PushNotifications.addListener.mockImplementation( (evt: string, cb: (action: ActionPerformed) => Promise<void>) => { if (evt === "pushNotificationActionPerformed") { actionCallback = cb; } return Promise.resolve(); } );Also applies to: 86-86
__tests__/components/brain/notifications/drop-quoted/NotificationDropQuoted.test.tsx (1)
12-15: NotificationHeader mock cleanly isolates the header from navigation behaviorThe mock keeps the tests focused on reply/quote navigation while still rendering children and exposing a stable
data-testid, which is a good pattern for isolating layout-only subcomponents in this suite. If you later want coverage for the new header integration, you could optionally add a simple assertion thatscreen.getByTestId('notification-header')is present in one of the existing tests.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
__tests__/components/brain/notifications/NotificationWaveCreated.test.tsx(2 hunks)__tests__/components/brain/notifications/drop-quoted/NotificationDropQuoted.test.tsx(1 hunks)__tests__/components/notifications/NotificationsContext.test.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Do not include any comments in the code; it should be self-explanatory
Write correct, up-to-date, bug-free, fully componentized, secure, and efficient code
Include all required imports and ensure proper naming of key components
Use NextJS features that match the current version
**/*.{ts,tsx,js,jsx}: Enforce ≥ 80% line coverage for files changed sincemainvianpm run test
All code must pass ESLint (Next's Core Web Vitals + React Hooks rules) vianpm run lint
Use<Link>from Next.js for internal navigation instead of<a>tags or HTML anchors
Use<Image>fromnext/imageinstead of HTML<img>elements
Files:
__tests__/components/brain/notifications/drop-quoted/NotificationDropQuoted.test.tsx__tests__/components/notifications/NotificationsContext.test.tsx__tests__/components/brain/notifications/NotificationWaveCreated.test.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,jsx}: Use FontAwesome for icons in React components
Use TailwindCSS for styling in React components
Use react-query for data fetching
Always addreadonlybefore props in React components
Files:
__tests__/components/brain/notifications/drop-quoted/NotificationDropQuoted.test.tsx__tests__/components/notifications/NotificationsContext.test.tsx__tests__/components/brain/notifications/NotificationWaveCreated.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: All code must pass TypeScript type checking vianpm run type-check(tsc --noEmit)
Use'use cache'directive at the top of Server Components or functions to explicitly opt-in to caching in Next.js 16
Files:
__tests__/components/brain/notifications/drop-quoted/NotificationDropQuoted.test.tsx__tests__/components/notifications/NotificationsContext.test.tsx__tests__/components/brain/notifications/NotificationWaveCreated.test.tsx
**/__tests__/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Tests should live in
__tests__/directory or be namedComponentName.test.tsx
Files:
__tests__/components/brain/notifications/drop-quoted/NotificationDropQuoted.test.tsx__tests__/components/notifications/NotificationsContext.test.tsx__tests__/components/brain/notifications/NotificationWaveCreated.test.tsx
🧠 Learnings (5)
📚 Learning: 2025-11-25T08:37:36.725Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-11-25T08:37:36.725Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js,jsx} : Give each test a clear, descriptive name that conveys the scenario and expected outcome
Applied to files:
__tests__/components/brain/notifications/drop-quoted/NotificationDropQuoted.test.tsx
📚 Learning: 2025-11-25T08:37:36.725Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-11-25T08:37:36.725Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js,jsx} : Organize test files in `__tests__` directory mirroring source folder structure (components, contexts, hooks, utils) to keep structure familiar
Applied to files:
__tests__/components/brain/notifications/drop-quoted/NotificationDropQuoted.test.tsx
📚 Learning: 2025-11-25T08:37:14.950Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T08:37:14.950Z
Learning: Applies to **/__tests__/**/*.{ts,tsx,js,jsx} : Tests should live in `__tests__/` directory or be named `ComponentName.test.tsx`
Applied to files:
__tests__/components/brain/notifications/drop-quoted/NotificationDropQuoted.test.tsx
📚 Learning: 2025-11-25T08:37:14.950Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T08:37:14.950Z
Learning: Mock external dependencies and APIs in tests
Applied to files:
__tests__/components/notifications/NotificationsContext.test.tsx__tests__/components/brain/notifications/NotificationWaveCreated.test.tsx
📚 Learning: 2025-11-25T08:37:36.725Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-11-25T08:37:36.725Z
Learning: Write Integration Tests for interactions between components or with API routes
Applied to files:
__tests__/components/notifications/NotificationsContext.test.tsx
🧬 Code graph analysis (1)
__tests__/components/notifications/NotificationsContext.test.tsx (1)
components/notifications/NotificationsContext.tsx (1)
useNotificationsContext(273-281)
⏰ 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 (5)
__tests__/components/brain/notifications/NotificationWaveCreated.test.tsx (2)
9-9: LGTM! More realistic path in mock.The leading slash makes the mock return value more representative of actual URL paths.
38-38: LGTM! More resilient assertion.Using
toContaininstead of exact matching makes the test more robust to Next.js image optimization transformations (e.g., query parameters, prefixes).__tests__/components/notifications/NotificationsContext.test.tsx (2)
17-17: LGTM! Auth mock supports authenticated context.Returning a
connectedProfileobject enables tests that depend on authenticated user state.
80-81: LGTM! Explicit router mock pattern.The explicit mock retrieval approach is clear and valid, though slightly more verbose than spying.
__tests__/components/brain/notifications/drop-quoted/NotificationDropQuoted.test.tsx (1)
17-20: NotificationsFollowBtn mock is minimal and appropriate for current test scopeThis no-op mock prevents follow-button behavior from affecting these navigation tests while still ensuring the component can render without errors. It aligns with the existing Drop mock pattern in this file and keeps the test surface small.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components/header/header-search/HeaderSearchModal.tsx (1)
933-933: Optional:tw-border-solidis redundant in Tailwind CSS.The
tw-border-solidclass is redundant since Tailwind'stw-borderutility applies a solid border style by default. Additionally, other buttons in this file (e.g., lines 839-842, 1011-1034) usetw-borderwithout explicitly specifyingtw-border-solid, creating a minor inconsistency.You can either:
- Remove
tw-border-solidhere for brevity, or- Add it to the other border-styled buttons (lines 839-842, 1011-1034) for consistency
- className="tw-hidden sm:tw-inline-flex tw-h-9 tw-w-9 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-iron-700 tw-bg-iron-900 tw-text-iron-300 tw-border-solid hover:tw-border-iron-500 hover:tw-bg-iron-800 hover:tw-text-white tw-transition tw-duration-150"> + className="tw-hidden sm:tw-inline-flex tw-h-9 tw-w-9 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-iron-700 tw-bg-iron-900 tw-text-iron-300 hover:tw-border-iron-500 hover:tw-bg-iron-800 hover:tw-text-white tw-transition tw-duration-150">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
components/brain/notifications/subcomponents/NotificationHeader.tsx(1 hunks)components/header/header-search/HeaderSearchModal.tsx(1 hunks)components/user/utils/profile/UserProfileTooltip.tsx(4 hunks)components/user/utils/profile/UserProfileTooltipTopRep.tsx(1 hunks)components/user/utils/stats/UserStatsRow.tsx(8 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- components/brain/notifications/subcomponents/NotificationHeader.tsx
- components/user/utils/profile/UserProfileTooltipTopRep.tsx
- components/user/utils/profile/UserProfileTooltip.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Do not include any comments in the code; it should be self-explanatory
Write correct, up-to-date, bug-free, fully componentized, secure, and efficient code
Include all required imports and ensure proper naming of key components
Use NextJS features that match the current version
**/*.{ts,tsx,js,jsx}: Replace<img>elements with<Image />fromnext/imageto satisfy@next/next/no-img-elementESLint rule
Use<Link href="/path">from Next.js for internal navigation instead of plain HTML links to satisfy@next/next/no-html-link-for-pagesESLint rule
Files:
components/user/utils/stats/UserStatsRow.tsxcomponents/header/header-search/HeaderSearchModal.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,jsx}: Use FontAwesome for icons in React components
Use TailwindCSS for styling in React components
Use react-query for data fetching
Always addreadonlybefore props in React components
Files:
components/user/utils/stats/UserStatsRow.tsxcomponents/header/header-search/HeaderSearchModal.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,jsx,ts,tsx}: Code must satisfy ESLint (Next's Core Web Vitals + React Hooks)
Use framework APIs: internal links should use<Link>, images should usenext/image, and adopt Next's ESLint rules (Core Web Vitals)
**/*.{js,jsx,ts,tsx}: Code must satisfy ESLint (Next's Core Web Vitals + React Hooks rules)
Follow existing code style and naming conventions; maintain clean code standards (measured by SonarQube)
Files:
components/user/utils/stats/UserStatsRow.tsxcomponents/header/header-search/HeaderSearchModal.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Must passtsc --noEmittype checking
Prefer direct named imports for React hooks and types (import { useMemo, useRef, FC, etc. } from "react") overReact.namespace usage (React.useMemo,React.useRef, etc.)
If thereact-hooks/exhaustive-depslint rule is triggered: if the Effect only derives state, remove the Effect and compute during render; if listening to an external system and needing fresh props/state, wrap non-reactive logic inuseEffectEvent
**/*.{ts,tsx}: Must passtsc --noEmitfor TypeScript type checking
Prefer Server Components over Client Components; use Server Functions/Server Actions ('use server') for mutations
Remove unnecessary Effects; if Effect only derives state, compute during render instead
UseuseEffectEventfor non-reactive logic inside Effects to avoid unnecessary re-runs
Use framework APIs:<Link>for internal links,next/imagefor images, adopt Next's ESLint rules
Use'use cache'directive and Cache Components features for explicit opt-in caching in Next.js 16
Use TypeScript and React functional components with hooks
When parsing Seize URLs or similar, fail fast if base origin is unavailable; do not fall back to placeholder origins
Replace<img>elements with<Image />fromnext/image
Use<Link href="/path">for internal navigation instead of plain HTML links
Move data fetches to Server Components; handle mutations through Server Functions/Server Actions with'use server'directive
Files:
components/user/utils/stats/UserStatsRow.tsxcomponents/header/header-search/HeaderSearchModal.tsx
🧠 Learnings (2)
📚 Learning: 2025-12-03T14:52:34.255Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T14:52:34.255Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use `<Link href="/path">` from Next.js for internal navigation instead of plain HTML links to satisfy `next/next/no-html-link-for-pages` ESLint rule
Applied to files:
components/user/utils/stats/UserStatsRow.tsx
📚 Learning: 2025-12-05T10:55:30.859Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-05T10:55:30.859Z
Learning: Applies to **/*.{ts,tsx} : Use `<Link href="/path">` for internal navigation instead of plain HTML links
Applied to files:
components/user/utils/stats/UserStatsRow.tsx
🧬 Code graph analysis (1)
components/user/utils/stats/UserStatsRow.tsx (1)
helpers/Helpers.ts (2)
formatStatFloor(127-137)formatNumberWithCommas(103-120)
⏰ 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 (2)
components/user/utils/stats/UserStatsRow.tsx (2)
6-23: Size enum and mapping are well-typed and future-proofThe
UserStatsRowSizeenum,SIZE_CLASSESrecord, and the optionalsizeprop with a default value are wired together cleanly. Defaulted destructuring ensuressizeis always a valid enum at runtime, and the record keeps variant-specific class names centralized for easy extension later (e.g., adding aLARGEsize). As per coding guidelines, this keeps props readonly and maintains a clear, typed public surface.Also applies to: 35-36, 48-49, 53-53
62-77: Consistent use of size-based classes across all stat labelsAll metric value and label spans now derive their typography from the computed
classes.text/classes.rate, giving a consistent small/medium variant across TDH, xTDH, NIC, Rep, and Followers while preserving existing colors and weights. This is a straightforward, low-risk styling refactor with no behavioral changes. Based on learnings, internal links correctly use<Link>and props remain readonly as expected.Also applies to: 87-102, 112-117, 126-131, 140-145
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
components/brain/notifications/utils/navigationUtils.ts (1)
9-22: Consider memoizingnavigateToWavewithuseCallback.The
navigateToWavefunction is recreated on every render. If downstream components pass it to child components or use it in dependency arrays, this could cause unnecessary re-renders or effect re-runs.+import { useCallback } from "react"; import { useRouter } from "next/navigation"; import { getWaveRoute } from "@/helpers/navigation.helpers"; import useDeviceInfo from "@/hooks/useDeviceInfo"; export function useWaveNavigation() { const router = useRouter(); const { isApp } = useDeviceInfo(); - const navigateToWave = ( + const navigateToWave = useCallback(( waveId: string, serialNo: number, isDirectMessage: boolean ) => { router.push( getWaveRoute({ waveId, serialNo, isDirectMessage, isApp, }) ); - }; + }, [router, isApp]); return { navigateToWave }; }components/brain/notifications/drop-reacted/NotificationDropReacted.tsx (1)
91-96: Consider replacing<img>withnext/imagefor custom emoji.The coding guidelines specify using
<Image>fromnext/imageinstead of HTML<img>elements. While the avatar<img>issue from past reviews is resolved viaNotificationHeader, this custom emoji image still uses a native<img>tag.+import Image from "next/image"; // In the emojiNode assignment: - emojiNode = ( - <img - src={custom.skins[0].src} - alt={rawId} - className="tw-max-w-5 tw-max-h-5 tw-object-contain" - /> - ); + emojiNode = ( + <Image + src={custom.skins[0].src} + alt={rawId} + width={20} + height={20} + className="tw-object-contain" + unoptimized + /> + );Note: If the emoji source URLs are from an external domain, ensure they're added to
next.config.jsremotePatterns. Theunoptimizedprop is useful if emoji sources don't benefit from Next.js image optimization.components/brain/notifications/drop-replied/NotificationDropReplied.tsx (1)
30-30: Consider defining proper types for wave chat properties.The
as anycasts bypass TypeScript's type checking. While the code works correctly with optional chaining as a fallback, consider defining an extended type or interface that includes thechatproperty structure to improve type safety.Also applies to: 39-39
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
__tests__/components/brain/notifications/drop-quoted/NotificationDropQuoted.test.tsx(1 hunks)__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx(1 hunks)__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsx(1 hunks)components/brain/notifications/drop-quoted/NotificationDropQuoted.tsx(3 hunks)components/brain/notifications/drop-reacted/NotificationDropReacted.tsx(4 hunks)components/brain/notifications/drop-replied/NotificationDropReplied.tsx(2 hunks)components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsx(2 hunks)components/brain/notifications/utils/navigationUtils.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- tests/components/brain/notifications/drop-quoted/NotificationDropQuoted.test.tsx
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx,js,jsx}: Do not include any comments in the code; it should be self-explanatory
Write correct, up-to-date, bug-free, fully componentized, secure, and efficient code
Include all required imports and ensure proper naming of key components
Use NextJS features that match the current version
**/*.{ts,tsx,js,jsx}: Replace<img>elements with<Image />fromnext/imageto satisfy@next/next/no-img-elementESLint rule
Use<Link href="/path">from Next.js for internal navigation instead of plain HTML links to satisfy@next/next/no-html-link-for-pagesESLint rule
Files:
components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsx__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsxcomponents/brain/notifications/drop-replied/NotificationDropReplied.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsxcomponents/brain/notifications/utils/navigationUtils.ts__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{tsx,jsx}: Use FontAwesome for icons in React components
Use TailwindCSS for styling in React components
Use react-query for data fetching
Always addreadonlybefore props in React components
Files:
components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsx__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsxcomponents/brain/notifications/drop-replied/NotificationDropReplied.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsx__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,jsx,ts,tsx}: Code must satisfy ESLint (Next's Core Web Vitals + React Hooks)
Use framework APIs: internal links should use<Link>, images should usenext/image, and adopt Next's ESLint rules (Core Web Vitals)
**/*.{js,jsx,ts,tsx}: Code must satisfy ESLint (Next's Core Web Vitals + React Hooks rules)
Follow existing code style and naming conventions; maintain clean code standards (measured by SonarQube)
Files:
components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsx__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsxcomponents/brain/notifications/drop-replied/NotificationDropReplied.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsxcomponents/brain/notifications/utils/navigationUtils.ts__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Must passtsc --noEmittype checking
Prefer direct named imports for React hooks and types (import { useMemo, useRef, FC, etc. } from "react") overReact.namespace usage (React.useMemo,React.useRef, etc.)
If thereact-hooks/exhaustive-depslint rule is triggered: if the Effect only derives state, remove the Effect and compute during render; if listening to an external system and needing fresh props/state, wrap non-reactive logic inuseEffectEvent
**/*.{ts,tsx}: Must passtsc --noEmitfor TypeScript type checking
Prefer Server Components over Client Components; use Server Functions/Server Actions ('use server') for mutations
Remove unnecessary Effects; if Effect only derives state, compute during render instead
UseuseEffectEventfor non-reactive logic inside Effects to avoid unnecessary re-runs
Use framework APIs:<Link>for internal links,next/imagefor images, adopt Next's ESLint rules
Use'use cache'directive and Cache Components features for explicit opt-in caching in Next.js 16
Use TypeScript and React functional components with hooks
When parsing Seize URLs or similar, fail fast if base origin is unavailable; do not fall back to placeholder origins
Replace<img>elements with<Image />fromnext/image
Use<Link href="/path">for internal navigation instead of plain HTML links
Move data fetches to Server Components; handle mutations through Server Functions/Server Actions with'use server'directive
Files:
components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsx__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsxcomponents/brain/notifications/drop-replied/NotificationDropReplied.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsxcomponents/brain/notifications/utils/navigationUtils.ts__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
**/@(__tests__|*.test).{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Tests should live in
__tests__/orComponentName.test.tsx; mock external dependencies and APIs in tests
Files:
__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsx__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
**/__tests__/**/*.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Place tests in
__tests__/directory or asComponentName.test.tsxalongside components
Files:
__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsx__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Mock external dependencies and APIs in tests
Files:
__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsx__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
__tests__/**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (tests/AGENTS.md)
Use Jest +
ts-jestfor TypeScript testing
Files:
__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsx__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
__tests__/**/*.{ts,tsx}
📄 CodeRabbit inference engine (tests/AGENTS.md)
Functions must have ≤ 15 cognitive complexity; extract deep ternaries (>3 levels) and break down complex logic
Files:
__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsx__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
__tests__/**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (tests/AGENTS.md)
__tests__/**/*.{ts,tsx,js}: Preferfor...ofloops overforEachas it allowsbreak/continueand works with async/await
Usearray.at(-1)andarray.at(-2)instead of index-based array access for negative indexing
UseString.prototype.replaceAll()instead ofreplace()for global string replacements
UseglobalThis.fetch()instead of directfetch()calls
Organize imports with one import per module in order: external → internal → types, with no duplicates
Useelement.remove()instead ofparent.removeChild(element)for DOM manipulation
Catch errors only when meaningful; no empty catch blocks; log errors with context
Avoid double negatives in code; prefer explicit logic and remove redundant annotations; use optional chaining (?.)
Files:
__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsx__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
__tests__/**/{components,contexts,hooks}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (tests/AGENTS.md)
Use semantic HTML elements (
<label>,<output>) over ARIA attributes when possible; every form control must have a label
Files:
__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsx__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
🧠 Learnings (19)
📚 Learning: 2025-12-05T10:55:30.859Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-05T10:55:30.859Z
Learning: Applies to **/*.{ts,tsx} : Replace `<img>` elements with `<Image />` from `next/image`
Applied to files:
components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsxcomponents/brain/notifications/drop-replied/NotificationDropReplied.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsx
📚 Learning: 2025-12-03T14:52:34.255Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T14:52:34.255Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Replace `<img>` elements with `<Image />` from `next/image` to satisfy `next/next/no-img-element` ESLint rule
Applied to files:
components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsxcomponents/brain/notifications/drop-replied/NotificationDropReplied.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsx
📚 Learning: 2025-12-05T10:55:30.859Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-05T10:55:30.859Z
Learning: Applies to **/*.{ts,tsx} : Use framework APIs: `<Link>` for internal links, `next/image` for images, adopt Next's ESLint rules
Applied to files:
components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsxcomponents/brain/notifications/drop-replied/NotificationDropReplied.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsx
📚 Learning: 2025-12-03T14:52:34.255Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T14:52:34.255Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Use framework APIs: internal links should use `<Link>`, images should use `next/image`, and adopt Next's ESLint rules (Core Web Vitals)
Applied to files:
components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsxcomponents/brain/notifications/drop-replied/NotificationDropReplied.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsx
📚 Learning: 2025-12-03T14:52:34.255Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T14:52:34.255Z
Learning: Fix with modernization (no `// eslint-disable` unless explicitly instructed); prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions
Applied to files:
components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsxcomponents/brain/notifications/drop-replied/NotificationDropReplied.tsxcomponents/brain/notifications/drop-reacted/NotificationDropReacted.tsx
📚 Learning: 2025-12-03T14:52:34.255Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T14:52:34.255Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use `<Link href="/path">` from Next.js for internal navigation instead of plain HTML links to satisfy `next/next/no-html-link-for-pages` ESLint rule
Applied to files:
components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsxcomponents/brain/notifications/drop-quoted/NotificationDropQuoted.tsxcomponents/brain/notifications/utils/navigationUtils.ts
📚 Learning: 2025-11-25T08:35:58.729Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-25T08:35:58.729Z
Learning: Applies to **/*.{tsx,jsx} : Use FontAwesome for icons in React components
Applied to files:
components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsx
📚 Learning: 2025-12-03T14:52:34.255Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T14:52:34.255Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Code must satisfy ESLint (Next's Core Web Vitals + React Hooks)
Applied to files:
components/brain/notifications/drop-quoted/NotificationDropQuoted.tsx
📚 Learning: 2025-12-05T10:55:30.859Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-05T10:55:30.859Z
Learning: Applies to **/*.{js,jsx,ts,tsx} : Code must satisfy ESLint (Next's Core Web Vitals + React Hooks rules)
Applied to files:
components/brain/notifications/drop-quoted/NotificationDropQuoted.tsx
📚 Learning: 2025-12-05T10:55:30.859Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-05T10:55:30.859Z
Learning: Applies to **/*.test.{ts,tsx} : Mock external dependencies and APIs in tests
Applied to files:
__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsx__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
📚 Learning: 2025-12-03T14:52:34.255Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T14:52:34.255Z
Learning: Applies to **/@(__tests__|*.test).{ts,tsx} : Tests should live in `__tests__/` or `ComponentName.test.tsx`; mock external dependencies and APIs in tests
Applied to files:
__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsx__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
📚 Learning: 2025-12-05T10:55:43.458Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-05T10:55:43.458Z
Learning: Applies to __tests__/**/__tests__/**/components/**/*.test.{ts,tsx} : Use testing-library/react + user-event for React component tests
Applied to files:
__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsx__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
📚 Learning: 2025-12-05T10:55:43.458Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-05T10:55:43.458Z
Learning: Applies to __tests__/**/__tests__/**/*.test.{ts,tsx,js} : Keep tests independent, deterministic, and fast with production-like data
Applied to files:
__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsx__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
📚 Learning: 2025-12-03T14:52:34.255Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-03T14:52:34.255Z
Learning: TypeScript + React functional components with hooks; follow existing code style and naming conventions; maintain clean code standards (measured by SonarQube)
Applied to files:
components/brain/notifications/drop-reacted/NotificationDropReacted.tsxcomponents/brain/notifications/utils/navigationUtils.ts
📚 Learning: 2025-12-05T10:55:30.859Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-05T10:55:30.859Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript and React functional components with hooks
Applied to files:
components/brain/notifications/utils/navigationUtils.ts
📚 Learning: 2025-12-05T10:55:30.859Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-05T10:55:30.859Z
Learning: Applies to app/**/page.{ts,tsx} : Export `generateMetadata` in App Router routes using the `getAppMetadata` helper from '@/components/providers/metadata'
Applied to files:
components/brain/notifications/utils/navigationUtils.ts
📚 Learning: 2025-12-05T10:55:43.458Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-05T10:55:43.458Z
Learning: Applies to __tests__/**/*.{ts,tsx,js} : Avoid double negatives in code; prefer explicit logic and remove redundant annotations; use optional chaining (`?.`)
Applied to files:
__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
📚 Learning: 2025-12-05T10:55:30.859Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-05T10:55:30.859Z
Learning: Applies to **/__tests__/**/*.{ts,tsx} : Place tests in `__tests__/` directory or as `ComponentName.test.tsx` alongside components
Applied to files:
__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
📚 Learning: 2025-12-05T10:55:43.458Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-05T10:55:43.458Z
Learning: Applies to __tests__/**/__tests__/**/components/**/*.test.{ts,tsx} : Test accessibility with keyboard navigation and screen reader compatibility
Applied to files:
__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx
🧬 Code graph analysis (4)
components/brain/notifications/drop-quoted/NotificationDropQuoted.tsx (3)
components/brain/notifications/utils/navigationUtils.ts (1)
useWaveNavigation(5-25)components/brain/notifications/subcomponents/NotificationHeader.tsx (1)
NotificationHeader(14-53)helpers/Helpers.ts (1)
getTimeAgoShort(575-601)
components/brain/notifications/drop-replied/NotificationDropReplied.tsx (6)
components/brain/notifications/utils/navigationUtils.ts (1)
useWaveNavigation(5-25)generated/models/ApiDrop.ts (1)
ApiDrop(28-229)components/brain/notifications/subcomponents/NotificationHeader.tsx (1)
NotificationHeader(14-53)helpers/Helpers.ts (1)
getTimeAgoShort(575-601)components/waves/drops/Drop.tsx (1)
Drop(41-119)helpers/waves/drop.helpers.ts (1)
Drop(14-14)
components/brain/notifications/drop-reacted/NotificationDropReacted.tsx (2)
components/brain/notifications/utils/navigationUtils.ts (1)
useWaveNavigation(5-25)components/brain/notifications/subcomponents/NotificationHeader.tsx (1)
NotificationHeader(14-53)
components/brain/notifications/utils/navigationUtils.ts (2)
hooks/useDeviceInfo.ts (1)
useDeviceInfo(23-93)helpers/navigation.helpers.ts (1)
getWaveRoute(19-68)
⏰ 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 (8)
__tests__/components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.test.tsx (1)
20-23: LGTM!The mock for
useDeviceInfois correctly placed before the component import and follows the established pattern for module mocks in this test file. This ensures the navigation hook works correctly in a non-app context.__tests__/components/brain/notifications/drop-replied/NotificationDropReplied.test.tsx (1)
13-16: LGTM!The
useDeviceInfomock is correctly structured and positioned, enabling the test to verify navigation behavior in a non-app context consistently with other notification component tests.components/brain/notifications/drop-quoted/NotificationDropQuoted.tsx (1)
46-88: LGTM!Clean refactor using the
NotificationHeadercomponent pattern. The previous<img>concern from past reviews is resolved sinceNotificationHeaderinternally usesnext/image. Navigation logic is properly delegated touseWaveNavigation.components/brain/notifications/identity-mentioned/NotificationIdentityMentioned.tsx (1)
45-87: LGTM!The refactor to use
NotificationHeaderis well-executed. The previous<img>concern from past reviews is resolved since avatar rendering is now handled byNotificationHeaderwhich usesnext/imageinternally. Navigation logic is cleanly delegated touseWaveNavigation.components/brain/notifications/drop-reacted/NotificationDropReacted.tsx (1)
146-180: LGTM on the header refactor!The refactor to use
NotificationHeaderfor author/avatar rendering is well-executed. Navigation logic is cleanly delegated touseWaveNavigation, and the overall structure follows the established pattern across notification components.components/brain/notifications/drop-replied/NotificationDropReplied.tsx (3)
13-14: LGTM! Clean refactoring to shared components.The refactoring to use
NotificationHeaderanduseWaveNavigationimproves consistency across notification components and eliminates code duplication. The header now properly uses Next.js<Image>(via NotificationHeader), resolving the previous review concern about the<img>tag.Also applies to: 29-64
34-43: LGTM! Navigation handlers correctly implemented.The handlers properly extract wave context and delegate to
navigateToWave, correctly handling direct message flags for both the base wave and quoted drops.
66-85: LGTM! Drop component props correctly configured.The Drop component receives all required props with appropriate values for the notification context, including the navigation handlers and display flags.
|
2 participants
Summary by CodeRabbit
New Features
Style
Refactor
Tests
✏️ Tip: You can customize this high-level summary in your review settings.