Use icons in footer meta, dump the labels in previews

app/assets/stylesheets/cards.css

@@ -244,6 +244,13 @@
   .card__meta-text {
     line-height: 1;
     white-space: nowrap;
+
+    .icon {
+      --icon-size: 0.9em;
+
+      margin-inline-end: 0.5ch;
+      vertical-align: top;
+    }
   }
 
   /* Top */

app/views/cards/display/common/_meta.html.erb

@@ -4,6 +4,7 @@
   </div>
 
   <span class="card__meta-text card__meta-text--added">
+    <%= icon_tag "add--meta" %>
     Added <%= local_datetime_tag(card.created_at, style: :daysago) %>
     <% if card.drafted? %>
       <strong>(Draft)</strong>
@@ -11,6 +12,7 @@
   </span>
 
   <span class="card__meta-text card__meta-text--author">
+    <%= icon_tag "arrow-up" %>
     By <strong><%= card.creator.familiar_name %></strong>
   </span>
 
@@ -18,12 +20,14 @@
     <% if card.creating? %>
       &nbsp;
     <% else %>
+      <%= icon_tag "refresh--meta" %>
       Updated
       <%= local_datetime_tag(card.last_active_at, style: :daysago) %>
     <% end %>
   </span>
 
   <span class="card__meta-text card__meta-text--assignees overflow-ellipsis">
+    <%= icon_tag "arrow-right" if card.assignees.any? %>
     <%= "Assigned to" if card.assignees.any? %>
     <%= card.assignees.map { |assignee| "<strong>#{assignee.familiar_name}</strong>" }.to_sentence.html_safe %>
   </span>

app/views/cards/display/preview/_meta.html.erb

@@ -1,3 +1,30 @@
-<%= render "cards/display/common/meta", card: card, preview: true do %>
-  <%= render "cards/display/preview/assignees", card: card %>
-<% end %>
+<div class="card__meta" id="<%= dom_id(card, :meta) %>">
+  <div class="card__meta-avatars card__meta-avatars--author">
+    <%= avatar_tag card.creator, tabindex: (local_assigns.key?(:preview) && local_assigns[:preview]) ? -1 : 0 %>
+  </div>
+
+  <span class="card__meta-text card__meta-text--added">
+    <%= icon_tag "add--meta" %>
+    <%= local_datetime_tag(card.created_at, style: :daysago) %>
+    <% "(Draft)" if card.drafted? %>
+  </span>
+
+  <span class="card__meta-text card__meta-text--author">
+    <%= icon_tag "arrow-up" %>
+    <%= card.creator.familiar_name %>
+  </span>
+
+  <span class="card__meta-text card__meta-text--updated overflow-ellipsis">
+    <%= icon_tag "refresh--meta" %>
+    <%= local_datetime_tag(card.last_active_at, style: :daysago) %>
+  </span>
+
+  <span class="card__meta-text card__meta-text--assignees overflow-ellipsis">
+    <%= icon_tag "arrow-right" if card.assignees.any? %>
+    <%= card.assignees.map { |assignee| assignee.familiar_name }.to_sentence.html_safe %>
+  </span>
+
+  <div class="card__meta-avatars card__meta-avatars--assignees">
+    <%= render "cards/display/preview/assignees", card: card %>
+  </div>
+</div>