Find place for SongItem trailingIcon

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/themed/IconButton.kt

@@ -2,6 +2,7 @@ package it.vfsfitvnm.vimusic.ui.components.themed
 
 import androidx.annotation.DrawableRes
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.Indication
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.padding
@@ -21,13 +22,15 @@ fun HeaderIconButton(
     @DrawableRes icon: Int,
     color: Color,
     modifier: Modifier = Modifier,
-    enabled: Boolean = true
+    enabled: Boolean = true,
+    indication: Indication? = null
 ) {
     IconButton(
         icon = icon,
         color = color,
         onClick = onClick,
         enabled = enabled,
+        indication = indication,
         modifier = modifier
             .padding(all = 4.dp)
             .size(18.dp)
@@ -40,7 +43,8 @@ fun IconButton(
     @DrawableRes icon: Int,
     color: Color,
     modifier: Modifier = Modifier,
-    enabled: Boolean = true
+    enabled: Boolean = true,
+    indication: Indication? = null
 ) {
     Image(
         painter = painterResource(icon),
@@ -48,7 +52,7 @@ fun IconButton(
         colorFilter = ColorFilter.tint(color),
         modifier = Modifier
             .clickable(
-                indication = rememberRipple(bounded = false),
+                indication = indication ?: rememberRipple(bounded = false),
                 interactionSource = remember { MutableInteractionSource() },
                 enabled = enabled,
                 onClick = onClick

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/items/SongItem.kt

@@ -146,13 +146,27 @@ fun SongItem(
         }
 
         ItemInfoContainer {
-            BasicText(
+            trailingContent?.let {
+                Row(verticalAlignment = Alignment.CenterVertically) {
+                    BasicText(
+                        text = title ?: "",
+                        style = typography.xs.semiBold,
+                        maxLines = 1,
+                        overflow = TextOverflow.Clip,
+                        modifier = Modifier
+                            .weight(1f)
+                    )
+
+                    it()
+                }
+            } ?: BasicText(
                 text = title ?: "",
                 style = typography.xs.semiBold,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
             )
 
+
             Row(verticalAlignment = Alignment.CenterVertically) {
                 BasicText(
                     text = authors ?: "",

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/localplaylist/LocalPlaylistSongs.kt

@@ -2,25 +2,21 @@ package it.vfsfitvnm.vimusic.ui.screens.localplaylist
 
 import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.ColorFilter
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import it.vfsfitvnm.reordering.ReorderingLazyColumn
 import it.vfsfitvnm.reordering.animateItemPlacement
@@ -41,6 +37,7 @@ import it.vfsfitvnm.vimusic.ui.components.LocalMenuState
 import it.vfsfitvnm.vimusic.ui.components.themed.ConfirmationDialog
 import it.vfsfitvnm.vimusic.ui.components.themed.Header
 import it.vfsfitvnm.vimusic.ui.components.themed.HeaderIconButton
+import it.vfsfitvnm.vimusic.ui.components.themed.IconButton
 import it.vfsfitvnm.vimusic.ui.components.themed.InPlaylistMediaItemMenu
 import it.vfsfitvnm.vimusic.ui.components.themed.PrimaryButton
 import it.vfsfitvnm.vimusic.ui.components.themed.SecondaryTextButton
@@ -134,6 +131,8 @@ fun LocalPlaylistSongs(
     val thumbnailSizeDp = Dimensions.thumbnails.song
     val thumbnailSizePx = thumbnailSizeDp.px
 
+    val rippleIndication = rememberRipple(bounded = false)
+
     Box {
         ReorderingLazyColumn(
             reorderingState = reorderingState,
@@ -219,18 +218,14 @@ fun LocalPlaylistSongs(
                     thumbnailSizePx = thumbnailSizePx,
                     thumbnailSizeDp = thumbnailSizeDp,
                     trailingContent = {
-                        Image(
+                        IconButton(
-                            painter = painterResource(R.drawable.reorder),
+                            icon = R.drawable.reorder,
-                            contentDescription = null,
+                            color = colorPalette.textDisabled,
-                            colorFilter = ColorFilter.tint(colorPalette.textSecondary),
+                            indication = rippleIndication,
+                            onClick = {},
                             modifier = Modifier
-                                .clickable { }
+                                .reorder(reorderingState = reorderingState, index = index)
-                                .reorder(
+                                .size(18.dp)
-                                    reorderingState = reorderingState,
-                                    index = index
-                                )
-                                .padding(horizontal = 8.dp, vertical = 4.dp)
-                                .size(20.dp)
                         )
                     },
                     modifier = Modifier

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/player/PlayerBottomSheet.kt

@@ -27,6 +27,7 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicText
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
@@ -128,6 +129,8 @@ fun PlayerBottomSheet(
         val paddingValues = WindowInsets.systemBars.asPaddingValues()
         val bottomPadding = paddingValues.calculateBottomPadding()
 
+        val rippleIndication = rememberRipple(bounded = false)
+
         Column {
             ReorderingLazyColumn(
                 reorderingState = reorderingState,
@@ -190,18 +193,14 @@ fun PlayerBottomSheet(
                             }
                         },
                         trailingContent = {
-                            Image(
+                            IconButton(
-                                painter = painterResource(R.drawable.reorder),
+                                icon = R.drawable.reorder,
-                                contentDescription = null,
+                                color = colorPalette.textDisabled,
-                                colorFilter = ColorFilter.tint(colorPalette.textSecondary),
+                                indication = rippleIndication,
+                                onClick = {},
                                 modifier = Modifier
-                                    .clickable { }
+                                    .reorder(reorderingState = reorderingState, index = window.firstPeriodIndex)
-                                    .reorder(
+                                    .size(18.dp)
-                                        reorderingState = reorderingState,
-                                        index = window.firstPeriodIndex
-                                    )
-                                    .padding(horizontal = 8.dp, vertical = 4.dp)
-                                    .size(20.dp)
                             )
                         },
                         modifier = Modifier