Multiple fixes (#47)

* Invert colors for the read vs unread partially read threads overview

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

* aligned desktop thread titles by reserving a fixed icon column width

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

* fixed z-index for hover over icon in mobile view

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

* add button to thread view that allows you to jump to the first unread message directly

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

* topic titles break instead of showing a scrollbar

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

* removed unnecessary checks, as reading means we do have at least one unread message

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

---------

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

Author: ImTheKai

app/assets/stylesheets/components/topics.css

@@ -239,6 +239,10 @@ a.topic-icon {
     gap: var(--spacing-2);
   }
 
+  .topic-title-icons {
+    min-width: 0;
+  }
+
   .topic-icon {
     padding: 2px;
     margin-right: 0;
@@ -303,6 +307,14 @@ a.topic-icon {
   }
 }
 
+.topic-row.topic-reading.has-new-replies {
+  background: var(--color-bg-unread);
+
+  &:hover {
+    background: var(--color-bg-unread-hover);
+  }
+}
+
 .topic-row.topic-read {
   color: var(--color-text-muted);
   background: var(--color-bg-read);
@@ -320,6 +332,8 @@ a.topic-icon {
   padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-2);
   align-self: stretch;
   height: 100%;
+  min-width: var(--topic-title-icons-width, 190px);
+  flex-shrink: 0;
 }
 
 .status-border.has-new-replies::before {
@@ -329,7 +343,7 @@ a.topic-icon {
   top: 0;
   bottom: 0;
   width: var(--topic-new-replies-strip-width, 260px);
-  background: var(--color-bg-unread);
+  background: var(--color-bg-read);
   clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
   z-index: 0;
 }
@@ -429,8 +443,7 @@ a.topic-icon {
 
 .topic-title-main {
   display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: max-content;
+  grid-template-columns: max-content minmax(0, 1fr);
   align-items: stretch;
   gap: var(--spacing-2);
   height: 100%;
@@ -511,6 +524,7 @@ a.topic-icon {
 
   .topic-title-mobile {
     display: flex;
+    z-index: auto;
   }
 
   .topic-row-footer {
@@ -531,6 +545,9 @@ a.topic-icon {
     font-size: var(--font-size-2xs);
   }
 
+  .topic-icon-hover {
+    z-index: 200;
+  }
 }
 
 .topic-link {
@@ -539,6 +556,9 @@ a.topic-icon {
   font-weight: var(--font-weight-semibold);
   font-size: var(--font-size-lg);
   line-height: var(--line-height-relaxed);
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
 
   &:hover {
     color: var(--color-text-link-hover);

app/views/topics/_status_cell.html.slim

@@ -5,21 +5,17 @@
   - total_count = topic.message_count
   - reading_unread_count = [total_count - read_count, 0].max
 - status_class = "status-#{status}"
-- status_class = "#{status_class} has-new-replies" if status.to_s == "reading" && reading_unread_count.to_i.positive?
+- status_class = "#{status_class} has-new-replies" if status.to_s == "reading"
 - star_data = star_data || {}
 td.topic-title.status-border class=status_class id=dom_id(topic, "status_cell") data-label="Topic"
   - creator = topic.creator_display_alias
   - last_sender = topic.last_sender_person&.default_alias
   .topic-title-main
     .topic-title-icons
       - if status.to_s == "reading"
-        - if reading_unread_count.to_i.positive?
-          = link_to topic_path(topic, anchor: "first-unread"), class: "topic-icon topic-icon-reading", title: "Jump to first unread message (#{reading_unread_count} unread)" do
-            i.fa-solid.fa-envelope
-            span.topic-icon-badge.topic-icon-badge-sup = reading_unread_count
-        - else
-          .topic-icon.topic-icon-reading title="All messages read"
-            i.fa-solid.fa-envelope
+        = link_to topic_path(topic, anchor: "first-unread"), class: "topic-icon topic-icon-reading", title: "Jump to first unread message (#{reading_unread_count} unread)" do
+          i.fa-solid.fa-envelope
+          span.topic-icon-badge.topic-icon-badge-sup = reading_unread_count
       = render partial: "topics/star_icon", locals: { topic: topic, star_data: star_data }
       = render partial: "topics/note_icon", locals: { topic: topic, count: note_count.to_i }
       = render partial: "topics/team_readers_icon", locals: { topic: topic, readers: team_readers }
@@ -47,13 +43,9 @@ td.topic-title.status-border class=status_class id=dom_id(topic, "status_cell")
         .topic-icons
           .topic-title-icons
             - if status.to_s == "reading"
-              - if reading_unread_count.to_i.positive?
-                = link_to topic_path(topic, anchor: "first-unread"), class: "topic-icon topic-icon-reading", title: "Jump to first unread message (#{reading_unread_count} unread)" do
-                  i.fa-solid.fa-envelope
-                  span.topic-icon-badge.topic-icon-badge-sup = reading_unread_count
-              - else
-                .topic-icon.topic-icon-reading title="All messages read"
-                  i.fa-solid.fa-envelope
+              = link_to topic_path(topic, anchor: "first-unread"), class: "topic-icon topic-icon-reading", title: "Jump to first unread message (#{reading_unread_count} unread)" do
+                i.fa-solid.fa-envelope
+                span.topic-icon-badge.topic-icon-badge-sup = reading_unread_count
             = render partial: "topics/star_icon", locals: { topic: topic, star_data: star_data }
             = render partial: "topics/note_icon", locals: { topic: topic, count: note_count.to_i }
             = render partial: "topics/team_readers_icon", locals: { topic: topic, readers: team_readers }

app/views/topics/_topic_row_user.html.slim

@@ -3,12 +3,15 @@
 - participation = participation || {}
 - team_readers = team_readers || []
 - star_data = star_data || {}
+- status = state[:status] || "new"
+- row_class = ["topic-row", "topic-#{status}"]
+- row_class << "has-new-replies" if status.to_s == "reading"
 - topic_participants_map ||= @topic_participants_map || {}
 - tp_data = topic_participants_map[topic.id] || {}
 - top_participants = tp_data[:top] || []
 - contributor_participants = tp_data[:contributors] || []
 
-tr id=dom_id(topic) class="topic-row topic-#{state[:status] || 'new'}" data-topic-id=topic.id data-last-message-id=topic.last_message_id
+tr id=dom_id(topic) class=row_class.join(" ") data-topic-id=topic.id data-last-message-id=topic.last_message_id
   = render partial: "topics/status_cell", locals: { topic: topic, state: state, note_count: note_count, team_readers: team_readers, star_data: star_data }
   td.topic-activity data-label="Activity"
     - replies_count = [topic.message_count - 1, 0].max

app/views/topics/show.html.slim

@@ -200,6 +200,8 @@
       - if user_signed_in?
         button.button.button-secondary.button-small data-action="click->thread-actions#markAllRead" Mark all messages read
       = link_to "Jump to latest", "#message-#{last_message.id}", class: "button button-secondary button-small", title: "Jump to latest message", "aria-label": "Jump to latest message"
+      - if user_signed_in?
+        = link_to "Jump to unread", "#first-unread", class: "button button-secondary button-small", title: "Jump to first unread message", "aria-label": "Jump to first unread message"
 
   - first_unread_found = false
   - @messages.each do |message|