fix: companion extension oauth (calcom#25939)

* fix: companion extension oauth

* fix: ios build

* address cubics comments

Author: dhairyashiil

companion/.env.example

@@ -26,3 +26,6 @@ EXPO_PUBLIC_SCHEDULES_CACHE_STALE_TIME_MINUTES=-1
 
 # User Profile cache stale time (default: -1 = never stale)
 EXPO_PUBLIC_USER_PROFILE_CACHE_STALE_TIME_MINUTES=-1
+
+# required for dev/local
+EXPO_PUBLIC_COMPANION_DEV_URL=http://localhost:8081

companion/app/(tabs)/(event-types)/index.tsx

@@ -22,6 +22,7 @@ import { LoadingSpinner } from "../../../components/LoadingSpinner";
 import { EmptyScreen } from "../../../components/EmptyScreen";
 import { slugify } from "../../../utils/slugify";
 import { showErrorAlert } from "../../../utils/alerts";
+import { shadows } from "../../../utils/shadows";
 import { EventTypeListItem } from "../../../components/event-type-list-item/EventTypeListItem";
 import { offlineAwareRefresh } from "../../../utils/network";
 import { openInAppBrowser } from "../../../utils/browser";
@@ -570,13 +571,7 @@ export default function EventTypes() {
             className="max-h-[90%] w-[90%] max-w-[500px] rounded-2xl bg-white"
             activeOpacity={1}
             onPress={(e) => e.stopPropagation()}
-            style={{
-              shadowColor: "#000",
-              shadowOffset: { width: 0, height: 20 },
-              shadowOpacity: 0.25,
-              shadowRadius: 25,
-              elevation: 24,
-            }}
+            style={shadows.xl()}
           >
             {/* Header */}
             <View className="px-8 pb-4 pt-6">

companion/app/(tabs)/availability.tsx

@@ -23,6 +23,7 @@ import { LoadingSpinner } from "../../components/LoadingSpinner";
 import { EmptyScreen } from "../../components/EmptyScreen";
 import { showErrorAlert } from "../../utils/alerts";
 import { offlineAwareRefresh } from "../../utils/network";
+import { shadows } from "../../utils/shadows";
 import {
   useSchedules,
   useCreateSchedule,
@@ -458,13 +459,7 @@ export default function Availability() {
             className="w-[90%] max-w-[500px] rounded-2xl bg-white"
             activeOpacity={1}
             onPress={(e) => e.stopPropagation()}
-            style={{
-              shadowColor: "#000",
-              shadowOffset: { width: 0, height: 20 },
-              shadowOpacity: 0.25,
-              shadowRadius: 25,
-              elevation: 24,
-            }}
+            style={shadows.xl()}
           >
             {/* Header */}
             <View className="px-8 pb-4 pt-6">

companion/app/_layout.tsx

@@ -27,14 +27,16 @@ function RootLayoutContent() {
       ? {
           width: 400,
           flex: 1,
-          display: "flex",
-          flexDirection: "column",
-          pointerEvents: "auto",
+          display: "flex" as const,
+          flexDirection: "column" as const,
         }
       : { flex: 1 };
 
   return (
-    <View style={containerStyle} className={containerClass}>
+    <View
+      style={[containerStyle, Platform.OS === "web" && { pointerEvents: "auto" as const }]}
+      className={containerClass}
+    >
       <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
       {content}
       <NetworkStatusBanner />

companion/app/booking-detail.tsx

@@ -15,6 +15,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { CalComAPIService, Booking } from "../services/calcom";
 import { showErrorAlert } from "../utils/alerts";
 import { openInAppBrowser } from "../utils/browser";
+import { shadows } from "../utils/shadows";
 import { SvgImage } from "../components/SvgImage";
 import { FullScreenModal } from "../components/FullScreenModal";
 import { BookingActionsModal } from "../components/BookingActionsModal";
@@ -571,13 +572,7 @@ export default function BookingDetail() {
             className="w-[90%] max-w-[500px] rounded-2xl bg-white"
             activeOpacity={1}
             onPress={(e) => e.stopPropagation()}
-            style={{
-              shadowColor: "#000",
-              shadowOffset: { width: 0, height: 20 },
-              shadowOpacity: 0.25,
-              shadowRadius: 25,
-              elevation: 24,
-            }}
+            style={shadows.xl()}
           >
             {/* Header */}
             <View className="px-8 pb-4 pt-6">

companion/bun.lock

@@ -1,20 +1,10 @@
-/**
- * LoadingSpinner Component
- *
- * A stylish loading spinner with iOS glass effect support when available.
- * Falls back to a nice styled container on other platforms.
- */
-
 import React from "react";
 import { View, ActivityIndicator, Platform, StyleSheet } from "react-native";
 import { GlassView, isLiquidGlassAvailable } from "expo-glass-effect";
 
 interface LoadingSpinnerProps {
-  /** Size of the spinner - defaults to large */
   size?: "small" | "large";
-  /** Color of the spinner - defaults to system color */
   color?: string;
-  /** Whether to show the container background */
   showBackground?: boolean;
 }
 
@@ -25,7 +15,6 @@ export function LoadingSpinner({
 }: LoadingSpinnerProps) {
   const supportsGlass = isLiquidGlassAvailable();
 
-  // Use glass effect on supported iOS devices
   if (supportsGlass && Platform.OS === "ios") {
     return (
       <GlassView style={styles.glassContainer} glassEffectStyle="regular">
@@ -34,7 +23,6 @@ export function LoadingSpinner({
     );
   }
 
-  // Styled container for other platforms
   if (showBackground) {
     return (
       <View style={styles.styledContainer}>
@@ -43,7 +31,6 @@ export function LoadingSpinner({
     );
   }
 
-  // Simple spinner without background
   return <ActivityIndicator size={size} color={color || "#000000"} />;
 }
 
@@ -60,11 +47,18 @@ const styles = StyleSheet.create({
     padding: 24,
     borderRadius: 20,
     backgroundColor: "rgba(255, 255, 255, 0.9)",
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 4,
+    ...Platform.select({
+      web: {
+        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
+      },
+      default: {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 4,
+      },
+    }),
   },
 });
 

companion/components/LoadingSpinner.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { View, Text, TouchableOpacity } from "react-native";
+import { View, Text, TouchableOpacity, Platform, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useAuth } from "../contexts/AuthContext";
 import { CalComLogo } from "./CalComLogo";
@@ -42,14 +42,21 @@ export function LoginScreen() {
           onPress={handleOAuthLogin}
           disabled={loading}
           className="flex-row items-center justify-center rounded-2xl py-[18px]"
-          style={{
-            backgroundColor: loading ? "#9CA3AF" : "#111827",
-            shadowColor: "#000",
-            shadowOffset: { width: 0, height: 4 },
-            shadowOpacity: loading ? 0 : 0.2,
-            shadowRadius: 12,
-            elevation: loading ? 0 : 6,
-          }}
+          style={[
+            { backgroundColor: loading ? "#9CA3AF" : "#111827" },
+            Platform.select({
+              web: {
+                boxShadow: loading ? "none" : "0 4px 12px rgba(0, 0, 0, 0.2)",
+              },
+              default: {
+                shadowColor: "#000",
+                shadowOffset: { width: 0, height: 4 },
+                shadowOpacity: loading ? 0 : 0.2,
+                shadowRadius: 12,
+                elevation: loading ? 0 : 6,
+              },
+            }),
+          ]}
           activeOpacity={0.9}
         >
           <Text className="text-[17px] font-semibold text-white">Continue with Cal.com</Text>

companion/components/LoginScreen.tsx

@@ -11,7 +11,6 @@ export function Tooltip({ text, children }: TooltipProps) {
   const [position, setPosition] = useState({ top: 0, left: 0 });
   const containerRef = useRef<any>(null);
 
-  // Only show tooltips on web platform
   if (Platform.OS !== "web") {
     return children;
   }
@@ -42,30 +41,25 @@ export function Tooltip({ text, children }: TooltipProps) {
       {children}
       {showTooltip && (
         <View
+          // @ts-ignore - web-only styles
           style={{
             position: "fixed",
             top: position.top,
             left: position.left,
-            transform: [{ translateX: -50 }, { translateY: -100 }],
+            transform: "translate(-50%, -100%)",
             backgroundColor: "#1a1a1a",
-            paddingHorizontal: 10,
-            paddingVertical: 6,
+            paddingLeft: 10,
+            paddingRight: 10,
+            paddingTop: 6,
+            paddingBottom: 6,
             borderRadius: 6,
             zIndex: 10002,
             pointerEvents: "none",
-            // @ts-ignore - web-only props
             boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
           }}
         >
-          <Text
-            style={{
-              color: "white",
-              fontSize: 13,
-              fontWeight: "600",
-              whiteSpace: "nowrap",
-              lineHeight: 18,
-            }}
-          >
+          {/* @ts-ignore - web-only styles */}
+          <Text style={{ color: "white", fontSize: 13, fontWeight: "600", whiteSpace: "nowrap" }}>
             {text}
           </Text>
         </View>