refactor(companion)(ios): Improve header right button in booking details screen (#26721)

* refactor: improve code formatting and readability in BookingDetailScreen and Bookings components

* refactor: enhance code structure and readability in EventTypesIOS component

companion/app/(tabs)/(bookings)/booking-detail.ios.tsx

@@ -8,6 +8,7 @@ import type { Booking } from "@/services/calcom";
 import { showErrorAlert, showInfoAlert, showSuccessAlert } from "@/utils/alerts";
 import { type BookingActionsResult, getBookingActions } from "@/utils/booking-actions";
 import { openInAppBrowser } from "@/utils/browser";
+import { isLiquidGlassAvailable } from "expo-glass-effect";
 
 // Empty actions result for when no booking is loaded
 const EMPTY_ACTIONS: BookingActionsResult = {
@@ -225,25 +226,16 @@ export default function BookingDetailIOS() {
           headerBackTitle: monthName, // This shows on the back button
           headerBackButtonDisplayMode: "default",
           headerTitle: "", // Hide the title in the header bar itself
-          headerStyle: {
-            backgroundColor: "#f2f2f7",
-          },
           headerShadowVisible: false,
+          headerTransparent: true,
         }}
       />
 
-      <Stack.Header style={{ shadowColor: "transparent", backgroundColor: "#f2f2f7" }}>
+      <Stack.Header
+        style={{ backgroundColor: "transparent", shadowColor: "transparent" }}
+        blurEffect={isLiquidGlassAvailable() ? undefined : "light"}
+      >
         <Stack.Header.Right>
-          {/* Join Meeting Menu - only show if there's a meeting URL */}
-          {meetingUrl && (
-            <Stack.Header.Menu>
-              <Stack.Header.Icon sf="video" />
-              <Stack.Header.MenuAction icon="video" onPress={handleJoinMeeting}>
-                Join Meeting
-              </Stack.Header.MenuAction>
-            </Stack.Header.Menu>
-          )}
-
           {/* Actions Menu */}
           <Stack.Header.Menu>
             <Stack.Header.Icon sf="ellipsis" />
@@ -301,6 +293,12 @@ export default function BookingDetailIOS() {
               ))}
             </Stack.Header.Menu>
           </Stack.Header.Menu>
+
+          {meetingUrl && (
+            <Stack.Header.Button onPress={handleJoinMeeting} variant="prominent" tintColor="#000">
+              Join
+            </Stack.Header.Button>
+          )}
         </Stack.Header.Right>
       </Stack.Header>
 

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

@@ -1,5 +1,6 @@
 import { Button, ContextMenu, Host, HStack, Image as SwiftUIImage } from "@expo/ui/swift-ui";
-import { buttonStyle, frame, padding } from "@expo/ui/swift-ui/modifiers";
+import * as Haptics from "expo-haptics";
+import { buttonStyle, controlSize, fixedSize, frame, padding } from "@expo/ui/swift-ui/modifiers";
 import { Ionicons } from "@expo/vector-icons";
 import * as Clipboard from "expo-clipboard";
 import { isLiquidGlassAvailable } from "expo-glass-effect";
@@ -168,7 +169,10 @@ export default function EventTypesIOS() {
                 console.error("Failed to delete event type", message);
                 if (__DEV__) {
                   const stack = deleteError instanceof Error ? deleteError.stack : undefined;
-                  console.debug("[EventTypes] deleteEventType failed", { message, stack });
+                  console.debug("[EventTypes] deleteEventType failed", {
+                    message,
+                    stack,
+                  });
                 }
                 showErrorAlert("Error", "Failed to delete event type. Please try again.");
               },
@@ -233,6 +237,7 @@ export default function EventTypesIOS() {
   };
 
   const handleOpenCreateModal = () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
     // Use native iOS Alert.prompt for a native look
     Alert.prompt(
       "Add a new event type",
@@ -539,24 +544,21 @@ export default function EventTypesIOS() {
       {/* Floating Action Button for New Event Type with Glass UI Menu */}
       <View className="absolute right-6" style={{ bottom: 100 }}>
         <Host matchContents>
-          <ContextMenu
-            modifiers={[buttonStyle(isLiquidGlassAvailable() ? "glass" : "bordered"), padding()]}
-            activationMethod="singlePress"
+          <Button
+            onPress={handleOpenCreateModal}
+            modifiers={[
+              buttonStyle(isLiquidGlassAvailable() ? "glass" : "bordered"),
+              padding(),
+              controlSize("large"),
+            ]}
           >
-            <ContextMenu.Items>
-              <Button systemImage="link" onPress={handleOpenCreateModal} label="New Event Type" />
-            </ContextMenu.Items>
-            <ContextMenu.Trigger>
-              <HStack modifiers={[frame({ width: 35, height: 40 })]}>
-                <SwiftUIImage
-                  systemName="plus"
-                  color="primary"
-                  size={28}
-                  // modifiers={[frame({ width: 56, height: 56 })]}
-                />
-              </HStack>
-            </ContextMenu.Trigger>
-          </ContextMenu>
+            <SwiftUIImage
+              systemName="plus"
+              color="primary"
+              size={24}
+              modifiers={[frame({ height: 24, width: 17 })]}
+            />
+          </Button>
         </Host>
       </View>
     </>

companion/components/screens/BookingDetailScreen.ios.tsx

@@ -327,12 +327,11 @@ export function BookingDetailScreen({
   };
 
   return (
-    <View className="flex-1 bg-[#f2f2f7]">
+    <>
       <ScrollView
-        className="flex-1"
+        contentInsetAdjustmentBehavior="automatic"
         contentContainerStyle={{
           paddingHorizontal: 16,
-          paddingTop: 16,
           paddingBottom: insets.bottom + 100,
         }}
         showsVerticalScrollIndicator={false}
@@ -642,7 +641,9 @@ export function BookingDetailScreen({
 
                 {booking.cancelledByEmail && (
                   <View
-                    className={`py-2 ${booking.cancellationReason ? "border-t border-[#E5E5EA]" : ""}`}
+                    className={`py-2 ${
+                      booking.cancellationReason ? "border-t border-[#E5E5EA]" : ""
+                    }`}
                   >
                     <Text className="mb-0.5 text-[13px] text-[#8E8E93]">Cancelled by</Text>
                     <Text className="text-[17px] text-black">{booking.cancelledByEmail}</Text>
@@ -675,6 +676,6 @@ export function BookingDetailScreen({
           </View>
         </View>
       )}
-    </View>
+    </>
   );
 }