Add user profile management: display name + avatar upload (Gitea issue #12)

Users can set a display name (shown instead of username in the message
list, room member list, TopBar, and admin Users tab) and upload a real
avatar, replacing the generated color-initial avatars everywhere a user
appears. Avatars are square-cropped and downscaled to 512px, reusing
app/storage.py's upload primitives from image uploads with a new square
option.

Two deliberate divergences from message-image handling, documented in
backend/README.md: the previous avatar file is deleted on replace/remove
(safe since it's strictly one file per user), and avatar serving is not
room-gated and uses a short cache (identity-addressed and mutable, unlike
a message image's permanent content-addressed URL).

Frontend: new ProfileModal reachable from the TopBar account menu;
AuthContext gains updateUser() so a profile change reflects instantly
everywhere without a refetch.
This commit is contained in:
ksmith committed 2026-08-14 16:59:56 -06:00
1 parent c6f90d49fc
commit 8ca3e2e23d
28 files changed
+689 -41

No files matched your search

+14 -3
View File
@@ -1,3 +1,5 @@
import { getUserAvatarUrl } from '../api/users'
import { hashIndex } from './avatar'
import type { RoomMember } from '../types'
export function senderColorIndex(username: string, members: RoomMember[]): number {
@@ -5,7 +7,16 @@ export function senderColorIndex(username: string, members: RoomMember[]): numbe
if (idx >= 0) return idx
// Fallback for a sender no longer in the room (e.g. they left): derive a
// stable index from the username instead of always colliding on 0.
let hash = 0
for (let i = 0; i < username.length; i++) hash = (hash * 31 + username.charCodeAt(i)) | 0
return Math.abs(hash)
return hashIndex(username)
}
export function avatarUrlFor(username: string, members: RoomMember[]): string | null {
const member = members.find((m) => m.username === username)
if (!member?.avatar_filename) return null
return getUserAvatarUrl(member.user_id, member.avatar_filename)
}
export function displayNameFor(username: string, members: RoomMember[]): string {
const member = members.find((m) => m.username === username)
return member?.display_name || username
}