Add temporal grouping to event list (Today/This Week/Next Week/Later/Past)
All checks were successful
CI / backend-test (push) Successful in 58s
CI / frontend-test (push) Successful in 23s
CI / frontend-e2e (push) Successful in 1m9s
CI / build-and-publish (push) Has been skipped

Group events into five temporal sections with section headers, date subheaders,
and context-aware time display (clock time for upcoming, relative for past).
Includes new useEventGrouping composable, SectionHeader and DateSubheader
components, full unit and E2E test coverage.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-08 17:26:58 +01:00
parent 373f3671f6
commit a52d0cd1d3
18 changed files with 1325 additions and 47 deletions

View File

@@ -0,0 +1,27 @@
<template>
<h2 class="section-header" :class="{ 'section-header--emphasized': emphasized }">
{{ label }}
</h2>
</template>
<script setup lang="ts">
defineProps<{
label: string
emphasized?: boolean
}>()
</script>
<style scoped>
.section-header {
font-size: 1rem;
font-weight: 700;
color: var(--color-text);
margin: 0;
padding: var(--spacing-sm) 0;
}
.section-header--emphasized {
font-size: 1.1rem;
font-weight: 800;
}
</style>