forum: use icons to indicate sticky/locked/deleted/restricted status.

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

@@ -58,11 +58,10 @@
   --uploads-dropzone-progress-bar-foreground-color: var(--link-color);
   --uploads-dropzone-progress-bar-background-color: var(--link-hover-color);
 
-  --forum-new-topic-color: red;
-  --forum-level-restricted-topic-color: #F66;
   --forum-vote-up-color: green;
   --forum-vote-meh-color: goldenrod;
   --forum-vote-down-color: red;
+  --forum-topic-status-new-color: red;
 
   --moderation-report-text-color: red;
   --moderation-report-border: 2px solid red;
@@ -322,11 +321,10 @@ body[data-current-user-theme="dark"] {
   --form-button-active-border: 1px solid var(--grey-5);
   --form-button-active-color: white;
 
-  --forum-new-topic-color: var(--red-1);
-  --forum-level-restricted-topic-color: var(--red-1);
   --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-1);
 
   --moderation-report-text-color: var(--red-1);
   --moderation-report-border: 2px solid var(--red-1);

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

@@ -40,22 +40,30 @@ div.list-of-forum-posts {
 }
 
 div#c-forum-topics {
-  span.new {
-    font-size: 80%;
-    color: var(--forum-new-topic-color);
-    margin-right: 0.5em;
-  }
+  span.topic-status {
+    margin-right: 0.25em;
+    vertical-align: bottom;
 
-  span.locked-topic {
-    color: var(--muted-text-color);
-  }
+    &.label {
+      font-size: 0.8em;
+      text-transform: uppercase;
+    }
 
-  span.level-topic {
-    color: var(--forum-level-restricted-topic-color);
-    font-weight: bold;
+    &.icon {
+      color: var(--muted-text-color);
+      font-size: 1em;
+    }
+
+    &.new {
+      color: var(--forum-topic-status-new-color);
+    }
   }
 
   #a-index {
+    td {
+      line-height: 1.5em;
+    }
+
     .updated-at-column {
       white-space: nowrap;
     }

app/views/forum_topics/_listing.html.erb

@@ -1,11 +1,31 @@
 <%= table_for forum_topics, width: "100%" do |t| %>
   <% t.column "Title" do |topic| %>
     <% if topic.is_sticky? %>
-      <span class="sticky">Sticky:</span>
+      <span class="topic-status icon stickied">
+        <i class="fas fa-thumbtack" title="Stickied"></i>
+      </span>
+    <% end %>
+
+    <% if topic.is_locked? %>
+      <span class="topic-status icon locked">
+        <i class="fas fa-lock" title="Locked"></i>
+      </span>
+    <% end %>
+
+    <% if topic.is_deleted? %>
+      <span class="topic-status icon deleted">
+        <i class="fas fa-trash-alt" title="Deleted"></i>
+      </span>
+    <% end %>
+
+    <% if topic.min_level > 0 %>
+      <span class="topic-status icon restricted">
+        <i class="fas fa-hand-paper" title="<%= User.level_string(topic.min_level) %> only"></i>
+      </span>
     <% end %>
 
     <% if !topic.is_read? %>
-      <span class="new">NEW</span>
+      <span class="topic-status label new">New</span>
     <% end %>
 
     <%= link_to topic.title, forum_topic_path(topic), class: "forum-post-link" %>
@@ -13,14 +33,6 @@
     <% if topic.response_count > Danbooru.config.posts_per_page %>
       <%= link_to "page #{topic.last_page}", forum_topic_path(topic, :page => topic.last_page), :class => "last-page" %>
     <% end %>
-
-    <% if topic.is_locked? %>
-      <span class="locked-topic">(locked)</span>
-    <% end %>
-
-    <% if topic.min_level > 0 %>
-      <span class="level-topic">(<%= User.level_string(topic.min_level).downcase %> only)</span>
-    <% end %>
   <% end %>
   <% t.column "BURs", width: "20%" do |topic| %>
     <%= bulk_update_request_counts(topic) %>