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

2026-10-07 16:01:28 +02:00
1 parent 35db442cd3
commit 43469ef08d
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import ActivityAvatar from '@/components/ActivityAvatar.vue'
+import ActivityBadge from '@/components/ActivityBadge.vue'
+import ActivitySentence from '@/components/ActivitySentence.vue'
+import type { ActivityItem } from '@/lib/activity'
+import { fullLocalTime, recentWhenLabel } from '@/lib/activityTime'
+
+const SKELETON_ROWS = 5
+const SKELETON_SENTENCE_WIDTHS = ['w-17/20', 'w-7/10', 'w-9/10', 'w-3/5', 'w-4/5']
+
+defineProps<{
+	items: ActivityItem[]
+	loading: boolean
+	showSkeleton: boolean
+	error: boolean
+	own: boolean
+}>()
+
+defineEmits<{
+	retry: []
+}>()
+
+function metaLine(item: ActivityItem, own: boolean) {
+	const when = recentWhenLabel(item.created_at)
+	if (own) return when
+	const name = item.actor.type === 'anonymous' ? t('Not signed in') : item.actor.name
+	return `${name} · ${when}`
+}
+</script>
+
+<template>
+	<UCard
+		data-testid="recent-activity-card"
+		:aria-busy="loading && showSkeleton ? 'true' : undefined"
+		:ui="{
+			root: 'min-w-0 rounded-none border border-default bg-default shadow-none ring-0 divide-y-0',
+			header: 'flex items-center gap-2 border-b border-default px-4 py-3 sm:px-4 sm:py-3',
+			body: 'flex flex-col px-4 pt-1 pb-1.5 sm:px-4 sm:pt-1 sm:pb-1.5',
+		}"
+	>
+		<template #header>
+			<h2 class="flex-1 text-base font-semibold text-highlighted">
+				{{ own ? t('Your recent activity') : t('Recent activity') }}
+			</h2>
+			<RouterLink
+				to="/activity"
+				class="flex items-center gap-1 font-medium text-highlighted underline underline-offset-3 max-lg:min-h-11 lg:min-h-5"
+			>
+				{{ t('View all') }}
+				<UIcon name="i-lucide-arrow-right" class="size-3.5" />
+			</RouterLink>
+		</template>
+
+		<template v-if="loading">
+			<template v-if="showSkeleton">
+				<div
+					v-for="n in SKELETON_ROWS"
+					:key="n"
+					data-testid="recent-activity-skeleton"
+					class="flex gap-2.5 py-2.5"
+					:class="n > 1 ? 'border-t border-muted' : ''"
+				>
+					<USkeleton class="size-6 shrink-0 rounded-none bg-accented" />
+					<div class="flex flex-1 flex-col gap-1.5">
+						<USkeleton
+							class="h-3 rounded-none bg-accented"
+							:class="SKELETON_SENTENCE_WIDTHS[n - 1]"
+						/>
+						<USkeleton class="h-2.5 w-7/20 rounded-none bg-accented" />
+					</div>
+				</div>
+			</template>
+		</template>
+
+		<UAlert
+			v-else-if="error"
+			role="alert"
+			color="error"
+			variant="soft"
+			orientation="vertical"
+			:close="false"
+			icon="i-lucide-circle-x"
+			:title="t('Couldn\'t load recent activity')"
+			:ui="{ actions: 'mt-2' }"
+		>
+			<template #actions>
+				<UButton
+					color="neutral"
+					variant="outline"
+					class="h-11 border border-accented bg-default px-2.5 text-xs text-highlighted ring-0 lg:h-7"
+					@click="$emit('retry')"
+				>
+					{{ t('Try again') }}
+				</UButton>
+			</template>
+		</UAlert>
+
+		<div
+			v-else-if="items.length === 0"
+			data-testid="recent-activity-empty"
+			class="flex flex-col items-center gap-1.5 py-6 text-center"
+		>
+			<UIcon name="i-lucide-history" class="size-5 text-muted" />
+			<span class="font-semibold text-highlighted">{{ t('No activity yet') }}</span>
+			<span class="max-w-60 text-muted">
+				{{
+					own
+						? t('Your actions will appear here.')
+						: t('Actions on your site will appear here.')
+				}}
+			</span>
+		</div>
+
+		<ul v-else class="flex flex-col">
+			<li
+				v-for="(item, index) in items"
+				:key="item.id"
+				data-testid="recent-activity-row"
+				class="flex items-start gap-2.5 py-2.5"
+				:class="index > 0 ? 'border-t border-muted' : ''"
+			>
+				<ActivityAvatar :actor="item.actor" />
+				<div class="flex min-w-0 flex-1 flex-col gap-0.5">
+					<span
+						class="line-clamp-2 text-default wrap-anywhere"
+						data-testid="recent-activity-sentence"
+					>
+						<ActivitySentence :item="item" />
+					</span>
+					<span
+						data-testid="recent-activity-meta"
+						:title="fullLocalTime(item.created_at)"
+						class="truncate text-xs/5 text-muted"
+					>
+						{{ metaLine(item, own) }}
+					</span>
+				</div>
+				<ActivityBadge v-if="item.outcome === 'failed'" tone="fail" :label="t('Failed')" />
+				<UIcon
+					v-else-if="item.security"
+					name="i-lucide-shield-alert"
+					data-testid="recent-activity-security"
+					class="size-3.5 shrink-0 text-warning"
+				/>
+			</li>
+		</ul>
+	</UCard>
+</template>