From aef75feead9a1c0fae3e47bcf6fea2d9cc8263a2 Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@37signals.com>
Date: Fri, 11 Apr 2025 11:45:06 +0200
Subject: [PATCH 1/2] Only consider golden those cards in "doing"

---
 app/helpers/cards_helper.rb               | 4 ++++
 app/views/cards/display/_perma.html.erb   | 2 +-
 app/views/cards/display/_preview.html.erb | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/helpers/cards_helper.rb b/app/helpers/cards_helper.rb
index ba75a6d4a..8c9cc0498 100644
--- a/app/helpers/cards_helper.rb
+++ b/app/helpers/cards_helper.rb
@@ -26,4 +26,8 @@ module CardsHelper
       class: "btn txt-small",
       **options
   end
+
+  def golden_class_for(card)
+    "card--golden" if card.doing? && card.golden?
+  end
 end
diff --git a/app/views/cards/display/_perma.html.erb b/app/views/cards/display/_perma.html.erb
index bdc1a3c4d..adba7fb7f 100644
--- a/app/views/cards/display/_perma.html.erb
+++ b/app/views/cards/display/_perma.html.erb
@@ -1,5 +1,5 @@
 <% cache card do %>
-  <article class="card shadow border flex flex-column position-relative txt-align-start border-radius <%= 'card--golden' if card.golden? %>"
+  <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) %>">
     <header class="card__header flex align-center gap min-width">
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index c8fcbe8c5..3d59c8fb7 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/app/views/cards/display/_preview.html.erb
@@ -1,5 +1,5 @@
 <% cache [ card ] do %>
-  <article class="card shadow border flex flex-column position-relative txt-align-start full-width border-radius <%= 'card--golden' if card.golden? %>"
+  <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) %>">
     <header class="card__header flex align-center gap min-width">

From 825bbf808ef0cdbc95fe49db0220644cc25ee4cc Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@37signals.com>
Date: Fri, 11 Apr 2025 12:01:52 +0200
Subject: [PATCH 2/2] Extract helper for card articles, use classes to
 determine when to show golden status

---
 app/assets/stylesheets/cards.css          |  6 +++---
 app/helpers/cards_helper.rb               | 15 +++++++++++++--
 app/views/cards/display/_perma.html.erb   |  6 ++----
 app/views/cards/display/_preview.html.erb |  6 ++----
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index 1a8325e45..61beab9b2 100644
--- a/app/assets/stylesheets/cards.css
+++ b/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;
diff --git a/app/helpers/cards_helper.rb b/app/helpers/cards_helper.rb
index 8c9cc0498..1546efd8e 100644
--- a/app/helpers/cards_helper.rb
+++ b/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
diff --git a/app/views/cards/display/_perma.html.erb b/app/views/cards/display/_perma.html.erb
index adba7fb7f..c4c89046c 100644
--- a/app/views/cards/display/_perma.html.erb
+++ b/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 %>
diff --git a/app/views/cards/display/_preview.html.erb b/app/views/cards/display/_preview.html.erb
index 3d59c8fb7..ceffc0867 100644
--- a/app/views/cards/display/_preview.html.erb
+++ b/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 %>