feat: room members list sidebar

app/components/page/room/members-list.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { VList } from 'virtua/vue'
+
+const currentRoom = useCurrentRoom()
+
+const { isLoaded, members } = useRoomMembers(currentRoom)
+const membersGrouped = useRoomMemberGrouping(members, () => currentRoom.value?.roomId)
+
+const listRef = useTemplateRef('list')
+watch(() => currentRoom.value?.roomId, () => listRef.value?.scrollTo(0))
+</script>
+
+<template>
+  <div class="border-l border-border shrink-0 h-full w-72">
+    <VList
+      v-if="membersGrouped && isLoaded"
+      :key="currentRoom?.roomId"
+      v-slot="{ item }"
+      ref="list"
+      :item-size="40"
+      :data="membersGrouped.members"
+      class="px-2 py-1"
+      @vue:mounted="console.log"
+    >
+      <PageRoomMembersListHeader
+        v-if="'type' in item && item.type === 'header'"
+        :key="item.title"
+        :title="item.title"
+        :total="membersGrouped.groupTotals[item.title]"
+      />
+
+      <PageRoomMembersListCard
+        v-else
+        :key="item.userId"
+        :is-owner="item.powerLevel >= 100"
+        :user-id="item.userId"
+      />
+    </VList>
+
+    <div v-else class="p-2 h-full relative">
+      <!-- <div class="size-full inset-0 absolute z-1 from-transparent to-card to-80% bg-gradient-to-b" /> -->
+
+      <!-- <div class="h-10" /> -->
+      <USkeleton
+        v-for="item in 8"
+        :key="item"
+        class="mb-3 h-10 w-full"
+      />
+    </div>
+  </div>
+</template>

app/components/page/room/members-list/card.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  userId: string
+}>()
+
+const profile = useUserProfile(props.userId)
+const creator = useCurrentRoomCreator()
+
+const triggerRef = useTemplateRef('trigger')
+onMounted(() => {
+  const btn = unrefElement(triggerRef)
+  if (btn) {
+    // workaround to prevent virtual list from scrolling when closing popover
+    const nativeFocus = btn.focus.bind(btn)
+    btn.focus = (options?: FocusOptions) => nativeFocus({ ...options, preventScroll: true })
+  }
+})
+</script>
+
+<template>
+  <UProfilePopoverTrigger
+    freeze-reference
+    :user="userId"
+    :content-props="{
+      side: 'left',
+      align: 'start',
+      collisionPadding: 12,
+      sideOffset: 22,
+      disableUpdateOnLayoutShift: true,
+    }"
+    as-child
+  >
+    <UButton
+      ref="trigger"
+      class="text-foreground font-normal gap-2 h-10 w-full justify-start data-[popover-open]:bg-muted/75"
+      variant="ghost"
+    >
+      <MatrixAvatar :user="userId" class="shrink-0 size-6" />
+
+      <p class="shrink-0 truncate">
+        {{ profile?.displayname }}
+      </p>
+
+      <UTooltipRoot>
+        <UTooltipTrigger as-child>
+          <Icon
+            v-if="userId === creator"
+            name="tabler:crown"
+            class="text-primary"
+          />
+        </UTooltipTrigger>
+        <UTooltipContent>
+          Owner
+        </UTooltipContent>
+      </UTooltipRoot>
+    </UButton>
+  </UProfilePopoverTrigger>
+</template>

app/components/page/room/members-list/header.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+defineProps<{
+  title: PowerLevelName
+  total: number
+}>()
+</script>
+
+<template>
+  <div class="text-xs text-muted-foreground font-medium px-2 pb-0.5 flex h-8 w-full items-end">
+    <p>{{ upperFirst(title) }} — {{ total }}</p>
+  </div>
+</template>

app/components/u/profile-popover/content.vue

@@ -1,17 +1,22 @@
 <script lang="ts" setup>
-const { anchorElement, contentProps, open, user } = useProfilePopover()
+import { KnownMembership } from 'matrix-js-sdk'
+
+const { contentProps, open, referenceElement, user } = useProfilePopover()
 
-const profile = useUserProfile(() => user.value?.userId)
 const { self } = useSelf()
 
 const currentRoom = useCurrentRoom()
+const roomId = computed(() => currentRoom.value?.roomId)
+const userId = computed(() => user.value?.userId)
 
-const displayName = computed(() => profile.value?.displayname ?? getDisplayNameFallback(user.value?.userId))
-const avatarUrl = computed(() => resolveAvatarUrl(user.value?.avatarUrl, { size: 'small' }))
-const parsedUserId = computed(() => parseUserId(user.value?.userId))
+const roomMember = useRoomMember(roomId, userId)
+const displayName = computed(() => roomMember.value ? resolveUserName(roomMember.value) : getDisplayNameFallback(user.value?.userId))
+const avatarUrl = computed(() => resolveAvatarUrl(roomMember.value?.getMxcAvatarUrl(), { size: 'small' }))
+const parsedUserId = computed(() => parseUserId(roomMember.value?.userId))
 
-const powerLevel = useUserRoomPowerLevel(() => currentRoom.value?.roomId, () => user.value?.userId)
-const powerLevelName = computed(() => upperFirst(isNull(powerLevel.value) ? 'member' : getPowerLevelName(powerLevel.value)))
+const membership = useRoomMembership(roomId, userId)
+const powerLevel = useRoomMemberPowerLevel(roomId, userId)
+const powerLevelName = computed(() => upperFirst(getPowerLevelName(powerLevel.value)))
 
 const isSelf = computed(() => self.value?.userId === user.value?.userId)
 
@@ -24,7 +29,7 @@ const { copy } = useClipboard()
       v-bind="contentProps"
       as-child
       disable-outside-pointer-events
-      :reference="anchorElement ?? undefined"
+      :reference="referenceElement ?? undefined"
       :class="cn('z-1', $attrs.class)"
     >
       <UCard class="p-0 border-none bg-card-light gap-0 w-74 transition-transform duration-100 relative overflow-clip animate-in animate-ease-out data-[state=open]:slide-in-from-r-3">
@@ -88,7 +93,7 @@ const { copy } = useClipboard()
 
           <UProfilePopoverMutualRooms v-if="!isSelf" />
 
-          <div class="flex flex-wrap gap-1 *:text-xs *:font-normal *:rounded-full *:max-w-28 *:block *:truncate">
+          <div v-if="isDefined(membership) && membership === KnownMembership.Join" class="flex flex-wrap gap-1 *:text-xs *:font-normal *:rounded-full *:max-w-28 *:block *:truncate">
             <UBadge class="" variant="outline">
               {{ powerLevelName }}
             </UBadge>

app/components/u/profile-popover/trigger.vue

@@ -1,15 +1,18 @@
 <script lang="ts" setup>
 import type { PopoverContentProps, PopoverTriggerProps } from 'reka-ui'
 
-const props = defineProps<PopoverTriggerProps & { user: MaybeUserOrId, contentProps?: PopoverContentProps }>()
-const { anchorElement, openProfilePopover } = useProfilePopover()
+const props = defineProps<PopoverTriggerProps & {
+  user: MaybeUserOrId
+  contentProps?: PopoverContentProps
+  freezeReference?: boolean
+}>()
+const { openProfilePopover } = useProfilePopover()
 
 function handleOpen(e: Event) {
   const currentTarget = e.currentTarget
   assert(currentTarget instanceof HTMLElement, '`currentTarget` was not an instance of an HTML element when handling open on profile popover trigger')
 
-  anchorElement.value = currentTarget
-  openProfilePopover(currentTarget, resolveUserId(props.user), props.contentProps)
+  openProfilePopover(currentTarget, resolveUserId(props.user), props.contentProps, { freezeReference: props.freezeReference })
 }
 </script>
 

app/components/u/skeleton.vue

@@ -1,5 +1,11 @@
 <script lang="ts" setup>
-const { delay = 1400 } = defineProps<{ delay?: number }>()
+withDefaults(
+  defineProps<{ delay?: number, shimmer?: boolean }>(),
+  {
+    delay: 1400,
+    shimmer: true,
+  },
+)
 </script>
 
 <template>
@@ -9,6 +15,7 @@ const { delay = 1400 } = defineProps<{ delay?: number }>()
     aria-busy
   >
     <div
+      v-if="shimmer"
       class="bg-gradient-linear size-full ease from-transparent to-transparent via-foreground/3 bg-gradient-to-r/oklch"
       :style="{
         animation: `skeleton ${delay}ms infinite`,

app/composables/use-current-room-creator.ts

@@ -0,0 +1,5 @@
+export function useCurrentRoomCreator() {
+  const currentRoom = useCurrentRoom()
+
+  return computed(() => currentRoom.value?.getCreator())
+}

app/composables/use-profile-popover.ts

@@ -2,20 +2,25 @@ import type { PopoverContentProps } from 'reka-ui'
 
 export const useProfilePopover = createSharedComposable(() => {
   const open = shallowRef(false)
-  const anchorElement = shallowRef<MaybeElement>()
+  const referenceElement = shallowRef<MaybeElement | VirtualElement>()
   const userIdRef = shallowRef<string>()
   const contentProps = shallowRef<PopoverContentProps>()
 
   let currentRoot: MaybeElement
   whenever(() => !open.value, () => {
     currentRoot?.removeAttribute('data-popover-open')
     currentRoot = undefined
+    referenceElement.value = undefined
+    contentProps.value = undefined
+    userIdRef.value = undefined
   })
 
-  function openProfilePopover(trigger: MaybeElement, userId: string, nextContentProps?: PopoverContentProps) {
-    if (!trigger)
-      return
-
+  function openProfilePopover(
+    trigger: HTMLElement,
+    userId: string,
+    nextContentProps?: PopoverContentProps,
+    options: { freezeReference?: boolean } = {},
+  ) {
     const eventRoot = trigger.closest('[data-event-id]') as HTMLElement | null
     const root = eventRoot ?? trigger
 
@@ -25,7 +30,8 @@ export const useProfilePopover = createSharedComposable(() => {
     root.setAttribute('data-popover-open', '')
     currentRoot = root
 
-    anchorElement.value = trigger
+    referenceElement.value = options.freezeReference ? createFrozenReference(trigger) : trigger
+
     contentProps.value = nextContentProps
     userIdRef.value = userId
     open.value = true
@@ -34,10 +40,19 @@ export const useProfilePopover = createSharedComposable(() => {
   const user = useUser(userIdRef)
 
   return {
-    anchorElement,
     contentProps,
     open,
     openProfilePopover,
+    referenceElement,
     user,
   }
 })
+
+function createFrozenReference(trigger: HTMLElement): VirtualElement {
+  const rect = trigger.getBoundingClientRect()
+
+  return {
+    contextElement: trigger,
+    getBoundingClientRect: () => rect,
+  }
+}

app/composables/use-room-event-hooks.ts

@@ -10,6 +10,7 @@ type Params = Partial<{
   onTimelineReset: (room: Room | undefined, eventTimelineSet: EventTimelineSet, resetAllTimelines: boolean) => void
   onCurrentStateUpdated: (room: Room, previousRoomState: RoomState, roomState: RoomState) => void
   onAccountData: (event: MatrixEvent, room: Room, prevEvent?: MatrixEvent | undefined) => void
+  onMemberUpdate: (event: MatrixEvent, state: RoomState, member: RoomMember) => void
   onRoomMemberTyping: (event: MatrixEvent, member: RoomMember) => void
   onMembers: (event: MatrixEvent, state: RoomState, member: RoomMember) => void
 }>
@@ -28,6 +29,7 @@ export function useRoomEventHooks(roomInput: MaybeRefOrGetter<MaybeRoomOrId | un
     bindListener(RoomEvent.TimelineRefresh, params?.onTimelineRefresh, disposers, room.value)
     bindListener(RoomEvent.TimelineReset, params?.onTimelineReset, disposers, room.value)
     bindListener(RoomEvent.CurrentStateUpdated, params?.onCurrentStateUpdated, disposers, room.value)
+    bindListener(RoomStateEvent.Members, params?.onMemberUpdate, disposers, room.value)
     bindListener(RoomEvent.AccountData, params?.onAccountData, disposers, room.value)
     bindListener(RoomStateEvent.Members, params?.onMembers, disposers, room.value)
   }, { immediate: true })

app/composables/use-room-member-grouping.ts

@@ -0,0 +1,86 @@
+import type { Room, RoomMember } from 'matrix-js-sdk'
+import { toRef } from '@vueuse/core'
+import QuickLRU from 'quick-lru'
+
+const POWER_LEVEL_ORDER = ['admin', 'moderator', 'member'] satisfies PowerLevelName[]
+
+type Member = Pick<RoomMember, 'powerLevel' | 'rawDisplayName' | 'membership' | 'name' | 'userId'> & { type: 'member' }
+interface MemberHeader { type: 'header', title: PowerLevelName }
+interface MemberCachePayload {
+  members: Prettify<Member | MemberHeader>[]
+  groupTotals: Record<PowerLevelName, number>
+  memberCount: number
+}
+
+export type GroupedMemberListItem = Prettify<Member | MemberHeader>
+
+const roomMemberGroupCache = new QuickLRU<Room['roomId'], MemberCachePayload>({ maxSize: 12 })
+
+export function useRoomMemberGrouping(members: MaybeRefOrGetter<RoomMember[] | undefined>, maybeRoomOrId: MaybeRefOrGetter<MaybeRoomOrId | undefined>, force?: MaybeRefOrGetter<boolean>) {
+  const membersRef = toRef(members)
+  const roomIdRef = toRef(maybeRoomOrId)
+  const forceRef = toRef(force)
+
+  const membersGrouped = shallowRef<MemberCachePayload>()
+  const roomId = computed(() => roomIdRef.value ? resolveRoomId(roomIdRef.value) : undefined)
+
+  watch(membersRef, (members) => {
+    if (!members?.length || !roomId.value)
+      return
+
+    const cached = roomMemberGroupCache.get(roomId.value)
+    if (cached && !forceRef.value && cached.memberCount === members.length)
+      return membersGrouped.value = cached
+
+    const payload = { ...createMembersList(members), memberCount: members.length }
+    roomMemberGroupCache.set(roomId.value, payload)
+
+    membersGrouped.value = payload
+  }, { immediate: true })
+
+  return membersGrouped
+}
+
+function createMembersList(members: RoomMember[]) {
+  members.sort((a, b) => {
+    if (a.powerLevel === b.powerLevel) {
+      const aName = resolveUserName(a)
+      const bName = resolveUserName(b)
+
+      return aName.localeCompare(bName)
+    }
+
+    return a.powerLevel > b.powerLevel ? -1 : 1
+  })
+
+  const membersGrouped = groupBy(members, m => getPowerLevelName(m.powerLevel, true))
+  const membersWithHeaders: Prettify<Member | MemberHeader>[] = []
+  const groupTotals: MemberCachePayload['groupTotals'] = {
+    admin: 0,
+    member: 0,
+    moderator: 0,
+    owner: 0,
+    unknown: 0,
+  }
+  for (const groupName of POWER_LEVEL_ORDER) {
+    const group = membersGrouped[groupName]
+    if (!group?.length)
+      continue
+
+    groupTotals[groupName] = group.length
+
+    membersWithHeaders.push({ title: groupName, type: 'header' })
+    for (let i = 0; i < group.length; i++) {
+      const member = group[i]
+      if (!member)
+        continue
+
+      membersWithHeaders.push({ type: 'member', ...member })
+    }
+  }
+
+  return {
+    groupTotals,
+    members: membersWithHeaders,
+  }
+}

app/composables/use-room-member-power-level.ts

@@ -0,0 +1,5 @@
+export function useRoomMemberPowerLevel(roomId: MaybeRefOrGetter<MaybeRoomOrId | undefined>, maybeUserOrId: MaybeRefOrGetter<MaybeUserOrId | undefined>) {
+  const roomMember = useRoomMember(roomId, maybeUserOrId)
+
+  return computed(() => roomMember.value?.powerLevel)
+}