Refactor role view models and member grouping

src/app/components/RoomDetail.svelte

@@ -34,10 +34,11 @@
   import RoomImage from "@app/components/RoomImage.svelte"
   import {
     deriveRoomMembers,
-    deriveRoomRoles,
+    deriveRoomRoleDefinitions,
     deriveUserIsRoomAdmin,
     deriveHasPermission,
-    sortRolesDesc,
+    getRolePermissionsLabel,
+    getRoleAccessLabel,
     ROOM_PERMISSION_EDIT_META,
   } from "@app/core/roles"
   import {
@@ -65,7 +66,7 @@
 
   const room = deriveRoom(url, h)
   const members = deriveRoomMembers(url, h)
-  const roomRoles = deriveRoomRoles(url, h)
+  const roleDefinitions = deriveRoomRoleDefinitions(url, h)
   const userIsAdmin = deriveUserIsRoomAdmin(url, h)
   const canEditMetadata = deriveHasPermission(url, h, ROOM_PERMISSION_EDIT_META)
   const membershipStatus = deriveUserRoomMembershipStatus(url, h)
@@ -74,19 +75,6 @@
   const isFavorite = $derived($userRooms.includes(h))
   const shouldNotify = deriveShouldNotify(url, h)
 
-  const roleRows = $derived.by(() =>
-    sortRolesDesc(
-      Array.from($roomRoles.roles.values()).map(role => ({
-        name: role.name,
-        label: role.label,
-        color: role.color,
-        order: role.order,
-        permissionsLabel: role.permissions.join(", "),
-        accessLabel: Array.from(role.access).join(", "),
-      })),
-    ),
-  )
-
   const back = () => history.back()
 
   const toggleMenu = () => {
@@ -278,27 +266,23 @@
         <span class="text-error">Member list not available from this relay</span>
       </div>
     {/if}
-    {#if $userIsAdmin && roleRows.length > 0}
+    {#if $userIsAdmin && $roleDefinitions.length > 0}
       <div class="card2 card2-sm bg-alt col-4">
         <strong class="text-lg">Role Definitions</strong>
         <div class="flex flex-col gap-2">
-          {#each roleRows as role (role.name)}
+          {#each $roleDefinitions as role (role.name)}
             <div class="rounded-box bg-base-300 p-3 flex flex-col gap-2">
               <div class="flex items-center gap-2">
-                <RoleBadge
-                  role={role.name}
-                  label={role.label}
-                  color={role.color}
-                  class="badge-md" />
+                <RoleBadge {role} class="badge-md" />
                 {#if role.order !== undefined}
                   <span class="text-xs opacity-70">Order {role.order}</span>
                 {/if}
               </div>
-              {#if role.permissionsLabel}
-                <p class="text-xs opacity-75">Permissions: {role.permissionsLabel}</p>
+              {#if role.permissions.length > 0}
+                <p class="text-xs opacity-75">Permissions: {getRolePermissionsLabel(role)}</p>
               {/if}
-              {#if role.accessLabel}
-                <p class="text-xs opacity-75">Access: {role.accessLabel}</p>
+              {#if role.access.size > 0}
+                <p class="text-xs opacity-75">Access: {getRoleAccessLabel(role)}</p>
               {/if}
             </div>
           {/each}