android: Render filled icon for selected bottom nav icon (#326)

Signed-off-by: Rahul Krishna <Rahulkrishna585@gmail.com>

android/src/main/kotlin/dev/msfjarvis/claw/android/ui/LobstersApp.kt

@@ -87,6 +87,7 @@ fun LobstersApp(
           label = "Hottest",
           route = Destinations.Hottest.getRoute(),
           icon = ClawIcons.Flame,
+          selectedIcon = ClawIcons.FlameFilled,
         ) {
           coroutineScope.launch { hottestListState.animateScrollToItem(index = 0) }
         },
@@ -94,6 +95,7 @@ fun LobstersApp(
           label = "Newest",
           route = Destinations.Newest.getRoute(),
           icon = ClawIcons.New,
+          selectedIcon = ClawIcons.NewFilled,
         ) {
           coroutineScope.launch { newestListState.animateScrollToItem(index = 0) }
         },
@@ -101,6 +103,7 @@ fun LobstersApp(
           label = "Saved",
           route = Destinations.Saved.getRoute(),
           icon = ClawIcons.HeartBorder,
+          selectedIcon = ClawIcons.Heart,
         ) {
           coroutineScope.launch { savedListState.animateScrollToItem(index = 0) }
         },

android/src/main/kotlin/dev/msfjarvis/claw/android/ui/decorations/ClawNavigationBar.kt

@@ -1,6 +1,7 @@
 package dev.msfjarvis.claw.android.ui.decorations
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.Crossfade
 import androidx.compose.material3.Icon
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarItem
@@ -28,12 +29,20 @@ fun ClawNavigationBar(
   ) {
     NavigationBar(modifier = modifier) {
       items.forEach { navItem ->
+        val isCurrentDestination = navController.currentDestination?.route == navItem.route
         NavigationBarItem(
-          icon = { Icon(painter = navItem.icon, contentDescription = navItem.label.uppercase()) },
+          icon = {
+            Crossfade(isCurrentDestination) {
+              Icon(
+                painter = if (it) navItem.selectedIcon else navItem.icon,
+                contentDescription = navItem.label.uppercase()
+              )
+            }
+          },
           label = { Text(text = navItem.label) },
-          selected = navController.currentDestination?.route == navItem.route,
+          selected = isCurrentDestination,
           onClick = {
-            if (navController.currentDestination?.route == navItem.route) {
+            if (isCurrentDestination) {
               navItem.listStateResetCallback()
               return@NavigationBarItem
             }
@@ -52,5 +61,6 @@ class NavigationItem(
   val label: String,
   val route: String,
   val icon: Painter,
+  val selectedIcon: Painter,
   val listStateResetCallback: () -> Unit,
 )

common/src/commonMain/kotlin/dev/msfjarvis/claw/common/res/ClawIcons.kt

@@ -5,8 +5,10 @@ import dev.msfjarvis.claw.common.res.clawicons.comment_black_24dp
 import dev.msfjarvis.claw.common.res.clawicons.favorite_black_24dp
 import dev.msfjarvis.claw.common.res.clawicons.favorite_border_black_24dp
 import dev.msfjarvis.claw.common.res.clawicons.new_releases_black_24dp
+import dev.msfjarvis.claw.common.res.clawicons.new_releases_filled_black_24dp
 import dev.msfjarvis.claw.common.res.clawicons.public_black_24dp
 import dev.msfjarvis.claw.common.res.clawicons.whatshot_black_24dp
+import dev.msfjarvis.claw.common.res.clawicons.whatshot_filled_black_24dp
 
 object ClawIcons {
 
@@ -16,11 +18,15 @@ object ClawIcons {
 
   val Flame = whatshot_black_24dp()
 
+  val FlameFilled = whatshot_filled_black_24dp()
+
   val Heart = favorite_black_24dp()
 
   val HeartBorder = favorite_border_black_24dp()
 
   val New = new_releases_black_24dp()
 
+  val NewFilled = new_releases_filled_black_24dp()
+
   val Web = public_black_24dp()
 }

common/src/commonMain/svgs/new_releases_filled_black_24dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12zm-10 5h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>

common/src/commonMain/svgs/whatshot_filled_black_24dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/></svg>