Merge pull request #36 from 8JP8/fix-friend-requests-badge-position-2067340501194718294

Fix: Friend Requests Badge, VoIP Logout, and Settings Menu Styling

Author: 8JP8

frontend/components/UI/FriendRequestsButton.tsx

@@ -46,7 +46,7 @@ const FriendRequestsButton: React.FC<FriendRequestsButtonProps> = () => {
     <>
       <button
         onClick={() => setShowModal(true)}
-        className="p-2 rounded-lg hover:theme-bg-tertiary transition-colors"
+        className="relative p-2 rounded-lg hover:theme-bg-tertiary transition-colors"
         aria-label={t('privateMessages.friendRequests') || 'Friend Requests'}
         title={t('privateMessages.friendRequests') || 'Friend Requests'}
       >
@@ -73,4 +73,3 @@ const FriendRequestsButton: React.FC<FriendRequestsButtonProps> = () => {
 };
 
 export default FriendRequestsButton;
-

frontend/components/UI/UserMenu.tsx

@@ -64,7 +64,7 @@ const UserMenu: React.FC<UserMenuProps> = ({ placement = 'bottom' }) => {
         <Link
           href="/settings"
           id="user-menu-item-settings"
-          className="w-full flex items-center space-x-3 px-4 py-2 text-sm theme-text-primary hover:theme-bg-tertiary transition-colors"
+          className="w-full flex items-center space-x-3 px-4 py-2 text-sm theme-text-primary hover:theme-bg-tertiary hover:no-underline hover:theme-text-primary transition-colors"
           onClick={() => setIsOpen(false)}
         >
           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">

frontend/contexts/VoipContext.tsx

@@ -927,6 +927,14 @@ export const VoipProvider: React.FC<VoipProviderProps> = ({ children }) => {
         }
     }, [socket, connected, user, activeCall]);
 
+    // Handle user logout - ensure call is cleaned up
+    useEffect(() => {
+        if (!user && activeCall) {
+            console.log('[VOIP] User logged out, cleaning up call');
+            leaveCall();
+        }
+    }, [user, activeCall, leaveCall]);
+
     // Handle socket disconnect - mark self as disconnected
     useEffect(() => {
         if (!socket) return;