android, desktop: rework UX of creating new connection (#3529)

* android, desktop: rework UX of creating new connection

* different place for clipboard listener

* changes

* changes

* changes

* button, strings

* focus

* code optimization and search icon

* incognito link

* comment

* paddings

* optimization

* icon size and space in search

* appbar background color

* secondary color for icons in search bar

* lighter tool bar and avatars

* darker avatars in toolbar

* background for selected item and divider

* replacing connection view with actual chat view

* clear

* close unneeded view

* filter icon background

* filter doesn't hide current chat with empty search field

* fixes for review

* clearing focus on hiding keyboard

* fix invalid qr code message

* rename

* color

* buttons and text visibility when chat is not running yet

* loading chats label

---------

Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
Co-authored-by: spaced4ndy <8711996+spaced4ndy@users.noreply.github.com>

apps/multiplatform/common/src/androidMain/kotlin/chat/simplex/common/platform/Modifier.android.kt

@@ -26,3 +26,5 @@ actual fun Modifier.desktopOnExternalDrag(
 ): Modifier = this
 
 actual fun Modifier.onRightClick(action: () -> Unit): Modifier = this
+
+actual fun Modifier.desktopPointerHoverIconHand(): Modifier = this

apps/multiplatform/common/src/androidMain/kotlin/chat/simplex/common/views/chatlist/ChatListNavLinkView.android.kt

@@ -17,7 +17,8 @@ actual fun ChatListNavLinkLayout(
   dropdownMenuItems: (@Composable () -> Unit)?,
   showMenu: MutableState<Boolean>,
   stopped: Boolean,
-  selectedChat: State<Boolean>
+  selectedChat: State<Boolean>,
+  nextChatSelected: State<Boolean>,
 ) {
   var modifier = Modifier.fillMaxWidth()
   if (!stopped) modifier = modifier

apps/multiplatform/common/src/androidMain/kotlin/chat/simplex/common/views/helpers/Utils.android.kt

@@ -1,5 +1,7 @@
 package chat.simplex.common.views.helpers
 
+import android.content.ClipboardManager
+import android.content.Context
 import android.content.res.Resources
 import android.graphics.*
 import android.graphics.Typeface
@@ -12,6 +14,7 @@ import android.text.SpannedString
 import android.text.style.*
 import android.util.Base64
 import android.view.WindowManager
+import androidx.compose.runtime.*
 import androidx.compose.ui.graphics.*
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.*
@@ -24,7 +27,6 @@ import androidx.core.text.HtmlCompat
 import chat.simplex.common.helpers.*
 import chat.simplex.common.model.*
 import chat.simplex.common.platform.*
-import chat.simplex.res.MR
 import dev.icerock.moko.resources.StringResource
 import java.io.*
 import java.net.URI
@@ -55,6 +57,19 @@ fun keepScreenOn(on: Boolean) {
   }
 }
 
+@Composable
+actual fun SetupClipboardListener() {
+  DisposableEffect(Unit) {
+    val service = androidAppContext.getSystemService(Context.CLIPBOARD_SERVICE) as ClipboardManager
+    val listener = { chatModel.clipboardHasText.value = service.hasPrimaryClip() }
+    chatModel.clipboardHasText.value = service.hasPrimaryClip()
+    service.addPrimaryClipChangedListener(listener)
+    onDispose {
+      service.removePrimaryClipChangedListener(listener)
+    }
+  }
+}
+
 actual fun escapedHtmlToAnnotatedString(text: String, density: Density): AnnotatedString {
   return spannableStringToAnnotatedString(HtmlCompat.fromHtml(text, HtmlCompat.FROM_HTML_MODE_LEGACY), density)
 }

apps/multiplatform/common/src/androidMain/kotlin/chat/simplex/common/views/newchat/ConnectViaLinkView.android.kt

@@ -1,68 +0,0 @@
-package chat.simplex.common.views.newchat
-
-import androidx.compose.foundation.layout.*
-import androidx.compose.material.*
-import androidx.compose.runtime.*
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import dev.icerock.moko.resources.compose.painterResource
-import dev.icerock.moko.resources.compose.stringResource
-import androidx.compose.ui.unit.sp
-import chat.simplex.common.model.ChatModel
-import chat.simplex.common.model.RemoteHostInfo
-import chat.simplex.res.MR
-
-@Composable
-actual fun ConnectViaLinkView(m: ChatModel, rh: RemoteHostInfo?, close: () -> Unit) {
-  // TODO this should close if remote host changes in model
-  val selection = remember {
-    mutableStateOf(
-      runCatching { ConnectViaLinkTab.valueOf(m.controller.appPrefs.connectViaLinkTab.get()!!) }.getOrDefault(ConnectViaLinkTab.SCAN)
-    )
-  }
-  val tabTitles = ConnectViaLinkTab.values().map {
-    when (it) {
-      ConnectViaLinkTab.SCAN -> stringResource(MR.strings.scan_QR_code)
-      ConnectViaLinkTab.PASTE -> stringResource(MR.strings.paste_the_link_you_received)
-    }
-  }
-  Column(
-    Modifier.fillMaxHeight(),
-    verticalArrangement = Arrangement.SpaceBetween
-  ) {
-    Column(Modifier.weight(1f)) {
-      when (selection.value) {
-        ConnectViaLinkTab.SCAN -> {
-          ScanToConnectView(m, rh, close)
-        }
-        ConnectViaLinkTab.PASTE -> {
-          PasteToConnectView(m, rh, close)
-        }
-      }
-    }
-    TabRow(
-      selectedTabIndex = selection.value.ordinal,
-      backgroundColor = Color.Transparent,
-      contentColor = MaterialTheme.colors.primary,
-    ) {
-      tabTitles.forEachIndexed { index, it ->
-        Tab(
-          selected = selection.value.ordinal == index,
-          onClick = {
-            selection.value = ConnectViaLinkTab.values()[index]
-            m.controller.appPrefs.connectViaLinkTab.set(selection.value .name)
-          },
-          text = { Text(it, fontSize = 13.sp) },
-          icon = {
-            Icon(
-              if (ConnectViaLinkTab.SCAN.ordinal == index) painterResource(MR.images.ic_qr_code) else painterResource(MR.images.ic_article),
-              it
-            )
-          },
-          selectedContentColor = MaterialTheme.colors.primary,
-          unselectedContentColor = MaterialTheme.colors.secondary,
-        )
-      }
-    }
-  }
-}

apps/multiplatform/common/src/androidMain/kotlin/chat/simplex/common/views/newchat/QRCodeScanner.android.kt

@@ -2,16 +2,20 @@ package chat.simplex.common.views.newchat
 
 import android.Manifest
 import android.annotation.SuppressLint
+import android.content.pm.PackageManager
 import android.util.Log
 import android.view.ViewGroup
 import androidx.camera.core.*
 import androidx.camera.lifecycle.ProcessCameraProvider
 import androidx.camera.view.PreviewView
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.*
 import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clipToBounds
-import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalLifecycleOwner
+import androidx.compose.ui.platform.*
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.core.content.ContextCompat
 import boofcv.abst.fiducial.QrCodeDetector
@@ -20,18 +24,23 @@ import boofcv.android.ConvertCameraImage
 import boofcv.factory.fiducial.FactoryFiducial
 import boofcv.struct.image.GrayU8
 import chat.simplex.common.platform.TAG
+import chat.simplex.common.ui.theme.DEFAULT_PADDING_HALF
+import chat.simplex.common.views.helpers.*
+import chat.simplex.res.MR
 import com.google.accompanist.permissions.rememberPermissionState
 import com.google.common.util.concurrent.ListenableFuture
+import dev.icerock.moko.resources.compose.painterResource
+import dev.icerock.moko.resources.compose.stringResource
 import java.util.concurrent.*
 
 // Adapted from learntodroid - https://gist.github.com/learntodroid/8f839be0b29d0378f843af70607bd7f5
 
 @Composable
-actual fun QRCodeScanner(onBarcode: (String) -> Unit) {
-  val cameraPermissionState = rememberPermissionState(permission = Manifest.permission.CAMERA)
-  LaunchedEffect(Unit) {
-    cameraPermissionState.launchPermissionRequest()
-  }
+actual fun QRCodeScanner(
+  showQRCodeScanner: MutableState<Boolean>,
+  padding: PaddingValues,
+  onBarcode: (String) -> Unit
+) {
   val context = LocalContext.current
   val lifecycleOwner = LocalLifecycleOwner.current
   var preview by remember { mutableStateOf<Preview?>(null) }
@@ -48,57 +57,102 @@ actual fun QRCodeScanner(onBarcode: (String) -> Unit) {
     }
   }
 
-  AndroidView(
-    factory = { AndroidViewContext ->
-      PreviewView(AndroidViewContext).apply {
-        this.scaleType = PreviewView.ScaleType.FILL_CENTER
-        layoutParams = ViewGroup.LayoutParams(
-          ViewGroup.LayoutParams.MATCH_PARENT,
-          ViewGroup.LayoutParams.MATCH_PARENT,
-        )
-        implementationMode = PreviewView.ImplementationMode.COMPATIBLE
-      }
-    },
-    modifier = Modifier.clipToBounds()
-  ) { previewView ->
-    val cameraSelector: CameraSelector = CameraSelector.Builder()
-      .requireLensFacing(CameraSelector.LENS_FACING_BACK)
-      .build()
-    val cameraExecutor: ExecutorService = Executors.newSingleThreadExecutor()
-    cameraProviderFuture?.addListener({
-      preview = Preview.Builder().build().also {
-        it.setSurfaceProvider(previewView.surfaceProvider)
-      }
-      val detector: QrCodeDetector<GrayU8> = FactoryFiducial.qrcode(null, GrayU8::class.java)
-      fun getQR(imageProxy: ImageProxy) {
-        val currentTimeStamp = System.currentTimeMillis()
-        if (currentTimeStamp - lastAnalyzedTimeStamp >= TimeUnit.SECONDS.toMillis(1)) {
-          detector.process(imageProxyToGrayU8(imageProxy))
-          val found = detector.detections
-          val qr = found.firstOrNull()
-          if (qr != null) {
-            if (qr.message != contactLink) {
-              // Make sure link is new and not a repeat
-              contactLink = qr.message
-              onBarcode(contactLink)
+  Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) {
+    val cameraPermissionState = rememberPermissionState(permission = Manifest.permission.CAMERA)
+    val modifier = Modifier
+      .padding(padding)
+      .clipToBounds()
+      .widthIn(max = 400.dp)
+      .aspectRatio(1f)
+    val showScanner = remember { showQRCodeScanner }
+    if (showScanner.value && cameraPermissionState.hasPermission) {
+      AndroidView(
+        factory = { AndroidViewContext ->
+          PreviewView(AndroidViewContext).apply {
+            this.scaleType = PreviewView.ScaleType.FILL_CENTER
+            layoutParams = ViewGroup.LayoutParams(
+              ViewGroup.LayoutParams.MATCH_PARENT,
+              ViewGroup.LayoutParams.MATCH_PARENT,
+            )
+            implementationMode = PreviewView.ImplementationMode.COMPATIBLE
+          }
+        },
+        modifier = modifier
+      ) { previewView ->
+        val cameraSelector: CameraSelector = CameraSelector.Builder()
+          .requireLensFacing(CameraSelector.LENS_FACING_BACK)
+          .build()
+        val cameraExecutor: ExecutorService = Executors.newSingleThreadExecutor()
+        cameraProviderFuture?.addListener({
+          preview = Preview.Builder().build().also {
+            it.setSurfaceProvider(previewView.surfaceProvider)
+          }
+          val detector: QrCodeDetector<GrayU8> = FactoryFiducial.qrcode(null, GrayU8::class.java)
+          fun getQR(imageProxy: ImageProxy) {
+            val currentTimeStamp = System.currentTimeMillis()
+            if (currentTimeStamp - lastAnalyzedTimeStamp >= TimeUnit.SECONDS.toMillis(1)) {
+              detector.process(imageProxyToGrayU8(imageProxy))
+              val found = detector.detections
+              val qr = found.firstOrNull()
+              if (qr != null) {
+                if (qr.message != contactLink) {
+                  // Make sure link is new and not a repeat
+                  contactLink = qr.message
+                  onBarcode(contactLink)
+                }
+              }
             }
+            imageProxy.close()
+          }
+
+          val imageAnalyzer = ImageAnalysis.Analyzer { proxy -> getQR(proxy) }
+          val imageAnalysis: ImageAnalysis = ImageAnalysis.Builder()
+            .setBackpressureStrategy(ImageAnalysis.STRATEGY_KEEP_ONLY_LATEST)
+            .setImageQueueDepth(1)
+            .build()
+            .also { it.setAnalyzer(cameraExecutor, imageAnalyzer) }
+          try {
+            cameraProviderFuture?.get()?.unbindAll()
+            cameraProviderFuture?.get()?.bindToLifecycle(lifecycleOwner, cameraSelector, preview, imageAnalysis)
+          } catch (e: Exception) {
+            Log.d(TAG, "CameraPreview: ${e.localizedMessage}")
+          }
+        }, ContextCompat.getMainExecutor(context))
+      }
+    } else {
+      val buttonColors = ButtonDefaults.buttonColors(
+        backgroundColor = MaterialTheme.colors.background.mixWith(MaterialTheme.colors.onBackground, 0.9f),
+        contentColor = MaterialTheme.colors.primary,
+        disabledBackgroundColor = MaterialTheme.colors.background.mixWith(MaterialTheme.colors.onBackground, 0.9f),
+        disabledContentColor = MaterialTheme.colors.primary,
+      )
+      when {
+        !cameraPermissionState.hasPermission && !cameraPermissionState.permissionRequested && showScanner.value -> {
+          LaunchedEffect(Unit) {
+            cameraPermissionState.launchPermissionRequest()
+          }
+        }
+        !cameraPermissionState.hasPermission -> {
+          Button({ withBGApi { cameraPermissionState.launchPermissionRequest() } }, modifier = modifier, colors = buttonColors) {
+            Icon(painterResource(MR.images.ic_camera_enhance), null)
+            Spacer(Modifier.width(DEFAULT_PADDING_HALF))
+            Text(stringResource(MR.strings.enable_camera_access))
+          }
+        }
+        cameraPermissionState.hasPermission -> {
+          Button({ showQRCodeScanner.value = true }, modifier = modifier, colors = buttonColors) {
+            Icon(painterResource(MR.images.ic_qr_code), null)
+            Spacer(Modifier.width(DEFAULT_PADDING_HALF))
+            Text(stringResource(MR.strings.tap_to_scan))
+          }
+        }
+        !LocalContext.current.packageManager.hasSystemFeature(PackageManager.FEATURE_CAMERA_ANY) -> {
+          Button({  }, enabled = false, modifier = modifier, colors = buttonColors) {
+            Text(stringResource(MR.strings.camera_not_available))
           }
         }
-        imageProxy.close()
       }
-      val imageAnalyzer = ImageAnalysis.Analyzer { proxy -> getQR(proxy) }
-      val imageAnalysis: ImageAnalysis = ImageAnalysis.Builder()
-        .setBackpressureStrategy(ImageAnalysis.STRATEGY_KEEP_ONLY_LATEST)
-        .setImageQueueDepth(1)
-        .build()
-        .also { it.setAnalyzer(cameraExecutor, imageAnalyzer) }
-      try {
-        cameraProviderFuture?.get()?.unbindAll()
-        cameraProviderFuture?.get()?.bindToLifecycle(lifecycleOwner, cameraSelector, preview, imageAnalysis)
-      } catch (e: Exception) {
-        Log.d(TAG, "CameraPreview: ${e.localizedMessage}")
-      }
-    }, ContextCompat.getMainExecutor(context))
+    }
   }
 }
 

apps/multiplatform/common/src/androidMain/kotlin/chat/simplex/common/views/newchat/ScanToConnectView.android.kt

@@ -1,22 +0,0 @@
-package chat.simplex.common.views.newchat
-
-import android.Manifest
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import chat.simplex.common.model.ChatModel
-import chat.simplex.common.model.RemoteHostInfo
-import com.google.accompanist.permissions.rememberPermissionState
-
-@Composable
-actual fun ScanToConnectView(chatModel: ChatModel, rh: RemoteHostInfo?, close: () -> Unit) {
-  val cameraPermissionState = rememberPermissionState(permission = Manifest.permission.CAMERA)
-  LaunchedEffect(Unit) {
-    cameraPermissionState.launchPermissionRequest()
-  }
-  ConnectContactLayout(
-    chatModel = chatModel,
-    rh = rh,
-    incognitoPref = chatModel.controller.appPrefs.incognito,
-    close = close
-  )
-}