From a5308274849fa6b6dfef56232a49fa4fba6eb53e Mon Sep 17 00:00:00 2001
From: "pouriade.com" <did:plc:3sapfnszmvjc6wa4ml3ybkwb>
Date: Tue, 27 Oct 2026 22:42:41 -0700
Subject: [PATCH] Draw an account's roles as RoleChip

A role an admin added gets its remove button, and one from a rule its
source, each as an early return.
---
 .../src/features/admin/components/UserRow.tsx | 54 +++++++++++++------
 1 file changed, 38 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/features/admin/components/UserRow.tsx b/apps/web/src/features/admin/components/UserRow.tsx
index 80d7a14..f982319 100644
--- a/apps/web/src/features/admin/components/UserRow.tsx
+++ b/apps/web/src/features/admin/components/UserRow.tsx
@@ -44,23 +44,12 @@ export function UserRow(props: Props) {
       >
         <span className="mt-1.5 flex flex-wrap items-center gap-1">
           {user.roles.map((grant) => (
-            <Chip
+            <RoleChip
               key={`${grant.role}:${grant.source}`}
-              title={grant.source === 'member' ? 'Added by an admin' : `From ${grant.source}`}
-            >
-              {grant.role}
-              {grant.source !== 'member' && (
-                <span className="font-normal text-muted">{grant.source}</span>
-              )}
-              {grant.source === 'member' && (
-                <CloseButton
-                  size="xs"
-                  radius="sm"
-                  aria-label={`Remove ${name} from ${grant.role}`}
-                  onClick={() => props.actions.removeFromRole(grant.role, user.did)}
-                />
-              )}
-            </Chip>
+              grant={grant}
+              name={name}
+              onRemove={() => props.actions.removeFromRole(grant.role, user.did)}
+            />
           ))}
           {props.assignable.length > 0 && (
             <Select
@@ -86,3 +75,36 @@ export function UserRow(props: Props) {
     </ItemList.Item>
   )
 }
+
+interface RoleChipProps {
+  grant: AdminUser['roles'][number]
+  /** The account's name, which the remove button's label says. */
+  name: string
+  onRemove: () => void
+}
+
+/**
+ * One of an account's roles: one an admin added can be removed here, and one that comes from a rule
+ * names its source instead.
+ */
+function RoleChip(props: RoleChipProps) {
+  const { role, source } = props.grant
+  if (source !== 'member')
+    return (
+      <Chip title={`From ${source}`}>
+        {role}
+        <span className="font-normal text-muted">{source}</span>
+      </Chip>
+    )
+  return (
+    <Chip title="Added by an admin">
+      {role}
+      <CloseButton
+        size="xs"
+        radius="sm"
+        aria-label={`Remove ${props.name} from ${role}`}
+        onClick={props.onRemove}
+      />
+    </Chip>
+  )
+}
-- 
knotmirror 0.0.1