feat: add searchbar to processes screen

Signed-off-by: Luca Bretting <[email protected]>

frontend/app/src/main/java/de/amosproj3/ziofa/ui/processes/ProcessesScreen.kt

@@ -13,19 +13,23 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.HorizontalDivider
 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.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import de.amosproj3.ziofa.api.processes.RunningComponent
 import de.amosproj3.ziofa.ui.processes.composables.EditButton
 import de.amosproj3.ziofa.ui.processes.composables.IconAndName
 import de.amosproj3.ziofa.ui.processes.composables.ProcessesHeader
+import de.amosproj3.ziofa.ui.processes.composables.ProcessesSearchBar
 import org.koin.androidx.compose.koinViewModel
 
 @Composable
@@ -37,10 +41,29 @@ fun ProcessesScreen(
     Box(modifier = modifier.fillMaxSize()) {
         Column {
             val options by remember { viewModel.applicationsAndProcessesList }.collectAsState()
+            var searchQuery by remember { mutableStateOf("") }
 
+            ProcessesSearchBar(
+                value = searchQuery,
+                onValueChanged = { searchQuery = it },
+                onStartSearch = { viewModel.startSearch(query = searchQuery) })
             ProcessesHeader()
-            LazyColumn(modifier = Modifier.padding(horizontal = 20.dp).fillMaxSize()) {
-                items(options) { option -> ProcessListRow(option, onClickEdit = onClickEdit) }
+            if (options.isNotEmpty()) {
+                LazyColumn(
+                    modifier = Modifier
+                        .padding(horizontal = 20.dp)
+                        .fillMaxSize()
+                ) {
+                    items(options) { option -> ProcessListRow(option, onClickEdit = onClickEdit) }
+                }
+            } else {
+                Box(modifier.fillMaxSize()) {
+                    CircularProgressIndicator(
+                        modifier = Modifier.align(
+                            Alignment.Center
+                        )
+                    )
+                }
             }
         }
     }
@@ -54,7 +77,9 @@ fun ProcessListRow(
     onClickEdit: (RunningComponent) -> Unit = {},
 ) {
     Row(
-        modifier = Modifier.fillMaxSize().padding(vertical = 10.dp),
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(vertical = 10.dp),
         horizontalArrangement = Arrangement.SpaceEvenly,
         verticalAlignment = Alignment.CenterVertically,
     ) {
@@ -81,3 +106,5 @@ fun ProcessListRow(
     }
     HorizontalDivider(Modifier.height(5.dp))
 }
+
+

frontend/app/src/main/java/de/amosproj3/ziofa/ui/processes/ProcessesViewModel.kt

@@ -8,18 +8,34 @@ import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import de.amosproj3.ziofa.api.processes.RunningComponent
 import de.amosproj3.ziofa.api.processes.RunningComponentsAccess
+import de.amosproj3.ziofa.ui.shared.getDisplayName
 import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.SharingStarted
+import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.map
 import kotlinx.coroutines.flow.stateIn
 
 class ProcessesViewModel(runningComponentsProvider: RunningComponentsAccess) : ViewModel() {
 
+    private val searchQuery = MutableStateFlow<String?>(null)
+
     val applicationsAndProcessesList =
-        runningComponentsProvider.runningComponentsList
+        combine(
+            runningComponentsProvider.runningComponentsList,
+            searchQuery
+        ) { runningComponents, query ->
+            if (query == null) return@combine runningComponents
+            runningComponents.filter { it.getDisplayName().lowercase().contains(query.lowercase()) }
+        }
             .sortApplicationsFirst()
             .stateIn(viewModelScope, started = SharingStarted.Lazily, listOf())
 
+
+    fun startSearch(query: String) {
+        searchQuery.value = query
+    }
+
     private fun Flow<List<RunningComponent>>.sortApplicationsFirst() =
         this.map { list -> list.sortedBy { if (it is RunningComponent.Application) -1 else 1 } }
 }

frontend/app/src/main/java/de/amosproj3/ziofa/ui/processes/composables/ProcessesHeader.kt

@@ -23,5 +23,5 @@ fun ProcessesHeader() {
         Text(text = "Parent PID", modifier = Modifier.weight(1f))
         Text(text = "", modifier = Modifier.weight(1f))
     }
-    HorizontalDivider(Modifier.height(15.dp).background(MaterialTheme.colorScheme.primary))
+    HorizontalDivider(Modifier.height(3.dp).background(MaterialTheme.colorScheme.primary))
 }

frontend/app/src/main/java/de/amosproj3/ziofa/ui/processes/composables/ProcessesSearchBar.kt

@@ -0,0 +1,53 @@
+package de.amosproj3.ziofa.ui.processes.composables
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ProcessesSearchBar(value: String, onValueChanged: (String) -> Unit, onStartSearch: (String) -> Unit) {
+
+    Row(
+        modifier = Modifier.background(MaterialTheme.colorScheme.primary),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        OutlinedTextField(
+            value = value,
+            onValueChange = onValueChanged,
+            modifier = Modifier
+                .weight(8f)
+                .background(Color.White),
+            placeholder = { Text("Search for processes and apps ... ") },
+        )
+        Icon(
+            imageVector = Icons.Filled.Search,
+            contentDescription = "",
+            modifier = Modifier
+                .weight(1f)
+                .padding(10.dp)
+                .size(20.dp)
+                .clickable { onStartSearch(value) },
+            tint = Color.White
+        )
+    }
+    HorizontalDivider(
+        Modifier
+            .height(15.dp)
+            .background(MaterialTheme.colorScheme.primary)
+    )
+}

frontend/app/src/main/java/de/amosproj3/ziofa/ui/symbols/SymbolsScreen.kt

@@ -22,8 +22,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import de.amosproj3.ziofa.ui.configuration.composables.ErrorScreen
 import de.amosproj3.ziofa.ui.configuration.composables.SubmitFab
-import de.amosproj3.ziofa.ui.symbols.composables.SearchBar
 import de.amosproj3.ziofa.ui.symbols.composables.SearchResultList
+import de.amosproj3.ziofa.ui.symbols.composables.SymbolsSearchBar
 import de.amosproj3.ziofa.ui.symbols.data.SymbolsScreenState
 import org.koin.androidx.compose.koinViewModel
 import org.koin.core.parameter.parametersOf
@@ -37,7 +37,7 @@ fun SymbolsScreen(pids: List<UInt>, modifier: Modifier = Modifier, onSymbolsSubm
 
     Box(modifier = modifier) {
         Column(modifier = Modifier.fillMaxWidth()) {
-            SearchBar(
+            SymbolsSearchBar (
                 value = searchQuery,
                 onValueChanged = { searchQuery = it },
                 onStartSearch = { viewModel.startSearch(it) },

frontend/app/src/main/java/de/amosproj3/ziofa/ui/symbols/composables/SearchBar.kt → frontend/app/src/main/java/de/amosproj3/ziofa/ui/symbols/composables/SymbolsSearchBar.kt

@@ -20,7 +20,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 
 @Composable
-fun SearchBar(value: String, onValueChanged: (String) -> Unit, onStartSearch: (String) -> Unit) {
+fun SymbolsSearchBar(value: String, onValueChanged: (String) -> Unit, onStartSearch: (String) -> Unit) {
     Row(
         modifier = Modifier.fillMaxWidth().padding(10.dp),
         verticalAlignment = Alignment.CenterVertically,