feat: activity screen in the SPA, route /activity

web/src/components/ActivityChips.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import type { ActivityChip, ChipKey } from '@/lib/activity'
+
+defineProps<{
+	chips: ActivityChip[]
+}>()
+
+const emit = defineEmits<{
+	remove: [key: ChipKey]
+	clear: []
+}>()
+</script>
+
+<template>
+	<div
+		v-if="chips.length > 0"
+		data-testid="activity-chips"
+		class="flex flex-wrap items-center gap-2"
+	>
+		<UBadge
+			v-for="chip in chips"
+			:key="chip.key"
+			color="neutral"
+			variant="subtle"
+			data-testid="activity-chip"
+			:ui="{
+				base: 'h-8 gap-1 border border-default bg-elevated py-0 ps-2 pe-1 text-xs font-medium text-highlighted ring-0 md:h-6',
+			}"
+		>
+			{{ chip.label }}
+			<template #trailing>
+				<UButton
+					color="neutral"
+					variant="ghost"
+					icon="i-lucide-x"
+					:aria-label="t('Remove filter {0}', [chip.label])"
+					class="size-5 justify-center p-0 text-muted"
+					:ui="{ leadingIcon: 'size-3' }"
+					@click="emit('remove', chip.key)"
+				/>
+			</template>
+		</UBadge>
+		<UButton
+			color="neutral"
+			variant="link"
+			class="h-11 px-1.5 text-xs font-medium text-highlighted underline underline-offset-3 md:h-6"
+			@click="emit('clear')"
+		>
+			{{ t('Clear all') }}
+		</UButton>
+	</div>
+</template>