feat(SPA): users page and invite modal

web/src/components/UsersTable.vue

@@ -0,0 +1,62 @@
+<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'
+
+const ROW_GRID = 'grid grid-cols-[minmax(0,1fr)_160px_160px] items-center px-3'
+
+defineProps<{
+	items: UserListItem[]
+	loading: boolean
+	sessionUserId?: number
+	highlightedKey?: string
+}>()
+
+function rowKey(item: UserListItem) {
+	return userRowKey(item.kind, item.id)
+}
+</script>
+
+<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>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>
+		</div>
+		<template v-if="loading">
+			<span role="status" class="sr-only">Loading users</span>
+			<div
+				v-for="n in USER_SKELETON_ROWS"
+				:key="n"
+				:class="ROW_GRID"
+				class="h-11 border-t border-default"
+			>
+				<USkeleton class="h-3 w-[30%] 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>
+		</template>
+		<template v-else>
+			<div
+				v-for="item in items"
+				:key="rowKey(item)"
+				data-testid="user-row"
+				:class="[ROW_GRID, { 'bg-elevated': rowKey(item) === highlightedKey }]"
+				class="h-11 border-t border-default"
+			>
+				<UserNameCell
+					:item="item"
+					:is-you="item.kind === 'user' && item.id === sessionUserId"
+					class="pr-3"
+				/>
+				<span><InviteStatusBadge :status="item.status" /></span>
+				<span class="text-muted">{{ formatCreatedDate(item.created_at) }}</span>
+			</div>
+		</template>
+	</div>
+</template>