feat: recent activity card on Home and Retention card on Settings

web/src/components/ActivityActor.vue

@@ -2,8 +2,9 @@
 import { t } from '@/i18n'
 
 import { computed } from 'vue'
+import ActivityAvatar from '@/components/ActivityAvatar.vue'
 import ActivityBadge from '@/components/ActivityBadge.vue'
-import { initials, type ActivityActor } from '@/lib/activity'
+import { type ActivityActor } from '@/lib/activity'
 
 const props = defineProps<{
 	actor: ActivityActor
@@ -12,39 +13,11 @@ const props = defineProps<{
 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',
-			}"
-		/>
+		<ActivityAvatar :actor="actor" />
 		<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')" />