Highlights Search Screen UI

app/build.gradle.kts

@@ -62,16 +62,15 @@ 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("androidx.compose.ui:ui-tooling-preview:1.4.3")
+    implementation(platform("androidx.compose:compose-bom:2025.11.01"))
+    implementation("androidx.compose.ui:ui")
+    implementation("androidx.compose.ui:ui-tooling-preview")
     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")
@@ -80,15 +79,13 @@ dependencies {
     implementation(libs.androidx.core.ktx)
     implementation(libs.androidx.appcompat)
     implementation(libs.material)
-    implementation("io.coil-kt:coil-compose:2.0.0")
     implementation(libs.androidx.activity)
     implementation(libs.androidx.constraintlayout)
     implementation(libs.androidx.runtime.android)
     testImplementation(libs.junit)
     debugImplementation("androidx.compose.ui:ui-tooling")
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
-    implementation(libs.apollo.runtime)
     implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.1")
     implementation(libs.apollo.runtime)
     implementation("io.coil-kt.coil3:coil-compose:3.1.0")

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

@@ -0,0 +1,146 @@
+package com.cornellappdev.score.components.highlights
+
+import androidx.compose.animation.AnimatedContent
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+import androidx.compose.animation.togetherWith
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+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.Text
+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.R
+import com.cornellappdev.score.components.EmptyStateBox
+import com.cornellappdev.score.components.ScorePreview
+import com.cornellappdev.score.model.HighlightData
+import com.cornellappdev.score.theme.Style.bodyNormal
+import com.cornellappdev.score.util.highlightsList
+import com.cornellappdev.score.util.recentSearchList
+
+sealed interface SearchResultsState {
+    data object Recent : SearchResultsState
+    data class Results(val items: List<HighlightData>) : SearchResultsState
+    data object Empty : SearchResultsState
+}
+
+@Composable
+fun HighlightsCardLazyColumn(
+    recentSearchList: List<String>,
+    query: String,
+    highlightsList: List<HighlightData>,
+    onItemClick: () -> Unit,
+    onCloseClick: () -> Unit,
+    numResultsHeader: (@Composable () -> Unit)? = null
+) {
+
+    Column(
+        modifier = Modifier.padding(horizontal = 24.dp)
+    ) {
+        /*todo: move to VM*/
+        val resultsState: SearchResultsState =
+            when {
+                recentSearchList.isNotEmpty() && query.isEmpty() ->
+                    SearchResultsState.Recent
+
+                query.isNotEmpty() -> {
+                    val filtered = highlightsList.filter {
+                        it.title.contains(query, ignoreCase = true)
+                    }
+
+                    if (filtered.isEmpty()) {
+                        SearchResultsState.Empty
+                    } else {
+                        SearchResultsState.Results(filtered)
+                    }
+                }
+
+                else -> SearchResultsState.Recent
+            }
+
+
+        AnimatedContent(
+            targetState = resultsState,
+            transitionSpec = {
+                (fadeIn() + slideInVertically { it / 8 }) togetherWith
+                        (fadeOut() + slideOutVertically { -it / 8 })
+            },
+            label = "SearchResultsAnimation"
+        ) { state ->
+
+            when (state) {
+                SearchResultsState.Recent -> {
+                    RecentSearches(
+                        recentSearchList,
+                        onItemClick,
+                        onCloseClick
+                    )
+                }
+
+                SearchResultsState.Empty -> {
+                    EmptyStateBox(
+                        icon = R.drawable.ic_kid_star,
+                        title = "No results yet."
+                    )
+                }
+
+                is SearchResultsState.Results -> {
+                    Column {
+                        numResultsHeader?.invoke()
+
+                        LazyColumn(
+                            verticalArrangement = Arrangement.spacedBy(16.dp)
+                        ) {
+                            items(state.items) { item ->
+                                when (item) {
+                                    is HighlightData.Video ->
+                                        VideoHighlightCard(item.data, true)
+
+                                    is HighlightData.Article ->
+                                        ArticleHighlightCard(item.data, true)
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* Used to display number of results in on HighlightsSearchScreen*/
+@Composable
+fun HighlightsCardLazyColumnResultsHeader(
+    size: Int
+) {
+    Column {
+        Text("$size Results", style = bodyNormal)
+        Spacer(Modifier.height(16.dp))
+    }
+}
+
+@Preview
+@Composable
+private fun HighlightsCardLazyColumnSubScreenPreview() {
+    ScorePreview {
+        HighlightsCardLazyColumn(recentSearchList, "", highlightsList, {}, {})
+    }
+}
+
+@Preview
+@Composable
+private fun HighlightsCardLazyColumnSearchResultsPreview() {
+    ScorePreview {
+        HighlightsCardLazyColumn(
+            recentSearchList, "hockey", highlightsList, {}, {},
+            { HighlightsCardLazyColumnResultsHeader(highlightsList.size) })
+    }
+}

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

@@ -0,0 +1,33 @@
+package com.cornellappdev.score.components.highlights
+
+import androidx.compose.foundation.layout.Column
+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.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.Sport
+import com.cornellappdev.score.util.sportList
+
+@Composable
+fun HighlightsScreenSearchFilterBar(
+    sportList: List<Sport>
+) {
+    Column(modifier = Modifier.fillMaxWidth()) {
+        HighlightsSearchBar(modifier = Modifier.padding(horizontal = 24.dp))
+        Spacer(modifier = Modifier.height(16.dp))
+        HighlightsFilterRow(sportList, {/*todo on filter selected*/ })
+    }
+}
+
+@Preview
+@Composable
+private fun HighlightsScreenSearchFilterBarPreview() {
+    ScorePreview {
+        HighlightsScreenSearchFilterBar(sportList)
+    }
+}