feat: Channel list and preview #89

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

@@ -3,3 +3,9 @@
     text-align: center;
   }
 }
+
+.str-chat__loading-channels-avatar {
+  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

@@ -22,3 +22,7 @@
     text-transform: uppercase;
   }
 }
+
+.str-chat__loading-channels-avatar {
+  border-radius: var(--str-chat__avatar-border-radius);
+}

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

@@ -1,4 +1,9 @@
 .str-chat-channel-list {
   height: 100%;
   overflow-y: auto;
+
+  // This is displayed only in theme-v1
+  .str-chat__down-main {
+    display: none;
+  }
 }

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

@@ -10,8 +10,43 @@
   --str-chat__channel-list-border-block-end: none;
   --str-chat__channel-list-border-inline-start: none;
   --str-chat__channel-list-border-inline-end: 1px solid var(--str-chat__surface-color);
+
+  --str-chat__channel-list-load-more-font-family: var(--str-chat__cta-button-font-family);
+  --str-chat__channel-list-load-more-border-radius: var(--str-chat__cta-button-border-radius);
+  --str-chat__channel-list-load-more-color: var(--str-chat__cta-button-color);
+  --str-chat__channel-list-load-more-background-color: var(--str-chat__cta-button-background-color);
+  --str-chat__channel-list-load-more-box-shadow: var(--str-chat__cta-button-box-shadow);
+  --str-chat__channel-list-load-more-border-block-start: var(
+    --str-chat__cta-button-border-block-start
+  );
+  --str-chat__channel-list-load-more-border-block-end: var(--str-chat__cta-button-border-block-end);
+  --str-chat__channel-list-load-more-border-inline-start: var(
+    --str-chat__cta-button-border-inline-start
+  );
+  --str-chat__channel-list-load-more-border-inline-end: var(
+    --str-chat__cta-button-border-inline-end
+  );
+  --str-chat__channel-list-load-more-pressed-background-color: var(
+    --str-chat__cta-button-pressed-background-color
+  );
+  --str-chat__channel-list-load-more-disabled-background-color: var(
+    --str-chat__cta-button-disabled-background-color
+  );
+  --str-chat__channel-list-load-more-disabled-color: var(--str-chat__cta-button-disabled-color);
 }
 
 .str-chat-channel-list {
   @include utils.component-layer-overrides('channel-list');
+
+  .str-chat__load-more-button {
+    display: flex;
+    justify-content: center;
+    margin: var(--str-chat__spacing-2) 0;
+
+    .str-chat__load-more-button__button {
+      @include utils.component-layer-overrides('channel-list-load-more');
+      @include utils.cta-button-overrides('channel-list-load-more');
+      width: 80%;
+    }
+  }
 }

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

@@ -1,24 +1,37 @@
 @use '../utils';
 
-.str-chat__channel-preview {
+.str-chat__channel-preview,
+.str-chat__channel-preview-loading {
   display: flex;
   column-gap: var(--str-chat__spacing-2);
   align-items: center;
   justify-content: flex-start;
   width: 100%;
   cursor: pointer;
-  padding: var(--str-chat__spacing-2);
+  padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
   text-align: start;
 
-  .str-chat__channel-preview-end {
+  .str-chat__channel-preview-end,
+  .str-chat__channel-preview-end-loading {
     overflow: hidden; // need this for ellipsis text to work
     display: flex;
     flex-direction: column;
     gap: var(--str-chat__spacing-0_5);
+    width: 100%;
 
     .str-chat__channel-preview-messenger--name,
     .str-chat__channel-preview-messenger--last-message {
       @include utils.ellipsis-text;
     }
   }
+
+  .str-chat__loading-channels-username {
+    height: calc(var(--str-chat__spacing-px) * 16);
+    width: calc(var(--str-chat__spacing-px) * 66);
+  }
+
+  .str-chat__loading-channels-status {
+    height: calc(var(--str-chat__spacing-px) * 16);
+    width: 100%;
+  }
 }

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

@@ -15,6 +15,7 @@
   --str-chat__channel-preview-latest-message-secondary-color: var(
     --str-chat__text-low-emphasis-color
   );
+  --str-chat__channel-preview-loading-state-color: var(--str-chat__disabled-color);
 }
 
 .str-chat__channel-preview {
@@ -37,7 +38,7 @@
   .str-chat__channel-preview-messenger--last-message {
     font-size: 0.875rem;
     line-height: 1rem;
-    color: var(--str-chat__channel-preview-latest-message-inactive-color);
+    color: var(--str-chat__channel-preview-latest-message-secondary-color);
     font-weight: 400;
   }
 
@@ -47,4 +48,48 @@
       color: var(--str-chat__channel-preview-color);
     }
   }
+
+  &.str-chat__channel-preview--unread {
+    .str-chat__channel-preview-messenger--last-message {
+      color: var(--str-chat__channel-preview-color);
+      font-weight: 500;
+    }
+  }
+}
+
+.str-chat__channel-preview-loading {
+  animation: pulsate 1s linear 0s infinite alternate;
+
+  &:nth-of-type(2) {
+    animation: pulsate 1s linear 0.3334 infinite alternate;
+  }
+
+  &:last-of-type {
+    animation: pulsate 1s linear 0.6667s infinite alternate;
+  }
+
+  @keyframes pulsate {
+    from {
+      opacity: 0.5;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .str-chat__loading-channels-avatar,
+  .str-chat__loading-channels-username,
+  .str-chat__loading-channels-status {
+    background-image: linear-gradient(
+      -90deg,
+      var(--str-chat__channel-preview-loading-state-color) 0%,
+      var(--str-chat__channel-preview-loading-state-color) 100%
+    );
+  }
+
+  .str-chat__loading-channels-username,
+  .str-chat__loading-channels-status {
+    border-radius: var(--str-chat__border-radius-xs);
+  }
 }

src-v2/styles/_common.scss

@@ -0,0 +1,7 @@
+.str-chat {
+  box-sizing: border-box;
+
+  * {
+    box-sizing: border-box;
+  }
+}

src-v2/styles/_theme-variables.scss

@@ -73,6 +73,7 @@
   --str-chat__yellow200: #fff1cc;
   --str-chat__yellow100: #fff8e5;
 
+  --str-chat__border-radius-xs: 8px;
   --str-chat__border-radius-sm: 16px;
   --str-chat__border-radius-md: 20px;
   --str-chat__border-radius-circle: 999px;

src-v2/styles/_utils.scss

@@ -18,3 +18,14 @@
     border-inline-end: var(--str-chat__#{$component-name}-border-inline-end);
   }
 }
+
+@mixin cta-button-overrides($component-name) {
+  &:active {
+    background-color: var(--str-chat__#{$component-name}-pressed-background-color);
+  }
+
+  &:disabled {
+    background-color: var(--str-chat__#{$component-name}-disabled-background-color);
+    color: var(--str-chat__#{$component-name}-disabled-color);
+  }
+}

src-v2/styles/common/CTAButton/CTAButton-layout.scss

@@ -0,0 +1,4 @@
+.str-chat__cta-button {
+  padding: var(--str-chat__spacing-3_5) var(--str-chat__spacing-6);
+  cursor: pointer;
+}

src-v2/styles/common/CTAButton/CTAButton-theme.scss

@@ -0,0 +1,22 @@
+@use '../../utils';
+
+.str-chat {
+  --str-chat__cta-button-font-family: var(--str-chat__font-family);
+  --str-chat__cta-button-border-radius: var(--str-chat__border-radius-xs);
+  --str-chat__cta-button-color: var(--str-chat__on-primary-color);
+  --str-chat__cta-button-background-color: var(--str-chat__primary-color);
+  --str-chat__cta-button-border-block-start: none;
+  --str-chat__cta-button-border-block-end: none;
+  --str-chat__cta-button-border-inline-start: none;
+  --str-chat__cta-button-border-inline-end: none;
+  --str-chat__cta-button-box-shadow: none;
+  --str-chat__cta-button-pressed-background-color: var(--str-chat__active-primary-color);
+  --str-chat__cta-button-disabled-background-color: var(--str-chat__disabled-color);
+  --str-chat__cta-button-disabled-color: var(--str-chat__on-disabled-color);
+}
+
+.str-chat__cta-button {
+  @include utils.component-layer-overrides('cta-button');
+  @include utils.cta-button-overrides('cta-button');
+  font-size: 1rem;
+}

src-v2/styles/index.layout.scss

@@ -1,5 +1,7 @@
 @use 'theme-variables';
+@use 'common';
 
+@use 'common/CTAButton/CTAButton-layout.scss';
 @use 'ChannelList/ChannelList-layout';
 @use 'ChannelPreview/ChannelPreview-layout';
 @use 'Avatar/Avatar-layout';

src-v2/styles/index.scss

@@ -1,6 +1,5 @@
-@use 'theme-variables';
-
 @use 'index.layout.scss';
+@use 'common/CTAButton/CTAButton-theme.scss';
 @use 'ChannelList/ChannelList-theme';
 @use 'ChannelPreview/ChannelPreview-theme';
 @use 'Avatar/Avatar-theme';