* feat(companion): add upcoming bookings widget for iOS and Android
- Add iOS widget using @bacons/apple-targets with SwiftUI
- Add Android widget using react-native-android-widget
- Configure App Groups for iOS data sharing between app and widget
- Create widget sync hook to update widget data when bookings change
- Widget displays up to 5 upcoming bookings with title, time, and attendee
- Widget refreshes every 15 minutes and when app goes to background
Co-Authored-By: peer@cal.com <peer@cal.com>
* fix(companion): refactor useWidgetSync to avoid React Compiler limitation
Move conditional logic outside of try/catch block to fix React Compiler
error: 'Support value blocks (conditional, logical, optional chaining,
etc) within a try/catch statement'
Co-Authored-By: peer@cal.com <peer@cal.com>
* fix(companion): fix widget data sync issues
- Fix Swift widget to read data as JSON string (format used by react-native-shared-group-preferences)
- Add fallback to read as raw Data for compatibility
- Fix query key mismatch by checking multiple common filter combinations
- Ensure widget finds cached bookings regardless of which filter the app used
Co-Authored-By: peer@cal.com <peer@cal.com>
* fix(companion): use ExtensionStorage from @bacons/apple-targets for widget data
- Replace react-native-shared-group-preferences with ExtensionStorage
- ExtensionStorage properly stores data in iOS App Groups
- Add ExtensionStorage.reloadWidget() call to trigger widget refresh
- This ensures the widget picks up new data immediately
Co-Authored-By: peer@cal.com <peer@cal.com>
* feat(companion): add upcoming bookings widget for ios - all shapes (#27564)
* ios working widget
* fix(companion): remove sensitive data logging from widget storage
Remove console.log statements that were logging full widgetData payload
and formatted widget bookings containing attendee names and booking
details. This addresses security concerns identified by Cubic AI review
(confidence 9/10).
Co-Authored-By: unknown <>
* dark mode
* new look
* fix deeplink
* fix biome lint
* fix(companion): remove booking titles from console logs to avoid PII exposure
Co-Authored-By: unknown <>
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* lock the versions and dev mode logging
* remove dynamic imports
* feat(companion): upcoming bookings widget android (#27689)
* companion-upcoming-bookings-widget-android
* fix(companion): remove stale relative countdowns and fix past-time clamping in Android widget
- Remove relative countdown text (In 15m, In 1h, Now) that becomes stale
due to Android widget 30+ min update interval (Cubic violation 2)
- Remove Math.max(0, minutes) clamping that caused ended meetings to
display as 'Now' indefinitely (Cubic violation 1)
- Simplify accent color logic to use startTimeISO directly
- Keep absolute time display (date + startTime) which remains accurate
Co-Authored-By: unknown <>
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Dhairyashil <dhairyashil10101010@gmail.com>
Co-authored-by: Dhairyashil Shinde <93669429+dhairyashiil@users.noreply.github.com>
Co-authored-by: Volnei Munhoz <volnei@cal.com>
* feat(companion): add dark mode support using NativeWind system preference
- Set userInterfaceStyle to 'automatic' in app.json to follow system preference
- Add useColorScheme hook from NativeWind to detect color scheme
- Update root layout with dynamic colors for StatusBar, containers, and modals
- Update tabs layout with dynamic colors for tab bar and icons
- Update all Stack.Screen options to use dynamic background colors and blur effects
- Support both iOS and Android with appropriate dark mode colors
Co-Authored-By: peer@cal.com <peer@cal.com>
* fix(companion): use NativeWind dark: variant classes for automatic dark mode
Use dark: Tailwind variant classes instead of conditional logic based on
useColorScheme for the container background. This ensures NativeWind
automatically applies dark mode styles based on system preference.
Co-Authored-By: peer@cal.com <peer@cal.com>
* fix(companion): use darkMode 'media' for automatic dark mode detection
- Changed darkMode from 'class' to 'media' in tailwind.config.js
- Updated global.css to use @media (prefers-color-scheme: dark) instead of .dark selector
- This ensures NativeWind properly detects system color scheme on iOS/Android
Co-Authored-By: peer@cal.com <peer@cal.com>
* dark mode starting
* feat(companion): add dark mode support to core infrastructure (Phase 1)
* feat(companion): add dark mode support to tab pages (Phase 2)
* fix(companion): add dark mode support to booking list components for font visibility
* fix(companion): add dark mode support to EventTypeListItem components
* event types and bookings page
* Availability list page
* more page, and some ui fixes
* feat(companion): add dark mode support to detail screens and modals
- BookingDetailScreen (iOS & Android): dynamic colors for all UI elements
- AvailabilityDetailScreen (iOS & Android): dark mode backgrounds and text
- profile-sheet (iOS & Android): dark mode support for profile modal
- RescheduleScreen (all platforms): dark mode for date/time pickers
- EditLocationScreen (iOS & Android): dark mode for location editor
- AddGuestsScreen: partial dark mode implementation (in progress)
Uses iOS system colors: #000000 (black), #1C1C1E (secondary), #FFFFFF (white), #38383A (border), #8E8E93 (text secondary)
* fix typecheck and lint
* feat(companion): add dark mode support to remaining screens
- ScreenWrapper: Fix hardcoded #800020 color with dynamic destructive color
- EditAvailabilityDayScreen: Add dark mode for Android/Web and iOS
- EditAvailabilityHoursScreen: Add dark mode for Android/Web and iOS
- EditAvailabilityNameScreen: Add dark mode for Android/Web and iOS
- EditAvailabilityOverrideScreen: Add dark mode for Web, iOS, and Android
- MarkNoShowScreen: Add dark mode with dynamic colors for no-show states
- MeetingSessionDetailsScreen: Add dark mode for session details
- ViewRecordingsScreen: Add dark mode for recordings list
Uses iOS system colors (#000000, #1C1C1E, #38383A, #8E8E93) and
useColorScheme hook for automatic theme detection.
* fix(companion): fix iOS modal dark mode backgrounds for transparent glass UI
* fix(companion): fix dark mode for booking action screens in transparent background mode
* fix(companion): fix Android dark mode for transparent background in EditAvailabilityOverrideScreen
* refactor(companion): centralize dark mode colors and align with main website
- Update tailwind.config.js with centralized color definitions
- Create constants/colors.ts for inline style color references
- Replace iOS system colors with main website neutral grays:
- #1C1C1E -> #171717 (secondary dark background)
- #38383A -> #4D4D4D (dark border)
- #8E8E93 -> #A3A3A3 (secondary text dark)
- Keep pure black (#000000) for main backgrounds (OLED friendly)
- Add semantic color mappings for consistent UI styling
* feat(companion): complete dark mode implementation across all priority files
- Priority 1: Updated SettingsUI.tsx, BasicsTab.tsx, LimitsTab.tsx, AdvancedTab.tsx, RecurringTab.tsx, AvailabilityTab.tsx, event-type-detail.tsx
- Priority 2: Updated edit-availability-hours/name/override/day.tsx, oauth/callback.tsx
- Priority 3: Updated AvailabilityListScreen.tsx with dark mode for modals and list items
- Priority 4: Updated BookingActionsModal.tsx, BookingActionsModal.ios.tsx, GlassModalHeader.tsx, LoginScreen.tsx, LocationsList.tsx, SearchHeader.tsx, toast.tsx
Dark mode colors used:
- Main bg: #000000 (cal.bg.dark)
- Secondary bg: #171717 (cal.bg.secondaryDark)
- Muted bg: #262626 (cal.bg.mutedDark)
- Borders: #4D4D4D (cal.border.dark)
- Secondary text: #A3A3A3 (cal.text.secondaryDark)
* fix(companion): add dark mode support to iOS header, GlassView modals, and main content background
* fix(companion): add dark mode support to toggle/switch components
* fix(companion): use iOS green (#34C759) for toggle ON state in dark mode
* fix(companion): use white track + black thumb for dark mode toggles
* fix(companion): add dark mode support to login page logo and button
* dark mode to many pages, centralize the colors
* dark mode skelaton
* Availability pages android
* toggles
* headers
* red color for dark mode
* copy button
* white flash on bottom ui native ios sheet
* bottom sheet buttons
* bottom sheet in gray color
* bottom sheet again.. yeahh
* toggle green
* toggle green
* fix lint and typechecks
* fix exntension error
* Update companion/components/event-type-detail/tabs/LimitsTabDatePicker.android.tsx
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
* address cubic comments
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: peer@cal.com <peer@cal.com>
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
* feat: integrate DateTimePickerAndroid for date/time selection
- Added @react-native-community/datetimepicker dependency for native date/time picker functionality.
- Replaced modal-based date/time picker implementation with DateTimePickerAndroid for improved user experience.
- Updated RescheduleScreen to utilize the new date/time picker methods, enhancing the selection process and ensuring better styling consistency.
* feat: add LimitsTabDatePicker component for date selection
- Introduced a new LimitsTabDatePicker component utilizing DateTimePickerAndroid for improved date selection on Android.
- Implemented date parsing and formatting for user-friendly display.
- Enhanced user interaction with a pressable element to open the date picker.
* feat: add EditAvailabilityOverrideScreen for managing schedule overrides
- Introduced EditAvailabilityOverrideScreen component to allow users to create and edit availability overrides.
- Implemented date and time selection using DateTimePickerAndroid for improved user experience.
- Added functionality to handle existing overrides, including editing and deleting options.
- Enhanced user interaction with clear alerts for success and error states during save operations.
* fixed lint warnings, info
* address cubics comments
---------
Co-authored-by: Dhairyashil <dhairyashil10101010@gmail.com>
* feat(companion): add ios logo
* update app.json to use new icon for iOS
* refactor: update app.json and icon.json for improved formatting and naming consistency
* feat: add expo-splash-screen plugin and update app.json configuration
* chore: update adaptive icon
* chore: update adaptive icon
ios:
https://github.com/user-attachments/assets/efdfd3e3-239f-4cbf-be1a-7784d1df1851
android:
https://github.com/user-attachments/assets/a8e22a5c-60f3-4fb6-8923-b8a786bceb0c
## Overview
This PR introduces native iOS UI components, refactors the profile menu, and simplifies the event type creation flow for a more native iOS experience.
## Key Changes
### iOS Native UI Components
- **iOS-specific Event Types Page**: Added native Stack.Header, glass UI, and context menus for iOS
- **Platform-specific Profile Sheet**: Created separate implementations for iOS (formSheet) and Android/Web (modal)
- **Bottom Glass UI Navbar**: Updated bottom navigation bar with glass UI styling for iOS
- **Native iOS Alerts**: Replaced custom modals with native `Alert.prompt` for event types and availability pages
### Profile Menu Refactor
- Restructured More page with folder layout and native iOS header support
- Added profile button to More page header on iOS with glass UI
- Added "Copy public page link" and "Roadmap" options to profile sheet
- Refactored Header component: removed inline profile modal, now uses route-based navigation
- Updated Availability page with New menu and profile button in header
- Fixed "My Settings" URL to use `/general` endpoint
- Removed "Profile" item from More section menu
- Updated tab layout to support `(more)` folder structure
### Simplified Event Type Creation
- Reduced event type creation to only require title input
- Auto-generate slug from title using slugify utility
- Set default duration to 15 minutes
- Leave description empty (users can edit later)
- Applied to both iOS and Android/Web platforms
### UI Improvements
- Updated login button styling: changed background color to pure black (#000000) with white text for better contrast
* feat(companion): restructure booking detail components and enhance type safety
- Migrate BookingDetail component to a new file structure under (tabs)/(bookings) for better organization.
- Introduce a new BookingDetailScreen with improved header and menu options.
- Update app.json to enable typed routes and enhance TypeScript configuration in tsconfig.json.
- Remove the old booking-detail.tsx file to clean up the codebase.
- Adjust imports and routing to reflect the new structure, ensuring all components are properly linked.
This refactor aims to improve maintainability and clarity in the booking detail flow.
* add header options
* refactor(booking-detail): rename "Standalone Actions" menu to "Danger Zone" for clarity
---------
Co-authored-by: Dhairyashil Shinde <93669429+dhairyashiil@users.noreply.github.com>
* chore: update dependencies and update event types screen header
* refactor: simplify EventTypeListItem component by removing unused imports and code
- Removed unnecessary imports such as Tooltip and Svg.
- Cleaned up the component by eliminating commented-out code and unused props.
- Streamlined the button rendering in the context menu for better readability.
* feat: enhance EventTypes header with blur effect and clean up code
- Added blurEffect property to Stack.Header for improved visual aesthetics.
- Removed commented-out code to streamline the EventTypes component.
- Updated search bar properties for better user experience.
* refactor: update TabLayout and EventTypes for improved platform handling
- Simplified TabLayout by removing the liquid glass effect check and adding a WebTabs fallback for web support.
- Updated EventTypes header to conditionally apply blur effect based on liquid glass availability, enhancing visual consistency across platforms.
* feat: enhance TabLayout with MaterialCommunityIcons for improved UI
- Updated TabLayout to use MaterialCommunityIcons for tab icons, enhancing visual consistency.
- Added softwareKeyboardLayoutMode to app.json for better keyboard handling on mobile devices.
* feat: update TabLayout to prevent transparent background on iOS 18
- Added disableTransparentOnScrollEdge prop to NativeTabs to ensure a solid background on iOS 18 and older versions.
* feat: companion expo and chrome
* fix: api-v2-fetch-bookings (#25023)
* migrated to app expo router
* feat(companion): added availability screen and fix event type fetch (#25025)
* fix(companion): add host check in bookings (#25036)
* using liquid glass bottom nav experimental
* added action sheet
* added icons to event type tabs
* added action bar for event-type details
* long press for edit event types
* added limits
* added more limits
* added more limits
* added username to event types
* feat(companion): config to set and show all the available meeting options a user has stalled (#25081)
* feat: Add tailwind support using nativewind. (#25028)
* init nativewind
* replace styles with tailwind classes
* changes
* feat(companion): all locations options, icons, and apply nativewind to remaining files (#25143)
* feat: all locations options and icons and apply nativwind to reamaining files
* icon bug fix
* cal video icon
* other location frontend
* other location api
* address cubics comment about correctly detects SVGs
* feat(companion): edit availability (#25149)
* feat: companion-edit-availability
* date override and use correct config for patch api endpoint
* Android Alert supports a maximum of 3 buttons
* feat: companion-ui-release-1 (#25150)
* feat(companion): Add event type & schedule creation flows with API expansion (#25187)
* feat(companion): event schedule creation and apis
* profile section
* limits, advanced, recurring tab
* Clean Folder Structure
* addressed cubics comments
* fix cubiics comments
* replaced text with cal.com svg logo
* added correct more button for event-types
* added copy link button
* added extension popup
* added chrome extension sidebar
* achieved liquid glass buttons
* nit
* more progress
* fixed ios bug, added icon
* added cal icon to gmail
* nit
* nit
* added dialog for one-off meeting
* added one-time dialog
* feat(companion): gmail plugin (#25327)
* Update Cal.com Companion to version 1.7.0 with enhanced background and content scripts. The background script now handles fetching event types from the Cal.com API and improved error handling. The content script has been updated to manage sidebar visibility and respond to messages more effectively. Removed deprecated dev background script and updated manifest permissions for better functionality.
* chore: update companion .gitignore to exclude build outputs and env files
* feat: insert Cal.com event link directly at cursor position in Gmail compose
- Add insertTextAtCursor function to insert booking link where user is typing
- Automatically positions cursor after inserted link for seamless typing
- Fallback to clipboard copy if compose field not found
- Improved UX: no need to manually paste the link
* feat(companion): improve notification UI and add event types caching
- Update notification to Cal.com brand style (black bg, check icon, smooth fade)
- Change notification text to 'Link inserted' for subtlety
- Move notification to bottom-right position (matching Cal.com toasts)
- Add event types caching (5min duration) to reduce API calls
- Cache automatically refreshes on page reload
- Fix TypeScript error with composeBody.focus() type assertion
* Notification toast border
* conditional description
* conditional description
* feat(companion): Enhance UI with action buttons, tooltips, and Gmail extension improvements (#25353)
* feat: companion-and-gmail-ui-upgrade
* feat: companion-and-gmail-ui-upgrade
* feat: companion-and-gmail-ui-upgrade
* feat: companion-and-gmail-ui-upgrade
* feat(companion): one-off links (#25355)
* added one off prototype
* resolve merge conflicts
---------
Co-authored-by: Dhairyashil <dhairyashil10101010@gmail.com>
* fixed sidebar iframe
* fix: enable pointer events on sidebar while maintaining click-through on transparent area
- Added pointerEvents: 'auto' to sidebar View component in _layout.tsx
- Changed iframe width from 100% to 400px to match sidebar width
- Changed iframe pointerEvents from 'none' to 'auto' to enable clicking
- This allows sidebar items to be clickable while transparent area remains click-through
* feat(companion): center all modals on full screen in browser extension (#25380)
* fix: companion-full-width-iframe
* center the popups on extension view
* feat(companion): center all modals on full screen in browser extension
- Created FullScreenModal component that expands iframe to full width
- Updated content script to handle instant iframe expansion/collapse
- Converted 17 modals across 6 files to use FullScreenModal
- All modals now appear centered on full browser viewport
- Removed animations for instant modal appearance
- Mobile app behavior remains unchanged
Files updated:
- companion/components/FullScreenModal.tsx (new)
- companion/extension/entrypoints/content.ts
- companion/app/(tabs)/event-types.tsx (5 modals)
- companion/app/(tabs)/bookings.tsx (2 modals)
- companion/app/(tabs)/availability.tsx (3 modals)
- companion/app/booking-detail.tsx (2 modals)
- companion/app/availability-detail.tsx (4 modals)
- companion/components/Header.tsx (1 modal)
* security(companion): validate postMessage origin in content script
Add origin and source validation to postMessage listener to prevent
malicious scripts on host pages from manipulating the companion iframe.
- Verify event.source matches iframe.contentWindow
- Verify event.origin matches iframe origin (localhost:8081)
- Reject all unauthorized messages before processing
This prevents external scripts from:
- Forcing full-screen overlays
- Intercepting pointer events
- Manipulating the companion UI
* fix(companion): center 'Add new event type' modal on full screen
Replace KeyboardAvoidingView with TouchableOpacity pattern in the
create event type modal to ensure it appears centered on the full
screen like all other modals.
This was the last remaining modal that wasn't properly centered.
* fix(companion): resolve modal transition timing issue
Fixed the 'Add new event type' modal not centering properly by:
- Added 100ms delay when transitioning between modals
- Prevents conflicting expand/collapse messages
- Removed redundant postMessage calls from modal handlers
- Added max-height constraint to modal content
- Cleaned up debug console logs
The issue was that when clicking 'New Event Type' from the 'New' menu,
both modals were transitioning simultaneously, causing the create modal
to collapse immediately. The delay ensures proper sequencing.
All 17 modals now work correctly and appear centered on full screen.
* added working date range
* removed all of one-off event code
* nit
* feat(companion): Suggest `Cal.com` links and Embed using Gemini Ai in Gmail (#25406)
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
* add companion build on CI
* feat: oauth companion (#25526)
* first implemenation of oauth
* fix logout for web
* revert app name
* remove isUsingOAuth
* clean up log out button
* remove logs
* clean up authcontext
* simplify code generation
* code clean up
* clean up oauthService.ts
* oauth browser extension
* add redirect uri to .env.example
* remove api key support
* clean up _layout file
* add identity
* fix + clean up
* improvements to oauth flow
* code clean up
* remove comments
* clean up comments
* add log out dialog
* add confirm modal
---------
Co-authored-by: CarinaWolli <wollencarina@gmail.com>
---------
Co-authored-by: Dhairyashil Shinde <93669429+dhairyashiil@users.noreply.github.com>
Co-authored-by: Abhijeet Singh <asingh9829@gmail.com>
Co-authored-by: Dhairyashil <dhairyashil10101010@gmail.com>
Co-authored-by: Volnei Munhoz <volnei.munhoz@gmail.com>
Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Co-authored-by: CarinaWolli <wollencarina@gmail.com>
BetoandDhairyashil
