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

web/src/views/ProfileView.vue

@@ -9,8 +9,10 @@ import CharacterCounter from '@/components/CharacterCounter.vue'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import DashboardShell from '@/components/DashboardShell.vue'
 import ProfileCard from '@/components/ProfileCard.vue'
+import YourRoleCard from '@/components/YourRoleCard.vue'
 import { ApiError, authRedirectPending, useApi } from '@/composables/useApi'
 import { useRetryAfter } from '@/composables/useRetryAfter'
+import { usePermissionsStore } from '@/stores/permissions'
 import { useSessionStore, type Session } from '@/stores/session'
 
 const DISPLAY_NAME_MAX = 60
@@ -24,12 +26,14 @@ const SKELETON_CARDS = [
 	{ titleWidth: 'w-30', inputs: 1 },
 	{ titleWidth: 'w-22.5', inputs: 2 },
 	{ titleWidth: 'w-28', inputs: 1 },
+	{ titleWidth: 'w-20', inputs: 1 },
 	{ titleWidth: 'w-25', inputs: 1 },
 ]
 
 type ResetState = 'idle' | 'sending' | 'sent' | 'limited' | 'error'
 
 const session = useSessionStore()
+const permissions = usePermissionsStore()
 const toast = useLocalizedToast()
 const overlay = useLocalizedOverlay()
 const { request } = useApi()
@@ -399,6 +403,8 @@ onBeforeRouteLeave(async () => {
 					</div>
 				</ProfileCard>
 
+				<YourRoleCard v-if="permissions.role" />
+
 				<AuthorProfileCard />
 
 				<ProfileCard