forum: add back 'new' label, move status labels to right-side column.

Also prevent long usernames from wrapping.

Fixes #4332.

app/javascript/src/styles/base/040_colors.css

@@ -61,6 +61,7 @@
   --forum-vote-up-color: green;
   --forum-vote-meh-color: goldenrod;
   --forum-vote-down-color: red;
+  --forum-topic-status-new-color: hsla(0, 50%, 55%, 1);
   --forum-topic-status-pending-color: hsla(210, 25%, 55%, 1);
   --forum-topic-status-approved-color: hsla(120, 25%, 55%, 1);
   --forum-topic-status-rejected-color: hsla(0, 25%, 55%, 1);
@@ -327,6 +328,7 @@ body[data-current-user-theme="dark"] {
   --forum-vote-up-color: var(--green-1);
   --forum-vote-meh-color: var(--yellow-1);
   --forum-vote-down-color: var(--red-1);
+  --forum-topic-status-new-color: var(--red-3);
   --forum-topic-status-pending-color: var(--blue-3);
   --forum-topic-status-approved-color: var(--green-3);
   --forum-topic-status-rejected-color: var(--red-3);

app/javascript/src/styles/specific/forum.scss

@@ -40,6 +40,15 @@ div.list-of-forum-posts {
 }
 
 div#c-forum-topics {
+  td.status-column {
+    white-space: nowrap;
+    text-align: right;
+  }
+
+  td.creator-column, td.updated-by-column {
+    white-space: nowrap;
+  }
+
   span.topic-status {
     margin-right: 0.25em;
     vertical-align: bottom;
@@ -48,7 +57,7 @@ div#c-forum-topics {
       font-size: 0.7em;
       text-transform: uppercase;
       border-radius: 3px;
-      padding: 3px;
+      padding: 4px;
       color: white;
     }
 
@@ -57,6 +66,10 @@ div#c-forum-topics {
       font-size: 1em;
     }
 
+    &.new {
+      background-color: var(--forum-topic-status-new-color);
+    }
+
     &.pending {
       background-color: var(--forum-topic-status-pending-color);
     }
@@ -71,15 +84,11 @@ div#c-forum-topics {
   }
 
   #a-index {
-    tr[data-is-read="false"] .forum-post-link {
-      font-weight: bold;
-    }
-
     .updated-at-column {
       white-space: nowrap;
     }
 
-    .updated-by-column, .updated-at-column {
+    .creator-column, .updated-by-column, .updated-at-column {
       @media screen and (max-width: 660px) {
         display: none;
       }

app/views/forum_topics/_listing.html.erb

@@ -1,5 +1,9 @@
 <%= table_for forum_topics, width: "100%" do |t| %>
   <% t.column "Title" do |topic| %>
+    <% if !topic.is_read? %>
+      <span class="topic-status label new">New</span>
+    <% end %>
+
     <% if topic.is_sticky? %>
       <span class="topic-status icon stickied">
         <i class="fas fa-thumbtack" title="Stickied"></i>
@@ -24,9 +28,7 @@
       </span>
     <% end %>
 
-    <% status = forum_topic_status(topic) %>
-    <% if status.present? %>
-      <span class="topic-status label <%= status %>"><%= status %></span>
+    <% if forum_topic_status(topic).present? %>
       <%= link_to topic.pretty_title, forum_topic_path(topic), class: "forum-post-link" %>
     <% else %>
       <%= link_to topic.title, forum_topic_path(topic), class: "forum-post-link" %>
@@ -36,6 +38,10 @@
       <%= link_to "page #{topic.last_page}", forum_topic_path(topic, :page => topic.last_page), :class => "last-page" %>
     <% end %>
   <% end %>
+  <% t.column "Status", width: "1%" do |topic| %>
+    <% status = forum_topic_status(topic) %>
+    <span class="topic-status label <%= status %>"><%= status %></span>
+  <% end %>
   <% t.column "Creator", width: "8%" do |topic| %>
     <%= link_to_user topic.creator %>
   <% end %>