search bar in skillslist

DBTApp/.idea/deploymentTargetSelector.xml

@@ -4,7 +4,7 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2025-06-04T17:57:13.134457158Z">
+        <DropdownSelection timestamp="2025-06-05T15:18:52.377281030Z">
           <Target type="DEFAULT_BOOT">
             <handle>
               <DeviceId pluginId="LocalEmulator" identifier="path=/home/clara/.android/avd/Pixel_6.avd" />

DBTApp/app/src/main/java/de/cdaut/dbtapp/components/SkillsList.kt

@@ -15,18 +15,25 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.input.rememberTextFieldState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowDropDown
 import androidx.compose.material.icons.filled.ArrowDropUp
+import androidx.compose.material.icons.filled.Search
 import androidx.compose.material.icons.filled.Star
 import androidx.compose.material.icons.outlined.StarOutline
 import androidx.compose.material3.Card
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
+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
@@ -43,8 +50,10 @@ import de.cdaut.dbtapp.model.SkillCategory
 @Composable
 fun SkillsScreen() {
     Column(
-        Modifier.verticalScroll(rememberScrollState())
+        Modifier.verticalScroll(rememberScrollState()),
+        horizontalAlignment = Alignment.CenterHorizontally
     ) {
+        RoundedSearchBar(onSearch = {})
         SkillCategory.entries.forEach { skillCategory ->
             SkillsCategoryCard(skillCategory.skills, skillCategory.title)
             Spacer(Modifier.height(5.dp))
@@ -52,7 +61,6 @@ fun SkillsScreen() {
     }
 }
 
-@Preview
 @Composable
 private fun SkillsCategoryCardPrev() {
     SkillsCategoryCard(Skill.mockSkills(), "Skill")
@@ -95,7 +103,6 @@ fun SkillsCategoryCard(skills: List<Skill>, title: String) {
     }
 }
 
-@Preview
 @Composable
 private fun SingleSkillsCardPreview() {
     SingleSkillCard(
@@ -158,3 +165,38 @@ private fun SingleSkillCard(title: String, description: String) {
 
     }
 }
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview(locale = "de")
+@Composable
+private fun RoundedSearchBar(onSearch: (String) -> Unit = {}) {
+    // Controls expansion state of the search bar
+    var expanded by rememberSaveable { mutableStateOf(false) }
+    var textFieldState = rememberTextFieldState()
+
+    SearchBar(
+        inputField = {
+            SearchBarDefaults.InputField(
+                query = textFieldState.text.toString(),
+                onQueryChange = { textFieldState.edit { replace(0, length, it) } },
+                onSearch = {
+                    onSearch(textFieldState.text.toString())
+                    expanded = false
+                },
+                expanded = expanded,
+                onExpandedChange = { expanded = it },
+                leadingIcon = {
+                    Icon(
+                        Icons.Filled.Search,
+                        contentDescription = stringResource(R.string.content_desc_search_bar)
+                    )
+                },
+                placeholder = { Text(stringResource(R.string.label_search_bar)) }
+            )
+        },
+        expanded = expanded,
+        onExpandedChange = { expanded = it }
+    ) {
+        Text("Placeholder")
+    }
+}

DBTApp/app/src/main/res/values-de/strings.xml

@@ -14,4 +14,6 @@
     <string name="add_trackter">Tracker hinzufügen</string>
     <string name="view_stats">Statistiken</string>
     <string name="tracker_card_title">Tracker</string>
+    <string name="label_search_bar">Skill Suchen</string>
+    <string name="content_desc_search_bar">Suche Icon</string>
 </resources>

DBTApp/app/src/main/res/values/strings.xml

@@ -13,4 +13,6 @@
     <string name="add_trackter">Add Tracker</string>
     <string name="view_stats">View Statistics</string>
     <string name="tracker_card_title">Trackers</string>
+    <string name="label_search_bar">Search Skill</string>
+    <string name="content_desc_search_bar">Search Icon</string>
 </resources>