feat: activity screen in the SPA, route /activity

web/src/components/ActivityCategorySelect.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import { ACTIVITY_CATEGORIES, categoryLabel, type ActivityCategory } from '@/lib/activity'
+
+defineProps<{
+	category: ActivityCategory | ''
+}>()
+
+const emit = defineEmits<{
+	select: [category: ActivityCategory]
+}>()
+
+const items = computed(() =>
+	ACTIVITY_CATEGORIES.map((category) => ({
+		label: categoryLabel(category),
+		value: category,
+	})),
+)
+</script>
+
+<template>
+	<USelectMenu
+		:model-value="category || undefined"
+		:items="items"
+		value-key="value"
+		icon="i-lucide-layout-list"
+		:placeholder="t('All categories')"
+		:search-input="false"
+		:aria-label="t('Category')"
+		color="neutral"
+		variant="outline"
+		class="w-full md:w-44"
+		:ui="{
+			base: 'h-11 rounded-none border border-accented bg-default ps-8 pe-8 text-sm ring-0 md:h-8',
+			leadingIcon: 'size-3.5 text-muted',
+			trailingIcon: 'size-3.5 text-muted',
+			placeholder: 'text-muted',
+			content: 'min-w-48',
+		}"
+		@update:model-value="emit('select', $event as ActivityCategory)"
+	/>
+</template>