designed favourites screen

DBTApp/.idea/deploymentTargetSelector.xml

@@ -4,7 +4,7 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2025-06-05T15:18:52.377281030Z">
+        <DropdownSelection timestamp="2025-06-05T20:16:54.801581482Z">
           <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/MainActivity.kt

@@ -21,6 +21,7 @@ import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import de.cdaut.dbtapp.components.BottomNavigationBar
+import de.cdaut.dbtapp.components.FavouritesScreen
 import de.cdaut.dbtapp.components.SkillsScreen
 import de.cdaut.dbtapp.components.TrackingScreen
 import de.cdaut.dbtapp.navigation.Screens
@@ -60,7 +61,7 @@ private fun MainContent() {
                         Text("Home")
                     }
                     composable(Screens.Favourites.route) {
-                        Text("Favourites")
+                        FavouritesScreen()
 
                     }
                     composable(Screens.Skillschains.route) {

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

@@ -0,0 +1,136 @@
+package de.cdaut.dbtapp.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.IntrinsicSize
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.PlayArrow
+import androidx.compose.material3.Button
+import androidx.compose.material3.Card
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+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.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import de.cdaut.dbtapp.R
+import de.cdaut.dbtapp.model.Skill
+import de.cdaut.dbtapp.model.SkillCategory
+
+@Preview
+@Composable
+fun FavouritesScreen() {
+    Column(
+        Modifier.verticalScroll(rememberScrollState()),
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        RoundedSearchBar(onSearch = {})
+        SkillCategory.entries.forEach { skillCategory ->
+            FavouritesCategoryCard(skillCategory)
+        }
+    }
+}
+
+@Composable
+private fun FavouritesCategoryCard(category: SkillCategory) {
+    var enabled by remember {
+        mutableStateOf(false)
+    }
+
+    Card(
+        Modifier
+            .fillMaxWidth()
+            .padding(10.dp)
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween,
+            modifier = Modifier
+                .fillMaxWidth()
+                .clickable(onClick = { enabled = !enabled }),
+        ) {
+            TitleText(
+                modifier = Modifier.padding(10.dp),
+                content = category.title
+            )
+            Icon(
+                modifier = Modifier
+                    .padding(5.dp),
+                imageVector = if (enabled) Icons.Filled.ArrowDropUp else Icons.Filled.ArrowDropDown,
+                contentDescription = stringResource(R.string.desc_btn_expand)
+            )
+        }
+        if (enabled) {
+            category.skills.forEach { skill ->
+                SingleSkillCard(skill = skill)
+            }
+        }
+    }
+}
+
+@Composable
+private fun SingleSkillCard(skill: Skill) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(IntrinsicSize.Min)
+            .background(Color.Transparent)
+            .padding(10.dp)
+            .background(Color.White, shape = RoundedCornerShape(5.dp))
+            .padding(10.dp),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxHeight()
+                .fillMaxWidth(fraction = 0.8f),
+            verticalArrangement = Arrangement.SpaceBetween,
+
+            ) {
+            TitleText(skill.title)
+            Spacer(modifier = Modifier.height(10.dp))
+            DescriptionText(skill.description)
+        }
+
+        Button(
+            modifier = Modifier
+                .clip(CircleShape)
+                .size(50.dp),
+            contentPadding = PaddingValues(0.dp),
+            shape = CircleShape,
+            onClick = {
+                //TODO: Start Skill
+            }
+        ) {
+            Icon(
+                imageVector = Icons.Filled.PlayArrow,
+                contentDescription = "TODO: PROVIDE"
+            )
+        }
+
+    }
+}

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

@@ -169,7 +169,7 @@ private fun SingleSkillCard(title: String, description: String) {
 @OptIn(ExperimentalMaterial3Api::class)
 @Preview(locale = "de")
 @Composable
-private fun RoundedSearchBar(onSearch: (String) -> Unit = {}) {
+fun RoundedSearchBar(onSearch: (String) -> Unit = {}) {
     // Controls expansion state of the search bar
     var expanded by rememberSaveable { mutableStateOf(false) }
     var textFieldState = rememberTextFieldState()