feat: simplify highlight implementation in UI components for improved readability and maintainability

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/AutocompleteTextField.kt

@@ -269,21 +269,7 @@ fun <T> AutocompleteTextField(
                         BorderStroke(resolvedBorder.width, resolvedBorder.color),
                         fieldState.shape
                     )
-                    .drawWithCache {
+                    .highlight(fieldState.highlight)
-                        val highlightBrush = Brush.verticalGradient(
-                            colors = listOf(fieldState.highlight, Color.Transparent),
-                            startY = 0f,
-                            endY = size.height * 0.5f,
-                        )
-                        onDrawWithContent {
-                            drawContent()
-                            drawRect(
-                                brush = highlightBrush,
-                                topLeft = androidx.compose.ui.geometry.Offset.Zero,
-                                size = size,
-                            )
-                        }
-                    }
                     .padding(resolvedTextFieldTheme.padding),
             ) {
                 Row(

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Buttons.kt

@@ -89,9 +89,29 @@ private fun resolveButtonState(
     isHovered: Boolean,
 ): ResolvedButtonState {
     return when {
-        isPressed -> ResolvedButtonState(style.colors.pressed, style.shape.pressed, style.shadow.pressed, style.border.pressed, style.padding.pressed)
+        isPressed -> ResolvedButtonState(
-        isHovered -> ResolvedButtonState(style.colors.hovered, style.shape.hovered, style.shadow.hovered, style.border.hovered, style.padding.hovered)
+            style.colors.pressed,
-        else -> ResolvedButtonState(style.colors.focused, style.shape.focused, style.shadow.focused, style.border.focused, style.padding.focused)
+            style.shape.pressed,
+            style.shadow.pressed,
+            style.border.pressed,
+            style.padding.pressed
+        )
+
+        isHovered -> ResolvedButtonState(
+            style.colors.hovered,
+            style.shape.hovered,
+            style.shadow.hovered,
+            style.border.hovered,
+            style.padding.hovered
+        )
+
+        else -> ResolvedButtonState(
+            style.colors.focused,
+            style.shape.focused,
+            style.shadow.focused,
+            style.border.focused,
+            style.padding.focused
+        )
     }
 }
 
@@ -134,11 +154,17 @@ fun OutlineButton(
             .hoverable(interactionSource = interactionSource, enabled = enabled)
             .graphicsLayer { translationY = lift.toPx() }
             .then(
-                if (hoverOnly && !isHovered) Modifier else Modifier.applyShadow(state.shadow, state.shape)
+                if (hoverOnly && !isHovered) Modifier else Modifier.applyShadow(
+                    state.shadow,
+                    state.shape
+                )
             )
             .clip(state.shape)
             .then(
-                if (hoverOnly && !isHovered) Modifier else Modifier.background(state.colors.background, state.shape)
+                if (hoverOnly && !isHovered) Modifier else Modifier.background(
+                    state.colors.background,
+                    state.shape
+                )
                     .border(BorderStroke(state.border.width, state.border.color), state.shape)
             )
             .clickable(
@@ -147,21 +173,7 @@ fun OutlineButton(
                 indication = ripple(),
                 onClick = onClick,
             )
-            .then(if (hoverOnly && !isHovered) Modifier else Modifier.drawWithCache {
+            .then(if (hoverOnly && !isHovered) Modifier else Modifier.highlight(state.colors.highlight))
-                val highlightBrush = Brush.verticalGradient(
-                    colors = listOf(state.colors.highlight, Color.Transparent),
-                    startY = 0f,
-                    endY = size.height * 0.5f,
-                )
-                onDrawWithContent {
-                    drawContent()
-                    drawRect(
-                        brush = highlightBrush,
-                        topLeft = androidx.compose.ui.geometry.Offset.Zero,
-                        size = size,
-                    )
-                }
-            })
             .padding(state.padding),
         contentAlignment = Alignment.Center,
     ) {
@@ -208,21 +220,7 @@ fun PrimaryButton(
                 indication = ripple(),
                 onClick = onClick,
             )
-            .drawWithCache {
+            .highlight(state.colors.highlight)
-                val highlightBrush = Brush.verticalGradient(
-                    colors = listOf(state.colors.highlight, Color.Transparent),
-                    startY = 0f,
-                    endY = size.height * 0.5f,
-                )
-                onDrawWithContent {
-                    drawContent()
-                    drawRect(
-                        brush = highlightBrush,
-                        topLeft = androidx.compose.ui.geometry.Offset.Zero,
-                        size = size,
-                    )
-                }
-            }
             .padding(state.padding),
         contentAlignment = Alignment.Center,
     ) {
@@ -267,21 +265,7 @@ fun SecondaryButton(
                 indication = ripple(),
                 onClick = onClick,
             )
-            .drawWithCache {
+            .highlight(state.colors.highlight)
-                val highlightBrush = Brush.verticalGradient(
-                    colors = listOf(state.colors.highlight, Color.Transparent),
-                    startY = 0f,
-                    endY = size.height * 0.5f,
-                )
-                onDrawWithContent {
-                    drawContent()
-                    drawRect(
-                        brush = highlightBrush,
-                        topLeft = androidx.compose.ui.geometry.Offset.Zero,
-                        size = size,
-                    )
-                }
-            }
             .padding(state.padding),
         contentAlignment = Alignment.Center,
     ) {

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/CheckBox.kt

@@ -145,21 +145,7 @@ fun CheckBox(
             .clip(resolved.shape)
             .background(resolved.colors.background, resolved.shape)
             .border(BorderStroke(0.5.dp, borderColor), resolved.shape)
-            .drawWithCache {
+            .highlight(resolved.colors.highlight)
-                val highlightBrush = Brush.verticalGradient(
-                    colors = listOf(resolved.colors.highlight, Color.Transparent),
-                    startY = 0f,
-                    endY = size.height * 0.5f,
-                )
-                onDrawWithContent {
-                    drawContent()
-                    drawRect(
-                        brush = highlightBrush,
-                        topLeft = Offset.Zero,
-                        size = size,
-                    )
-                }
-            }
             .then(
                 if (onClick != null) {
                     Modifier

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/ChipTabs.kt

@@ -121,21 +121,7 @@ fun ChipTab(
                 indication = ripple(),
                 onClick = onClick,
             )
-            .drawWithCache {
+            .highlight(state.colors.highlight)
-                val highlightBrush = Brush.verticalGradient(
-                    colors = listOf(state.colors.highlight, Color.Transparent),
-                    startY = 0f,
-                    endY = size.height * 0.5f,
-                )
-                onDrawWithContent {
-                    drawContent()
-                    drawRect(
-                        brush = highlightBrush,
-                        topLeft = androidx.compose.ui.geometry.Offset.Zero,
-                        size = size,
-                    )
-                }
-            }
             .padding(state.padding),
         contentAlignment = Alignment.Center,
     ) {

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/TextField.kt

@@ -152,21 +152,7 @@ fun TextField(
                 .clip(state.shape)
                 .background(state.background, state.shape)
                 .border(BorderStroke(resolvedBorder.width, resolvedBorder.color), state.shape)
-                .drawWithCache {
+                .highlight(state.highlight)
-                    val highlightBrush = Brush.verticalGradient(
-                        colors = listOf(state.highlight, Color.Transparent),
-                        startY = 0f,
-                        endY = size.height * 0.5f,
-                    )
-                    onDrawWithContent {
-                        drawContent()
-                        drawRect(
-                            brush = highlightBrush,
-                            topLeft = androidx.compose.ui.geometry.Offset.Zero,
-                            size = size,
-                        )
-                    }
-                }
                 .padding(textFieldTheme.padding),
         ) {
             Row(

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Theme.kt

@@ -23,6 +23,8 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithCache
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
@@ -651,15 +653,30 @@ fun rememberBaseUITheme(): BaseUITheme {
             shape = RoundedCornerShape(16.dp),
             border = BaseUITheme.Border(border, 0.5.dp),
             padding = PaddingValues(0.dp),
-            shadow = BaseUITheme.Shadow(6.dp, true, shadowColor.copy(alpha = 0.15f), shadowColor.copy(alpha = 0.18f)),
+            shadow = BaseUITheme.Shadow(
+                6.dp,
+                true,
+                shadowColor.copy(alpha = 0.15f),
+                shadowColor.copy(alpha = 0.18f)
+            ),
         ),
         listRowTile = BaseUITheme.ListRowTheme(
             background = BaseUITheme.AdvancedInteractionState(
                 hovered = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
                 pressed = Brush.verticalGradient(listOf(containerPressed, containerPressed)),
                 focused = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
-                selected = Brush.verticalGradient(listOf(scheme.primaryContainer.copy(alpha = 0.3f), scheme.primaryContainer.copy(alpha = 0.3f))),
+                selected = Brush.verticalGradient(
-                disabled = Brush.verticalGradient(listOf(containerLighter.copy(alpha = 0.5f), containerDarker.copy(alpha = 0.5f))),
+                    listOf(
+                        scheme.primaryContainer.copy(alpha = 0.3f),
+                        scheme.primaryContainer.copy(alpha = 0.3f)
+                    )
+                ),
+                disabled = Brush.verticalGradient(
+                    listOf(
+                        containerLighter.copy(alpha = 0.5f),
+                        containerDarker.copy(alpha = 0.5f)
+                    )
+                ),
             ),
             shape = BaseUITheme.AdvancedInteractionState(
                 hovered = RoundedCornerShape(8.dp),
@@ -730,7 +747,12 @@ fun invertedButtonStyle(): BaseUITheme.ButtonStyle {
         highlight = if (isLight) Color.White.copy(alpha = 0.15f) else Color.White.copy(alpha = 0.08f),
     )
     val pressedColors = BaseUITheme.ButtonColors(
-        background = Brush.verticalGradient(listOf(scheme.onSurfaceVariant, scheme.onSurfaceVariant)),
+        background = Brush.verticalGradient(
+            listOf(
+                scheme.onSurfaceVariant,
+                scheme.onSurfaceVariant
+            )
+        ),
         foreground = scheme.surface,
         highlight = if (isLight) Color.White.copy(alpha = 0.1f) else Color.White.copy(alpha = 0.05f),
     )

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Utils.kt

@@ -0,0 +1,23 @@
+package dev.krtirtho.spotube.core.ui.base
+
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithCache
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+
+fun Modifier.highlight(color: Color): Modifier =
+    drawWithCache {
+        val highlightBrush = Brush.verticalGradient(
+            colors = listOf(color, Color.Transparent),
+            startY = 0f,
+            endY = size.height * 0.5f,
+        )
+        onDrawWithContent {
+            drawContent()
+            drawRect(
+                brush = highlightBrush,
+                topLeft = androidx.compose.ui.geometry.Offset.Zero,
+                size = size,
+            )
+        }
+    }

composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/TrackList.kt

@@ -91,6 +91,7 @@ import dev.krtirtho.spotube.core.ui.base.GhostIconButton
 import dev.krtirtho.spotube.core.ui.base.GroupIconButton
 import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
 import dev.krtirtho.spotube.core.ui.base.TextField
+import dev.krtirtho.spotube.core.ui.base.highlight
 import dev.krtirtho.spotube.core.ui.misc.SkeletonTree
 import dev.krtirtho.spotube.core.ui.misc.TextWithShimmer
 import dev.krtirtho.spotube.core.ui.misc.shimmerApply
@@ -539,23 +540,13 @@ private fun TrackListRow(
                 onLongClick = onLongClick,
             )
             .background(rowBackgroundColor)
-            .drawWithCache {
+            .then(
-                val highlightBrush = Brush.verticalGradient(
+                if (isRowHovered || isSelected || (isCurrentTrack && isCurrentTrackPlaying)) {
-                    colors = listOf(highlightColor, Color.Transparent),
+                    Modifier.highlight(highlightColor)
-                    startY = 0f,
+                } else {
-                    endY = size.height * 0.5f,
+                    Modifier
-                )
-                onDrawWithContent {
-                    drawContent()
-                    if (isRowHovered || isSelected || (isCurrentTrack && isCurrentTrackPlaying)) {
-                        drawRect(
-                            brush = highlightBrush,
-                            topLeft = Offset.Zero,
-                            size = size,
-                        )
-                    }
                 }
-            }
+            )
             .clip(MaterialTheme.shapes.small)
             .padding(horizontal = 8.dp, vertical = 6.dp)
             .padding(end = 6.dp),