feat: improve avatar component

Author: jvxz

.claude/worktrees/pensive-jepsen-ef37c3

@@ -0,0 +1 @@
+Subproject commit 6762a4855ff402087e325693781a24f8485fabcd

app/components/matrix/avatar.vue

@@ -1,13 +1,14 @@
 <script lang="ts">
-import type { Room } from 'matrix-js-sdk'
 import type { ImgProps } from '~/components/img.vue'
 
 export type MatrixAvatarProps = Omit<ImgProps, 'src' | 'alt'> & {
   square?: boolean
-  room?: Room | undefined
-  user: MaybeUserOrId | undefined | null
   imageSize?: AvatarImageSize
-}
+} & (
+  | { room: MaybeRoomOrId | undefined | null, user?: never, src?: never }
+  | { user: MaybeUserOrId | undefined | null, room?: never, src?: never }
+  | { src: string | undefined | null, room?: never, user?: never }
+)
 </script>
 
 <script setup lang="ts">
@@ -18,16 +19,32 @@ const props = withDefaults(
   },
 )
 
-const userProfile = useUserProfile(() => typeof props.user === 'string' ? props.user : props.user?.userId)
-const resolvedAvatar = useResolveAvatarUrl(() => userProfile.value?.avatar_url, { size: props.imageSize })
+const room = useRoom(() => props.room ?? undefined)
+const userProfile = useUserProfile(() => props.user ?? undefined)
+
+const src = computed(() => {
+if (props.src) return props.src
+
+  if (room.value)
+    return room.value.getMxcAvatarUrl() ?? undefined
+
+  if (userProfile.value)
+    return userProfile.value.avatar_url
+
+    return undefined
+})
+
+const resolvedAvatar = useResolveAvatarUrl(src, { size: props.imageSize })
 
 const isError = ref(false)
+
+const delegatedProps = reactiveOmit(props, 'room', 'user', 'src', 'square', 'imageSize')
 </script>
 
 <template>
   <Img
     v-if="resolvedAvatar"
-    v-bind="props"
+    v-bind="delegatedProps"
     :key="resolvedAvatar"
     data-slot="avatar"
     :alt="userProfile?.displayname ? `${userProfile?.displayname}'s avatar` : 'Avatar'"

app/composables/use-user-profile.ts

@@ -1,6 +1,5 @@
 import type { IMatrixProfile, User } from 'matrix-js-sdk'
 import type { EffectScope, ShallowRef } from 'vue'
-import { toRef } from '@vueuse/core'
 
 interface Entry {
   scope: EffectScope
@@ -74,11 +73,15 @@ function release(key: string) {
   }
 }
 
-export function useUserProfile(userId: MaybeRefOrGetter<string | undefined>) {
-  const userIdRef = toRef(userId)
+export function useUserProfile(user: MaybeRefOrGetter<MaybeUserOrId | undefined>) {
+  const userRef = computed(() => {
+    const u = toValue(user)
+    if (u)
+      return resolveUserId(u)
+  })
   const current = shallowRef<Entry | undefined>(undefined)
 
-  watch(userIdRef, (key, _, onCleanup) => {
+  watch(userRef, (key, _, onCleanup) => {
     if (!key) {
       current.value = undefined
       return