Added logic for Searching through available medias and basic ui

app/src/main/java/hu/bbara/purefin/app/home/AppScreen.kt

@@ -11,11 +11,11 @@ import androidx.compose.ui.Modifier
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.LifecycleResumeEffect
 import hu.bbara.purefin.app.home.ui.HomeNavItem
-import hu.bbara.purefin.feature.shared.home.HomePageViewModel
+import hu.bbara.purefin.feature.shared.home.AppViewModel
 
 @Composable
 fun AppScreen(
-    viewModel: HomePageViewModel = hiltViewModel(),
+    viewModel: AppViewModel = hiltViewModel(),
     modifier: Modifier = Modifier
 ) {
     var selectedTab by remember { mutableIntStateOf(0) }

app/src/main/java/hu/bbara/purefin/app/home/ui/HomeTopBar.kt

@@ -7,23 +7,24 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.statusBarsPadding
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.Cloud
-import androidx.compose.material.icons.outlined.CloudOff
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
-import hu.bbara.purefin.common.ui.components.PurefinIconButton
-import hu.bbara.purefin.common.ui.components.SearchField
+import androidx.hilt.navigation.compose.hiltViewModel
+import hu.bbara.purefin.common.ui.components.PurefinSearchBar
+import hu.bbara.purefin.feature.shared.search.SearchViewModel
 
 @Composable
 fun HomeTopBar(
     modifier: Modifier = Modifier,
+    searchViewModel: SearchViewModel = hiltViewModel()
 ) {
     val scheme = MaterialTheme.colorScheme
+    val searchResult = searchViewModel.searchResult.collectAsState()
 
     Box(
         modifier = modifier
@@ -37,15 +38,16 @@ fun HomeTopBar(
                 .padding(horizontal = 16.dp, vertical = 16.dp)
                 .fillMaxWidth(),
             verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterHorizontally),
+            horizontalArrangement = Arrangement.spacedBy(16.dp, Alignment.Start),
         ) {
-            SearchField(
-                value = "",
-                onValueChange = {},
-                placeholder = "Search",
-                backgroundColor = scheme.secondaryContainer,
-                textColor = scheme.onSecondaryContainer,
-                cursorColor = scheme.onSecondaryContainer,
+            PurefinSearchBar(
+                onQueryChange = {
+                    searchViewModel.search(it)
+                },
+                onSearch = {
+                    searchViewModel.search(it)
+                },
+                searchResults = searchResult.value,
                 modifier = Modifier.weight(1.0f, true),
             )
         }

app/src/main/java/hu/bbara/purefin/common/ui/components/PurefinSeachBar.kt

@@ -0,0 +1,106 @@
+package hu.bbara.purefin.common.ui.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SearchBar
+import androidx.compose.material3.SearchBarDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.semantics.isTraversalGroup
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.traversalIndex
+import androidx.compose.ui.unit.dp
+import hu.bbara.purefin.core.model.SearchResult
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun PurefinSearchBar(
+    onQueryChange: (String) -> Unit,
+    onSearch: (String) -> Unit,
+    searchResults: List<SearchResult>,
+    modifier: Modifier = Modifier
+) {
+    var query by remember { mutableStateOf("") }
+    var expanded by rememberSaveable { mutableStateOf(false) }
+
+    Box(
+        modifier
+            .fillMaxWidth()
+            .semantics { isTraversalGroup = true }
+    ) {
+        SearchBar(
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+                .fillMaxWidth()
+                .semantics { traversalIndex = 0f },
+            inputField = {
+                SearchBarDefaults.InputField(
+                    query = query,
+                    onQueryChange = {
+                        query = it
+                        onQueryChange(it)
+                    },
+                    onSearch = {
+                        onSearch(query)
+                        expanded = false
+                    },
+                    expanded = expanded,
+                    onExpandedChange = { expanded = it },
+                    placeholder = { Text("Search") }
+                )
+            },
+            expanded = expanded,
+            onExpandedChange = { expanded = it },
+        ) {
+            LazyVerticalGrid(
+                columns = GridCells.Adaptive(minSize = 120.dp),
+                contentPadding = PaddingValues(16.dp),
+                horizontalArrangement = Arrangement.spacedBy(16.dp),
+                verticalArrangement = Arrangement.spacedBy(16.dp),
+                modifier = modifier.background(MaterialTheme.colorScheme.background)
+            ) {
+                items(searchResults) { item ->
+                    SearchResultCard(item)
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun SearchResultCard(
+    item: SearchResult,
+    modifier: Modifier = Modifier
+) {
+    Column(modifier = modifier) {
+        PurefinAsyncImage(
+            model = item.posterUrl,
+            contentDescription = item.title,
+            modifier = Modifier.height(150.dp),
+            contentScale = ContentScale.Fit
+        )
+        Text(
+            text = item.title,
+            modifier = Modifier.padding(horizontal = 8.dp)
+        )
+    }
+}