From 46d54b36ce20d764fa5d0b02fc2702607aecead2 Mon Sep 17 00:00:00 2001
From: Beto <43630417+betomoedano@users.noreply.github.com>
Date: Mon, 26 Jan 2026 16:52:38 -0600
Subject: [PATCH] refactor(companion): simplify context menu implementation and
 improve layout for badge spacing (#27265)

---
 .../EventTypeListItem.ios.tsx                 | 151 ++++++++----------
 1 file changed, 65 insertions(+), 86 deletions(-)

diff --git a/companion/components/event-type-list-item/EventTypeListItem.ios.tsx b/companion/components/event-type-list-item/EventTypeListItem.ios.tsx
index 3623084d0d..a1cf5a7c62 100644
--- a/companion/components/event-type-list-item/EventTypeListItem.ios.tsx
+++ b/companion/components/event-type-list-item/EventTypeListItem.ios.tsx
@@ -90,94 +90,73 @@ export const EventTypeListItem = ({
     <View
       className={`bg-cal-bg active:bg-cal-bg-secondary ${!isLast ? "border-b border-cal-border" : ""}`}
     >
-      {/* Native iOS Context Menu for long-press */}
-      <Host matchContents>
-        <ContextMenu
-          modifiers={[buttonStyle(isLiquidGlassAvailable() ? "glass" : "bordered")]}
-          activationMethod="longPress"
+      {/* Calculate minHeight based on badge rows to ensure proper spacing */}
+      {/* 1-3 badges = 1 row, 4-5 badges = likely 2 rows, 6 badges = 2 rows */}
+      <View
+        className="flex-row items-start justify-between"
+        style={{
+          paddingVertical: 16,
+          minHeight: badgeCount <= 3 ? 100 : badgeCount <= 5 ? 120 : 160,
+        }}
+      >
+        <Pressable
+          onPress={() => handleEventTypePress(item)}
+          style={{
+            paddingLeft: 16,
+            paddingBottom: 10,
+            flex: 1,
+            marginRight: 12,
+          }}
         >
-          <ContextMenu.Items>
-            {eventTypes.map((eventType) => (
-              <Button
-                key={eventType.label}
-                systemImage={eventType.icon}
-                onPress={eventType.onPress}
-                role={eventType.role}
-                label={eventType.label}
-              />
-            ))}
-          </ContextMenu.Items>
-          <ContextMenu.Trigger>
-            {/* Calculate minHeight based on badge rows to ensure proper spacing */}
-            {/* 1-3 badges = 1 row, 4-5 badges = likely 2 rows, 6 badges = 2 rows */}
-            <View
-              className="flex-row items-start justify-between"
-              style={{
-                paddingVertical: 16,
-                minHeight: badgeCount <= 3 ? 100 : badgeCount <= 5 ? 130 : 160,
-              }}
-            >
-              <Pressable
-                onPress={() => handleEventTypePress(item)}
-                style={{
-                  paddingLeft: 16,
-                  paddingBottom: 10,
-                  flex: 1,
-                  marginRight: 12,
-                }}
-              >
-                <EventTypeTitle
-                  title={item.title}
-                  username={item.users?.[0]?.username}
-                  slug={item.slug}
-                  bookingUrl={item.bookingUrl}
-                />
-                <EventTypeDescription normalizedDescription={normalizedDescription} />
-                <EventTypeBadges
-                  formattedDuration={formattedDuration}
-                  hidden={item.hidden}
-                  seats={item.seats}
-                  hasPrice={hasPrice}
-                  formattedPrice={formattedPrice}
-                  confirmationPolicy={item.confirmationPolicy}
-                  recurrence={item.recurrence}
-                />
-              </Pressable>
+          <EventTypeTitle
+            title={item.title}
+            username={item.users?.[0]?.username}
+            slug={item.slug}
+            bookingUrl={item.bookingUrl}
+          />
+          <EventTypeDescription normalizedDescription={normalizedDescription} />
+          <EventTypeBadges
+            formattedDuration={formattedDuration}
+            hidden={item.hidden}
+            seats={item.seats}
+            hasPrice={hasPrice}
+            formattedPrice={formattedPrice}
+            confirmationPolicy={item.confirmationPolicy}
+            recurrence={item.recurrence}
+          />
+        </Pressable>
 
-              <View style={{ paddingRight: 16, paddingTop: 4, flexShrink: 0 }}>
-                <Host matchContents>
-                  <ContextMenu
-                    modifiers={[buttonStyle(isLiquidGlassAvailable() ? "glass" : "bordered")]}
-                    activationMethod="singlePress"
-                  >
-                    <ContextMenu.Items>
-                      {eventTypes.map((eventType) => (
-                        <Button
-                          key={eventType.label}
-                          systemImage={eventType.icon}
-                          onPress={eventType.onPress}
-                          role={eventType.role}
-                          label={eventType.label}
-                        />
-                      ))}
-                    </ContextMenu.Items>
-                    <ContextMenu.Trigger>
-                      <HStack>
-                        <Image
-                          systemName="ellipsis"
-                          color="primary"
-                          size={24}
-                          modifiers={[frame({ height: 24, width: 17 })]}
-                        />
-                      </HStack>
-                    </ContextMenu.Trigger>
-                  </ContextMenu>
-                </Host>
-              </View>
-            </View>
-          </ContextMenu.Trigger>
-        </ContextMenu>
-      </Host>
+        <View style={{ paddingRight: 16, paddingTop: 4, flexShrink: 0 }}>
+          <Host matchContents>
+            <ContextMenu
+              modifiers={[buttonStyle(isLiquidGlassAvailable() ? "glass" : "bordered")]}
+              activationMethod="singlePress"
+            >
+              <ContextMenu.Items>
+                {eventTypes.map((eventType) => (
+                  <Button
+                    key={eventType.label}
+                    systemImage={eventType.icon}
+                    onPress={eventType.onPress}
+                    role={eventType.role}
+                    label={eventType.label}
+                  />
+                ))}
+              </ContextMenu.Items>
+              <ContextMenu.Trigger>
+                <HStack>
+                  <Image
+                    systemName="ellipsis"
+                    color="primary"
+                    size={24}
+                    modifiers={[frame({ height: 24, width: 17 })]}
+                  />
+                </HStack>
+              </ContextMenu.Trigger>
+            </ContextMenu>
+          </Host>
+        </View>
+      </View>
     </View>
   );
 };