peer count in UI

crates/lanspread-tauri-deno-ts/src/App.css

@@ -284,3 +284,10 @@ h1.align-center {
     font-weight: bold;
     color: #4866b9;
 }
+
+.top-left-peer-count {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    z-index: 1001;
+}

crates/lanspread-tauri-deno-ts/src/App.tsx

@@ -44,6 +44,7 @@ const App = () => {
     const [searchTerm, setSearchTerm] = useState('');
     const [gameDir, setGameDir] = useState('');
     const [currentFilter, setCurrentFilter] = useState<GameFilter>('available');
+    const [totalPeerCount, setTotalPeerCount] = useState(0);
     const checkingPeersTimeouts = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
 
     const getFilteredGames = (games: Game[], filter: GameFilter): Game[] => {
@@ -154,6 +155,17 @@ const App = () => {
 
         setupDownloadFailedListener();
         setupNoPeersListener();
+
+        const setupPeerCountListener = async () => {
+            const unlisten = await listen('peer-count-updated', (event) => {
+                const count = event.payload as number;
+                console.log(`🗲 peer-count-updated ${count} event received`);
+                setTotalPeerCount(count);
+            });
+            return unlisten;
+        };
+
+        setupPeerCountListener();
     }, [gameDir]);
 
     useEffect(() => {
@@ -427,6 +439,13 @@ const App = () => {
     return (
         <main className="container">
             <div className="fixed-header">
+                <div className="top-left-peer-count">
+                    {totalPeerCount > 0 && (
+                        <span className="peer-count">
+                            👥 {totalPeerCount}
+                        </span>
+                    )}
+                </div>
                 <h1 className="align-center">SoftLAN Launcher</h1>
                 <div className="main-header">
                     {gameDir ? (