fix(drawer): dismiss on back, align header, labels and leading icons (#114)

app/src/main/java/de/jeanlucmakiola/calendula/ui/agenda/AgendaScreen.kt

@@ -112,6 +112,7 @@ fun AgendaScreen(
             CalendarDrawer(
                 currentView = selectedView,
                 currentDate = anchor,
+                drawerState = drawerState,
                 viewOrder = drawerViewOrder,
                 onSelectView = { view ->
                     onSelectView(view)

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

@@ -1,5 +1,6 @@
 package de.jeanlucmakiola.calendula.ui.common
 
+import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
@@ -19,6 +20,7 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.DateRange
 import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material3.DrawerState
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ModalDrawerSheet
@@ -27,19 +29,23 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import de.jeanlucmakiola.calendula.R
 import de.jeanlucmakiola.calendula.ui.filter.CalendarFilterList
+import de.jeanlucmakiola.floret.components.GroupedListInset
 import de.jeanlucmakiola.floret.components.GroupedRow
 import de.jeanlucmakiola.floret.components.Position
 import de.jeanlucmakiola.floret.components.positionOf
+import kotlinx.coroutines.launch
 import kotlinx.datetime.LocalDate
 
 /**
@@ -50,7 +56,8 @@ import kotlinx.datetime.LocalDate
  * a jump-to-date action, the per-calendar visibility filter (M3) inline, and a
  * pinned Settings row. The "View" section mirrors the top-bar switcher pill —
  * tapping a view here selects it (and closes the drawer) rather than cycling.
- * The host screen owns the drawer state.
+ * The host screen owns the drawer state; the sheet reads it only to dismiss
+ * itself on back.
  *
  * [currentDate] seeds the jump-to-date picker (the visible day/week-start/month
  * anchor); [onJumpToDate] navigates the active view to the chosen day.
@@ -59,12 +66,17 @@ import kotlinx.datetime.LocalDate
 fun CalendarDrawer(
     currentView: CalendarView,
     currentDate: LocalDate,
+    drawerState: DrawerState,
     onSelectView: (CalendarView) -> Unit,
     onJumpToDate: (LocalDate) -> Unit,
     onSettings: () -> Unit,
     viewOrder: List<CalendarView> = IMPLEMENTED_VIEWS,
 ) {
     var showDatePicker by remember { mutableStateOf(false) }
+    val scope = rememberCoroutineScope()
+
+    // Registered in the sheet so it takes precedence over the host's back handler.
+    BackHandler(enabled = drawerState.isOpen) { scope.launch { drawerState.close() } }
 
     ModalDrawerSheet {
         // The whole sidebar scrolls as one — header, views, the calendar filter
@@ -83,7 +95,7 @@ fun CalendarDrawer(
                     position = positionOf(index, viewOrder.size),
                     selected = view == currentView,
                     minHeight = 56.dp,
-                    leading = { Icon(view.icon, contentDescription = null) },
+                    leading = { DrawerLeadingIcon(view.icon) },
                     onClick = { onSelectView(view) },
                 )
             }
@@ -93,7 +105,7 @@ fun CalendarDrawer(
                 title = stringResource(R.string.drawer_jump_to_date),
                 position = Position.Alone,
                 minHeight = 56.dp,
-                leading = { Icon(Icons.Filled.DateRange, contentDescription = null) },
+                leading = { DrawerLeadingIcon(Icons.Filled.DateRange) },
                 onClick = { showDatePicker = true },
             )
 
@@ -107,7 +119,7 @@ fun CalendarDrawer(
                 title = stringResource(R.string.month_action_settings),
                 position = Position.Alone,
                 minHeight = 56.dp,
-                leading = { Icon(Icons.Filled.Settings, contentDescription = null) },
+                leading = { DrawerLeadingIcon(Icons.Filled.Settings) },
                 onClick = onSettings,
             )
             Spacer(Modifier.height(8.dp))
@@ -126,13 +138,27 @@ fun CalendarDrawer(
     }
 }
 
+/** Leading slot for the drawer's plain icons: the same 40.dp footprint
+ *  [CalendarColorChip] takes, so every leading glyph shares one vertical axis. */
+@Composable
+private fun DrawerLeadingIcon(icon: ImageVector) {
+    Box(Modifier.size(40.dp), contentAlignment = Alignment.Center) {
+        Icon(icon, contentDescription = null)
+    }
+}
+
 /** Branded header: the app-icon chip beside the app name. */
 @Composable
 private fun DrawerHeader() {
     Row(
         modifier = Modifier
             .fillMaxWidth()
-            .padding(start = 28.dp, end = 28.dp, top = 24.dp, bottom = 16.dp),
+            .padding(
+                start = GroupedListInset,
+                end = GroupedListInset,
+                top = 24.dp,
+                bottom = 16.dp,
+            ),
         verticalAlignment = Alignment.CenterVertically,
     ) {
         Box(
@@ -164,6 +190,11 @@ private fun DrawerSectionHeader(text: String) {
         text = text,
         style = MaterialTheme.typography.titleSmall,
         color = MaterialTheme.colorScheme.primary,
-        modifier = Modifier.padding(start = 28.dp, end = 28.dp, top = 16.dp, bottom = 8.dp),
+        modifier = Modifier.padding(
+            start = GroupedListInset,
+            end = GroupedListInset,
+            top = 16.dp,
+            bottom = 8.dp,
+        ),
     )
 }

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

@@ -195,6 +195,7 @@ fun DayScreen(
             CalendarDrawer(
                 currentView = selectedView,
                 currentDate = date,
+                drawerState = drawerState,
                 viewOrder = drawerViewOrder,
                 onSelectView = { view ->
                     onSelectView(view)

app/src/main/java/de/jeanlucmakiola/calendula/ui/filter/CalendarFilterList.kt

@@ -22,6 +22,7 @@ import de.jeanlucmakiola.calendula.R
 import de.jeanlucmakiola.calendula.domain.FailureReason
 import de.jeanlucmakiola.calendula.ui.common.CalendarColorChip
 import de.jeanlucmakiola.calendula.ui.common.sourceAppName
+import de.jeanlucmakiola.floret.components.GroupedListInset
 import de.jeanlucmakiola.floret.components.GroupedRow
 import de.jeanlucmakiola.floret.components.positionOf
 
@@ -73,7 +74,12 @@ private fun FilterList(
                 },
                 style = MaterialTheme.typography.labelMedium,
                 color = MaterialTheme.colorScheme.onSurfaceVariant,
-                modifier = Modifier.padding(start = 28.dp, end = 28.dp, top = 12.dp, bottom = 4.dp),
+                modifier = Modifier.padding(
+                    start = GroupedListInset,
+                    end = GroupedListInset,
+                    top = 12.dp,
+                    bottom = 4.dp,
+                ),
             )
             group.calendars.forEachIndexed { index, cal ->
                 GroupedRow(
@@ -103,7 +109,7 @@ private fun FilterLoading(modifier: Modifier = Modifier) {
         repeat(4) {
             Box(
                 modifier = Modifier
-                    .padding(horizontal = 28.dp)
+                    .padding(horizontal = GroupedListInset)
                     .fillMaxWidth()
                     .height(36.dp)
                     .background(
@@ -129,6 +135,6 @@ private fun FilterMessage(reason: FailureReason, modifier: Modifier = Modifier)
         textAlign = TextAlign.Center,
         modifier = modifier
             .fillMaxWidth()
-            .padding(horizontal = 28.dp, vertical = 24.dp),
+            .padding(horizontal = GroupedListInset, vertical = 24.dp),
     )
 }

app/src/main/java/de/jeanlucmakiola/calendula/ui/month/MonthScreen.kt

@@ -329,6 +329,7 @@ fun MonthScreen(
             CalendarDrawer(
                 currentView = selectedView,
                 currentDate = LocalDate(titleMonth.year, titleMonth.month, 1),
+                drawerState = drawerState,
                 viewOrder = drawerViewOrder,
                 onSelectView = { view ->
                     onSelectView(view)

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

@@ -216,6 +216,7 @@ fun WeekScreen(
             CalendarDrawer(
                 currentView = selectedView,
                 currentDate = weekStart,
+                drawerState = drawerState,
                 viewOrder = drawerViewOrder,
                 onSelectView = { view ->
                     onSelectView(view)