UX: user threads styling tweaks

plugins/chat/assets/javascripts/discourse/components/channels-list.gjs

@@ -166,23 +166,18 @@ export default class ChannelsList extends Component {
       {{didInsert this.computeHasScrollbar}}
       {{onResize this.computeResizedEntries}}
     >
-      <div class="channels-list-container user-threads-section">
-        <LinkTo @route="chat.threads" class="chat__user-threads-row-container">
-          <div class="chat__user-threads-row">
 
-            <span class="chat__user-threads-row__title">
+      <LinkTo @route="chat.threads" class="chat-channel-row --threads">
-              {{dIcon "discourse-threads" class="chat__user-threads-row__icon"}}
+        <span class="chat-channel-title">
-              {{i18n "chat.my_threads.title"}}
+          {{dIcon "discourse-threads" class="chat-user-threads__icon"}}
-            </span>
+          {{i18n "chat.my_threads.title"}}
-
+        </span>
-            {{#if this.hasUnreadThreads}}
+        {{#if this.hasUnreadThreads}}
-              <div class="chat__unread-indicator">
+          <div class="c-unread-indicator">
-                <div class="chat__unread-indicator__number">&nbsp;</div>
+            <div class="c-unread-indicator__number">&nbsp;</div>
-              </div>
-            {{/if}}
           </div>
-        </LinkTo>
+        {{/if}}
-      </div>
+      </LinkTo>
 
       {{#if this.displayPublicChannels}}
         <div class="chat-channel-divider public-channels-section">

plugins/chat/assets/javascripts/discourse/components/user-threads/index.gjs

@@ -71,39 +71,29 @@ export default class UserThreads extends Component {
   }
 
   <template>
-    <div class="chat__user-threads-container">
+    <div class="c-user-threads" {{this.fill}}>
-      <div class="chat__user-threads" {{this.fill}}>
+      {{#each this.threadsCollection.items as |thread|}}
-        {{#each this.threadsCollection.items as |thread|}}
+        <div class="c-user-thread" data-id={{thread.id}}>
-          <div
+          <ThreadTitle @thread={{thread}} />
-            class="chat__user-threads__thread-container"
+          <ChannelTitle @channel={{thread.channel}} />
-            data-id={{thread.id}}
-          >
-            <div class="chat__user-threads__thread">
-              <div class="chat__user-threads__title">
-                <ThreadTitle @thread={{thread}} />
-                <ChannelTitle @channel={{thread.channel}} />
-              </div>
 
-              <div class="chat__user-threads__thread-indicator">
+          <ThreadIndicator
-                <ThreadIndicator
+            @message={{thread.originalMessage}}
-                  @message={{thread.originalMessage}}
+            @interactiveUser={{false}}
-                  @interactiveUser={{false}}
+            @interactiveThread={{false}}
-                  @interactiveThread={{false}}
+            tabindex="-1"
-                  tabindex="-1"
+          />
-                />
-              </div>
-            </div>
-          </div>
-        {{/each}}
-
-        <div {{this.loadMore}}>
-          <br />
         </div>
+      {{/each}}
 
-        <ConditionalLoadingSpinner
+      <div {{this.loadMore}}>
-          @condition={{this.threadsCollection.loading}}
+        <br />
-        />
       </div>
+
+      <ConditionalLoadingSpinner
+        @condition={{this.threadsCollection.loading}}
+      />
+
     </div>
   </template>
 }

plugins/chat/assets/stylesheets/common/chat-unread-indicator.scss

@@ -22,6 +22,6 @@
   }
 }
 
-.chat__unread-indicator {
+.c-unread-indicator {
   @include chat-unread-indicator;
 }

plugins/chat/assets/stylesheets/common/chat-user-threads-row.scss

@@ -1,32 +0,0 @@
-.chat__user-threads-row {
-  display: flex;
-  align-items: center;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-
-  .chat__unread-indicator {
-    width: 8px;
-    height: 8px;
-  }
-
-  &-container {
-    height: 3.6em;
-    padding: 0 0.5rem;
-    margin: 0.5rem 0rem 0 0.5rem;
-    box-sizing: border-box;
-    display: flex;
-
-    &:hover {
-      background: var(--primary-low);
-    }
-
-    .chat__user-threads-row__icon {
-      color: var(--primary);
-    }
-    .chat__user-threads-row__title {
-      color: var(--primary);
-    }
-  }
-}

plugins/chat/assets/stylesheets/common/chat-user-threads.scss

@@ -1,23 +1,45 @@
-.chat__user-threads__thread-indicator {
+.c-user-thread {
-  padding-top: 1rem;
+  padding-block: 1.25rem;
-
+  margin-inline: 1rem;
-  .chat-message-thread-indicator {
-    margin: 0;
-  }
-}
-
-.chat__user-threads__title {
-  .chat-channel-title__name {
-    font-size: var(--font-down-1);
-    color: var(--primary-medium);
-  }
-}
-
-.chat__user-threads__thread {
-  padding-bottom: 1rem;
   border-bottom: 1px solid var(--primary-low);
 
-  &-container {
+  .c-unread-indicator {
-    padding: 1rem 1rem 0 1rem;
+    width: 8px;
+    height: 8px;
+    align-self: flex-start;
+  }
+
+  .chat-message-thread-indicator {
+    margin-left: 0;
+    margin-top: 1rem;
+    &:hover {
+      box-shadow: none;
+    }
+  }
+
+  .chat__thread-title__name {
+    font-size: var(--font-up-1-rem);
+
+    &:hover {
+      color: var(--primary-very-high);
+    }
+  }
+
+  .chat-channel-title__name {
+    color: var(--primary-high);
+    font-size: var(--font-down-1);
+  }
+}
+
+//sidebar
+#sidebar-section-content-user-threads {
+  padding-bottom: 0.5rem;
+  .sidebar-section-link-wrapper:hover {
+    .sidebar-section-link-prefix {
+      color: var(--primary-very-high);
+    }
+  }
+  .sidebar-section-link-content-text {
+    color: var(--d-sidebar-header-color);
   }
 }

plugins/chat/assets/stylesheets/common/index.scss

@@ -67,5 +67,4 @@
 @import "chat-channel-settings";
 @import "chat-user-threads";
 @import "chat-navbar";
-@import "chat-user-threads-row";
 @import "chat-thread-title";

plugins/chat/assets/stylesheets/desktop/chat-index-drawer.scss

@@ -24,6 +24,18 @@
         margin-top: 0.25rem;
       }
     }
+
+    &.--threads {
+      margin-top: 0.25rem;
+      .c-unread-indicator {
+        width: 8px;
+        height: 8px;
+      }
+      .chat-channel-title {
+        gap: 0.5rem;
+        color: var(--primary);
+      }
+    }
   }
 
   .toggle-channel-membership-button.-leave {

plugins/chat/assets/stylesheets/mobile/chat-index.scss

@@ -24,6 +24,24 @@
       }
     }
 
+    .chat-channel-row {
+      &.--threads {
+        color: var(--primary);
+        padding-inline: 1.5rem;
+        font-size: var(--font-up-1-rem);
+        border: 0;
+
+        .chat-channel-title {
+          gap: 0.5rem;
+        }
+
+        .c-unread-indicator {
+          width: 8px;
+          height: 8px;
+        }
+      }
+    }
+
     .chat-user-avatar {
       + .chat-channel-title__usernames {
         margin-left: 1rem;

plugins/chat/assets/stylesheets/mobile/chat-user-threads.scss

@@ -0,0 +1,5 @@
+.chat-user-threads {
+  .chat__thread-title {
+    justify-content: space-between;
+  }
+}

plugins/chat/assets/stylesheets/mobile/index.scss

@@ -18,3 +18,4 @@
 @import "chat-form";
 @import "chat-modal-new-message";
 @import "chat-thread-list-header";
+@import "chat-user-threads";

plugins/chat/spec/system/page_objects/chat/user_threads.rb

@@ -5,13 +5,11 @@ module PageObjects
     class UserThreads < PageObjects::Pages::Base
       def has_threads?(count: nil)
         has_no_css?(".spinner")
-        has_css?(".chat__user-threads__thread-container", count: count)
+        has_css?(".c-user-thread", count: count)
       end
 
       def open_thread(thread)
-        find(
+        find(".c-user-thread[data-id='#{thread.id}'] .chat__thread-title__name").click
-          ".chat__user-threads__thread-container[data-id='#{thread.id}'] .chat__thread-title__name",
-        ).click
       end
     end
   end

plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb

@@ -38,19 +38,19 @@ module PageObjects
       end
 
       def has_user_threads_section?
-        has_css?(".chat__user-threads-row-container[href='/chat/threads']")
+        has_css?(".chat-channel-row.--threads[href='/chat/threads']")
       end
 
       def has_unread_user_threads?
-        has_css?(".chat__user-threads-row .chat__unread-indicator")
+        has_css?(".chat-channel-row.--threads .c-unread-indicator")
       end
 
       def has_no_unread_user_threads?
-        has_no_css?(".chat__user-threads-row .chat__unread-indicator")
+        has_no_css?(".chat-channel-row.--threads .c-unread-indicator")
       end
 
       def click_user_threads
-        find(".chat__user-threads-row").click
+        find(".chat-channel-row.--threads").click
       end
 
       def maximize