Highlights Search Screen UI

app/build.gradle.kts

@@ -62,16 +62,17 @@ android {
 
 dependencies {
     // Jetpack Compose dependencies
-    implementation(platform("androidx.compose:compose-bom:2024.09.00"))
-    implementation("androidx.compose.material3:material3")
-    implementation("androidx.compose.ui:ui:1.9.4")
+    implementation(platform("androidx.compose:compose-bom:2025.10.01"))
+    implementation("androidx.compose.ui:ui:1.4.0")
+    implementation("androidx.compose.ui:ui-tooling-preview")
     implementation("androidx.compose.ui:ui-tooling-preview:1.4.3")
     implementation("androidx.activity:activity-compose")
     implementation("androidx.lifecycle:lifecycle-viewmodel-compose")
     implementation("androidx.navigation:navigation-compose:2.8.2")
     implementation(libs.material3)
     implementation("com.google.dagger:hilt-android:2.51.1")
     implementation(libs.androidx.material3)
+    implementation(libs.androidx.foundation.layout)
     kapt("com.google.dagger:hilt-android-compiler:2.51.1")
     implementation("androidx.hilt:hilt-navigation-compose:1.0.0")
     implementation("com.google.accompanist:accompanist-pager:0.24.0-alpha")

app/src/main/java/com/cornellappdev/score/components/highlights/HighlightsCardLazyColumn.kt

@@ -0,0 +1,38 @@
+package com.cornellappdev.score.components.highlights
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.cornellappdev.score.components.ScorePreview
+import com.cornellappdev.score.model.HighlightData
+import com.cornellappdev.score.util.highlightsList
+
+@Composable
+fun HighlightsCardLazyColumn(
+    highlightsList: List<HighlightData>
+) {
+    LazyColumn(
+        modifier = Modifier.padding(top = 16.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        items(highlightsList) { item ->
+            when (item) {
+                is HighlightData.Video -> VideoHighlightCard(item.data, true)
+                is HighlightData.Article -> ArticleHighlightCard(item.data, true)
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun HighlightsCardLazyColumnPreview() {
+    ScorePreview {
+        HighlightsCardLazyColumn(highlightsList)
+    }
+}

app/src/main/java/com/cornellappdev/score/components/highlights/HighlightsScreenSearchFilterBar.kt

@@ -0,0 +1,95 @@
+package com.cornellappdev.score.components.highlights
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.cornellappdev.score.components.ScorePreview
+import com.cornellappdev.score.model.Sport
+import com.cornellappdev.score.theme.Style.bodyMedium
+import com.cornellappdev.score.util.sportList
+
+@Composable
+fun HighlightsScreenSearchFilterBar(
+    sportList: List<Sport>,
+    focusRequester: FocusRequester
+) {
+    val focusManager = LocalFocusManager.current
+    var isActive by remember { mutableStateOf(true) }
+    Column(modifier = Modifier.fillMaxWidth()) {
+        Row(
+            modifier = Modifier
+                .padding(horizontal = 24.dp)
+                .clip(shape = RoundedCornerShape(100.dp))
+                .clickable(onClick = {/*todo clear the highlight rows and show recent searches*/ }),
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            HighlightsSearchBar(
+                onSearchClick = {
+                    isActive = true
+                    focusRequester.requestFocus()
+                },
+                focusRequester = focusRequester,
+                modifier = Modifier
+                    .weight(1f)
+                    .onFocusChanged { state ->
+                        // When the search bar loses focus, hide cancel
+                        if (!state.isFocused) {
+                            isActive = !isActive
+                        }
+                    }
+            )
+
+            if (isActive) {
+                Box(
+                    modifier = Modifier.clickable {
+                        isActive = true;
+                        focusManager.clearFocus(force = true)
+                        /*todo: clear the text in the search bar*/
+                    }
+                ) {
+                    Text("Cancel", style = bodyMedium)
+                }
+            }
+        }
+        Spacer(modifier = Modifier.height(16.dp))
+        HighlightsFilterRow(sportList, {/*todo on filter selected*/ })
+    }
+}
+
+@Preview
+@Composable
+private fun HighlightsScreenSearchFilterBarActivePreview() {
+    ScorePreview {
+        HighlightsScreenSearchFilterBar(sportList, FocusRequester())
+    }
+}
+
+@Preview
+@Composable
+private fun HighlightsScreenSearchFilterBarInactivePreview() {
+    ScorePreview {
+        HighlightsScreenSearchFilterBar(sportList, FocusRequester())
+    }
+}

app/src/main/java/com/cornellappdev/score/components/highlights/HighlightsSearchBar.kt

@@ -22,6 +22,9 @@ 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.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.input.VisualTransformation
@@ -33,21 +36,20 @@ import com.cornellappdev.score.theme.Style.bodyNormal
 
 @Composable
 fun HighlightsSearchBar(
-    onSearchClick: () -> Unit
+    onSearchClick: () -> Unit,
+    focusRequester: FocusRequester,
+    modifier: Modifier = Modifier
 ) {
     val interactionSource = remember { MutableInteractionSource() }
-    var searchQuery by remember { mutableStateOf("") }
+    var searchQuery by remember { mutableStateOf("") } //todo: to be handled by viewmodel
 
     Row(
-        modifier = Modifier
+        modifier = modifier
             .fillMaxWidth()
             .background(Color.White, RoundedCornerShape(100.dp))
             .border(1.dp, GrayLight, RoundedCornerShape(100.dp))
             .clip(RoundedCornerShape(100.dp))
-            .clickable(
-                interactionSource = interactionSource,
-                indication = null
-            ) { onSearchClick() }
+            .clickable { onSearchClick() }
             .padding(horizontal = 16.dp, vertical = 8.dp),
         verticalAlignment = Alignment.CenterVertically) {
 
@@ -75,15 +77,62 @@ fun HighlightsSearchBar(
                 visualTransformation = VisualTransformation.None,
                 interactionSource = interactionSource,
                 modifier = Modifier
+                    .then(
+                        focusRequester.let { Modifier.focusRequester(it) }
+                    )
                     .fillMaxWidth()
                     .background(Color.Transparent)
             )
         }
+        if (searchQuery.isNotEmpty()) {
+            Icon(
+                painter = painterResource(R.drawable.ic_close),
+                contentDescription = "clear field",
+                modifier = Modifier.clickable(
+                    onClick = { searchQuery = "" }
+                )
+            )
+        }
     }
 }
 
+@Composable
+fun HighlightsSearchBarUI(
+    onClick: () -> Unit,
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .background(Color.White, RoundedCornerShape(100.dp))
+            .border(1.dp, GrayLight, RoundedCornerShape(100.dp))
+            .clip(RoundedCornerShape(100.dp))
+            .clickable(
+            ) { onClick() }
+            .padding(horizontal = 16.dp, vertical = 8.dp),
+        verticalAlignment = Alignment.CenterVertically) {
+
+        Icon(
+            painter = painterResource(R.drawable.search),
+            contentDescription = "search icon",
+            tint = Color.Unspecified
+        )
+
+        Spacer(Modifier.width(8.dp))
+        Text(
+            text = "Search keywords",
+            style = bodyNormal.copy(color = Color.Gray)
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun HighlightsSearchBarUIPreview() {
+    HighlightsSearchBarUI({})
+}
+
 @Preview
 @Composable
 private fun HighlightsSearchBarPreview() {
-    HighlightsSearchBar({})
+    HighlightsSearchBar({}, FocusRequester() )
 }

app/src/main/java/com/cornellappdev/score/components/highlights/RecentSearches.kt

@@ -0,0 +1,80 @@
+package com.cornellappdev.score.components.highlights
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.material3.Icon
+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.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.cornellappdev.score.R
+import com.cornellappdev.score.components.ScorePreview
+import com.cornellappdev.score.theme.Style.bodyMedium
+import com.cornellappdev.score.theme.Style.metricSmallNormal
+
+
+@Composable
+fun RecentSearchItem(
+    query: String
+) {
+    Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween,
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+            modifier = Modifier.clickable(onClick = {/*search the query*/ })
+        ) {
+            Icon(
+                painter = painterResource(R.drawable.search),
+                contentDescription = "search icon",
+                tint = Color.Unspecified
+            )
+            Text(query, style = metricSmallNormal)
+        }
+
+        //this icon doesn't preview correctly since its too small, works when actually running though
+        Icon(
+            painter = painterResource(R.drawable.ic_close),
+            contentDescription = "close icon",
+            tint = Color.Unspecified,
+            modifier = Modifier.clickable(onClick = {/*delete this search from the recent searches list*/ })
+        )
+
+    }
+}
+
+@Composable
+fun RecentSearches(
+    recentQueriesList: List<String>
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+    ) {
+        Text("Recent searches", style = bodyMedium)
+        recentQueriesList.map { query ->
+            Spacer(Modifier.height(16.dp))
+            RecentSearchItem(query)
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun RecentSearchItemPreview() {
+    ScorePreview {
+        RecentSearches(listOf("Columbia", "Men's ice hockey", "Late goal lifts No.6 men’s hockey"))
+    }
+}