feat: server access post release QA (#6316)

* fix: clicking users in table in app takes you to blank page instead of website

* fix: wrong loader icon on server panel

* fix: surface var misalignment

* fix: password managers still detecting username field as something to autofill

* feat: show users on backupitem components

* feat: seperators for filter sections

* fix: lint + change remove -> revoke

* fix: copy

* feat: align copy

packages/ui/src/components/servers/backups/BackupItem.vue

@@ -4,6 +4,7 @@ import {
 	ClipboardCopyIcon,
 	DownloadIcon,
 	EditIcon,
+	IntercomBubbleIcon,
 	MoreVerticalIcon,
 	RotateCounterClockwiseIcon,
 	ShieldIcon,
@@ -15,6 +16,8 @@ import { computed, ref } from 'vue'
 import { useFormatDateTime } from '../../../composables'
 import { defineMessages, useVIntl } from '../../../composables/i18n'
 import { commonMessages, truncatedTooltip } from '../../../utils'
+import AutoLink from '../../base/AutoLink.vue'
+import Avatar from '../../base/Avatar.vue'
 import ButtonStyled from '../../base/ButtonStyled.vue'
 import OverflowMenu, { type Option as OverflowOption } from '../../base/OverflowMenu.vue'
 
@@ -32,6 +35,7 @@ const emit = defineEmits<{
 const props = withDefaults(
 	defineProps<{
 		backup: Archon.BackupsQueue.v1.BackupQueueBackup
+		creator?: Archon.BackupsQueue.v1.UserInfo | null
 		preview?: boolean
 		kyrosUrl?: string
 		jwt?: string
@@ -44,6 +48,7 @@ const props = withDefaults(
 		highlighted?: boolean
 	}>(),
 	{
+		creator: undefined,
 		preview: false,
 		kyrosUrl: undefined,
 		jwt: undefined,
@@ -59,6 +64,22 @@ const props = withDefaults(
 
 const nameRef = ref<HTMLElement | null>(null)
 
+const backupCreator = computed(() => {
+	if (props.creator !== undefined) return props.creator
+
+	return (
+		props.backup.history.find(
+			(operation) => operation.operation_type === 'create' && operation.user_info,
+		)?.user_info ?? null
+	)
+})
+
+const creatorProfileLink = computed(() =>
+	backupCreator.value && backupCreator.value.id !== 'support'
+		? `https://modrinth.com/user/${encodeURIComponent(backupCreator.value.username)}`
+		: undefined,
+)
+
 const backupIcon = computed(() => {
 	if (props.backup.automated) {
 		return ShieldIcon
@@ -137,7 +158,29 @@ const messages = defineMessages({
 		id: 'servers.backups.item.manual-backup',
 		defaultMessage: 'Manual backup',
 	},
+	creatorAvatarAlt: {
+		id: 'servers.backups.item.creator-avatar-alt',
+		defaultMessage: "{username}'s avatar",
+	},
+	supportCreator: {
+		id: 'servers.backups.item.creator.support',
+		defaultMessage: 'Support',
+	},
 })
+
+const creatorName = computed(() => {
+	if (!backupCreator.value) return ''
+	if (backupCreator.value.id !== 'support') return backupCreator.value.username
+	return backupCreator.value.username === 'support'
+		? formatMessage(messages.supportCreator)
+		: backupCreator.value.username
+})
+
+const creatorAvatarSrc = computed(() =>
+	backupCreator.value?.id === 'support'
+		? IntercomBubbleIcon
+		: (backupCreator.value?.avatar_url ?? undefined),
+)
 </script>
 <template>
 	<div
@@ -174,10 +217,36 @@ const messages = defineMessages({
 						{{ formatMessage(messages.auto) }}
 					</span>
 				</div>
-				<div class="flex items-center gap-1.5 text-sm font-medium text-secondary">
+				<div class="flex items-center gap-2 text-sm font-medium text-secondary">
 					<template v-if="preview">
 						<span>{{ formatDateTime(backup.created_at) }}</span>
 					</template>
+					<template v-else-if="backupCreator">
+						<AutoLink
+							:to="creatorProfileLink"
+							:target="creatorProfileLink ? '_blank' : undefined"
+							:rel="creatorProfileLink ? 'noopener noreferrer' : undefined"
+							class="group flex min-w-0 items-center gap-1.5"
+							:class="creatorProfileLink ? 'text-secondary hover:underline' : 'text-primary'"
+						>
+							<Avatar
+								:src="creatorAvatarSrc"
+								:alt="formatMessage(messages.creatorAvatarAlt, { username: creatorName })"
+								:tint-by="creatorName"
+								size="24px"
+								circle
+								no-shadow
+								class="shrink-0 transition"
+								:class="creatorProfileLink ? 'group-hover:brightness-125' : ''"
+							/>
+							<span
+								class="min-w-0 truncate font-medium"
+								:class="backupCreator.id === 'support' ? 'text-blue' : ''"
+							>
+								{{ creatorName }}
+							</span>
+						</AutoLink>
+					</template>
 					<template v-else>
 						<span>
 							{{