some fixes & improvements

Dockerfile-Wasm

@@ -2,7 +2,7 @@ FROM gradle:8.14.3-jdk21 AS builder
 COPY --chown=gradle:gradle . /home/gradle/src
 WORKDIR /home/gradle/src
 
-RUN gradle wasmJsBrowserDistribution --no-daemon
+RUN gradle composeCompatibilityBrowserDistribution --no-daemon
 
 FROM nginx:alpine
 COPY --from=builder /home/gradle/src/composeApp/build/dist/wasmJs/productionExecutable/ /usr/share/nginx/html

composeApp/build.gradle.kts

@@ -26,6 +26,10 @@ tasks.withType<KotlinCompile>().configureEach {
     }
 }
 
+compose.resources {
+    nameOfResClass = "R"
+}
+
 kotlin {
     androidTarget {
         compilerOptions {
@@ -74,7 +78,8 @@ kotlin {
         commonMain.dependencies {
             implementation(compose.runtime)
             implementation(compose.foundation)
-            implementation(compose.material3)
+//            implementation(compose.material3)
+            implementation(libs.material3)
             implementation(compose.materialIconsExtended)
             implementation(compose.components.resources)
             implementation(libs.androidx.navigation.compose)

composeApp/src/commonMain/kotlin/dev/meloda/overseerr/App.kt

@@ -1,16 +1,11 @@
 package dev.meloda.overseerr
 
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import dev.meloda.overseerr.datastore.SettingsController
 import dev.meloda.overseerr.screens.main.MainScreen
@@ -34,18 +29,9 @@ internal fun App() {
         settingsController.loadAppSettings()
     }
 
-    Box(
-        modifier = Modifier.fillMaxSize(),
-        contentAlignment = Alignment.Center
-    ) {
     AppTheme(themeMode = settings.themeMode) {
-            Surface(
+        Surface(modifier = Modifier.fillMaxSize()) {
-                modifier = Modifier
-                    .width(360.dp)
-                    .height(640.dp)
-            ) {
             MainScreen()
         }
     }
 }
-}

composeApp/src/commonMain/kotlin/dev/meloda/overseerr/screens/main/MainScreen.kt

@@ -39,6 +39,7 @@ import dev.meloda.overseerr.screens.requests.presentation.RequestsScreen
 import dev.meloda.overseerr.screens.settings.presentation.SettingsScreen
 import dev.meloda.overseerr.theme.LocalHazeState
 import dev.meloda.overseerr.theme.LocalPadding
+import dev.meloda.overseerr.theme.NavigationSettings
 
 @OptIn(ExperimentalMaterial3Api::class, ExperimentalHazeMaterialsApi::class)
 @Composable
@@ -46,6 +47,7 @@ fun MainScreen() {
     val hazeState = remember { HazeState(true) }
 
     val navController = rememberNavController()
+    NavigationSettings(navController)
 
     val navigationItems = remember {
         listOf(

composeApp/src/wasmJsMain/kotlin/main.kt

@@ -1,4 +1,11 @@
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.ComposeViewport
 import dev.meloda.overseerr.App
 import dev.meloda.overseerr.di.appModule
@@ -9,7 +16,18 @@ import org.koin.compose.KoinApplication
 fun main() {
     ComposeViewport(document.body!!) {
         KoinApplication(application = { modules(appModule) }) {
+            Box(
+                modifier = Modifier.fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                Box(
+                    modifier = Modifier
+                        .width(360.dp)
+                        .height(640.dp)
+                ) {
                     App()
                 }
             }
         }
+    }
+}

gradle.properties

@@ -9,6 +9,7 @@ org.gradle.parallel=true
 kotlin.code.style=official
 kotlin.daemon.jvmargs=-Xmx4G
 kotlin.native.ignoreDisabledTargets=true
+kotlin.native.enableKlibsCrossCompilation=true
 
 #Android
 android.useAndroidX=true

gradle/libs.versions.toml

@@ -12,6 +12,7 @@ kotlinx-coroutines = "1.10.2"
 ktor = "3.3.0"
 kotlinx-serialization = "1.9.0"
 koin = "4.1.1"
+material3 = "1.9.0-beta06"
 viewmodel-compose = "2.9.4"
 haze = "1.6.10"
 kstore = "1.0.0"
@@ -50,6 +51,7 @@ kstore = { module = "io.github.xxfast:kstore", version.ref = "kstore" }
 kstore-file = { module = "io.github.xxfast:kstore-file", version.ref = "kstore" }
 kstore-storage = { module = "io.github.xxfast:kstore-storage", version.ref = "kstore" }
 appdirs = { module = "net.harawata:appdirs", version.ref = "appdirs" }
+material3 = { module = "org.jetbrains.compose.material3:material3", version.ref = "material3" }
 napier = { module = "io.github.aakira:napier", version.ref = "napier" }
 
 [plugins]