chats 0.5.1 → 0.6.2

data/app/controllers/chats/conversations_controller.rb

@@ -14,9 +14,12 @@ module Chats
     # 36): a client past either gets its history re-rendered instead.
     CURSOR_IDS_LIMIT = 200
     CURSOR_ID_LENGTH = 64
+    # The two-pane messaging page's conversation frame (index.html.erb): a
+    # request from it is answered with the pane alone (pane.html.erb).
+    PANE_FRAME = "chats_conversation"
 
     before_action :set_conversation, only: %i[show read typing leave mute unmute refresh]
-    helper_method :chats_counterpart
+    helper_method :chats_counterpart, :chats_two_panes?, :chats_inbox_filter
 
     # The inbox. Everything is preloaded/batched so rendering N rows costs a
     # constant number of queries (conversations + last messages + participants
@@ -29,14 +32,7 @@ module Chats
       # is the dock's own list.
       return dock if turbo_frame_request_id == "chats_dock_list"
 
-      @inbox = Chats::Inbox.for(chats_current_messager, query: params[:q], with: inbox_filter)
-      @rows = @inbox.rows
-      @unread_counts = @inbox.unread_counts
-      # Back-compat for inboxes ejected under 0.1.x, which loop over
-      # @conversations: they keep rendering the flat list (no stacking, i.e.
-      # exactly what they rendered before). Re-eject or delete your copy to
-      # get the stacked rows.
-      @conversations = @inbox.conversations
+      load_inbox
     end
 
     # The messaging dock's recent list (`chats_dock`): the first rows of the
@@ -67,6 +63,12 @@ module Chats
     # `?window=1` from a Turbo frame is the same thread as a floating dock
     # window: the window template (its compact header around the same
     # thread body), no layout.
+    #
+    # With two panes (`config.inbox_layout = :split`, the default) the
+    # thread is the conversation pane of the messaging page: the whole page
+    # (the inbox's template, with the pane open), or, asked from that page's
+    # own conversation frame (a row clicked on a wide screen), the pane
+    # alone. `:stacked` renders the thread page.
     def show
       @participant = @conversation.participant_for(chats_current_messager)
 
@@ -90,10 +92,14 @@ module Chats
           # swallow the unread badge. The thread controller posts #read once
           # the window is actually on screen (`read-pending`).
           render :window, layout: false
-        elsif !prefetch?
+        else
           # Opening the thread reads it. (Live appends while the thread
           # stays open are read via the thread controller's POST to #read.)
-          @participant&.read!
+          # A render the server doesn't read is marked `read-pending`: the
+          # thread controller reads it once it is on screen.
+          @read_pending = !reads_on_render?
+          @participant&.read! unless @read_pending
+          render_split_page if chats_two_panes?
         end
       end
     end
@@ -226,6 +232,95 @@ module Chats
       @conversation = find_conversation
     end
 
+    # The inbox's rows, for the inbox page and for the two-pane page.
+    def load_inbox
+      @inbox = Chats::Inbox.for(chats_current_messager, query: params[:q], with: inbox_filter)
+      @rows = @inbox.rows
+      @unread_counts = @inbox.unread_counts
+      # Back-compat for inboxes ejected under 0.1.x, which loop over
+      # @conversations: they keep rendering the flat list (no stacking, i.e.
+      # exactly what they rendered before). Re-eject or delete your copy to
+      # get the stacked rows.
+      @conversations = @inbox.conversations
+    end
+
+    # The open conversation on the two-pane page: the pane alone for the
+    # page's own conversation frame, else the whole page around it (any
+    # other frame of the page, the search's results among them, finds its
+    # own part in it).
+    #
+    # The pane alone comes in turbo-rails' minimal frame layout, always (even
+    # under a `config.layout`): nothing of the host's page is rendered for
+    # Turbo to throw away. Its title travels on the pane (`data-title`,
+    # chats_page_title), since Turbo leaves <head> alone on a frame visit.
+    def render_split_page
+      return render :pane, layout: "turbo_rails/frame" if pane_request?
+
+      load_inbox
+      render :index
+    end
+
+    def pane_request?
+      turbo_frame_request_id == PANE_FRAME
+    end
+
+    # Whether the messaging page is two panes: `config.inbox_layout = :split`
+    # (the default), unless this app ejected its views before there were
+    # two panes. `rails g chats:views` under 0.5 copied an inbox and a
+    # thread page and no conversation pane: that app keeps its own separate
+    # pages, rendered and read exactly as before, until it ejects again (or
+    # deletes its copies). Views ejected since 0.6 carry the pane, and are
+    # two panes like the gem's own.
+    def chats_two_panes?
+      return @chats_two_panes if defined?(@chats_two_panes)
+
+      @chats_two_panes = Chats.config.split_inbox? && !views_ejected_before_two_panes?
+    end
+
+    # The list's filter on the two-pane page: its search (`q`) or the stack
+    # it shows (`with`). A row opened in the pane carries it into its URL,
+    # /messages/:id?with=…, because that URL is what the list's live
+    # refreshes re-request: without it, the next refresh would bring back
+    # the whole inbox under a list that was filtered. The back link to the
+    # list keeps it too.
+    def chats_inbox_filter
+      { q: params[:q], with: params[:with] }.select { |_, value| value.is_a?(String) && value.present? }
+    end
+
+    def views_ejected_before_two_panes?
+      (own_view?("index") || own_view?("show")) && !own_view?("conversation_pane", partial: true)
+    end
+
+    # Whether the app renders its own copy of one of these views, not the gem's.
+    def own_view?(name, partial: false)
+      template = lookup_context.find_all(name, ["chats/conversations"], partial).first
+      template.present? && !template.identifier.to_s.start_with?(Chats::Engine.root.join("app/views").to_s)
+    end
+
+    # Whether showing the conversation reads it, there and then.
+    #
+    # Never a prefetch (Turbo 8 fetches a link the pointer rests on, which
+    # is nobody reading). On the thread page, everything else: opening it
+    # reads it.
+    #
+    # On the two-pane page, the viewer opening it: a row clicked (the
+    # pane's frame) or the page loaded by the browser itself (a link from
+    # elsewhere, a reload, no JavaScript). NOT a Turbo visit of the page,
+    # because one of those is the inbox's own refresh: every live update of
+    # the list re-requests this page, maybe in a hidden tab, and a read
+    # there would say "Seen" to the sender while nobody looks — and, since
+    # a read refreshes the reader's inbox, refresh the page again, forever.
+    # Turbo marks each of its requests (X-Turbo-Request-Id) and a refresh
+    # looks like any other visit, so a Turbo visit renders the pane unread
+    # and its thread reads it once it's on screen. A refresh's pane never
+    # gets that far: the page keeps its permanent one, and drops the new.
+    def reads_on_render?
+      return false if prefetch?
+      return true unless chats_two_panes?
+
+      pane_request? || request.headers["X-Turbo-Request-Id"].blank?
+    end
+
     def time_from_ms(value)
       Time.zone.at(0, value.to_i, :millisecond)
     end

data/app/helpers/chats/engine_helper.rb

@@ -329,6 +329,21 @@ module Chats
       path.presence || chats_routes.conversations_path(with: Chats.inbox_with_sgid(messager))
     end
 
+    # The messaging page's title: the inbox's, or +conversation+'s.
+    # `config.page_title` when the host sets one, else the localized
+    # `chats.page_title.*`. ONE source for both ways a conversation opens:
+    # the bundled pages hand it to `content_for :title` on a full visit, and
+    # the two-pane page's pane carries it (`data-title`) for chats--split to
+    # give the tab when a row opens it, since Turbo leaves <head> alone then.
+    def chats_page_title(conversation = nil)
+      viewer = chats_current_messager
+      custom = Chats.config.page_title&.call(conversation, viewer)
+      return custom.to_s if custom.present?
+      return t("chats.page_title.inbox") unless conversation
+
+      t("chats.page_title.conversation", name: conversation.title_for(viewer))
+    end
+
     # The gem's bundled stylesheet (CSS-variable themed — see chats.css).
     # Called from the engine's own views; hosts that eject + restyle the
     # views with their own framework simply don't include it.

data/app/javascript/chats/dock_controller.js

@@ -44,7 +44,9 @@ import { recoverMissedBroadcasts, renderStreamFrom } from "chats/recovery"
 //                  Every access is guarded: no storage, no memory, no harm.
 //   * hiding       on any page with [data-chats-dock-hide] (the engine's
 //                  inbox and thread), since a permanent element is never
-//                  re-rendered by the server
+//                  re-rendered by the server; and no window for a
+//                  conversation the page renders, after a visit or after a
+//                  frame of the page loads one
 //   * keyboard     Escape unwinds innermost first: the thread's popup or
 //                  photo, an edit, the window menu, then the window
 //                  (minimized), the panel (closed); on a phone, the window
@@ -782,6 +784,18 @@ export default class extends Controller {
     this.save()
   }
 
+  // A frame of the page itself loaded a conversation (the two-pane messaging
+  // page opens one beside its list without a visit): no window keeps a
+  // second copy of it.
+  pageFrameLoaded(event) {
+    if (this.element.contains(event.target)) return
+
+    this.windowTargets.forEach((frame) => {
+      if (this.renderedOnPage(frame.dataset.conversationId)) this.removeWindow(frame)
+    })
+    this.save()
+  }
+
   // A row whose conversation is open in a window says so.
   markOpenRows() {
     if (!this.hasListTarget) return

data/app/javascript/chats/split_controller.js

@@ -0,0 +1,131 @@
+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.
+//
+// The tab's title follows the pane: Turbo leaves <head> alone when it
+// promotes a frame load to a visit, so the title would stay the previous
+// page's. The pane carries the page's title with it open (`data-title`,
+// chats_page_title: the same the full page gives `content_for :title`).
+//
+// The open conversation's row stops counting it unread as soon as it is
+// read (the pane's answer says the server read it, `data-read`; or its
+// thread reads it on screen, `chats:read`), without waiting for the list's
+// live refresh, which may be seconds away or not come at all.
+//
+// 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)
+    })
+    const pane = this.frameTarget.querySelector(".chats-split__pane")
+    if (pane?.dataset.title) document.title = pane.dataset.title
+    if (pane?.dataset.read === "true") this.markRead(pane)
+    this.arrive()
+  }
+
+  // chats:read, from the pane's thread.
+  threadRead(event) {
+    const pane = event.target?.closest?.(".chats-split__pane")
+    if (pane) this.markRead(pane)
+  }
+
+  // The conversation's row, read: no count, no bold, as the next refresh
+  // will render it.
+  markRead(pane) {
+    if (!this.hasListTarget || !pane.dataset.path) return
+
+    const path = new URL(pane.dataset.path, document.baseURI).pathname
+    this.listTarget.querySelectorAll(`a[data-turbo-frame="${this.frameTarget.id}"]`).forEach((link) => {
+      if (new URL(link.getAttribute("href"), document.baseURI).pathname !== path) return
+
+      const row = link.closest(".chats-row")
+      row?.classList.remove("chats-row--unread")
+      row?.querySelector(".chats-row__bottom .chats-badge")?.remove()
+    })
+  }
+
+  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/javascript/chats/thread_controller.js

@@ -456,9 +456,14 @@ export default class extends Controller {
       this.pendingRead = true
       return
     }
+    // chats:read, once the server has it: the two-pane page clears the
+    // conversation's row (chats--split) without waiting for the list's
+    // live refresh.
     fetch(this.readUrlValue, {
       method: "POST",
       headers: { "X-CSRF-Token": csrfToken(), Accept: "application/json" }
+    }).then((response) => {
+      if (response.ok) this.element.dispatchEvent(new CustomEvent("chats:read", { bubbles: true }))
     }).catch(() => {})
   }
 

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

@@ -0,0 +1,53 @@
+<%# 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).
+
+    data-title: the page's title with this conversation open
+    (chats_page_title, the same the full page gives `content_for :title`):
+    chats--split gives it to the tab when a row opens the pane, since Turbo
+    leaves <head> alone on a frame visit.
+
+    data-read: the server read the conversation as it rendered this (a row
+    clicked); chats--split then clears its row's unread count at once,
+    instead of when the list next refreshes. A pane rendered unread clears
+    it when its thread reads (the thread's chats:read event).
+
+    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, path: conversation_path(conversation),
+                        title: chats_page_title(conversation), read: !read_pending } 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>