From a27987bd8e50cbb6a0f58223ec0f8dd5d0f8a3f7 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 7 Jul 2025 15:29:00 -0500
Subject: [PATCH] Add a button to remove pins from tray

---
 app/assets/stylesheets/trays.css | 32 +++++++++++++++++++++-----------
 app/views/my/pins/_pin.html.erb  |  3 +++
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css
index 7334aff5d..2d53bacd9 100644
--- a/app/assets/stylesheets/trays.css
+++ b/app/assets/stylesheets/trays.css
@@ -306,9 +306,30 @@
     .tray__item {
       --tray-item-z: calc(10 - var(--tray-item-index));
 
+      position: relative;
+
       &:nth-child(1n + var(--tray-max-items)) { display: none; }
     }
 
+    .tray__remove-pin-btn {
+      --btn-icon-size: 1.25em;
+      --btn-size: 2em;
+
+      background-color: var(--card-bg-color);
+      inset: 0 0 auto auto;
+      opacity: 0;
+      position: absolute;
+      z-index: 1;
+
+      .tray__dialog[open] & {
+        opacity: 0.66;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+
     .avatar,
     .card__tags,
     .card__meta .btn,
@@ -387,17 +408,6 @@
         }
       }
     }
-
-    /* On desktop, don't expand if there's only one pin */
-    @media (min-width: 800px) {
-      .tray__dialog:has(.tray__item:only-child) {
-        pointer-events: unset;
-
-        ~ .tray__toggle {
-          display: none;
-        }
-      }
-    }
   }
 
   /* Notification-specific styles
diff --git a/app/views/my/pins/_pin.html.erb b/app/views/my/pins/_pin.html.erb
index 935687995..5d80b4bbe 100644
--- a/app/views/my/pins/_pin.html.erb
+++ b/app/views/my/pins/_pin.html.erb
@@ -1,3 +1,6 @@
 <div class="tray__item" id="<%= dom_id pin %>">
   <%= render "cards/display/preview", card: pin.card %>
+  <%= button_to card_pin_path(pin.card), method: :delete, class: "tray__remove-pin-btn btn btn--circle borderless" do %>
+    <%= icon_tag "remove-med" %> <span class="for-screen-reader">Un-pin this card</span>
+  <% end %>
 </div>