From 79d0babe81d1f29d9b3e1e10d7f0bf069919d4ed Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 28 Oct 2025 15:38:10 -0500
Subject: [PATCH 1/3] No need for emdash

---
 app/views/webhooks/event.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/webhooks/event.html.erb b/app/views/webhooks/event.html.erb
index dc93c23ab..91500a17b 100644
--- a/app/views/webhooks/event.html.erb
+++ b/app/views/webhooks/event.html.erb
@@ -1,4 +1,4 @@
 <%= event_action_sentence(@event) %>
 <% if @event.eventable %>
-— <%= link_to "↗︎", polymorphic_url(@event.eventable) %>
+<%= link_to "↗︎", polymorphic_url(@event.eventable) %>
 <% end %>

From 66f362ecd22b81633bbd4941bcf37cb4f078d61a Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 28 Oct 2025 16:42:58 -0500
Subject: [PATCH 2/3] Ensure bottom bar items are included in view transition
 calc

This avoids poping layer artifacts
---
 app/assets/stylesheets/bar.css   |  5 +++++
 app/assets/stylesheets/trays.css | 10 ++++++++++
 2 files changed, 15 insertions(+)

diff --git a/app/assets/stylesheets/bar.css b/app/assets/stylesheets/bar.css
index 79c85c634..00c456692 100644
--- a/app/assets/stylesheets/bar.css
+++ b/app/assets/stylesheets/bar.css
@@ -14,6 +14,7 @@
     padding-inline: calc(var(--tray-size) + calc(var(--inline-space) * 3));
     place-content: center;
     position: fixed;
+    view-transition-name: bar;
     z-index: var(--z-terminal);
 
     @media (prefers-color-scheme: dark) {
@@ -25,6 +26,10 @@
     }
   }
 
+  ::view-transition-group(bar) {
+    z-index: 99;
+  }
+
   .bar__input {
     transform: translateY(50%);
     transition: transform 350ms cubic-bezier(0.25, 1.25, 0.5, 1);
diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index 194057807..09ae687f4 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -328,6 +328,7 @@
 
   .tray--pins {
     inset-inline: var(--tray-margin) auto;
+    view-transition-name: tray-pins;
 
     #footer:has(.bar__placeholder[hidden]) & {
       inset-inline-start: -100%;
@@ -494,11 +495,16 @@
     }
   }
 
+  ::view-transition-group(tray-pins) {
+    z-index: 100;
+  }
+
   /* Notification-specific styles
   /* ------------------------------------------------------------------------ */
 
   .tray--notifications {
     inset-inline: auto var(--tray-margin);
+    view-transition-name: tray-notifications;
 
     #footer:has(.bar__placeholder[hidden]) & {
       inset-inline-end: -100%;
@@ -554,4 +560,8 @@
       }
     }
   }
+
+  ::view-transition-group(tray-notifications) {
+    z-index: 100;
+  }
 }

From b4e80987ee61caf78cec17990e6df304c7f9edf5 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 28 Oct 2025 17:06:17 -0500
Subject: [PATCH 3/3] Add a placeholder to reduce flashing on load/update

---
 app/views/cards/container/footer/_published.html.erb | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/views/cards/container/footer/_published.html.erb b/app/views/cards/container/footer/_published.html.erb
index ec2fe6527..72d01fdbf 100644
--- a/app/views/cards/container/footer/_published.html.erb
+++ b/app/views/cards/container/footer/_published.html.erb
@@ -1,7 +1,15 @@
 <%# FIXME: Let's move this aside outside of the card container section so these frames don't reload/flicker when card is replaced %>
 <div class="card-perma__actions card-perma__actions--right">
-  <%= turbo_frame_tag card, :watch, src: card_watch_path(card), target: "_top", refresh: :morph %>
-  <%= turbo_frame_tag card, :pin, src: card_pin_path(card), refresh: :morph %>
+  <%= turbo_frame_tag card, :watch, src: card_watch_path(card), target: "_top", refresh: :morph do %>
+    <%= button_to card_watch_path(card), class: "btn", data: { controller: "tooltip" } do %>
+      <%= icon_tag "bell-off" %> <span class="for-screen-reader">Watch this</span>
+    <% end %>
+  <% end %>
+  <%= turbo_frame_tag card, :pin, src: card_pin_path(card), refresh: :morph do %>
+    <%= button_to card_pin_path(card), class: "btn", data: { controller: "tooltip" } do %>
+      <%= icon_tag "unpinned" %> <span class="for-screen-reader">Pin this card</span>
+    <% end %>
+  <% end %>
 </div>
 
 <%= render "cards/container/closure", card: card %>