Lots of UX and UI fixes and tweaks including fixing more bugs with user permissions

Author: bchou9

backend/routes/rooms.py

@@ -547,6 +547,16 @@ def share_room(roomId):
                     })
                 except Exception:
                     pass
+            # Send dedicated invite event for real-time dashboard updates
+            try:
+                push_to_user(uid, 'invite_received', {
+                    'roomId': str(room['_id']),
+                    'roomName': room.get('name'),
+                    'inviterName': claims['username'],
+                    'role': user_role
+                })
+            except Exception:
+                pass
             results["invited"].append({"username": uname, "role": role})
         else:
             shares_coll.update_one(
@@ -577,6 +587,25 @@ def share_room(roomId):
                     })
             except Exception:
                 pass
+            # Send real-time event for room access granted
+            try:
+                push_to_user(uid, 'room_access_granted', {
+                    'roomId': str(room["_id"]),
+                    'roomName': room.get('name'),
+                    'role': user_role
+                })
+            except Exception:
+                pass
+            # Notify all room members that someone was added
+            try:
+                push_to_room(str(room["_id"]), 'member_added', {
+                    'roomId': str(room["_id"]),
+                    'userId': uid,
+                    'username': user["username"],
+                    'role': user_role
+                })
+            except Exception:
+                pass
             results["updated"].append({"username": uname, "role": user_role, "note": "added to public room"})
     return jsonify({"status":"ok","results": results})
 
@@ -2069,6 +2098,23 @@ def update_permissions(roomId):
                 })
             except Exception:
                 pass
+        # Send real-time event to user so they get kicked immediately
+        try:
+            push_to_user(target_user_id, 'user_removed_from_room', {
+                'roomId': roomId,
+                'roomName': room.get('name'),
+                'message': f"You were removed from room '{room.get('name')}'"
+            })
+        except Exception:
+            pass
+        # Notify all room members that someone was removed
+        try:
+            push_to_room(roomId, 'member_removed', {
+                'roomId': roomId,
+                'userId': target_user_id
+            })
+        except Exception:
+            pass
         return jsonify({"status":"ok","removed": target_user_id})
     role = (data.get("role") or "").lower()
     if role not in ("admin","editor","viewer"):
@@ -2101,6 +2147,25 @@ def update_permissions(roomId):
                 })
         except Exception:
             pass
+    # Send real-time event to user whose role changed so UI updates immediately
+    try:
+        push_to_user(target_user_id, 'role_changed', {
+            'roomId': roomId,
+            'roomName': room.get('name'),
+            'newRole': role,
+            'message': f"Your role in room '{room.get('name')}' was changed to '{role}'"
+        })
+    except Exception:
+        pass
+    # Notify all room members that someone's role changed
+    try:
+        push_to_room(roomId, 'member_role_changed', {
+            'roomId': roomId,
+            'userId': target_user_id,
+            'newRole': role
+        })
+    except Exception:
+        pass
     return jsonify({"status":"ok","userId": target_user_id, "role": role})
 
 @rooms_bp.route("/rooms/<roomId>", methods=["PATCH"])
@@ -2225,6 +2290,15 @@ def update_room(roomId):
             "createdAt": room_refreshed.get("createdAt"),
             "updatedAt": room_refreshed.get("updatedAt")
         }
+        # Notify all room members that room settings were updated
+        try:
+            push_to_room(roomId, 'room_updated', {
+                'roomId': roomId,
+                'updates': updates,
+                'room': resp_room
+            })
+        except Exception:
+            pass
         return jsonify({"status": "ok", "room": resp_room})
     except Exception:
         return jsonify({"status":"ok","updated": updates})
@@ -2286,6 +2360,33 @@ def transfer_ownership(roomId):
         "read": False,
         "createdAt": datetime.utcnow()
     })
+    # Send real-time events for ownership transfer
+    try:
+        push_to_user(str(target_user["_id"]), 'role_changed', {
+            'roomId': roomId,
+            'roomName': room.get('name'),
+            'newRole': 'owner',
+            'message': f"You are now the owner of room '{room.get('name')}'"
+        })
+    except Exception:
+        pass
+    try:
+        push_to_user(claims["sub"], 'role_changed', {
+            'roomId': roomId,
+            'roomName': room.get('name'),
+            'newRole': 'editor',
+            'message': f"You transferred ownership of room '{room.get('name')}' to {target_user['username']}"
+        })
+    except Exception:
+        pass
+    try:
+        # Notify all room members about ownership change
+        push_to_room(roomId, 'room_updated', {
+            'roomId': roomId,
+            'updates': {'ownerId': str(target_user["_id"]), 'ownerName': target_user["username"]}
+        })
+    except Exception:
+        pass
     return jsonify({"status":"ok"})
 
 @rooms_bp.route("/rooms/<roomId>/leave", methods=["POST"])
@@ -2330,6 +2431,15 @@ def leave_room(roomId):
         "read": False,
         "createdAt": datetime.utcnow()
     })
+    # Send real-time event to notify room members that someone left
+    try:
+        push_to_room(roomId, 'member_removed', {
+            'roomId': roomId,
+            'userId': user_id,
+            'username': claims.get('username')
+        })
+    except Exception:
+        pass
     return jsonify({"status":"ok", "removed": True})
 
 @rooms_bp.route("/rooms/<roomId>", methods=["DELETE"])
@@ -2543,6 +2653,35 @@ def accept_invite(inviteId):
             })
         except Exception:
             pass
+    # Send real-time events when invite is accepted
+    try:
+        # Notify the user who accepted (for dashboard room list update)
+        push_to_user(inv["invitedUserId"], 'room_access_granted', {
+            'roomId': inv["roomId"],
+            'roomName': inv.get('roomName'),
+            'role': inv["role"]
+        })
+    except Exception:
+        pass
+    try:
+        # Also send invite_accepted event so their pending invites list updates
+        push_to_user(inv["invitedUserId"], 'invite_accepted', {
+            'inviteId': inviteId,
+            'roomId': inv["roomId"],
+            'roomName': inv.get('roomName')
+        })
+    except Exception:
+        pass
+    try:
+        # Notify all room members that someone was added
+        push_to_room(inv["roomId"], 'member_added', {
+            'roomId': inv["roomId"],
+            'userId': inv["invitedUserId"],
+            'username': inv["invitedUsername"],
+            'role': inv["role"]
+        })
+    except Exception:
+        pass
     return jsonify({"status":"ok"})
 
 @rooms_bp.route("/invites/<inviteId>/decline", methods=["POST"])
@@ -2584,6 +2723,15 @@ def decline_invite(inviteId):
             })
         except Exception:
             pass
+    # Send real-time event to user who declined so their invites list updates
+    try:
+        push_to_user(inv["invitedUserId"], 'invite_declined', {
+            'inviteId': inviteId,
+            'roomId': inv["roomId"],
+            'roomName': inv.get('roomName')
+        })
+    except Exception:
+        pass
     return jsonify({"status":"ok"})
 
 @rooms_bp.route("/notifications", methods=["GET"])

frontend/src/components/NotificationsMenu.jsx

@@ -8,7 +8,7 @@ import { handleAuthError } from '../utils/authUtils';
 export default function NotificationsMenu({ auth }) {
   const [anchor, setAnchor] = useState(null);
   const [items, setItems] = useState([]);
-  const unread = items.filter(i => !i.read).length;
+  const [unreadCount, setUnreadCount] = useState(0);
   const [highlightedIds, setHighlightedIds] = useState(new Set());
 
   async function refresh() {
@@ -19,6 +19,9 @@ export default function NotificationsMenu({ auth }) {
       // highlight unread items
       const unreadIds = new Set((res || []).filter(r => !r.read).map(r => r.id));
       setHighlightedIds(unreadIds);
+      // Update unread count immediately
+      const count = (res || []).filter(r => !r.read).length;
+      setUnreadCount(count);
     } catch (err) {
       console.error('Failed to load notifications:', err);
       handleAuthError(err);
@@ -33,6 +36,8 @@ export default function NotificationsMenu({ auth }) {
       // new notifications are highlighted (unread)
       setItems(prev => [{ ...n, id }, ...prev]);
       setHighlightedIds(prev => new Set(Array.from(prev).concat([id])));
+      // Increment unread count for new notification
+      setUnreadCount(prev => prev + 1);
     });
     setSocketToken(auth.token);
     getSocket(auth.token);
@@ -75,6 +80,8 @@ export default function NotificationsMenu({ auth }) {
       if (!n.read) {
         await markNotificationRead(auth.token, n.id);
         setItems(prev => prev.map(it => it.id === n.id ? { ...it, read: true } : it));
+        // Decrement unread count when marking as read
+        setUnreadCount(prev => Math.max(0, prev - 1));
       }
     } catch (e) { console.error('mark read failed', e); }
     setHighlightedIds(prev => { const s = new Set(Array.from(prev)); s.delete(n.id); return s; });
@@ -85,6 +92,10 @@ export default function NotificationsMenu({ auth }) {
       await deleteNotification(auth.token, n.id);
       setItems(prev => prev.filter(it => it.id !== n.id));
       setHighlightedIds(prev => { const s = new Set(Array.from(prev)); s.delete(n.id); return s; });
+      // Decrement unread count if the deleted notification was unread
+      if (!n.read) {
+        setUnreadCount(prev => Math.max(0, prev - 1));
+      }
     } catch (e) { console.error('delete failed', e); }
   }
 
@@ -93,6 +104,7 @@ export default function NotificationsMenu({ auth }) {
       await clearNotifications(auth.token);
       setItems([]);
       setHighlightedIds(new Set());
+      setUnreadCount(0);
     } catch (e) { console.error('clear all failed', e); }
   }
 
@@ -157,7 +169,7 @@ export default function NotificationsMenu({ auth }) {
   return (
     <>
       <IconButton color="inherit" onClick={handleOpen} sx={{ '&:hover': { boxShadow: '0 2px 8px rgba(37,216,197,0.12)', transform: 'translateY(-1px)' }, transition: 'all 120ms ease' }}>
-        <Badge badgeContent={unread} color="error">
+        <Badge badgeContent={unreadCount} color="error">
           <NotificationsIcon />
         </Badge>
       </IconButton>

frontend/src/pages/Dashboard.jsx

@@ -16,6 +16,7 @@ import { useNavigate, Link } from 'react-router-dom';
 import RouterLinkWrapper from '../components/RouterLinkWrapper';
 import { handleAuthError } from '../utils/authUtils';
 import { formatErrorMessage, clientValidation } from '../utils/errorHandling';
+import { getSocket, setSocketToken } from '../services/socket';
 
 export default function Dashboard({ auth }) {
   const nav = useNavigate();
@@ -132,6 +133,73 @@ export default function Dashboard({ auth }) {
     return () => window.removeEventListener('rescanvas:rooms-updated', onRoomsUpdated);
   }, []);
 
+  // Socket.IO listener for real-time dashboard updates
+  useEffect(() => {
+    if (!auth?.token) return;
+
+    try {
+      setSocketToken(auth.token);
+      const sock = getSocket(auth.token);
+
+      const onRoomAccessGranted = (payload) => {
+        console.log('Room access granted:', payload);
+        setSnack({ open: true, message: `You were added to room: ${payload.roomName || 'a room'}` });
+        refresh();
+      };
+
+      const onUserRemovedFromRoom = (payload) => {
+        console.log('User removed from room:', payload);
+        setSnack({ open: true, message: payload.message || 'You were removed from a room' });
+        refresh();
+      };
+
+      const onRoomDeleted = (payload) => {
+        console.log('Room deleted:', payload);
+        setSnack({ open: true, message: 'A room was deleted' });
+        refresh();
+      };
+
+      const onInviteReceived = (payload) => {
+        console.log('Invite received:', payload);
+        setSnack({ open: true, message: `You were invited to room: ${payload.roomName || 'a room'}` });
+        // Refresh invites list immediately
+        listInvites(auth.token).then(inv => setInvites(inv)).catch(err => console.error('Failed to refresh invites:', err));
+      };
+
+      const onInviteAccepted = (payload) => {
+        console.log('Invite accepted:', payload);
+        // Remove from pending invites list immediately
+        setInvites(prev => prev.filter(inv => inv.id !== payload.inviteId));
+      };
+
+      const onInviteDeclined = (payload) => {
+        console.log('Invite declined:', payload);
+        // Remove from pending invites list immediately
+        setInvites(prev => prev.filter(inv => inv.id !== payload.inviteId));
+      };
+
+      sock.on('room_access_granted', onRoomAccessGranted);
+      sock.on('user_removed_from_room', onUserRemovedFromRoom);
+      sock.on('room_deleted', onRoomDeleted);
+      sock.on('invite_received', onInviteReceived);
+      sock.on('invite_accepted', onInviteAccepted);
+      sock.on('invite_declined', onInviteDeclined);
+
+      return () => {
+        try {
+          sock.off('room_access_granted', onRoomAccessGranted);
+          sock.off('user_removed_from_room', onUserRemovedFromRoom);
+          sock.off('room_deleted', onRoomDeleted);
+          sock.off('invite_received', onInviteReceived);
+          sock.off('invite_accepted', onInviteAccepted);
+          sock.off('invite_declined', onInviteDeclined);
+        } catch (e) { }
+      };
+    } catch (e) {
+      console.error('Failed to setup socket listeners:', e);
+    }
+  }, [auth?.token]);
+
   // Persist sort preferences
   useEffect(() => {
     try { localStorage.setItem('rescanvas:publicSortKey', publicSortKey); } catch (e) { }