Fix close button styling and add disconnect for incoming chats

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.
This commit is contained in:
2025-12-10 20:43:19 +01:00
parent 55e197a5c5
commit 2d7a88ba5f

View File

@@ -1137,6 +1137,37 @@ export default function App() {
Connected Connected
</div> </div>
</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>
))} ))}
</div> </div>
@@ -1208,12 +1239,12 @@ export default function App() {
}} }}
style={{ style={{
...styles.removeBtn, ...styles.removeBtn,
background: '#ff9800', background: '#dc3545',
marginRight: '4px' marginRight: '4px'
}} }}
title="Close chat" title="End chat"
> >
</button> </button>
)} )}
<button <button