🔨 Restructure UI implementation for better multiplatform reusability

composeApp/src/commonMain/kotlin/com/crosspaste/ui/AboutContentView.kt

@@ -29,6 +29,7 @@ import androidx.compose.ui.unit.sp
 import com.crosspaste.app.AppInfo
 import com.crosspaste.app.AppUrls
 import com.crosspaste.i18n.GlobalCopywriter
+import com.crosspaste.ui.base.BaseViewProvider
 import com.crosspaste.ui.base.UISupport
 import com.crosspaste.ui.base.chevronRight
 import com.crosspaste.ui.base.robotoFontFamily
@@ -38,6 +39,7 @@ import org.koin.compose.koinInject
 fun AboutContentView() {
     val appInfo = koinInject<AppInfo>()
     val appUrls = koinInject<AppUrls>()
+    val baseViewProvider = koinInject<BaseViewProvider>()
     val uiSupport = koinInject<UISupport>()
 
     Box(
@@ -57,7 +59,7 @@ fun AboutContentView() {
                 modifier = Modifier.align(Alignment.Center),
                 horizontalAlignment = Alignment.CenterHorizontally,
             ) {
-                CrossPasteLogoView(
+                baseViewProvider.CrossPasteLogoView(
                     modifier =
                         Modifier.clip(RoundedCornerShape(6.dp))
                             .background(MaterialTheme.colorScheme.primary)

composeApp/src/commonMain/kotlin/com/crosspaste/ui/ScreenProvider.kt

@@ -0,0 +1,35 @@
+package com.crosspaste.ui
+
+import androidx.compose.runtime.Composable
+
+interface ScreenProvider {
+
+    @Composable
+    fun AboutScreen()
+
+    @Composable
+    fun CrossPasteScreen()
+
+    @Composable
+    fun DeviceDetailScreen()
+
+    @Composable
+    fun DevicesScreen()
+
+    @Composable
+    fun HomeScreen()
+
+    // openTopBar is used on mobile to expand the top bar
+    // Desktop does not need to do anything
+    @Composable
+    fun PasteboardScreen(openTopBar: () -> Unit = {})
+
+    @Composable
+    fun PasteTextEditScreen()
+
+    @Composable
+    fun QRScreen()
+
+    @Composable
+    fun SettingsScreen()
+}

composeApp/src/commonMain/kotlin/com/crosspaste/ui/base/BaseViewProvider.kt

@@ -0,0 +1,27 @@
+package com.crosspaste.ui.base
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+interface BaseViewProvider {
+
+    @Composable
+    fun ExpandView(
+        title: String,
+        icon: @Composable () -> Painter? = { null },
+        defaultExpand: Boolean = false,
+        horizontalPadding: Dp = 16.dp,
+        titleBackgroundColor: Color = MaterialTheme.colorScheme.secondary,
+        onTitleBackgroundColor: Color = MaterialTheme.colorScheme.onSecondary,
+        backgroundColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest.copy(alpha = 0.72f),
+        content: @Composable () -> Unit,
+    )
+
+    @Composable
+    fun CrossPasteLogoView(modifier: Modifier = Modifier)
+}

composeApp/src/commonMain/kotlin/com/crosspaste/ui/devices/DeviceDetailContentView.kt

@@ -48,6 +48,7 @@ fun DeviceDetailContentView() {
     val appInfo = koinInject<AppInfo>()
     val appWindowManager = koinInject<AppWindowManager>()
     val copywriter = koinInject<GlobalCopywriter>()
+    val deviceViewProvider = koinInject<DeviceViewProvider>()
     val syncManager = koinInject<SyncManager>()
 
     val screen by appWindowManager.screenContext.collectAsState()
@@ -65,7 +66,7 @@ fun DeviceDetailContentView() {
     }
 
     Column {
-        DeviceConnectView(syncRuntimeInfo, false) { }
+        deviceViewProvider.DeviceConnectView(syncRuntimeInfo, false) { }
 
         Column(
             modifier =

composeApp/src/commonMain/kotlin/com/crosspaste/ui/devices/DeviceViewProvider.kt

@@ -0,0 +1,22 @@
+package com.crosspaste.ui.devices
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import com.crosspaste.dto.sync.SyncInfo
+import com.crosspaste.realm.sync.SyncRuntimeInfo
+
+interface DeviceViewProvider {
+
+    @Composable
+    fun DeviceConnectView(
+        syncRuntimeInfo: SyncRuntimeInfo,
+        deviceInteractionEnabled: Boolean,
+        onEdit: (SyncRuntimeInfo) -> Unit,
+    )
+
+    @Composable
+    fun SyncDeviceView(
+        syncInfo: SyncInfo,
+        action: @Composable (Color) -> Unit,
+    )
+}

composeApp/src/desktopMain/kotlin/com/crosspaste/ui/devices/DevicesScreen.desktop.kt → composeApp/src/commonMain/kotlin/com/crosspaste/ui/devices/DevicesContentView.kt

@@ -16,11 +16,12 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.unit.dp
 import com.crosspaste.sync.SyncManager
-import com.crosspaste.ui.base.ExpandView
+import com.crosspaste.ui.base.BaseViewProvider
 import org.koin.compose.koinInject
 
 @Composable
-actual fun DevicesScreen() {
+fun DevicesContentView() {
+    val baseViewProvider = koinInject<BaseViewProvider>()
     val syncManager = koinInject<SyncManager>()
 
     LaunchedEffect(Unit) {
@@ -38,7 +39,7 @@ actual fun DevicesScreen() {
             val syncRuntimeInfos by syncManager.realTimeSyncRuntimeInfos.collectAsState()
 
             if (syncRuntimeInfos.isNotEmpty()) {
-                ExpandView(
+                baseViewProvider.ExpandView(
                     title = "my_devices",
                     horizontalPadding = 0.dp,
                     defaultExpand = true,
@@ -49,7 +50,7 @@ actual fun DevicesScreen() {
                 Spacer(modifier = Modifier.height(10.dp))
             }
 
-            ExpandView(
+            baseViewProvider.ExpandView(
                 title = "add_device_manually",
                 horizontalPadding = 0.dp,
                 defaultExpand = false,
@@ -58,7 +59,7 @@ actual fun DevicesScreen() {
                 AddDeviceManuallyView()
             }
             Spacer(modifier = Modifier.height(10.dp))
-            ExpandView(
+            baseViewProvider.ExpandView(
                 title = "nearby_devices",
                 horizontalPadding = 0.dp,
                 defaultExpand = true,

composeApp/src/commonMain/kotlin/com/crosspaste/ui/devices/DevicesView.kt

@@ -174,9 +174,10 @@ fun DevicesListView(
     syncRuntimeInfos: List<SyncRuntimeInfo>,
     onEdit: (SyncRuntimeInfo) -> Unit,
 ) {
+    val deviceViewProvider = koinInject<DeviceViewProvider>()
     Column(modifier = Modifier.fillMaxWidth()) {
         for ((index, syncRuntimeInfo) in syncRuntimeInfos.withIndex()) {
-            DeviceConnectView(syncRuntimeInfo, true, onEdit)
+            deviceViewProvider.DeviceConnectView(syncRuntimeInfo, true, onEdit)
             if (index != syncRuntimeInfos.size - 1) {
                 HorizontalDivider()
             }

composeApp/src/commonMain/kotlin/com/crosspaste/ui/devices/NearbyDeviceView.kt

@@ -35,11 +35,13 @@ import org.koin.compose.koinInject
 fun NearbyDeviceView(syncInfo: SyncInfo) {
     val copywriter = koinInject<GlobalCopywriter>()
     val deviceManager = koinInject<DeviceManager>()
+    val deviceViewProvider = koinInject<DeviceViewProvider>()
     val syncRuntimeInfoRealm = koinInject<SyncRuntimeInfoRealm>()
     val configManager = koinInject<ConfigManager>()
     val jsonUtils = getJsonUtils()
     val scope = rememberCoroutineScope()
-    SyncDeviceView(syncInfo = syncInfo) { background ->
+
+    deviceViewProvider.SyncDeviceView(syncInfo = syncInfo) { background ->
         Button(
             modifier = Modifier.height(28.dp),
             onClick = {

composeApp/src/commonMain/kotlin/com/crosspaste/ui/paste/PasteboardViewProvider.kt

@@ -0,0 +1,10 @@
+package com.crosspaste.ui.paste
+
+import androidx.compose.runtime.Composable
+import com.crosspaste.paste.PasteSingleProcess
+
+interface PasteboardViewProvider {
+
+    @Composable
+    fun PasteShimmer(singleProcess: PasteSingleProcess?)
+}

composeApp/src/commonMain/kotlin/com/crosspaste/ui/settings/BlackListDeviceView.kt

@@ -13,14 +13,16 @@ import androidx.compose.ui.unit.dp
 import com.crosspaste.dto.sync.SyncInfo
 import com.crosspaste.ui.base.PasteIconButton
 import com.crosspaste.ui.base.remove
-import com.crosspaste.ui.devices.SyncDeviceView
+import com.crosspaste.ui.devices.DeviceViewProvider
+import org.koin.compose.koinInject
 
 @Composable
 fun BlackListDeviceView(
     syncInfo: SyncInfo,
     clickable: () -> Unit,
 ) {
-    SyncDeviceView(syncInfo = syncInfo) {
+    val deviceViewProvider = koinInject<DeviceViewProvider>()
+    deviceViewProvider.SyncDeviceView(syncInfo = syncInfo) {
         PasteIconButton(
             size = 20.dp,
             onClick = clickable,

composeApp/src/commonMain/kotlin/com/crosspaste/ui/settings/MainSettingsView.kt → composeApp/src/commonMain/kotlin/com/crosspaste/ui/settings/MainSettingsContentView.kt

@@ -29,7 +29,7 @@ import com.crosspaste.ui.base.shield
 import org.koin.compose.koinInject
 
 @Composable
-fun MainSettingsView() {
+fun MainSettingsContentView() {
     val appInfo = koinInject<AppInfo>()
     val appWindowManager = koinInject<AppWindowManager>()
     val configManager = koinInject<ConfigManager>()

composeApp/src/commonMain/kotlin/com/crosspaste/ui/settings/SettingsContentView.kt → composeApp/src/commonMain/kotlin/com/crosspaste/ui/settings/SettingsCoreView.kt

@@ -5,20 +5,23 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import org.koin.compose.koinInject
 
 @Composable
-fun SettingsContentView() {
-    MainSettingsView()
+fun SettingsCoreView() {
+    val settingsViewProvider = koinInject<SettingsViewProvider>()
+
+    settingsViewProvider.MainSettingsView()
 
     Spacer(modifier = Modifier.height(25.dp))
 
-    NetSettingsView()
+    settingsViewProvider.NetSettingsView()
 
     Spacer(modifier = Modifier.height(25.dp))
 
-    StoreSettingsView()
+    settingsViewProvider.StoreSettingsView()
 
     Spacer(modifier = Modifier.height(25.dp))
 
-    PasteboardSettingsView()
+    settingsViewProvider.PasteboardSettingsView()
 }