feat: UsersTable and UserCardList get Email, Display name (dash when empty), Role (new RoleBadge), Invite status and Created

web/src/components/UserCardList.vue

@@ -1,8 +1,15 @@
 <script setup lang="ts">
 import InviteStatusBadge from '@/components/InviteStatusBadge.vue'
-import UserNameCell from '@/components/UserNameCell.vue'
+import RoleBadge from '@/components/RoleBadge.vue'
+import UserEmailCell from '@/components/UserEmailCell.vue'
 import { formatCreatedDate } from '@/lib/relativeDate'
-import { USER_SKELETON_ROWS, userRowKey, type UserListItem } from '@/composables/useUsers'
+import {
+	USER_SKELETON_ROWS,
+	userDisplayName,
+	userRole,
+	userRowKey,
+	type UserListItem,
+} from '@/composables/useUsers'
 
 defineProps<{
 	items: UserListItem[]
@@ -36,12 +43,16 @@ function rowKey(item: UserListItem) {
 				class="flex min-h-17 flex-col justify-center gap-1.5 border-b border-default px-4 py-3"
 				:class="{ 'bg-elevated': rowKey(item) === highlightedKey }"
 			>
-				<UserNameCell
-					:item="item"
+				<UserEmailCell
+					:email="item.email"
 					:is-you="item.kind === 'user' && item.id === sessionUserId"
 					large
 				/>
-				<div class="flex items-center gap-2.5 text-xs text-muted">
+				<span v-if="userDisplayName(item)" class="text-toned">{{
+					userDisplayName(item)
+				}}</span>
+				<div class="flex items-center gap-2 text-xs text-muted">
+					<RoleBadge :role="userRole(item)" />
 					<InviteStatusBadge :status="item.status" size="sm" />
 					<span>Created {{ formatCreatedDate(item.created_at) }}</span>
 				</div>