feat(timeline): optional hour separator lines in week & day view

Add a showHourLines preference (default off — the existing clean look).
When on, the week and day timelines draw a faint outline-variant line at
each hour boundary, sitting over the column background but beneath event
blocks. The toggle is provided app-wide via LocalShowHourLines and applied
through a reusable hourSeparatorLines() modifier.

Closes #5 (Codeberg)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/src/main/java/de/jeanlucmakiola/calendula/MainActivity.kt

@@ -25,6 +25,7 @@ import de.jeanlucmakiola.calendula.data.crash.CrashReporter
 import de.jeanlucmakiola.calendula.data.prefs.ThemeMode
 import de.jeanlucmakiola.calendula.data.prefs.is24Hour
 import de.jeanlucmakiola.calendula.ui.RootScreen
+import de.jeanlucmakiola.calendula.ui.common.LocalShowHourLines
 import de.jeanlucmakiola.calendula.ui.common.LocalUse24HourFormat
 import de.jeanlucmakiola.calendula.ui.WidgetNavRequest
 import de.jeanlucmakiola.calendula.ui.common.CalendarView
@@ -97,7 +98,10 @@ class MainActivity : AppCompatActivity() {
                 darkTheme = darkTheme,
                 dynamicColor = settings.dynamicColor,
             ) {
-                CompositionLocalProvider(LocalUse24HourFormat provides use24Hour) {
+                CompositionLocalProvider(
+                    LocalUse24HourFormat provides use24Hour,
+                    LocalShowHourLines provides settings.showHourLines,
+                ) {
                     RootScreen(
                         modifier = Modifier.fillMaxSize(),
                         requestedDetailKey = requestedDetailKey,

app/src/main/java/de/jeanlucmakiola/calendula/data/prefs/SettingsPrefs.kt

@@ -95,6 +95,18 @@ class SettingsPrefs @Inject constructor(
         store.edit { it[TIME_FORMAT_KEY] = pref.name }
     }
 
+    /**
+     * Whether the week/day timeline draws a faint separator line at each hour
+     * (v2.11). Defaults to OFF — the historical clean look; users opt in.
+     */
+    val showHourLines: Flow<Boolean> = store.data.map { prefs ->
+        prefs[SHOW_HOUR_LINES_KEY] ?: false
+    }
+
+    suspend fun setShowHourLines(enabled: Boolean) {
+        store.edit { it[SHOW_HOUR_LINES_KEY] = enabled }
+    }
+
     /**
      * The calendar view the app opens on (M1). Defaults to [CalendarView.Week] —
      * the historical hard-coded startup view — so existing users see no change
@@ -285,6 +297,7 @@ class SettingsPrefs @Inject constructor(
         internal val DYNAMIC_COLOR_KEY = booleanPreferencesKey("dynamic_color")
         internal val WEEK_START_KEY = stringPreferencesKey("week_start")
         internal val TIME_FORMAT_KEY = stringPreferencesKey("time_format")
+        internal val SHOW_HOUR_LINES_KEY = booleanPreferencesKey("show_hour_lines")
         internal val DEFAULT_VIEW_KEY = stringPreferencesKey("default_view")
         internal val FORM_FIELDS_KEY = stringPreferencesKey("event_form_default_fields")
         internal val REMINDERS_ENABLED_KEY = booleanPreferencesKey("reminders_enabled")

app/src/main/java/de/jeanlucmakiola/calendula/ui/common/HourLines.kt

@@ -0,0 +1,38 @@
+package de.jeanlucmakiola.calendula.ui.common
+
+import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+
+/**
+ * Whether the week/day timeline draws an hour separator line, from the
+ * `showHourLines` preference. Provided once at the app root (like
+ * [LocalUse24HourFormat]) so the timeline reads it without ViewModel plumbing.
+ * Defaults to off — the historical clean look.
+ */
+val LocalShowHourLines = staticCompositionLocalOf { false }
+
+/**
+ * Draw a faint separator line at the top of each hour (1..23) when [show] is
+ * true. Applied to a day column's content so each line sits over the column's
+ * background but beneath the event blocks. [hourHeightPx] is one hour's pixel
+ * height; [color] is resolved by the caller from the theme.
+ */
+fun Modifier.hourSeparatorLines(show: Boolean, hourHeightPx: Float, color: Color): Modifier =
+    if (!show) {
+        this
+    } else {
+        drawBehind {
+            for (hour in 1 until 24) {
+                val y = hour * hourHeightPx
+                drawLine(
+                    color = color,
+                    start = Offset(0f, y),
+                    end = Offset(size.width, y),
+                    strokeWidth = 1f,
+                )
+            }
+        }
+    }

app/src/main/java/de/jeanlucmakiola/calendula/ui/day/DayScreen.kt

@@ -82,8 +82,10 @@ import de.jeanlucmakiola.calendula.ui.common.pastelize
 import de.jeanlucmakiola.calendula.ui.common.rememberCalendarSlideSpec
 import de.jeanlucmakiola.calendula.ui.common.currentLocale
 import de.jeanlucmakiola.calendula.ui.common.LocalUse24HourFormat
+import de.jeanlucmakiola.calendula.ui.common.LocalShowHourLines
 import de.jeanlucmakiola.calendula.ui.common.formatHourLabel
 import de.jeanlucmakiola.calendula.ui.common.formatMinuteOfDay
+import de.jeanlucmakiola.calendula.ui.common.hourSeparatorLines
 import de.jeanlucmakiola.calendula.ui.week.TimedBlock
 import kotlinx.coroutines.flow.first
 import kotlinx.coroutines.launch
@@ -539,6 +541,8 @@ private fun DayColumnCard(
     modifier: Modifier = Modifier,
 ) {
     val hourPx = with(LocalDensity.current) { HOUR_HEIGHT.toPx() }
+    val showHourLines = LocalShowHourLines.current
+    val hourLineColor = MaterialTheme.colorScheme.outlineVariant
     Card(
         // Plain rectangular column — the soft corners come from the outer
         // rounded scroll viewport, so inner rounding would look odd at the edges.
@@ -551,6 +555,9 @@ private fun DayColumnCard(
         BoxWithConstraints(
             modifier = Modifier
                 .fillMaxSize()
+                // Faint hour separators sit over the column background but under
+                // the event blocks (drawBehind paints before the children).
+                .hourSeparatorLines(showHourLines, hourPx, hourLineColor)
                 // Tap an empty slot to create an event there. Taps on event
                 // blocks are consumed by their own click handler first, so this
                 // only fires on the column background. Snaps to the tapped hour.

app/src/main/java/de/jeanlucmakiola/calendula/ui/settings/SettingsScreen.kt

@@ -474,9 +474,21 @@ private fun AppearanceScreen(
         GroupedRow(
             title = stringResource(R.string.settings_time_format),
             summary = timeFormatLabel(state.timeFormat),
-            position = Position.Bottom,
+            position = Position.Middle,
             onClick = { showTimeFormat = true },
         )
+        GroupedRow(
+            title = stringResource(R.string.settings_hour_lines),
+            summary = stringResource(R.string.settings_hour_lines_summary),
+            position = Position.Bottom,
+            trailing = {
+                Switch(
+                    checked = state.showHourLines,
+                    onCheckedChange = viewModel::setShowHourLines,
+                )
+            },
+            onClick = { viewModel.setShowHourLines(!state.showHourLines) },
+        )
     }
 
     if (showTheme) {

app/src/main/java/de/jeanlucmakiola/calendula/ui/settings/SettingsUiState.kt

@@ -21,6 +21,8 @@ data class SettingsUiState(
     val weekStart: WeekStartPref = WeekStartPref.AUTO,
     /** Clock convention for time labels (v2.11). AUTO follows the system setting. */
     val timeFormat: TimeFormatPref = TimeFormatPref.AUTO,
+    /** Whether the week/day timeline draws an hour separator line (v2.11). */
+    val showHourLines: Boolean = false,
     /** The calendar view the app opens on, and the home of the view back stack (M1). */
     val defaultView: CalendarView = CalendarView.Week,
     /** Optional event-form fields shown by default (rest behind "more fields"). */

app/src/main/java/de/jeanlucmakiola/calendula/ui/settings/SettingsViewModel.kt

@@ -75,10 +75,12 @@ class SettingsViewModel @Inject constructor(
                 ReminderOverrides(overrides, allDayOverrides, calendars)
             },
             combine(prefs.defaultView, prefs.timeFormat) { view, timeFormat -> view to timeFormat },
-        ) { base, defaults, overrides, viewAndTimeFormat ->
+            prefs.showHourLines,
+        ) { base, defaults, overrides, viewAndTimeFormat, showHourLines ->
             base.copy(
                 defaultView = viewAndTimeFormat.first,
                 timeFormat = viewAndTimeFormat.second,
+                showHourLines = showHourLines,
                 allowColorOnUnsupportedCalendars = defaults.allowColor,
                 defaultReminderMinutes = defaults.defaultReminder,
                 defaultAllDayReminderMinutes = defaults.allDayReminder,
@@ -124,6 +126,10 @@ class SettingsViewModel @Inject constructor(
         viewModelScope.launch { prefs.setTimeFormat(pref) }
     }
 
+    fun setShowHourLines(enabled: Boolean) {
+        viewModelScope.launch { prefs.setShowHourLines(enabled) }
+    }
+
     fun setDefaultView(view: CalendarView) {
         viewModelScope.launch { prefs.setDefaultView(view) }
     }

app/src/main/java/de/jeanlucmakiola/calendula/ui/week/WeekScreen.kt

@@ -84,8 +84,10 @@ import de.jeanlucmakiola.calendula.ui.common.rememberCalendarFadeSpec
 import de.jeanlucmakiola.calendula.ui.common.rememberReduceMotion
 import de.jeanlucmakiola.calendula.ui.common.currentLocale
 import de.jeanlucmakiola.calendula.ui.common.LocalUse24HourFormat
+import de.jeanlucmakiola.calendula.ui.common.LocalShowHourLines
 import de.jeanlucmakiola.calendula.ui.common.formatHourLabel
 import de.jeanlucmakiola.calendula.ui.common.formatMinuteOfDay
+import de.jeanlucmakiola.calendula.ui.common.hourSeparatorLines
 import de.jeanlucmakiola.calendula.ui.common.rememberCalendarSlideSpec
 import de.jeanlucmakiola.calendula.ui.common.next
 import de.jeanlucmakiola.calendula.ui.common.pastelize
@@ -655,6 +657,8 @@ private fun DayColumnCard(
     modifier: Modifier = Modifier,
 ) {
     val hourPx = with(LocalDensity.current) { HOUR_HEIGHT.toPx() }
+    val showHourLines = LocalShowHourLines.current
+    val hourLineColor = MaterialTheme.colorScheme.outlineVariant
     Card(
         // Plain rectangular columns — the soft corners come from the outer
         // rounded scroll viewport, so inner rounding would look odd at the edges.
@@ -667,6 +671,9 @@ private fun DayColumnCard(
         BoxWithConstraints(
             modifier = Modifier
                 .fillMaxSize()
+                // Faint hour separators sit over the column background but under
+                // the event blocks (drawBehind paints before the children).
+                .hourSeparatorLines(showHourLines, hourPx, hourLineColor)
                 // Tap an empty slot to create an event there; taps on event
                 // blocks are consumed by their own handler first. Snaps to hour.
                 .pointerInput(date) {

app/src/main/res/values-de/strings.xml

@@ -282,6 +282,8 @@
     <string name="settings_time_format_auto">Automatisch</string>
     <string name="settings_time_format_12h">12-Stunden (2:00 PM)</string>
     <string name="settings_time_format_24h">24-Stunden (14:00)</string>
+    <string name="settings_hour_lines">Stundenlinien</string>
+    <string name="settings_hour_lines_summary">Trennlinie zu jeder vollen Stunde in Wochen- und Tagesansicht anzeigen</string>
     <string name="settings_section_event_form">Termin-Formular</string>
     <string name="settings_form_fields_hint">Standardmäßig angezeigte Felder — alles Weitere liegt hinter \"Weitere Felder\"</string>
     <string name="settings_color_unsupported">Farben auf nicht unterstützten Kalendern erlauben</string>

app/src/main/res/values/strings.xml

@@ -275,6 +275,8 @@
     <string name="settings_time_format_auto">Automatic</string>
     <string name="settings_time_format_12h">12-hour (2:00 PM)</string>
     <string name="settings_time_format_24h">24-hour (14:00)</string>
+    <string name="settings_hour_lines">Hour lines</string>
+    <string name="settings_hour_lines_summary">Show a separator line at each hour in week and day view</string>
     <string name="settings_section_event_form">New event form</string>
     <string name="settings_form_fields_hint">Fields shown by default — everything else sits behind \"More fields\"</string>
     <string name="settings_color_unsupported">Allow colors on unsupported calendars</string>