Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Modernize overlay architecture and improve bottom sheet UX #1479

Merged
merged 8 commits into from
Jan 7, 2025

Conversation

lourou
Copy link
Member

@lourou lourou commented Jan 7, 2025

This PR modernizes our overlay architecture by partially removing the Portal dependency and improving the bottom sheet implementation. It also fixes the reaction context menu that has not worked since the Expo 52 update because of the use of Portal and incompatibility with our ThemeProvider.

Key Changes:

  • Remove the unmaintained @gorhom/portal dependency in favor of React Native's Modal (still needed by some other parts of the app)
  • Replace BottomSheetModal with standard BottomSheet wrapped in Modal
  • Improve bottom sheet behavior and responsiveness:
    • Fix snap points by disabling dynamic sizing
    • Improve dismiss/reopen flow with proper animation handling
    • Fix reactions filter initialization on drawer open

Summary by CodeRabbit

Release Notes

  • New Features

    • Enhanced bottom sheet and modal interactions across the application
    • Improved theme-based styling for components
    • Introduced a new BottomSheet component for customizable styles
  • Improvements

    • Updated message context menu display to a modal approach
    • Refined drawer rendering with improved visibility and interaction handling
    • Streamlined component visibility management for message reactions
  • Technical Updates

    • Removed portal-based rendering in favor of modal components
    • Introduced new state management for message reactions
  • Dependency Changes

    • Updated @gorhom/bottom-sheet package
    • Removed @gorhom/portal package

Copy link
Contributor

coderabbitai bot commented Jan 7, 2025

Walkthrough

This pull request introduces a redesign of UI components, transitioning from portal-based displays to modal-based implementations. Key changes include the replacement of Portal components with Modal components across various files, such as the conversation message context menu, drawer, and reaction drawer. Additionally, new state management approaches using Zustand stores are implemented, enhancing the handling of message reactions. The updates also involve improvements to theming logic and animated transitions, maintaining overall functionality while enhancing user interaction and presentation.

Changes

File Change Summary
features/conversation/conversation-message/conversation-message-context-menu/conversation-message-context-menu.tsx Replaced Portal with Modal, added animated transitions using react-native-reanimated.
App.tsx Removed PortalProvider, made App and Snackbars direct children of BottomSheetModalProvider.
components/Drawer.tsx Replaced Portal with Modal, maintained drawer context and interaction handling.
design-system/BlurView.tsx Added theme-based tint prop logic.
design-system/BottomSheet/BottomSheet.tsx Introduced new memoized BottomSheet component with theming support.
features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.service.ts Simplified error handling, updated state management for drawer visibility.
features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.store.ts Created new Zustand store for managing message reactions.
features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.tsx Replaced BottomSheetModal with Modal, updated visibility and interaction logic.
package.json Updated @gorhom/bottom-sheet version from ^5.0.2 to 5.0.6, removed @gorhom/portal.

Possibly related PRs

Suggested reviewers

  • thierryskoda
  • alexrisch

Poem

🐰 Modals dance where portals once stood tall,
Animated views now answer the call!
Themes shift like magic, components so bright,
A rabbit's design system takes flight! 🚀
Zustand stores whisper their reactive delight! 🎉


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (1)
features/conversation/conversation-message/conversation-message-context-menu/conversation-message-context-menu.tsx (1)

129-197: Consider adding accessibility support

The Modal implementation could benefit from accessibility enhancements:

  • Add accessibilityViewIsModal prop to indicate modal behavior to screen readers
  • Add accessibilityLiveRegion for dynamic content updates
 <Modal
   visible={true}
   transparent={true}
   onRequestClose={handlePressBackdrop}
   animationType="fade"
   statusBarTranslucent={Platform.OS === "android"}
   supportedOrientations={["portrait", "landscape"]}
+  accessibilityViewIsModal={true}
+  accessibilityLiveRegion="polite"
 >
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2b6b24b and c00780c.

📒 Files selected for processing (2)
  • features/conversation/conversation-message/conversation-message-context-menu/conversation-message-context-menu-backdrop.tsx (2 hunks)
  • features/conversation/conversation-message/conversation-message-context-menu/conversation-message-context-menu.tsx (3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
  • GitHub Check: tsc
  • GitHub Check: performance-test
  • GitHub Check: test
  • GitHub Check: lint
🔇 Additional comments (3)
features/conversation/conversation-message/conversation-message-context-menu/conversation-message-context-menu-backdrop.tsx (1)

4-4: LGTM! Clean theme integration

The theme integration is well-implemented, making the backdrop's blur effect responsive to the app's theme. The conditional tint provides appropriate visual feedback in both light and dark modes.

Also applies to: 14-14, 17-17

features/conversation/conversation-message/conversation-message-context-menu/conversation-message-context-menu.tsx (2)

129-136: LGTM! Well-structured Modal migration

The Portal to Modal migration is well-implemented with proper configuration:

  • Transparent background
  • Backdrop press handling
  • Platform-specific status bar handling
  • Orientation support

137-140: Verify animation performance on low-end devices

The animation durations look good, but we should verify the performance on low-end devices.

✅ Verification successful

Animation implementation looks optimal for performance

The 200ms fade animation is appropriate for a context menu overlay:

  • Uses performant react-native-reanimated library
  • Duration is shorter than other animations in the codebase (500ms)
  • Simple fade effect on a small UI element
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for other FadeIn/FadeOut animations in the codebase to compare durations
rg --type typescript "FadeIn.duration|FadeOut.duration" -B 2 -A 2

Length of output: 102


Script:

#!/bin/bash
# Search for FadeIn/FadeOut animations without file type restriction
rg "FadeIn\.duration|FadeOut\.duration" -B 2 -A 2

# Search for animation-related imports to understand the context
rg "import.*Animated" -B 0 -A 1

# Search for other duration-based animations
rg "\.duration\((\d+)\)" -B 2 -A 2

Length of output: 15175

Copy link
Contributor

github-actions bot commented Jan 7, 2025

Performance Comparison Report

  • Current: bafd692 - 2025-01-07 19:40:31Z
  • Baseline: main (2b6b24b) - 2025-01-07 19:38:57Z

Significant Changes To Duration

There are no entries

Meaningless Changes To Duration

Show entries
Name Type Duration Count
Avatar Image 10 runs render 0.8 ms → 0.9 ms (+0.1 ms, +12.5%) 1 → 1
Avatar Image 50 runs render 0.8 ms → 0.8 ms (+0.1 ms, +7.9%) 1 → 1
Empty Avatar 10 runs render 1.0 ms → 1.4 ms (+0.4 ms, +40.0%) 🔴 1 → 1
Empty Avatar 50 runs render 1.2 ms → 1.2 ms 1 → 1
Text Component with color prop - 10 runs render 0.9 ms → 0.3 ms (-0.6 ms, -66.7%) 🟢 1 → 1
Text Component with default props - 10 runs render 1.2 ms → 1.0 ms (-0.2 ms, -16.7%) 🟢 1 → 1
Text Component with translation key - 10 runs render 0.6 ms → 0.5 ms (-0.1 ms, -16.7%) 🟢 1 → 1
Text Component with weight and size - 10 runs render 0.8 ms → 0.5 ms (-0.3 ms, -37.5%) 🟢 1 → 1
Show details
Name Type Duration Count
Avatar Image 10 runs render Baseline
Mean: 0.8 ms
Stdev: 0.4 ms (52.7%)
Runs: 1 0 1 1 1 1 0 1 1 1
Warmup runs: 1

Current
Mean: 0.9 ms
Stdev: 0.3 ms (35.1%)
Runs: 1 1 1 1 1 1 1 1 0 1
Warmup runs: 1
Baseline
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1
Render issues:

Current
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1
Render issues:
Avatar Image 50 runs render Baseline
Mean: 0.8 ms
Stdev: 0.4 ms (56.8%)
Runs: 0 1 1 1 0 1 1 1 1 1 0 1 1 1 1 1 1 1 1 0 1 1 1 1 1 1 1 1 1 1 1 0 0 1 0 0 1 1 1 1 1 0 0 1 0 1 1 0 1 1
Warmup runs: 1

Current
Mean: 0.8 ms
Stdev: 0.4 ms (47.3%)
Runs: 1 0 1 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 1 1 1 1 1 1 1 1 1 1 1 0 0 0 1 0 1 1 1 1 1 0 1 1 1 1 1 1
Warmup runs: 0
Baseline
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
Render issues:

Current
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
Render issues:
Empty Avatar 10 runs render Baseline
Mean: 1.0 ms
Stdev: 0.0 ms (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1
Warmup runs: 2

Current
Mean: 1.4 ms
Stdev: 0.5 ms (36.9%)
Runs: 2 1 2 1 1 2 1 2 1 1
Warmup runs: 3
Baseline
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1
Render issues:

Current
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1
Render issues:
Empty Avatar 50 runs render Baseline
Mean: 1.2 ms
Stdev: 0.4 ms (31.9%)
Runs: 1 2 1 1 1 1 2 1 1 1 1 1 1 2 1 1 2 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 2 2 1 1 2 1 1 1 1 1 1 1 1 1 1 2
Warmup runs: 1

Current
Mean: 1.2 ms
Stdev: 0.4 ms (31.9%)
Runs: 2 2 1 1 2 1 1 1 1 2 1 2 1 1 1 1 1 2 1 2 1 1 1 1 1 1 1 1 2 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
Warmup runs: 1
Baseline
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
Render issues:

Current
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
Render issues:
Text Component with color prop - 10 runs render Baseline
Mean: 0.9 ms
Stdev: 0.3 ms (35.1%)
Runs: 1 1 1 1 1 1 1 1 0 1
Warmup runs: 1

Current
Mean: 0.3 ms
Stdev: 0.5 ms (161.0%)
Runs: 0 0 1 0 1 1 0 0 0 0
Warmup runs: 1
Baseline
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1
Render issues:

Current
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1
Render issues:
Text Component with default props - 10 runs render Baseline
Mean: 1.2 ms
Stdev: 0.6 ms (52.7%)
Runs: 2 1 2 1 2 1 1 1 0 1
Warmup runs: 5

Current
Mean: 1.0 ms
Stdev: 0.5 ms (47.1%)
Runs: 2 1 1 1 1 0 1 1 1 1
Warmup runs: 4
Baseline
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1
Render issues:

Current
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1
Render issues:
Text Component with translation key - 10 runs render Baseline
Mean: 0.6 ms
Stdev: 0.5 ms (86.1%)
Runs: 0 1 1 0 1 0 1 1 1 0
Warmup runs: 1

Current
Mean: 0.5 ms
Stdev: 0.5 ms (105.4%)
Runs: 1 1 0 1 0 1 0 1 0 0
Warmup runs: 1
Baseline
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1
Render issues:

Current
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1
Render issues:
Text Component with weight and size - 10 runs render Baseline
Mean: 0.8 ms
Stdev: 0.4 ms (52.7%)
Runs: 1 0 1 1 1 1 1 1 0 1
Warmup runs: 1

Current
Mean: 0.5 ms
Stdev: 0.5 ms (105.4%)
Runs: 0 1 1 1 1 0 0 0 0 1
Warmup runs: 1
Baseline
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1
Render issues:

Current
Mean: 1
Stdev: 0 (0.0%)
Runs: 1 1 1 1 1 1 1 1 1 1
Render issues:

Render Count Changes

There are no entries

Render Issues

There are no entries

Added Scenarios

There are no entries

Removed Scenarios

There are no entries

Generated by 🚫 dangerJS against eb011f8

- Remove @gorhom/portal dependency
- Replace Portal usage with React Native Modal
- Replace BottomSheetModal with standard BottomSheet
- Fix bottom sheet behavior & responsiveness
  - Fix snap points by disabling dynamic sizing
  - Improve dismiss/reopen flow
@lourou lourou force-pushed the lr/migrate-away-from-portal branch from c6465b4 to c5659c7 Compare January 7, 2025 15:05
lourou added 2 commits January 7, 2025 16:08
- Set default filter to "All" when opening reactions drawer
- Fix empty reactions list on subsequent drawer opens
@lourou lourou marked this pull request as ready for review January 7, 2025 15:12
@lourou lourou requested a review from a team as a code owner January 7, 2025 15:12
@lourou lourou changed the title Migrate away from Portal Refactor: Modernize overlay architecture and improve bottom sheet UX Jan 7, 2025
@lourou lourou changed the title Refactor: Modernize overlay architecture and improve bottom sheet UX refactor: Modernize overlay architecture and improve bottom sheet UX Jan 7, 2025
@lourou lourou mentioned this pull request Jan 7, 2025
45 tasks
components/Drawer.tsx Outdated Show resolved Hide resolved
components/Drawer.tsx Show resolved Hide resolved
design-system/BottomSheet/BottomSheet.tsx Outdated Show resolved Hide resolved
design-system/BottomSheet/BottomSheet.tsx Outdated Show resolved Hide resolved
Comment on lines 74 to 77
onChange={(index) => {
if (index === -1) {
handleDismiss();
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

Doens'T make sense. Same as other comment with onAnimate

Copy link
Member Author

Choose a reason for hiding this comment

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

I do this to make sure to dismiss the wrapping modal when the bottom sheet is dismissed

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 4

♻️ Duplicate comments (4)
features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.service.ts (1)

11-11: 🛠️ Refactor suggestion

Remove unnecessary type assertions

The type assertions to IMessageReactionsStore are unnecessary as Zustand's create function already provides proper typing for the store state.

-  const store = useMessageReactionsStore.getState() as IMessageReactionsStore;
+  const store = useMessageReactionsStore.getState();

Also applies to: 18-18

features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.tsx (3)

13-13: 🛠️ Refactor suggestion

Use the custom 'TouchableHighlight' component.

As previously suggested, please import and use our custom TouchableHighlight component instead of the one from react-native.

Apply this diff to import the custom component:

-import {
-  TextStyle,
-  TouchableHighlight,
-  ViewStyle,
-  Modal,
-  Platform,
-} from "react-native";
+import { TextStyle, ViewStyle, Modal, Platform } from "react-native";
+import TouchableHighlight from "@components/TouchableHighlight";

74-77: 🛠️ Refactor suggestion

Review the logic in 'onChange' callback regarding 'index === -1'.

As previously noted, the condition index === -1 may not make sense in this context. Please verify whether this check is necessary and adjust the logic accordingly.

🧰 Tools
🪛 GitHub Check: tsc

[failure] 74-74:
Parameter 'index' implicitly has an 'any' type.


79-84: 🛠️ Refactor suggestion

Re-evaluate the logic in 'onAnimate' callback regarding 'toIndex === -1'.

As previously noted, the condition toIndex === -1 may be unnecessary because if toIndex is -1, the bottom sheet is already closing. Consider simplifying the logic accordingly.

🧰 Tools
🪛 GitHub Check: tsc

[failure] 79-79:
Parameter 'fromIndex' implicitly has an 'any' type.


[failure] 79-79:
Parameter 'toIndex' implicitly has an 'any' type.

🧹 Nitpick comments (6)
features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.store.ts (2)

4-9: Consider removing the "I" prefix from interface name

The "I" prefix for interfaces is considered outdated in modern TypeScript. Consider renaming IMessageReactionsStore to MessageReactionsStore to align with current TypeScript conventions.

-export type IMessageReactionsStore = {
+export type MessageReactionsStore = {

25-35: Consider extracting initial state to avoid duplication

The initial state is duplicated between the store creation and reset function. Consider extracting it to a constant to maintain DRY principles and ease future maintenance.

+const initialState = {
+  rolledUpReactions: {
+    preview: [],
+    detailed: [],
+    totalCount: 0,
+    userReacted: false,
+  },
+  isVisible: false,
+};

 export const useMessageReactionsStore = create<IMessageReactionsStore>(
-  (set) => ({
-    rolledUpReactions: {
-      preview: [],
-      detailed: [],
-      totalCount: 0,
-      userReacted: false,
-    },
-    isVisible: false,
+  (set) => ({
+    ...initialState,
     setRolledUpReactions: (reactions) => set({ rolledUpReactions: reactions }),
     setIsVisible: (isVisible) => set({ isVisible }),
   })
 );

 export function resetMessageReactionsStore() {
-  useMessageReactionsStore.setState({
-    rolledUpReactions: {
-      preview: [],
-      detailed: [],
-      totalCount: 0,
-      userReacted: false,
-    },
-    isVisible: false,
-  });
+  useMessageReactionsStore.setState(initialState);
 }
features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.service.ts (1)

Line range hint 25-27: Consider removing redundant reset function

The resetMessageReactionsDrawer function appears redundant as it simply forwards the call to resetMessageReactionsStore. Consider removing it and using resetMessageReactionsStore directly at call sites.

design-system/BlurView.tsx (1)

4-4: LGTM! Consider adding prop type documentation.

The theme-based tint implementation looks good and aligns well with the modernization efforts. The dynamic tint selection based on the theme enhances the component's adaptability.

Consider adding JSDoc documentation for the tint prop to help other developers understand its purpose and accepted values:

export type IBlurViewProps = IVStackProps &
-  AnimatedProps<BlurViewProps> & { isAbsolute?: boolean };
+  AnimatedProps<BlurViewProps> & {
+    /** Whether the BlurView should be positioned absolutely */
+    isAbsolute?: boolean;
+    /** Override the default theme-based tint. Accepts 'light' | 'dark' */
+    tint?: BlurViewProps['tint'];
+  };

Also applies to: 17-17, 20-21, 25-25

package.json (1)

49-49: Consider documenting the reason for version pinning.

The change from ^5.0.2 to 5.0.6 for @gorhom/bottom-sheet pins the version. While this can help with stability, it's good practice to document the reasoning.

Consider adding a comment in the PR description or commit message explaining why this specific version was chosen.

features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.tsx (1)

71-71: Remove unnecessary prop 'animateOnMount'.

The prop animateOnMount defaults to true, so it can be omitted unless you need to set it to false.

Apply this diff to remove the unnecessary prop:

-              animateOnMount
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c00780c and 0403718.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (9)
  • App.tsx (1 hunks)
  • components/Drawer.tsx (2 hunks)
  • design-system/BlurView.tsx (2 hunks)
  • design-system/BottomSheet/BottomSheet.tsx (1 hunks)
  • features/conversation/conversation-message/conversation-message-context-menu/conversation-message-context-menu.tsx (4 hunks)
  • features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.service.ts (2 hunks)
  • features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.store.ts (1 hunks)
  • features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.tsx (1 hunks)
  • package.json (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • features/conversation/conversation-message/conversation-message-context-menu/conversation-message-context-menu.tsx
🧰 Additional context used
🪛 GitHub Check: tsc
features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.tsx

[failure] 4-4:
Module '"@design-system/BottomSheet/BottomSheet"' has no exported member 'CustomBottomSheet'.


[failure] 74-74:
Parameter 'index' implicitly has an 'any' type.


[failure] 79-79:
Parameter 'fromIndex' implicitly has an 'any' type.


[failure] 79-79:
Parameter 'toIndex' implicitly has an 'any' type.

⏰ Context from checks skipped due to timeout of 90000ms (3)
  • GitHub Check: performance-test
  • GitHub Check: build
  • GitHub Check: build
🔇 Additional comments (7)
features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.store.ts (1)

11-23: Well-structured store implementation!

The store implementation follows Zustand best practices with proper typing and immutable state updates.

features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.service.ts (2)

8-22: Clean implementation of drawer visibility management

The implementation effectively manages drawer state using the new store, aligning well with the PR's objective of modernizing the overlay architecture.


29-35: Well-implemented selector hooks!

The selector hooks are well-designed, providing focused access to specific parts of the store state.

components/Drawer.tsx (1)

170-196: Modal implementation enhances Drawer presentation

The refactoring to use React Native's Modal component effectively replaces the Portal, providing better control over the Drawer presentation and aligning with best practices.

design-system/BottomSheet/BottomSheet.tsx (1)

1-72: 'BottomSheet' component is well-implemented

The new BottomSheet component correctly encapsulates BottomSheetBase and integrates theming by combining styles with useMemo. The use of forwardRef allows proper ref forwarding to the underlying component.

package.json (1)

49-49: Verify bottom-sheet version update impact.

The update to bottom-sheet v5.0.6 might include breaking changes or require additional updates.

Let's check for any potential issues:

✅ Verification successful

Bottom sheet version update appears safe due to proper abstraction

The codebase implements a robust design system wrapper around @gorhom/bottom-sheet, isolating direct usage and providing type-safe abstractions. All bottom-sheet components are properly encapsulated within the design system, making the version update less likely to cause issues.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for bottom-sheet usage patterns that might need updates
echo "Checking bottom-sheet component usage..."
ast-grep --pattern 'import { $_ } from "@gorhom/bottom-sheet"'

# Search for potential breaking patterns
echo "Checking for potential breaking patterns..."
rg "BottomSheetModal" -A 5

Length of output: 22570

features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.tsx (1)

62-62: Use 'AnimatedVStack' instead of 'Animated.View'.

As previously suggested, please use our design system components like AnimatedVStack for consistency.

Apply this diff to use AnimatedVStack:

-import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import { AnimatedVStack } from "@design-system/VStack";

...

-        <Animated.View style={{ flex: 1 }}>
+        <AnimatedVStack style={{ flex: 1 }}>

@lourou lourou requested a review from thierryskoda January 7, 2025 17:54
Copy link
Collaborator

@thierryskoda thierryskoda left a comment

Choose a reason for hiding this comment

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

Small loom for more feedback but approved because it might not be relevant and priority https://www.loom.com/share/d941330aa95c4ccb816cb845d0246a3f

@lourou
Copy link
Member Author

lourou commented Jan 7, 2025

Thanks! I've simplified the reactions drawer implementation:

  1. Removed redundant visibility state:

    • Removed isVisible from store
    • Removed local useState for visibility
    • Now using !!rolledUpReactions.totalCount
  2. Improved Modal + BottomSheet integration:

    • Removed unnecessary onRequestClose handler
    • Simplified dismiss logic
    • Better animation coordination between Modal and BottomSheet

Code is now more straightforward with fewer moving parts and clearer state management. The drawer shows when reactions are present and dismisses cleanly when the bottom sheet is closed.

@lourou lourou requested a review from thierryskoda January 7, 2025 19:37
Copy link
Collaborator

@thierryskoda thierryskoda left a comment

Choose a reason for hiding this comment

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

🚀

@lourou lourou requested a review from thierryskoda January 7, 2025 19:40
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (4)
features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.tsx (4)

15-15: Consider using a more specific type import.

Instead of importing the entire types file, consider importing just the BottomSheetMethods interface for better tree-shaking:

-import { BottomSheetMethods } from "@gorhom/bottom-sheet/lib/typescript/types";
+import type { BottomSheetMethods } from "@gorhom/bottom-sheet/lib/typescript/types";

56-60: Add type safety to the onChange callback.

Specify the type for the index parameter:

-onChange={(index) => {
+onChange={(index: number) => {

49-62: Consider optimizing BottomSheet props.

Some props might be redundant as they are already defaults:

 <BottomSheet
   ref={bottomSheetRef}
   snapPoints={["65%", "90%"]}
   index={0}
   enablePanDownToClose
   enableOverDrag={false}
-  enableDynamicSizing={false}
   onChange={(index: number) => {
     if (index === -1) {
       handleDismiss();
     }
   }}
   topInset={insets.top}
 >

67-74: Consider optimizing ScrollView performance.

Add removeClippedSubviews prop to optimize memory usage when many items are present:

 <ScrollView
   horizontal
   showsHorizontalScrollIndicator={false}
+  removeClippedSubviews={true}
   style={{
     paddingLeft: theme.spacing.lg,
     flexDirection: "row",
   }}
   scrollEnabled
 >
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0403718 and eb011f8.

📒 Files selected for processing (5)
  • components/Drawer.tsx (2 hunks)
  • features/conversation/conversation-message/conversation-message-context-menu/conversation-message-context-menu.tsx (4 hunks)
  • features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.service.ts (1 hunks)
  • features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.store.ts (1 hunks)
  • features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
  • features/conversation/conversation-message/conversation-message-context-menu/conversation-message-context-menu.tsx
  • features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.store.ts
  • components/Drawer.tsx
⏰ Context from checks skipped due to timeout of 90000ms (3)
  • GitHub Check: performance-test
  • GitHub Check: build
  • GitHub Check: test
🔇 Additional comments (3)
features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.service.ts (1)

8-13: LGTM! Clean implementation using store management.

The refactored implementation properly separates concerns by focusing on state management through Zustand store instead of handling modal refs directly.

features/conversation/conversation-message/conversation-message-reactions/conversation-message-reaction-drawer/conversation-message-reaction-drawer.tsx (2)

29-37: LGTM! Well-structured dismiss handler with clear responsibilities.

The centralized dismiss handler properly manages all cleanup tasks, preventing potential state mismatches.


131-153: LGTM! Efficient implementation of the detailed reactions list.

Good use of FlashList for virtualized rendering and proper key generation for optimal performance.

@lourou lourou merged commit 16315f9 into main Jan 7, 2025
7 of 8 checks passed
@lourou lourou deleted the lr/migrate-away-from-portal branch January 7, 2025 19:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants