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

web/src/components/YourRoleCard.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+import { computed, ref } from 'vue'
+import { useMediaQuery } from '@vueuse/core'
+import ProfileCard from '@/components/ProfileCard.vue'
+import RoleBadge from '@/components/RoleBadge.vue'
+import RoleSummaryDialog from '@/components/RoleSummaryDialog.vue'
+import { buildHeldRolePreview } from '@/lib/rolePreview'
+import { usePermissionsStore } from '@/stores/permissions'
+
+const DESKTOP_QUERY = '(min-width: 48rem)'
+
+const permissions = usePermissionsStore()
+const isDesktop = useMediaQuery(DESKTOP_QUERY)
+const summaryOpen = ref(false)
+
+const model = computed(() => buildHeldRolePreview(permissions.grants))
+</script>
+
+<template>
+	<ProfileCard :title="t('Your role')">
+		<div class="flex flex-wrap items-center gap-2">
+			<RoleBadge :role="permissions.role" />
+			<span v-if="permissions.roleAssignedBy" class="text-muted">{{
+				t('Assigned by {0}', [permissions.roleAssignedBy.name])
+			}}</span>
+		</div>
+		<UButton
+			color="neutral"
+			variant="link"
+			icon="i-lucide-list-checks"
+			class="self-start p-0 font-medium text-highlighted"
+			@click="summaryOpen = true"
+		>
+			{{ t('See what I can do') }}
+		</UButton>
+		<p class="text-pretty text-muted">
+			{{ t('Your API keys follow this role. If your role changes, they change too.') }}
+		</p>
+		<RoleSummaryDialog
+			v-model:open="summaryOpen"
+			:model="model"
+			:role-name="permissions.roleName"
+			:mobile="!isDesktop"
+		/>
+	</ProfileCard>
+</template>