feat(app): replace top app bar with search bar

composeApp/src/commonMain/kotlin/component/TopBar.kt

@@ -1,51 +0,0 @@
-package component
-
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Menu
-import androidx.compose.material.icons.filled.Search
-import androidx.compose.material3.*
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.MutableState
-import androidx.compose.ui.text.style.TextOverflow
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun TopBar(
-    scrollBehavior: TopAppBarScrollBehavior,
-    searchActive: MutableState<Boolean>
-) {
-
-    CenterAlignedTopAppBar(
-        title = {
-            Text(
-                text = "Vegan E Numbers",
-                maxLines = 1,
-                overflow = TextOverflow.Ellipsis,
-            )
-        },
-        navigationIcon = {
-            IconButton(
-                onClick = {/* TODO Implement Navigation Drawer */}
-            ) {
-                Icon(
-                    imageVector = Icons.Filled.Menu,
-                    contentDescription = "Navigation Menu",
-                )
-            }
-        },
-        actions = {
-            IconButton(
-                onClick = {
-                    println("Clicked on Search")
-                    searchActive.value = true
-                }
-            ) {
-                Icon(
-                    imageVector = Icons.Filled.Search,
-                    contentDescription = "Search for E Number",
-                )
-            }
-        },
-        scrollBehavior = scrollBehavior,
-    )
-}

composeApp/src/commonMain/kotlin/tab/list/ListMain.kt

@@ -1,9 +1,7 @@
 package tab.list
 
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
@@ -12,9 +10,11 @@ import androidx.compose.material.icons.filled.*
 import androidx.compose.material3.*
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.semantics.isTraversalGroup
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.traversalIndex
 import androidx.compose.ui.unit.dp
@@ -23,7 +23,6 @@ import cafe.adriel.voyager.navigator.LocalNavigator
 import cafe.adriel.voyager.navigator.currentOrThrow
 import cafe.adriel.voyager.navigator.tab.Tab
 import cafe.adriel.voyager.navigator.tab.TabOptions
-import component.TopBar
 import tab.LoadingScreen
 
 object ListMain : Tab {
@@ -47,19 +46,11 @@ object ListMain : Tab {
         val screenModel = navigator.rememberNavigatorScreenModel { ListScreenModel() }
         val state by screenModel.state.collectAsState()
 
-        val searchActive = rememberSaveable { mutableStateOf(false) }
-
         val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
 
         Scaffold(
             modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
-            topBar = {
+            topBar = { Search() }
-                if (!searchActive.value) {
-                    TopBar(scrollBehavior = scrollBehavior, searchActive = searchActive)
-                } else {
-                    Search(searchActive = searchActive)
-                }
-            }
         ) { innerPadding ->
             Column(
                 modifier = Modifier.padding(innerPadding)
@@ -78,27 +69,44 @@ object ListMain : Tab {
 
     @OptIn(ExperimentalMaterial3Api::class)
     @Composable
-    private fun Search(searchActive: MutableState<Boolean>) {
+    private fun Search() {
         var text by rememberSaveable { mutableStateOf("") }
+        var expanded by rememberSaveable { mutableStateOf(false) }
 
+        Column (
+            Modifier
+                .fillMaxWidth()
+                .padding(if (!expanded) 8.dp else 0.dp)
+                .semantics { isTraversalGroup = true }
+        ) {
             SearchBar(
                 modifier = Modifier
+                    .align(Alignment.CenterHorizontally)
                     .semantics { traversalIndex = 0f },
                 query = text,
                 onQueryChange = { text = it },
-            onSearch = { searchActive.value = false },
+                onSearch = { expanded = false },
-            onActiveChange = { searchActive.value = it },
+                onActiveChange = { expanded = it },
-            active = searchActive.value,
+                active = expanded,
+                placeholder = {Text("Search E Numbers")},
                 leadingIcon = {
-                IconButton(onClick = { searchActive.value = false }) {
+                    if (expanded) {
+                        IconButton(onClick = { expanded = false }) {
                             Icon(Icons.AutoMirrored.Filled.ArrowBack, "Exit Search")
                         }
+                    } else {
+                        IconButton(onClick = { /* TODO Add menu */ }) {
+                            Icon(Icons.Filled.Menu, "Navigation Menu")
+                        }
+                    }
                 },
                 trailingIcon = {
+                    if (text.isNotBlank()) {
                         IconButton(onClick = { text = "" }) {
                             Icon(imageVector = Icons.Filled.Clear, contentDescription = "Clear Search")
                         }
                     }
+                }
             ) {
                 Column(Modifier.verticalScroll(rememberScrollState())) {
                     repeat(4) { idx ->
@@ -111,7 +119,7 @@ object ListMain : Tab {
                             modifier = Modifier
                                 .clickable {
                                     text = resultText
-                                searchActive.value = false
+                                    expanded = false
                                 }
                                 .fillMaxWidth()
                                 .padding(horizontal = 16.dp, vertical = 4.dp)
@@ -121,3 +129,4 @@ object ListMain : Tab {
             }
         }
     }
+}