feat(SPA): users page and invite modal

web/src/components/UserCardList.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import InviteStatusBadge from '@/components/InviteStatusBadge.vue'
+import UserNameCell from '@/components/UserNameCell.vue'
+import { formatCreatedDate } from '@/lib/relativeDate'
+import { USER_SKELETON_ROWS, userRowKey, type UserListItem } from '@/composables/useUsers'
+
+defineProps<{
+	items: UserListItem[]
+	loading: boolean
+	sessionUserId?: number
+	highlightedKey?: string
+}>()
+
+function rowKey(item: UserListItem) {
+	return userRowKey(item.kind, item.id)
+}
+</script>
+
+<template>
+	<ul class="-mx-4 border-y border-default bg-default" :aria-busy="loading ? 'true' : undefined">
+		<template v-if="loading">
+			<li
+				v-for="n in USER_SKELETON_ROWS"
+				:key="n"
+				class="flex min-h-17 flex-col justify-center gap-1.5 border-b border-default px-4 py-3"
+			>
+				<USkeleton class="h-3.5 w-[55%] rounded-none bg-accented" />
+				<USkeleton class="h-3 w-[40%] rounded-none bg-accented" />
+			</li>
+		</template>
+		<template v-else>
+			<li
+				v-for="item in items"
+				:key="rowKey(item)"
+				data-testid="user-card"
+				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"
+					:is-you="item.kind === 'user' && item.id === sessionUserId"
+					large
+				/>
+				<div class="flex items-center gap-2.5 text-xs text-muted">
+					<InviteStatusBadge :status="item.status" size="sm" />
+					<span>Created {{ formatCreatedDate(item.created_at) }}</span>
+				</div>
+			</li>
+		</template>
+	</ul>
+</template>