Refactor role view models and member grouping

src/app/components/RoleBadge.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import cx from "classnames"
+  import type {RoleDefinition} from "@app/core/roles"
   import {roleColorToCSS} from "@app/core/roles"
 
   type Props = {
-    role: string
+    role: RoleDefinition | string
     label?: string
     color?: number
     class?: string
@@ -11,15 +12,21 @@
 
   const {role, label, color, ...props}: Props = $props()
 
+  const roleName = $derived(typeof role === "string" ? role : role.name)
+  const roleLabel = $derived(
+    label || (typeof role === "string" ? undefined : role.label) || roleName,
+  )
+  const roleColor = $derived(color ?? (typeof role === "string" ? undefined : role.color))
+
   const style = $derived(
-    color === undefined
+    roleColor === undefined
       ? ""
-      : `color: ${roleColorToCSS(color)}; border-color: ${roleColorToCSS(color)};`,
+      : `color: ${roleColorToCSS(roleColor)}; border-color: ${roleColorToCSS(roleColor)};`,
   )
 
   const className = $derived(cx("badge badge-outline badge-sm", props.class))
 </script>
 
 <span class={className} {style}>
-  {label || role}
+  {roleLabel}
 </span>