fix: fetch room/sender avatar and display name for push notifications (#551)

### Description

When the pusher is configured with `event_id_only` format, the service
worker fetches event details itself rather than receiving them in the
push payload. Previously only the sender display name and room name were
retrieved — `room_avatar_url` was always `undefined`, so every
notification showed the default app logo regardless of whether the room
or sender had an avatar set. Display names could also be stale in the
encrypted path when the app resumed from a cold state.

**Changes in `src/sw.ts`:**

- `fetchMemberDisplayName` → `fetchMemberInfo`: the same single HTTP
request to `m.room.member` state now also extracts `avatar_url`, giving
both display name and sender avatar for free
- `fetchRoomAvatar`: new helper that fetches the `m.room.avatar` state
event URL
- `mxcToNotificationUrl`: converts `mxc://` to a legacy unauthenticated
thumbnail URL (`/_matrix/media/v3/thumbnail/…`) so the OS can load the
notification icon without an auth header
- `handleMinimalPushPayload`: room avatar is now fetched in the initial
parallel batch alongside the event and room name; icon is resolved as
room avatar → member avatar (DM fallback) → default logo;
`room_avatar_url` passed to all `handlePushNotificationPushData` call
sites
- Encrypted relay path now uses the server-fetched `senderDisplay`
(authoritative) rather than the SDK cache value from the relay, which
can be absent or stale when the app hasn't fully synced after a cold
resume

Fixes #

#### Type of change

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings

### AI disclosure:

- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [x] Fully AI generated (explain what all the generated code does in
moderate detail).

`fetchMemberInfo` extends the existing member state fetch to also return
`avatar_url`. `fetchRoomAvatar` GETs `m.room.avatar` state.
`mxcToNotificationUrl` builds a legacy `/_matrix/media/v3/thumbnail/`
URL (no auth required, OS-loadable) from an `mxc://` URI.
`handleMinimalPushPayload` adds `fetchRoomAvatar` to its parallel fetch
batch, resolves the notification icon with room > member > default
priority, and passes it through as `room_avatar_url` to every
`handlePushNotificationPushData` invocation. The encrypted relay path is
updated to prefer the server-fetched display name over the relay's
potentially-stale SDK cache value.

Author: 7w1

.changeset/fix-push-notification-metadata.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix push notifications missing sender/room avatar and showing stale display names when using event_id_only push format.

src/sw.ts

@@ -277,28 +277,73 @@ async function fetchRoomName(
   }
 }
 
+type MemberInfo = {
+  displayname: string | undefined;
+  avatarUrl: string | undefined;
+};
+
 /**
- * Fetch a room member's displayname from homeserver member state.
- * Returns undefined if the member has no displayname or the request fails.
+ * Fetch a room member's state from the homeserver.
+ * Returns displayname and avatar_url (both may be undefined).
  */
-async function fetchMemberDisplayName(
+async function fetchMemberInfo(
   baseUrl: string,
   accessToken: string,
   roomId: string,
   userId: string
-): Promise<string | undefined> {
+): Promise<MemberInfo> {
   try {
     const url = `${baseUrl}/_matrix/client/v3/rooms/${encodeURIComponent(roomId)}/state/m.room.member/${encodeURIComponent(userId)}`;
     const res = await fetch(url, { headers: { Authorization: `Bearer ${accessToken}` } });
+    if (!res.ok) return { displayname: undefined, avatarUrl: undefined };
+    const data = (await res.json()) as Record<string, unknown>;
+    const displayname =
+      typeof data.displayname === 'string' && data.displayname.trim()
+        ? data.displayname.trim()
+        : undefined;
+    const avatarUrl =
+      typeof data.avatar_url === 'string' && data.avatar_url.trim()
+        ? data.avatar_url.trim()
+        : undefined;
+    return { displayname, avatarUrl };
+  } catch {
+    return { displayname: undefined, avatarUrl: undefined };
+  }
+}
+
+/**
+ * Fetch the m.room.avatar state event URL from the homeserver.
+ * Returns undefined when the room has no avatar or the request fails.
+ */
+async function fetchRoomAvatar(
+  baseUrl: string,
+  accessToken: string,
+  roomId: string
+): Promise<string | undefined> {
+  try {
+    const url = `${baseUrl}/_matrix/client/v3/rooms/${encodeURIComponent(roomId)}/state/m.room.avatar`;
+    const res = await fetch(url, { headers: { Authorization: `Bearer ${accessToken}` } });
     if (!res.ok) return undefined;
     const data = (await res.json()) as Record<string, unknown>;
-    const name = data.displayname;
-    return typeof name === 'string' && name.trim() ? name.trim() : undefined;
+    const avatarUrl = data.url;
+    return typeof avatarUrl === 'string' && avatarUrl.trim() ? avatarUrl.trim() : undefined;
   } catch {
     return undefined;
   }
 }
 
+/**
+ * Convert an mxc:// URL to a legacy unauthenticated thumbnail URL.
+ * Notification icons are fetched by the OS without auth headers, so we use
+ * the pre-MSC3916 media endpoint which most homeservers still serve publicly.
+ */
+function mxcToNotificationUrl(mxcUrl: string, baseUrl: string): string | undefined {
+  const match = mxcUrl.match(/^mxc:\/\/([^/]+)\/([^?#]+)/);
+  if (!match) return undefined;
+  const [, server, mediaId] = match;
+  return `${baseUrl}/_matrix/media/v3/thumbnail/${encodeURIComponent(server)}/${encodeURIComponent(mediaId)}?width=96&height=96&method=crop`;
+}
+
 /**
  * Return the first any-session we have stored (used for push fetches where we
  * don't have a client ID, e.g. when the app is backgrounded but still loaded).
@@ -386,10 +431,11 @@ async function handleMinimalPushPayload(
     return;
   }
 
-  // Fetch the raw event and room name state in parallel — both need only roomId.
-  const [rawEvent, roomNameFromState] = await Promise.all([
+  // Fetch the raw event, room name, and room avatar in parallel — all need only roomId.
+  const [rawEvent, roomNameFromState, roomAvatarMxc] = await Promise.all([
     fetchRawEvent(session.baseUrl, session.accessToken, roomId, eventId),
     fetchRoomName(session.baseUrl, session.accessToken, roomId),
+    fetchRoomAvatar(session.baseUrl, session.accessToken, roomId),
   ]);
 
   if (!rawEvent) {
@@ -406,13 +452,20 @@ async function handleMinimalPushPayload(
 
   const eventType = rawEvent.type as string | undefined;
   const sender = rawEvent.sender as string | undefined;
-  // Fetch sender's display name from room member state; fall back to MXID localpart.
-  const senderDisplay =
-    (sender
-      ? await fetchMemberDisplayName(session.baseUrl, session.accessToken, roomId, sender)
-      : undefined) ?? (sender ? mxidLocalpart(sender) : 'Someone');
+  // Fetch sender's member state — gives us both display name and avatar URL.
+  const memberInfo = sender
+    ? await fetchMemberInfo(session.baseUrl, session.accessToken, roomId, sender)
+    : { displayname: undefined, avatarUrl: undefined };
+  // Fall back to MXID localpart when the server returns no displayname.
+  const senderDisplay = memberInfo.displayname ?? (sender ? mxidLocalpart(sender) : 'Someone');
   // For DMs (no m.room.name state), use the sender's display name as the room name.
   const resolvedRoomName = roomNameFromState ?? senderDisplay;
+  // Room avatar takes priority (group rooms); for DMs fall back to sender's member avatar.
+  // Convert mxc:// to a legacy unauthenticated thumbnail URL so the OS can fetch it.
+  const notificationAvatarUrl =
+    (roomAvatarMxc ?? memberInfo.avatarUrl) !== undefined
+      ? mxcToNotificationUrl((roomAvatarMxc ?? memberInfo.avatarUrl)!, session.baseUrl)
+      : undefined;
   const baseData = {
     room_id: roomId,
     event_id: eventId,
@@ -432,13 +485,16 @@ async function handleMinimalPushPayload(
 
     if (result?.success) {
       // App was backgrounded but not frozen — decryption succeeded.
+      // Prefer the server-fetched display name (authoritative) over the relay's SDK cache
+      // value, which may be stale or missing if the SDK hasn't fully synced yet.
       await handlePushNotificationPushData({
         ...baseData,
         type: result.eventType,
         content: result.content,
-        sender_display_name: result.sender_display_name ?? senderDisplay,
+        sender_display_name: senderDisplay,
         // Prefer relay's room name (has m.direct / computed SDK name); fall back to state fetch.
         room_name: result.room_name || resolvedRoomName,
+        room_avatar_url: notificationAvatarUrl,
       });
     } else {
       // App is frozen or fully closed — show "Encrypted message" fallback.
@@ -448,6 +504,7 @@ async function handleMinimalPushPayload(
         content: {},
         sender_display_name: senderDisplay,
         room_name: resolvedRoomName,
+        room_avatar_url: notificationAvatarUrl,
       });
     }
   } else {
@@ -458,6 +515,7 @@ async function handleMinimalPushPayload(
       content: rawEvent.content,
       sender_display_name: senderDisplay,
       room_name: resolvedRoomName,
+      room_avatar_url: notificationAvatarUrl,
     });
   }
 }