feat: activity screen in the SPA, route /activity

web/src/components/ActivityActor.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import ActivityBadge from '@/components/ActivityBadge.vue'
+import { initials, type ActivityActor } from '@/lib/activity'
+
+const props = defineProps<{
+	actor: ActivityActor
+}>()
+
+const displayName = computed(() =>
+	props.actor.type === 'anonymous' ? t('Not signed in') : props.actor.name,
+)
+
+const iconName = computed(() => {
+	switch (props.actor.type) {
+		case 'api_key':
+			return 'i-lucide-key-round'
+		case 'system':
+			return 'i-lucide-cog'
+		default:
+			return 'i-lucide-user-round-x'
+	}
+})
+</script>
+
+<template>
+	<span class="flex min-w-0 items-center gap-2" data-testid="activity-actor">
+		<UAvatar
+			v-if="actor.type === 'user'"
+			aria-hidden="true"
+			:text="initials(actor.name)"
+			:ui="{
+				root: 'size-6 shrink-0 bg-(--ui-color-secondary-200) dark:bg-(--ui-color-secondary-300)',
+				fallback: 'pt-px text-3xs font-semibold text-(--ui-color-primary-900)',
+			}"
+		/>
+		<UAvatar
+			v-else
+			aria-hidden="true"
+			:icon="iconName"
+			:ui="{
+				root: 'size-6 shrink-0 border border-accented bg-elevated',
+				icon: 'size-3.5 text-toned',
+			}"
+		/>
+		<span class="min-w-0 truncate font-medium text-highlighted">{{ displayName }}</span>
+		<ActivityBadge v-if="actor.type === 'api_key'" tone="neutral" :label="t('API key')" />
+		<ActivityBadge v-else-if="actor.type === 'system'" tone="neutral" :label="t('System')" />
+	</span>
+</template>