Update dependencies

- Use WASM for web instead of JS

app/desktop/build.gradle.kts

@@ -1,6 +1,5 @@
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
 import org.jetbrains.kotlin.konan.target.HostManager
-import org.jetbrains.kotlin.org.jline.utils.OSUtils
 
 plugins {
     alias(libs.plugins.kotlin.compose)
@@ -49,8 +48,8 @@ compose.desktop {
                 "java.naming" // required by logback
             )
             when {
-                OSUtils.IS_WINDOWS -> targetFormats(TargetFormat.AppImage)
-                OSUtils.IS_OSX -> targetFormats(TargetFormat.Pkg)
+                HostManager.hostIsMingw -> targetFormats(TargetFormat.AppImage)
+                HostManager.hostIsMac -> targetFormats(TargetFormat.Pkg)
                 else -> targetFormats(TargetFormat.Deb)
             }
 
@@ -113,7 +112,7 @@ tasks {
         archiveExtension = "tar.gz"
     }
 
-    if (OSUtils.IS_WINDOWS) {
+    if (true) {
         registerMsixTasks()
         registerMsixTasks("MSStore", msStore = true)
     }
@@ -169,7 +168,7 @@ fun TaskContainerScope.registerMsixTasks(prefix: String = "", msStore: Boolean =
 
     afterEvaluate {
         "packageReleaseDistributionForCurrentOS" {
-            if (OSUtils.IS_WINDOWS) {
+            if (HostManager.hostIsMingw) {
                 dependsOn(finalizeMsixWorkspace)
             }
         }

app/desktop/src/nonWindowsMain/kotlin/AuthorizationServer.kt

@@ -26,10 +26,10 @@ fun Application.authModule(onAuth: () -> Unit, scope: CoroutineScope) {
     install(CORS) {
         allowMethod(HttpMethod.Post)
         val baseUrl = getUrl()
-        allowHost(baseUrl.host, listOf(baseUrl.protocol.name))
+        allowHost(baseUrl.hostWithPortIfSpecified, listOf(baseUrl.protocol.name))
     }
     routing {
-        post("login") {
+        get("login") {
             val token = call.parameters["token"] ?: throw BadRequestException("Missing token")
 
             saveConfig(Config(token))

app/desktop/src/nonWindowsMain/kotlin/ConfigFile.kt

@@ -1,4 +1,4 @@
-@file:OptIn(ExperimentalSerializationApi::class)
+@file:OptIn(ExperimentalSerializationApi::class, ExperimentalSerializationApi::class)
 
 package dev.schlaubi.tonbrett.app.desktop
 

app/desktop/uwp_helper/build.gradle.kts

@@ -1,4 +1,4 @@
-import org.jetbrains.kotlin.org.jline.utils.OSUtils
+import org.jetbrains.kotlin.konan.target.HostManager
 
 plugins {
     java
@@ -27,7 +27,7 @@ tasks {
         outputs.dir(jextractOutput)
 
         // I cannot figure out how to change the path on GitHub Actions
-        val command = if (OSUtils.IS_WINDOWS) {
+        val command = if (HostManager.hostIsMingw) {
             "jextract.bat"
         } else {
             "jextract"

app/shared/build.gradle.kts

@@ -24,6 +24,7 @@ kotlin {
                 withApple()
                 withJvm()
                 withJs()
+                withWasmJs()
             }
 
             group("mobile") {
@@ -37,6 +38,7 @@ kotlin {
                 withJs()
                 withApple()
                 withAndroidTarget()
+                withWasmJs()
             }
         }
     }
@@ -66,12 +68,6 @@ kotlin {
             }
         }
 
-        jsMain {
-            dependencies {
-                api("org.jetbrains.kotlin:kotlinx-atomicfu-runtime:2.0.20")
-            }
-        }
-
         named("desktopMain") {
             dependencies {
                 implementation(libs.kmongo.id.serialization)

app/shared/src/commonMain/kotlin/components/SearchBar.kt

@@ -121,7 +121,9 @@ fun SearchBar(updateSounds: SoundUpdater) {
                     },
                     colors = TextFieldDefaults.colors(
                         unfocusedTextColor = ColorScheme.current.textColor,
-                        focusedTextColor = ColorScheme.current.textColor
+                        focusedTextColor = ColorScheme.current.textColor,
+                        focusedContainerColor = ColorScheme.current.searchBarColor,
+                        unfocusedContainerColor = ColorScheme.current.searchBarColor,
                     )
                 )
             },

app/web/build.gradle.kts

@@ -1,3 +1,5 @@
+import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
+
 plugins {
     alias(libs.plugins.kotlin.compose)
     kotlin("multiplatform")
@@ -9,8 +11,13 @@ repositories {
 }
 
 kotlin {
-    js(IR) {
-        browser()
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        browser {
+            webpackTask {
+                mainOutputFileName = ".proxy/web.js"
+            }
+        }
         binaries.executable()
         compilations.all {
             packageJson {
@@ -41,7 +48,7 @@ kotlin {
                 implementation(compose.material)
                 implementation(compose.components.resources)
                 implementation(compose.materialIconsExtended)
-                implementation(npm("@discord/embedded-app-sdk", "1.4.2"))
+                implementation(npm("@discord/embedded-app-sdk", "1.7.1"))
             }
         }
     }
@@ -50,11 +57,11 @@ kotlin {
 tasks {
     val copyIcon by creating(Copy::class) {
         from(rootProject.file("icons/logo.ico"))
-        into(layout.buildDirectory.dir("distributions"))
+        into(layout.buildDirectory.dir("dist/wasmJs/productionExecutable"))
         rename { "favicon.ico" }
     }
 
-    named("jsMainClasses") {
+    named("wasmJsMainClasses") {
         dependsOn(copyIcon)
     }
 }

app/web/src/templates/discord-activity.template.html

@@ -3,9 +3,21 @@
 <head>
   <meta charset="UTF-8">
   <title>Tonbrett</title>
-  <script src="/.proxy/api/soundboard/ui/skiko.js"> </script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
+<script>
+  // glue code for Kotlin/WASM
+  // noinspection JSUnusedGlobalSymbols
+  function authorize(discordSdk, appId, state) {
+    return discordSdk.commands.authorize({
+      client_id: appId,
+      scope: ["identify"],
+      response_type: "code",
+      state: state
+    });
+  }
+</script>
 <style>
   body {
     background-color: rgb(17, 18, 20);

app/web/src/templates/index.template.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" type="image/png" href="/soundboard/ui/favicon.ico"/>
     <title>Tonbrett</title>
-    <script src="/soundboard/ui/skiko.js"> </script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
 <style>

app/web/src/jsMain/kotlin/dev/schlaubi/tonbrett/app/web/AuthorizationScreen.kt → app/web/src/wasmJsMain/kotlin/dev/schlaubi/tonbrett/app/web/AuthorizationScreen.kt

@@ -7,12 +7,7 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.selection.SelectionContainer
-import androidx.compose.material.Divider
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
-import androidx.compose.material.ProvideTextStyle
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Check
 import androidx.compose.material.icons.filled.CheckCircle
@@ -26,35 +21,34 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.zIndex
-import dev.schlaubi.tonbrett.app.LocalStrings
 import dev.schlaubi.tonbrett.app.ColorScheme
+import dev.schlaubi.tonbrett.app.LocalStrings
 import dev.schlaubi.tonbrett.common.authServerPort
-import io.ktor.client.fetch.*
+import io.github.oshai.kotlinlogging.KotlinLogging
 import kotlinx.browser.window
 import kotlinx.coroutines.await
 import kotlinx.coroutines.delay
-import io.github.oshai.kotlinlogging.KotlinLogging
 import org.w3c.dom.url.URLSearchParams
+import org.w3c.fetch.RequestInit
+import org.w3c.xhr.XMLHttpRequest
 import kotlin.time.Duration.Companion.seconds
 
 private val LOG = KotlinLogging.logger { }
 
+private fun post(): RequestInit = js("{method: 'POST'}")
+
 @Composable
 fun AuthorizationScreen(cli: Boolean, protocol: Boolean) {
     val strings = LocalStrings.current
     val token =
-        remember { URLSearchParams(window.location.search).get("token") ?: error("Missing token") }
+        remember { URLSearchParams(window.location.search.toJsString()).get("token") ?: error("Missing token") }
     if (!cli) {
         LaunchedEffect(Unit) {
             try {
                 if (protocol) {
                     window.location.href = "tonbrett://login?token=$token"
                 } else {
-                    fetch(
-                        "http://localhost:$authServerPort/login?token=$token",
-                        object : RequestInit {
-                            override var method: String? = "POST"
-                        }).await()
+                    window.fetch("http://localhost:$authServerPort/login?token=$token").await()
                 }
             } catch (e: Throwable) {
                 LOG.error(e) { "Could not propagate token" }

app/web/src/wasmJsMain/kotlin/dev/schlaubi/tonbrett/app/web/DiscordActivitiesSDK.kt

@@ -0,0 +1,35 @@
+@file:JsModule("@discord/embedded-app-sdk")
+
+package dev.schlaubi.tonbrett.app.web
+
+import kotlin.js.Promise
+
+external interface AuthorizeInput : JsAny {
+    @JsName("client_id")
+    val clientId: JsString
+    val scope: JsArray<JsString>
+
+    @JsName("response_type")
+    val responseType: JsString
+
+    @JsName("code_challenge")
+    val codeChallenge: JsString?
+    val state: JsString?
+    val prompt: JsString?
+
+    @JsName("code_challenge_method")
+    val codeChallengeMethod: JsString?
+}
+
+external class AuthorizeResponse : JsAny {
+    val code: JsString
+}
+
+external class DiscordSDK constructor(oauthClientId: String) : JsAny {
+    val commands: Commands
+    fun ready(): Promise<JsAny?>
+
+    class Commands {
+        fun authorize(input: AuthorizeInput): Promise<AuthorizeResponse>
+    }
+}

app/web/src/jsMain/kotlin/dev/schlaubi/tonbrett/app/web/DiscordActivity.kt → app/web/src/wasmJsMain/kotlin/dev/schlaubi/tonbrett/app/web/DiscordActivity.kt

@@ -14,17 +14,15 @@ import dev.schlaubi.tonbrett.app.api.getUrl
 import dev.schlaubi.tonbrett.app.title
 import dev.schlaubi.tonbrett.common.AuthRefreshResponse
 import dev.schlaubi.tonbrett.common.Route
-import io.ktor.client.HttpClient
-import io.ktor.client.call.body
-import io.ktor.client.plugins.contentnegotiation.ContentNegotiation
-import io.ktor.client.plugins.defaultRequest
-import io.ktor.client.plugins.resources.Resources
-import io.ktor.client.plugins.resources.post
-import io.ktor.http.takeFrom
-import io.ktor.serialization.kotlinx.json.json
-import io.ktor.util.generateNonce
+import io.ktor.client.*
+import io.ktor.client.call.*
+import io.ktor.client.plugins.*
+import io.ktor.client.plugins.contentnegotiation.*
+import io.ktor.client.plugins.resources.*
+import io.ktor.http.*
+import io.ktor.serialization.kotlinx.json.*
+import io.ktor.util.*
 import kotlinx.coroutines.await
-import org.jetbrains.skiko.wasm.onWasmReady
 
 private val apiClient by lazy {
     HttpClient {
@@ -49,13 +47,13 @@ private enum class State {
 
 private val context = AppContext()
 
-fun discordActivity() = onWasmReady {
+fun discordActivity() {
     try {
         CanvasBasedWindow(title) {
             var state by remember { mutableStateOf(State.INITIALIZING) }
 
             LaunchedEffect(Unit) {
-                discordSdk.ready().await()
+                discordSdk.ready().await<JsAny?>()
 
                 state = if (context.isSignedIn) State.RUNNING else State.AUTHORIZING
                 println("Switching state to $state")
@@ -84,14 +82,9 @@ fun discordActivity() = onWasmReady {
 
 private suspend fun requestToken(): AuthRefreshResponse {
     val state = generateNonce()
-    val input = Any().asDynamic()
-    input.client_id = appId
-    input.scope = arrayOf("identify")
-    input.response_type = "code"
-    input.state = state
 
-    val response = discordSdk.commands.authorize(input).await()
-    return apiClient.exchangeToken(response.code, state)
+    val response = discordSdk.authorize(appId, state).await<AuthorizeResponse>()
+    return apiClient.exchangeToken(response.code.toString(), state)
 }
 
 /**