all: reorganize some composables

common/build.gradle.kts

@@ -36,6 +36,7 @@ kotlin {
       api(projects.model)
       api(libs.napier)
       implementation(libs.kotlin.coroutines.core)
+      implementation(libs.kotlinx.datetime)
       implementation(libs.compose.richtext.markdown)
       implementation(libs.compose.richtext.material3)
       implementation(libs.compose.richtext.ui)

common/src/commonMain/kotlin/dev/msfjarvis/claw/common/ui/decorations/ClawAppBar.kt

@@ -0,0 +1,22 @@
+package dev.msfjarvis.claw.common.ui.decorations
+
+import androidx.compose.material3.SmallTopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+
+@Composable
+fun ClawAppBar(
+  backgroundColor: Color,
+  modifier: Modifier = Modifier,
+  navigationIcon: @Composable () -> Unit = {},
+  title: @Composable () -> Unit = {},
+) {
+  SmallTopAppBar(
+    title = title,
+    modifier = modifier,
+    colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = backgroundColor),
+    navigationIcon = navigationIcon,
+  )
+}

common/src/commonMain/kotlin/dev/msfjarvis/claw/common/ui/decorations/MonthHeader.kt

@@ -0,0 +1,31 @@
+package dev.msfjarvis.claw.common.ui.decorations
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.capitalize
+import androidx.compose.ui.text.intl.Locale
+import androidx.compose.ui.unit.dp
+import dev.msfjarvis.claw.common.ui.surfaceColorAtNavigationBarElevation
+import kotlinx.datetime.Month
+
+@Composable
+fun MonthHeader(month: Month) {
+  Box(
+    Modifier.fillMaxWidth()
+      .wrapContentHeight()
+      .background(MaterialTheme.colorScheme.surfaceColorAtNavigationBarElevation())
+  ) {
+    Text(
+      text = month.name.lowercase().capitalize(Locale.current),
+      style = MaterialTheme.typography.headlineSmall,
+      modifier = Modifier.padding(horizontal = 12.dp, vertical = 12.dp),
+    )
+  }
+}

common/src/commonMain/kotlin/dev/msfjarvis/claw/common/ui/ext.kt

@@ -0,0 +1,27 @@
+package dev.msfjarvis.claw.common.ui
+
+import androidx.compose.material3.ColorScheme
+import androidx.compose.material3.LocalAbsoluteTonalElevation
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.compositeOver
+import androidx.compose.ui.unit.dp
+import kotlin.math.ln
+
+/**
+ * Returns the [ColorScheme.surface] color with an alpha of the [ColorScheme.primary] color overlaid
+ * on top of it. Computes the surface tonal color at different elevation levels e.g. surface1
+ * through surface5.
+ *
+ * Stolen from AndroidX, keep in sync when upgrading Compose. This version is hard-coded to
+ * replicate the logic used by the Material3 NavigationBar to determine its surface color.
+ * https://github.com/androidx/androidx/blob/74d3510b608c3cc26b9cf9be8d15a6a6c26192c2/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/ColorScheme.kt#L453-L466
+ */
+@Composable
+fun ColorScheme.surfaceColorAtNavigationBarElevation(): Color {
+  // Absolute tonal elevation + NavigationBarTokens.ContainerElevation
+  val elevation = LocalAbsoluteTonalElevation.current + 3.0.dp
+  if (elevation == 0.dp) return surface
+  val alpha = ((4.5f * ln(elevation.value + 1)) + 2f) / 100f
+  return primary.copy(alpha = alpha).compositeOver(surface)
+}