chats 0.5.1 → 0.6.0

data/app/javascript/chats/split_controller.js

@@ -0,0 +1,97 @@
+import { Controller } from "@hotwired/stimulus"
+
+// chats--split — the two-pane messaging page (`config.inbox_layout = :split`).
+//
+// chats.css lays the page out on its own, with one media query: both panes
+// from 700px wide, one below. What CSS can't decide is where a row's link
+// goes, and that is all this does:
+//
+//   * wide: the conversation frame is enabled, so a row opens its
+//     conversation beside the list, in one request for the pane alone, and
+//     the address bar moves to /messages/:id (the frame's
+//     data-turbo-action="advance");
+//   * narrow: the frame stays `disabled`, so the same link opens the
+//     conversation's page, which then fills the screen. A disabled frame is
+//     one Turbo never navigates, links naming it included. And no hover
+//     prefetch: the link names the frame, so Turbo would ask for the pane
+//     alone, and the page visit would then render that answer as the page.
+//
+// The server always renders the frame disabled, because a page visit is
+// right at any width: it is what a click does before this connects, and
+// without JavaScript. So the page's refreshes (Turbo 8 morphs, every live
+// update of the list) would disable it again on a wide screen; the frame
+// keeps what the screen says.
+//
+// When the pane opens a conversation, its row becomes the current one
+// (aria-current="page", .chats-row--current) at once, exactly as the server
+// renders /messages/:id, instead of when the list next refreshes. And the
+// focus goes where the viewer is now, as LinkedIn's messaging page does:
+// into the conversation's composer, ready to reply. Entering the pane, a
+// screen reader names it (a section labelled by the conversation's title),
+// then the field. On a touch screen the composer would raise the keyboard
+// over a conversation not read yet, so the focus goes to the pane's title
+// instead (tabindex="-1"), which is read out the same; and to the title
+// too when there is nothing to write in (a locked conversation).
+//
+// Registered as "chats--split" through the engine's importmap pin.
+const WIDE = "(min-width: 700px)" // keep in step with chats.css
+const TOUCH = "(pointer: coarse)"
+
+export default class extends Controller {
+  static targets = ["frame", "list"]
+
+  connect() {
+    this.media = window.matchMedia?.(WIDE)
+    this.media?.addEventListener?.("change", this.layout)
+    this.layout()
+  }
+
+  disconnect() {
+    this.media?.removeEventListener?.("change", this.layout)
+  }
+
+  layout = () => {
+    if (this.hasFrameTarget) this.frameTarget.toggleAttribute("disabled", !this.media?.matches)
+  }
+
+  // turbo:before-morph-attribute: a refresh leaves the frame as the screen has it.
+  keepEnabled(event) {
+    if (event.target === this.frameTarget && event.detail?.attributeName === "disabled") event.preventDefault()
+  }
+
+  // turbo:before-prefetch: nothing names a frame that can't take it.
+  prefetch(event) {
+    if (!this.hasFrameTarget || !this.frameTarget.hasAttribute("disabled")) return
+    if (event.target?.getAttribute?.("data-turbo-frame") === this.frameTarget.id) event.preventDefault()
+  }
+
+  // turbo:frame-load: the pane opened a conversation. Its row is current,
+  // and the viewer is taken to it.
+  opened(event) {
+    if (!this.hasFrameTarget || event.target !== this.frameTarget || !this.hasListTarget) return
+    const src = this.frameTarget.getAttribute("src")
+    if (!src) return
+
+    const open = new URL(src, document.baseURI).pathname
+    this.listTarget.querySelectorAll(`a[data-turbo-frame="${this.frameTarget.id}"]`).forEach((link) => {
+      const current = new URL(link.getAttribute("href"), document.baseURI).pathname === open
+      if (current) {
+        link.setAttribute("aria-current", "page")
+      } else {
+        link.removeAttribute("aria-current")
+      }
+      link.closest(".chats-row")?.classList.toggle("chats-row--current", current)
+    })
+    this.arrive()
+  }
+
+  arrive() {
+    const pane = this.frameTarget.querySelector(".chats-split__pane")
+    if (!pane) return
+
+    const touch = Boolean(window.matchMedia?.(TOUCH)?.matches)
+    const composer = touch ? null : pane.querySelector(".chats-composer__input")
+    const title = pane.querySelector(`[id="${pane.getAttribute("aria-labelledby")}"]`)
+    ;(composer || title)?.focus({ preventScroll: true })
+  }
+}

data/app/views/chats/conversations/_conversation_pane.html.erb

@@ -0,0 +1,42 @@
+<%# The open conversation on the two-pane messaging page (`config.inbox_layout
+    = :split`), inside the page's `chats_conversation` frame: the header
+    (chats/conversations/_thread_header) over the shared thread body
+    (chats/conversations/_thread, the same one the thread page and a dock
+    window render).
+
+    The thread is wrapped in a data-turbo-permanent element keyed by the
+    conversation, the way the dock keys its own element: the inbox's live
+    updates are Turbo 8 page refreshes that MORPH this whole page, and a
+    morph leaves a permanent element alone, so the draft, the scroll
+    position, the read state and the thread's stream subscription all go
+    on untouched while the list beside it re-renders. Opening another
+    conversation renders another id, which replaces it. The id also names
+    the viewer: a visit that lands on another account's page (signing out
+    and in, an account switcher) never inherits someone else's thread.
+
+    The header stays outside it, so a refresh still brings it up to date
+    (a mute, a renamed group).
+
+    Locals: conversation, participant, messages, more, first_unread_id,
+    counterpart, read_pending (as in chats/conversations/_thread). %>
+<% title_id = dom_id(conversation, :title) %>
+<%= tag.section class: "chats-split__pane", "aria-labelledby": title_id,
+                data: { conversation_id: conversation.id } do %>
+  <%= render "chats/conversations/thread_header",
+             conversation: conversation, participant: participant, counterpart: counterpart,
+             heading: :h2, title_id: title_id, back_path: conversations_path(**chats_inbox_filter) %>
+
+  <%= tag.div id: "chats_conversation_pane_#{conversation.id}_#{Chats.messager_key(chats_current_messager)}",
+              class: "chats-split__thread", data: { turbo_permanent: true } do %>
+    <%= render layout: "chats/conversations/thread",
+               locals: {
+                 conversation: conversation,
+                 messages: messages,
+                 more: more,
+                 first_unread_id: first_unread_id,
+                 counterpart: counterpart,
+                 pane: true,
+                 read_pending: read_pending
+               } do %><% end %>
+  <% end %>
+<% end %>

data/app/views/chats/conversations/_conversation_row.html.erb

@@ -5,10 +5,26 @@
     `dock: true` (the messaging dock's recent list) keeps the link a link to
     the thread and marks it as a dock opener: a plain click opens the
     conversation's floating window instead. A muted conversation carries
-    the bell-slash. %>
-<li class="chats-row <%= "chats-row--unread" if unread_count.positive? %>">
-  <%= link_to conversation_path(conversation), class: "chats-row__link",
-        data: (chats_dock_opener(conversation) if local_assigns[:dock]) do %>
+    the bell-slash.
+
+    `pane: true` (the two-pane messaging page) points the link at the
+    page's conversation frame, which opens it beside the list on a wide
+    screen; on a phone, and without JavaScript, the frame is disabled and
+    the link opens the thread page. `current:` is the conversation the page
+    has open: its row says so (aria-current="page", .chats-row--current).
+    `filter:` is the list's search or stack (`q`, `with`), kept in the
+    link: the list's refreshes re-request the page's URL, and must find the
+    same list there. %>
+<% current = local_assigns[:current] == conversation %>
+<% filter = local_assigns[:pane] ? local_assigns.fetch(:filter, {}) : {} %>
+<li class="<%= class_names("chats-row", "chats-row--unread": unread_count.positive?, "chats-row--current": current) %>">
+  <%= link_to conversation_path(conversation, **filter), class: "chats-row__link",
+        "aria-current": ("page" if current),
+        data: (if local_assigns[:dock]
+                 chats_dock_opener(conversation)
+               elsif local_assigns[:pane]
+                 { turbo_frame: Chats::ConversationsController::PANE_FRAME }
+               end) do %>
     <%= chats_conversation_avatar(conversation, viewer) %>
 
     <span class="chats-row__body">

data/app/views/chats/conversations/_empty_pane.html.erb

@@ -0,0 +1,23 @@
+<%# The conversation pane of the two-pane messaging page with no
+    conversation open (/messages, `config.inbox_layout = :split`).
+
+    With conversations to choose from, it asks for one. With none at all,
+    the inbox's own empty state lives here instead, the host's
+    inbox_empty slot included: rendered once on the page, never once in the
+    list and again beside it. On narrow screens, where the list is the
+    page, chats.css shows this pane under the list only in that case.
+
+    Locals: inbox_empty (no rows, no search), inbox (the Chats::Inbox). %>
+<% if inbox_empty %>
+  <div class="chats-split__empty chats-split__empty--inbox chats-empty">
+    <span class="chats-empty__icon" aria-hidden="true">💬</span>
+    <p class="chats-empty__title"><%= t("chats.inbox.empty_title") %></p>
+    <p class="chats-empty__hint"><%= t("chats.inbox.empty_hint") %></p>
+    <%= chats_slot :inbox_empty, viewer: chats_current_messager, inbox: inbox %>
+  </div>
+<% else %>
+  <div class="chats-split__empty chats-empty">
+    <span class="chats-empty__icon" aria-hidden="true">💬</span>
+    <p class="chats-empty__title"><%= t("chats.inbox.select_hint") %></p>
+  </div>
+<% end %>

data/app/views/chats/conversations/_group.html.erb

@@ -8,11 +8,27 @@
     either the host's `group_path:` or chats' own filtered inbox.
 
     In the messaging dock (`dock: true`) a stack of one opens its thread's
-    floating window; a deeper stack still goes to the stack list. %>
-<li class="chats-row chats-row--group <%= "chats-row--unread" if group.unread? %>"
+    floating window; a deeper stack still goes to the stack list. On the
+    two-pane page (`pane: true`) a stack of one opens its thread in the
+    conversation pane, and is the current row while it is open there
+    (`current:`, `filter:`, as in _conversation_row); a deeper stack still
+    goes to the stack list. %>
+<% single = group.single? %>
+<% current = single && local_assigns[:current].present? && local_assigns[:current] == group.conversation %>
+<li class="<%= class_names("chats-row chats-row--group", "chats-row--unread": group.unread?, "chats-row--current": current) %>"
     id="<%= group.dom_id %>">
-  <%= link_to chats_group_path(group), class: "chats-row__link",
-        data: (chats_dock_opener(group.conversation) if local_assigns[:dock] && group.single?) do %>
+  <% href = if local_assigns[:pane] && single
+             conversation_path(group.conversation, **local_assigns.fetch(:filter, {}))
+           else
+             chats_group_path(group)
+           end %>
+  <%= link_to href, class: "chats-row__link",
+        "aria-current": ("page" if current),
+        data: (if local_assigns[:dock] && single
+                 chats_dock_opener(group.conversation)
+               elsif local_assigns[:pane] && single
+                 { turbo_frame: Chats::ConversationsController::PANE_FRAME }
+               end) do %>
     <%= chats_messager_avatar(group.messager) %>
 
     <span class="chats-row__body">

data/app/views/chats/conversations/_thread.html.erb

@@ -1,9 +1,10 @@
 <%# The thread body: everything live about one open conversation, shared by
-    the thread PAGE (show.html.erb) and a floating dock WINDOW
-    (window.html.erb). Rendered as a partial LAYOUT — `yield` is the header,
-    which is the one thing the two differ in: the page keeps its full header
-    (back link, ⋯ menu), the window its compact one (minimize, close, open
-    full page).
+    the thread PAGE (show.html.erb), a floating dock WINDOW (window.html.erb)
+    and the two-pane page's conversation PANE (_conversation_pane.html.erb).
+    Rendered as a partial LAYOUT — `yield` is the header, which is the one
+    thing they differ in: the page keeps its full header (back link, ⋯ menu),
+    the window its compact one (minimize, close, open full page); the pane
+    renders its header above the thread, outside it, and yields nothing.
 
     One conversation stream powers everything here: message
     append/replace/remove, the read-state payload, and typing pings. Bubbles
@@ -28,10 +29,19 @@
                        server did NOT read this render — the controller
                        posts #read once the window is on screen and the
                        viewer is engaged with it (`readPending`).
+      pane             true in the two-pane page's conversation pane: rooted
+                       at .chats-thread--pane, inside the page's .chats shell.
+      read_pending     the server did not read this render, so the
+                       controller posts #read once the thread is on screen
+                       (always true in a window; see
+                       ConversationsController#show for when a page or a
+                       pane is rendered unread).
 
     The page's root carries data-chats-dock-hide: the messaging dock hides
     itself on any page that has it. %>
 <% window = local_assigns.fetch(:window, false) %>
+<% pane = local_assigns.fetch(:pane, false) %>
+<% read_pending = window || local_assigns.fetch(:read_pending, false) %>
 <% viewer = chats_current_messager %>
 <%# A direct thread nobody may write in any more says so up front, in the
     composer's place — the host's policy turned false, or the other account
@@ -39,12 +49,16 @@
     the live lock swap still finds it. %>
 <% refused = !conversation.locked? && conversation.direct? &&
              (counterpart.nil? || !Chats.can_message?(viewer, counterpart)) %>
-<%= tag.div class: (window ? "chats-thread chats-thread--window" : "chats chats-thread"), data: {
+<% root_class = if window then "chats-thread chats-thread--window"
+                elsif pane then "chats-thread chats-thread--pane"
+                else "chats chats-thread"
+                end %>
+<%= tag.div class: root_class, data: {
       controller: "chats--thread",
-      "chats-dock-hide": (true unless window),
+      "chats-dock-hide": (true unless window || pane), # the pane's page carries it
       "chats--thread-me-value": Chats.messager_key(viewer),
       "chats--thread-read-url-value": read_conversation_path(conversation),
-      "chats--thread-read-pending-value": window,
+      "chats--thread-read-pending-value": read_pending,
       "chats--thread-sent-label-value": t("chats.thread.sent"),
       "chats--thread-seen-label-value": Chats.config.read_receipts ? t("chats.thread.seen") : "",
       "chats--thread-today-label-value": t("chats.thread.today"),

data/app/views/chats/conversations/_thread_header.html.erb

@@ -0,0 +1,83 @@
+<%# The header over a conversation: the thread page's, and the conversation
+    pane's on the two-pane messaging page (chats/conversations/
+    _conversation_pane). Back to the list, who it is with (avatar, name,
+    the verified badge, what it is about, the way back to their stack) and
+    the ⋯ menu (mute, leave, the host's conversation_header_actions).
+
+    The back link always renders: on the two-pane page chats.css hides it
+    while the list is on screen beside the conversation.
+
+    Locals:
+      conversation  the Chats::Conversation
+      participant   the viewer's seat in it (mute state), or nil
+      counterpart   the other messager of a direct thread, or nil
+      heading       the title's element: :h1 on the thread page, :h2 in the
+                    pane, under the page's own "Messages" heading
+      title_id      the title's id, which a pane is labelled by (optional);
+                    the pane's title also takes the focus when a row opens
+                    it on a touch screen (tabindex="-1", see chats--split)
+      back_path     where the back link goes (default: the inbox; the pane
+                    keeps the list's search or stack) %>
+<% heading = local_assigns.fetch(:heading, :h1) %>
+<% title_id = local_assigns[:title_id] %>
+<header class="chats-thread__header">
+  <%= link_to local_assigns[:back_path] || root_path, class: "chats-thread__back", "aria-label": t("chats.thread.back") do %>
+    <span aria-hidden="true">‹</span>
+  <% end %>
+
+  <%# The counterpart is already resolved for the title, the profile link
+      and the stack link — reuse it here instead of asking again. %>
+  <% if counterpart %>
+    <%= chats_messager_avatar(counterpart) %>
+  <% else %>
+    <%= chats_conversation_avatar(conversation, chats_current_messager) %>
+  <% end %>
+
+  <div class="chats-thread__identity">
+    <%# Both arms wrap the name in .chats-thread__name: the heading is a flex
+        row (the badge is its second child), and only a real element can
+        carry the ellipsis. %>
+    <%= content_tag heading, class: "chats-thread__title", id: title_id, tabindex: (-1 if title_id) do %>
+      <% if counterpart %>
+        <%= chats_messager_name(counterpart, css_class: "chats-thread__name") %>
+        <%= chats_verified_badge(counterpart) %>
+      <% else %>
+        <span class="chats-thread__name"><%= conversation.title_for(chats_current_messager) %></span>
+      <% end %>
+    <% end %>
+    <% if conversation.subject_label %>
+      <p class="chats-thread__subject"><%= conversation.subject_label %></p>
+    <% end %>
+    <%# A stacked counterpart's thread is one of many: offer the way back
+        to the whole stack (chats' filtered inbox, or the host's own
+        screen via `group_path:`). %>
+    <% if Chats.grouped_inbox?(counterpart) %>
+      <p class="chats-thread__see-all">
+        <%= link_to t("chats.thread.see_all"), chats_group_path_for(counterpart), class: "chats-thread__see-all-link" %>
+      </p>
+    <% end %>
+  </div>
+
+  <details class="chats-menu">
+    <summary class="chats-menu__trigger" aria-label="<%= t("chats.thread.options") %>">⋯</summary>
+    <div class="chats-menu__panel">
+      <% if participant&.muted? %>
+        <%= button_to t("chats.thread.unmute"), unmute_conversation_path(conversation), method: :post, class: "chats-menu__item" %>
+      <% else %>
+        <%= button_to t("chats.thread.mute"), mute_conversation_path(conversation), method: :post, class: "chats-menu__item" %>
+      <% end %>
+      <% if conversation.group? %>
+        <%= button_to t("chats.thread.leave"), leave_conversation_path(conversation), method: :post, class: "chats-menu__item chats-menu__item--danger" %>
+      <% end %>
+      <%# Slot: the host's own thread actions (block, report, archive…).
+          `blockable` is false for messagers declared
+          `acts_as_messager blockable: false`, so safety affordances
+          disappear against a support desk without any class check. %>
+      <%= chats_slot :conversation_header_actions,
+            conversation: conversation,
+            viewer: chats_current_messager,
+            counterpart: counterpart,
+            blockable: chats_blockable?(counterpart) %>
+    </div>
+  </details>
+</header>

data/app/views/chats/conversations/index.html.erb

@@ -3,6 +3,25 @@
     re-renders this page per-viewer — see Chats::Broadcasts for why refreshes
     beat surgical row patches here.
 
+    Two panes (`config.inbox_layout = :split`, the default): the list in a
+    <nav> on the left, and on the right the `chats_conversation` frame with
+    the open conversation (/messages/:id renders this same template, see
+    ConversationsController#show) or the empty pane (/messages). chats.css
+    decides with one media query: at least 700px wide both panes show; below
+    that the page is the list (/messages) or the thread (/messages/:id), as
+    with `:stacked`, which renders the list alone and the thread on its own
+    page (show.html.erb). Every request renders the same markup; only CSS
+    knows the width, so it works before JavaScript runs and without it.
+
+    A row is a real link to /messages/:id. On a wide screen it targets the
+    frame: the server answers with the pane alone (pane.html.erb) and the
+    frame's data-turbo-action="advance" moves the address bar and history
+    there. A reload, a deep link or back/forward renders the whole page.
+    The frame is `disabled` until chats--split enables it, and only while
+    the screen is wide: on a phone, and without JavaScript, the same link
+    opens the thread page. The pane keeps its draft, scroll and stream
+    through every refresh of the list (see _conversation_pane).
+
     Rows come from Chats::Inbox and are either a Chats::Conversation or a
     Chats::InboxGroup (every direct thread with a `inbox: :grouped` messager,
     stacked into one row).
@@ -39,8 +58,9 @@
   <%= turbo_stream_from chats_current_messager, :chats_inbox %>
 </div>
 
-<%# data-chats-dock-hide: the messaging dock hides itself on this page. %>
-<div class="chats chats-inbox" data-chats-dock-hide>
+<% split = chats_two_panes? %>
+<% inbox_empty = @rows.none? && params[:q].blank? %>
+<% list = capture do %>
   <header class="chats-inbox__header">
     <h1 class="chats-inbox__title"><%= t("chats.inbox.title") %></h1>
   </header>
@@ -53,15 +73,17 @@
   <% end %>
 
   <% if Chats.config.search && !@inbox.filtered? %>
-    <%# The inbox's own path exactly as it was opened (/messages or
-        /messages/: the engine answers both), so the URL a search puts in the
-        address bar is still this page to Turbo, and the next refresh morphs
-        it instead of re-rendering it from scratch. %>
-    <%= form_with url: request.original_fullpath.split("?").first,
-          method: :get,
+    <%# No `action` (so a bare tag.form: form_with always writes one): a form
+        without one submits to the page's own URL (the HTML standard, and
+        Turbo too), whatever that is NOW — /messages,
+        /messages/ (the engine answers both), or /messages/:id after a row
+        opened a conversation in the pane and moved the address bar. So the
+        URL a search puts in the address bar is still this page to Turbo,
+        the next refresh morphs it instead of re-rendering it from scratch,
+        and on the two-pane page the open conversation stays open. %>
+    <%= tag.form method: :get,
           class: "chats-search",
-          # `html:`: form_with drops attributes it doesn't know (role among them).
-          html: { role: "search" },
+          role: "search",
           data: {
             controller: "chats--debounced-submit",
             action: "input->chats--debounced-submit#queue search->chats--debounced-submit#queue",
@@ -88,12 +110,17 @@
       <ul class="chats-inbox__list">
         <% @rows.each do |row| %>
           <% if row.is_a?(Chats::InboxGroup) %>
-            <%= render "chats/conversations/group", group: row, viewer: chats_current_messager %>
+            <%= render "chats/conversations/group", group: row, viewer: chats_current_messager,
+                                                    pane: split, current: @conversation,
+                                                    filter: chats_inbox_filter %>
           <% else %>
             <%= render "chats/conversations/conversation_row",
                   conversation: row,
                   viewer: chats_current_messager,
-                  unread_count: @unread_counts.fetch(row.id, 0) %>
+                  unread_count: @unread_counts.fetch(row.id, 0),
+                  pane: split,
+                  current: @conversation,
+                  filter: chats_inbox_filter %>
           <% end %>
         <% end %>
       </ul>
@@ -102,7 +129,8 @@
         <p class="chats-empty__title"><%= t("chats.inbox.no_results_title") %></p>
         <p class="chats-empty__hint"><%= t("chats.inbox.no_results_hint", query: params[:q]) %></p>
       </div>
-    <% else %>
+    <% elsif !split %>
+      <%# (Two panes: the empty pane says it, once — chats/conversations/_empty_pane.) %>
       <div class="chats-empty">
         <span class="chats-empty__icon" aria-hidden="true">💬</span>
         <p class="chats-empty__title"><%= t("chats.inbox.empty_title") %></p>
@@ -111,4 +139,39 @@
       </div>
     <% end %>
   <% end %>
-</div>
+<% end %>
+
+<%# data-chats-dock-hide: the messaging dock hides itself on this page. %>
+<% if split %>
+  <%= tag.div class: "chats chats-inbox chats-split",
+              data: {
+                chats_dock_hide: true,
+                controller: "chats--split",
+                action: "turbo:before-prefetch->chats--split#prefetch " \
+                        "turbo:frame-load->chats--split#opened " \
+                        "turbo:before-morph-attribute->chats--split#keepEnabled"
+              } do %>
+    <nav class="chats-split__list" aria-label="<%= t("chats.inbox.title") %>" data-chats--split-target="list">
+      <%= list %>
+    </nav>
+
+    <%= turbo_frame_tag Chats::ConversationsController::PANE_FRAME,
+          class: "chats-split__conversation",
+          target: "_top",
+          disabled: true,
+          data: { turbo_action: "advance", "chats--split-target": "frame" } do %>
+      <% if @conversation %>
+        <%= render "chats/conversations/conversation_pane",
+                   conversation: @conversation, participant: @participant,
+                   messages: @messages, more: @more_messages, first_unread_id: @first_unread_id,
+                   counterpart: chats_counterpart, read_pending: @read_pending %>
+      <% else %>
+        <%= render "chats/conversations/empty_pane", inbox_empty: inbox_empty, inbox: @inbox %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% else %>
+  <div class="chats chats-inbox" data-chats-dock-hide>
+    <%= list %>
+  </div>
+<% end %>

data/app/views/chats/conversations/pane.html.erb

@@ -0,0 +1,12 @@
+<%# The answer to a row click on the two-pane messaging page: the request
+    comes from the page's `chats_conversation` frame (Turbo-Frame header),
+    so the answer is that frame with the conversation pane in it and
+    nothing else — no list, no layout (ConversationsController#show).
+    Turbo swaps it into the frame and, the frame being
+    data-turbo-action="advance", moves the address bar to /messages/:id. %>
+<%= turbo_frame_tag Chats::ConversationsController::PANE_FRAME do %>
+  <%= render "chats/conversations/conversation_pane",
+             conversation: @conversation, participant: @participant,
+             messages: @messages, more: @more_messages, first_unread_id: @first_unread_id,
+             counterpart: chats_counterpart, read_pending: @read_pending %>
+<% end %>

data/app/views/chats/conversations/show.html.erb

@@ -1,6 +1,9 @@
-<%# The thread page: its own header around the shared thread body
-    (chats/conversations/_thread, which a floating dock window renders too —
-    see that partial for how the live thread works). %>
+<%# The thread page under `config.inbox_layout = :stacked`: its header
+    (chats/conversations/_thread_header) over the shared thread body
+    (chats/conversations/_thread, which a floating dock window and the
+    two-pane page's conversation pane render too — see that partial for how
+    the live thread works). Under the default `:split`, /messages/:id is
+    the two-pane page instead (index.html.erb). %>
 <%= chats_styles %>
 
 <%= render layout: "chats/conversations/thread",
@@ -9,67 +12,9 @@
              messages: @messages,
              more: @more_messages,
              first_unread_id: @first_unread_id,
-             counterpart: chats_counterpart
+             counterpart: chats_counterpart,
+             read_pending: @read_pending
            } do %>
-  <header class="chats-thread__header">
-    <%= link_to root_path, class: "chats-thread__back", "aria-label": t("chats.thread.back") do %>
-      <span aria-hidden="true">‹</span>
-    <% end %>
-
-    <%# The counterpart is already resolved for the title, the profile link
-        and the stack link — reuse it here instead of asking again. %>
-    <% if chats_counterpart %>
-      <%= chats_messager_avatar(chats_counterpart) %>
-    <% else %>
-      <%= chats_conversation_avatar(@conversation, chats_current_messager) %>
-    <% end %>
-
-    <div class="chats-thread__identity">
-      <%# Both arms wrap the name in .chats-thread__name: the <h1> is a flex
-          row (the badge is its second child), and only a real element can
-          carry the ellipsis. %>
-      <h1 class="chats-thread__title">
-        <% if chats_counterpart %>
-          <%= chats_messager_name(chats_counterpart, css_class: "chats-thread__name") %>
-          <%= chats_verified_badge(chats_counterpart) %>
-        <% else %>
-          <span class="chats-thread__name"><%= @conversation.title_for(chats_current_messager) %></span>
-        <% end %>
-      </h1>
-      <% if @conversation.subject_label %>
-        <p class="chats-thread__subject"><%= @conversation.subject_label %></p>
-      <% end %>
-      <%# A stacked counterpart's thread is one of many: offer the way back
-          to the whole stack (chats' filtered inbox, or the host's own
-          screen via `group_path:`). %>
-      <% if Chats.grouped_inbox?(chats_counterpart) %>
-        <p class="chats-thread__see-all">
-          <%= link_to t("chats.thread.see_all"), chats_group_path_for(chats_counterpart), class: "chats-thread__see-all-link" %>
-        </p>
-      <% end %>
-    </div>
-
-    <details class="chats-menu">
-      <summary class="chats-menu__trigger" aria-label="<%= t("chats.thread.options") %>">⋯</summary>
-      <div class="chats-menu__panel">
-        <% if @participant&.muted? %>
-          <%= button_to t("chats.thread.unmute"), unmute_conversation_path(@conversation), method: :post, class: "chats-menu__item" %>
-        <% else %>
-          <%= button_to t("chats.thread.mute"), mute_conversation_path(@conversation), method: :post, class: "chats-menu__item" %>
-        <% end %>
-        <% if @conversation.group? %>
-          <%= button_to t("chats.thread.leave"), leave_conversation_path(@conversation), method: :post, class: "chats-menu__item chats-menu__item--danger" %>
-        <% end %>
-        <%# Slot: the host's own thread actions (block, report, archive…).
-            `blockable` is false for messagers declared
-            `acts_as_messager blockable: false`, so safety affordances
-            disappear against a support desk without any class check. %>
-        <%= chats_slot :conversation_header_actions,
-              conversation: @conversation,
-              viewer: chats_current_messager,
-              counterpart: chats_counterpart,
-              blockable: chats_blockable?(chats_counterpart) %>
-      </div>
-    </details>
-  </header>
+  <%= render "chats/conversations/thread_header",
+             conversation: @conversation, participant: @participant, counterpart: chats_counterpart %>
 <% end %>

data/app/views/chats/dock/_dock.html.erb

@@ -49,7 +49,8 @@
                 "input->chats--dock#typed " \
                 "click@document->chats--dock#delegate " \
                 "turbo:before-stream-render@document->chats--dock#beforeStreamRender " \
-                "turbo:load@document->chats--dock#pageChanged turbo:render@document->chats--dock#pageChanged"
+                "turbo:load@document->chats--dock#pageChanged turbo:render@document->chats--dock#pageChanged " \
+                "turbo:frame-load@document->chats--dock#pageFrameLoaded"
       } do %>
   <%= turbo_stream_from viewer, :chats_dock %>
   <%= render "chats/dock/signal" %>

data/config/importmap.rb

@@ -17,6 +17,7 @@ pin "controllers/chats/debounced_submit_controller", to: "chats/debounced_submit
 pin "controllers/chats/refresh_inbox_controller", to: "chats/refresh_inbox_controller.js"
 pin "controllers/chats/dock_controller", to: "chats/dock_controller.js"
 pin "controllers/chats/unread_badge_controller", to: "chats/unread_badge_controller.js"
+pin "controllers/chats/split_controller", to: "chats/split_controller.js"
 
 # Not a controller: what the inbox, thread, badge and dock controllers share
 # to catch up on broadcasts they missed. Outside controllers/ so the eager