New year cleanup

- Add clear cache button to image cache settings (closes #723)
- Update Gradle dependencies
- Improve spacing (more consistent)
- Add list view to playlist tab
- Hide built-in playlists in the home screen when their tab is hidden in the built-in playlist screen (closes #668)
- Improve sliders (coloring, ticks)
- Animate determinate progress indicators
- Improve settings typography

app/build.gradle.kts

@@ -103,7 +103,6 @@ ksp {
 
 composeCompiler {
     featureFlags = setOf(
-        ComposeFeatureFlag.StrongSkipping,
         ComposeFeatureFlag.OptimizeNonSkippingGroups
     )
 

app/src/main/kotlin/app/vitune/android/MainApplication.kt

@@ -27,6 +27,7 @@ import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.add
 import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.displayCutout
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.ime
@@ -211,9 +212,7 @@ class MainActivity : ComponentActivity(), MonetColorsChangedListener {
         SystemBarAppearance(palette = appearance.colorPalette)
 
         BoxWithConstraints(
-            modifier = modifier
-                .fillMaxSize()
-                .background(appearance.colorPalette.background0)
+            modifier = Modifier.background(appearance.colorPalette.background0) then modifier.fillMaxSize()
         ) {
             CompositionLocalProvider(
                 LocalAppearance provides appearance,
@@ -234,10 +233,18 @@ class MainActivity : ComponentActivity(), MonetColorsChangedListener {
     @Suppress("CyclomaticComplexMethod")
     @OptIn(ExperimentalLayoutApi::class)
     fun setContent() = setContent {
-        AppWrapper {
+        val windowInsets = WindowInsets.systemBars
+
+        AppWrapper(
+            modifier = Modifier.padding(
+                WindowInsets
+                    .displayCutout
+                    .only(WindowInsetsSides.Horizontal)
+                    .asPaddingValues()
+            )
+        ) {
             val density = LocalDensity.current
-            val windowsInsets = WindowInsets.systemBars
-            val bottomDp = with(density) { windowsInsets.getBottom(density).toDp() }
+            val bottomDp = with(density) { windowInsets.getBottom(density).toDp() }
 
             val imeVisible = WindowInsets.isImeVisible
             val imeBottomDp = with(density) { WindowInsets.ime.getBottom(density).toDp() }
@@ -266,7 +273,7 @@ class MainActivity : ComponentActivity(), MonetColorsChangedListener {
                         animatedBottomDp..playerBottomSheetState.collapsedBound
                     )
 
-                windowsInsets
+                windowInsets
                     .only(WindowInsetsSides.Horizontal + WindowInsetsSides.Top)
                     .add(WindowInsets(bottom = bottom))
             }

app/src/main/kotlin/app/vitune/android/preferences/UIStatePreferences.kt

@@ -17,6 +17,8 @@ object UIStatePreferences : GlobalPreferencesHolder() {
     var artistScreenTabIndexProperty = int(0)
     var artistScreenTabIndex by artistScreenTabIndexProperty
 
+    var playlistsAsGrid by boolean(true)
+
     private var visibleTabs by json(mapOf<String, List<String>>())
 
     @Composable

app/src/main/kotlin/app/vitune/android/ui/components/themed/Divider.kt

@@ -51,9 +51,7 @@ fun VerticalDivider(
     thickness: Dp = 1.dp,
     color: Color = LocalAppearance.current.colorPalette.textDisabled
 ) = Canvas(
-    modifier = modifier
-        .fillMaxHeight()
-        .width(thickness)
+    modifier = modifier.width(thickness)
 ) {
     val stroke = thickness.toPx()
 

app/src/main/kotlin/app/vitune/android/ui/components/themed/NavigationRail.kt

@@ -11,12 +11,14 @@ import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsetsSides
 import androidx.compose.foundation.layout.asPaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.only
@@ -45,6 +47,7 @@ import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.layout
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.util.fastForEachIndexed
 import app.vitune.android.LocalPlayerAwareWindowInsets
@@ -185,12 +188,12 @@ inline fun NavigationRail(
     hiddenTabs: ImmutableList<String>,
     crossinline setHiddenTabs: (List<String>) -> Unit,
     modifier: Modifier = Modifier,
+    tabsEditingTitle: String = stringResource(R.string.tabs),
     crossinline content: TabsBuilder.() -> Unit
 ) {
     val (colorPalette, typography) = LocalAppearance.current
 
     val tabs = TabsBuilder.rememberTabs(content)
-
     val isLandscape = isLandscape
 
     val paddingValues = LocalPlayerAwareWindowInsets.current
@@ -204,7 +207,7 @@ inline fun NavigationRail(
         horizontalPadding = 0.dp
     ) {
         BasicText(
-            text = stringResource(R.string.tabs),
+            text = tabsEditingTitle,
             style = typography.s.center.semiBold,
             modifier = Modifier.align(Alignment.CenterHorizontally)
         )
@@ -264,8 +267,11 @@ inline fun NavigationRail(
 
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
-            modifier = Modifier
-                .width(if (isLandscape) Dimensions.navigationRail.widthLandscape else Dimensions.navigationRail.width)
+            verticalArrangement = Arrangement.SpaceBetween,
+            modifier = Modifier.width(
+                if (isLandscape) Dimensions.navigationRail.widthLandscape
+                else Dimensions.navigationRail.width
+            )
         ) {
             val transition = updateTransition(targetState = tabIndex, label = null)
 
@@ -305,7 +311,9 @@ inline fun NavigationRail(
                             modifier = Modifier
                                 .vertical(enabled = !isLandscape)
                                 .rotate(if (isLandscape) 0f else -90f)
-                                .padding(horizontal = 16.dp)
+                                .padding(horizontal = 16.dp),
+                            overflow = TextOverflow.Ellipsis,
+                            maxLines = 2
                         )
                     }
 
@@ -318,7 +326,9 @@ inline fun NavigationRail(
 
                     if (isLandscape) Column(
                         horizontalAlignment = Alignment.CenterHorizontally,
-                        modifier = contentModifier.padding(vertical = 8.dp)
+                        modifier = contentModifier
+                            .padding(vertical = 8.dp)
+                            .fillMaxWidth()
                     ) {
                         iconContent()
                         textContent()

app/src/main/kotlin/app/vitune/android/ui/components/themed/ProgressIndicator.kt

@@ -1,7 +1,11 @@
 package app.vitune.android.ui.components.themed
 
+import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.material3.ProgressIndicatorDefaults
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.StrokeCap
 import app.vitune.core.ui.LocalAppearance
@@ -10,6 +14,7 @@ import app.vitune.core.ui.LocalAppearance
 fun CircularProgressIndicator(
     modifier: Modifier = Modifier,
     progress: Float? = null,
+    animateProgress: Boolean = progress != null,
     strokeCap: StrokeCap? = null
 ) {
     val (colorPalette) = LocalAppearance.current
@@ -18,18 +23,26 @@ fun CircularProgressIndicator(
         modifier = modifier,
         color = colorPalette.accent,
         strokeCap = strokeCap ?: ProgressIndicatorDefaults.CircularIndeterminateStrokeCap
-    ) else androidx.compose.material3.CircularProgressIndicator(
-        modifier = modifier,
-        color = colorPalette.accent,
-        strokeCap = strokeCap ?: ProgressIndicatorDefaults.CircularDeterminateStrokeCap,
-        progress = { progress }
-    )
+    ) else {
+        val animatedProgress by (
+                if (animateProgress) animateFloatAsState(targetValue = progress)
+                else remember { derivedStateOf { progress } }
+                )
+
+        androidx.compose.material3.CircularProgressIndicator(
+            modifier = modifier,
+            color = colorPalette.accent,
+            strokeCap = strokeCap ?: ProgressIndicatorDefaults.CircularDeterminateStrokeCap,
+            progress = { animatedProgress }
+        )
+    }
 }
 
 @Composable
 fun LinearProgressIndicator(
     modifier: Modifier = Modifier,
     progress: Float? = null,
+    animateProgress: Boolean = progress != null,
     strokeCap: StrokeCap = ProgressIndicatorDefaults.LinearStrokeCap
 ) {
     val (colorPalette) = LocalAppearance.current
@@ -39,11 +52,18 @@ fun LinearProgressIndicator(
         color = colorPalette.accent,
         trackColor = colorPalette.background1,
         strokeCap = strokeCap
-    ) else androidx.compose.material3.LinearProgressIndicator(
-        modifier = modifier,
-        color = colorPalette.accent,
-        trackColor = colorPalette.background1,
-        strokeCap = strokeCap,
-        progress = { progress }
-    )
+    ) else {
+        val animatedProgress by (
+                if (animateProgress) animateFloatAsState(targetValue = progress)
+                else remember { derivedStateOf { progress } }
+                )
+
+        androidx.compose.material3.LinearProgressIndicator(
+            modifier = modifier,
+            color = colorPalette.accent,
+            trackColor = colorPalette.background1,
+            strokeCap = strokeCap,
+            progress = { animatedProgress }
+        )
+    }
 }

app/src/main/kotlin/app/vitune/android/ui/components/themed/Scaffold.kt

@@ -15,7 +15,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.IntOffset
+import app.vitune.android.R
 import app.vitune.android.preferences.UIStatePreferences
 import app.vitune.core.ui.LocalAppearance
 import kotlinx.collections.immutable.toImmutableList
@@ -29,6 +31,7 @@ fun Scaffold(
     onTabChange: (Int) -> Unit,
     tabColumnContent: TabsBuilder.() -> Unit,
     modifier: Modifier = Modifier,
+    tabsEditingTitle: String = stringResource(R.string.tabs),
     content: @Composable AnimatedVisibilityScope.(Int) -> Unit
 ) {
     val (colorPalette) = LocalAppearance.current
@@ -46,6 +49,7 @@ fun Scaffold(
             onTabIndexChange = onTabChange,
             hiddenTabs = hiddenTabs,
             setHiddenTabs = { hiddenTabs = it.toImmutableList() },
+            tabsEditingTitle = tabsEditingTitle,
             content = tabColumnContent
         )
 

app/src/main/kotlin/app/vitune/android/ui/components/themed/Slider.kt

@@ -4,6 +4,7 @@ import androidx.annotation.IntRange
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import app.vitune.core.ui.LocalAppearance
 import app.vitune.core.ui.surface
 
@@ -14,7 +15,8 @@ fun Slider(
     onSlideComplete: () -> Unit,
     range: ClosedFloatingPointRange<Float>,
     modifier: Modifier = Modifier,
-    @IntRange(from = 0) steps: Int = 0
+    @IntRange(from = 0) steps: Int = 0,
+    showTicks: Boolean = steps != 0
 ) {
     val (colorPalette) = LocalAppearance.current
 
@@ -29,8 +31,8 @@ fun Slider(
             thumbColor = colorPalette.onAccent,
             activeTrackColor = colorPalette.accent,
             inactiveTrackColor = colorPalette.surface.copy(alpha = 0.75f),
-            activeTickColor = colorPalette.surface,
-            inactiveTickColor = colorPalette.accent
+            activeTickColor = if (showTicks) colorPalette.surface else Color.Transparent,
+            inactiveTickColor = if (showTicks) colorPalette.accent else Color.Transparent
         )
     )
 }

app/src/main/kotlin/app/vitune/android/ui/items/ItemContainer.kt

@@ -26,10 +26,7 @@ inline fun ItemContainer(
     horizontalAlignment = horizontalAlignment,
     verticalArrangement = Arrangement.spacedBy(12.dp),
     modifier = modifier
-        .padding(
-            vertical = Dimensions.items.verticalPadding,
-            horizontal = Dimensions.items.horizontalPadding
-        )
+        .padding(Dimensions.items.alternativePadding)
         .width(thumbnailSize)
 ) { content(Modifier.align(Alignment.CenterHorizontally)) }
 else Row(

app/src/main/kotlin/app/vitune/android/ui/items/PlaylistItem.kt

@@ -6,10 +6,13 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredSize
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.text.BasicText
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
@@ -114,7 +117,7 @@ fun PlaylistItem(
                         contentScale = ContentScale.Crop,
                         modifier = Modifier
                             .align(alignment)
-                            .size(thumbnailSize / 2)
+                            .fillMaxSize(.5f)
                     )
                 }
             }
@@ -182,15 +185,29 @@ fun PlaylistItem(
 ) = ItemContainer(
     alternative = alternative,
     thumbnailSize = thumbnailSize,
-    modifier = Modifier.clip(LocalAppearance.current.thumbnailShape) then modifier
+    modifier = Modifier.clip(
+        (
+                LocalAppearance.current.thumbnailShapeCorners +
+                        if (alternative) Dimensions.items.alternativePadding else 0.dp
+                ).roundedShape
+    ) then modifier
 ) { centeredModifier ->
     val (colorPalette, typography, thumbnailShapeCorners) = LocalAppearance.current
 
     Box(
         modifier = centeredModifier
             .clip(thumbnailShapeCorners.roundedShape)
             .background(color = colorPalette.background1)
-            .requiredSize(thumbnailSize)
+            .let {
+                if (alternative) it
+                    .sizeIn(
+                        minWidth = thumbnailSize,
+                        minHeight = thumbnailSize
+                    )
+                    .fillMaxWidth()
+                    .aspectRatio(1f)
+                else it.requiredSize(thumbnailSize)
+            }
     ) {
         thumbnailContent(Modifier.fillMaxSize())