@syra.fm/sdk 0.5.0 → 0.7.0

package/src/live/components/RoomCard.tsx

@@ -1,11 +1,13 @@
 import React, { useMemo } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, StyleProp, ViewStyle } from 'react-native';
+import { View, Text, TouchableOpacity, StyleProp, ViewStyle } from 'react-native';
 import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
 import { useAuth } from '@oxyhq/services';
 
 import { useLiveConfig } from '../context/LiveConfigContext';
 import { AnimatedPulse } from './AnimatedPulse';
 import { useRoomUsers, getAvatarUrl } from '../hooks/useRoomUsers';
+import { LIVE_COLOR, LIVE_FOREGROUND_COLOR } from '../colors';
+import type { LiveTheme } from '../types';
 
 // --- Utility helpers ---
 
@@ -24,38 +26,55 @@ function formatDuration(startedAt: string, endedAt: string): string {
   return m > 0 ? `${h}h ${m}m` : `${h}h`;
 }
 
-const MONTH_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const DAY_MS = 86_400_000;
 
-function formatDate(dateStr: string): string {
-  const d = new Date(dateStr);
-  return `${d.getDate()} ${MONTH_SHORT[d.getMonth()]} ${d.getFullYear()}`;
+function startOfDay(date: Date): number {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
 }
 
-function getTimeLabel(room: RoomCardProps['room']): string {
-  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: Date, now: Date): string {
+  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: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'short' };
+  if (date.getFullYear() !== now.getFullYear()) options.year = 'numeric';
+  return date.toLocaleDateString(undefined, options);
+}
+
+function formatTime(date: Date): string {
+  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: RoomCardProps['room'], now: Date): string {
   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: Record<string, { icon: 'account-voice' | 'broadcast'; label: string; color: string }> = {
-  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 ---
 
@@ -89,6 +108,24 @@ interface RoomCardProps {
 
 // --- 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: React.FC<RoomCardProps> = ({
   room,
   onPress,
@@ -109,6 +146,7 @@ export const RoomCard: React.FC<RoomCardProps> = ({
   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
@@ -122,187 +160,238 @@ export const RoomCard: React.FC<RoomCardProps> = ({
         || '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);
-
-  // --- Compact variant (kept simple) ---
+  const scheduleLabel = isLive ? '' : getScheduleLabel(room, new Date());
+  const byline = house ? `by ${hostName} · ${house.name}` : `by ${hostName}`;
+
+  // --- 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 (
       <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}
       >
-        <View style={styles.compactHeader}>
-          {house && (
-            <Text style={[styles.compactHouseName, { color: theme.colors.textSecondary }]} numberOfLines={1}>
-              {house.name.toUpperCase()}
-            </Text>
+        <View className="flex-1">
+          {isLive && (
+            <View className="mb-1.5 flex-row">
+              <LiveBadge />
+            </View>
           )}
-          <Text style={[styles.compactTitle, { color: theme.colors.text }]} numberOfLines={2}>
+          <Text className="text-sm font-semibold leading-[18px] text-foreground" numberOfLines={2}>
             {room.title}
           </Text>
-          {(isLive || isScheduled || typeMeta) && (
-            <View style={styles.compactBadgeRow}>
-              {isLive && (
-                <View style={[styles.liveBadge, { backgroundColor: '#FF4458' }]}>
-                  <AnimatedPulse size={6} />
-                  <Text style={styles.liveText}>LIVE</Text>
-                </View>
-              )}
-              {isScheduled && (
-                <View style={[styles.scheduledBadge, { backgroundColor: theme.colors.backgroundSecondary }]}>
-                  <MaterialCommunityIcons name="calendar" size={10} color={theme.colors.textSecondary} />
-                  <Text style={[styles.scheduledText, { color: theme.colors.textSecondary }]}>SCHEDULED</Text>
-                </View>
-              )}
-              {typeMeta && (
-                <View style={[styles.typeBadge, { backgroundColor: typeMeta.color + '20' }]}>
-                  <MaterialCommunityIcons name={typeMeta.icon} size={10} color={typeMeta.color} />
-                  <Text style={[styles.typeText, { color: typeMeta.color }]}>{typeMeta.label}</Text>
-                </View>
-              )}
-            </View>
-          )}
         </View>
-        <View style={styles.compactFooter}>
-          <MaterialCommunityIcons name="account-group" size={14} color={theme.colors.textSecondary} />
-          <Text style={[styles.compactCount, { color: theme.colors.textSecondary }]}>
-            {listenerCount} listening
-          </Text>
-          <Text style={{ color: theme.colors.textSecondary, fontSize: 10 }}>•</Text>
-          {hostAvatarUri && (
-            <AvatarComponent size={14} source={hostAvatarUri} shape="squircle" style={{ marginRight: 2 }} />
-          )}
-          <Text style={[styles.compactHost, { color: theme.colors.textSecondary }]} numberOfLines={1}>
-            {hostName}
+        <View className="mt-2 gap-1">
+          <View className="flex-row items-center gap-1">
+            <AvatarComponent size={14} source={hostAvatarUri} shape="squircle" />
+            <Text className="flex-1 text-[11px] text-muted-foreground" numberOfLines={1}>
+              {byline}
+            </Text>
+          </View>
+          <Text className="text-[11px] text-muted-foreground" numberOfLines={1}>
+            {isLive ? `${formatCompact(listenerCount)} listening` : scheduleLabel}
           </Text>
         </View>
       </TouchableOpacity>
     );
   }
 
-  // --- Default variant ---
-  return (
-    <TouchableOpacity
-      style={[styles.card, { backgroundColor: theme.colors.card, borderColor: theme.colors.border }, style]}
-      onPress={onPress}
-      activeOpacity={onPress ? 0.7 : 1}
-      disabled={!onPress}
-    >
-      {/* Section 1: House header + menu */}
-      {(house || onMenuPress) && (
-        <View style={styles.houseRow}>
-          {house && (
+  // --- Featured card: a LIVE room, with presence and an explicit CTA ---
+  if (isFeatured) {
+    return (
+      <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}
+      >
+        {/* Status + the only number that matters on air, then icon-only actions */}
+        <View className="flex-row items-center gap-1.5">
+          <LiveBadge />
+          {listenerCount > 0 && (
             <>
-              <MaterialCommunityIcons name="home" size={16} color={theme.colors.primary} />
-              <Text style={[styles.houseName, { color: theme.colors.textSecondary }]} numberOfLines={1}>
-                {house.name.toUpperCase()}
+              <Text className="text-[13px] text-muted-foreground">·</Text>
+              <Text className="text-[13px] font-semibold text-muted-foreground" numberOfLines={1}>
+                {formatCompact(listenerCount)} listening
               </Text>
             </>
           )}
-          <View style={{ flex: 1 }} />
-          {onMenuPress && (
-            <TouchableOpacity onPress={onMenuPress} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
-              <MaterialCommunityIcons name="dots-horizontal" size={20} color={theme.colors.textSecondary} />
-            </TouchableOpacity>
+          <View className="flex-1" />
+          {onSave && (
+            <SaveAction onSave={onSave} isSaved={isSaved} isScheduled={false} theme={theme} />
           )}
+          {onMenuPress && <MenuAction onMenuPress={onMenuPress} theme={theme} />}
         </View>
-      )}
 
-      {/* Section 2: Title + status badges */}
-      <View>
-        <Text style={[styles.title, { color: theme.colors.text }]} numberOfLines={2}>
+        <Text className="text-[17px] font-bold leading-[22px] text-foreground" numberOfLines={2}>
           {room.title}
         </Text>
-        {(isLive || isScheduled || typeMeta) && (
-          <View style={styles.badgeRow}>
-            {isLive && (
-              <View style={[styles.liveBadge, { backgroundColor: '#FF4458' }]}>
-                <AnimatedPulse size={6} />
-                <Text style={styles.liveText}>LIVE</Text>
-              </View>
-            )}
-            {isScheduled && (
-              <View style={[styles.scheduledBadge, { backgroundColor: theme.colors.backgroundSecondary }]}>
-                <MaterialCommunityIcons name="calendar" size={12} color={theme.colors.textSecondary} />
-                <Text style={[styles.scheduledText, { color: theme.colors.textSecondary }]}>SCHEDULED</Text>
-              </View>
-            )}
-            {typeMeta && (
-              <View style={[styles.typeBadge, { backgroundColor: typeMeta.color + '20' }]}>
-                <MaterialCommunityIcons name={typeMeta.icon} size={10} color={typeMeta.color} />
-                <Text style={[styles.typeText, { color: typeMeta.color }]}>{typeMeta.label}</Text>
-              </View>
-            )}
-          </View>
-        )}
-      </View>
 
-      {/* Section 3: Speaker avatars + listener count */}
-      <SpeakerRow
-        speakerIds={speakerIds}
-        listenerCount={listenerCount}
-        theme={theme}
-      />
+        <SpeakerStack speakerIds={speakerIds} hiddenCount={hiddenSpeakerCount} />
 
-      {/* Section 4: Metadata + save */}
-      {(timeLabel || onSave) && (
-        <View style={styles.metaRow}>
-          {timeLabel ? (
-            <Text style={[styles.metaText, { color: theme.colors.textSecondary }]}>{timeLabel}</Text>
-          ) : (
-            <View />
-          )}
-          {onSave && (
-            <TouchableOpacity onPress={onSave} style={styles.saveButton} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
-              <MaterialCommunityIcons
-                name={isSaved ? 'bookmark' : 'bookmark-outline'}
-                size={18}
-                color={isSaved ? theme.colors.primary : theme.colors.textSecondary}
-              />
-              <Text style={[styles.saveText, { color: isSaved ? theme.colors.primary : theme.colors.textSecondary }]}>
-                Save
+        {/* Host — a room's primary identity — and the join affordance */}
+        <View className="flex-row items-center gap-2">
+          <AvatarComponent size={BYLINE_AVATAR_SIZE} source={hostAvatarUri} shape="squircle" />
+          <Text className="flex-1 text-[13px] text-muted-foreground" numberOfLines={1}>
+            {byline}
+          </Text>
+          {onPress && (
+            <TouchableOpacity
+              className="rounded-full px-4 py-1.5"
+              style={{ backgroundColor: LIVE_COLOR }}
+              onPress={onPress}
+              accessibilityRole="button"
+              accessibilityLabel="Join room"
+            >
+              <Text className="text-[13px] font-bold" style={{ color: LIVE_FOREGROUND_COLOR }}>
+                Join
               </Text>
             </TouchableOpacity>
           )}
         </View>
-      )}
+      </TouchableOpacity>
+    );
+  }
+
+  // --- Compact row: a SCHEDULED or ENDED room, flush in the feed ---
+  return (
+    <TouchableOpacity
+      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}
+    >
+      <AvatarComponent size={ROW_AVATAR_SIZE} source={hostAvatarUri} shape="squircle" />
+
+      <View className="flex-1 gap-0.5">
+        <View className="flex-row items-baseline gap-1.5">
+          <Text className="shrink text-[15px] font-semibold text-foreground" numberOfLines={1}>
+            {room.title}
+          </Text>
+          {scheduleLabel !== '' && (
+            <Text className="shrink-0 text-[13px] text-muted-foreground" numberOfLines={1}>
+              · {scheduleLabel}
+            </Text>
+          )}
+        </View>
+        <Text className="text-[13px] text-muted-foreground" numberOfLines={1}>
+          {byline}
+        </Text>
+      </View>
+
+      {onSave && <SaveAction onSave={onSave} isSaved={isSaved} isScheduled={isScheduled} theme={theme} />}
+      {onMenuPress && <MenuAction onMenuPress={onMenuPress} theme={theme} />}
     </TouchableOpacity>
   );
 };
 
-// --- 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 (
+    <View
+      className="flex-row items-center gap-1 rounded-[4px] px-2 py-1"
+      style={{ backgroundColor: LIVE_COLOR }}
+    >
+      <AnimatedPulse size={6} color={LIVE_FOREGROUND_COLOR} />
+      <Text className="text-[10px] font-bold text-white">LIVE</Text>
+    </View>
+  );
+}
+
+// --- 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,
 }: {
-  speakerIds: string[];
-  listenerCount: number;
-  theme: ReturnType<ReturnType<typeof useLiveConfig>['useTheme']>;
+  onSave: () => void;
+  isSaved?: boolean;
+  isScheduled: boolean;
+  theme: LiveTheme;
 }) {
+  const icon = isScheduled
+    ? (isSaved ? 'bell' : 'bell-outline')
+    : (isSaved ? 'bookmark' : 'bookmark-outline');
+
+  return (
+    <TouchableOpacity
+      onPress={onSave}
+      hitSlop={ACTION_HIT_SLOP}
+      accessibilityRole="button"
+      accessibilityLabel={isScheduled ? 'Remind me about this room' : 'Save room'}
+      accessibilityState={{ selected: Boolean(isSaved) }}
+    >
+      <MaterialCommunityIcons
+        name={icon}
+        size={20}
+        color={isSaved ? theme.colors.primary : theme.colors.textSecondary}
+      />
+    </TouchableOpacity>
+  );
+}
+
+function MenuAction({ onMenuPress, theme }: { onMenuPress: () => void; theme: LiveTheme }) {
   return (
-    <View style={styles.avatarRow}>
-      {speakerIds.map((id) => (
-        <SpeakerAvatar key={id} userId={id} />
+    <TouchableOpacity
+      onPress={onMenuPress}
+      hitSlop={ACTION_HIT_SLOP}
+      accessibilityRole="button"
+      accessibilityLabel="Room options"
+    >
+      <MaterialCommunityIcons name="dots-horizontal" size={20} color={theme.colors.textSecondary} />
+    </TouchableOpacity>
+  );
+}
+
+// --- Speaker stack (featured card only) ---
+
+function SpeakerStack({ speakerIds, hiddenCount }: { speakerIds: string[]; hiddenCount: number }) {
+  if (speakerIds.length === 0) return null;
+
+  return (
+    <View className="flex-row items-center">
+      {speakerIds.map((id, index) => (
+        <View key={id} className={index === 0 ? '' : '-ml-3'}>
+          <SpeakerAvatar userId={id} />
+        </View>
       ))}
-      {listenerCount > 0 && (
-        <View style={[styles.countTile, { backgroundColor: theme.colors.backgroundSecondary, borderColor: theme.colors.border }]}>
-          <Text style={[styles.countTileText, { color: theme.colors.textSecondary }]}>
-            +{formatCompact(listenerCount)}
+      {hiddenCount > 0 && (
+        <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 }}
+        >
+          <Text className="text-[13px] font-bold text-muted-foreground">
+            +{formatCompact(hiddenCount)}
           </Text>
         </View>
       )}
@@ -311,184 +400,17 @@ function SpeakerRow({
 }
 
 function SpeakerAvatar({ userId }: { userId: string }) {
-  const { useUserById, AvatarComponent, getCachedFileDownloadUrlSync, useTheme } = useLiveConfig();
-  const theme = useTheme();
+  const { useUserById, AvatarComponent, getCachedFileDownloadUrlSync } = useLiveConfig();
   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 (
-    <View style={[styles.avatarRing, { borderColor: theme.colors.border }]}>
-      <AvatarComponent
-        size={SPEAKER_AVATAR_SIZE}
-        source={avatarUri}
-        shape="squircle"
-      />
+    <View className="rounded-full border-2 border-surface">
+      <AvatarComponent size={SPEAKER_AVATAR_SIZE} source={avatarUri} shape="squircle" />
     </View>
   );
 }
 
-// --- 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;