Use Split Button on item details screen (#127)

seadowg · web-flow · commit 9d3ce617e857 · 2026-02-26T14:18:42.000-08:00
diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts
@@ -52,11 +52,10 @@ kotlin {
         commonMain.dependencies {
             implementation(compose.runtime)
             implementation(compose.foundation)
-            // implementation(compose.material)
-            implementation(compose.material3)
             implementation(compose.ui)
             implementation(compose.components.resources)
             implementation(compose.components.uiToolingPreview)
+            implementation(libs.material)
             implementation(libs.androidx.lifecycle.viewmodel)
             implementation(libs.androidx.lifecycle.runtime.compose)
             implementation(libs.androidx.navigation3.ui)
diff --git a/composeApp/src/commonMain/kotlin/io/music_assistant/client/ui/compose/common/OverflowMenu.kt b/composeApp/src/commonMain/kotlin/io/music_assistant/client/ui/compose/common/OverflowMenu.kt
@@ -20,8 +20,8 @@ import androidx.compose.ui.unit.dp
 @Composable
 fun OverflowMenu(
     modifier: Modifier = Modifier,
-    buttonContent: @Composable (onClick: () -> Unit) -> Unit,
     options: List<OverflowMenuOption>,
+    buttonContent: @Composable (onClick: () -> Unit) -> Unit,
 ) {
     var expanded by remember { mutableStateOf(false) }
     Box(
@@ -59,4 +59,4 @@ data class OverflowMenuOption(
     val title: String,
     val icon: ImageVector? = null,
     val onClick: () -> Unit
-)
+)
diff --git a/composeApp/src/commonMain/kotlin/io/music_assistant/client/ui/compose/home/CollapsibleQueue.kt b/composeApp/src/commonMain/kotlin/io/music_assistant/client/ui/compose/home/CollapsibleQueue.kt
@@ -109,12 +109,6 @@ fun CollapsibleQueue(
             ) {
                 // Transfer button
                 OverflowMenu(
-                    modifier = Modifier,
-                    buttonContent = {
-                        OutlinedButton(onClick = it) {
-                            Text("Transfer")
-                        }
-                    },
                     options = players.filter { p -> p.player.id != queueId }.map { playerData ->
                         OverflowMenuOption(
                             title = playerData.player.displayName,
@@ -137,6 +131,11 @@ fun CollapsibleQueue(
                                 onClick = { /* No-op */ }
                             )
                         )
+                    },
+                    buttonContent = {
+                        OutlinedButton(onClick = it) {
+                            Text("Transfer")
+                        }
                     }
                 )
 
@@ -411,4 +410,4 @@ fun CollapsibleQueue(
             }
         }
     }
-}
+}
diff --git a/composeApp/src/commonMain/kotlin/io/music_assistant/client/ui/compose/home/PlayersTopBar.kt b/composeApp/src/commonMain/kotlin/io/music_assistant/client/ui/compose/home/PlayersTopBar.kt
@@ -54,7 +54,15 @@ fun PlayersTopBar(
             )
 
             OverflowMenu(
-                modifier = Modifier,
+                options = playerDataList.map { data ->
+                    val isLocalPlayer = data.playerId == playersState.localPlayerId
+                    OverflowMenuOption(
+                        title = data.player.displayName + (if (isLocalPlayer) " (local)" else ""),
+                        icon = Icons.Filled.Speaker,
+                    ) {
+                        onMoveToPlayer(data.player.id)
+                    }
+                },
                 buttonContent = { onClick ->
                     IconButton(
                         modifier = Modifier.size(32.dp),
@@ -67,15 +75,6 @@ fun PlayersTopBar(
                             tint = MaterialTheme.colorScheme.primary,
                         )
                     }
-                },
-                options = playerDataList.map { data ->
-                    val isLocalPlayer = data.playerId == playersState.localPlayerId
-                    OverflowMenuOption(
-                        title = data.player.displayName + (if (isLocalPlayer) " (local)" else ""),
-                        icon = Icons.Filled.Speaker,
-                    ) {
-                        onMoveToPlayer(data.player.id)
-                    }
                 }
             )
         }
diff --git a/composeApp/src/commonMain/kotlin/io/music_assistant/client/ui/compose/item/ItemDetailsScreen.kt b/composeApp/src/commonMain/kotlin/io/music_assistant/client/ui/compose/item/ItemDetailsScreen.kt
@@ -15,13 +15,8 @@ import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ViewList
-import androidx.compose.material.icons.filled.GridView
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
@@ -238,10 +233,12 @@ private fun ItemChildren(
                         ItemHeader(
                             item = item,
                             serverUrl = serverUrl,
+                            isRowMode = isRowMode,
                             onBack = onBack,
                             onPlayClick = onPlayItemClick,
                             libraryAction = libraryActions,
-                            playlistActions = playlistActions
+                            playlistActions = playlistActions,
+                            onToggleViewMode = onToggleViewMode
                         )
                     }
 
@@ -251,11 +248,7 @@ private fun ItemChildren(
                             is DataState.Data -> {
                                 if (albumsState.data.isNotEmpty()) {
                                     item(span = { GridItemSpan(maxLineSpan) }) {
-                                        SectionHeader(
-                                            "Albums",
-                                            isRowMode = isRowMode,
-                                            onToggleViewMode = onToggleViewMode
-                                        )
+                                        SectionHeader("Albums")
                                     }
                                     items(
                                         albumsState.data,
@@ -297,11 +290,7 @@ private fun ItemChildren(
                         val chapters = item.chapters
                         if (!chapters.isNullOrEmpty()) {
                             item(span = { GridItemSpan(maxLineSpan) }) {
-                                SectionHeader(
-                                    "Chapters",
-                                    isRowMode = isRowMode,
-                                    onToggleViewMode = null
-                                )
+                                SectionHeader("Chapters",)
                             }
                             chapters.forEach { chapter ->
                                 item(span = { GridItemSpan(maxLineSpan) }) {
@@ -325,9 +314,7 @@ private fun ItemChildren(
                                         when (item) {
                                             is AppMediaItem.Podcast -> "Episodes"
                                             else -> "Tracks"
-                                        },
-                                        isRowMode = isRowMode,
-                                        onToggleViewMode = onToggleViewMode
+                                        }
                                     )
                                 }
                                 tracksState.data.forEachIndexed { index, track ->
@@ -404,24 +391,14 @@ private fun ItemChildren(
 }
 
 @Composable
-private fun SectionHeader(title: String, isRowMode: Boolean, onToggleViewMode: (() -> Unit)? = null) {
+private fun SectionHeader(title: String) {
     Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween) {
         Text(
             text = title,
             style = MaterialTheme.typography.titleMedium,
             modifier = Modifier.padding(horizontal = 8.dp, vertical = 8.dp)
         )
-
-        if (onToggleViewMode != null) {
-            IconButton(onClick = onToggleViewMode) {
-                Icon(
-                    imageVector = if (isRowMode) Icons.Default.GridView else Icons.AutoMirrored.Filled.ViewList,
-                    contentDescription = "Toggle view mode"
-                )
-            }
-        }
     }
-
 }
 
 @Composable
diff --git a/composeApp/src/commonMain/kotlin/io/music_assistant/client/ui/compose/item/ItemHeader.kt b/composeApp/src/commonMain/kotlin/io/music_assistant/client/ui/compose/item/ItemHeader.kt
@@ -1,6 +1,6 @@
 package io.music_assistant.client.ui.compose.item
 
-import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -12,18 +12,24 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.automirrored.filled.PlaylistAdd
+import androidx.compose.material.icons.automirrored.filled.ViewList
 import androidx.compose.material.icons.filled.AddToQueue
 import androidx.compose.material.icons.filled.ExpandMore
+import androidx.compose.material.icons.filled.GridView
+import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.material.icons.filled.PlayArrow
 import androidx.compose.material.icons.filled.PlaylistAddCircle
 import androidx.compose.material.icons.filled.QueuePlayNext
 import androidx.compose.material.icons.filled.Radio
 import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Button
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SplitButtonDefaults.LeadingButton
+import androidx.compose.material3.SplitButtonDefaults.TrailingButton
+import androidx.compose.material3.SplitButtonLayout
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
@@ -56,18 +62,41 @@ import io.music_assistant.client.ui.compose.common.viewmodel.ActionsViewModel
 import kotlinx.coroutines.launch
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
+@OptIn(ExperimentalMaterial3ExpressiveApi::class)
 @Composable
 fun ItemHeader(
     item: AppMediaItem,
     serverUrl: String? = null,
+    isRowMode: Boolean = true,
     onBack: () -> Unit = {},
     onPlayClick: (QueueOption, Boolean) -> Unit = { _, _ -> },
     libraryAction: ActionsViewModel.LibraryActions? = null,
-    playlistActions: ActionsViewModel.PlaylistActions? = null
+    playlistActions: ActionsViewModel.PlaylistActions? = null,
+    onToggleViewMode: () -> Unit = {}
 ) {
     Column(modifier = Modifier.fillMaxWidth()) {
-        IconButton(onClick = onBack) {
-            Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back")
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            IconButton(onClick = onBack) {
+                Icon(Icons.AutoMirrored.Filled.ArrowBack, "Back")
+            }
+
+            OverflowMenu(
+                options = listOf(
+                    OverflowMenuOption(
+                        title = "Toggle view mode",
+                        icon = if (isRowMode) Icons.Default.GridView else Icons.AutoMirrored.Filled.ViewList,
+                        onClick = onToggleViewMode
+                    )
+                )
+            ) { onClick ->
+                IconButton(onClick = onClick) {
+                    Icon(imageVector = Icons.Default.MoreVert, null)
+                }
+            }
         }
 
         Column(
@@ -111,21 +140,37 @@ fun ItemHeader(
                 verticalAlignment = Alignment.CenterVertically,
                 modifier = Modifier.padding(top = 16.dp)
             ) {
-                Button(
-                    modifier = Modifier.semantics { contentDescription = "Play now" },
-                    onClick = { onPlayClick(QueueOption.REPLACE, false) }) {
-                    Row(verticalAlignment = Alignment.CenterVertically) {
-                        Icon(imageVector = Icons.Default.PlayArrow, contentDescription = null)
-                        Text(modifier = Modifier.padding(start = 8.dp), text = "Play")
+                SplitButtonLayout(
+                    leadingButton = {
+                        LeadingButton(
+                            modifier = Modifier.semantics { contentDescription = "Play now" },
+                            onClick = { onPlayClick(QueueOption.REPLACE, false) }) {
+                            Row(verticalAlignment = Alignment.CenterVertically) {
+                                Icon(
+                                    imageVector = Icons.Default.PlayArrow,
+                                    contentDescription = null
+                                )
+                                Text(modifier = Modifier.padding(start = 8.dp), text = "Play")
+                            }
+                        }
+                    },
+                    trailingButton = {
+                        ItemOverflowMenu(
+                            item = item,
+                            onPlayClick = onPlayClick,
+                            libraryActions = libraryAction,
+                            playlistActions = playlistActions
+                        ) { onClick ->
+                            TrailingButton(
+                                onClick = onClick
+                            ) {
+                                Icon(
+                                    imageVector = Icons.Default.ExpandMore,
+                                    contentDescription = null
+                                )
+                            }
+                        }
                     }
-                }
-
-                ItemOverflowMenu(
-                    item = item,
-                    modifier = Modifier.padding(start = 4.dp),
-                    onPlayClick = onPlayClick,
-                    libraryActions = libraryAction,
-                    playlistActions = playlistActions
                 )
             }
         }
@@ -135,25 +180,17 @@ fun ItemHeader(
 @Composable
 private fun ItemOverflowMenu(
     item: AppMediaItem,
-    modifier: Modifier,
     onPlayClick: (QueueOption, Boolean) -> Unit,
     libraryActions: ActionsViewModel.LibraryActions?,
-    playlistActions: ActionsViewModel.PlaylistActions?
+    playlistActions: ActionsViewModel.PlaylistActions?,
+    button: @Composable (() -> Unit) -> Unit
 ) {
     val coroutineScope = rememberCoroutineScope()
     var showPlaylistDialog by rememberSaveable { mutableStateOf(false) }
     var playlists by remember { mutableStateOf<List<AppMediaItem.Playlist>>(emptyList()) }
     var isLoadingPlaylists by remember { mutableStateOf(false) }
 
     OverflowMenu(
-        modifier = modifier,
-        buttonContent = { onClick ->
-            Icon(
-                modifier = Modifier.clickable { onClick() },
-                imageVector = Icons.Default.ExpandMore,
-                contentDescription = null
-            )
-        },
         options = buildList {
             add(
                 OverflowMenuOption(
@@ -221,7 +258,8 @@ private fun ItemOverflowMenu(
                         }
                     })
             }
-        }
+        },
+        buttonContent = button
     )
 
     if (showPlaylistDialog) {
@@ -279,7 +317,7 @@ private fun ItemOverflowMenu(
 @Preview
 @Composable
 private fun Preview(item: AppMediaItem.Album = AppMediaItemFixtures.album()) {
-    ItemHeader(item)
+    ItemHeader(item,)
 }
 
 @Preview
diff --git a/composeApp/src/commonMain/kotlin/io/music_assistant/client/ui/compose/settings/SettingsScreen.kt b/composeApp/src/commonMain/kotlin/io/music_assistant/client/ui/compose/settings/SettingsScreen.kt
@@ -795,7 +795,11 @@ private fun SendspinSection(
             }
 
             OverflowMenu(
-                modifier = Modifier,
+                options = Codecs.list.map { item ->
+                    OverflowMenuOption(
+                        title = item.uiTitle()
+                    ) { viewModel.setSendspinCodecPreference(item) }
+                },
                 buttonContent = { onClick ->
                     Icon(
                         modifier = Modifier
@@ -808,11 +812,6 @@ private fun SendspinSection(
                         else
                             MaterialTheme.colorScheme.onSurfaceVariant
                     )
-                },
-                options = Codecs.list.map { item ->
-                    OverflowMenuOption(
-                        title = item.uiTitle()
-                    ) { viewModel.setSendspinCodecPreference(item) }
                 }
             )
         }
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml

Original file line number	Diff line number	Diff line change
`@@ -109,12 +109,6 @@ fun CollapsibleQueue(`
`109`	`109`	`) {`
`110`	`110`	`// Transfer button`
`111`	`111`	`OverflowMenu(`
`112`		`- modifier = Modifier,`
`113`		`- buttonContent = {`
`114`		`- OutlinedButton(onClick = it) {`
`115`		`- Text("Transfer")`
`116`		`- }`
`117`		`- },`
`118`	`112`	`options = players.filter { p -> p.player.id != queueId }.map { playerData ->`
`119`	`113`	`OverflowMenuOption(`
`120`	`114`	`title = playerData.player.displayName,`
`@@ -137,6 +131,11 @@ fun CollapsibleQueue(`
`137`	`131`	`onClick = { /* No-op */ }`
`138`	`132`	`)`
`139`	`133`	`)`
	`134`	`+ },`
	`135`	`+ buttonContent = {`
	`136`	`+ OutlinedButton(onClick = it) {`
	`137`	`+ Text("Transfer")`
	`138`	`+ }`
`140`	`139`	`}`
`141`	`140`	`)`
`142`	`141`
`@@ -411,4 +410,4 @@ fun CollapsibleQueue(`
`411`	`410`	`}`
`412`	`411`	`}`
`413`	`412`	`}`
`414`		`-}`
	`413`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,15 @@ fun PlayersTopBar(`
`54`	`54`	`)`
`55`	`55`
`56`	`56`	`OverflowMenu(`
`57`		`- modifier = Modifier,`
	`57`	`+ options = playerDataList.map { data ->`
	`58`	`+ val isLocalPlayer = data.playerId == playersState.localPlayerId`
	`59`	`+ OverflowMenuOption(`
	`60`	`+ title = data.player.displayName + (if (isLocalPlayer) " (local)" else ""),`
	`61`	`+ icon = Icons.Filled.Speaker,`
	`62`	`+ ) {`
	`63`	`+ onMoveToPlayer(data.player.id)`
	`64`	`+ }`
	`65`	`+ },`
`58`	`66`	`buttonContent = { onClick ->`
`59`	`67`	`IconButton(`
`60`	`68`	`modifier = Modifier.size(32.dp),`
`@@ -67,15 +75,6 @@ fun PlayersTopBar(`
`67`	`75`	`tint = MaterialTheme.colorScheme.primary,`
`68`	`76`	`)`
`69`	`77`	`}`
`70`		`- },`
`71`		`- options = playerDataList.map { data ->`
`72`		`- val isLocalPlayer = data.playerId == playersState.localPlayerId`
`73`		`- OverflowMenuOption(`
`74`		`- title = data.player.displayName + (if (isLocalPlayer) " (local)" else ""),`
`75`		`- icon = Icons.Filled.Speaker,`
`76`		`- ) {`
`77`		`- onMoveToPlayer(data.player.id)`
`78`		`- }`
`79`	`78`	`}`
`80`	`79`	`)`
`81`	`80`	`}`
Original file line number	Diff line number	Diff line change
`@@ -795,7 +795,11 @@ private fun SendspinSection(`
`795`	`795`	`}`
`796`	`796`
`797`	`797`	`OverflowMenu(`
`798`		`- modifier = Modifier,`
	`798`	`+ options = Codecs.list.map { item ->`
	`799`	`+ OverflowMenuOption(`
	`800`	`+ title = item.uiTitle()`
	`801`	`+ ) { viewModel.setSendspinCodecPreference(item) }`
	`802`	`+ },`
`799`	`803`	`buttonContent = { onClick ->`
`800`	`804`	`Icon(`
`801`	`805`	`modifier = Modifier`
`@@ -808,11 +812,6 @@ private fun SendspinSection(`
`808`	`812`	`else`
`809`	`813`	`MaterialTheme.colorScheme.onSurfaceVariant`
`810`	`814`	`)`
`811`		`- },`
`812`		`- options = Codecs.list.map { item ->`
`813`		`- OverflowMenuOption(`
`814`		`- title = item.uiTitle()`
`815`		`- ) { viewModel.setSendspinCodecPreference(item) }`
`816`	`815`	`}`
`817`	`816`	`)`
`818`	`817`	`}`