[3/3] onboarding favorite sport selector

app/src/main/java/com/cornellappdev/score/MainActivity.kt

@@ -4,14 +4,16 @@ import android.os.Bundle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatActivity
-import androidx.core.content.edit
 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.core.content.edit
 import com.cornellappdev.score.model.OnboardingPreferencesRepository
 import com.cornellappdev.score.nav.root.RootNavigation
+import com.cornellappdev.score.screen.FavoriteSport
+import com.cornellappdev.score.screen.OnboardingFavoriteSportsScreen
 import com.cornellappdev.score.screen.OnboardingProfileSelectScreen
 import com.cornellappdev.score.screen.OnboardingScreen
 import com.google.firebase.Firebase
@@ -22,12 +24,14 @@ import javax.inject.Inject
 
 private const val APP_PREFERENCES = "score_app_preferences"
 private const val KEY_ONBOARDING_PROFILE_PICTURE = "onboarding_profile_picture"
+private const val KEY_ONBOARDING_FAVORITE_SPORTS = "onboarding_favorite_sports"
 
 private lateinit var firebaseAnalytics: FirebaseAnalytics
 
 private enum class OnboardingStep {
     WELCOME,
     PROFILE_SELECT,
+    SPORT_SELECT,
     COMPLETE
 }
 
@@ -42,6 +46,10 @@ class MainActivity : AppCompatActivity() {
 
         val onboardingCompleted = onboardingPreferencesRepository.isOnboardingCompleted()
         val preferences = getSharedPreferences(APP_PREFERENCES, MODE_PRIVATE)
+        val savedFavoriteSportKeys = preferences
+            .getStringSet(KEY_ONBOARDING_FAVORITE_SPORTS, emptySet())
+            .orEmpty()
+            .joinToString("|")
 
         setContent {
             var onboardingStep by rememberSaveable {
@@ -69,6 +77,19 @@ class MainActivity : AppCompatActivity() {
                         preferences.edit {
                             putString(KEY_ONBOARDING_PROFILE_PICTURE, selectedPicture.name)
                         }
+                        onboardingStep = OnboardingStep.SPORT_SELECT
+                    }
+                )
+
+                OnboardingStep.SPORT_SELECT -> OnboardingFavoriteSportsScreen(
+                    initiallySelectedKeys = savedFavoriteSportKeys,
+                    onFinish = { selectedSports ->
+                        preferences.edit {
+                            putStringSet(
+                                KEY_ONBOARDING_FAVORITE_SPORTS,
+                                selectedSports.map(FavoriteSport::storageKey).toSet()
+                            )
+                        }
                         completeOnboarding()
                     }
                 )

app/src/main/java/com/cornellappdev/score/components/GenderDivisionFilter.kt

@@ -0,0 +1,95 @@
+package com.cornellappdev.score.components
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+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.selection.selectable
+import androidx.compose.foundation.selection.selectableGroup
+import androidx.compose.foundation.shape.CircleShape
+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.graphics.Color
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.cornellappdev.score.model.GenderDivision
+import com.cornellappdev.score.theme.CrimsonPrimary
+import com.cornellappdev.score.theme.GrayLight
+import com.cornellappdev.score.theme.GrayMedium
+import com.cornellappdev.score.theme.Style
+import com.cornellappdev.score.theme.White
+
+/** Accessible, single-choice filter shared by the Home screen and onboarding. */
+@Composable
+fun GenderDivisionFilter(
+    selectedGender: GenderDivision,
+    onGenderSelected: (GenderDivision) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    val options = listOf(
+        GenderDivision.ALL,
+        GenderDivision.MALE,
+        GenderDivision.FEMALE
+    )
+
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 24.dp)
+            .height(48.dp)
+            .border(BorderStroke(1.dp, GrayLight), CircleShape)
+            .padding(5.dp)
+            .selectableGroup(),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        options.forEach { gender ->
+            val selected = gender == selectedGender
+            Box(
+                modifier = Modifier
+                    .weight(1f)
+                    .fillMaxHeight()
+                    .background(
+                        color = if (selected) CrimsonPrimary else Color.Transparent,
+                        shape = CircleShape
+                    )
+                    .selectable(
+                        selected = selected,
+                        role = Role.RadioButton,
+                        onClick = { onGenderSelected(gender) }
+                    ),
+                contentAlignment = Alignment.Center
+            ) {
+                Text(
+                    text = gender.displayName,
+                    style = if (selected) Style.bodySemibold else Style.bodyMedium,
+                    color = if (selected) White else GrayMedium
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun GenderDivisionFilterPreview() {
+    ScorePreview {
+        var selectedGender by remember { mutableStateOf(GenderDivision.ALL) }
+
+        GenderDivisionFilter(
+            selectedGender = selectedGender,
+            onGenderSelected = { selectedGender = it }
+        )
+    }
+}

app/src/main/java/com/cornellappdev/score/components/SportSelectorHeader.kt

@@ -1,14 +1,10 @@
 package com.cornellappdev.score.components
 
-import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.border
 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
@@ -17,7 +13,6 @@ import androidx.compose.foundation.layout.sizeIn
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -26,7 +21,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -35,10 +29,7 @@ import com.cornellappdev.score.R
 import com.cornellappdev.score.model.GenderDivision
 import com.cornellappdev.score.model.SportSelection
 import com.cornellappdev.score.theme.CrimsonPrimary
-import com.cornellappdev.score.theme.GrayLight
 import com.cornellappdev.score.theme.GrayMedium
-import com.cornellappdev.score.theme.Style.bodyMedium
-import com.cornellappdev.score.theme.Style.bodySemibold
 import com.cornellappdev.score.theme.Style.labelsMedium
 import com.cornellappdev.score.theme.Style.labelsNormal
 import com.cornellappdev.score.theme.White
@@ -59,24 +50,10 @@ fun SportSelectorHeader(
             .background(color = White),
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
-        Row(
-            modifier = Modifier
-                .border(
-                    border = BorderStroke(1.dp, GrayLight),
-                    shape = RoundedCornerShape(100)
-                )
-                .padding(6.dp)
-        ) {
-            GenderSelector(GenderDivision.ALL, selectedGender == GenderDivision.ALL) {
-                onGenderSelected(GenderDivision.ALL)
-            }
-            GenderSelector(GenderDivision.MALE, selectedGender == GenderDivision.MALE) {
-                onGenderSelected(GenderDivision.MALE)
-            }
-            GenderSelector(GenderDivision.FEMALE, selectedGender == GenderDivision.FEMALE) {
-                onGenderSelected(GenderDivision.FEMALE)
-            }
-        }
+        GenderDivisionFilter(
+            selectedGender = selectedGender,
+            onGenderSelected = onGenderSelected
+        )
         Spacer(Modifier.height(24.dp))
         LazyRow(
             Modifier.fillMaxWidth(),
@@ -116,29 +93,6 @@ fun SportSelectorHeader(
     }
 }
 
-@Composable
-fun GenderSelector(option: GenderDivision, isSelected: Boolean, onSelect: () -> Unit) {
-    Box(
-        modifier = Modifier
-            .clickable(onClick = {
-                onSelect()
-            })
-            .width(111.dp)
-            .background(
-                color = if (isSelected) CrimsonPrimary else Color.Transparent,
-                shape = RoundedCornerShape(100) // Rounded background
-            )
-            .padding(vertical = 8.dp, horizontal = 12.dp),
-        contentAlignment = Alignment.Center
-    ) {
-        Text(
-            text = option.displayName,
-            style = if (isSelected) bodySemibold else bodyMedium,
-            color = if (isSelected) White else GrayMedium
-        )
-    }
-}
-
 @Composable
 fun SportSelector(
     empty: Painter,