feat(mobile): Add share and collaborative list menus to mobile

[MohamedBassem]

No description provided.

[coderabbitai]

Walkthrough

This PR introduces sharing and collaborators management functionality to the mobile dashboard. It adds two new modal screens (Share List and Manage Collaborators), integrates corresponding menu actions into the list actions menu, and implements data fetching, mutations, and UI components for both features with proper error handling and user feedback.

Changes

Cohort / File(s)	Summary
Navigation and layout configuration apps/mobile/app/dashboard/_layout.tsx	Adds two new modal screen routes: lists/[slug]/share with "Share List" title and lists/[slug]/manage_collaborators with "Manage Collaborators" title, both with transparent headers and back button styling.
List actions menu apps/mobile/app/dashboard/lists/[slug].tsx	Introduces "Share" action (visible to owners only) and "Manage/View Collaborators" action (title varies by role) to ListActionsMenu with iOS icons and navigation routing to the respective modal screens.
Feature screens apps/mobile/app/dashboard/lists/[slug]/share.tsx, apps/mobile/app/dashboard/lists/[slug]/manage_collaborators.tsx	Implements two new screen components: ShareListScreen for toggling list visibility, displaying/copying public and RSS URLs, and regenerating/clearing RSS tokens; ManageCollaboratorsScreen for adding collaborators, viewing/modifying roles, revoking invitations, and removing collaborators with loading states, error handling, confirmation dialogs, and role-based access control.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

• ManageCollaboratorsScreen complexity: Multiple mutations (addCollaborator, removeCollaborator, updateCollaboratorRole, revokeInvitation) with cache invalidation, conditional rendering based on permissions, and confirmation prompts for destructive actions requiring careful verification.
• ShareListScreen logic: Data fetching coordination, RSS token state management, and clipboard operations with proper error boundaries and loading states.
• Error handling and state management: Loading spinners, error screens, empty states, and local state synchronization across both screens need thorough testing.
• User interactions: Confirm prompts, toast notifications, and role-based UI visibility require validation against design intent.

Possibly related PRs

• feat(mobile): proper handling for shared list permissions #2165: Modifies apps/mobile/app/dashboard/lists/[slug].tsx to make ListActionsMenu role-aware and adjust owner-only actions; directly related to the menu changes in this PR.

Pre-merge checks

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Description check	❓ Inconclusive	No description was provided by the author, making it impossible to evaluate relevance to the changeset.	Add a pull request description explaining the purpose and scope of the changes, including which features are being added.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main changes: adding share and collaborative list menus to the mobile app.

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 92e352f and 9dfe17e.

📒 Files selected for processing (4)

• apps/mobile/app/dashboard/_layout.tsx (1 hunks)
• apps/mobile/app/dashboard/lists/[slug].tsx (2 hunks)
• apps/mobile/app/dashboard/lists/[slug]/manage_collaborators.tsx (1 hunks)
• apps/mobile/app/dashboard/lists/[slug]/share.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript for type safety in all source files

Files:

• apps/mobile/app/dashboard/lists/[slug].tsx
• apps/mobile/app/dashboard/lists/[slug]/manage_collaborators.tsx
• apps/mobile/app/dashboard/_layout.tsx
• apps/mobile/app/dashboard/lists/[slug]/share.tsx

**/*.{ts,tsx,js,jsx,json,css,md}

📄 CodeRabbit inference engine (AGENTS.md)

Format code using Prettier according to project standards

Files:

• apps/mobile/app/dashboard/lists/[slug].tsx
• apps/mobile/app/dashboard/lists/[slug]/manage_collaborators.tsx
• apps/mobile/app/dashboard/_layout.tsx
• apps/mobile/app/dashboard/lists/[slug]/share.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Lint code using oxlint and fix issues with pnpm lint:fix

Files:

• apps/mobile/app/dashboard/lists/[slug].tsx
• apps/mobile/app/dashboard/lists/[slug]/manage_collaborators.tsx
• apps/mobile/app/dashboard/_layout.tsx
• apps/mobile/app/dashboard/lists/[slug]/share.tsx

apps/mobile/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use Expo for developing the mobile application

Files:

• apps/mobile/app/dashboard/lists/[slug].tsx
• apps/mobile/app/dashboard/lists/[slug]/manage_collaborators.tsx
• apps/mobile/app/dashboard/_layout.tsx
• apps/mobile/app/dashboard/lists/[slug]/share.tsx

🧬 Code graph analysis (1)

apps/mobile/app/dashboard/lists/[slug]/share.tsx (6)

apps/mobile/lib/useColorScheme.tsx (1)

• useColorScheme (46-46)

apps/mobile/lib/settings.ts (1)

• useAppSettings (77-81)

packages/shared-react/hooks/lists.ts (1)

• useEditBookmarkList (22-37)

packages/trpc/models/lists.ts (2)

• regenRssToken (588-591)
• clearRssToken (593-596)

apps/mobile/components/FullPageError.tsx (1)

• FullPageError (6-26)

apps/mobile/components/ui/CustomSafeAreaView.tsx (1)

• CustomSafeAreaView (5-31)

⏰ 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). (2)

• GitHub Check: typecheck
• GitHub Check: tests

🔇 Additional comments (4)

apps/mobile/app/dashboard/_layout.tsx (1)

112-129: LGTM! Modal routes properly configured.

The new modal routes for sharing and managing collaborators follow the established patterns in the file. The configurations are consistent with other modal screens and properly integrate with the navigation structure.

apps/mobile/app/dashboard/lists/[slug].tsx (1)

102-118: LGTM! Menu actions and navigation properly implemented.

The new menu actions are well-designed with:

• Appropriate role-based visibility (share limited to owners)
• Adaptive titles based on user role for better UX
• Platform-specific icons using SF Symbols
• Correct navigation paths matching the route definitions

Also applies to: 140-145

apps/mobile/app/dashboard/lists/[slug]/share.tsx (1)

27-221: LGTM! Well-structured share screen implementation.

The ShareListScreen is comprehensively implemented with:

• Proper error and loading state handling
• Cache invalidation for all mutations
• Good UX with toasts for user feedback
• Clean separation between public list and RSS feed functionality
• Appropriate disabled states during async operations
• Defensive coding with null checks and type guards

The integration with existing shared-react hooks (useEditBookmarkList) maintains consistency across the codebase.

apps/mobile/app/dashboard/lists/[slug]/manage_collaborators.tsx (1)

26-456: LGTM! Excellent implementation of collaborator management.

The ManageCollaboratorsScreen is thoroughly implemented with:

• Comprehensive role-based access control (read-only mode for non-owners)
• Proper status handling for pending, declined, and accepted collaborators
• Thoughtful UX with confirmation dialogs for destructive actions
• Clear user feedback through toasts for all operations
• Thorough cache invalidation across multiple endpoints (lists, collaborators, bookmarks)
• Appropriate loading and error states
• Helpful role descriptions and empty states
• Good accessibility practices (keyboard types, autocapitalize settings)
• Nice touches like haptic feedback on selections

The complex conditional rendering logic for different user roles and collaborator statuses is well-structured and appears correct throughout.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}