Migrate to M3 SearchBar

LISTEN-moe · Feb 24, 2024 · f67253c · f67253c
1 parent 39bc8ca
commit f67253c
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 27 deletions.
diff --git a/app/src/main/kotlin/me/echeung/moemoekyun/ui/common/Toolbar.kt b/app/src/main/kotlin/me/echeung/moemoekyun/ui/common/Toolbar.kt
@@ -58,25 +58,35 @@ fun Toolbar(
     showUpButton: Boolean = false,
     actions: @Composable RowScope.() -> Unit = {},
 ) {
-    val navigator = LocalNavigator.currentOrThrow
-
     TopAppBar(
         title = title,
         navigationIcon = {
             if (showUpButton) {
-                IconButton(onClick = { navigator.pop() }) {
-                    Icon(
-                        imageVector = Icons.AutoMirrored.Outlined.ArrowBack,
-                        contentDescription = stringResource(R.string.action_back),
-                    )
-                }
+                UpButton()
             }
         },
         actions = actions,
         modifier = modifier,
     )
 }
 
+@Composable
+fun UpButton(
+    modifier: Modifier = Modifier,
+) {
+    val navigator = LocalNavigator.currentOrThrow
+
+    IconButton(
+        modifier = modifier,
+        onClick = { navigator.pop() },
+    ) {
+        Icon(
+            imageVector = Icons.AutoMirrored.Outlined.ArrowBack,
+            contentDescription = stringResource(R.string.action_back),
+        )
+    }
+}
+
 @Composable
 fun SearchTextInput(
     query: String?,

diff --git a/app/src/main/kotlin/me/echeung/moemoekyun/ui/screen/search/SearchScreen.kt b/app/src/main/kotlin/me/echeung/moemoekyun/ui/screen/search/SearchScreen.kt
@@ -1,18 +1,28 @@
 package me.echeung.moemoekyun.ui.screen.search
 
+import androidx.compose.animation.core.animateDpAsState
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.SearchBar
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 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.res.stringResource
+import androidx.compose.ui.unit.dp
 import cafe.adriel.voyager.core.screen.Screen
 import cafe.adriel.voyager.hilt.getScreenModel
+import me.echeung.moemoekyun.R
 import me.echeung.moemoekyun.ui.common.LoadingScreen
-import me.echeung.moemoekyun.ui.common.SearchTextInput
 import me.echeung.moemoekyun.ui.common.SongsListActions
-import me.echeung.moemoekyun.ui.common.Toolbar
+import me.echeung.moemoekyun.ui.common.UpButton
 import me.echeung.moemoekyun.ui.common.songsItems
 
 class SearchScreen : Screen {
@@ -22,27 +32,47 @@ class SearchScreen : Screen {
         val screenModel = getScreenModel<SearchScreenModel>()
         val state by screenModel.state.collectAsState()
 
+        var active by rememberSaveable { mutableStateOf(false) }
+
+        val horizontalPadding by animateDpAsState(
+            targetValue = if (active) 0.dp else 16.dp,
+            label = "searchBarPadding",
+        )
+
         Scaffold(
             topBar = {
-                Toolbar(
-                    title = {
-                        SearchTextInput(
-                            modifier = Modifier.fillMaxWidth(),
-                            query = state.searchQuery,
-                            onQueryChange = screenModel::search,
-                        )
+                SearchBar(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = horizontalPadding),
+                    query = state.searchQuery ?: "",
+                    onQueryChange = screenModel::search,
+                    onSearch = { active = false },
+                    active = active,
+                    onActiveChange = {
+                        active = it
                     },
-                    showUpButton = true,
-                    actions = {
-                        SongsListActions(
-                            selectedSortType = state.sortType,
-                            onSortBy = screenModel::sortBy,
-                            sortDescending = state.sortDescending,
-                            onSortDescending = screenModel::sortDescending,
-                            requestRandomSong = screenModel::requestRandomSong,
-                        )
+                    placeholder = { Text(stringResource(R.string.search)) },
+                    leadingIcon = { UpButton() },
+                    trailingIcon = {
+                        Row {
+                            SongsListActions(
+                                selectedSortType = state.sortType,
+                                onSortBy = screenModel::sortBy,
+                                sortDescending = state.sortDescending,
+                                onSortDescending = screenModel::sortDescending,
+                                requestRandomSong = screenModel::requestRandomSong,
+                            )
+                        }
                     },
-                )
+                ) {
+                    LazyColumn {
+                        songsItems(
+                            songs = state.filteredSongs!!,
+                            showFavoriteIcons = true,
+                        )
+                    }
+                }
             },
         ) { contentPadding ->
             if (state.songs == null) {