Refactor role view models and member grouping

src/app/components/ProfileDetail.svelte

@@ -33,7 +33,7 @@
   import {pubkeyLink, deriveSpaceBannedPubkeyItems} from "@app/core/state"
   import {
     deriveUserHasSpacePermission,
-    deriveSpaceMemberRoleInfo,
+    deriveSpaceMemberRoles,
     ROOM_PERMISSION_ADD_MEMBER,
     ROOM_PERMISSION_BAN_USER,
   } from "@app/core/roles"
@@ -59,9 +59,7 @@
 
   const bannedPubkeys = url ? deriveSpaceBannedPubkeyItems(url) : undefined
 
-  const spaceMemberRoles = url ? deriveSpaceMemberRoleInfo(url) : readable(new Map())
-
-  const assignedRoles = $derived($spaceMemberRoles.get(pubkey)?.roles || [])
+  const assignedRoles = url ? deriveSpaceMemberRoles(url, pubkey) : readable([])
 
   const isBanned = $derived($bannedPubkeys?.some(item => item.pubkey === pubkey) ?? false)
 
@@ -163,12 +161,12 @@
         {/if}
       </div>
       <ProfileInfo {pubkey} {url} />
-      {#if assignedRoles.length > 0}
+      {#if $assignedRoles.length > 0}
         <div class="card2 card2-sm bg-alt col-3">
           <h3 class="text-lg font-semibold">Roles</h3>
           <div class="flex flex-wrap gap-2">
-            {#each assignedRoles as role (role.name)}
-              <RoleBadge role={role.name} label={role.label} color={role.color} class="badge-md" />
+            {#each $assignedRoles as role (role.name)}
+              <RoleBadge {role} class="badge-md" />
             {/each}
           </div>
         </div>