feat: SPA Roles screens

web/src/components/RolePicker.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+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 selected = defineModel<number | undefined>('selected', { default: undefined })
+
+const items = computed(() =>
+	props.roles
+		.filter((role) => !role.locked && role.id !== props.sourceId)
+		.map((role) => {
+			const allowed = props.canAssign(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,
+			}
+		}),
+)
+</script>
+
+<template>
+	<USelectMenu
+		v-model="selected"
+		:items="items"
+		value-key="value"
+		:search-input="false"
+		:placeholder="t('Choose a role')"
+		:portal="false"
+		:content="{ position: 'inline' }"
+		class="w-full"
+		:ui="{
+			base: 'h-11 rounded-none md:h-10',
+			content: 'rounded-none border border-default',
+			item: 'min-h-12 gap-2 px-2 py-1 md:min-h-9',
+			itemDescription: 'text-xs text-muted',
+		}"
+	/>
+</template>