Mobile: Bridge components

app/assets/stylesheets/card-perma.css

@@ -281,10 +281,7 @@
 
     /* Overlap the card BG by half the button height */
     &:has(.btn) {
-      &,
-      ~ .card-perma__closure-message {
-        translate: 0 calc(-1 * var(--half-btn-height));
-      }
+      translate: 0 calc(-1 * var(--half-btn-height));
     }
 
     form {
@@ -297,12 +294,6 @@
       --btn-color: var(--color-ink-inverted);
     }
 
-    .btn--plain {
-      --btn-color: var(--card-color);
-
-      text-decoration: underline;
-    }
-
     .btn--reversed {
       --btn-background: var(--color-canvas);
       --btn-color: var(--card-color);
@@ -330,11 +321,25 @@
   .card-perma__closure-message {
     color: var(--card-color);
     grid-area: closure-message;
-    margin-block-start: 0.5ch;
+    margin-block: var(--block-space) var(--block-space-double);
     padding-inline: 1ch;
 
-    form {
-      display: inline;
+    .btn--plain {
+      --btn-color: var(--card-color);
+
+      text-decoration: underline;
+    }
+
+    @media (max-width: 799px) {
+      margin-block: var(--block-space-half);
+      translate: 0 calc(-0.5 * var(--half-btn-height));
+    }
+
+    @media (min-width: 800px) {
+      .card-perma__notch--bottom:has(.btn) ~ & {
+        margin-block: var(--block-space-half) var(--block-space);
+        translate: 0 calc(-0.5 * var(--half-btn-height));
+      }
     }
   }
 }

app/assets/stylesheets/native.css

@@ -6,6 +6,8 @@
     --custom-safe-inset-bottom: var(--injected-safe-inset-bottom, env(safe-area-inset-bottom, 0px));
     --custom-safe-inset-left: var(--injected-safe-inset-left, env(safe-area-inset-left, 0px));
 
+    --footer-height: 0;
+
     -webkit-tap-highlight-color: transparent;
 
     .hide-on-native {
@@ -28,11 +30,27 @@
       }
     }
 
+    /* Card columns
+    /* ------------------------------------------------------------------------ */
+
+    .board-tools.card {
+      padding-block-start: 0;
+    }
+
     /* Card perma
     /* ------------------------------------------------------------------------ */
 
     .card-perma {
       margin-block-start: 0;
+
+      &:not(:has(.card-perma__notch-new-card-buttons)) .card-perma__bg {
+        padding-block: clamp(0.25rem, 2vw, var(--padding-block));
+      }
+    }
+
+    .card-perma__closure-message {
+      margin-block: var(--block-space);
+      translate: unset;
     }
 
     /* Search
@@ -43,3 +61,25 @@
     }
   }
 }
+
+[data-bridge-components~=form] {
+  [data-controller~=bridge--form] {
+    [data-bridge--form-target~=submit] {
+      display: none;
+    }
+  }
+}
+
+[data-bridge-components~=overflow-menu] {
+  [data-controller~=bridge--overflow-menu] {
+    [data-bridge--overflow-menu-target~=item] {
+      display: none;
+    }
+  }
+}
+
+[data-bridge-components~=buttons] {
+  [data-bridge--buttons-target~=button] {
+    display: none;
+  }
+}

app/assets/stylesheets/popup.css

@@ -53,6 +53,10 @@
   .popup__title {
     font-weight: 800;
     white-space: nowrap;
+
+    &[tabindex="-1"]:focus-visible {
+      outline: unset;
+    }
   }
 
   /* Hide lists when all the items within are hidden */

app/helpers/accesses_helper.rb

@@ -48,7 +48,8 @@ def involvement_button(board, access, show_watchers, icon_only)
       params: { show_watchers: show_watchers, involvement: next_involvement(access.involvement), icon_only: icon_only },
       aria: { labelledby: dom_id(board, :involvement_label) },
       title: (label_text if icon_only),
-      class: class_names("btn", { "btn--reversed": access.watching? && icon_only })) do
+      class: class_names("btn", { "btn--reversed": access.watching? && icon_only }),
+      data: !icon_only && { bridge__overflow_menu_target: "item", bridge_title: label_text }) do
         icon_tag("notification-bell-#{icon_only ? 'reverse-' : nil}#{access.involvement.dasherize}") +
         tag.span(label_text, class: class_names("txt-nowrap txt-uppercase", "for-screen-reader": icon_only), id: dom_id(board, :involvement_label))
     end

app/helpers/boards_helper.rb

@@ -4,7 +4,8 @@ def link_back_to_board(board)
   end
 
   def link_to_edit_board(board)
-    link_to edit_board_path(board), class: "btn", data: { controller: "tooltip" } do
+    link_to edit_board_path(board), class: "btn",
+      data: { controller: "tooltip", bridge__overflow_menu_target: "item", bridge_title: "Board settings" } do
       icon_tag("settings") + tag.span("Settings for #{board.name}", class: "for-screen-reader")
     end
   end

app/helpers/bridge_helper.rb

@@ -0,0 +1,5 @@
+module BridgeHelper
+  def bridge_icon(name)
+    asset_url("#{name}.svg")
+  end
+end

app/helpers/filters_helper.rb

@@ -40,6 +40,10 @@ def filter_dialog(label, &block)
     }, &block
   end
 
+  def filter_title(title)
+    tag.strong title, class: "popup__title pad-inline-half", tabindex: "-1", data: { dialog_target: "focusTouch" }
+  end
+
   def collapsible_nav_section(title, **properties, &block)
     tag.details class: "nav__section popup__section", data: { action: "toggle->nav-section-expander#toggle", nav_section_expander_target: "section", nav_section_expander_key_value: title.parameterize }, open: true, **properties do
       concat(tag.summary(class: "popup__section-title") do

app/helpers/forms_helper.rb

@@ -9,4 +9,23 @@ def auto_submit_form_with(**attributes, &)
       form_with(**attributes, data: data) { }
     end
   end
+
+  def bridged_form_with(**attributes, &)
+    data = attributes.delete(:data) || {}
+    controllers = [ data[:controller], "bridge--form" ].compact.join(" ").strip
+    actions = [
+      data[:action],
+      "turbo:submit-start->bridge--form#submitStart",
+      "turbo:submit-end->bridge--form#submitEnd"
+    ].compact.join(" ").strip
+
+    data[:controller] = controllers
+    data[:action] = actions
+
+    if block_given?
+      form_with **attributes, data: data, &
+    else
+      form_with(**attributes, data: data) { }
+    end
+  end
 end

app/helpers/webhooks_helper.rb

@@ -25,7 +25,7 @@ def webhook_action_label(action)
   def link_to_webhooks(board, &)
     link_to board_webhooks_path(board_id: board),
         class: [ "btn", { "btn--reversed": board.webhooks.any? } ],
-        data: { controller: "tooltip" } do
+        data: { controller: "tooltip", bridge__overflow_menu_target: "item", bridge_title: "Webhooks" } do
       icon_tag("world") + tag.span("Webhooks", class: "for-screen-reader")
     end
   end

app/javascript/application.js

@@ -1,8 +1,8 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
+import "@hotwired/hotwire-native-bridge"
 import "initializers"
 import "controllers"
 
 import "lexxy"
 import "@rails/actiontext"
-

app/javascript/controllers/bridge/buttons_controller.js

@@ -0,0 +1,43 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+import { BridgeElement } from "@hotwired/hotwire-native-bridge"
+
+export default class extends BridgeComponent {
+  static component = "buttons"
+  static targets = [ "button" ]
+
+  buttonTargetConnected() {
+    this.notifyBridgeOfConnect()
+  }
+
+  buttonTargetDisconnected() {
+    if (!this.#isControllerTearingDown()) {
+      this.notifyBridgeOfConnect()
+    }
+  }
+
+  notifyBridgeOfConnect() {
+    const buttons = this.#enabledButtonTargets
+      .map((target, index) => {
+        const element = new BridgeElement(target)
+        return { ...element.getButton(), index }
+    })
+
+    this.send("connect", { buttons }, message => {
+      this.#clickButton(message)
+    })
+  }
+
+  #clickButton(message) {
+    const selectedIndex = message.data.selectedIndex
+    this.#enabledButtonTargets[selectedIndex].click()
+  }
+
+  get #enabledButtonTargets() {
+    return this.buttonTargets
+      .filter(target => !target.closest("[data-bridge-disabled]"))
+  }
+
+  #isControllerTearingDown() {
+    return !document.body.contains(this.element)
+  }
+}

app/javascript/controllers/bridge/form_controller.js

@@ -0,0 +1,62 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+import { BridgeElement } from "@hotwired/hotwire-native-bridge"
+
+export default class extends BridgeComponent {
+  static component = "form"
+  static targets = [ "submit", "cancel" ]
+  static values = { submitTitle: String }
+
+  submitTargetConnected() {
+    this.notifyBridgeOfConnect()
+    this.#observeSubmitTarget()
+  }
+
+  submitTargetDisconnected() {
+    this.notifyBridgeOfDisonnect()
+    this.submitObserver?.disconnect()
+  }
+
+  notifyBridgeOfConnect() {
+    const submitElement = new BridgeElement(this.submitTarget)
+    const cancelElement = this.hasCancelTarget ? new BridgeElement(this.cancelTarget) : null
+
+    const submitButton = { title: submitElement.title }
+    const cancelButton = cancelElement ? { title: cancelElement.title } : null
+
+    this.send("connect", { submitButton, cancelButton }, message => this.receive(message))
+  }
+
+  receive(message) {
+    switch (message.event) {
+      case "submit":
+        this.submitTarget.click()
+        break
+      case "cancel":
+        this.cancelTarget.click()
+        break
+    }
+  }
+
+  notifyBridgeOfDisonnect() {
+    this.send("disconnect")
+  }
+
+  submitStart() {
+    this.send("submitStart")
+  }
+
+  submitEnd() {
+    this.send("submitEnd")
+  }
+
+  #observeSubmitTarget() {
+    this.submitObserver = new MutationObserver(() => {
+      this.send(this.submitTarget.disabled ? "submitDisabled" : "submitEnabled")
+    })
+
+    this.submitObserver.observe(this.submitTarget, {
+      attributes: true,
+      attributeFilter: [ "disabled" ]
+    })
+  }
+}

app/javascript/controllers/bridge/insets_controller.js

@@ -0,0 +1,31 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+
+// Bridge component to control custom safe-area insets from native apps.
+// Sets CSS variables --injected-safe-inset-(top|right|bottom|left).
+export default class extends BridgeComponent {
+  static component = "insets"
+
+  connect() {
+    super.connect()
+    this.notifyBridgeOfConnect()
+  }
+
+  disconnect() {
+    super.disconnect()
+    this.send("disconnect")
+  }
+
+  notifyBridgeOfConnect() {
+    this.send("connect", {}, message => {
+      this.#setInsets(message.data)
+    })
+  }
+
+  #setInsets({ top, right, bottom, left }) {
+    const root = document.documentElement.style
+    root.setProperty("--injected-safe-inset-top", `${top}px`)
+    root.setProperty("--injected-safe-inset-right", `${right}px`)
+    root.setProperty("--injected-safe-inset-bottom", `${bottom}px`)
+    root.setProperty("--injected-safe-inset-left", `${left}px`)
+  }
+}

app/javascript/controllers/bridge/overflow_menu_controller.js

@@ -0,0 +1,43 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+import { BridgeElement } from "@hotwired/hotwire-native-bridge"
+
+export default class extends BridgeComponent {
+  static component = "overflow-menu"
+  static targets = [ "item" ]
+
+  itemTargetConnected() {
+    this.notifyBridgeOfConnect()
+  }
+
+  itemTargetDisconnected() {
+    if (!this.#isControllerTearingDown) {
+      this.notifyBridgeOfConnect()
+    }
+  }
+
+  notifyBridgeOfConnect() {
+    const items = this.#enabledItemTargets
+      .map((target, index) => {
+        const element = new BridgeElement(target)
+        return { title: element.title, index }
+      })
+
+    this.send("connect", { items }, message => {
+      this.#clickItem(message)
+    })
+  }
+
+  #clickItem(message) {
+    const selectedIndex = message.data.selectedIndex
+    this.#enabledItemTargets[selectedIndex].click()
+  }
+
+  get #enabledItemTargets() {
+    return this.itemTargets
+      .filter(target => !target.closest("[data-bridge-disabled]"))
+  }
+
+  #isControllerTearingDown() {
+    return !document.body.contains(this.element)
+  }
+}