mirror of
https://github.com/xtr-dev/rondevu-demo.git
synced 2025-12-16 04:53:24 +00:00
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:
37
src/App.jsx
37
src/App.jsx
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user