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

web/src/components/ActivityAvatar.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { initials, type ActivityActor } from '@/lib/activity'
+
+const props = defineProps<{
+	actor: ActivityActor
+}>()
+
+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>
+	<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',
+		}"
+	/>
+</template>