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

Author: bchou9

backend/routes/rooms.py

@@ -446,9 +446,14 @@ def share_room(roomId):
     claims = g.token_claims
     room = g.current_room
 
-    inviter_share = shares_coll.find_one({"roomId": str(room["_id"]), "userId": claims["sub"]})
-    if not inviter_share or inviter_share.get("role") not in ("owner","admin","editor"):
-        return jsonify({"status":"error","message":"Forbidden: Only room owner, admin, or editor can share"}), 403
+    is_owner = (str(room.get("ownerId")) == claims["sub"])
+    if not is_owner:
+        inviter_share = shares_coll.find_one({"roomId": str(room["_id"]), "userId": claims["sub"]})
+        if not inviter_share or inviter_share.get("role") not in ("admin","editor"):
+            return jsonify({"status":"error","message":"Forbidden: Only room owner, admin, or editor can share"}), 403
+        inviter_role = inviter_share.get("role")
+    else:
+        inviter_role = "owner"
 
     data = request.get_json(force=True) or {}
     usernames = data.get("usernames") or []
@@ -474,7 +479,7 @@ def share_room(roomId):
     if role == "owner":
         return jsonify({"status":"error","message":"Cannot invite as owner; use transfer endpoint"}), 400
 
-    if role == "admin" and inviter_share.get("role") != "owner":
+    if role == "admin" and inviter_role != "owner":
         return jsonify({"status":"error","message":"Forbidden: Only the room owner may invite admin users"}), 403
 
     results = {"invited": [], "updated": [], "errors": []}
@@ -1959,26 +1964,47 @@ def get_room_members(roomId):
     user = g.current_user
     claims = g.token_claims
     room = g.current_room
+    
+    members = []
+    
+    # Add the owner first
+    owner_id = None
+    try:
+        owner_id = room.get("ownerId")
+        owner_name = room.get("ownerName")
+        if owner_id:
+            members.append({
+                "username": owner_name or "Unknown",
+                "userId": owner_id,
+                "role": "owner"
+            })
+    except Exception as e:
+        logger.error(f"Failed to add owner to members list: {e}")
+    
+    # Add all other members from shares_coll (excluding owner if they have a share record)
     try:
         cursor = shares_coll.find({"roomId": str(room["_id"])}, {"username": 1, "userId": 1, "role": 1})
-        members = []
         for m in cursor:
             if not m: continue
+            # Skip if this is the owner (owners shouldn't have share records, but filter just in case)
+            if owner_id and m.get("userId") == owner_id:
+                continue
             members.append({
                 "username": m.get("username"),
                 "userId": m.get("userId"),
                 "role": m.get("role") or "editor"
             })
-    except Exception:
-        members = []
+    except Exception as e:
+        logger.error(f"Failed to fetch members from shares_coll: {e}")
+    
     return jsonify({"status":"ok","members": members})
 
 @rooms_bp.route("/rooms/<roomId>/permissions", methods=["PATCH"])
 @require_auth
 @require_room_access(room_id_param="roomId")
 @validate_request_data({
     "userId": {"validator": validate_member_id, "required": True},
-    "role": {"validator": validate_optional_string, "required": False}
+    "role": {"validator": validate_optional_string(), "required": False}
 })
 def update_permissions(roomId):
     """
@@ -2002,8 +2028,8 @@ def update_permissions(roomId):
             caller_role = (shares_coll.find_one({"roomId": str(room["_id"]), "$or": [{"userId": claims["sub"]}, {"username": claims["sub"]}]}) or {}).get("role")
     except Exception:
         caller_role = None
-    if caller_role not in ("owner", "editor", "admin"):
-        return jsonify({"status":"error","message":"Forbidden"}), 403
+    if caller_role != "owner":
+        return jsonify({"status":"error","message":"Only the room owner can change member roles"}), 403
     data = request.get_json() or {}
     target_user_id = data.get("userId")
     if not target_user_id:
@@ -2232,8 +2258,18 @@ def transfer_ownership(roomId):
     if not member:
         return jsonify({"status":"error","message":"Target user is not a member of the room"}), 400
     rooms_coll.update_one({"_id": ObjectId(roomId)}, {"$set": {"ownerId": str(target_user["_id"]), "ownerName": target_user["username"], "updatedAt": datetime.utcnow()}})
-    shares_coll.update_one({"roomId": str(room["_id"]), "userId": str(target_user["_id"])}, {"$set": {"role": "owner"}})
-    shares_coll.update_one({"roomId": str(room["_id"]), "userId": claims["sub"]}, {"$set": {"role": "editor"}})
+    
+    # Remove the new owner from shares_coll (owners don't have share records)
+    shares_coll.delete_one({"roomId": str(room["_id"]), "userId": str(target_user["_id"])})
+    
+    # Add the old owner to shares_coll as editor (create new share record for former owner)
+    shares_coll.insert_one({
+        "roomId": str(room["_id"]),
+        "userId": claims["sub"],
+        "username": claims.get("username"),
+        "role": "editor",
+        "createdAt": datetime.utcnow()
+    })
     notifications_coll.insert_one({
         "userId": str(target_user["_id"]),
         "type": "ownership_transfer",
@@ -2268,6 +2304,10 @@ def leave_room(roomId):
     claims = g.token_claims
     room = g.current_room
     user_id = claims["sub"]
+    
+    if str(room.get("ownerId")) == user_id:
+        return jsonify({"status":"error","message":"Owner must transfer ownership before leaving"}), 400
+    
     try:
         share = shares_coll.find_one({"roomId": str(room["_id"]), "$or": [{"userId": user_id}, {"username": user_id}]})
     except Exception:
@@ -2277,8 +2317,6 @@ def leave_room(roomId):
             logger.debug("leave_room: user %s not a member of public room %s; treating as no-op", user_id, str(room.get("_id")))
             return jsonify({"status":"ok","message":"Not a member (noop)", "removed": False}), 200
         return jsonify({"status":"error","message":"Not a member"}), 400
-    if share.get("role") == "owner":
-        return jsonify({"status":"error","message":"Owner must transfer ownership before leaving"}), 400
     try:
         del_q = {"roomId": str(room["_id"]), "$or": [{"userId": user_id}, {"username": user_id}]}
         shares_coll.delete_one(del_q)

frontend/src/components/Layout.jsx

@@ -252,6 +252,40 @@ export default function Layout() {
     return () => window.removeEventListener('storage', storageHandler);
   }, []);
 
+  // Global error handler to catch unhandled promise rejections and convert to user-friendly notifications
+  useEffect(() => {
+    const handleUnhandledRejection = (event) => {
+      console.error('Unhandled promise rejection:', event.reason);
+
+      // Prevent the default error overlay from showing
+      event.preventDefault();
+
+      // Extract error message
+      const error = event.reason;
+      let message = 'An unexpected error occurred';
+
+      try {
+        if (error && typeof error === 'object') {
+          if (error.message) {
+            message = error.message;
+          } else if (error.body && error.body.message) {
+            message = error.body.message;
+          }
+        } else if (typeof error === 'string') {
+          message = error;
+        }
+      } catch (e) {
+        console.warn('Error parsing rejection:', e);
+      }
+
+      // Show user-friendly notification instead of error overlay
+      setGlobalSnack({ open: true, message, duration: 5000 });
+    };
+
+    window.addEventListener('unhandledrejection', handleUnhandledRejection);
+    return () => window.removeEventListener('unhandledrejection', handleUnhandledRejection);
+  }, []);
+
   function handleAuthed(j) {
     const nxt = { token: j.token, user: j.user };
     setAuth(nxt);
@@ -273,7 +307,10 @@ export default function Layout() {
   return (
     <ThemeProvider theme={theme}>
       <Box sx={{
-        minHeight: '100vh', display: 'flex', flexDirection: 'column',
+        height: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
         // CSS variable for footer height so multiple elements can stay in sync
         '--rescanvas-footer-height': '85px'
       }}>
@@ -383,10 +420,8 @@ export default function Layout() {
           </DialogActions>
         </Dialog>
         <AppBreadcrumbs auth={auth} />
-        {/* Central area: always allow scrolling here and reserve space for the footer
-      so page content can't be obscured by the sticky bottom bar. Individual
-      pages may still provide their own scroll containers if desired. */}
-        <Box className="page-scroll-container" sx={{ flex: 1, overflow: 'auto', pb: 'calc(var(--rescanvas-footer-height) + 1000px)' }}>
+        {/* Central area: scrollable content between header and footer */}
+        <Box className="page-scroll-container" sx={{ flex: 1, overflow: 'auto' }}>
           <Routes>
             <Route path="/" element={<HomeRedirect auth={auth} />} />
             <Route path="/blog" element={<Blog />} />
@@ -402,14 +437,7 @@ export default function Layout() {
             />
             <Route path="/dashboard" element={
               <ProtectedRoute auth={auth}>
-                {/*
-                Use an explicit calc() height for the dashboard scroll container so it
-                reliably scrolls independently of document/html overflow settings.
-                Reserve space for the top bar + breadcrumb + footer (approx 200px).
-              */}
-                <Box sx={{ height: 'calc(100vh - 225px)', overflow: 'auto' }} className="page-scrollable">
-                  <Dashboard auth={auth} />
-                </Box>
+                <Dashboard auth={auth} />
               </ProtectedRoute>
             } />
             <Route path="/rooms" element={

frontend/src/pages/RoomSettings.jsx

@@ -120,13 +120,21 @@ export default function RoomSettings() {
         setRoom(res.room);
       }
 
+      try {
+        window.dispatchEvent(new CustomEvent('rescanvas:notify', { detail: { message: 'Room settings saved', duration: 2000 } }));
+      } catch (evErr) { console.warn('notify failed', evErr); }
+
       setTimeout(() => navigate(`/rooms/${id}`), 250);
     } catch (e) {
       console.error('Failed to save room settings:', e);
       if (e?.message && e.message.toLowerCase().includes('forbidden')) {
         setForbiddenMessage('You do not have permission to change settings for this room.');
         setForbiddenRedirect(`/rooms/${id}`);
         setForbiddenOpen(true);
+      } else {
+        try {
+          window.dispatchEvent(new CustomEvent('rescanvas:notify', { detail: { message: 'Failed to save settings: ' + (e?.message || e), duration: 4000 } }));
+        } catch (evErr) { console.warn('notify failed', evErr); }
       }
     }
   }
@@ -135,18 +143,30 @@ export default function RoomSettings() {
     try {
       await updatePermissions(null, id, { userId, role });
       await refreshMembers();
+      try {
+        window.dispatchEvent(new CustomEvent('rescanvas:notify', { detail: { message: 'Member role updated', duration: 2000 } }));
+      } catch (evErr) { console.warn('notify failed', evErr); }
     } catch (e) {
       console.error('Failed to change role', e);
-      throw e;
+      try {
+        window.dispatchEvent(new CustomEvent('rescanvas:notify', { detail: { message: 'Failed to change role: ' + (e?.message || e), duration: 4000 } }));
+      } catch (evErr) { console.warn('notify failed', evErr); }
+      await refreshMembers();
     }
   }
 
   async function kickMember(userId) {
     try {
       await updatePermissions(null, id, { userId });
       await refreshMembers();
+      try {
+        window.dispatchEvent(new CustomEvent('rescanvas:notify', { detail: { message: 'Member removed', duration: 2000 } }));
+      } catch (evErr) { console.warn('notify failed', evErr); }
     } catch (e) {
       console.error('Failed to remove member', e);
+      try {
+        window.dispatchEvent(new CustomEvent('rescanvas:notify', { detail: { message: 'Failed to remove member: ' + (e?.message || e), duration: 4000 } }));
+      } catch (evErr) { console.warn('notify failed', evErr); }
     }
   }
 
@@ -182,7 +202,7 @@ export default function RoomSettings() {
   if (!room) return <Typography>Loading...</Typography>;
 
   return (
-    <Box sx={{ p: 2, height: 'calc(100vh - 260px)', overflow: 'auto' }}>
+    <Box sx={{ p: 2 }}>
       <Paper sx={{ p: 2 }}>
         <Typography variant="h6">Settings for {room.name}</Typography>
         <Tooltip title={isEditor ? '' : 'Only owners and editors may change name'}>
@@ -223,8 +243,8 @@ export default function RoomSettings() {
               <ListItem key={m.userId} secondaryAction={(
                 <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
                   {m.role !== 'owner' && (
-                    myRole === 'viewer' ? (
-                      <Tooltip title="Viewers cannot change member roles">
+                    !isOwner ? (
+                      <Tooltip title="Only the room owner can change member roles">
                         <span>
                           <TextField size="small" select value={m.role || 'editor'} sx={{ minWidth: 120, mr: 1 }} disabled />
                         </span>
@@ -236,13 +256,16 @@ export default function RoomSettings() {
                         value={m.role || 'editor'}
                         onChange={(e) => changeMemberRole(m.userId, e.target.value)}
                         sx={{ minWidth: 120, mr: 1 }}
-                      />
+                      >
+                        <MenuItem value="editor">Editor</MenuItem>
+                        <MenuItem value="viewer">Viewer</MenuItem>
+                      </TextField>
                     )
                   )}
 
                   {m.role !== 'owner' && (
-                    myRole === 'viewer' ? (
-                      <Tooltip title="Viewers cannot remove members">
+                    !isOwner ? (
+                      <Tooltip title="Only the room owner can remove members">
                         <span>
                           <IconButton edge="end" aria-label="kick" disabled>
                             <DeleteIcon />
@@ -368,14 +391,22 @@ export default function RoomSettings() {
                     if (!errors.length) {
                       setInviteSelected([]); setInviteInput('');
                       await refreshMembers();
+                      try {
+                        window.dispatchEvent(new CustomEvent('rescanvas:notify', { detail: { message: 'Invitations sent successfully', duration: 3000 } }));
+                      } catch (evErr) { console.warn('notify failed', evErr); }
                     } else {
                       // keep dialog state for corrections
                       const succeeded = (res.invited || []).map(i => i.username).concat((res.updated || []).map(i => i.username));
                       if (succeeded.length) {
                         await refreshMembers();
                       }
                     }
-                  } catch (e) { console.error('Invite failed', e); alert('Invite failed: ' + (e?.message || e)); }
+                  } catch (e) {
+                    console.error('Invite failed', e);
+                    try {
+                      window.dispatchEvent(new CustomEvent('rescanvas:notify', { detail: { message: 'Failed to send invites: ' + (e?.message || e), duration: 4000 } }));
+                    } catch (evErr) { console.warn('notify failed', evErr); }
+                  }
                 }}
                 disabled={!canInvite}
               >Send invites / Add to room</Button>

frontend/src/styles/App.css

@@ -106,10 +106,12 @@ li {
   scrollbar-color: #007bff #f0f2f5;
 }
 
-html, body, #root {
+html,
+body,
+#root {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow: hidden;
-  font-family: Monaco, Menlo, 'Courier New', monospace;
-}
+  font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans-serif;
+}

frontend/src/styles/Canvas.css

@@ -243,7 +243,7 @@
 }
 
 body {
-  font-family: Monaco, Menlo, 'Courier New', monospace;
+  font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans-serif;
 }
 
 .Canvas-toolbar::-webkit-scrollbar {
@@ -314,4 +314,4 @@ body {
   background: rgba(0, 123, 255, 0.1);
   color: #007bff;
   transform: scale(1.05);
-}
+}