add desktop implementation

dalafiarisamuel · Jul 2, 2024 · 4a6fa37 · 4a6fa37
1 parent c3fb97e
commit 4a6fa37
Show file tree

Hide file tree

Showing 13 changed files with 150 additions and 34 deletions.
diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts
@@ -20,6 +20,8 @@ kotlin {
         }
     }
 
+    jvm("desktop")
+
     listOf(
         iosX64(),
         iosArm64(),
@@ -33,6 +35,8 @@ kotlin {
 
     sourceSets {
 
+        val desktopMain by getting
+
         sourceSets.commonMain {
             kotlin.srcDir("build/generated/ksp/metadata")
         }
@@ -68,7 +72,12 @@ kotlin {
             implementation(libs.koin.composeVM)
             implementation(libs.kotlin.navigation.compose)
             implementation(libs.nappier.logging)
-
+            implementation(libs.kotlinx.coroutines.core)
+            implementation(libs.material3.window.size.multiplatform)
+        }
+        desktopMain.dependencies {
+            implementation(compose.desktop.currentOs)
+            runtimeOnly(libs.kotlinx.coroutines.swing)
         }
     }
 }
@@ -110,3 +119,15 @@ android {
     }
 }
 
+compose.desktop {
+    application {
+        mainClass = "MainKt"
+
+        nativeDistributions {
+            targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
+            packageName = "com.tamuno.unsplash.kmp"
+            packageVersion = "1.0.0"
+        }
+    }
+}
+
diff --git a/composeApp/src/androidMain/kotlin/ui/component/PlatformLayoutAlignment.android.kt b/composeApp/src/androidMain/kotlin/ui/component/PlatformLayoutAlignment.android.kt
@@ -0,0 +1,8 @@
+package ui.component
+
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.ui.Alignment
+
+actual fun ColumnScope.HomeScreenTitleAlignment(): Alignment.Horizontal {
+    return Alignment.Start
+}
diff --git a/composeApp/src/commonMain/kotlin/ui/component/CollapsingSearchBar.kt b/composeApp/src/commonMain/kotlin/ui/component/CollapsingSearchBar.kt
@@ -2,13 +2,16 @@ package ui.component
 
 
 import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
-import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -31,7 +34,7 @@ fun CollapsibleSearchBar(
     minShrinkHeight: Dp = 0.dp,
     textValue: String? = null,
     keyboardAction: (() -> Unit)? = null,
-    textValueChange: ((String) -> Unit)? = null
+    textValueChange: ((String) -> Unit)? = null,
 ) {
 
     val keyboard = LocalSoftwareKeyboardController.current
@@ -63,26 +66,13 @@ fun CollapsibleSearchBar(
 
                 UnsplashSearchBox(
                     modifier = Modifier
-                        .wrapContentHeight()
-                        .weight(weight = 3f)
-                        .padding(end = 10.dp),
+                        .wrapContentHeight(),
                     textValue = textValue,
                     keyboard = keyboard,
                     keyboardAction = keyboardAction
                 ) {
                     textValueChange?.invoke(it)
                 }
-
-                SearchButton(
-                    modifier = Modifier
-                        .testTag("search_button")
-                        .size(55.dp)
-                        .weight(weight = 0.6f)
-
-                ) {
-                    keyboard?.hide()
-                    keyboardAction?.invoke()
-                }
             }
         }
 
@@ -93,8 +83,8 @@ fun CollapsibleSearchBar(
 @ExperimentalFoundationApi
 @ExperimentalComposeUiApi
 @Composable
-private fun PreviewCollapsibleSearchBar(){
-    UnsplashKMPTheme{
+private fun PreviewCollapsibleSearchBar() {
+    UnsplashKMPTheme {
         CollapsibleSearchBar()
     }
 }
diff --git a/composeApp/src/commonMain/kotlin/ui/component/PlatformLayoutAlignment.kt b/composeApp/src/commonMain/kotlin/ui/component/PlatformLayoutAlignment.kt
@@ -0,0 +1,6 @@
+package ui.component
+
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.ui.Alignment
+
+expect fun ColumnScope.HomeScreenTitleAlignment(): Alignment.Horizontal
diff --git a/composeApp/src/commonMain/kotlin/ui/component/SearchBox.kt b/composeApp/src/commonMain/kotlin/ui/component/SearchBox.kt
@@ -4,7 +4,12 @@ package ui.component
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
@@ -43,19 +48,19 @@ fun UnsplashSearchBox(
     textValue: String? = null,
     keyboard: SoftwareKeyboardController? = null,
     keyboardAction: (() -> Unit)? = null,
-    textValueChange: ((String) -> Unit)? = null
+    textValueChange: ((String) -> Unit)? = null,
 ) {
 
     Row(
         modifier = modifier
             .background(
-                shape = RoundedCornerShape(10.dp),
+                shape = RoundedCornerShape(27.5.dp),
                 color = colorDisabledGray
             )
             .border(
                 width = 1.dp,
                 color = colorGrayDivider,
-                shape = RoundedCornerShape(10.dp)
+                shape = RoundedCornerShape(27.5.dp)
             )
             .wrapContentHeight()
     ) {
@@ -106,6 +111,16 @@ fun UnsplashSearchBox(
                         .padding(start = 21.dp)
                         .align(Alignment.CenterVertically)
                 )
+            },
+            trailingIcon = {
+                SearchButton(
+                    modifier = Modifier
+                        .testTag("search_button")
+                        .size(55.dp)
+                ) {
+                    keyboard?.hide()
+                    keyboardAction?.invoke()
+                }
             }
         )
     }

diff --git a/composeApp/src/commonMain/kotlin/ui/component/SearchButton.kt b/composeApp/src/commonMain/kotlin/ui/component/SearchButton.kt
@@ -15,7 +15,6 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
 import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
-import ui.theme.appDark
 import ui.theme.appWhite
 import ui.theme.colorDisabledGray
 import ui.theme.colorGrayDivider
@@ -36,13 +35,13 @@ fun SearchButton(
         modifier =
         modifier
             .background(
-                shape = RoundedCornerShape(10.dp),
+                shape = RoundedCornerShape(27.5.dp),
                 color = colorDisabledGray
             )
             .border(
                 width = 1.dp,
                 color = colorGrayDivider,
-                shape = RoundedCornerShape(10.dp)
+                shape = RoundedCornerShape(27.5.dp)
             )
     ) {
         Image(

diff --git a/composeApp/src/commonMain/kotlin/ui/component/UnsplashImageList.kt b/composeApp/src/commonMain/kotlin/ui/component/UnsplashImageList.kt
@@ -23,6 +23,9 @@ import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Card
 import androidx.compose.material.Text
+import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
+import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
+import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
@@ -45,6 +48,7 @@ import kotlinx.coroutines.flow.Flow
 import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.resources.stringResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
+import ui.theme.appDark
 import ui.theme.appWhite
 import unsplashkmp.composeapp.generated.resources.Res
 import unsplashkmp.composeapp.generated.resources.ic_image_search
@@ -83,6 +87,7 @@ fun UnsplashImageList(
     }
 }
 
+@OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
 @ExperimentalFoundationApi
 @Composable
 private fun PhotosList(
@@ -93,6 +98,15 @@ private fun PhotosList(
     onItemClicked: (Photo?) -> Unit,
     onItemLongClicked: (Photo?) -> Unit,
 ) {
+
+    val windowSizeClass = calculateWindowSizeClass()
+
+    val gridSize = when (windowSizeClass.widthSizeClass) {
+        WindowWidthSizeClass.Compact -> 2
+        WindowWidthSizeClass.Medium -> 3
+        else -> 4
+    }
+
     LazyVerticalStaggeredGrid(
         state = lazyGridState,
         verticalItemSpacing = 8.dp,
@@ -101,7 +115,7 @@ private fun PhotosList(
             .padding(top = 15.dp)
             .nestedScroll(nestedScrollConnection)
             .then(modifier),
-        columns = StaggeredGridCells.Fixed(2)
+        columns = StaggeredGridCells.Fixed(gridSize)
     ) {
         lazyItems(imageList) { photo ->
             UnsplashImageStaggered(
@@ -130,7 +144,7 @@ fun EmptyListStateComponent(
         Image(
             modifier = Modifier
                 .size(100.dp)
-                .background(color = appWhite, shape = CircleShape),
+                .background(color = appDark, shape = CircleShape),
             painter = painterResource(Res.drawable.ic_image_search),
             contentScale = ContentScale.Inside,
             contentDescription = null

diff --git a/composeApp/src/commonMain/kotlin/ui/screen/Home.kt b/composeApp/src/commonMain/kotlin/ui/screen/Home.kt
@@ -1,5 +1,6 @@
 package ui.screen
 
+
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
@@ -9,7 +10,12 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.staggeredgrid.rememberLazyStaggeredGridState
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
@@ -32,15 +38,13 @@ import org.jetbrains.compose.resources.stringResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
 import ui.component.ChipComponent
 import ui.component.CollapsibleSearchBar
+import ui.component.HomeScreenTitleAlignment
 import ui.component.UnsplashImageList
 import ui.component.getEdgeToEdgeTopPadding
 import ui.dialog.ImagePreviewDialog
 import ui.event.HomeScreenEvent
-
-
 import ui.state.HomeScreenState
 import ui.theme.UnsplashKMPTheme
-import ui.theme.appDark
 import ui.theme.appWhite
 import unsplashkmp.composeapp.generated.resources.Res
 import unsplashkmp.composeapp.generated.resources.unsplash_images
@@ -85,6 +89,7 @@ fun HomeScreen(
         Spacer(modifier = Modifier.padding(top = 20.dp + getEdgeToEdgeTopPadding()))
 
         Text(
+            modifier = Modifier.align(HomeScreenTitleAlignment()),
             text = stringResource(Res.string.unsplash_images),
             color = appWhite,
             fontSize = 22.sp,

diff --git a/composeApp/src/desktopMain/kotlin/main.kt b/composeApp/src/desktopMain/kotlin/main.kt
@@ -0,0 +1,30 @@
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.unit.DpSize
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.WindowPosition
+import androidx.compose.ui.window.application
+import androidx.compose.ui.window.rememberWindowState
+import di.initKoin
+import java.awt.Dimension
+
+fun main() {
+    initKoin()
+
+    application {
+
+        val windowState = rememberWindowState(
+            size = DpSize(width = 900.dp, height = 950.dp),
+            position = WindowPosition(Alignment.Center)
+        )
+
+        Window(
+            onCloseRequest = ::exitApplication,
+            title = "UnsplashKMP",
+            state = windowState
+        ) {
+            window.minimumSize = Dimension(950, 900)
+            App()
+        }
+    }
+}
diff --git a/composeApp/src/desktopMain/kotlin/ui/component/EdgeToEdgePlatform.desktop.kt b/composeApp/src/desktopMain/kotlin/ui/component/EdgeToEdgePlatform.desktop.kt
@@ -0,0 +1,8 @@
+package ui.component
+
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+actual fun getEdgeToEdgeTopPadding(): Dp {
+    return 0.dp
+}
diff --git a/composeApp/src/desktopMain/kotlin/ui/component/PlatformLayoutAlignment.desktop.kt b/composeApp/src/desktopMain/kotlin/ui/component/PlatformLayoutAlignment.desktop.kt
@@ -0,0 +1,8 @@
+package ui.component
+
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.ui.Alignment
+
+actual fun ColumnScope.HomeScreenTitleAlignment(): Alignment.Horizontal {
+    return Alignment.CenterHorizontally
+}
diff --git a/composeApp/src/nativeMain/kotlin/ui/component/PlatformLayoutAlignment.native.kt b/composeApp/src/nativeMain/kotlin/ui/component/PlatformLayoutAlignment.native.kt
@@ -0,0 +1,8 @@
+package ui.component
+
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.ui.Alignment
+
+actual fun ColumnScope.HomeScreenTitleAlignment(): Alignment.Horizontal {
+    return Alignment.Start
+}