Rework song UI

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

@@ -276,6 +276,17 @@ fun LocalPlaylistScreen(
                                 song = song
                             )
                         },
+                        trailingContent = {
+                            Image(
+                                painter = painterResource(R.drawable.reorder),
+                                contentDescription = null,
+                                colorFilter = ColorFilter.tint(colorPalette.textSecondary),
+                                modifier = Modifier
+                                    .clickable {}
+                                    .padding(horizontal = 8.dp, vertical = 4.dp)
+                                    .size(20.dp)
+                            )
+                        },
                         modifier = Modifier
                             .verticalDragAfterLongPressToReorder(
                                 reorderingState = reorderingState,

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/CurrentPlaylistView.kt

@@ -6,6 +6,7 @@ import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
@@ -138,6 +139,17 @@ fun CurrentPlaylistView(
                         }
                     }
                 },
+                trailingContent = {
+                    Image(
+                        painter = painterResource(R.drawable.reorder),
+                        contentDescription = null,
+                        colorFilter = ColorFilter.tint(colorPalette.textSecondary),
+                        modifier = Modifier
+                            .clickable {}
+                            .padding(horizontal = 8.dp, vertical = 4.dp)
+                            .size(20.dp)
+                    )
+                },
                 backgroundColor = colorPalette.elevatedBackground,
                 modifier = Modifier
                     .verticalDragAfterLongPressToReorder(

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/views/PlayerView.kt

@@ -95,7 +95,7 @@ fun PlayerView(
         collapsedContent = {
             if (!layoutState.isExpanded) {
                 Row(
-                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                    horizontalArrangement = Arrangement.spacedBy(12.dp),
                     verticalAlignment = Alignment.CenterVertically,
                     modifier = Modifier
                         .height(layoutState.lowerBound)

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

@@ -1,9 +1,9 @@
 package it.vfsfitvnm.vimusic.ui.views
 
 import androidx.compose.animation.ExperimentalAnimationApi
-import androidx.compose.foundation.Image
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.text.BasicText
@@ -15,16 +15,13 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.media3.common.MediaItem
 import coil.compose.AsyncImage
 import coil.request.ImageRequest
-import it.vfsfitvnm.vimusic.R
 import it.vfsfitvnm.vimusic.enums.ThumbnailRoundness
 import it.vfsfitvnm.vimusic.models.DetailedSong
 import it.vfsfitvnm.vimusic.ui.components.LocalMenuState
@@ -46,6 +43,7 @@ fun SongItem(
     modifier: Modifier = Modifier,
     backgroundColor: Color? = null,
     onThumbnailContent: (@Composable BoxScope.() -> Unit)? = null,
+    trailingContent: (@Composable () -> Unit)? = null
 ) {
     SongItem(
         thumbnailModel = ImageRequest.Builder(LocalContext.current)
@@ -58,6 +56,7 @@ fun SongItem(
         menuContent = menuContent,
         onClick = onClick,
         onThumbnailContent = onThumbnailContent,
+        trailingContent = trailingContent,
         backgroundColor = backgroundColor,
         modifier = modifier,
     )
@@ -74,6 +73,7 @@ fun SongItem(
     modifier: Modifier = Modifier,
     backgroundColor: Color? = null,
     onThumbnailContent: (@Composable BoxScope.() -> Unit)? = null,
+    trailingContent: (@Composable () -> Unit)? = null
 ) {
     SongItem(
         thumbnailModel = song.song.thumbnailUrl?.thumbnail(thumbnailSize),
@@ -84,6 +84,7 @@ fun SongItem(
         onClick = onClick,
         onThumbnailContent = onThumbnailContent,
         backgroundColor = backgroundColor,
+        trailingContent = trailingContent,
         modifier = modifier,
     )
 }
@@ -102,6 +103,7 @@ fun SongItem(
     modifier: Modifier = Modifier,
     backgroundColor: Color? = null,
     onThumbnailContent: (@Composable BoxScope.() -> Unit)? = null,
+    trailingContent: (@Composable () -> Unit)? = null
 ) {
     SongItem(
         title = title,
@@ -127,10 +129,12 @@ fun SongItem(
         },
         menuContent = menuContent,
         backgroundColor = backgroundColor,
+        trailingContent = trailingContent,
         modifier = modifier,
     )
 }
 
+@OptIn(ExperimentalFoundationApi::class)
 @ExperimentalAnimationApi
 @Composable
 fun SongItem(
@@ -142,6 +146,7 @@ fun SongItem(
     menuContent: @Composable () -> Unit,
     modifier: Modifier = Modifier,
     backgroundColor: Color? = null,
+    trailingContent: (@Composable () -> Unit)? = null
 ) {
     val menuState = LocalMenuState.current
     val colorPalette = LocalColorPalette.current
@@ -149,17 +154,20 @@ fun SongItem(
 
     Row(
         verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(8.dp),
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
         modifier = modifier
-            .clickable(
+            .combinedClickable(
                 indication = rememberRipple(bounded = true),
                 interactionSource = remember { MutableInteractionSource() },
+                onLongClick = {
+                    menuState.display(menuContent)
+                },
                 onClick = onClick
             )
             .fillMaxWidth()
-            .padding(vertical = 4.dp)
+            .padding(vertical = 5.dp)
             .background(backgroundColor ?: colorPalette.background)
-            .padding(start = 16.dp, end = 8.dp)
+            .padding(start = 16.dp, end = if (trailingContent == null) 16.dp else 8.dp)
     ) {
         startContent()
 
@@ -174,29 +182,22 @@ fun SongItem(
                 overflow = TextOverflow.Ellipsis,
             )
             BasicText(
-                text = buildString {
+                text = authors ?: "",
-                    append(authors)
-                    if (authors?.isNotEmpty() == true && durationText != null) {
-                        append(" • ")
-                    }
-                    append(durationText)
-                },
                 style = typography.xs.semiBold.secondary,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
             )
         }
 
-        Image(
+        durationText?.let {
-            painter = painterResource(R.drawable.ellipsis_vertical),
+            BasicText(
-            contentDescription = null,
+                text = durationText,
-            colorFilter = ColorFilter.tint(colorPalette.textSecondary),
+                style = typography.xxs.secondary,
-            modifier = Modifier
+                maxLines = 1,
-                .clickable {
+                overflow = TextOverflow.Ellipsis,
-                    menuState.display(menuContent)
-                }
-                .padding(horizontal = 8.dp, vertical = 4.dp)
-                .size(20.dp)
             )
         }
+
+        trailingContent?.invoke()
+    }
 }

app/src/main/res/drawable/reorder.xml

@@ -0,0 +1,20 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="512dp"
+    android:height="512dp"
+    android:viewportWidth="512"
+    android:viewportHeight="512">
+  <path
+      android:pathData="M118,304L394,304"
+      android:strokeLineJoin="round"
+      android:strokeWidth="44"
+      android:fillColor="#00000000"
+      android:strokeColor="#000"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M118,208L394,208"
+      android:strokeLineJoin="round"
+      android:strokeWidth="44"
+      android:fillColor="#00000000"
+      android:strokeColor="#000"
+      android:strokeLineCap="round"/>
+</vector>