Fix profile save UX: close modal on success, refresh room members live

Saving a display name previously gave no feedback and left the modal
open, and an open room's message list/member panel kept showing the
pre-edit profile until reload -- both fetch that data from a member list
ChatShellPage only fetched once per room. Now the save closes the modal
(clear confirmation it worked) and ChatShellPage re-fetches room members
whenever the logged-in user's own display_name/avatar_filename changes,
so the update appears immediately everywhere without a reload.
This commit is contained in:
2026-08-14 17:09:22 -06:00
parent 8ca3e2e23d
commit ad1beccd3a
2 changed files with 10 additions and 2 deletions
+1 -1
View File
@@ -28,9 +28,9 @@ export function ProfileModal({ onClose }: ProfileModalProps) {
try {
const updated = await updateProfile(displayName.trim() || null)
updateUser(updated)
onClose()
} catch (err) {
setError(err instanceof ApiError ? err.message : String(err))
} finally {
setSavingName(false)
}
}
+9 -1
View File
@@ -11,6 +11,7 @@ import { OfflineBanner } from '../components/OfflineBanner'
import { RoomInfoPanel } from '../components/RoomInfoPanel'
import { Sidebar } from '../components/Sidebar'
import { TopBar } from '../components/TopBar'
import { useAuth } from '../context/AuthContext'
import { MOBILE_BREAKPOINT, useWindowWidth } from '../hooks/useWindowWidth'
import type { MyRoomItem, RoomMember } from '../types'
import './ChatShellPage.css'
@@ -20,6 +21,7 @@ type ModalKind = 'new' | 'browse' | 'invites' | null
export function ChatShellPage() {
const { roomId } = useParams<{ roomId?: string }>()
const navigate = useNavigate()
const { user } = useAuth()
const width = useWindowWidth()
const isMobile = width < MOBILE_BREAKPOINT
@@ -65,7 +67,13 @@ export function ChatShellPage() {
useEffect(() => {
refreshMembers()
}, [refreshMembers])
// Also re-run when the logged-in user's own profile changes (display
// name/avatar) -- refreshMembers() itself doesn't change identity when
// only roomId is the same, so without this the currently open room's
// member list (and anything resolving avatar/name from it, like
// MessageList) would keep showing the pre-edit profile until the room
// is reopened.
}, [refreshMembers, user?.display_name, user?.avatar_filename])
function goToRoom(id: string) {
navigate(`/rooms/${id}`)