From ed7fe0fc262d01ca1498b63372705459f211737f Mon Sep 17 00:00:00 2001
From: Anton Arnautov <arnautov.anton@gmail.com>
Date: Fri, 6 Dec 2024 17:35:39 +0100
Subject: [PATCH] Add styling for channel pinning and archiving feature

---
 .../ChannelPreview/ChannelPreview-layout.scss | 24 +++++++++++++++++++
 .../ChannelPreview/ChannelPreview-theme.scss  | 17 +++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss b/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss
index e3d303c..e875e0a 100644
--- a/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss
+++ b/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss
@@ -25,6 +25,28 @@
   }
 }
 
+.str-chat__channel-preview-container {
+  position: relative;
+
+  .str-chat__channel-preview__action-buttons {
+    position: absolute;
+    right: var(--str-chat__spacing-2);
+    bottom: var(--str-chat__spacing-3);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1px;
+
+    .str-chat__channel-preview__action-button {
+      cursor: pointer;
+      padding-block: 2px;
+      padding-inline: 4px;
+
+      --str-chat-icon-height: 13px;
+    }
+  }
+}
+
 .str-chat__channel-preview {
   @include channel-preview-layout;
   cursor: pointer;
@@ -78,6 +100,8 @@
       p {
         @include utils.ellipsis-text;
         margin: 0;
+        // 40px is the width of the two action buttons
+        max-width: calc(100% - 40px);
       }
     }
   }
diff --git a/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss b/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss
index a3294f4..8fd5e6c 100644
--- a/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss
+++ b/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss
@@ -64,6 +64,23 @@
   --str-chat__channel-preview-message-time-color: var(--str-chat__message-secondary-color);
 }
 
+.str-chat__channel-preview-container {
+  .str-chat__channel-preview__action-buttons {
+    .str-chat__channel-preview__action-button {
+      border: none;
+      background-color: transparent;
+      --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
+    }
+
+    .str-chat__channel-preview__action-button--pin.str-chat__channel-preview__action-button--active {
+      --str-chat-icon-color: var(--str-chat__unread-badge-color);
+    }
+    .str-chat__channel-preview__action-button--archive.str-chat__channel-preview__action-button--active {
+      --str-chat-icon-color: var(--str-chat__text-color);
+    }
+  }
+}
+
 .str-chat__channel-preview {
   @include utils.component-layer-overrides('channel-preview');