Add bridge component

app/javascript/controllers/bridge/stamp_controller.js

@@ -0,0 +1,20 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+
+export default class extends BridgeComponent {
+  static component = "stamp"
+
+  connect() {
+    super.connect()
+    this.notifyBridgeOfConnect()
+  }
+
+  disconnect() {
+    super.disconnect()
+    this.send("disconnect")
+  }
+
+  notifyBridgeOfConnect() {
+    console.log(this.bridgeElement.getStamp())
+    this.send("connect", this.bridgeElement.getStamp())
+  }
+}

app/javascript/initializers/bridge/bridge_element.js

@@ -9,6 +9,14 @@ BridgeElement.prototype.getButton = function() {
   }
 }
 
+BridgeElement.prototype.getStamp = function() {
+  return {
+    title: this.title,
+    date: this.getDate(),
+    by: this.getBy()
+  }
+}
+
 BridgeElement.prototype.getIcon = function() {
   const url = this.bridgeAttribute(`icon-url`)
 
@@ -19,6 +27,14 @@ BridgeElement.prototype.getIcon = function() {
   return null
 }
 
+BridgeElement.prototype.getDate = function() {
+  return this.bridgeAttribute(`date`) ?? null
+}
+
+BridgeElement.prototype.getBy = function() {
+  return this.bridgeAttribute(`by`) ?? null
+}
+
 BridgeElement.prototype.getDisplayTitle = function() {
   return !!this.bridgeAttribute(`display-title`)
 }

app/views/cards/display/common/_stamp.html.erb

@@ -1,15 +1,25 @@
 <% if card.postponed? %>
-  <div class="card__closed <%= "card__closed--system" if card.postponed_by&.system? %>">
+  <%= tag.div class: token_list("card__closed", "card__closed--system": card.postponed_by&.system?), data: {
+    controller: "bridge--stamp",
+    bridge_title: "Not Now",
+    bridge_date: card.postponed_at.strftime("%b %d, %Y"),
+    bridge_by: card.postponed_by&.familiar_name
+  } do %>
     <span class="card__closed-title" data-text="Not Now">Not Now</span>
     <strong class="card__closed-date"><%= card.postponed_at.strftime("%b %d, %Y") %></strong>
     <span class="card__closed-by-line">by <span class="card__closed-by"><%= card.postponed_by&.familiar_name %></span></span>
-  </div>
+  <% end %>
 <% end %>
 
 <% if card.closed? %>
-  <div class="card__closed">
+  <%= tag.div class: "card__closed", data: {
+    controller: "bridge--stamp",
+    bridge_title: "Done",
+    bridge_date: card.closed_at.strftime("%b %d, %Y"),
+    bridge_by: card.closed_by.familiar_name
+  } do %>
     <span class="card__closed-title" data-text="Done">Done</span>
     <strong class="card__closed-date"><%= card.closed_at.strftime("%b %d, %Y") %></strong>
     <span class="card__closed-by-line">by <span class="card__closed-by"><%= card.closed_by.familiar_name %></span></span>
-  </div>
+  <% end %>
 <% end %>