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

web/src/components/RolePicker.vue

@@ -3,33 +3,71 @@ import { t } from '@/i18n'
 import { computed } from 'vue'
 import type { RoleItem } from '@/lib/roles'
 
-const props = defineProps<{
-	roles: RoleItem[]
-	sourceId: number
-	canAssign: (role: RoleItem) => boolean
-}>()
+const props = withDefaults(
+	defineProps<{
+		roles: RoleItem[]
+		sourceId?: number
+		canAssign: (role: RoleItem) => boolean
+		showLocked?: boolean
+		currentId?: number
+		cards?: boolean
+		label?: string
+	}>(),
+	{ sourceId: 0, showLocked: false, currentId: undefined, cards: false, label: undefined },
+)
 
 const selected = defineModel<number | undefined>('selected', { default: undefined })
 
+function reasonFor(role: RoleItem): string | undefined {
+	if (role.locked) {
+		return t('There is one owner. Transfer ownership to change who it is.')
+	}
+	return props.canAssign(role)
+		? undefined
+		: t("Your role can't assign a role with more power than yours.")
+}
+
 const items = computed(() =>
 	props.roles
-		.filter((role) => !role.locked && role.id !== props.sourceId)
+		.filter((role) => (props.showLocked || !role.locked) && role.id !== props.sourceId)
 		.map((role) => {
-			const allowed = props.canAssign(role)
+			const reason = reasonFor(role)
 			return {
 				label: role.name,
 				value: role.id,
-				description: allowed
-					? role.description
-					: t("Your role can't assign a role with more power than yours."),
-				disabled: !allowed,
+				description: reason ?? role.description,
+				disabled: reason !== undefined,
+				current: role.id === props.currentId,
 			}
 		}),
 )
 </script>
 
 <template>
+	<URadioGroup
+		v-if="cards"
+		v-model="selected"
+		:items="items"
+		variant="card"
+		color="primary"
+		:aria-label="label"
+		:ui="{ item: 'rounded-none', fieldset: 'gap-2' }"
+	>
+		<template #label="{ item }">
+			<span class="flex items-center gap-2">
+				{{ item.label }}
+				<UBadge
+					v-if="item.current"
+					color="neutral"
+					variant="outline"
+					:label="t('Current')"
+					:ui="{ base: 'h-5 rounded-none px-1.75 py-0 text-[0.6875rem]' }"
+				/>
+			</span>
+		</template>
+	</URadioGroup>
 	<USelectMenu
+		v-else
 		v-model="selected"
 		:items="items"
 		value-key="value"