fix: realtime UI and offline handling

src/games/sync/ui/OnlinePeersList.module.css

@@ -0,0 +1,12 @@
+.identiconBadge {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--mantine-color-dark-5);
+  border: 2px solid var(--mantine-color-dark-7);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+}

src/games/sync/ui/OnlinePeersList.tsx

@@ -0,0 +1,90 @@
+import { Avatar, Box, Divider, Group, Stack, Text } from '@mantine/core';
+import { IconCircleFilled } from '@tabler/icons-react';
+import { useMemo } from 'react';
+import { useAllPeers } from '../peersSlice';
+import { SENDER_ID } from '../realtimeSyncTypes';
+import { DeviceIdenticon } from './DeviceIdenticon';
+import classes from './OnlinePeersList.module.css';
+
+const IDENTICON_SIZE = 14;
+
+export function OnlinePeersList() {
+  const peers = useAllPeers();
+
+  const leaderSenderId = useMemo(() => {
+    if (peers.length === 0) return null;
+    return [...peers.map(p => p.senderId)].sort()[0];
+  }, [peers]);
+
+  const groupedByUser = useMemo(() => {
+    const groups = new Map<
+      string,
+      {
+        userId: string;
+        displayName: string;
+        avatarUrl: string | null;
+        devices: typeof peers;
+      }
+    >();
+    for (const p of peers) {
+      const existing = groups.get(p.userId);
+      if (existing) {
+        existing.devices.push(p);
+      } else {
+        groups.set(p.userId, {
+          userId: p.userId,
+          displayName: p.displayName,
+          avatarUrl: p.avatarUrl,
+          devices: [p],
+        });
+      }
+    }
+    return Array.from(groups.values());
+  }, [peers]);
+
+  return (
+    <Stack gap="xs" miw={220}>
+      {groupedByUser.map((group, idx) => (
+        <Box key={group.userId || group.displayName}>
+          {idx > 0 && <Divider mb="xs" />}
+          <Group gap="xs" wrap="nowrap" mb={4}>
+            <Avatar src={group.avatarUrl} size={22} radius="xl">
+              {group.displayName.charAt(0).toUpperCase()}
+            </Avatar>
+            <Text size="sm" fw={500}>
+              {group.displayName}
+              {group.devices.some(d => d.senderId === SENDER_ID) && (
+                <Text span size="xs" c="dimmed">
+                  {' '}
+                  (you)
+                </Text>
+              )}
+            </Text>
+          </Group>
+          <Stack gap={4} pl={30}>
+            {group.devices.map(device => (
+              <Group key={device.senderId} gap={6} wrap="nowrap">
+                <Box className={classes.identiconBadge}>
+                  <DeviceIdenticon
+                    seed={device.deviceName}
+                    size={IDENTICON_SIZE}
+                  />
+                </Box>
+                <Text size="xs" c="dimmed">
+                  {device.deviceName || 'Unknown device'}
+                </Text>
+                {device.senderId === leaderSenderId && (
+                  <IconCircleFilled
+                    size={8}
+                    color="var(--mantine-color-green-5)"
+                    title="Leader"
+                  />
+                )}
+              </Group>
+            ))}
+          </Stack>
+        </Box>
+      ))}
+    </Stack>
+  );
+}

src/games/sync/ui/PeerAvatar.module.css

@@ -0,0 +1,22 @@
+.wrap {
+  position: relative;
+  display: inline-flex;
+  width: var(--peer-avatar-size);
+  height: var(--peer-avatar-size);
+  vertical-align: middle;
+}
+
+.badge {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  width: var(--peer-avatar-badge-size);
+  height: var(--peer-avatar-badge-size);
+  border-radius: 50%;
+  border: 2px solid var(--mantine-color-dark-7);
+  background: var(--mantine-color-dark-5);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/games/sync/ui/PeerAvatar.tsx

@@ -1,7 +1,9 @@
 import { Avatar, Box, Tooltip } from '@mantine/core';
+import type { CSSProperties } from 'react';
 import type { PeerInfo } from '../peersSlice';
 import { SENDER_ID } from '../realtimeSyncTypes';
 import { DeviceIdenticon } from './DeviceIdenticon';
+import classes from './PeerAvatar.module.css';
 
 export interface PeerAvatarProps {
   peer: PeerInfo;
@@ -35,31 +37,16 @@ export function PeerAvatar({
   const content =
     showDeviceBadge && peer.deviceName ? (
       <Box
-        pos="relative"
-        style={{
-          display: 'inline-flex',
-          width: size,
-          height: size,
-          verticalAlign: 'middle',
-        }}
+        className={classes.wrap}
+        style={
+          {
+            '--peer-avatar-size': `${size}px`,
+            '--peer-avatar-badge-size': `${badgeSize}px`,
+          } as CSSProperties
+        }
       >
         {avatar}
-        <Box
-          pos="absolute"
-          style={{
-            bottom: -2,
-            right: -2,
-            width: badgeSize,
-            height: badgeSize,
-            borderRadius: '50%',
-            border: '2px solid var(--mantine-color-dark-7)',
-            background: 'var(--mantine-color-dark-5)',
-            overflow: 'hidden',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
+        <Box className={classes.badge}>
           <DeviceIdenticon
             seed={peer.deviceName}
             size={badgeSize - 4}

src/games/sync/ui/RealtimeSyncIndicator.module.css

@@ -0,0 +1,52 @@
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 6px 4px 10px;
+  border-radius: 999px;
+  background: var(--mantine-color-dark-6);
+  border: 1px solid var(--mantine-color-dark-4);
+  transition:
+    background 120ms ease,
+    border-color 120ms ease;
+}
+
+.pill:not(:disabled):hover {
+  background: var(--mantine-color-dark-5);
+  border-color: var(--mantine-color-dark-3);
+}
+
+.pill:disabled {
+  cursor: default;
+}
+
+.statusIconWrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.statusDot {
+  position: absolute;
+  bottom: -1px;
+  right: -1px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--mantine-color-green-5);
+  border: 1.5px solid var(--mantine-color-dark-6);
+  box-shadow: 0 0 6px var(--mantine-color-green-5);
+}
+
+.avatarStack {
+  display: inline-flex;
+  align-items: center;
+}
+
+.avatarStackItem {
+  position: relative;
+  z-index: var(--peer-z, 0);
+}
+
+.avatarStackItem:not(:first-child) {
+  margin-left: -10px;
+}