feat(companion): unify dropdown menu for Android and extension

[dhairyashiil]

What does this PR do?

This PR unifies dropdown menu implementations from .android.tsx files into base .tsx files so both Android and extension/web platforms share the same code. This is a stacked PR on top of #26434.

Changes:

• Merged Android-specific dropdown implementations into 5 base component files
• Deleted all .android.tsx files after merging
• Replaced TouchableOpacity with Pressable for Android ripple effects
• Added DropdownMenu components with proper safe area insets
• Added AlertDialog for cancel confirmation on Android (BookingDetailScreen)

Components unified:

1. EventTypeListItem - Preview, Copy link, Edit, Duplicate, Delete actions
2. BookingListItem - Reschedule, Edit Location, Add Guests, View Recordings, etc.
3. RecurringBookingListItem - Same booking actions for recurring events
4. AvailabilityListItem - Set as Default, Duplicate, Delete actions
5. BookingDetailScreen - Header dropdown with all booking actions

Updates since last revision

Unified booking filter UI for Android and extension/web:

• Removed SegmentedControl from the bookings page - both platforms now use the Header dropdown for booking status filter (Upcoming, Unconfirmed, Past, Cancelled, Recurring)
• Unified event type filter dropdown for both Android and web/extension
• Removed platform-specific conditionals (Platform.OS === "android" checks) from the bookings page
• Removed unused showFilterModal state and related code

Fixed header button clipping on web/extension (revised approach):

• Created new HeaderButtonWrapper component that adds 12px margin on web platform only
• Wrapped all header buttons with HeaderButtonWrapper to prevent clipping on edges
• Applied to all screens with native header buttons:
  • reschedule.tsx, edit-location.tsx, add-guests.tsx
  • mark-no-show.tsx, view-recordings.tsx, meeting-session-details.tsx
  • event-type-detail.tsx, BookingDetailScreen.tsx, profile-sheet.tsx
  • edit-availability-day.tsx, edit-availability-name.tsx, edit-availability-override.tsx
• Android remains unaffected as the wrapper only applies margin on web

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A - no documentation changes needed.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

1. Android testing:

   • Open each screen (Event Types, Bookings, Recurring Bookings, Availability, Booking Detail)
   • Tap the three-dot menu button on list items
   • Verify dropdown menu appears with correct actions
   • Verify destructive actions (Delete, Cancel) have a separator before them
   • Test cancel booking flow - should show AlertDialog with reason input

2. Extension/Web testing:

   • Same screens should work with the unified dropdown implementation
   • Verify android_ripple prop doesn't cause issues on non-Android platforms
   • Verify the booking status filter dropdown in the Header works (replaces the old SegmentedControl)
   • Verify the event type filter dropdown works correctly
   • Verify header buttons (X, checkmark, ellipsis) have proper spacing from edges
   • Test screens with both left and right header buttons (Reschedule, Edit Location, Add Guests)
   • Verify buttons are not touching each other or getting clipped

Human Review Checklist

• Verify dropdown menus work correctly on web/extension (previously only used on Android)
• Verify booking status filter (Upcoming, Unconfirmed, etc.) changes work via Header dropdown on web/extension
• Verify event type filter dropdown works on both platforms
• Verify header buttons have proper spacing on web/extension - buttons should not touch edges or get clipped
• Verify Android UI is not affected by the HeaderButtonWrapper changes (wrapper only applies margin on web)
• Verify all screens with header buttons were updated consistently

Checklist

• My code follows the style guidelines of this project
• I have commented my code, particularly in hard-to-understand areas
• I have checked if my changes generate no new warnings

---

Link to Devin run: https://app.devin.ai/sessions/cc58599bc56e4651bb76fa450213311b
Requested by: Dhairyashil Shinde (@dhairyashiil)

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

3 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
cal	Ignored		Jan 5, 2026 11:44pm
cal-companion	Ignored	Preview	Jan 5, 2026 11:44pm
cal-eu	Ignored		Jan 5, 2026 11:44pm

[cubic-dev-ai]

1 issue found across 32 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="companion/components/booking-list-screen/BookingListScreen.tsx">

<violation number="1" location="companion/components/booking-list-screen/BookingListScreen.tsx:131">
P2: Marking `setSelectedBooking` as unused creates dead code. The `showBookingActionsModal` state (line 564) is never set to true, and `selectedBooking` is never populated after removing the handlers. Consider also removing the `showBookingActionsModal` state and the related `BookingModals` props/callbacks that depend on `selectedBooking` to complete the cleanup.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}