feat: roles SPA Users, Profile, API keys, Activity

web/src/components/UserCardList.vue

@@ -4,6 +4,8 @@ import { t } from '@/i18n'
 import InviteStatusBadge from '@/components/InviteStatusBadge.vue'
 import RoleBadge from '@/components/RoleBadge.vue'
 import UserRowAction from '@/components/UserRowAction.vue'
+import UserRowMenu from '@/components/UserRowMenu.vue'
+import type { UserMenuContext } from '@/lib/userMenu'
 import UserEmailCell from '@/components/UserEmailCell.vue'
 import { formatCreatedDate } from '@/lib/relativeDate'
 import {
@@ -21,6 +23,7 @@ defineProps<{
 	highlightedKey?: string
 	canManage?: boolean
 	busyKeys?: string[]
+	menu?: UserMenuContext
 }>()
 
 const emit = defineEmits<{
@@ -53,11 +56,21 @@ 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 }"
 			>
-				<UserEmailCell
-					:email="item.email"
-					:is-you="item.kind === 'user' && item.id === sessionUserId"
-					large
-				/>
+				<div class="flex items-center justify-between gap-2">
+					<div class="min-w-0 flex-1">
+						<UserEmailCell
+							:email="item.email"
+							:is-you="item.kind === 'user' && item.id === sessionUserId"
+							large
+						/>
+					</div>
+					<UserRowMenu
+						v-if="item.kind === 'user' && menu"
+						:user="item"
+						:context="menu"
+						:desktop="false"
+					/>
+				</div>
 				<span v-if="userDisplayName(item)" class="text-toned">{{
 					userDisplayName(item)
 				}}</span>