Mobile: Setup Hotwire Native Bridge and Page Component

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/bridge/controllers/bridge/page_controller.js

@@ -0,0 +1,131 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+import { BridgeElement } from "@hotwired/hotwire-native-bridge"
+import { viewport } from "bridge/helpers/viewport"
+import { nextFrame } from "helpers/timing_helpers"
+
+export default class extends BridgeComponent {
+  static component = "page"
+  static targets = [ "header" ]
+  static values = { title: String }
+
+  async connect() {
+    super.connect()
+    this.notifyBridgeOfPageChange()
+    await nextFrame()
+    this.startObserver()
+    window.addEventListener("resize", this.windowResized)
+    window.addEventListener("turbo:submit-start", this.submitStart)
+    window.addEventListener("turbo:submit-end", this.submitEnd)
+  }
+
+  disconnect() {
+    super.disconnect()
+    this.stopObserver()
+    window.removeEventListener("resize", this.windowResized)
+    window.removeEventListener("turbo:submit-start", this.submitStart)
+    window.removeEventListener("turbo:submit-end", this.submitEnd)
+  }
+
+  receive(message) {
+    switch (message.event) {
+    case "change":
+      this.updateHeaderVisibility(message.data)
+      break
+    case "set-text-size":
+      this.setTextSize(message.data)
+      break
+    }
+  }
+
+  setTextSize(data) {
+    document.documentElement.dataset.textSize = data.textSize
+  }
+
+  updateHeaderVisibility(data) {
+    if (!this.hasHeaderTarget) return
+
+    const headerElement = new BridgeElement(this.headerTarget)
+
+    if (data.displayOnPlatform) {
+      headerElement?.showOnPlatform()
+    } else {
+      headerElement?.hideOnPlatform()
+    }
+  }
+
+  // Bridge
+
+  notifyBridgeOfPageChange() {
+    let headerElement = null
+    const data = {
+      title: this.title,
+      url: window.location.href
+    }
+
+    if (this.hasHeaderTarget) {
+      // Assume header visible by default until we get IntersectionObserver update
+      headerElement = new BridgeElement(this.headerTarget)
+      data.elementVisible = true
+      data.displayOnPlatform = headerElement.isDisplayedOnPlatform()
+    }
+
+    this.send("change", data, message => this.receive(message))
+  }
+
+  notifyBridgeOfVisibilityChange(visible) {
+    this.send("visibility", { title: this.title, elementVisible: visible })
+  }
+
+  notifyBridgeOfSubmitStart() {
+    this.send("submitStart")
+  }
+
+  notifyBridgeOfSubmitEnd() {
+    this.send("submitEnd")
+  }
+
+  // Intersection Observer
+
+  startObserver() {
+    if (!this.hasHeaderTarget) return
+
+    this.observer = new IntersectionObserver(([ entry ]) =>
+      this.notifyBridgeOfVisibilityChange(entry.isIntersecting),
+      { rootMargin: `-${this.topOffset}px 0px 0px 0px` }
+    )
+
+    this.observer.observe(this.headerTarget)
+    this.previousTopOffset = this.topOffset
+  }
+
+  stopObserver() {
+    this.observer?.disconnect()
+  }
+
+  updateObserverIfNeeded() {
+    if (this.topOffset === this.previousTopOffset) return
+
+    this.stopObserver()
+    this.startObserver()
+  }
+
+  windowResized = () => {
+    this.updateObserverIfNeeded()
+  }
+
+  submitStart = () => {
+    this.notifyBridgeOfSubmitStart()
+  }
+
+  submitEnd = () => {
+    this.notifyBridgeOfSubmitEnd()
+  }
+
+  get title() {
+    return this.titleValue ? this.titleValue : document.title
+  }
+
+  get topOffset() {
+    return viewport.top
+  }
+}

app/javascript/bridge/helpers/viewport.js

@@ -0,0 +1,24 @@
+let top = 0
+const viewportTarget = window.visualViewport || window
+
+export const viewport = {
+  get top() {
+    return top
+  },
+  get height() {
+    return viewportTarget.height || window.innerHeight
+  }
+}
+
+function update() {
+  requestAnimationFrame(() => {
+    const styles = getComputedStyle(document.documentElement)
+    const customInset = styles.getPropertyValue("--custom-safe-inset-top")
+    const fallbackInset = styles.getPropertyValue("--safe-area-inset-top")
+    const insetValue = (customInset || fallbackInset).trim()
+    top = parseInt(insetValue || "0", 10) || 0
+  })
+}
+
+viewportTarget.addEventListener("resize", update)
+update()

app/javascript/bridge/initializers/bridge_element.js

@@ -0,0 +1,13 @@
+import { BridgeElement } from "@hotwired/hotwire-native-bridge"
+
+BridgeElement.prototype.isDisplayedOnPlatform = function() {
+  return !this.hasClass("hide-on-native")
+}
+
+BridgeElement.prototype.showOnPlatform = function() {
+  this.element.classList.remove("hide-on-native")
+}
+
+BridgeElement.prototype.hideOnPlatform = function() {
+  this.element.classList.add("hide-on-native")
+}

app/javascript/bridge/initializers/index.js

@@ -0,0 +1 @@
+import "bridge/initializers/bridge_element"

app/javascript/initializers/index.js

@@ -1 +1,2 @@
 import "initializers/current"
+import "bridge/initializers"

app/views/account/settings/show.html.erb

@@ -1,7 +1,7 @@
 <% @page_title = "Account Settings" %>
 
 <% content_for :header do %>
-  <h1 class="header__title">
+  <h1 class="header__title" data-bridge--page-target="header">
     <%= @page_title %>
     <% unless Current.user.admin? %>
       <div class="txt-normal font-weight-normal">Only admins can change these settings</div>

app/views/boards/columns/closeds/show.html.erb

@@ -5,7 +5,7 @@
     <%= link_back_to_board(@board) %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--page-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>

app/views/boards/columns/not_nows/show.html.erb

@@ -5,7 +5,7 @@
     <%= link_back_to_board(@board) %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--page-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>

app/views/boards/columns/show.html.erb

@@ -5,7 +5,7 @@
     <%= link_back_to_board(@column.board) %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--page-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>

app/views/boards/columns/streams/show.html.erb

@@ -5,7 +5,7 @@
     <%= link_back_to_board(@board) %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--page-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>

app/views/boards/edit.html.erb

@@ -5,7 +5,7 @@
     <%= link_back_to_board(@board) %>
   </div>
 
-  <h1 class="header__title">
+  <h1 class="header__title" data-bridge--page-target="header">
     <div><%= @page_title %></div>
     <% unless Current.user.can_administer_board?(@board) %>
       <div class="txt-normal font-weight-normal">Only admins can change these settings</div>

app/views/boards/show.html.erb

@@ -8,7 +8,7 @@
     <%= link_to_webhooks(@board) if Current.user.admin? %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--page-target="header">
     <span class="overflow-ellipsis"><%= @board.name %></span>
   </h1>
 

app/views/cards/index.html.erb

@@ -4,7 +4,7 @@
 <%= render "cards/broadcasts", filter: @filter %>
 
 <% content_for :header do %>
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--page-target="header">
     <span class="overflow-ellipsis txt-capitalize-first-letter"><%= @user_filtering.selected_boards_label %></span>
   </h1>
 

app/views/events/day_timeline/columns/show.html.erb

@@ -5,7 +5,7 @@
     <%= back_link_to "Activity", root_path, "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title">
+  <h1 class="header__title" data-bridge--page-target="header">
     <%= @column.title %>
   </h1>
 <% end %>

app/views/events/index.html.erb

@@ -6,7 +6,7 @@
 <% content_for :header do %>
   <%= render "events/index/add_card_button", user_filtering: @user_filtering %>
 
-  <h1 class="header__title">
+  <h1 class="header__title" data-bridge--page-target="header">
     <% if @user_filtering.boards.many? %>
       <span>Activity <%= @user_filtering.filter.boards.any? ? "in" : "across" %></span>
     <% else %>

app/views/layouts/application.html.erb

@@ -2,7 +2,7 @@
 <html lang="en">
   <%= render "layouts/shared/head" %>
 
-  <body data-controller="local-time timezone-cookie turbo-navigation theme" data-action="turbo:morph@window->local-time#refreshAll turbo:before-visit@document->turbo-navigation#rememberLocation" data-platform="<%= platform.type %>">
+  <body data-controller="bridge--page local-time timezone-cookie turbo-navigation theme" data-action="turbo:morph@window->local-time#refreshAll turbo:before-visit@document->turbo-navigation#rememberLocation" data-platform="<%= platform.type %>" <%= "data-bridge--page-title-value=#{@page_title}" if @page_title %>>
     <header class="header header--mobile-actions-stack <%= @header_class %>" id="header">
       <a href="#main" class="header__skip-navigation btn" data-turbo="false">Skip to main content</a>
       <%= render "my/menu" if Current.user %>

app/views/my/access_tokens/index.html.erb

@@ -5,7 +5,7 @@
     <%= back_link_to "My profile", user_path(Current.user), "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--page-target="header"><%= @page_title %></h1>
 <% end %>
 
 <section class="panel panel--wide shadow center webhooks">

app/views/my/access_tokens/new.html.erb

@@ -5,7 +5,7 @@
     <%= back_link_to "tokens", my_access_tokens_path, "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--page-target="header"><%= @page_title %></h1>
 <% end %>
 
 <article class="panel panel--wide shadow center txt-align-start" style="view-transition-name: <%= dom_id(@access_token) %>">

app/views/my/access_tokens/show.html.erb

@@ -5,7 +5,7 @@
     <%= back_link_to "Tokens", my_access_tokens_path, "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--page-target="header"><%= @page_title %></h1>
 <% end %>
 
 <article class="panel panel--wide shadow center txt-align-start" style="view-transition-name: <%= dom_id(@access_token) %>">

app/views/my/pins/index.html.erb

@@ -5,7 +5,7 @@
     <%= back_link_to "Home", root_path, "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--page-target="header"><%= @page_title %></h1>
 <% end %>
 
 <div class="pins-list panel panel--wide flex center borderless unpad flex-column gap-half margin-block-start">

app/views/notifications/index.html.erb

@@ -6,7 +6,7 @@
     <%= back_link_to "Home", root_path, "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--page-target="header"><%= @page_title %></h1>
 
   <div class="header__actions header__actions--end">
     <%= link_to notifications_settings_path, class: "btn" do %>

app/views/notifications/settings/show.html.erb

@@ -1,7 +1,7 @@
 <% @page_title = "Notifications settings" %>
 
 <% content_for :header do %>
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--page-target="header"><%= @page_title %></h1>
 <% end %>
 
 <section class="settings">

app/views/public/boards/columns/closeds/show.html.erb

@@ -5,7 +5,7 @@
     <%= back_link_to @board.name, published_board_url(@board), "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--page-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>

app/views/public/boards/columns/not_nows/show.html.erb

@@ -5,7 +5,7 @@
     <%= back_link_to @board.name, published_board_url(@board), "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--page-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>

app/views/public/boards/columns/show.html.erb

@@ -5,7 +5,7 @@
     <%= back_link_to @column.board.name, published_board_url(@column.board), "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--page-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>

app/views/public/boards/columns/streams/show.html.erb

@@ -5,7 +5,7 @@
     <%= back_link_to @board.name, published_board_url(@board), "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--page-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>

app/views/public/boards/show.html.erb

@@ -13,7 +13,7 @@
 <% end %>
 
 <% content_for :header do %>
-  <h1 class="header__title divider divider--fade full-width">
+  <h1 class="header__title divider divider--fade full-width" data-bridge--page-target="header">
     <span class="overflow-ellipsis"><%= @page_title %></span>
   </h1>
 <% end %>

app/views/searches/show.html.erb

@@ -5,7 +5,7 @@
     <%= back_link_to "Home", root_path, "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
   </div>
 
-  <h1 class="header__title"><%= @page_title %></h1>
+  <h1 class="header__title" data-bridge--page-target="header"><%= @page_title %></h1>
 <% end %>
 
 <div class="search-perma margin-block-start">