UI: Add empty state to saved trips and update usual ride copy (#339)

### TL;DR
Added empty state messaging to saved trips screen and enhanced the usual ride screen with clearer copy and visual improvements.

### What changed?
- Added an empty state with emoji and friendly message when no saved trips exist
- Updated the usual ride screen copy to be more engaging ("Let's set the vibe")
- Added a subtitle asking for favorite color selection
- Modified the CTA button text to show "Pick one" when nothing is selected
- Removed animation tweening from saved trip cards
- Switched from Preview to PreviewLightDark for better theme testing

### Screenshots

<img width="418" alt="Screenshot 2024-11-12 at 7 39 59 pm" src="https://github.com/user-attachments/assets/b17e24dc-b1ef-443c-adfb-19ae88dfdbd5">


<img width="291" alt="Screenshot 2024-11-12 at 8 05 39 pm" src="https://github.com/user-attachments/assets/c2212d5f-665a-4ce8-bb66-ac11a0956ee4">


### Why make this change?
To improve user experience by providing clear feedback when no saved trips exist and make the usual ride screen more engaging and intuitive with better copy and visual hierarchy.

feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/savedtrips/SavedTripsScreen.kt

@@ -3,7 +3,6 @@ package xyz.ksharma.krail.trip.planner.ui.savedtrips
 import androidx.activity.ComponentActivity
 import androidx.activity.SystemBarStyle
 import androidx.activity.enableEdgeToEdge
-import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -30,6 +29,7 @@ import xyz.ksharma.krail.design.system.components.Text
 import xyz.ksharma.krail.design.system.components.TitleBar
 import xyz.ksharma.krail.design.system.theme.KrailTheme
 import xyz.ksharma.krail.trip.planner.ui.R
+import xyz.ksharma.krail.trip.planner.ui.components.ErrorMessage
 import xyz.ksharma.krail.trip.planner.ui.components.SavedTripCard
 import xyz.ksharma.krail.trip.planner.ui.components.SearchStopRow
 import xyz.ksharma.krail.trip.planner.ui.components.hexToComposeColor
@@ -82,33 +82,46 @@ fun SavedTripsScreen(
                     Spacer(modifier = Modifier.height(12.dp))
                 }
 
-                items(
-                    items = savedTripsState.savedTrips,
-                    key = { it.fromStopId + it.toStopId },
-                ) { trip ->
+                if (savedTripsState.savedTrips.isEmpty()) {
+                    item(key = "empty_state") {
+                        ErrorMessage(
+                            emoji = "🌟",
+                            title = "Ready to roll, mate?",
+                            message = "Star your fave trips and they'll be right here!",
+                            modifier = Modifier
+                                .padding(horizontal = 16.dp)
+                                .animateItem(),
+                        )
+                    }
+                } else {
+                    items(
+                        items = savedTripsState.savedTrips,
+                        key = { it.fromStopId + it.toStopId },
+                    ) { trip ->
 
-                    SavedTripCard(
-                        trip = trip,
-                        onStarClick = { onEvent(SavedTripUiEvent.DeleteSavedTrip(trip)) },
-                        onCardClick = {
-                            onSearchButtonClick(
-                                StopItem(
-                                    stopId = trip.fromStopId,
-                                    stopName = trip.fromStopName,
-                                ),
-                                StopItem(
-                                    stopId = trip.toStopId,
-                                    stopName = trip.toStopName,
-                                ),
-                            )
-                        },
-                        primaryTransportMode = null, // TODO
-                        modifier = Modifier
-                            .padding(horizontal = 16.dp)
-                            .animateItem(fadeOutSpec = tween(durationMillis = 500)),
-                    )
+                        SavedTripCard(
+                            trip = trip,
+                            onStarClick = { onEvent(SavedTripUiEvent.DeleteSavedTrip(trip)) },
+                            onCardClick = {
+                                onSearchButtonClick(
+                                    StopItem(
+                                        stopId = trip.fromStopId,
+                                        stopName = trip.fromStopName,
+                                    ),
+                                    StopItem(
+                                        stopId = trip.toStopId,
+                                        stopName = trip.toStopName,
+                                    ),
+                                )
+                            },
+                            primaryTransportMode = null, // TODO
+                            modifier = Modifier
+                                .padding(horizontal = 16.dp)
+                                .animateItem(),
+                        )
 
-                    Spacer(modifier = Modifier.height(12.dp))
+                        Spacer(modifier = Modifier.height(12.dp))
+                    }
                 }
             }
         }

feature/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/usualride/UsualRideScreen.kt

@@ -30,7 +30,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import kotlinx.collections.immutable.ImmutableSet
@@ -74,9 +74,21 @@ fun UsualRideScreen(
         LazyColumn(contentPadding = PaddingValues(top = 24.dp, bottom = 152.dp)) {
             item {
                 Text(
-                    text = "What's your usual ride mate?",
+                    text = "Let's set the vibe.",
                     style = KrailTheme.typography.headlineLarge.copy(fontWeight = FontWeight.Normal),
-                    modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp),
+                    modifier = Modifier
+                        .padding(horizontal = 24.dp)
+                        .padding(bottom = 8.dp, top = 16.dp),
+                )
+            }
+
+            item {
+                Text(
+                    text = "What's your favourite color, mate?",
+                    style = KrailTheme.typography.bodyMedium,
+                    modifier = Modifier
+                        .padding(horizontal = 24.dp)
+                        .padding(bottom = 16.dp),
                 )
             }
 
@@ -92,7 +104,7 @@ fun UsualRideScreen(
         }
 
         Text(
-            text = if (selectedProductClass != null) "Let's Go, Yeah!" else "Let's Go",
+            text = if (selectedProductClass != null) "Let's Go, Yeah!" else "Pick one.",
             modifier = Modifier
                 .fillMaxWidth()
                 .clip(RoundedCornerShape(topStart = 24.dp, topEnd = 24.dp))
@@ -168,7 +180,7 @@ private fun TransportModeRadioButton(
     }
 }
 
-@Preview
+@PreviewLightDark
 @Composable
 private fun PreviewUsualRideScreen() {
     KrailTheme {