feat(ui): month card grid + week timeline, wire view switcher

Replace the throwaway debug screen with the first real calendar UI and a
functional Month <-> Week switcher, on Material 3 Expressive.

Month view (S1):
- Material 3 Expressive card-per-day grid; only the current month's weeks
  render (neighbouring days left blank)
- per-day event dots with "+N" overflow, today via primaryContainer
- spring-based press feedback from the active motion scheme
- swipe + drawer navigation, Loading/Failure/Success states

Week view (S2):
- vertical time schedule with overlap-resolved lanes (per-day clipping,
  midnight spanning, instant events)
- all-day / multi-day events as connected horizontal spans
- single scroll container (gutter + day columns stay aligned), columns
  bundled in a rounded container, noon-centred on load
- top section colour-shifts with the app bar on scroll; swipe navigation,
  three states

Shared / infra:
- CalendarHost holds the active view; RootScreen renders it post-permission
- ui/common building blocks: CalendarDrawer, CalendarFailure,
  ViewSwitcherPill, pastelize, observable locale, M3 Expressive slide
  transition (motionScheme fastSpatialSpec)
- unit tests for the week layout (lanes, clipping, all-day spans)
- build: compileSdk 37, material3 pinned to 1.5.0-alpha21 for Expressive

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-10 19:07:24 +02:00
parent 0132201cf9
commit 6a90bade8a
27 changed files with 2090 additions and 376 deletions

View File

@@ -1,114 +0,0 @@
package de.jeanlucmakiola.calendula.ui.debug
import app.cash.turbine.test
import com.google.common.truth.Truth.assertThat
import de.jeanlucmakiola.calendula.data.calendar.CalendarRepository
import de.jeanlucmakiola.calendula.data.calendar.NoSuchEventException
import de.jeanlucmakiola.calendula.domain.CalendarSource
import de.jeanlucmakiola.calendula.domain.EventDetail
import de.jeanlucmakiola.calendula.domain.EventInstance
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.ExperimentalCoroutinesApi
import kotlinx.coroutines.flow.Flow
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.test.UnconfinedTestDispatcher
import kotlinx.coroutines.test.resetMain
import kotlinx.coroutines.test.runTest
import kotlinx.coroutines.test.setMain
import kotlin.time.Instant
import org.junit.jupiter.api.AfterEach
import org.junit.jupiter.api.BeforeEach
import org.junit.jupiter.api.Test
@OptIn(ExperimentalCoroutinesApi::class)
class DebugViewModelTest {
private val testDispatcher = UnconfinedTestDispatcher()
@BeforeEach
fun setUp() {
Dispatchers.setMain(testDispatcher)
}
@AfterEach
fun tearDown() {
Dispatchers.resetMain()
}
private class FakeRepo(
val calendarsFlow: MutableStateFlow<List<CalendarSource>> = MutableStateFlow(emptyList()),
val instancesFlow: MutableStateFlow<List<EventInstance>> = MutableStateFlow(emptyList()),
) : CalendarRepository {
override fun calendars(): Flow<List<CalendarSource>> = calendarsFlow
override fun instances(range: ClosedRange<Instant>): Flow<List<EventInstance>> = instancesFlow
override suspend fun eventDetail(eventId: Long): EventDetail =
throw NoSuchEventException(eventId)
}
private fun makeCal(id: Long, name: String = "C $id"): CalendarSource =
CalendarSource(id, name, "x@y", "LOCAL", 0xFF112233.toInt(), true)
private fun makeEvent(id: Long, title: String = "E $id") = EventInstance(
instanceId = id, eventId = id, calendarId = 1L,
title = title,
start = Instant.fromEpochMilliseconds(0L),
end = Instant.fromEpochMilliseconds(60_000L),
isAllDay = false, color = 0xFF000000.toInt(), location = null,
)
@Test
fun `initial state value is Loading before any subscriber`() {
val repo = FakeRepo()
val vm = DebugViewModel(repo, testDispatcher)
assertThat(vm.state.value).isEqualTo(DebugUiState.Loading)
}
@Test
fun `Success contains calendars and capped events after subscription`() = runTest {
val repo = FakeRepo(
calendarsFlow = MutableStateFlow(listOf(makeCal(1L))),
instancesFlow = MutableStateFlow(listOf(makeEvent(10L, "X"))),
)
val vm = DebugViewModel(repo, testDispatcher)
vm.state.test {
val success = awaitItem() as DebugUiState.Success
assertThat(success.calendars.map { it.id }).containsExactly(1L)
assertThat(success.nextEvents.map { it.title }).containsExactly("X")
cancelAndIgnoreRemainingEvents()
}
}
@Test
fun `instances are capped at 50`() = runTest {
val repo = FakeRepo(
calendarsFlow = MutableStateFlow(listOf(makeCal(1L))),
instancesFlow = MutableStateFlow((1L..100L).map { makeEvent(it, "E$it") }),
)
val vm = DebugViewModel(repo, testDispatcher)
vm.state.test {
val success = awaitItem() as DebugUiState.Success
assertThat(success.nextEvents).hasSize(50)
assertThat(success.nextEvents.first().instanceId).isEqualTo(1L)
assertThat(success.nextEvents.last().instanceId).isEqualTo(50L)
cancelAndIgnoreRemainingEvents()
}
}
@Test
fun `state updates when repository emits new data`() = runTest {
val repo = FakeRepo()
val vm = DebugViewModel(repo, testDispatcher)
vm.state.test {
// Empty initial: combine fires once because both StateFlows have initial empty value
val empty = awaitItem() as DebugUiState.Success
assertThat(empty.calendars).isEmpty()
assertThat(empty.nextEvents).isEmpty()
repo.calendarsFlow.value = listOf(makeCal(1L), makeCal(2L))
val updated = awaitItem() as DebugUiState.Success
assertThat(updated.calendars.map { it.id }).containsExactly(1L, 2L).inOrder()
cancelAndIgnoreRemainingEvents()
}
}
}

View File

@@ -0,0 +1,179 @@
package de.jeanlucmakiola.calendula.ui.week
import com.google.common.truth.Truth.assertThat
import de.jeanlucmakiola.calendula.domain.EventInstance
import kotlinx.datetime.DateTimeUnit
import kotlinx.datetime.DayOfWeek
import kotlinx.datetime.LocalDate
import kotlinx.datetime.TimeZone
import kotlinx.datetime.atTime
import kotlinx.datetime.plus
import kotlinx.datetime.toInstant
import kotlin.time.Instant
import org.junit.jupiter.api.Test
class WeekLayoutTest {
private val zone = TimeZone.UTC
// 2026-06-10 is a Wednesday; its Monday-anchored week starts 2026-06-08.
private val wed = LocalDate(2026, 6, 10)
private val mon = LocalDate(2026, 6, 8)
private val weekDays = (0..6).map { mon.plusDays(it) }
private fun at(date: LocalDate, h: Int, m: Int = 0): Instant =
date.atTime(h, m).toInstant(zone)
private fun event(
start: Instant,
end: Instant,
allDay: Boolean = false,
id: Long = 1L,
title: String = "E",
) = EventInstance(
instanceId = id,
eventId = id,
calendarId = 1L,
title = title,
start = start,
end = end,
isAllDay = allDay,
color = 0xFF112233.toInt(),
location = null,
)
@Test
fun `startOfWeek snaps to monday`() {
assertThat(wed.startOfWeek(DayOfWeek.MONDAY)).isEqualTo(mon)
assertThat(mon.startOfWeek(DayOfWeek.MONDAY)).isEqualTo(mon)
}
@Test
fun `weekRange spans seven days`() {
val range = weekRange(mon, zone)
assertThat(range.start).isEqualTo(at(mon, 0, 0))
// endInclusive is the last second of day 7 (Sunday 2026-06-14)
assertThat(range.endInclusive).isEqualTo(LocalDate(2026, 6, 14).atTime(23, 59, 59).toInstant(zone))
}
@Test
fun `coversDay is true for any overlap and false otherwise`() {
val ev = event(at(wed, 9), at(wed, 10))
assertThat(ev.coversDay(wed, zone)).isTrue()
assertThat(ev.coversDay(mon, zone)).isFalse()
val multiDay = event(at(mon, 22), at(wed, 2), allDay = true)
assertThat(multiDay.coversDay(mon, zone)).isTrue()
assertThat(multiDay.coversDay(LocalDate(2026, 6, 9), zone)).isTrue()
assertThat(multiDay.coversDay(wed, zone)).isTrue()
assertThat(multiDay.coversDay(LocalDate(2026, 6, 12), zone)).isFalse()
}
@Test
fun `single timed event gets one lane`() {
val blocks = layoutDay(listOf(event(at(wed, 9), at(wed, 10, 30))), wed, zone)
assertThat(blocks).hasSize(1)
val b = blocks.single()
assertThat(b.startMin).isEqualTo(9 * 60)
assertThat(b.endMin).isEqualTo(10 * 60 + 30)
assertThat(b.lane).isEqualTo(0)
assertThat(b.laneCount).isEqualTo(1)
}
@Test
fun `overlapping events resolve to side-by-side lanes`() {
val a = event(at(wed, 9), at(wed, 11), id = 1L)
val b = event(at(wed, 10), at(wed, 12), id = 2L)
val blocks = layoutDay(listOf(a, b), wed, zone).sortedBy { it.lane }
assertThat(blocks.map { it.lane }).containsExactly(0, 1)
assertThat(blocks.all { it.laneCount == 2 }).isTrue()
}
@Test
fun `back-to-back events reuse one lane`() {
val a = event(at(wed, 9), at(wed, 10), id = 1L)
val b = event(at(wed, 10), at(wed, 11), id = 2L)
val blocks = layoutDay(listOf(a, b), wed, zone)
assertThat(blocks).hasSize(2)
assertThat(blocks.all { it.lane == 0 && it.laneCount == 1 }).isTrue()
}
@Test
fun `event spanning midnight is clipped to the day`() {
// Starts the previous evening, ends 02:00 on wed.
val ev = event(at(mon.plusDays(1), 22), at(wed, 2))
val blocks = layoutDay(listOf(ev), wed, zone)
assertThat(blocks).hasSize(1)
assertThat(blocks.single().startMin).isEqualTo(0)
assertThat(blocks.single().endMin).isEqualTo(2 * 60)
}
@Test
fun `instant event is kept with zero-length`() {
val ev = event(at(wed, 12), at(wed, 12))
val blocks = layoutDay(listOf(ev), wed, zone)
assertThat(blocks).hasSize(1)
assertThat(blocks.single().startMin).isEqualTo(12 * 60)
assertThat(blocks.single().endMin).isEqualTo(12 * 60)
}
@Test
fun `all-day events are excluded from the timed layout`() {
val ev = event(at(wed, 0), at(wed.plusDays(1), 0), allDay = true)
assertThat(layoutDay(listOf(ev), wed, zone)).isEmpty()
}
@Test
fun `events on other days are dropped`() {
val ev = event(at(mon, 9), at(mon, 10))
assertThat(layoutDay(listOf(ev), wed, zone)).isEmpty()
}
@Test
fun `single-day all-day event is a one-column span`() {
// Wed only: start Wed 00:00, end Thu 00:00.
val ev = event(at(weekDays[2], 0), at(weekDays[3], 0), allDay = true)
val spans = layoutAllDay(listOf(ev), weekDays, zone)
assertThat(spans).hasSize(1)
val s = spans.single()
assertThat(s.startCol).isEqualTo(2)
assertThat(s.endCol).isEqualTo(2)
assertThat(s.lane).isEqualTo(0)
}
@Test
fun `multi-day all-day event becomes one span across columns`() {
// Tue..Thu: end Fri 00:00 is exclusive, so Fri is not covered.
val ev = event(at(weekDays[1], 0), at(weekDays[4], 0), allDay = true)
val s = layoutAllDay(listOf(ev), weekDays, zone).single()
assertThat(s.startCol).isEqualTo(1)
assertThat(s.endCol).isEqualTo(3)
}
@Test
fun `span reaching outside the week is clamped to visible columns`() {
// Starts two days before Monday, ends Wed 00:00 → covers Mon..Tue.
val ev = event(at(mon.plusDays(-2), 0), at(weekDays[2], 0), allDay = true)
val s = layoutAllDay(listOf(ev), weekDays, zone).single()
assertThat(s.startCol).isEqualTo(0)
assertThat(s.endCol).isEqualTo(1)
}
@Test
fun `overlapping all-day spans get separate lanes`() {
val a = event(at(weekDays[0], 0), at(weekDays[3], 0), allDay = true, id = 1L) // Mon..Wed
val b = event(at(weekDays[1], 0), at(weekDays[4], 0), allDay = true, id = 2L) // Tue..Thu
val spans = layoutAllDay(listOf(a, b), weekDays, zone)
assertThat(spans.map { it.lane }.toSet()).isEqualTo(setOf(0, 1))
}
@Test
fun `disjoint all-day spans reuse one lane`() {
val a = event(at(weekDays[0], 0), at(weekDays[1], 0), allDay = true, id = 1L) // Mon
val b = event(at(weekDays[3], 0), at(weekDays[4], 0), allDay = true, id = 2L) // Thu
val spans = layoutAllDay(listOf(a, b), weekDays, zone)
assertThat(spans.all { it.lane == 0 }).isTrue()
}
private fun LocalDate.plusDays(n: Int): LocalDate = plus(n, DateTimeUnit.DAY)
}