feat(stats): improve last year screen layout

app/src/main/java/org/nsh07/pomodoro/ui/statsScreen/components/visualizations.kt

@@ -363,7 +363,7 @@ fun HeatmapWithWeekLabels(
                             Modifier
                                 .size(size)
                                 .background(
-                                    colorScheme.primary.copy(0.33f + (0.67f * sum / maxValue)),
+                                    colorScheme.primary.copy(0.4f + (0.6f * sum / maxValue)),
                                     shape
                                 )
                         )

app/src/main/java/org/nsh07/pomodoro/ui/statsScreen/screens/LastYearScreen.kt

@@ -20,6 +20,7 @@ package org.nsh07.pomodoro.ui.statsScreen.screens
 import android.graphics.Typeface
 import androidx.compose.animation.SharedTransitionScope
 import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -29,6 +30,7 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.ButtonDefaults
@@ -38,6 +40,7 @@ import androidx.compose.material3.FilledTonalIconButton
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.MaterialTheme.colorScheme
+import androidx.compose.material3.MaterialTheme.shapes
 import androidx.compose.material3.MaterialTheme.typography
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
@@ -52,6 +55,7 @@ import androidx.compose.runtime.remember
 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.draw.rotate
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.painterResource
@@ -68,6 +72,8 @@ import org.nsh07.pomodoro.R
 import org.nsh07.pomodoro.ui.mergePaddingValues
 import org.nsh07.pomodoro.ui.statsScreen.components.FocusBreakRatioVisualization
 import org.nsh07.pomodoro.ui.statsScreen.components.FocusBreakdownChart
+import org.nsh07.pomodoro.ui.statsScreen.components.HEATMAP_CELL_GAP
+import org.nsh07.pomodoro.ui.statsScreen.components.HEATMAP_CELL_SIZE
 import org.nsh07.pomodoro.ui.statsScreen.components.HeatmapWithWeekLabels
 import org.nsh07.pomodoro.ui.statsScreen.components.HorizontalStackedBar
 import org.nsh07.pomodoro.ui.statsScreen.components.TimeLineChart
@@ -168,15 +174,14 @@ fun SharedTransitionScope.LastYearScreen(
         LazyColumn(
             verticalArrangement = Arrangement.spacedBy(16.dp),
             contentPadding = insets,
-            modifier = Modifier
+            modifier = Modifier.fillMaxSize() // we don't add padding here to allow charts to extend to the edge
-                .fillMaxSize()
-                .padding(horizontal = 16.dp)
         ) {
             item {
                 Spacer(Modifier.height(16.dp))
                 Row(
                     verticalAlignment = Alignment.Bottom,
-                    horizontalArrangement = Arrangement.spacedBy(8.dp)
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                    modifier = Modifier.padding(horizontal = 16.dp)
                 ) {
                     Text(
                         millisecondsToHoursMinutes(
@@ -216,6 +221,7 @@ fun SharedTransitionScope.LastYearScreen(
                         context.model.extraStore[mainChartData.second][x.toInt()]
                     },
                     modifier = Modifier
+                        .padding(horizontal = 16.dp)
                         .sharedElement(
                             sharedContentState = this@LastYearScreen
                                 .rememberSharedContentState("last year chart"),
@@ -229,18 +235,26 @@ fun SharedTransitionScope.LastYearScreen(
             item {
                 Text(
                     stringResource(R.string.focus_breakdown),
-                    style = typography.headlineSmall
+                    style = typography.headlineSmall,
+                    modifier = Modifier.padding(horizontal = 16.dp)
                 )
                 Text(
                     stringResource(R.string.focus_breakdown_desc),
                     style = typography.bodySmall,
-                    color = colorScheme.onSurfaceVariant
+                    color = colorScheme.onSurfaceVariant,
+                    modifier = Modifier.padding(horizontal = 16.dp)
                 )
             }
 
-            item { HorizontalStackedBar(focusBreakdownValues.first, rankList = rankList) }
             item {
-                Row {
+                HorizontalStackedBar(
+                    focusBreakdownValues.first,
+                    rankList = rankList,
+                    modifier = Modifier.padding(horizontal = 16.dp)
+                )
+            }
+            item {
+                Row(Modifier.padding(horizontal = 16.dp)) {
                     focusBreakdownValues.first.fastForEach {
                         Text(
                             if (it <= 60 * 60 * 1000)
@@ -259,7 +273,11 @@ fun SharedTransitionScope.LastYearScreen(
                 val iconRotation by animateFloatAsState(
                     if (breakdownChartExpanded) 180f else 0f
                 )
-                Column(modifier = Modifier.fillMaxWidth()) {
+                Column(
+                    modifier = Modifier
+                        .padding(horizontal = 16.dp)
+                        .fillMaxWidth()
+                ) {
                     TonalToggleButton(
                         checked = breakdownChartExpanded,
                         onCheckedChange = { breakdownChartExpanded = it },
@@ -285,13 +303,15 @@ fun SharedTransitionScope.LastYearScreen(
             item {
                 Text(
                     stringResource(R.string.focus_break_ratio),
-                    style = typography.headlineSmall
+                    style = typography.headlineSmall,
+                    modifier = Modifier.padding(horizontal = 16.dp)
                 )
             }
             item {
                 FocusBreakRatioVisualization(
                     focusDuration = focusDuration,
-                    breakDuration = focusBreakdownValues.second
+                    breakDuration = focusBreakdownValues.second,
+                    modifier = Modifier.padding(horizontal = 16.dp)
                 )
             }
 
@@ -300,12 +320,14 @@ fun SharedTransitionScope.LastYearScreen(
             item {
                 Text(
                     "Focus history heatmap",
-                    style = typography.headlineSmall
+                    style = typography.headlineSmall,
+                    modifier = Modifier.padding(horizontal = 16.dp)
                 )
                 Text(
-                    "Focus history of the past year. Brighter colors represent a longer focus duration.",
+                    "Focus history of the past year. Deeper colors represent a longer focus duration. Cells are grouped by month.",
                     style = typography.bodySmall,
-                    color = colorScheme.onSurfaceVariant
+                    color = colorScheme.onSurfaceVariant,
+                    modifier = Modifier.padding(horizontal = 16.dp)
                 )
             }
             item {
@@ -313,8 +335,49 @@ fun SharedTransitionScope.LastYearScreen(
                     data = focusHeatmapData,
                     maxValue = heatmapMaxValue,
                     contentPadding = PaddingValues(horizontal = 16.dp),
+                    modifier = Modifier.padding(start = 16.dp)
                 )
             }
+            item { // Heatmap guide
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.Center,
+                    modifier = Modifier.fillMaxWidth()
+                ) {
+                    Text(
+                        "Less",
+                        color = colorScheme.onSurfaceVariant,
+                        style = typography.labelMedium
+                    )
+                    Spacer(Modifier.width(8.dp))
+                    Row(
+                        horizontalArrangement = Arrangement.spacedBy(HEATMAP_CELL_GAP),
+                        modifier = Modifier.clip(shapes.small)
+                    ) {
+                        Spacer(
+                            Modifier
+                                .size(HEATMAP_CELL_SIZE)
+                                .background(colorScheme.surfaceVariant, shapes.extraSmall)
+                        )
+                        (4..10 step 3).forEach {
+                            Spacer(
+                                Modifier
+                                    .size(HEATMAP_CELL_SIZE)
+                                    .background(
+                                        colorScheme.primary.copy(it.toFloat() / 10f),
+                                        shapes.extraSmall
+                                    )
+                            )
+                        }
+                    }
+                    Spacer(Modifier.width(8.dp))
+                    Text(
+                        "More",
+                        color = colorScheme.onSurfaceVariant,
+                        style = typography.labelMedium
+                    )
+                }
+            }
         }
     }
 }