UserPicker: wrap menu options in SectionView cards (SecondSection + GlobalSettingsSection)

apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/chatlist/UserPicker.kt

@@ -1,6 +1,7 @@
 package chat.simplex.common.views.chatlist
 
 import SectionItemView
+import SectionView
 import TextIconSpaced
 import androidx.compose.foundation.*
 import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -217,88 +218,90 @@ fun UserPicker(
 
     @Composable
     fun SecondSection() {
-      UserPickerOptionRow(
+      SectionView {
-        painterResource(MR.images.ic_qr_code),
-        if (chatModel.userAddress.value != null) generalGetString(MR.strings.your_simplex_contact_address) else generalGetString(MR.strings.create_simplex_address),
-        showCustomModal { it, close -> UserAddressView(it, shareViaProfile = it.currentUser.value!!.addressShared, close = close) }, disabled = stopped
-      )
-      UserPickerOptionRow(
-        painterResource(MR.images.ic_toggle_on),
-        stringResource(MR.strings.chat_preferences),
-        click = if (stopped) null else ({
-          showCustomModal { m, close ->
-            PreferencesView(m, m.currentUser.value ?: return@showCustomModal, close)
-          }()
-        }),
-        disabled = stopped
-      )
-      if (appPlatform.isDesktop) {
-        Divider(Modifier.padding(DEFAULT_PADDING))
-
-        val inactiveUsers = users.filter { !it.user.activeUser }
-
-        if (inactiveUsers.isNotEmpty()) {
-          Column(modifier = Modifier.padding(vertical = DEFAULT_MIN_SECTION_ITEM_PADDING_VERTICAL)) {
-            UserPickerUsersSection(
-              users = inactiveUsers,
-              iconColor = iconColor,
-              onUserClicked = onUserClicked,
-              stopped = stopped
-            )
-          }
-        }
-      }
-
-      if (chatModel.desktopNoUserNoRemote) {
         UserPickerOptionRow(
-          painterResource(MR.images.ic_manage_accounts),
+          painterResource(MR.images.ic_qr_code),
-          generalGetString(MR.strings.create_chat_profile),
+          if (chatModel.userAddress.value != null) generalGetString(MR.strings.your_simplex_contact_address) else generalGetString(MR.strings.create_simplex_address),
-          {
+          showCustomModal { it, close -> UserAddressView(it, shareViaProfile = it.currentUser.value!!.addressShared, close = close) }, disabled = stopped
-            doWithAuth(generalGetString(MR.strings.auth_open_chat_profiles), generalGetString(MR.strings.auth_log_in_using_credential)) {
-              ModalManager.center.showModalCloseable { close ->
-                LaunchedEffect(Unit) {
-                  userPickerState.value = AnimatedViewState.HIDING
-                }
-                CreateProfile(chat.simplex.common.platform.chatModel, close)
-              }
-            }
-          }
         )
-      } else {
         UserPickerOptionRow(
-          painterResource(MR.images.ic_manage_accounts),
+          painterResource(MR.images.ic_toggle_on),
-          stringResource(MR.strings.your_chat_profiles),
+          stringResource(MR.strings.chat_preferences),
-          {
+          click = if (stopped) null else ({
-            ModalManager.start.showCustomModal(keyboardCoversBar = false) { close ->
+            showCustomModal { m, close ->
-              val search = rememberSaveable { mutableStateOf("") }
+              PreferencesView(m, m.currentUser.value ?: return@showCustomModal, close)
-              val profileHidden = rememberSaveable { mutableStateOf(false) }
+            }()
-              val authorized = remember { stateGetOrPut("authorized") { false } }
+          }),
-              ModalView(
-                { close() },
-                showSearch = true,
-                searchAlwaysVisible = true,
-                onSearchValueChanged = {
-                  search.value = it
-                },
-                content = {
-                  UserProfilesView(chatModel, search, profileHidden) { block ->
-                      if (authorized.value) {
-                        block()
-                      } else {
-                        doWithAuth(
-                          generalGetString(MR.strings.auth_open_chat_profiles),
-                          generalGetString(MR.strings.auth_log_in_using_credential)
-                        ) {
-                          authorized.value = true
-                          block()
-                        }
-                      }
-                    }
-                })
-            }
-          },
           disabled = stopped
         )
+        if (appPlatform.isDesktop) {
+          Divider(Modifier.padding(DEFAULT_PADDING))
+
+          val inactiveUsers = users.filter { !it.user.activeUser }
+
+          if (inactiveUsers.isNotEmpty()) {
+            Column(modifier = Modifier.padding(vertical = DEFAULT_MIN_SECTION_ITEM_PADDING_VERTICAL)) {
+              UserPickerUsersSection(
+                users = inactiveUsers,
+                iconColor = iconColor,
+                onUserClicked = onUserClicked,
+                stopped = stopped
+              )
+            }
+          }
+        }
+
+        if (chatModel.desktopNoUserNoRemote) {
+          UserPickerOptionRow(
+            painterResource(MR.images.ic_manage_accounts),
+            generalGetString(MR.strings.create_chat_profile),
+            {
+              doWithAuth(generalGetString(MR.strings.auth_open_chat_profiles), generalGetString(MR.strings.auth_log_in_using_credential)) {
+                ModalManager.center.showModalCloseable { close ->
+                  LaunchedEffect(Unit) {
+                    userPickerState.value = AnimatedViewState.HIDING
+                  }
+                  CreateProfile(chat.simplex.common.platform.chatModel, close)
+                }
+              }
+            }
+          )
+        } else {
+          UserPickerOptionRow(
+            painterResource(MR.images.ic_manage_accounts),
+            stringResource(MR.strings.your_chat_profiles),
+            {
+              ModalManager.start.showCustomModal(keyboardCoversBar = false) { close ->
+                val search = rememberSaveable { mutableStateOf("") }
+                val profileHidden = rememberSaveable { mutableStateOf(false) }
+                val authorized = remember { stateGetOrPut("authorized") { false } }
+                ModalView(
+                  { close() },
+                  showSearch = true,
+                  searchAlwaysVisible = true,
+                  onSearchValueChanged = {
+                    search.value = it
+                  },
+                  content = {
+                    UserProfilesView(chatModel, search, profileHidden) { block ->
+                        if (authorized.value) {
+                          block()
+                        } else {
+                          doWithAuth(
+                            generalGetString(MR.strings.auth_open_chat_profiles),
+                            generalGetString(MR.strings.auth_log_in_using_credential)
+                          ) {
+                            authorized.value = true
+                            block()
+                          }
+                        }
+                      }
+                  })
+              }
+            },
+            disabled = stopped
+          )
+        }
       }
     }
 
@@ -351,47 +354,49 @@ private fun GlobalSettingsSection(
 ) {
   val stopped = remember { chatModel.chatRunning }.value == false
 
-  if (appPlatform.isAndroid) {
+  SectionView {
-    val text = generalGetString(MR.strings.settings_section_title_use_from_desktop).lowercase().capitalize(Locale.current)
+    if (appPlatform.isAndroid) {
+      val text = generalGetString(MR.strings.settings_section_title_use_from_desktop).lowercase().capitalize(Locale.current)
 
-    UserPickerOptionRow(
+      UserPickerOptionRow(
-      painterResource(MR.images.ic_desktop),
+        painterResource(MR.images.ic_desktop),
-      text,
+        text,
+        click = {
+          ModalManager.start.showCustomModal { close ->
+            ConnectDesktopView(close)
+          }
+        },
+        disabled = stopped
+      )
+    } else {
+      UserPickerOptionRow(
+        icon = painterResource(MR.images.ic_smartphone_300),
+        text = stringResource(if (remember { chat.simplex.common.platform.chatModel.remoteHosts }.isEmpty()) MR.strings.link_a_mobile else MR.strings.linked_mobiles),
+        click = {
+          userPickerState.value = AnimatedViewState.HIDING
+          ModalManager.start.showModal {
+            ConnectMobileView()
+          }
+        },
+        disabled = stopped
+      )
+    }
+
+    SectionItemView(
       click = {
-        ModalManager.start.showCustomModal { close ->
+        ModalManager.start.showModalCloseable { close ->
-          ConnectDesktopView(close)
+          SettingsView(chatModel, setPerformLA, close)
         }
       },
-      disabled = stopped
+      padding = if (appPlatform.isDesktop) PaddingValues(start = DEFAULT_PADDING * 1.7f, end = DEFAULT_PADDING + 2.dp) else PaddingValues(start = DEFAULT_PADDING, end = DEFAULT_PADDING_HALF)
-    )
+    ) {
-  } else {
+      val text = generalGetString(MR.strings.settings_section_title_settings).lowercase().capitalize(Locale.current)
-    UserPickerOptionRow(
+      Icon(painterResource(MR.images.ic_settings), text, tint = MaterialTheme.colors.secondary)
-      icon = painterResource(MR.images.ic_smartphone_300),
+      TextIconSpaced()
-      text = stringResource(if (remember { chat.simplex.common.platform.chatModel.remoteHosts }.isEmpty()) MR.strings.link_a_mobile else MR.strings.linked_mobiles),
+      Text(text, color = Color.Unspecified)
-      click = {
+      Spacer(Modifier.weight(1f))
-        userPickerState.value = AnimatedViewState.HIDING
+      ColorModeSwitcher()
-        ModalManager.start.showModal {
+    }
-          ConnectMobileView()
-        }
-      },
-      disabled = stopped
-    )
-  }
-
-  SectionItemView(
-    click = {
-      ModalManager.start.showModalCloseable { close ->
-        SettingsView(chatModel, setPerformLA, close)
-      }
-    },
-    padding = if (appPlatform.isDesktop) PaddingValues(start = DEFAULT_PADDING * 1.7f, end = DEFAULT_PADDING + 2.dp) else PaddingValues(start = DEFAULT_PADDING, end = DEFAULT_PADDING_HALF)
-  ) {
-    val text = generalGetString(MR.strings.settings_section_title_settings).lowercase().capitalize(Locale.current)
-    Icon(painterResource(MR.images.ic_settings), text, tint = MaterialTheme.colors.secondary)
-    TextIconSpaced()
-    Text(text, color = Color.Unspecified)
-    Spacer(Modifier.weight(1f))
-    ColorModeSwitcher()
   }
 }