refactor: start to move from voyager to navigation3

I want to move away from the easy but limited voyager library ind implement my own navigation

app/build.gradle.kts

@@ -1,7 +1,7 @@
 plugins {
     alias(libs.plugins.android.application)
     alias(libs.plugins.kotlin.compose)
-    alias(libs.plugins.jetbrains.kotlin.serialization)
+    alias(libs.plugins.kotlin.serialization)
     alias(libs.plugins.ksp)
 }
 
@@ -61,9 +61,7 @@ dependencies {
     implementation(libs.androidx.navigation3.runtime)
     implementation(libs.androidx.lifecycle.viewmodel.navigation3)
     implementation(libs.androidx.material3.adaptive.navigation3)
-    implementation(libs.kotlinx.serialization.core)
-
-    implementation(libs.bundles.voyager)
+    implementation(libs.kotlinx.serialization.json)
 
     // Room
     implementation(libs.androidx.room.runtime)

app/src/main/java/com/fabisahne/cloudsync/MainActivity.kt

@@ -5,8 +5,6 @@ import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.compose.material3.ExperimentalMaterial3Api
-import cafe.adriel.voyager.navigator.Navigator
-import com.fabisahne.cloudsync.ui.screens.HomeScreen
 import com.fabisahne.cloudsync.ui.theme.CloudSyncTheme
 
 class MainActivity : ComponentActivity() {
@@ -17,7 +15,7 @@ class MainActivity : ComponentActivity() {
         enableEdgeToEdge()
         setContent {
             CloudSyncTheme {
-                Navigator(HomeScreen)
+//                Navigator(HomeScreen)
             }
         }
     }

app/src/main/java/com/fabisahne/cloudsync/navigation/Route.kt

@@ -0,0 +1,27 @@
+package com.fabisahne.cloudsync.navigation
+
+import androidx.navigation3.runtime.NavKey
+import kotlinx.serialization.Serializable
+
+@Serializable
+sealed interface Route : NavKey {
+    // Screens
+    @Serializable
+    data object HomeScreen : Route, NavKey
+
+    @Serializable
+    data class FolderPairScreen(val id: Long) : Route, NavKey
+
+    // Tabs
+    @Serializable
+    data object AccountTab : Route, NavKey
+
+    @Serializable
+    data object FolderPairTab : Route, NavKey
+
+    @Serializable
+    data object HistoryTab : Route, NavKey
+
+    @Serializable
+    data object SettingsTab : Route, NavKey
+}

app/src/main/java/com/fabisahne/cloudsync/ui/navigation/navigation.kt

@@ -1,22 +0,0 @@
-package com.fabisahne.cloudsync.ui.navigation
-
-import androidx.compose.foundation.layout.RowScope
-import androidx.compose.material3.Icon
-import androidx.compose.material3.NavigationBarItem
-import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
-import cafe.adriel.voyager.navigator.tab.LocalTabNavigator
-import cafe.adriel.voyager.navigator.tab.Tab
-
-
-@Composable
-fun RowScope.TabNavigationItem(tab: Tab) {
-    val tabNavigator = LocalTabNavigator.current
-
-    NavigationBarItem(
-        selected = tabNavigator.current.key == tab.key,
-        onClick = { tabNavigator.current = tab },
-        label = { Text(tab.options.title) },
-        icon = { Icon(painter = tab.options.icon!!, contentDescription = tab.options.title) }
-    )
-}

app/src/main/java/com/fabisahne/cloudsync/ui/screens/FolderPairScreen.kt

@@ -8,25 +8,26 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import cafe.adriel.voyager.core.screen.Screen
+import androidx.lifecycle.viewmodel.compose.viewModel
+import com.fabisahne.cloudsync.viewmodels.FolderPairScreenViewModel
 
-data class FolderPairScreen(
-    val id: Long
-) : Screen {
-    @OptIn(ExperimentalMaterial3Api::class)
-    @Composable
-    override fun Content() {
-        Scaffold(
-            topBar = {
-                TopAppBar(
-                    title = { Text("Folder Pair") }
-                )
-            },
-            content = { contentPadding ->
-                Surface(modifier = Modifier.padding(contentPadding)) {
-                    Text("ASDF: $id")
-                }
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun FolderPairScreen(
+    modifier: Modifier = Modifier,
+    viewModel: FolderPairScreenViewModel = viewModel(),
+    id: Long
+) {
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                title = { Text("Folder Pair") }
+            )
+        },
+        content = { contentPadding ->
+            Surface(modifier = modifier.padding(contentPadding)) {
+                Text("ASDF: $id")
             }
-        )
-    }
+        }
+    )
 }

app/src/main/java/com/fabisahne/cloudsync/ui/screens/HomeScreen.kt

@@ -1,7 +1,12 @@
 package com.fabisahne.cloudsync.ui.screens
 
 import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Route
+import androidx.compose.material3.Button
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.NavigationBar
 import androidx.compose.material3.NavigationBarDefaults
 import androidx.compose.material3.Scaffold
@@ -10,55 +15,46 @@ import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import cafe.adriel.voyager.core.screen.Screen
-import cafe.adriel.voyager.navigator.LocalNavigator
-import cafe.adriel.voyager.navigator.currentOrThrow
-import cafe.adriel.voyager.navigator.tab.CurrentTab
-import cafe.adriel.voyager.navigator.tab.TabNavigator
-import com.fabisahne.cloudsync.ui.navigation.TabNavigationItem
 import com.fabisahne.cloudsync.ui.tabs.AccountTab
 import com.fabisahne.cloudsync.ui.tabs.FolderPairTab
 import com.fabisahne.cloudsync.ui.tabs.HistoryTab
 import com.fabisahne.cloudsync.ui.tabs.SettingsTab
 
 
-object HomeScreen : Screen {
-    private fun readResolve(): Any = HomeScreen
-
-    private val TABS = listOf(
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun HomeScreen(
+    modifier: Modifier = Modifier
+) {
+    val tabs = listOf(
         HistoryTab,
         FolderPairTab,
         AccountTab,
         SettingsTab,
     )
 
-    @OptIn(ExperimentalMaterial3Api::class)
-    @Composable
-    override fun Content() {
-        val navigator = LocalNavigator.currentOrThrow
-
-        TabNavigator(
-            HistoryTab
-        ) { tabNavigator ->
-            Scaffold(
-                topBar = {
-                    TopAppBar(
-                        title = { Text(text = tabNavigator.current.options.title) }
-                    )
-                },
-                content = { padding ->
-                    Surface(modifier = Modifier.padding(padding)) {
-                        CurrentTab()
-                    }
-                },
-                bottomBar = {
-                    NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
-                        TABS.forEach {
-                            TabNavigationItem(it)
-                        }
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                title = { Text("Home Screen") }
+            )
+        },
+        content = { padding ->
+            Surface(modifier = modifier.padding(padding)) {
+                Text("Home Screen Content")
+            }
+        },
+        bottomBar = {
+            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
+                tabs.forEach { _ ->
+                    Button({}) {
+                        Icon(
+                            Icons.Default.Route,
+                            null
+                        )
                     }
                 }
-            )
+            }
         }
-    }
+    )
 }

app/src/main/java/com/fabisahne/cloudsync/ui/tabs/SettingsTab.kt

@@ -1,7 +1,6 @@
 package com.fabisahne.cloudsync.ui.tabs
 
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.AccountBox
 import androidx.compose.material.icons.filled.Settings
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable

app/src/main/java/com/fabisahne/cloudsync/viewmodels/FolderPairScreenViewModel.kt

@@ -0,0 +1,20 @@
+package com.fabisahne.cloudsync.viewmodels
+
+import androidx.lifecycle.ViewModel
+import com.fabisahne.cloudsync.data.FolderPair
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asStateFlow
+
+class FolderPairScreenViewModel(
+    private val id: Long
+) : ViewModel() {
+    private val _state = MutableStateFlow(
+        FolderPair(
+            id = id,
+            name = "ASDF",
+            localDir = "asdf/asdf",
+            cloudPath = "cloud/folder"
+        )
+    )
+    val state = _state.asStateFlow()
+}