Conversation
Signed-off-by: prxt6529 <prxt@6529.io>
📝 WalkthroughWalkthroughAdds a touch-detection hook and touch-friendly reaction UX: introduces Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Browser
participant useIsTouchDevice
participant WaveDropReactions
participant WaveDropReactionsDetailDialog
User->>Browser: Long-press on a reaction element
Browser->>useIsTouchDevice: check touch capability
useIsTouchDevice-->>Browser: returns true
Browser->>WaveDropReactions: trigger long-press handler
WaveDropReactions->>WaveDropReactions: set detail dialog open + initialReaction
WaveDropReactions->>WaveDropReactionsDetailDialog: render dialog with selected reaction
User->>WaveDropReactionsDetailDialog: select different reaction in sidebar
WaveDropReactionsDetailDialog->>WaveDropReactionsDetailDialog: update selectedReaction, show profiles
User->>WaveDropReactionsDetailDialog: click profile link
WaveDropReactionsDetailDialog-->>User: navigate to profile
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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
🤖 Fix all issues with AI agents
In @components/waves/drops/WaveDropReactionsDetailDialog.tsx:
- Around line 172-176: Replace the plain <img> with Next.js' <Image /> in the
WaveDropReactionsDetailDialog component: import Image from "next/image", use
Image instead of the img tag for the element that currently uses
getScaledImageUri(profile.pfp, ImageScale.W_AUTO_H_50) and alt={displayName},
and provide explicit width/height (or appropriate fill/layout props) and
className to preserve the current styling (tw-h-full tw-w-full tw-object-cover);
ensure the src remains the output of getScaledImageUri and adjust any prop names
to match next/image (e.g., layout/priority) so the ESLint rule
@next/next/no-img-element is satisfied.
🧹 Nitpick comments (7)
__tests__/hooks/useIsTouchDevice.test.ts (1)
97-114: Potential timing issue: Effect may not complete before assertion.The test "returns false when no touch indicators present" doesn't wrap the assertion in
act()or wait for the effect to complete, unlike the other tests. SinceuseIsTouchDeviceusesuseEffect, the state update is asynchronous.While this test may pass because the initial state is
falseand the effect sets it tofalse, it's inconsistent with the other tests and could be flaky.♻️ Ensure consistency with other tests
it("returns false when no touch indicators present", () => { const mockWindow = { ...originalWindow, matchMedia: jest.fn(() => ({ matches: false })), }; Object.defineProperty(global, "window", { value: mockWindow, writable: true, }); Object.defineProperty(global, "navigator", { value: { maxTouchPoints: 0 }, writable: true, }); const { result } = renderHook(() => useIsTouchDevice()); + act(() => { + jest.runAllTimers?.(); + }); + expect(result.current).toBe(false); });components/waves/drops/WaveDropReactionsDetailDialog.tsx (1)
29-33: Consider derivingselectedReactionduring render instead of syncing viauseEffect.Per the coding guidelines, unnecessary Effects should be removed. This sync logic could be handled by computing the value directly:
- const [selectedReaction, setSelectedReaction] = useState<string>( - initialReaction ?? reactions[0]?.reaction ?? "" - ); - - useEffect(() => { - if (isOpen && initialReaction) { - setSelectedReaction(initialReaction); - } - }, [isOpen, initialReaction]); + const [selectedReaction, setSelectedReaction] = useState<string>(""); + + const effectiveSelectedReaction = isOpen && initialReaction + ? initialReaction + : selectedReaction || reactions[0]?.reaction || "";However, if the intent is to reset selection when the dialog opens with a new
initialReactionwhile preserving user selections within the dialog, the current approach is acceptable. Based on coding guidelines about removing unnecessary Effects.components/waves/drops/WaveDropReactions.tsx (5)
127-130: Remove inline comments per coding guidelines.The coding guidelines specify that code should be self-explanatory without comments.
Proposed fix
- // Refs to track previous values for change detection const prevTotalRef = useRef(total); const prevContextReactionRef = useRef(drop.context_profile_context?.reaction); const prevProfilesRef = useRef(reaction.profiles);
132-132: Remove inline comment.Proposed fix
- // Sync selected when context reaction changes from server useEffect(() => {
163-163: Remove inline comment.Proposed fix
- // Trigger animation when total changes useEffect(() => {
180-180: Remove inline comment.Proposed fix
- // derive emoji ID const emojiId = useMemo(
374-374: Remove inline comment.Proposed fix
- // styles const borderStyle = selected ? "tw-border-primary-500" : "tw-border-iron-700";
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
__tests__/components/waves/drops/WaveDropReactions.test.tsx__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsx__tests__/hooks/useIsTouchDevice.test.tscomponents/brain/left-sidebar/web/WebDirectMessagesList.tsxcomponents/brain/left-sidebar/web/WebUnifiedWavesListWaves.tsxcomponents/waves/drops/WaveDropReactions.tsxcomponents/waves/drops/WaveDropReactionsDetailDialog.tsxhooks/useIsTouchDevice.ts
🧰 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}: Remove unnecessary Effects. If the Effect's only job is to derive or sync internal state, calculate during render or useuseMemoinstead.
UseuseEffectEventfor non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Use explicit caching with"use cache"directive at the top of Server Components, routes, or functions. ConfigurecacheComponents: trueinnext.config.tsas needed.
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects; if the Effect only derives state, compute during render instead
UseuseEffectEventwhen listening to external events but needing the latest props/state without re-running the Effect
Move data fetching from client Effects to Server Components; mutations go through Server Actions ('use server')
Files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsxcomponents/waves/drops/WaveDropReactionsDetailDialog.tsx__tests__/hooks/useIsTouchDevice.test.tscomponents/waves/drops/WaveDropReactions.tsxcomponents/brain/left-sidebar/web/WebDirectMessagesList.tsx__tests__/components/waves/drops/WaveDropReactions.test.tsxhooks/useIsTouchDevice.tscomponents/brain/left-sidebar/web/WebUnifiedWavesListWaves.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
**/*.{tsx,jsx}: Use internal links via<Link>component from Next.js instead of<a>tags
Replace<img>elements with<Image />fromnext/image
Files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsxcomponents/waves/drops/WaveDropReactionsDetailDialog.tsxcomponents/waves/drops/WaveDropReactions.tsxcomponents/brain/left-sidebar/web/WebDirectMessagesList.tsx__tests__/components/waves/drops/WaveDropReactions.test.tsxcomponents/brain/left-sidebar/web/WebUnifiedWavesListWaves.tsx
**/*.{test,spec}.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run testto execute all Jest tests and enforce ≥80% line coverage for files changed sincemain. Tests must pass and coverage threshold must be met before completing any task.Enforce ≥ 80% line coverage for files changed since
mainby runningnpm run test
Files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsx__tests__/hooks/useIsTouchDevice.test.ts__tests__/components/waves/drops/WaveDropReactions.test.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run lintto ensure code satisfies ESLint (Next's Core Web Vitals + React Hooks). Code must pass linting before completing any task.
**/*.{js,ts,jsx,tsx}: Code must satisfy ESLint with Next's Core Web Vitals and React Hooks rules by runningnpm run lint
Do not addeslint-disablecomments unless explicitly instructed; prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions
Files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsxcomponents/waves/drops/WaveDropReactionsDetailDialog.tsx__tests__/hooks/useIsTouchDevice.test.tscomponents/waves/drops/WaveDropReactions.tsxcomponents/brain/left-sidebar/web/WebDirectMessagesList.tsx__tests__/components/waves/drops/WaveDropReactions.test.tsxhooks/useIsTouchDevice.tscomponents/brain/left-sidebar/web/WebUnifiedWavesListWaves.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
**/*.{jsx,tsx}: Replace<img>elements with<Image />fromnext/imageto comply with Next.js ESLint rule@next/next/no-img-element.
Use<Link href="/path">from Next.js for internal navigation instead of raw<a>tags to comply with@next/next/no-html-link-for-pages.
Files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsxcomponents/waves/drops/WaveDropReactionsDetailDialog.tsxcomponents/waves/drops/WaveDropReactions.tsxcomponents/brain/left-sidebar/web/WebDirectMessagesList.tsx__tests__/components/waves/drops/WaveDropReactions.test.tsxcomponents/brain/left-sidebar/web/WebUnifiedWavesListWaves.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsxcomponents/waves/drops/WaveDropReactionsDetailDialog.tsx__tests__/hooks/useIsTouchDevice.test.tscomponents/waves/drops/WaveDropReactions.tsxcomponents/brain/left-sidebar/web/WebDirectMessagesList.tsx__tests__/components/waves/drops/WaveDropReactions.test.tsxhooks/useIsTouchDevice.tscomponents/brain/left-sidebar/web/WebUnifiedWavesListWaves.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with React functional components and hooks
Files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsxcomponents/waves/drops/WaveDropReactionsDetailDialog.tsx__tests__/hooks/useIsTouchDevice.test.tscomponents/waves/drops/WaveDropReactions.tsxcomponents/brain/left-sidebar/web/WebDirectMessagesList.tsx__tests__/components/waves/drops/WaveDropReactions.test.tsxhooks/useIsTouchDevice.tscomponents/brain/left-sidebar/web/WebUnifiedWavesListWaves.tsx
**/{__tests__,*.test.{tsx,ts}}
📄 CodeRabbit inference engine (AGENTS.md)
Place tests in
__tests__/directory or asComponentName.test.tsxalongside the component
Files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsx__tests__/hooks/useIsTouchDevice.test.ts__tests__/components/waves/drops/WaveDropReactions.test.tsx
**/*.{test,spec}.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Mock external dependencies and APIs in tests
Files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsx__tests__/hooks/useIsTouchDevice.test.ts__tests__/components/waves/drops/WaveDropReactions.test.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer direct named imports from React (
useMemo,useRef,FC) overReact.namespace usage
Files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsxcomponents/waves/drops/WaveDropReactionsDetailDialog.tsx__tests__/hooks/useIsTouchDevice.test.tscomponents/waves/drops/WaveDropReactions.tsxcomponents/brain/left-sidebar/web/WebDirectMessagesList.tsx__tests__/components/waves/drops/WaveDropReactions.test.tsxhooks/useIsTouchDevice.tscomponents/brain/left-sidebar/web/WebUnifiedWavesListWaves.tsx
**/*.{ts,js}
📄 CodeRabbit inference engine (AGENTS.md)
When parsing Seize URLs or similar, fail fast if base origin is unavailable instead of falling back to placeholder origins
Files:
__tests__/hooks/useIsTouchDevice.test.tshooks/useIsTouchDevice.ts
🧠 Learnings (18)
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/__tests__/**/*.{test,spec}.{ts,tsx,js,jsx}|**/*.{test,spec}.{ts,tsx,js,jsx} : Place tests in `__tests__/` directory or as `ComponentName.test.tsx` files. Mock external dependencies and APIs in tests.
Applied to files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsx__tests__/hooks/useIsTouchDevice.test.ts__tests__/components/waves/drops/WaveDropReactions.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Write one behaviour per test with clear, descriptive test names
Applied to files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsx__tests__/hooks/useIsTouchDevice.test.ts__tests__/components/waves/drops/WaveDropReactions.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{test,spec}.{tsx,ts} : Mock external dependencies and APIs in tests
Applied to files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsx__tests__/hooks/useIsTouchDevice.test.ts__tests__/components/waves/drops/WaveDropReactions.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Use realistic production-like data in tests
Applied to files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsx__tests__/hooks/useIsTouchDevice.test.ts__tests__/components/waves/drops/WaveDropReactions.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Test accessibility with keyboard navigation and screen reader compatibility
Applied to files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsx__tests__/hooks/useIsTouchDevice.test.ts
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Avoid double negatives in code; prefer explicit statements and use optional chaining (`?.`)
Applied to files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsx__tests__/hooks/useIsTouchDevice.test.ts__tests__/components/waves/drops/WaveDropReactions.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Follow Arrange – Act – Assert pattern in test structure
Applied to files:
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsx__tests__/hooks/useIsTouchDevice.test.ts
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Use `globalThis.fetch()` instead of direct `fetch()` calls
Applied to files:
__tests__/hooks/useIsTouchDevice.test.ts
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{tsx,jsx},!**/__tests__/**,!**/__mocks__/** : Use semantic HTML (`<label>`, `<output>`) over ARIA attributes when possible
Applied to files:
__tests__/hooks/useIsTouchDevice.test.ts__tests__/components/waves/drops/WaveDropReactions.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Use `Element.remove()` method instead of `parentNode.removeChild(element)`
Applied to files:
__tests__/hooks/useIsTouchDevice.test.ts__tests__/components/waves/drops/WaveDropReactions.test.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,jsx} : Use internal links via `<Link>` component from Next.js instead of `<a>` tags
Applied to files:
components/waves/drops/WaveDropReactions.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,ts} : Use TypeScript with React functional components and hooks
Applied to files:
components/waves/drops/WaveDropReactions.tsxcomponents/brain/left-sidebar/web/WebDirectMessagesList.tsxhooks/useIsTouchDevice.tscomponents/brain/left-sidebar/web/WebUnifiedWavesListWaves.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
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:
__tests__/components/waves/drops/WaveDropReactions.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Limit function cognitive complexity to 15 or less; extract deep ternaries (>3 levels)
Applied to files:
__tests__/components/waves/drops/WaveDropReactions.test.tsx
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__mocks__/**/*.{ts,tsx,js} : Jest automatically picks up mocks from `__mocks__` directory
Applied to files:
__tests__/components/waves/drops/WaveDropReactions.test.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Applied to files:
hooks/useIsTouchDevice.tscomponents/brain/left-sidebar/web/WebUnifiedWavesListWaves.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Use `useEffectEvent` for non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Applied to files:
hooks/useIsTouchDevice.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 **/*.{ts,tsx,js,jsx} : Include all required imports and ensure proper naming of key components
Applied to files:
components/brain/left-sidebar/web/WebUnifiedWavesListWaves.tsx
🧬 Code graph analysis (5)
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsx (3)
contexts/EmojiContext.tsx (1)
useEmoji(156-162)components/waves/drops/WaveDropReactionsDetailDialog.tsx (1)
WaveDropReactionsDetailDialog(19-52)tests/testHelpers.ts (1)
expect(15-15)
components/waves/drops/WaveDropReactionsDetailDialog.tsx (4)
generated/models/ApiDropReaction.ts (1)
ApiDropReaction(17-45)components/mobile-wrapper-dialog/MobileWrapperDialog.tsx (1)
MobileWrapperDialog(10-138)contexts/EmojiContext.tsx (1)
useEmoji(156-162)helpers/image.helpers.ts (1)
getScaledImageUri(17-45)
__tests__/hooks/useIsTouchDevice.test.ts (1)
hooks/useIsTouchDevice.ts (1)
useIsTouchDevice(5-26)
components/brain/left-sidebar/web/WebDirectMessagesList.tsx (1)
components/brain/left-sidebar/waves/UnifiedWavesListLoader.tsx (1)
UnifiedWavesListLoader(9-30)
components/brain/left-sidebar/web/WebUnifiedWavesListWaves.tsx (1)
hooks/useIsTouchDevice.ts (1)
useIsTouchDevice(5-26)
⏰ 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 (13)
components/brain/left-sidebar/web/WebUnifiedWavesListWaves.tsx (1)
3-7: LGTM! Touch device detection integrated correctly.The addition of
useIsTouchDevicehook and conditional tooltip rendering aligns well with the PR objectives. The tooltip is appropriately hidden on touch devices where hover interactions are not applicable.Also applies to: 11-11, 14-14, 17-18, 23-25, 82-82, 267-285
hooks/useIsTouchDevice.ts (1)
1-26: LGTM! Solid touch device detection implementation.The hook correctly:
- Uses "use client" directive for client-side execution
- Safely handles SSR by checking window existence
- Covers multiple touch detection methods (ontouchstart, maxTouchPoints, matchMedia)
- Uses empty dependency array to run detection once on mount
__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsx (1)
1-183: LGTM! Comprehensive test coverage for the detail dialog.The test suite thoroughly covers:
- Dialog open/close states
- Reaction sidebar rendering and interaction
- Profile list rendering and navigation
- Avatar and link rendering
- Callback invocations
Tests follow the AAA pattern, use descriptive names, and include realistic data.
__tests__/components/waves/drops/WaveDropReactions.test.tsx (1)
26-42: LGTM! Excellent test coverage for new touch and interaction features.The new mocks and test cases effectively cover:
- Touch device detection behavior
- Long-press interaction handlers
- Tooltip content with "and X more" functionality
- Detail dialog opening on interaction
- Profile links rendering in tooltips
All tests follow the AAA pattern and include appropriate assertions.
Also applies to: 243-411
components/waves/drops/WaveDropReactionsDetailDialog.tsx (3)
19-52: Well-structured dialog component with proper state management and memoization.The two-pane layout with
ReactionsSidebarandProfilesListis clean. Good use ofuseMemofor derivingselectedReactionData. The component correctly handles the case whenreactionsarray might be empty via optional chaining.
79-142: Clean emoji rendering with proper fallback handling.The
ReactionButtoncomponent properly handles both custom emojis (via image) and native emojis, with anullfallback. Good use ofuseMemofor the emoji node computation.
160-206: Good conditional link rendering for profile navigation.The
ProfileItemcomponent correctly uses Next.js<Link>for navigation when a handle exists, and falls back to a plain<div>otherwise. The content extraction pattern avoids duplication.components/brain/left-sidebar/web/WebDirectMessagesList.tsx (2)
36-36: Good integration of touch device detection for tooltip behavior.Using
useIsTouchDeviceto conditionally render the tooltip (lines 187-205) is a clean approach to avoid unnecessary tooltips on touch devices where hover interactions don't make sense.
40-40: Proper typing for the list ref handle.Good use of the exported handle type
WebUnifiedWavesListWavesHandlefor proper TypeScript type safety with theuseRef.components/waves/drops/WaveDropReactions.tsx (4)
89-119: Well-implemented long-press touch handling.The touch handlers are properly wrapped with
stopPropagationto prevent event bubbling. UsinguseLongPressInteractionhook for touch device long-press detection is a clean abstraction. ThelongPressTriggeredcheck inhandleClick(lines 318-320) correctly prevents the click action from firing after a long press.
41-68: Clean dialog state management with proper memoization.Good use of
useCallbackforhandleOpenDialogandhandleCloseDialogto maintain stable function references. The dialog state is properly lifted toWaveDropReactionsand passed down to individualWaveDropReactioncomponents.
360-372: Good tooltip profile display pattern.Displaying up to 3 profiles with a clickable "and N others" link that opens the full dialog is a clean UX pattern. The
useMemoanduseCallbackhooks are appropriately used.
418-470: Well-structured tooltip with profile links.The tooltip properly uses Next.js
<Link>for profile navigation, handles comma separation correctly, and provides a clickable "others" button to open the detail dialog. Good accessibility withtype="button"on the button element.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
__tests__/hooks/useIsTouchDevice.test.ts (1)
29-95: Remove unnecessaryact()andjest.runAllTimers?.()calls.Tests 2-4 wrap
jest.runAllTimers?.()insideact(), but the hook doesn't use timers andrenderHookautomatically waits for effects and state updates. These calls do nothing and create inconsistency with test 5, which works correctly without them.♻️ Simplify by removing unnecessary act() blocks
The tests will be clearer and more consistent:
Test 2 (lines 40-46):
const { result } = renderHook(() => useIsTouchDevice()); - -act(() => { - jest.runAllTimers?.(); -}); expect(result.current).toBe(true);Test 3 (lines 63-69):
const { result } = renderHook(() => useIsTouchDevice()); - -act(() => { - jest.runAllTimers?.(); -}); expect(result.current).toBe(true);Test 4 (lines 88-94):
const { result } = renderHook(() => useIsTouchDevice()); - -act(() => { - jest.runAllTimers?.(); -}); expect(result.current).toBe(true);
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
__tests__/hooks/useIsTouchDevice.test.ts
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{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}: Remove unnecessary Effects. If the Effect's only job is to derive or sync internal state, calculate during render or useuseMemoinstead.
UseuseEffectEventfor non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Use explicit caching with"use cache"directive at the top of Server Components, routes, or functions. ConfigurecacheComponents: trueinnext.config.tsas needed.
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects; if the Effect only derives state, compute during render instead
UseuseEffectEventwhen listening to external events but needing the latest props/state without re-running the Effect
Move data fetching from client Effects to Server Components; mutations go through Server Actions ('use server')
Files:
__tests__/hooks/useIsTouchDevice.test.ts
**/*.{test,spec}.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run testto execute all Jest tests and enforce ≥80% line coverage for files changed sincemain. Tests must pass and coverage threshold must be met before completing any task.Enforce ≥ 80% line coverage for files changed since
mainby runningnpm run test
Files:
__tests__/hooks/useIsTouchDevice.test.ts
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run lintto ensure code satisfies ESLint (Next's Core Web Vitals + React Hooks). Code must pass linting before completing any task.
**/*.{js,ts,jsx,tsx}: Code must satisfy ESLint with Next's Core Web Vitals and React Hooks rules by runningnpm run lint
Do not addeslint-disablecomments unless explicitly instructed; prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions
Files:
__tests__/hooks/useIsTouchDevice.test.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Files:
__tests__/hooks/useIsTouchDevice.test.ts
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with React functional components and hooks
Files:
__tests__/hooks/useIsTouchDevice.test.ts
**/{__tests__,*.test.{tsx,ts}}
📄 CodeRabbit inference engine (AGENTS.md)
Place tests in
__tests__/directory or asComponentName.test.tsxalongside the component
Files:
__tests__/hooks/useIsTouchDevice.test.ts
**/*.{test,spec}.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Mock external dependencies and APIs in tests
Files:
__tests__/hooks/useIsTouchDevice.test.ts
**/*.{ts,js}
📄 CodeRabbit inference engine (AGENTS.md)
When parsing Seize URLs or similar, fail fast if base origin is unavailable instead of falling back to placeholder origins
Files:
__tests__/hooks/useIsTouchDevice.test.ts
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer direct named imports from React (
useMemo,useRef,FC) overReact.namespace usage
Files:
__tests__/hooks/useIsTouchDevice.test.ts
🧠 Learnings (10)
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Test accessibility with keyboard navigation and screen reader compatibility
Applied to files:
__tests__/hooks/useIsTouchDevice.test.ts
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/__tests__/**/*.{test,spec}.{ts,tsx,js,jsx}|**/*.{test,spec}.{ts,tsx,js,jsx} : Place tests in `__tests__/` directory or as `ComponentName.test.tsx` files. Mock external dependencies and APIs in tests.
Applied to files:
__tests__/hooks/useIsTouchDevice.test.ts
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Write one behaviour per test with clear, descriptive test names
Applied to files:
__tests__/hooks/useIsTouchDevice.test.ts
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{test,spec}.{tsx,ts} : Mock external dependencies and APIs in tests
Applied to files:
__tests__/hooks/useIsTouchDevice.test.ts
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{tsx,jsx},!**/__tests__/**,!**/__mocks__/** : Use semantic HTML (`<label>`, `<output>`) over ARIA attributes when possible
Applied to files:
__tests__/hooks/useIsTouchDevice.test.ts
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Follow Arrange – Act – Assert pattern in test structure
Applied to files:
__tests__/hooks/useIsTouchDevice.test.ts
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/*.{ts,tsx,js},!**/__tests__/**,!**/__mocks__/**,!**/*.d.ts : Use `globalThis.fetch()` instead of direct `fetch()` calls
Applied to files:
__tests__/hooks/useIsTouchDevice.test.ts
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : Use realistic production-like data in tests
Applied to files:
__tests__/hooks/useIsTouchDevice.test.ts
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,ts} : Use TypeScript with React functional components and hooks
Applied to files:
__tests__/hooks/useIsTouchDevice.test.ts
📚 Learning: 2025-12-30T14:32:37.305Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: __tests__/AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:37.305Z
Learning: Applies to __tests__/**/__tests__/**/*.{ts,tsx,js} : All tests must live in `__tests__` directory, mirroring source folder structure (`components`, `contexts`, `hooks`, `utils`)
Applied to files:
__tests__/hooks/useIsTouchDevice.test.ts
🧬 Code graph analysis (1)
__tests__/hooks/useIsTouchDevice.test.ts (1)
hooks/useIsTouchDevice.ts (1)
useIsTouchDevice(5-26)
⏰ 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)
__tests__/hooks/useIsTouchDevice.test.ts (3)
4-17: LGTM! Proper test isolation.The setup and teardown correctly preserve and restore global state between tests, preventing test pollution.
19-27: LGTM! Edge case correctly tested.This test properly verifies the hook returns
falsewhen the window is unavailable, which aligns with the hook's guard condition.
97-114: LGTM! Correctly tests the negative case.This test properly verifies the hook returns
falsewhen no touch indicators are present, and demonstrates thatact()is unnecessary (unlike tests 2-4).
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components/waves/drops/WaveDropActionsAddReaction.tsx (1)
25-25: Prefer directFCimport overReact.FCnamespace usage.As per coding guidelines, import
FCdirectly from React for consistency with the other hook imports.♻️ Refactor to use direct FC import
Update the import statement on line 15:
-import React, { useCallback, useEffect, useRef, useState } from "react"; +import { FC, useCallback, useEffect, useRef, useState } from "react";Then update line 25:
-const WaveDropActionsAddReaction: React.FC<{ +const WaveDropActionsAddReaction: FC<{Based on learnings: Direct named imports from React are preferred over namespace usage.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
__tests__/components/waves/drops/WaveDropActionsAddReaction.test.tsx__tests__/components/waves/drops/WaveDropReactions.test.tsx__tests__/components/waves/drops/WaveDropReactionsDetailDialog.test.tsxcomponents/waves/drops/WaveDropActionsAddReaction.tsx
💤 Files with no reviewable changes (1)
- tests/components/waves/drops/WaveDropActionsAddReaction.test.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- tests/components/waves/drops/WaveDropReactions.test.tsx
- tests/components/waves/drops/WaveDropReactionsDetailDialog.test.tsx
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{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}: Remove unnecessary Effects. If the Effect's only job is to derive or sync internal state, calculate during render or useuseMemoinstead.
UseuseEffectEventfor non-reactive logic inside Effects to read the latest props/state without turning them into dependencies or causing unnecessary re-runs.
Use explicit caching with"use cache"directive at the top of Server Components, routes, or functions. ConfigurecacheComponents: trueinnext.config.tsas needed.
**/*.{ts,tsx,js,jsx}: Remove unnecessary Effects; if the Effect only derives state, compute during render instead
UseuseEffectEventwhen listening to external events but needing the latest props/state without re-running the Effect
Move data fetching from client Effects to Server Components; mutations go through Server Actions ('use server')
Files:
components/waves/drops/WaveDropActionsAddReaction.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
**/*.{tsx,jsx}: Use internal links via<Link>component from Next.js instead of<a>tags
Replace<img>elements with<Image />fromnext/image
Files:
components/waves/drops/WaveDropActionsAddReaction.tsx
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Run
npm run lintto ensure code satisfies ESLint (Next's Core Web Vitals + React Hooks). Code must pass linting before completing any task.
**/*.{js,ts,jsx,tsx}: Code must satisfy ESLint with Next's Core Web Vitals and React Hooks rules by runningnpm run lint
Do not addeslint-disablecomments unless explicitly instructed; prefer refactors aligned with React 19.2, React Compiler, and Next.js 16 conventions
Files:
components/waves/drops/WaveDropActionsAddReaction.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
**/*.{jsx,tsx}: Replace<img>elements with<Image />fromnext/imageto comply with Next.js ESLint rule@next/next/no-img-element.
Use<Link href="/path">from Next.js for internal navigation instead of raw<a>tags to comply with@next/next/no-html-link-for-pages.
Files:
components/waves/drops/WaveDropActionsAddReaction.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (GEMINI.md)
Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Files:
components/waves/drops/WaveDropActionsAddReaction.tsx
**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript with React functional components and hooks
Files:
components/waves/drops/WaveDropActionsAddReaction.tsx
**/*.{tsx,ts,jsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer direct named imports from React (
useMemo,useRef,FC) overReact.namespace usage
Files:
components/waves/drops/WaveDropActionsAddReaction.tsx
🧠 Learnings (5)
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,ts,jsx,js} : Prefer direct named imports from React (`useMemo`, `useRef`, `FC`) over `React.` namespace usage
Applied to files:
components/waves/drops/WaveDropActionsAddReaction.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 **/*.{ts,tsx,js,jsx} : Include all required imports and ensure proper naming of key components
Applied to files:
components/waves/drops/WaveDropActionsAddReaction.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
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/waves/drops/WaveDropActionsAddReaction.tsx
📚 Learning: 2025-12-30T14:31:53.006Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: GEMINI.md:0-0
Timestamp: 2025-12-30T14:31:53.006Z
Learning: Applies to **/*.{ts,tsx} : Use TypeScript with React functional components and hooks. Follow existing code style and naming conventions.
Applied to files:
components/waves/drops/WaveDropActionsAddReaction.tsx
📚 Learning: 2025-12-30T14:32:19.360Z
Learnt from: CR
Repo: 6529-Collections/6529seize-frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-30T14:32:19.360Z
Learning: Applies to **/*.{tsx,ts} : Use TypeScript with React functional components and hooks
Applied to files:
components/waves/drops/WaveDropActionsAddReaction.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/waves/drops/WaveDropActionsAddReaction.tsx (1)
4-23: LGTM! Import organization aligns well with feature additions.The import reorganization is clean and properly groups type imports, runtime dependencies, and utilities. All added imports support the touch-detection and reaction dialog features mentioned in the PR objectives.
2 participants
Summary by CodeRabbit
New Features
Improvements
Tests
✏️ Tip: You can customize this high-level summary in your review settings.