refactor: migrate dropdown menu to zeego/dropdown-menu

[lawvs]

Integrate the Zeego dropdown menu into the Select and SortActionButton components, while removing the old DropdownMenu component and its dependency on react-native-context-menu-view.

Doc: https://zeego.dev/components/dropdown-menu

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
follow	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 5, 2025 4:53pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
follow-external-ssr	⬜️ Ignored (Inspect)	Visit Preview		Feb 5, 2025 4:53pm

[follow-reviewer-bot]

Suggested PR Title:

refactor(dropdown): update Select to use zeego component

Change Summary:
Refactored dropdown functionality and removed deprecated components. Updated Select component to use a new dropdown menu from 'zeego/dropdown-menu'. Improved subscription header actions for sorting functionality, enhancing the overall UI/UX of dropdown interactions.

Code Review:

Code Review: Change Requests

1. File: apps/mobile/src/components/ui/form/Select.tsx

• Lines 41-74: The usage of <DropdownMenu.CheckboxItem> for a selection mechanism implies that multiple values could be selected simultaneously. However, this component is implementing a single-select dropdown (Select<T>). Using <CheckboxItem> for single-selection creates a semantic mismatch and could lead to unexpected behavior. Replace <CheckboxItem> with an appropriate RadioItem or equivalent API from zeego/dropdown-menu that supports single-selection to better convey the intent both visually and in code.

2. File: apps/mobile/src/modules/subscription/header-actions.tsx

• Lines 23-94: Similar to the previous file, the <DropdownMenu.CheckboxItem> is being used for sub-actions in the dropdown menu. Since the SortActionButton indicates that only one option can be selected at a time (either Ascending or Descending), using <CheckboxItem> can create confusion. Replace <CheckboxItem> with an appropriate single-selection item, like RadioItem or Item, to reflect the correct choice semantics.
• Lines 54-55: The use of key values for nested dropdown items includes dynamic generation patterns like key={'SubContent/' + action.title + '/' + subAction.title}. Dynamically concatenated keys can lead to problems if action.title or subAction.title contain characters like spaces or special symbols. Use a more rigorous key generation approach to ensure keys are unique and consistent across all use cases (e.g., by hashing or normalizing titles).

3. General Concerns:

• Deprecation/Backward Compatibility: The migration from react-native-context-menu-view to zeego/dropdown-menu seems to be a significant architectural shift. Ensure there are no existing dependencies or UI components still relying on the react-native-context-menu-view package before its removal from package.json. If any dependencies exist, they need to be refactored or replaced before merging this change.

---

Summary of Requested Changes

1. Replace <CheckboxItem> with a more appropriate single-select component (e.g., <RadioItem>) in both Select.tsx and header-actions.tsx.
2. Use a safer, consistent key generation strategy for dropdown menu items in header-actions.tsx.
3. Double-check for dependencies on the removed react-native-context-menu-view package and refactor or replace them if they exist.

Let me know if further clarification is needed!