feat: add navigation transitions with fade animations for improved user experience

CollabTableAndroid/app/build.gradle

@@ -65,6 +65,8 @@ dependencies {
     implementation 'androidx.compose.material3:material3:1.1.2'
     implementation 'androidx.compose.material:material-icons-extended'
     implementation 'androidx.navigation:navigation-compose:2.7.5'
+    // Animation (for navigation transitions)
+    implementation 'androidx.compose.animation:animation'
     
     // ViewModel
     implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.2'

CollabTableAndroid/app/src/main/java/com/collabtable/app/ui/navigation/MainApp.kt

@@ -1,5 +1,8 @@
 package com.collabtable.app.ui.navigation
 
+import androidx.compose.animation.core.tween
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
@@ -115,14 +118,26 @@ fun MainApp() {
                 navController = navController,
                 startDestination = Routes.Tables,
             ) {
-                composable(Routes.Tables) {
+                composable(
+                    route = Routes.Tables,
+                    enterTransition = { fadeIn(tween(200)) },
+                    exitTransition = { fadeOut(tween(200)) },
+                    popEnterTransition = { fadeIn(tween(200)) },
+                    popExitTransition = { fadeOut(tween(200)) },
+                ) {
                     ListsScreen(
                         onNavigateToList = { listId -> navController.navigate("list/$listId") },
                         onNavigateToSettings = { navController.navigate(Routes.Settings) },
                         onNavigateToLogs = { navController.navigate(Routes.Logs) },
                     )
                 }
-                composable(Routes.Settings) {
+                composable(
+                    route = Routes.Settings,
+                    enterTransition = { fadeIn(tween(200)) },
+                    exitTransition = { fadeOut(tween(200)) },
+                    popEnterTransition = { fadeIn(tween(200)) },
+                    popExitTransition = { fadeOut(tween(200)) },
+                ) {
                     SettingsScreen(
                         onNavigateBack = { navController.popBackStack() },
                         onNavigateToLogs = { navController.navigate(Routes.Logs) },
@@ -132,12 +147,22 @@ fun MainApp() {
                         },
                     )
                 }
-                composable(Routes.Logs) {
+                composable(
+                    route = Routes.Logs,
+                    enterTransition = { fadeIn(tween(200)) },
+                    exitTransition = { fadeOut(tween(200)) },
+                    popEnterTransition = { fadeIn(tween(200)) },
+                    popExitTransition = { fadeOut(tween(200)) },
+                ) {
                     LogsScreen(onNavigateBack = { navController.popBackStack() })
                 }
                 composable(
                     route = Routes.ListDetail,
                     arguments = listOf(navArgument("listId") { type = NavType.StringType }),
+                    enterTransition = { fadeIn(tween(200)) },
+                    exitTransition = { fadeOut(tween(200)) },
+                    popEnterTransition = { fadeIn(tween(200)) },
+                    popExitTransition = { fadeOut(tween(200)) },
                 ) { backStackEntry ->
                     val listId = backStackEntry.arguments?.getString("listId") ?: return@composable
                     ListDetailScreen(listId = listId, onNavigateBack = { navController.popBackStack() })