feat: activity screen in the SPA, route /activity

web/src/components/ActivityTargetCell.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import ActivityBadge from '@/components/ActivityBadge.vue'
+import { targetLink, targetTypeLabel, type ActivityTarget } from '@/lib/activity'
+
+const props = defineProps<{
+	target: ActivityTarget | null
+}>()
+
+const link = computed(() => targetLink(props.target))
+</script>
+
+<template>
+	<span v-if="!target" class="text-muted">—</span>
+	<span v-else class="flex min-w-0 flex-col pr-3" data-testid="activity-target">
+		<span v-if="!target.exists" class="flex min-w-0 items-center gap-1.5">
+			<span class="min-w-0 flex-1 truncate text-muted line-through">{{ target.name }}</span>
+			<ActivityBadge tone="deleted" :label="t('Deleted')" />
+		</span>
+		<RouterLink
+			v-else-if="link"
+			:to="link"
+			class="flex min-w-0 items-center gap-1 text-highlighted underline underline-offset-3"
+			@click.stop
+		>
+			<span class="truncate">{{ target.name }}</span>
+			<UIcon name="i-lucide-arrow-up-right" class="size-3 shrink-0 text-muted" />
+		</RouterLink>
+		<span v-else class="truncate text-highlighted">{{ target.name }}</span>
+		<span class="text-xs/5 text-muted">{{ targetTypeLabel(target.type) }}</span>
+	</span>
+</template>