@syra.fm/sdk 0.5.0 → 0.7.0

package/lib/module/live/components/RoomCard.js

@@ -1,15 +1,16 @@
 "use strict";
 
 import React, { useMemo } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity } from 'react-native';
 import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
 import { useAuth } from '@oxyhq/services';
 import { useLiveConfig } from "../context/LiveConfigContext.js";
 import { AnimatedPulse } from "./AnimatedPulse.js";
 import { useRoomUsers, getAvatarUrl } from "../hooks/useRoomUsers.js";
-
-// --- Utility helpers ---
+import { LIVE_COLOR, LIVE_FOREGROUND_COLOR } from "../colors.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// --- Utility helpers ---
+
 function formatCompact(num) {
   if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`;
   if (num >= 1_000) return `${(num / 1_000).toFixed(1).replace(/\.0$/, '')}k`;
@@ -23,48 +24,86 @@ function formatDuration(startedAt, endedAt) {
   const m = totalMin % 60;
   return m > 0 ? `${h}h ${m}m` : `${h}h`;
 }
-const MONTH_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-function formatDate(dateStr) {
-  const d = new Date(dateStr);
-  return `${d.getDate()} ${MONTH_SHORT[d.getMonth()]} ${d.getFullYear()}`;
+const DAY_MS = 86_400_000;
+function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
 }
-function getTimeLabel(room) {
-  if (room.status === 'ended' && room.startedAt && room.endedAt) {
-    return `${formatDuration(room.startedAt, room.endedAt)}  ·  ${formatDate(room.endedAt)}`;
-  }
-  if (room.status === 'live' && room.startedAt) {
-    return `Live  ·  Started ${formatDate(room.startedAt)}`;
-  }
+
+/** `Today` / `Tomorrow` / `Yesterday`, else a locale short date (year only when it differs). */
+function formatDay(date, now) {
+  const dayDelta = Math.round((startOfDay(date) - startOfDay(now)) / DAY_MS);
+  if (dayDelta === 0) return 'Today';
+  if (dayDelta === 1) return 'Tomorrow';
+  if (dayDelta === -1) return 'Yesterday';
+  const options = {
+    day: 'numeric',
+    month: 'short'
+  };
+  if (date.getFullYear() !== now.getFullYear()) options.year = 'numeric';
+  return date.toLocaleDateString(undefined, options);
+}
+function formatTime(date) {
+  return date.toLocaleTimeString(undefined, {
+    hour: 'numeric',
+    minute: '2-digit'
+  });
+}
+
+/**
+ * The when-label for a room that is NOT live: the start time for a scheduled room
+ * (`Tomorrow 18:00`), the day + duration for an ended one (`Yesterday · 45 min`).
+ * A live room never uses this — its lead metric is the listener count.
+ */
+function getScheduleLabel(room, now) {
   if (room.status === 'scheduled' && room.scheduledStart) {
-    return formatDate(room.scheduledStart);
+    const start = new Date(room.scheduledStart);
+    return `${formatDay(start, now)} ${formatTime(start)}`;
+  }
+  if (room.status === 'ended' && room.endedAt) {
+    const day = formatDay(new Date(room.endedAt), now);
+    return room.startedAt ? `${day} · ${formatDuration(room.startedAt, room.endedAt)}` : day;
   }
   if (room.createdAt) {
-    return formatDate(room.createdAt);
+    return formatDay(new Date(room.createdAt), now);
   }
   return '';
 }
 
 // --- Constants ---
 
-const ROOM_TYPE_META = {
-  stage: {
-    icon: 'account-voice',
-    label: 'Stage',
-    color: '#3B82F6'
-  },
-  broadcast: {
-    icon: 'broadcast',
-    label: 'Broadcast',
-    color: '#FF6B35'
-  }
-};
-const MAX_SPEAKER_AVATARS = 4;
+const MAX_SPEAKER_AVATARS = 3;
 const SPEAKER_AVATAR_SIZE = 44;
+const ROW_AVATAR_SIZE = 40;
+const BYLINE_AVATAR_SIZE = 20;
+const ACTION_HIT_SLOP = {
+  top: 8,
+  bottom: 8,
+  left: 8,
+  right: 8
+};
 
 // --- Types ---
 
 // --- Component ---
 
+/**
+ * A room in a list. The `default` variant renders ONE of two presentations,
+ * selected by `room.status`, because a live room and a listing of one are
+ * different objects:
+ *
+ * - **live** → a featured card: the LIVE chip + the listener count (the only
+ *   number that matters while a room is on air), the speaker faces, the host,
+ *   and an explicit Join CTA.
+ * - **scheduled / ended** → a flush full-width row: host avatar, title + when,
+ *   byline, and one subtle right-side action. No card chrome, no CTA — there is
+ *   nothing to join yet (or ever again).
+ *
+ * At most ONE status chip is ever shown (a live room is not a scheduled one, and
+ * the date already says "scheduled"); the room type carries no badge at all.
+ *
+ * The `compact` variant is the small fixed-width card used by post attachments
+ * and the composer preview, and follows the same rules in miniature.
+ */
 export const RoomCard = ({
   room,
   onPress,
@@ -91,6 +130,7 @@ export const RoomCard = ({
   const isLive = room.status === 'live';
   const isScheduled = room.status === 'scheduled';
   const isCompact = variant === 'compact';
+  const isFeatured = isLive && !isCompact;
 
   // Resolve host display: an explicit prop wins, then the @handle, then the
   // canonical API-owned `name.displayName` from the Oxy user DTO (never a
@@ -99,264 +139,260 @@ export const RoomCard = ({
   const hostName = hostNameProp ?? (hostProfile?.username ? `@${hostProfile.username}` : (typeof hostProfileName === 'object' ? hostProfileName?.displayName : null) || room.host?.slice(0, 10) || 'Unknown');
   const hostAvatarUri = hostAvatarUriProp ?? getAvatarUrl(hostProfile, oxyServices, getCachedFileDownloadUrlSync);
 
-  // Resolve speaker avatars (default variant only)
+  // Speaker faces only earn their space on the featured (live) card.
   const speakerIds = useMemo(() => {
-    if (isCompact) return [];
+    if (!isFeatured) return [];
     const ids = room.speakers?.length ? room.speakers : [room.host];
     return ids.slice(0, MAX_SPEAKER_AVATARS);
-  }, [room.speakers, room.host, isCompact]);
+  }, [isFeatured, room.speakers, room.host]);
+  const hiddenSpeakerCount = Math.max(0, (room.speakers?.length ?? 0) - speakerIds.length);
   useRoomUsers(speakerIds);
-  const typeMeta = room.type && room.type !== 'talk' ? ROOM_TYPE_META[room.type] : null;
   const listenerCount = room.participants?.length || room.stats?.totalJoined || 0;
-  const timeLabel = getTimeLabel(room);
+  const scheduleLabel = isLive ? '' : getScheduleLabel(room, new Date());
+  const byline = house ? `by ${hostName} · ${house.name}` : `by ${hostName}`;
 
-  // --- Compact variant (kept simple) ---
+  // --- Compact variant (post attachments, composer preview) ---
+  // It lives inside HORIZONTAL carousels, where a percentage width has no parent
+  // to resolve against — hence the intrinsic width, capped at the parent so a
+  // constrained host box (the composer preview) can still shrink it. Hosts
+  // override any of this through `style`, which wins over the className.
   if (isCompact) {
     return /*#__PURE__*/_jsxs(TouchableOpacity, {
-      style: [styles.compactCard, {
-        backgroundColor: theme.colors.card,
-        borderColor: theme.colors.border
-      }, style],
+      className: "w-[200px] max-w-full min-h-[140px] justify-between rounded-2xl border border-border bg-surface p-3",
+      style: style,
       onPress: onPress,
       activeOpacity: onPress ? 0.7 : 1,
       disabled: !onPress,
       children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.compactHeader,
-        children: [house && /*#__PURE__*/_jsx(Text, {
-          style: [styles.compactHouseName, {
-            color: theme.colors.textSecondary
-          }],
-          numberOfLines: 1,
-          children: house.name.toUpperCase()
+        className: "flex-1",
+        children: [isLive && /*#__PURE__*/_jsx(View, {
+          className: "mb-1.5 flex-row",
+          children: /*#__PURE__*/_jsx(LiveBadge, {})
         }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.compactTitle, {
-            color: theme.colors.text
-          }],
+          className: "text-sm font-semibold leading-[18px] text-foreground",
           numberOfLines: 2,
           children: room.title
-        }), (isLive || isScheduled || typeMeta) && /*#__PURE__*/_jsxs(View, {
-          style: styles.compactBadgeRow,
-          children: [isLive && /*#__PURE__*/_jsxs(View, {
-            style: [styles.liveBadge, {
-              backgroundColor: '#FF4458'
-            }],
-            children: [/*#__PURE__*/_jsx(AnimatedPulse, {
-              size: 6
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.liveText,
-              children: "LIVE"
-            })]
-          }), isScheduled && /*#__PURE__*/_jsxs(View, {
-            style: [styles.scheduledBadge, {
-              backgroundColor: theme.colors.backgroundSecondary
-            }],
-            children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
-              name: "calendar",
-              size: 10,
-              color: theme.colors.textSecondary
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.scheduledText, {
-                color: theme.colors.textSecondary
-              }],
-              children: "SCHEDULED"
-            })]
-          }), typeMeta && /*#__PURE__*/_jsxs(View, {
-            style: [styles.typeBadge, {
-              backgroundColor: typeMeta.color + '20'
-            }],
-            children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
-              name: typeMeta.icon,
-              size: 10,
-              color: typeMeta.color
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.typeText, {
-                color: typeMeta.color
-              }],
-              children: typeMeta.label
-            })]
-          })]
         })]
       }), /*#__PURE__*/_jsxs(View, {
-        style: styles.compactFooter,
-        children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
-          name: "account-group",
-          size: 14,
-          color: theme.colors.textSecondary
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: [styles.compactCount, {
-            color: theme.colors.textSecondary
-          }],
-          children: [listenerCount, " listening"]
+        className: "mt-2 gap-1",
+        children: [/*#__PURE__*/_jsxs(View, {
+          className: "flex-row items-center gap-1",
+          children: [/*#__PURE__*/_jsx(AvatarComponent, {
+            size: 14,
+            source: hostAvatarUri,
+            shape: "squircle"
+          }), /*#__PURE__*/_jsx(Text, {
+            className: "flex-1 text-[11px] text-muted-foreground",
+            numberOfLines: 1,
+            children: byline
+          })]
         }), /*#__PURE__*/_jsx(Text, {
-          style: {
-            color: theme.colors.textSecondary,
-            fontSize: 10
-          },
-          children: "\u2022"
-        }), hostAvatarUri && /*#__PURE__*/_jsx(AvatarComponent, {
-          size: 14,
+          className: "text-[11px] text-muted-foreground",
+          numberOfLines: 1,
+          children: isLive ? `${formatCompact(listenerCount)} listening` : scheduleLabel
+        })]
+      })]
+    });
+  }
+
+  // --- Featured card: a LIVE room, with presence and an explicit CTA ---
+  if (isFeatured) {
+    return /*#__PURE__*/_jsxs(TouchableOpacity, {
+      className: "mb-3 w-full gap-2.5 rounded-2xl border border-border bg-surface p-3",
+      style: style,
+      onPress: onPress,
+      activeOpacity: onPress ? 0.7 : 1,
+      disabled: !onPress,
+      children: [/*#__PURE__*/_jsxs(View, {
+        className: "flex-row items-center gap-1.5",
+        children: [/*#__PURE__*/_jsx(LiveBadge, {}), listenerCount > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            className: "text-[13px] text-muted-foreground",
+            children: "\xB7"
+          }), /*#__PURE__*/_jsxs(Text, {
+            className: "text-[13px] font-semibold text-muted-foreground",
+            numberOfLines: 1,
+            children: [formatCompact(listenerCount), " listening"]
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          className: "flex-1"
+        }), onSave && /*#__PURE__*/_jsx(SaveAction, {
+          onSave: onSave,
+          isSaved: isSaved,
+          isScheduled: false,
+          theme: theme
+        }), onMenuPress && /*#__PURE__*/_jsx(MenuAction, {
+          onMenuPress: onMenuPress,
+          theme: theme
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        className: "text-[17px] font-bold leading-[22px] text-foreground",
+        numberOfLines: 2,
+        children: room.title
+      }), /*#__PURE__*/_jsx(SpeakerStack, {
+        speakerIds: speakerIds,
+        hiddenCount: hiddenSpeakerCount
+      }), /*#__PURE__*/_jsxs(View, {
+        className: "flex-row items-center gap-2",
+        children: [/*#__PURE__*/_jsx(AvatarComponent, {
+          size: BYLINE_AVATAR_SIZE,
           source: hostAvatarUri,
-          shape: "squircle",
-          style: {
-            marginRight: 2
-          }
+          shape: "squircle"
         }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.compactHost, {
-            color: theme.colors.textSecondary
-          }],
+          className: "flex-1 text-[13px] text-muted-foreground",
           numberOfLines: 1,
-          children: hostName
+          children: byline
+        }), onPress && /*#__PURE__*/_jsx(TouchableOpacity, {
+          className: "rounded-full px-4 py-1.5",
+          style: {
+            backgroundColor: LIVE_COLOR
+          },
+          onPress: onPress,
+          accessibilityRole: "button",
+          accessibilityLabel: "Join room",
+          children: /*#__PURE__*/_jsx(Text, {
+            className: "text-[13px] font-bold",
+            style: {
+              color: LIVE_FOREGROUND_COLOR
+            },
+            children: "Join"
+          })
         })]
       })]
     });
   }
 
-  // --- Default variant ---
+  // --- Compact row: a SCHEDULED or ENDED room, flush in the feed ---
   return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    style: [styles.card, {
-      backgroundColor: theme.colors.card,
-      borderColor: theme.colors.border
-    }, style],
+    className: "w-full flex-row items-center gap-3 border-b border-border px-3 py-3",
+    style: style,
     onPress: onPress,
     activeOpacity: onPress ? 0.7 : 1,
     disabled: !onPress,
-    children: [(house || onMenuPress) && /*#__PURE__*/_jsxs(View, {
-      style: styles.houseRow,
-      children: [house && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
-          name: "home",
-          size: 16,
-          color: theme.colors.primary
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.houseName, {
-            color: theme.colors.textSecondary
-          }],
-          numberOfLines: 1,
-          children: house.name.toUpperCase()
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: {
-          flex: 1
-        }
-      }), onMenuPress && /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: onMenuPress,
-        hitSlop: {
-          top: 8,
-          bottom: 8,
-          left: 8,
-          right: 8
-        },
-        children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
-          name: "dots-horizontal",
-          size: 20,
-          color: theme.colors.textSecondary
-        })
-      })]
+    children: [/*#__PURE__*/_jsx(AvatarComponent, {
+      size: ROW_AVATAR_SIZE,
+      source: hostAvatarUri,
+      shape: "squircle"
     }), /*#__PURE__*/_jsxs(View, {
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.title, {
-          color: theme.colors.text
-        }],
-        numberOfLines: 2,
-        children: room.title
-      }), (isLive || isScheduled || typeMeta) && /*#__PURE__*/_jsxs(View, {
-        style: styles.badgeRow,
-        children: [isLive && /*#__PURE__*/_jsxs(View, {
-          style: [styles.liveBadge, {
-            backgroundColor: '#FF4458'
-          }],
-          children: [/*#__PURE__*/_jsx(AnimatedPulse, {
-            size: 6
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.liveText,
-            children: "LIVE"
-          })]
-        }), isScheduled && /*#__PURE__*/_jsxs(View, {
-          style: [styles.scheduledBadge, {
-            backgroundColor: theme.colors.backgroundSecondary
-          }],
-          children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
-            name: "calendar",
-            size: 12,
-            color: theme.colors.textSecondary
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.scheduledText, {
-              color: theme.colors.textSecondary
-            }],
-            children: "SCHEDULED"
-          })]
-        }), typeMeta && /*#__PURE__*/_jsxs(View, {
-          style: [styles.typeBadge, {
-            backgroundColor: typeMeta.color + '20'
-          }],
-          children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
-            name: typeMeta.icon,
-            size: 10,
-            color: typeMeta.color
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.typeText, {
-              color: typeMeta.color
-            }],
-            children: typeMeta.label
-          })]
+      className: "flex-1 gap-0.5",
+      children: [/*#__PURE__*/_jsxs(View, {
+        className: "flex-row items-baseline gap-1.5",
+        children: [/*#__PURE__*/_jsx(Text, {
+          className: "shrink text-[15px] font-semibold text-foreground",
+          numberOfLines: 1,
+          children: room.title
+        }), scheduleLabel !== '' && /*#__PURE__*/_jsxs(Text, {
+          className: "shrink-0 text-[13px] text-muted-foreground",
+          numberOfLines: 1,
+          children: ["\xB7 ", scheduleLabel]
         })]
+      }), /*#__PURE__*/_jsx(Text, {
+        className: "text-[13px] text-muted-foreground",
+        numberOfLines: 1,
+        children: byline
       })]
-    }), /*#__PURE__*/_jsx(SpeakerRow, {
-      speakerIds: speakerIds,
-      listenerCount: listenerCount,
+    }), onSave && /*#__PURE__*/_jsx(SaveAction, {
+      onSave: onSave,
+      isSaved: isSaved,
+      isScheduled: isScheduled,
+      theme: theme
+    }), onMenuPress && /*#__PURE__*/_jsx(MenuAction, {
+      onMenuPress: onMenuPress,
       theme: theme
-    }), (timeLabel || onSave) && /*#__PURE__*/_jsxs(View, {
-      style: styles.metaRow,
-      children: [timeLabel ? /*#__PURE__*/_jsx(Text, {
-        style: [styles.metaText, {
-          color: theme.colors.textSecondary
-        }],
-        children: timeLabel
-      }) : /*#__PURE__*/_jsx(View, {}), onSave && /*#__PURE__*/_jsxs(TouchableOpacity, {
-        onPress: onSave,
-        style: styles.saveButton,
-        hitSlop: {
-          top: 8,
-          bottom: 8,
-          left: 8,
-          right: 8
-        },
-        children: [/*#__PURE__*/_jsx(MaterialCommunityIcons, {
-          name: isSaved ? 'bookmark' : 'bookmark-outline',
-          size: 18,
-          color: isSaved ? theme.colors.primary : theme.colors.textSecondary
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.saveText, {
-            color: isSaved ? theme.colors.primary : theme.colors.textSecondary
-          }],
-          children: "Save"
-        })]
-      })]
     })]
   });
 };
 
-// --- Speaker row sub-component ---
+// --- Badges ---
 
-function SpeakerRow({
-  speakerIds,
-  listenerCount,
+// The LIVE badge is the one surface that must NOT theme with the host: it is the
+// brand's "on air" signal, so its red comes from the shared live palette and its
+// content sits on white regardless of light/dark mode.
+function LiveBadge() {
+  return /*#__PURE__*/_jsxs(View, {
+    className: "flex-row items-center gap-1 rounded-[4px] px-2 py-1",
+    style: {
+      backgroundColor: LIVE_COLOR
+    },
+    children: [/*#__PURE__*/_jsx(AnimatedPulse, {
+      size: 6,
+      color: LIVE_FOREGROUND_COLOR
+    }), /*#__PURE__*/_jsx(Text, {
+      className: "text-[10px] font-bold text-white",
+      children: "LIVE"
+    })]
+  });
+}
+
+// --- Actions (icon-only, like the surrounding feed) ---
+
+/**
+ * The saved-state toggle. On a SCHEDULED room, saving it is how you ask to be
+ * pulled back when it starts, so the icon reads as a reminder bell; anywhere
+ * else it is a bookmark.
+ */
+function SaveAction({
+  onSave,
+  isSaved,
+  isScheduled,
   theme
 }) {
+  const icon = isScheduled ? isSaved ? 'bell' : 'bell-outline' : isSaved ? 'bookmark' : 'bookmark-outline';
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    onPress: onSave,
+    hitSlop: ACTION_HIT_SLOP,
+    accessibilityRole: "button",
+    accessibilityLabel: isScheduled ? 'Remind me about this room' : 'Save room',
+    accessibilityState: {
+      selected: Boolean(isSaved)
+    },
+    children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+      name: icon,
+      size: 20,
+      color: isSaved ? theme.colors.primary : theme.colors.textSecondary
+    })
+  });
+}
+function MenuAction({
+  onMenuPress,
+  theme
+}) {
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    onPress: onMenuPress,
+    hitSlop: ACTION_HIT_SLOP,
+    accessibilityRole: "button",
+    accessibilityLabel: "Room options",
+    children: /*#__PURE__*/_jsx(MaterialCommunityIcons, {
+      name: "dots-horizontal",
+      size: 20,
+      color: theme.colors.textSecondary
+    })
+  });
+}
+
+// --- Speaker stack (featured card only) ---
+
+function SpeakerStack({
+  speakerIds,
+  hiddenCount
+}) {
+  if (speakerIds.length === 0) return null;
   return /*#__PURE__*/_jsxs(View, {
-    style: styles.avatarRow,
-    children: [speakerIds.map(id => /*#__PURE__*/_jsx(SpeakerAvatar, {
-      userId: id
-    }, id)), listenerCount > 0 && /*#__PURE__*/_jsx(View, {
-      style: [styles.countTile, {
-        backgroundColor: theme.colors.backgroundSecondary,
-        borderColor: theme.colors.border
-      }],
+    className: "flex-row items-center",
+    children: [speakerIds.map((id, index) => /*#__PURE__*/_jsx(View, {
+      className: index === 0 ? '' : '-ml-3',
+      children: /*#__PURE__*/_jsx(SpeakerAvatar, {
+        userId: id
+      })
+    }, id)), hiddenCount > 0 && /*#__PURE__*/_jsx(View, {
+      className: "-ml-3 items-center justify-center rounded-full border-2 border-surface bg-muted",
+      style: {
+        width: SPEAKER_AVATAR_SIZE,
+        height: SPEAKER_AVATAR_SIZE
+      },
       children: /*#__PURE__*/_jsxs(Text, {
-        style: [styles.countTileText, {
-          color: theme.colors.textSecondary
-        }],
-        children: ["+", formatCompact(listenerCount)]
+        className: "text-[13px] font-bold text-muted-foreground",
+        children: ["+", formatCompact(hiddenCount)]
       })
     })]
   });
@@ -367,19 +403,17 @@ function SpeakerAvatar({
   const {
     useUserById,
     AvatarComponent,
-    getCachedFileDownloadUrlSync,
-    useTheme
+    getCachedFileDownloadUrlSync
   } = useLiveConfig();
-  const theme = useTheme();
   const {
     oxyServices
   } = useAuth();
   const profile = useUserById(userId);
   const avatarUri = getAvatarUrl(profile, oxyServices, getCachedFileDownloadUrlSync);
+
+  // The ring is the card's own surface color, so overlapping faces stay separable.
   return /*#__PURE__*/_jsx(View, {
-    style: [styles.avatarRing, {
-      borderColor: theme.colors.border
-    }],
+    className: "rounded-full border-2 border-surface",
     children: /*#__PURE__*/_jsx(AvatarComponent, {
       size: SPEAKER_AVATAR_SIZE,
       source: avatarUri,
@@ -387,162 +421,5 @@ function SpeakerAvatar({
     })
   });
 }
-
-// --- Styles ---
-
-const styles = StyleSheet.create({
-  card: {
-    borderRadius: 12,
-    borderWidth: 1,
-    padding: 16,
-    marginBottom: 12,
-    gap: 12
-  },
-  compactCard: {
-    width: 200,
-    minHeight: 140,
-    borderRadius: 14,
-    borderWidth: 1,
-    padding: 12,
-    justifyContent: 'space-between'
-  },
-  // House header
-  houseRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6
-  },
-  houseName: {
-    fontSize: 11,
-    fontWeight: '700',
-    letterSpacing: 0.5
-  },
-  // Title
-  title: {
-    fontSize: 32,
-    fontWeight: '700',
-    lineHeight: 38
-  },
-  // Badges
-  badgeRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-    marginTop: 6
-  },
-  liveBadge: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
-    gap: 4
-  },
-  liveText: {
-    fontSize: 10,
-    fontWeight: '700',
-    color: '#FFFFFF'
-  },
-  scheduledBadge: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
-    gap: 4
-  },
-  scheduledText: {
-    fontSize: 10,
-    fontWeight: '700'
-  },
-  typeBadge: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 6,
-    paddingVertical: 3,
-    borderRadius: 4,
-    gap: 3
-  },
-  typeText: {
-    fontSize: 9,
-    fontWeight: '700'
-  },
-  // Speaker avatars
-  avatarRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8
-  },
-  avatarRing: {
-    borderRadius: 14,
-    padding: 2,
-    borderWidth: 2
-  },
-  countTile: {
-    width: SPEAKER_AVATAR_SIZE + 4,
-    height: SPEAKER_AVATAR_SIZE + 4,
-    borderRadius: 14,
-    borderWidth: 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 2
-  },
-  countTileText: {
-    fontSize: 14,
-    fontWeight: '700'
-  },
-  // Metadata
-  metaRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between'
-  },
-  metaText: {
-    fontSize: 13
-  },
-  saveButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4
-  },
-  saveText: {
-    fontSize: 13,
-    fontWeight: '500'
-  },
-  // Compact variant
-  compactHeader: {
-    flex: 1
-  },
-  compactHouseName: {
-    fontSize: 9,
-    fontWeight: '700',
-    letterSpacing: 0.5,
-    marginBottom: 4
-  },
-  compactTitle: {
-    fontSize: 14,
-    fontWeight: '600',
-    lineHeight: 18
-  },
-  compactBadgeRow: {
-    flexDirection: 'row',
-    marginTop: 4,
-    gap: 4,
-    flexWrap: 'wrap'
-  },
-  compactFooter: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-    marginTop: 8
-  },
-  compactCount: {
-    fontSize: 11
-  },
-  compactHost: {
-    fontSize: 11,
-    flex: 1
-  }
-});
 export default RoomCard;
 //# sourceMappingURL=RoomCard.js.map