From 2d7a88ba5f914f3b57edb0a0b0f6ec4603c87bc6 Mon Sep 17 00:00:00 2001
From: Bas van den Aakster <bvdaakster@gmail.com>
Date: Wed, 10 Dec 2025 20:43:19 +0100
Subject: [PATCH] Fix close button styling and add disconnect for incoming
 chats
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close Button Improvements:
- Change pause icon (⏸) to close icon (✕) for clarity
- Change orange background to red (#dc3545) to indicate destructive action
- Update tooltip from 'Close chat' to 'End chat'
- Now visually distinct from the trash icon for removing friends

Add Disconnect for Incoming Chats:
- Add ✕ disconnect button to 'Active Chats' section (non-friends)
- Allows host to disconnect from incoming connections
- Same red styling as friend chat close button
- Shows 'Disconnected from {username}' toast

Both buttons now clearly indicate their purpose and work consistently
across friends and incoming chats.
---
 src/App.jsx | 37 ++++++++++++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 13906ff..63d23ef 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1137,6 +1137,37 @@ export default function App() {
                           Connected
                         </div>
                       </div>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          // Close/disconnect the chat
+                          const chat = activeChats[contact];
+                          if (chat) {
+                            try {
+                              chat.channel?.close();
+                              chat.connection?.close();
+                            } catch (err) {
+                              console.error('Error closing chat:', err);
+                            }
+                            setActiveChats(prev => {
+                              const updated = { ...prev };
+                              delete updated[contact];
+                              return updated;
+                            });
+                            if (selectedChat === contact) {
+                              setSelectedChat(null);
+                            }
+                            toast.success(`Disconnected from ${contact}`);
+                          }
+                        }}
+                        style={{
+                          ...styles.removeBtn,
+                          background: '#dc3545'
+                        }}
+                        title="Disconnect"
+                      >
+                        ✕
+                      </button>
                     </div>
                   ))}
               </div>
@@ -1208,12 +1239,12 @@ export default function App() {
                           }}
                           style={{
                             ...styles.removeBtn,
-                            background: '#ff9800',
+                            background: '#dc3545',
                             marginRight: '4px'
                           }}
-                          title="Close chat"
+                          title="End chat"
                         >
-                          ⏸
+                          ✕
                         </button>
                       )}
                       <button