Extract helper for card articles, use classes to determine when to show golden status

app/assets/stylesheets/cards.css

@@ -97,12 +97,12 @@
     }
   }
 
-  .card--golden {
+  .card--golden.card--doing {
     --border-color: var(--color-bg) !important;
 
     background-color: var(--color-bg);
     background-image: linear-gradient(90deg, oklch(var(--lch-golden) / 0.5) 0%, oklch(var(--lch-golden) / 0.1) 50%, oklch(var(--lch-golden) / 0.75) 100%);
-    box-shadow: 
+    box-shadow:
       0 0 0.5em 0.2em var(--color-golden),
       0 0 1em 0.4em var(--color-golden) !important;
     outline: 1px solid var(--color-golden);
@@ -154,7 +154,7 @@
     &.card__actions-container--top {
       margin: calc(var(--block-space) * 1) auto calc(var(--block-space) * -0.66);
       min-inline-size: 30ch;
-  
+
       #header:has(&) {
         position: relative;
         z-index: 1;

app/helpers/cards_helper.rb

@@ -27,7 +27,18 @@ module CardsHelper
       **options
   end
 
-  def golden_class_for(card)
-    "card--golden" if card.doing? && card.golden?
+  def card_article_tag(card, id: dom_id(card, :ticket), **options, &block)
+    classes = [
+      options.delete(:class),
+      ("card--golden" if card.golden?),
+      ("card--doing" if card.doing?)
+    ].compact.join(" ")
+
+    tag.article \
+      id: id,
+      style: "--card-color: #{card.color}; view-transition-name: #{id}",
+      class: classes,
+      **options,
+      &block
   end
 end

app/views/cards/display/_perma.html.erb

@@ -1,7 +1,5 @@
 <% cache card do %>
-  <article class="card shadow border flex flex-column position-relative txt-align-start border-radius <%= golden_class_for(card) %>"
-      style="--card-color: <%= card.color %>; view-transition-name: <%= dom_id(card, :ticket) %>;"
-      id="<%= dom_id(card, :ticket) %>">
+  <%= card_article_tag card, class: "card shadow border flex flex-column position-relative txt-align-start border-radius" do %>
     <header class="card__header flex align-center gap min-width">
       <%= link_to card.collection.name, cards_path(collection_ids: [card.collection]),
             class: "card__collection txt-uppercase overflow-ellipsis txt-reversed" %>
@@ -39,5 +37,5 @@
     </footer>
 
     <%= render "cards/display/common/background", card: card %>
-  </article>
+  <% end %>
 <% end %>

app/views/cards/display/_preview.html.erb

@@ -1,7 +1,5 @@
 <% cache [ card ] do %>
-  <article class="card shadow border flex flex-column position-relative txt-align-start full-width border-radius <%= golden_class_for(card) %>"
-    style="--card-color: <%= card.color %>; view-transition-name: <%= dom_id(card, :ticket) %>;"
-    id="<%= dom_id(card, :ticket) %>">
+  <%= card_article_tag card, class: "card shadow border flex flex-column position-relative txt-align-start full-width border-radius" do %>
     <header class="card__header flex align-center gap min-width">
       <span class="card__collection txt-uppercase overflow-ellipsis txt-reversed"><%= card.collection.name %></span>
       <%= render "cards/display/preview/tags", card: card %>
@@ -26,5 +24,5 @@
     </footer>
 
     <%= render "cards/display/common/background", card: card %>
-  </article>
+  <% end %>
 <% end %>