From e5f7d252fe8e98acf7ecbf5f90be67edd5990cfa Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@37signals.com>
Date: Tue, 10 Jun 2025 10:17:19 +0200
Subject: [PATCH] Create dedicate templates for card previews

To remove links and customize as we need to
---
 app/assets/stylesheets/utilities.css          |  5 +++
 app/helpers/avatars_helper.rb                 | 12 +++++-
 .../cards/display/_public_preview.html.erb    | 39 +++++++++++++++++++
 .../display/public_preview/_meta.html.erb     | 38 ++++++++++++++++++
 .../display/public_preview/_stages.html.erb   |  8 ++++
 .../public/collections/show/_closed.html.erb  |  2 +-
 .../collections/show/_considering.html.erb    |  2 +-
 .../public/collections/show/_doing.html.erb   |  2 +-
 8 files changed, 103 insertions(+), 5 deletions(-)
 create mode 100644 app/views/cards/display/_public_preview.html.erb
 create mode 100644 app/views/cards/display/public_preview/_meta.html.erb
 create mode 100644 app/views/cards/display/public_preview/_stages.html.erb

diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 50892bc9a..e74a0f6db 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -94,6 +94,11 @@
     white-space: normal;
   }
 
+  /* Mouse pointer */
+  .non-clickable {
+    cursor: default;
+  }
+
   /* Padding */
   .pad { padding: var(--block-space) var(--inline-space); }
   .pad-double { padding: var(--block-space-double) var(--inline-space-double); }
diff --git a/app/helpers/avatars_helper.rb b/app/helpers/avatars_helper.rb
index 732825572..6ab6d47bc 100644
--- a/app/helpers/avatars_helper.rb
+++ b/app/helpers/avatars_helper.rb
@@ -12,8 +12,16 @@ module AvatarsHelper
 
   def avatar_tag(user, hidden_for_screen_reader: false, **options)
     link_to user_path(user), class: "btn avatar", data: { turbo_frame: "_top" },
-        aria: { hidden: hidden_for_screen_reader, label: user.name },
-        tabindex: hidden_for_screen_reader ? -1 : nil do
+      aria: { hidden: hidden_for_screen_reader, label: user.name },
+      tabindex: hidden_for_screen_reader ? -1 : nil do
+      avatar_image_tag(user, **options)
+    end
+  end
+
+  def avatar_preview_tag(user, hidden_for_screen_reader: false, **options)
+    tag.span class: "avatar",
+      aria: { hidden: hidden_for_screen_reader, label: user.name },
+      tabindex: hidden_for_screen_reader ? -1 : nil do
       avatar_image_tag(user, **options)
     end
   end
diff --git a/app/views/cards/display/_public_preview.html.erb b/app/views/cards/display/_public_preview.html.erb
new file mode 100644
index 000000000..4d5af3400
--- /dev/null
+++ b/app/views/cards/display/_public_preview.html.erb
@@ -0,0 +1,39 @@
+<% cache cacheable_preview_parts_for(card) do %>
+  <%= card_article_tag card, class: "card" do %>
+    <div class="flex gap">
+      <div class="flex flex-column flex-item-grow">
+        <header class="card__header">
+
+          <div class="card__collection flex align-start">
+            <span class="card__id"><%= card.id %></span>
+            <span class="card__collection-name overflow-ellipsis"><%= card.collection.name %></span>
+          </div>
+
+          <%= render "cards/display/preview/tags", card: card %>
+        </header>
+
+        <div class="card__body justify-space-between">
+          <div class="card__content">
+            <h1 class="card__title overflow-line-clamp">
+              <%= card.title %>
+            </h1>
+
+            <span class="for-screen-reader"><%= card.title %></span>
+          </div>
+        </div>
+      </div>
+
+      <%= render "cards/display/public_preview/stages", card: card if card.doing? %>
+    </div>
+
+    <footer class="card__footer">
+      <%= render "cards/display/public_preview/meta", card: card %>
+    </footer>
+
+    <%= render "cards/display/common/background", card: card %>
+
+    <% if card.entropic? %>
+      <%= render "cards/display/preview/bubble", card: card %>
+    <% end %>
+  <% end %>
+<% end %>
diff --git a/app/views/cards/display/public_preview/_meta.html.erb b/app/views/cards/display/public_preview/_meta.html.erb
new file mode 100644
index 000000000..c83603f80
--- /dev/null
+++ b/app/views/cards/display/public_preview/_meta.html.erb
@@ -0,0 +1,38 @@
+<div class="card__meta" id="<%= dom_id(card, :meta) %>">
+  <%= avatar_preview_tag card.creator %>
+
+  <div class="card__meta-grid">
+    <span class="card__meta-item card__meta-item--added overflow-ellipsis">
+      Added <%= local_datetime_tag(card.created_at, style: :daysago) %>
+      <% if card.drafted? %>
+        <strong>(Draft)</strong>
+      <% end %>
+    </span>
+    <span class="card__meta-item card__meta-item--updated overflow-ellipsis">
+      Updated
+      <%= local_datetime_tag(card.last_active_at, style: :daysago) %>
+    </span>
+    <span class="card__meta-item card__meta-item--reported overflow-ellipsis">
+      By <strong><%= card.creator.familiar_name %></strong>
+    </span>
+    <span class="card__meta-item card__meta-item--assigned overflow-ellipsis">
+      <%= card.assignees.any? ? "Assigned to" : "Not assigned" %>
+      <%= card.assignees.map { |assignee| "<strong>#{assignee.familiar_name}</strong>" }.to_sentence.html_safe %>
+    </span>
+  </div>
+
+  <div class="margin-inline-start flex-item-no-shrink">
+    <div class="flex" id="<%= dom_id(card, :assignees) %>">
+      <% card.assignees.each do |assignee| %>
+        <%= avatar_preview_tag assignee, class: "avatar" %>
+      <% end %>
+
+      <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" <%= "hidden" if card.closed? %>>
+        <button class="btn card__hide-on-index fill-transparent" data-action="click->dialog#open:stop">
+          <%= icon_tag "person-add" %>
+          <span class="for-screen-reader">Assign</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/views/cards/display/public_preview/_stages.html.erb b/app/views/cards/display/public_preview/_stages.html.erb
new file mode 100644
index 000000000..ed8151db9
--- /dev/null
+++ b/app/views/cards/display/public_preview/_stages.html.erb
@@ -0,0 +1,8 @@
+<% if workflow = card.collection.workflow %>
+  <div id="<%= dom_id(card, :stages) %>" class="card__stages">
+    <% workflow.stages.each do |stage| %>
+      <%= tag.div stage.name,
+                class: ["overflow-ellipsis flex align-center gap-half btn non-clickable justify-start workflow-stage txt-uppercase no-hover", { "workflow-stage--current": stage == card.stage }] %>
+    <% end %>
+  </div>
+<% end %>
diff --git a/app/views/public/collections/show/_closed.html.erb b/app/views/public/collections/show/_closed.html.erb
index 662d99ba7..7a8d9e528 100644
--- a/app/views/public/collections/show/_closed.html.erb
+++ b/app/views/public/collections/show/_closed.html.erb
@@ -1,6 +1,6 @@
 <section id="closed-cards" class="cards cards--closed">
   <% if page.used? %>
-    <%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: true %>
+    <%= render partial: "cards/display/public_preview", collection: page.records, as: :card, cached: true %>
 
     <% unless page.last? %>
       <%= public_collection_cards_next_page_link collection, "closed-cards", fetch_on_visible: true, page: page %>
diff --git a/app/views/public/collections/show/_considering.html.erb b/app/views/public/collections/show/_considering.html.erb
index c88e31a5f..0235da0a6 100644
--- a/app/views/public/collections/show/_considering.html.erb
+++ b/app/views/public/collections/show/_considering.html.erb
@@ -4,7 +4,7 @@
   </h2>
 
   <% if page.used? %>
-    <%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: true %>
+    <%= render partial: "cards/display/public_preview", collection: page.records, as: :card, cached: true %>
 
     <% unless page.last? %>
       <%= public_collection_cards_next_page_link collection, "considering-cards", page: page %>
diff --git a/app/views/public/collections/show/_doing.html.erb b/app/views/public/collections/show/_doing.html.erb
index 7ed35376d..909032cb3 100644
--- a/app/views/public/collections/show/_doing.html.erb
+++ b/app/views/public/collections/show/_doing.html.erb
@@ -4,7 +4,7 @@
   </h2>
 
   <% if page.used? %>
-    <%= render partial: "cards/display/preview", collection: page.records, as: :card, cached: ->(card) { cacheable_preview_parts_for(card) } %>
+    <%= render partial: "cards/display/public_preview", collection: page.records, as: :card, cached: ->(card) { cacheable_preview_parts_for(card) } %>
 
     <% unless page.last? %>
       <%= public_collection_cards_next_page_link collection, "doing-cards", page: page %>