feat: threads 2.0 styling

src/v2/styles/Avatar/Avatar-layout.scss

@@ -34,6 +34,9 @@
 
 .str-chat__avatar {
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: var(--str-chat__avatar-size);
   line-height: var(--str-chat__avatar-size);
   width: var(--str-chat__avatar-size);
@@ -44,6 +47,11 @@
     font-size: calc(var(--str-chat__avatar-size) * 0.5);
   }
 
+  &.str-chat__avatar--no-letters {
+    --str-chat-icon-width: calc(var(--str-chat__avatar-size) * 0.33);
+    --str-chat-icon-height: calc(var(--str-chat__avatar-size) * 0.33);
+  }
+
   &.str-chat__avatar--multiple-letters,
   &.stream-chat__avatar--multiple-letters {
     font-size: calc(var(--str-chat__avatar-size) * 0.3);
@@ -52,7 +60,7 @@
   .str-chat__avatar-image {
     height: 100%;
     width: 100%;
-    object-fit: cover;;
+    object-fit: cover;
   }
 
   .str-chat__avatar-fallback {
@@ -74,4 +82,4 @@
   flex-shrink: 0;
   width: calc(var(--str-chat__spacing-px) * 49);
   height: calc(var(--str-chat__spacing-px) * 49);
-}
+}

src/v2/styles/Avatar/Avatar-theme.scss

@@ -38,6 +38,11 @@
     display: block;
   }
 
+  &.str-chat__avatar--no-letters {
+    --str-chat-icon-color: var(--str-chat__avatar-color);
+    @include utils.component-layer-overrides('avatar');
+  }
+
   .str-chat__avatar-fallback {
     @include utils.component-layer-overrides('avatar');
     text-transform: uppercase;

src/v2/styles/ChatView/ChatView-layout.scss

@@ -0,0 +1,43 @@
+.str-chat__chat-view {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  &__selector {
+    display: flex;
+    flex-direction: column;
+    padding-inline: 8px;
+    padding-block: 16px;
+    gap: 20px;
+
+    &-button {
+      --str-chat-icon-height: 20px;
+      --str-chat-icon-width: 20px;
+      --str-chat-unread-count-badge-absolute-offset-vertical: 25%;
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-inline: 10px;
+      padding-block: 10px;
+      border-radius: 8px;
+      gap: 4px;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 1;
+      box-sizing: border-box;
+      cursor: pointer;
+      position: relative;
+    }
+  }
+
+  &__channels {
+    display: flex;
+    flex-grow: 1;
+  }
+
+  &__threads {
+    display: flex;
+    flex-grow: 1;
+  }
+}

src/v2/styles/ChatView/ChatView-theme.scss

@@ -0,0 +1,31 @@
+.str-chat {
+  --str-chat-selector-background-color: var(--str-chat__secondary-background-color);
+  --str-chat-selector-border-color: var(--str-chat__surface-color);
+
+  --str-chat-selector-button-color-default: var(--str-chat__text-low-emphasis-color);
+  --str-chat-selector-button-color-selected: var(--str-chat__text-color);
+  --str-chat-selector-button-background-color-default: transparent;
+  --str-chat-selector-button-background-color-selected: var(--str-chat__surface-color);
+}
+
+.str-chat__chat-view {
+  &__selector {
+    border-right: 1px solid var(--str-chat-selector-border-color);
+    background-color: var(--str-chat-selector-background-color);
+
+    &-button {
+      --str-chat-icon-color: var(--str-chat-selector-button-color-default);
+
+      border: none;
+      background: var(--str-chat-selector-button-background-color-default);
+      color: var(--str-chat-selector-button-color-default);
+
+
+      &[aria-selected='true'] {
+        --str-chat-icon-color: var(--str-chat-selector-button-color-selected);
+        color: var(--str-chat-selector-button-color-selected);
+        background: var(--str-chat-selector-button-background-color-selected);
+      }
+    }
+  }
+}

src/v2/styles/MessageList/MessageList-layout.scss

@@ -52,12 +52,6 @@
   }
 }
 
-.str-chat__thread {
-  .str-chat__main-panel-inner {
-    height: auto;
-  }
-}
-
 .str-chat__main-panel {
   .str-chat__ul {
     .str-chat__li:first-of-type {

src/v2/styles/MessageList/VirtualizedMessageList-layout.scss

@@ -55,15 +55,3 @@
     padding-block-end: var(--str-chat__spacing-0_5);
   }
 }
-
-
-.str-chat__thread--virtualized {
-  .str-chat__main-panel-inner {
-    height: 100%;
-
-    // the first message in virtualized thread has to be separated from the top by padding, not margin
-    .str-chat__virtual-list-message-wrapper:first-of-type {
-      padding-block-start: var(--str-chat__spacing-4);
-    }
-  }
-}

src/v2/styles/Thread/Thread-layout.scss

@@ -1,5 +1,6 @@
 @use '../utils';
 
+// FIXME: figure out why does this "container" exist when __thread is completely valid
 .str-chat__thread-container {
   height: 100%;
   display: flex;
@@ -40,12 +41,25 @@
       }
     }
   }
+}
 
-  .str-chat__thread-list {
+.str-chat__thread {
+  .str-chat__main-panel-inner {
     height: auto;
   }
 }
 
+.str-chat__thread--virtualized {
+  .str-chat__main-panel-inner {
+    height: 100%;
+
+    // the first message in virtualized thread has to be separated from the top by padding, not margin
+    .str-chat__virtual-list-message-wrapper:first-of-type {
+      padding-block-start: var(--str-chat__spacing-4);
+    }
+  }
+}
+
 .str-chat__parent-message-li {
   padding: var(--str-chat__spacing-2);
 }

src/v2/styles/ThreadList/ThreadList-layout.scss

@@ -0,0 +1,149 @@
+.str-chat__thread-list-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.str-chat__unseen-threads-banner {
+  font-size: 16px;
+  font-weight: 400;
+
+  margin: 8px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &__button {
+    --str-chat-icon-width: 16px;
+    --str-chat-icon-heigh: 22px;
+
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.str-chat__thread-list {
+  .str-chat__thread-list-item {
+    align-items: stretch;
+    box-sizing: border-box;
+    padding-block: 14px;
+    padding-inline: 8px;
+    gap: 6px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+
+    .str-chat__thread-list-item__channel {
+      --str-chat-icon-height: 14px;
+      --str-chat-icon-width: 14px;
+
+      display: flex;
+      gap: 5px;
+
+      .str-chat__icon {
+        margin-top: 2px;
+        flex-shrink: 0;
+      }
+    }
+
+    .str-chat__thread-list-item__thread-status-symbol {
+      font-size: 14px;
+      line-height: 1;
+    }
+
+    .str-chat__thread-list-item__channel-text {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 1;
+    }
+
+    .str-chat__thread-list-item__parent-message {
+      display: flex;
+      gap: 3px;
+      justify-content: space-between;
+      align-items: center;
+      height: 15px;
+    }
+
+    .str-chat__thread-list-item__parent-message-text {
+      font-size: 12px;
+      font-weight: 400;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .str-chat__thread-list-item__latest-reply {
+      --str-chat__avatar-size: 49px;
+
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    .str-chat__thread-list-item__latest-reply-details {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      gap: 4px;
+      width: 0;
+    }
+
+    .str-chat__thread-list-item__latest-reply-created-by {
+      display: flex;
+      font-weight: 500;
+      font-size: 16px;
+    }
+
+    .str-chat__thread-list-item__latest-reply-text-and-timestamp {
+      display: flex;
+      font-size: 14px;
+      font-weight: 400;
+      justify-content: space-between;
+      align-items: baseline;
+      line-height: 16px;
+    }
+
+    .str-chat__thread-list-item__latest-reply-text {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .str-chat__thread-list-item__latest-reply-timestamp {
+      white-space: nowrap;
+    }
+  }
+
+  .str-chat__thread-list-loading-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-block: 14px;
+    padding-inline: 8px;
+  }
+}
+
+.str-chat__thread-list-empty-placeholder {
+  --str-chat-icon-height: 95px;
+  --str-chat-icon-width: 95px;
+
+  font-size: 20px;
+  font-weight: 500;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 16px;
+}