From a08dd1dccc60f80cbc918fb9c78a9bba0f4d9db4 Mon Sep 17 00:00:00 2001
From: Bas van den Aakster <bvdaakster@gmail.com>
Date: Wed, 10 Dec 2025 20:25:38 +0100
Subject: [PATCH] Add incoming chats UI and stop ICE polling when connected

UI improvements:
- Add 'Incoming Chats' section showing connections from non-friends
- Auto-select and show incoming chat when someone connects
- Toast notification when someone connects to you as host

ICE polling fix:
- Stop ICE candidate polling once connection is established
- Prevents unnecessary network requests after connection succeeds
- Only poll while in 'connecting' state

This fixes:
1. Host couldn't see incoming chats (they weren't in UI)
2. Answerer kept polling ICE candidates even after connected
---
 src/App.jsx | 43 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/src/App.jsx b/src/App.jsx
index 603d822..fc22381 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -522,6 +522,10 @@ export default function App() {
             }
           }));
 
+          // Auto-select the incoming chat to show it immediately
+          setSelectedChat(peerUsername);
+          toast.success(`${peerUsername} connected to you!`);
+
           // Send acknowledgment
           dc.send(JSON.stringify({
             type: 'identify_ack',
@@ -680,6 +684,9 @@ export default function App() {
         console.log('Client connection state:', pc.connectionState);
         if (pc.connectionState === 'connected') {
           toast.success(`Connected to ${contact}`, { id: 'connecting' });
+          // Stop ICE polling once connected
+          clearInterval(icePolling);
+          console.log('[Answerer] Stopped ICE polling - connection established');
         } else if (pc.connectionState === 'failed' || pc.connectionState === 'disconnected') {
           toast.error(`Disconnected from ${contact}`);
           clearInterval(icePolling);
@@ -970,6 +977,42 @@ export default function App() {
               </button>
             </div>
 
+            {/* Incoming Chats (not in contacts) */}
+            {Object.keys(activeChats).filter(username => !contacts.includes(username) && activeChats[username].status === 'connected').length > 0 && (
+              <div style={styles.contactsList}>
+                <div style={styles.contactsHeader}>
+                  Incoming Chats ({Object.keys(activeChats).filter(username => !contacts.includes(username) && activeChats[username].status === 'connected').length})
+                </div>
+                {Object.keys(activeChats)
+                  .filter(username => !contacts.includes(username) && activeChats[username].status === 'connected')
+                  .map(contact => (
+                    <div
+                      key={contact}
+                      className="contact-item"
+                      style={{
+                        ...styles.contactItem,
+                        ...(selectedChat === contact ? styles.contactItemActive : {})
+                      }}
+                      onClick={() => setSelectedChat(contact)}
+                    >
+                      <div style={styles.contactAvatar}>
+                        {contact[0].toUpperCase()}
+                        <span style={{
+                          ...styles.contactDot,
+                          background: '#4caf50'
+                        }}></span>
+                      </div>
+                      <div style={{ flex: 1 }}>
+                        <div style={styles.contactName}>{contact}</div>
+                        <div style={styles.contactStatus}>
+                          Connected (incoming)
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            )}
+
             {/* Contacts List */}
             <div style={styles.contactsList}>
               <div style={styles.contactsHeader}>