From fc19a74e49059d96dfc389fe67885931ddbed453 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Thu, 12 Jun 2025 15:39:38 -0500
Subject: [PATCH] Add an obvious link to the collection

---
 app/assets/stylesheets/card-perma.css | 4 ++++
 app/views/cards/index.html.erb        | 6 +++---
 app/views/cards/show.html.erb         | 6 ++++++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/card-perma.css b/app/assets/stylesheets/card-perma.css
index 47f4c4c8c..b7cf05d21 100644
--- a/app/assets/stylesheets/card-perma.css
+++ b/app/assets/stylesheets/card-perma.css
@@ -74,6 +74,10 @@
     }
   }
 
+  .card-perma__collection-header {
+    margin-block-end: 4ch;
+  }
+
   /* Child items
   /* ------------------------------------------------------------------------ */
 
diff --git a/app/views/cards/index.html.erb b/app/views/cards/index.html.erb
index eba0049da..76a4b1100 100644
--- a/app/views/cards/index.html.erb
+++ b/app/views/cards/index.html.erb
@@ -6,10 +6,10 @@
   <%= render "cards/index/header", filter: @filter %>
 <% end %>
 
-<header class="margin-block-start-none margin-block-end">
-  <h1 class="txt-large overflow-ellipsis margin-none font-black">
+<header class="margin-block-end" style="view-transistion-name: card-colleciton-title">
+  <span class="txt-large overflow-ellipsis margin-none font-black">
     <span><%= filter_title @filter %></span>
-  </h1>
+  </span>
   <%= render "filters/settings", filter: @filter %>
 </header>
 
diff --git a/app/views/cards/show.html.erb b/app/views/cards/show.html.erb
index ef0989929..d4829446c 100644
--- a/app/views/cards/show.html.erb
+++ b/app/views/cards/show.html.erb
@@ -29,6 +29,12 @@
   </nav>
 <% end %>
 
+<header class="card-perma__collection-header">
+  <%= link_to cards_path(collection_ids: [ @card.collection ]), class: "txt-large overflow-ellipsis margin-none txt-ink", style: "view-transistion-name: card-colleciton-title" do %>
+    &larr; <strong class="font-black"><%= @card.collection.name %></strong>
+  <% end %>
+</header>
+
 <div data-controller="beacon" data-beacon-url-value="<%= card_reading_url(@card) %>">
   <%= render "cards/container", card: @card %>