Changing how badges are displayed.

packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte

@@ -742,15 +742,19 @@
                 <div class="auth-entity-access-title">Access</div>
               </div>
               {#each allUsers as user}
-                {@const userGroups = sdk.users.getUserGroups(user, $groups)}
+                {@const userGroups = sdk.users.getUserAppGroups($appStore.appId, user, $groups)}
                 <div class="auth-entity">
                   <div class="details">
-                    <div class="user-email" title={user.email}>
+                    <div class="user-groups">
-                      {user.email}
+                      <div class="user-email" title={user.email}>
+                        {user.email}
+                      </div>
+                      <div class="group-badges">
+                        {#each userGroups as group}
+                          <Badge size="S" customColor={group.color}>{group.name}</Badge>
+                        {/each}
+                      </div>
                     </div>
-                    {#each userGroups as group}
-                      <Badge size="S" customColor={group.color}>{group.name}</Badge>
-                    {/each}
                   </div>
                   <div class="auth-entity-access" class:muted={user.group}>
                     <RoleSelect
@@ -1053,4 +1057,15 @@
   .alert {
     padding: 0 var(--spacing-xl);
   }
+
+  .user-groups {
+    display: flex;
+    flex-direction: column;
+  }
+  .group-badges {
+    padding-top: var(--spacing-s);
+    display: flex;
+    gap: var(--spacing-s);
+    flex-wrap: wrap;
+  }
 </style>

packages/shared-core/src/sdk/documents/users.ts

@@ -137,6 +137,18 @@ export function getUserGroups(user: User, groups?: UserGroup[]) {
   )
 }
 
+export function getUserAppGroups(
+  appId: string,
+  user: User,
+  groups?: UserGroup[]
+) {
+  const prodAppId = getProdAppID(appId)
+  const userGroups = getUserGroups(user, groups)
+  return userGroups.filter(group =>
+    Object.keys(group.roles || {}).find(app => app === prodAppId)
+  )
+}
+
 export function userAppAccessList(user: User, groups?: UserGroup[]) {
   const userGroups = getUserGroups(user, groups)
   const userGroupApps = userGroups.flatMap(userGroup =>