feat: activity screen in the SPA, route /activity

web/src/components/ActivitySegmented.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts" generic="V extends string">
+import { SEGMENT_GROUP, segmentClass } from '@/lib/segmentStyles'
+
+defineProps<{
+	options: { value: V; label: string }[]
+	modelValue: V
+	label: string
+	block?: boolean
+}>()
+
+const emit = defineEmits<{
+	'update:modelValue': [value: V]
+}>()
+</script>
+
+<template>
+	<div role="group" :aria-label="label" :class="[SEGMENT_GROUP, block ? 'w-full' : '']">
+		<UButton
+			v-for="option in options"
+			:key="option.value"
+			color="neutral"
+			:variant="option.value === modelValue ? 'soft' : 'outline'"
+			:aria-pressed="option.value === modelValue"
+			:class="segmentClass(option.value === modelValue, block)"
+			@click="emit('update:modelValue', option.value)"
+		>
+			{{ option.label }}
+		</UButton>
+	</div>
+</template>