Tweak UI

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

@@ -1,5 +1,6 @@
 package it.vfsfitvnm.vimusic.ui.components.themed
 
+import android.content.res.Configuration
 import androidx.compose.animation.animateColor
 import androidx.compose.animation.core.animateFloat
 import androidx.compose.animation.core.updateTransition
@@ -29,8 +30,10 @@ import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.layout
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
+import it.vfsfitvnm.vimusic.LocalPlayerAwarePaddingValues
 import it.vfsfitvnm.vimusic.ui.styling.Dimensions
 import it.vfsfitvnm.vimusic.ui.styling.LocalAppearance
 import it.vfsfitvnm.vimusic.utils.semiBold
@@ -45,22 +48,33 @@ fun NavigationRail(
     modifier: Modifier = Modifier
 ) {
     val (colorPalette, typography) = LocalAppearance.current
+    val configuration = LocalConfiguration.current
+
+    val isLandscape = configuration.orientation == Configuration.ORIENTATION_LANDSCAPE
 
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
         modifier = modifier
+            .padding(LocalPlayerAwarePaddingValues.current)
+            .verticalScroll(rememberScrollState())
     ) {
         Box(
             contentAlignment = Alignment.TopCenter,
             modifier = Modifier
-                .size(width = Dimensions.navigationRailWidth, height = Dimensions.headerHeight)
+                .size(
+                    width = if (isLandscape) Dimensions.navigationRailWidthLandscape else Dimensions.navigationRailWidth,
+                    height = Dimensions.headerHeight
+                )
         ) {
             Image(
                 painter = painterResource(topIconButtonId),
                 contentDescription = null,
                 colorFilter = ColorFilter.tint(colorPalette.textSecondary),
                 modifier = Modifier
-                    .offset(x = Dimensions.navigationRailIconOffset, y = 48.dp)
+                    .offset(
+                        x = if (isLandscape) 0.dp else Dimensions.navigationRailIconOffset,
+                        y = 48.dp
+                    )
                     .clip(CircleShape)
                     .clickable(onClick = onTopIconButtonClick)
                     .padding(all = 12.dp)
@@ -68,10 +82,7 @@ fun NavigationRail(
             )
         }
 
-        Column(
-            modifier = modifier
-                .verticalScroll(rememberScrollState())
-        ) {
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
             val transition = updateTransition(targetState = tabIndex, label = null)
 
             content { index, text, icon ->
@@ -83,52 +94,73 @@ fun NavigationRail(
                     if (it == index) colorPalette.text else colorPalette.textDisabled
                 }
 
-                Row(
-                    verticalAlignment = Alignment.CenterVertically,
-                    modifier = Modifier
-                        .clip(RoundedCornerShape(24.dp))
-                        .clickable(
-                            indication = rememberRipple(bounded = true),
-                            interactionSource = remember { MutableInteractionSource() },
-                            onClick = { onTabIndexChanged(index) }
-                        )
-                        .padding(horizontal = 8.dp)
-                ) {
+                val iconContent: @Composable () -> Unit = {
                     Image(
                         painter = painterResource(icon),
                         contentDescription = null,
                         colorFilter = ColorFilter.tint(colorPalette.text),
                         modifier = Modifier
-                            .vertical()
+                            .vertical(enabled = !isLandscape)
                             .graphicsLayer {
                                 alpha = dothAlpha
                                 translationX = (1f - dothAlpha) * -48.dp.toPx()
-                                rotationZ = -90f
+                                rotationZ = if (isLandscape) 0f else -90f
                             }
                             .size(Dimensions.navigationRailIconOffset * 2)
                     )
+                }
 
+                val textContent: @Composable () -> Unit = {
                     BasicText(
                         text = text,
                         style = typography.xs.semiBold.copy(color = textColor),
                         modifier = Modifier
-                            .vertical()
-                            .rotate(-90f)
+                            .vertical(enabled = !isLandscape)
+                            .rotate(if (isLandscape) 0f else -90f)
                             .padding(horizontal = 16.dp)
                     )
                 }
+
+                val contentModifier = Modifier
+                    .clip(RoundedCornerShape(24.dp))
+                    .clickable(
+                        indication = rememberRipple(bounded = true),
+                        interactionSource = remember { MutableInteractionSource() },
+                        onClick = { onTabIndexChanged(index) }
+                    )
+
+                if (isLandscape) {
+                    Column(
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        modifier = contentModifier
+                            .padding(vertical = 8.dp)
+                    ) {
+                        iconContent()
+                        textContent()
+                    }
+                } else {
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically,
+                        modifier = contentModifier
+                            .padding(horizontal = 8.dp)
+                    ) {
+                        iconContent()
+                        textContent()
+                    }
+                }
             }
         }
     }
 }
 
-private fun Modifier.vertical() =
-    layout { measurable, constraints ->
-        val placeable = measurable.measure(constraints)
-        layout(placeable.height, placeable.width) {
-            placeable.place(
-                x = -(placeable.width / 2 - placeable.height / 2),
-                y = -(placeable.height / 2 - placeable.width / 2)
-            )
-        }
-    }
+private fun Modifier.vertical(enabled: Boolean = true) =
+    if (enabled)
+        layout { measurable, constraints ->
+            val placeable = measurable.measure(constraints)
+            layout(placeable.height, placeable.width) {
+                placeable.place(
+                    x = -(placeable.width / 2 - placeable.height / 2),
+                    y = -(placeable.height / 2 - placeable.width / 2)
+                )
+            }
+        } else this

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

@@ -60,8 +60,6 @@ fun Scaffold(
                 onTopIconButtonClick = onTopIconButtonClick,
                 tabIndex = tabIndex,
                 onTabIndexChanged = onTabChanged,
-                modifier = Modifier
-                    .padding(LocalPlayerAwarePaddingValues.current),
                 content = tabColumnContent
             )
 

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

@@ -62,10 +62,12 @@ fun LocalSongSearch(
         stateSaver = DetailedSongListSaver,
         key1 = textFieldValue.text
     ) {
-        Database
-            .search("%${textFieldValue.text}%")
-            .flowOn(Dispatchers.IO)
-            .collect { value = it }
+        if (textFieldValue.text.length > 1) {
+            Database
+                .search("%${textFieldValue.text}%")
+                .flowOn(Dispatchers.IO)
+                .collect { value = it }
+        }
     }
 
     val thumbnailSize = Dimensions.thumbnails.song.px

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

@@ -111,11 +111,6 @@ fun OnlineSearch(
         FocusRequester()
     }
 
-    LaunchedEffect(Unit) {
-        delay(300)
-        focusRequester.requestFocus()
-    }
-
     LazyColumn(
         contentPadding = LocalPlayerAwarePaddingValues.current,
         modifier = Modifier
@@ -334,4 +329,9 @@ fun OnlineSearch(
             }
         }
     }
+
+    LaunchedEffect(Unit) {
+        delay(300)
+        focusRequester.requestFocus()
+    }
 }

app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/styling/Dimensions.kt

@@ -11,6 +11,7 @@ object Dimensions {
     val itemsVerticalPadding = 8.dp
 
     val navigationRailWidth = 64.dp
+    val navigationRailWidthLandscape = 128.dp
     val navigationRailIconOffset = 6.dp
     val headerHeight = 128.dp