Home Screen

composeApp/build.gradle.kts

@@ -39,12 +39,24 @@ kotlin {
             implementation(libs.windowSizeClass)
             implementation(libs.kotlinx.coroutines)
             implementation(libs.kmmViewModel)
+            implementation(libs.imageLoader)
 
             implementation(libs.bundles.ktor.common)
         }
 
         val wasmJsMain by getting {
-            dependencies {}
+            dependencies {
+
+            }
+        }
+    }
+}
+
+configurations.all {
+    if (name.startsWith("wasmJs")) {
+        resolutionStrategy.eachDependency {
+            if (requested.group.startsWith("io.ktor") && requested.name.startsWith("ktor-"))
+                useVersion(libs.versions.ktor.get())
         }
     }
 }

composeApp/src/commonMain/kotlin/screen/HomeScreen.kt

@@ -1,24 +1,50 @@
 package screen
 
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.Button
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
 import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
-import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.platform.LocalUriHandler
+import androidx.compose.ui.platform.UriHandler
+import androidx.compose.ui.unit.dp
 import api.API
 import api.Endpoint
+import api.responses.Connections
 import api.responses.Info
+import api.responses.model.Connection
+import com.seiko.imageloader.Image
+import com.seiko.imageloader.model.ImageAction
+import com.seiko.imageloader.rememberImagePainter
+import com.seiko.imageloader.rememberImageSuccessPainter
+import com.seiko.imageloader.ui.AutoSizeBox
+import com.seiko.imageloader.ui.AutoSizeImage
 
 val info = mutableStateOf(Info())
+val connections = mutableStateOf(Connections())
 
 @OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
 data object HomeScreen: Screen("/home", {
+    val uriHandler = LocalUriHandler.current
+
     API.fetch(Endpoint.INFO, info)
+    API.fetch(Endpoint.CONNECTIONS, connections)
 
     Column(
         modifier = Modifier.fillMaxSize(),
@@ -30,7 +56,43 @@ data object HomeScreen: Screen("/home", {
         Text("Home sweet home")
         Text(text = windowSizeClass.widthSizeClass.toString())
         Text(text = windowSizeClass.heightSizeClass.toString())
-        Text(text = info.value.name)
-        Text(text = info.value.title)
+        Name(info.value.name)
+        Title(info.value.title)
+        DownloadResumeButton(uriHandler, info.value.resume)
+        connections.value.connections.forEach { ConnectionIcon(uriHandler, it) }
     }
-})
+})
+
+@Composable
+fun Name(name: String) {
+    Text(
+        text = name,
+        style = MaterialTheme.typography.displayLarge
+    )
+}
+
+@Composable
+fun Title(title: String) {
+    Text(
+        text = title,
+        style = MaterialTheme.typography.titleLarge
+    )
+}
+
+@Composable
+fun DownloadResumeButton(uriHandler: UriHandler, uri: String) {
+    Button(
+        onClick = { uriHandler.openUri(uri) }
+    ) {
+        Text(text = "Resume")
+    }
+}
+
+@Composable
+fun ConnectionIcon(uriHandler: UriHandler, connection: Connection) {
+    AutoSizeImage(
+        url = connection.icon,
+        contentDescription = null,
+        modifier = Modifier.height(40.dp).width(40.dp).clickable { uriHandler.openUri(connection.url) }
+    )
+}

composeApp/src/wasmJsMain/kotlin/main.kt

@@ -1,7 +1,32 @@
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.remember
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.window.CanvasBasedWindow
+import com.seiko.imageloader.ImageLoader
+import com.seiko.imageloader.LocalImageLoader
+import com.seiko.imageloader.component.setupDefaultComponents
+import com.seiko.imageloader.intercept.bitmapMemoryCacheConfig
 
 @OptIn(ExperimentalComposeUiApi::class)
 fun main() {
-    CanvasBasedWindow(canvasElementId = "ComposeTarget") { App() }
+    CanvasBasedWindow(canvasElementId = "ComposeTarget") {
+        CompositionLocalProvider(
+            LocalImageLoader provides remember { generateImageLoader() }
+        ) {
+            App()
+        }
+    }
+}
+
+private fun generateImageLoader(): ImageLoader {
+    return ImageLoader {
+        components {
+            setupDefaultComponents()
+        }
+        interceptor {
+            bitmapMemoryCacheConfig {
+                maxSize(32 * 1024 * 1024) // 32MB
+            }
+        }
+    }
 }

gradle/libs.versions.toml

@@ -1,7 +1,7 @@
 [versions]
+junit = "4.13.2"
 compose = "1.6.4"
 compose-plugin = "1.6.0"
-junit = "4.13.2"
 kotlin = "2.0.0-Beta3"
 compose-compiler = "1.5.6-dev2-kt2.0.0-Beta3"
 precompose = "1.6.0"
@@ -10,6 +10,7 @@ ktor = "3.0.0-wasm2"
 kotlinx-coroutines = "1.8.0"
 kmpNativeCoroutines = "1.0.0-ALPHA-24-kotlin-2.0.0-Beta3"
 kmmViewModel = "1.0.0-ALPHA-18-kotlin-2.0.0-Beta3"
+imageLoader = "1.7.8"
 
 [libraries]
 kotlin-test = { module = "org.jetbrains.kotlin:kotlin-test", version.ref = "kotlin" }
@@ -20,6 +21,7 @@ compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling", version.ref =
 compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview", version.ref = "compose" }
 precompose = { module = "moe.tlaster:precompose", version.ref = "precompose" }
 windowSizeClass = { module = "dev.chrisbanes.material3:material3-window-size-class-multiplatform", version.ref = "windowSizeClass" }
+imageLoader = { module = "io.github.qdsfdhvh:image-loader", version.ref = "imageLoader" }
 
 kotlinx-coroutines = { group = "org.jetbrains.kotlinx", name = "kotlinx-coroutines-core", version.ref = "kotlinx-coroutines" }
 kmmViewModel = { group = "com.rickclephas.kmm", name = "kmm-viewmodel-core", version.ref = "kmmViewModel" }

settings.gradle.kts

@@ -15,6 +15,7 @@ dependencyResolutionManagement {
         google()
         mavenCentral()
         maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
+        maven("https://maven.pkg.jetbrains.space/kotlin/p/kotlin/bootstrap")
         maven("https://maven.pkg.jetbrains.space/kotlin/p/wasm/experimental")
     }
 }