feat(settings): use collapsable top app bar

app/src/main/java/app/suhasdissa/mellowmusic/ui/components/SettingItem.kt

@@ -30,7 +30,7 @@ fun SettingItem(title: String, description: String, icon: ImageVector?, onClick:
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(16.dp, 24.dp),
+                .padding(4.dp, 12.dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
             icon?.let {

app/src/main/java/app/suhasdissa/mellowmusic/ui/screens/settings/AboutScreen.kt

@@ -10,6 +10,7 @@ import androidx.compose.material.icons.filled.NewReleases
 import androidx.compose.material3.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -27,14 +28,19 @@ fun AboutScreen(
 ) {
     val context = LocalContext.current
     val githubRepo = "https://github.com/SuhasDissa/MellowMusic"
+    val topBarBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
 
     Scaffold(modifier = modifier.fillMaxSize(), topBar = {
-        TopAppBar(title = { Text(stringResource(R.string.about_title)) })
+        LargeTopAppBar(
+            title = { Text(stringResource(R.string.about_title)) },
+            scrollBehavior = topBarBehavior
+        )
     }) { innerPadding ->
         LazyColumn(
             modifier
-                .fillMaxWidth()
+                .fillMaxSize()
                 .padding(innerPadding)
+                .nestedScroll(topBarBehavior.nestedScrollConnection)
         ) {
             item {
                 SettingItem(

app/src/main/java/app/suhasdissa/mellowmusic/ui/screens/settings/DatabaseSettingsScreen.kt

@@ -5,18 +5,19 @@ import android.widget.Toast
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Backup
 import androidx.compose.material.icons.filled.Restore
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.LargeTopAppBar
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.lifecycle.viewmodel.compose.viewModel
@@ -31,8 +32,13 @@ import java.util.Date
 fun DatabaseSettingsScreen(
     databaseViewModel: DatabaseViewModel = viewModel(factory = DatabaseViewModel.Factory)
 ) {
+    val topBarBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+
     Scaffold(modifier = Modifier.fillMaxSize(), topBar = {
-        TopAppBar(title = { Text(stringResource(R.string.backup_restore)) })
+        LargeTopAppBar(
+            title = { Text(stringResource(R.string.backup_restore)) },
+            scrollBehavior = topBarBehavior
+        )
     }) { innerPadding ->
         val context = LocalContext.current
         val backupLauncher =
@@ -52,8 +58,9 @@ fun DatabaseSettingsScreen(
 
         LazyColumn(
             Modifier
-                .fillMaxWidth()
+                .fillMaxSize()
                 .padding(innerPadding)
+                .nestedScroll(topBarBehavior.nestedScrollConnection)
         ) {
             item {
                 SettingItem(

app/src/main/java/app/suhasdissa/mellowmusic/ui/screens/settings/NetworkSettingsScreen.kt

@@ -1,21 +1,22 @@
 package app.suhasdissa.mellowmusic.ui.screens.settings
 
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Web
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.LargeTopAppBar
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.res.stringResource
 import app.suhasdissa.mellowmusic.R
 import app.suhasdissa.mellowmusic.ui.components.InstanceSelectDialog
@@ -33,13 +34,19 @@ fun NetworkSettingsScreen() {
             Pref.pipedInstances.getOrNull(currentServerId)?.name ?: Pref.pipedInstances.first().name
         )
     }
+    val topBarBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+
     Scaffold(modifier = Modifier.fillMaxSize(), topBar = {
-        TopAppBar(title = { Text(stringResource(R.string.network_settings)) })
+        LargeTopAppBar(
+            title = { Text(stringResource(R.string.network_settings)) },
+            scrollBehavior = topBarBehavior
+        )
     }) { innerPadding ->
         LazyColumn(
             Modifier
-                .fillMaxWidth()
+                .fillMaxSize()
                 .padding(innerPadding)
+                .nestedScroll(topBarBehavior.nestedScrollConnection)
         ) {
             item {
                 SettingItem(

app/src/main/java/app/suhasdissa/mellowmusic/ui/screens/settings/SettingsScreen.kt

@@ -3,7 +3,6 @@ package app.suhasdissa.mellowmusic.ui.screens.settings
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.icons.Icons
@@ -17,6 +16,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -37,15 +37,19 @@ fun SettingsScreen(
 ) {
     var showLoginDialog by remember { mutableStateOf(false) }
     val authViewModel: AuthViewModel = viewModel(factory = AuthViewModel.Factory)
+    val topBarBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
+
     Scaffold(modifier = modifier.fillMaxSize(), topBar = {
-        TopAppBar(
-            title = { Text(stringResource(R.string.settings_title)) }
+        LargeTopAppBar(
+            title = { Text(stringResource(R.string.settings_title)) },
+            scrollBehavior = topBarBehavior
         )
     }) { innerPadding ->
         LazyColumn(
             modifier
-                .fillMaxWidth()
-                .padding(innerPadding),
+                .fillMaxSize()
+                .padding(innerPadding)
+                .nestedScroll(topBarBehavior.nestedScrollConnection),
             verticalArrangement = Arrangement.spacedBy(8.dp)
         ) {
             item {