UI Setup

build.gradle.kts

@@ -7,4 +7,5 @@ plugins {
     alias(libs.plugins.compose.compiler) apply false
     alias(libs.plugins.kotlinJvm) apply false
     alias(libs.plugins.kotlinMultiplatform) apply false
-}
+    alias(libs.plugins.jetbrains.kotlin.android) apply false
+}

composeApp/build.gradle.kts

@@ -64,6 +64,9 @@ kotlin {
             implementation(compose.components.resources)
             implementation(compose.components.uiToolingPreview)
             implementation(projects.shared)
+            implementation(libs.voyager.navigator)
+            implementation(libs.voyager.navigator.transitions)
+            implementation(libs.voyager.screenmodel)
         }
         desktopMain.dependencies {
             implementation(compose.desktop.currentOs)

composeApp/src/androidMain/AndroidManifest.xml

@@ -2,16 +2,17 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <application
+        android:name="app.architect.notes.NotesAppApplication"
         android:allowBackup="true"
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
         android:theme="@android:style/Theme.Material.Light.NoActionBar">
         <activity
-            android:exported="true"
+            android:name=".MainActivity"
             android:configChanges="orientation|screenSize|screenLayout|keyboardHidden|mnc|colorMode|density|fontScale|fontWeightAdjustment|keyboard|layoutDirection|locale|mcc|navigation|smallestScreenSize|touchscreen|uiMode"
-            android:name=".MainActivity">
+            android:exported="true">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
 
@@ -20,4 +21,4 @@
         </activity>
     </application>
 
-</manifest>
+</manifest>

composeApp/src/androidMain/kotlin/com/app/academy/notes/MainActivity.kt

@@ -1,6 +1,6 @@
 package com.app.academy.notes
 
-import App
+import com.app.academy.App
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
@@ -21,4 +21,4 @@ class MainActivity : ComponentActivity() {
 @Composable
 fun AppAndroidPreview() {
     App()
-}
+}

composeApp/src/androidMain/kotlin/com/app/academy/notes/NotesAppApplication.kt

@@ -0,0 +1,10 @@
+package app.architect.notes
+
+import android.app.Application
+
+class NotesAppApplication : Application() {
+
+    override fun onCreate() {
+        super.onCreate()
+    }
+}

composeApp/src/commonMain/kotlin/com/app/academy/App.kt

@@ -0,0 +1,31 @@
+package com.app.academy
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.Button
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.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 app.architect.notes.utils.Greeting
+import com.app.academy.theme.NotesAppTheme
+import kmpnotes.composeapp.generated.resources.Res
+import kmpnotes.composeapp.generated.resources.compose_multiplatform
+import org.jetbrains.compose.resources.painterResource
+import org.jetbrains.compose.ui.tooling.preview.Preview
+
+@Composable
+@Preview
+fun App() {
+    NotesAppTheme {
+        NotesAppNavigation()
+    }
+}

composeApp/src/commonMain/kotlin/App.kt → composeApp/src/commonMain/kotlin/com/app/academy/DemoScreen.kt

@@ -1,10 +1,10 @@
+package com.app.academy
+
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material.Button
-import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -14,21 +14,18 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import app.architect.notes.utils.Greeting
+import cafe.adriel.voyager.core.screen.Screen
 import kmpnotes.composeapp.generated.resources.Res
 import kmpnotes.composeapp.generated.resources.compose_multiplatform
 import org.jetbrains.compose.resources.painterResource
-import org.jetbrains.compose.ui.tooling.preview.Preview
-
-@Composable
-@Preview
-fun App() {
-    val darkEnabled = isSystemInDarkTheme()
 
-    MaterialTheme() {
+object DemoScreen : Screen {
+    @Composable
+    override fun Content() {
         var showContent by remember { mutableStateOf(false) }
         Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
             Button(onClick = { showContent = !showContent }) {
-                Text("Click me! - $darkEnabled")
+                Text("Click me!")
             }
             AnimatedVisibility(showContent) {
                 val greeting = remember { Greeting().greet() }
@@ -43,4 +40,5 @@ fun App() {
             }
         }
     }
+
 }

composeApp/src/commonMain/kotlin/com/app/academy/HomeScreen.kt

@@ -0,0 +1,21 @@
+package com.app.academy
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import cafe.adriel.voyager.core.screen.Screen
+
+object HomeScreen : Screen {
+    @Composable
+    override fun Content() {
+        Box(
+            modifier = Modifier.fillMaxSize(),
+            contentAlignment = Alignment.Center
+        ) {
+            Text(text = "To be built")
+        }
+    }
+}

composeApp/src/commonMain/kotlin/com/app/academy/NotesNavigation.kt

@@ -0,0 +1,12 @@
+package com.app.academy
+
+import androidx.compose.runtime.Composable
+import cafe.adriel.voyager.navigator.Navigator
+import cafe.adriel.voyager.transitions.SlideTransition
+
+@Composable
+fun NotesAppNavigation() {
+    Navigator(screen = HomeScreen) {
+        SlideTransition(navigator = it)
+    }
+}

composeApp/src/commonMain/kotlin/com/app/academy/theme/NotesAppTheme.kt

@@ -0,0 +1,13 @@
+package com.app.academy.theme
+
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+
+@Composable
+fun NotesAppTheme(
+    content: @Composable () -> Unit
+) {
+    MaterialTheme(
+        content = content
+    )
+}

composeApp/src/desktopMain/kotlin/main.kt

@@ -1,5 +1,6 @@
 import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.application
+import com.app.academy.App
 
 fun main() = application {
     Window(
@@ -8,4 +9,4 @@ fun main() = application {
     ) {
         App()
     }
-}
+}

composeApp/src/iosMain/kotlin/MainViewController.kt

@@ -1,3 +1,4 @@
 import androidx.compose.ui.window.ComposeUIViewController
+import com.app.academy.App
 
-fun MainViewController() = ComposeUIViewController { App() }
+fun MainViewController() = ComposeUIViewController { App() }

composeApp/src/wasmJsMain/kotlin/main.kt

@@ -1,10 +1,11 @@
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.window.ComposeViewport
+import com.app.academy.App
 import kotlinx.browser.document
 
 @OptIn(ExperimentalComposeUiApi::class)
 fun main() {
     ComposeViewport(document.body!!) {
         App()
     }
-}
+}

gradle/libs.versions.toml

@@ -29,7 +29,8 @@ sqlDelight = "2.0.1"
 material3Android = "1.2.1"
 lifecycleViewmodelCompose = "2.7.0"
 material3 = "1.2.1"
-
+kotlinVersion = "2.0.0"
+voyager = "1.0.0"
 
 [libraries]
 androidx-core = { module = "androidx.test:core", version.ref = "core" }
@@ -59,6 +60,9 @@ kotlinx-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-c
 native-driver-v200 = { module = "app.cash.sqldelight:native-driver", version.ref = "nativeDriver" }
 androidx-lifecycle-viewmodel-compose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "lifecycleViewmodelCompose" }
 runtime-v200 = { module = "app.cash.sqldelight:runtime", version.ref = "runtime" }
+voyager-navigator = { module = "cafe.adriel.voyager:voyager-navigator", version.ref = "voyager" }
+voyager-navigator-transitions = { module = "cafe.adriel.voyager:voyager-transitions", version.ref = "voyager" }
+voyager-screenmodel = { module = "cafe.adriel.voyager:voyager-screenmodel", version.ref = "voyager" }
 
 [plugins]
 androidApplication = { id = "com.android.application", version.ref = "agp" }
@@ -70,3 +74,4 @@ ktor = { id = "io.ktor.plugin", version.ref = "ktor" }
 kotlinMultiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
 kotlinxSerialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }
 sqldelight = { id = "app.cash.sqldelight", version.ref = "sqlDelight" }
+jetbrains-kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlinVersion" }

iosApp/iosApp/ui/home/HomeScreen.swift

@@ -0,0 +1,7 @@
+import Foundation
+import SwiftUI
+import shared
+
+struct HomeScreen : View {
+
+}

settings.gradle.kts

@@ -30,5 +30,4 @@ dependencyResolutionManagement {
 
 include(":composeApp")
 include(":server")
-include(":androidApp")
 include(":shared")

shared/src/androidMain/kotlin/app/architect/notes/utils/NativeStateFlow.android.kt

@@ -0,0 +1,9 @@
+package app.architect.notes.utils
+
+import kotlinx.coroutines.flow.StateFlow
+
+/**
+ * A cross platform implementation of [StateFlow].
+ */
+actual class NativeStateFlow<T> actual constructor(source: StateFlow<T>) :
+    StateFlow<T> by source

shared/src/commonMain/kotlin/app/architect/notes/utils/NativeStateFlow.kt

@@ -1,6 +1,5 @@
-package com.example.notes.utils
+package app.architect.notes.utils
 
-import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.StateFlow
 
 /**
@@ -11,4 +10,4 @@ expect class NativeStateFlow<T>(source: StateFlow<T>) : StateFlow<T>
 /**
  * Used to convert a [StateFlow] to a [NativeStateFlow]
  */
-fun <T> StateFlow<T>.asNativeStateFlow() = NativeStateFlow(this)
+fun <T> StateFlow<T>.asNativeStateFlow() = NativeStateFlow(this)

shared/src/iosMain/kotlin/app/architect/notes/utils/NativeStateFlow.ios.kt

@@ -0,0 +1,21 @@
+package app.architect.notes.utils
+
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.DisposableHandle
+import kotlinx.coroutines.MainScope
+import kotlinx.coroutines.cancel
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.launch
+
+/**
+ * A cross platform implementation of [StateFlow].
+ */
+actual class NativeStateFlow<T> actual constructor(source: StateFlow<T>) : StateFlow<T> by source {
+
+    fun subscribe(onCollect: (T) -> Unit): DisposableHandle {
+        val scope = MainScope().apply {
+            launch(Dispatchers.Main) { collect(onCollect) }
+        }
+        return DisposableHandle { scope.cancel() }
+    }
+}