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

web/src/components/UsersTable.vue

@@ -1,10 +1,18 @@
 <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'
 
-const ROW_GRID = 'grid grid-cols-[minmax(0,1fr)_160px_160px] items-center px-3'
+const ROW_GRID =
+	'grid grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)_84px_120px_110px_150px] items-center gap-3 px-3'
 
 defineProps<{
 	items: UserListItem[]
@@ -21,12 +29,15 @@ function rowKey(item: UserListItem) {
 <template>
 	<div class="border border-default bg-default" :aria-busy="loading ? 'true' : undefined">
 		<div :class="ROW_GRID" class="h-9 bg-elevated font-medium text-muted">
-			<span>Username</span>
+			<span>Email</span>
+			<span>Display name</span>
+			<span>Role</span>
 			<span>Invite status</span>
 			<span class="flex items-center gap-1 text-highlighted">
 				Created
 				<UIcon name="i-lucide-arrow-down" class="size-3 shrink-0" />
 			</span>
+			<span></span>
 		</div>
 		<template v-if="loading">
 			<span role="status" class="sr-only">Loading users</span>
@@ -34,9 +45,11 @@ function rowKey(item: UserListItem) {
 				v-for="n in USER_SKELETON_ROWS"
 				:key="n"
 				:class="ROW_GRID"
-				class="h-11 border-t border-default"
+				class="h-12 border-t border-default"
 			>
-				<USkeleton class="h-3 w-[30%] rounded-none bg-accented" />
+				<USkeleton class="h-3 w-[60%] rounded-none bg-accented" />
+				<USkeleton class="h-3 w-[50%] rounded-none bg-accented" />
+				<USkeleton class="h-5 w-13 rounded-none bg-accented" />
 				<USkeleton class="h-5 w-19 rounded-none bg-accented" />
 				<USkeleton class="h-3 w-20 rounded-none bg-accented" />
 			</div>
@@ -47,15 +60,21 @@ function rowKey(item: UserListItem) {
 				:key="rowKey(item)"
 				data-testid="user-row"
 				:class="[ROW_GRID, { 'bg-elevated': rowKey(item) === highlightedKey }]"
-				class="h-11 border-t border-default"
+				class="h-12 border-t border-default"
 			>
-				<UserNameCell
-					:item="item"
+				<UserEmailCell
+					:email="item.email"
 					:is-you="item.kind === 'user' && item.id === sessionUserId"
-					class="pr-3"
 				/>
+				<span
+					class="truncate"
+					:class="userDisplayName(item) ? 'text-highlighted' : 'text-muted'"
+					>{{ userDisplayName(item) || '—' }}</span
+				>
+				<span><RoleBadge :role="userRole(item)" /></span>
 				<span><InviteStatusBadge :status="item.status" /></span>
 				<span class="text-muted">{{ formatCreatedDate(item.created_at) }}</span>
+				<span></span>
 			</div>
 		</template>
 	</div>