feat: activity screen in the SPA, route /activity

web/src/components/ActivitySentence.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ActivityItem } from '@/lib/activity'
+import { composeSentence } from '@/lib/activitySentence'
+
+const props = defineProps<{
+	item: ActivityItem
+}>()
+
+const segments = computed(() => composeSentence(props.item))
+</script>
+
+<template>
+	<span data-testid="activity-sentence"
+		><template v-for="(segment, index) in segments" :key="index"
+			><span v-if="segment.strong" class="font-semibold text-highlighted">{{
+				segment.text
+			}}</span
+			><template v-else>{{ segment.text }}</template></template
+		></span
+	>
+</template>