Added search field

app/src/main/java/org/sirekanyan/outline/MainContent.kt

@@ -20,6 +20,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Delete
 import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material.icons.filled.Search
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.LinearProgressIndicator
@@ -53,6 +54,7 @@ import org.sirekanyan.outline.feature.sort.Sorting
 import org.sirekanyan.outline.ui.AddKeyButton
 import org.sirekanyan.outline.ui.DrawerContent
 import org.sirekanyan.outline.ui.KeyBottomSheet
+import org.sirekanyan.outline.ui.SearchField
 import org.sirekanyan.outline.ui.icons.IconSort
 import org.sirekanyan.outline.ui.rememberSearchState
 
@@ -72,7 +74,7 @@ fun MainContent(state: MainState) {
                     state.keys.observeAllKeys(search.query)
                 }
                 allKeys?.let { keys ->
-                    if (keys.isNotEmpty()) {
+                    if (keys.isNotEmpty() || search.isOpened) {
                         KeysContent(insets, state, keys, sorting)
                     } else {
                         Box(Modifier.fillMaxSize().padding(insets), Alignment.Center) {
@@ -84,15 +86,21 @@ fun MainContent(state: MainState) {
                         }
                     }
                 }
-                MainTopAppBar(
-                    title = stringResource(R.string.outln_app_name),
-                    onMenuClick = state::openDrawer,
-                    items = listOf(
-                        MenuItem("Sort by…", IconSort) {
-                            isSortingVisible = true
-                        },
+                if (search.isOpened) {
+                    MainTopAppBar(
+                        title = { SearchField(search.query) { search.query = it } },
+                        onMenuClick = search::closeSearch,
                     )
-                )
+                } else {
+                    MainTopAppBar(
+                        title = { Text(stringResource(R.string.outln_app_name)) },
+                        onMenuClick = state::openDrawer,
+                        items = listOf(
+                            MenuItem("Search", Icons.Default.Search) { search.openSearch() },
+                            MenuItem("Sort by…", IconSort) { isSortingVisible = true },
+                        )
+                    )
+                }
             }
             is SelectedPage -> {
                 val keys by rememberFlowAsState(listOf(), page.server.id) {
@@ -147,7 +155,7 @@ fun MainContent(state: MainState) {
                     state.refreshCurrentKeys(showLoading = true)
                 }
                 MainTopAppBar(
-                    title = page.server.name,
+                    title = { Text(page.server.name) },
                     onMenuClick = state::openDrawer,
                     items = listOf(
                         MenuItem("Sort by…", IconSort) {

app/src/main/java/org/sirekanyan/outline/MainTopAppBar.kt

@@ -26,12 +26,12 @@ data class MenuItem(val text: String, val icon: ImageVector, val onClick: () ->
 @Composable
 @OptIn(ExperimentalMaterial3Api::class)
 fun MainTopAppBar(
-    title: String,
+    title: @Composable () -> Unit,
     onMenuClick: () -> Unit,
     items: List<MenuItem> = listOf(),
 ) {
     TopAppBar(
-        title = { Text(title) },
+        title = title,
         navigationIcon = { IconButton(onMenuClick) { Icon(Icons.Default.Menu, null) } },
         actions = { MainMenu(items) },
         colors = TopAppBarDefaults.topAppBarColors(

app/src/main/java/org/sirekanyan/outline/ui/SearchField.kt

@@ -0,0 +1,34 @@
+package org.sirekanyan.outline.ui
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.graphics.SolidColor
+
+@Composable
+fun SearchField(query: String, onQueryChange: (String) -> Unit) {
+    val focusRequester = remember { FocusRequester() }
+    val contentColor = LocalContentColor.current
+    BasicTextField(
+        value = query,
+        onValueChange = onQueryChange,
+        modifier = Modifier.fillMaxWidth().focusRequester(focusRequester),
+        textStyle = MaterialTheme.typography.titleLarge.copy(color = contentColor),
+        cursorBrush = SolidColor(contentColor),
+        singleLine = true,
+    )
+    if (query.isEmpty()) {
+        Text("Search…", color = contentColor.copy(alpha = 0.38f))
+    }
+    LaunchedEffect(Unit) {
+        focusRequester.requestFocus()
+    }
+}