desktop: making chat list item to have a hover effect (#3162)

* desktop: making chat list item to have a hover effect * changes * fix --------- Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
2026-03-30 14:15:55 +00:00 · 2023-10-03 00:23:38 +08:00
parent 0d93dab692
commit fdf3da73aa
3 changed files with 124 additions and 31 deletions
--- a/apps/multiplatform/common/src/androidMain/kotlin/chat/simplex/common/views/chatlist/ChatListNavLinkView.android.kt
+++ b/apps/multiplatform/common/src/androidMain/kotlin/chat/simplex/common/views/chatlist/ChatListNavLinkView.android.kt
@@ -0,0 +1,39 @@
+package chat.simplex.common.views.chatlist
+
+import androidx.compose.foundation.*
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.Divider
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import chat.simplex.common.views.helpers.*
+
+@Composable
+actual fun ChatListNavLinkLayout(
+  chatLinkPreview: @Composable () -> Unit,
+  click: () -> Unit,
+  dropdownMenuItems: (@Composable () -> Unit)?,
+  showMenu: MutableState<Boolean>,
+  stopped: Boolean,
+  selectedChat: State<Boolean>
+) {
+  var modifier = Modifier.fillMaxWidth()
+  if (!stopped) modifier = modifier
+    .combinedClickable(onClick = click, onLongClick = { showMenu.value = true })
+    .onRightClick { showMenu.value = true }
+  Box(modifier) {
+    Row(
+      modifier = Modifier
+        .fillMaxWidth()
+        .padding(start = 8.dp, top = 8.dp, end = 12.dp, bottom = 8.dp),
+      verticalAlignment = Alignment.Top
+    ) {
+      chatLinkPreview()
+    }
+    if (dropdownMenuItems != null) {
+      DefaultDropdownMenu(showMenu, dropdownMenuItems = dropdownMenuItems)
+    }
+  }
+  Divider(Modifier.padding(horizontal = 8.dp))
+}
--- a/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/chatlist/ChatListNavLinkView.kt
+++ b/apps/multiplatform/common/src/commonMain/kotlin/chat/simplex/common/views/chatlist/ChatListNavLinkView.kt
@@ -1,7 +1,6 @@
 package chat.simplex.common.views.chatlist

 import SectionItemView
-import androidx.compose.foundation.combinedClickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.*
 import androidx.compose.runtime.*
@@ -14,6 +13,10 @@ import dev.icerock.moko.resources.compose.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.desktop.ui.tooling.preview.Preview
+import androidx.compose.foundation.*
+import androidx.compose.foundation.interaction.InteractionSource
+import androidx.compose.ui.graphics.drawscope.ContentDrawScope
+import androidx.compose.ui.platform.LocalViewConfiguration
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
@@ -44,6 +47,7 @@ fun ChatListNavLinkView(chat: Chat, chatModel: ChatModel) {
    showMenu.value = false
    delay(500L)
  }
+  val selectedChat = remember(chat.id) { derivedStateOf { chat.id == ChatModel.chatId.value } }
  val showChatPreviews = chatModel.showChatPreviews.value
  when (chat.chatInfo) {
    is ChatInfo.Direct -> {
@@ -53,7 +57,8 @@ fun ChatListNavLinkView(chat: Chat, chatModel: ChatModel) {
        click = { directChatAction(chat.chatInfo, chatModel) },
        dropdownMenuItems = { ContactMenuItems(chat, chatModel, showMenu, showMarkRead) },
        showMenu,
-        stopped
+        stopped,
+        selectedChat
      )
    }
    is ChatInfo.Group ->
@@ -62,7 +67,8 @@ fun ChatListNavLinkView(chat: Chat, chatModel: ChatModel) {
        click = { groupChatAction(chat.chatInfo.groupInfo, chatModel) },
        dropdownMenuItems = { GroupMenuItems(chat, chat.chatInfo.groupInfo, chatModel, showMenu, showMarkRead) },
        showMenu,
-        stopped
+        stopped,
+        selectedChat
      )
    is ChatInfo.ContactRequest ->
      ChatListNavLinkLayout(
@@ -70,7 +76,8 @@ fun ChatListNavLinkView(chat: Chat, chatModel: ChatModel) {
        click = { contactRequestAlertDialog(chat.chatInfo, chatModel) },
        dropdownMenuItems = { ContactRequestMenuItems(chat.chatInfo, chatModel, showMenu) },
        showMenu,
-        stopped
+        stopped,
+        selectedChat
      )
    is ChatInfo.ContactConnection ->
      ChatListNavLinkLayout(
@@ -84,7 +91,8 @@ fun ChatListNavLinkView(chat: Chat, chatModel: ChatModel) {
        },
        dropdownMenuItems = { ContactConnectionMenuItems(chat.chatInfo, chatModel, showMenu) },
        showMenu,
-        stopped
+        stopped,
+        selectedChat
      )
    is ChatInfo.InvalidJSON ->
      ChatListNavLinkLayout(
@@ -97,7 +105,8 @@ fun ChatListNavLinkView(chat: Chat, chatModel: ChatModel) {
        },
        dropdownMenuItems = null,
        showMenu,
-        stopped
+        stopped,
+        selectedChat
      )
  }
 }
@@ -630,32 +639,14 @@ fun updateChatSettings(chat: Chat, chatSettings: ChatSettings, chatModel: ChatMo
 }

@Composable
-fun ChatListNavLinkLayout(
+expect fun ChatListNavLinkLayout(
  chatLinkPreview: @Composable () -> Unit,
  click: () -> Unit,
  dropdownMenuItems: (@Composable () -> Unit)?,
  showMenu: MutableState<Boolean>,
-  stopped: Boolean
-) {
-  var modifier = Modifier.fillMaxWidth()
-  if (!stopped) modifier = modifier
-    .combinedClickable(onClick = click, onLongClick = { showMenu.value = true })
-    .onRightClick { showMenu.value = true }
-  Box(modifier) {
-    Row(
-      modifier = Modifier
-        .fillMaxWidth()
-        .padding(start = 8.dp, top = 8.dp, end = 12.dp, bottom = 8.dp),
-      verticalAlignment = Alignment.Top
-    ) {
-      chatLinkPreview()
-    }
-    if (dropdownMenuItems != null) {
-      DefaultDropdownMenu(showMenu, dropdownMenuItems = dropdownMenuItems)
-    }
-  }
-  Divider(Modifier.padding(horizontal = 8.dp))
-}
+  stopped: Boolean,
+  selectedChat: State<Boolean>
+)

@Preview/*(
  uiMode = Configuration.UI_MODE_NIGHT_YES,
@@ -692,7 +683,8 @@ fun PreviewChatListNavLinkDirect() {
      click = {},
      dropdownMenuItems = null,
      showMenu = remember { mutableStateOf(false) },
-      stopped = false
+      stopped = false,
+      selectedChat = remember { mutableStateOf(false) }
    )
  }
 }
@@ -732,7 +724,8 @@ fun PreviewChatListNavLinkGroup() {
      click = {},
      dropdownMenuItems = null,
      showMenu = remember { mutableStateOf(false) },
-      stopped = false
+      stopped = false,
+      selectedChat = remember { mutableStateOf(false) }
    )
  }
 }
@@ -752,7 +745,8 @@ fun PreviewChatListNavLinkContactRequest() {
      click = {},
      dropdownMenuItems = null,
      showMenu = remember { mutableStateOf(false) },
-      stopped = false
+      stopped = false,
+      selectedChat = remember { mutableStateOf(false) }
    )
  }
 }
--- a/apps/multiplatform/common/src/desktopMain/kotlin/chat/simplex/common/views/chatlist/ChatListNavLinkView.desktop.kt
+++ b/apps/multiplatform/common/src/desktopMain/kotlin/chat/simplex/common/views/chatlist/ChatListNavLinkView.desktop.kt
@@ -0,0 +1,60 @@
+package chat.simplex.common.views.chatlist
+
+import androidx.compose.foundation.*
+import androidx.compose.foundation.interaction.InteractionSource
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.Divider
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.ContentDrawScope
+import androidx.compose.ui.unit.dp
+import chat.simplex.common.views.helpers.*
+
+private object NoIndication : Indication {
+  private object NoIndicationInstance : IndicationInstance {
+    override fun ContentDrawScope.drawIndication() {
+      drawContent()
+    }
+  }
+  @Composable
+  override fun rememberUpdatedInstance(interactionSource: InteractionSource): IndicationInstance {
+    return NoIndicationInstance
+  }
+}
+
+@Composable
+actual fun ChatListNavLinkLayout(
+  chatLinkPreview: @Composable () -> Unit,
+  click: () -> Unit,
+  dropdownMenuItems: (@Composable () -> Unit)?,
+  showMenu: MutableState<Boolean>,
+  stopped: Boolean,
+  selectedChat: State<Boolean>
+) {
+  var modifier = Modifier.fillMaxWidth()
+  if (!stopped) modifier = modifier
+    .background(color = if (selectedChat.value) MaterialTheme.colors.background.mixWith(MaterialTheme.colors.onBackground, 0.95f) else Color.Unspecified)
+    .combinedClickable(onClick = click, onLongClick = { showMenu.value = true })
+    .onRightClick { showMenu.value = true }
+  CompositionLocalProvider(
+    LocalIndication provides if (selectedChat.value && !stopped) NoIndication else LocalIndication.current
+  ) {
+    Box(modifier) {
+      Row(
+        modifier = Modifier
+          .fillMaxWidth()
+          .padding(start = 8.dp, top = 8.dp, end = 12.dp, bottom = 8.dp),
+        verticalAlignment = Alignment.Top
+      ) {
+        chatLinkPreview()
+      }
+      if (dropdownMenuItems != null) {
+        DefaultDropdownMenu(showMenu, dropdownMenuItems = dropdownMenuItems)
+      }
+    }
+  }
+  Divider()
+}