chats 0.5.0 → 0.6.0

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/_history.html.erb

@@ -0,0 +1,54 @@
+<%# The history inside a thread's scroller: the latest page of messages, the
+    lazy frame chain above it, the read state and the typing line. The thread
+    (chats/conversations/_thread) renders it once; the stale-thread catch-up
+    re-renders it in place when the thread fell more than a page behind, and
+    leaves everything else (the header, the composer and its draft) alone.
+
+    Locals: conversation, messages (oldest first), more, first_unread_id,
+    counterpart, window — as in chats/conversations/_thread. %>
+<% viewer = chats_current_messager %>
+<% if window && messages.empty? %>
+  <%# A window opened from a Message button, before anybody wrote: who
+      you're about to talk to. Gone with the first bubble (chats.css). %>
+  <div class="chats-window__hello">
+    <% if counterpart %>
+      <%= chats_messager_avatar(counterpart) %>
+      <strong><%= Chats.display_name_for(counterpart) %></strong>
+    <% end %>
+    <%= t("chats.dock.hello", name: conversation.title_for(viewer)) %>
+  </div>
+<% end %>
+<% if more && messages.any? %>
+  <%# Lazy frame chain for infinite scroll-up: when this frame becomes
+      visible, Turbo fetches the previous keyset page (?before=oldest id),
+      whose response contains a frame with this SAME id — older messages
+      plus, recursively, the next frame. See ConversationsController#show. %>
+  <%= turbo_frame_tag "chats_page_#{messages.first.id}",
+        src: conversation_path(conversation, before: messages.first.id),
+        loading: :lazy do %>
+    <div class="chats-loader"><%= t("chats.thread.loading") %></div>
+  <% end %>
+<% end %>
+
+<div id="<%= dom_id(conversation, :messages) %>" class="chats-thread__messages">
+  <%# Explicit loop (not a collection render) so the «new messages»
+      divider can sit BEFORE the first unread bubble (WhatsApp's "the
+      catch-up starts here" line). Rendered with the history only (the
+      thread's first render, or a catch-up that re-renders it); it scrolls
+      away naturally as the thread lives on. %>
+  <% messages.each do |message| %>
+    <% if message.id == first_unread_id %>
+      <div class="chats-thread__unread-line" role="separator">
+        <span><%= t("chats.thread.new_messages") %></span>
+      </div>
+    <% end %>
+    <%= render "chats/messages/message", message: message %>
+  <% end %>
+</div>
+
+<%= render "chats/conversations/read_state", conversation: conversation %>
+
+<div id="<%= dom_id(conversation, :typing) %>"
+     class="chats-typing"
+     data-chats--thread-target="typing"
+     hidden></div>

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"),
@@ -67,52 +81,13 @@
 
   <%= yield %>
 
-  <%# tabindex: the arrow keys scroll the history (WCAG 2.1.1). %>
-  <div class="chats-thread__scroll" data-chats--thread-target="scroller" tabindex="0">
-    <% if window && messages.empty? %>
-      <%# A window opened from a Message button, before anybody wrote: who
-          you're about to talk to. Gone with the first bubble (chats.css). %>
-      <div class="chats-window__hello">
-        <% if counterpart %>
-          <%= chats_messager_avatar(counterpart) %>
-          <strong><%= Chats.display_name_for(counterpart) %></strong>
-        <% end %>
-        <%= t("chats.dock.hello", name: conversation.title_for(viewer)) %>
-      </div>
-    <% end %>
-    <% if more && messages.any? %>
-      <%# Lazy frame chain for infinite scroll-up: when this frame becomes
-          visible, Turbo fetches the previous keyset page (?before=oldest id),
-          whose response contains a frame with this SAME id — older messages
-          plus, recursively, the next frame. See ConversationsController#show. %>
-      <%= turbo_frame_tag "chats_page_#{messages.first.id}",
-            src: conversation_path(conversation, before: messages.first.id),
-            loading: :lazy do %>
-        <div class="chats-loader"><%= t("chats.thread.loading") %></div>
-      <% end %>
-    <% end %>
-
-    <div id="<%= dom_id(conversation, :messages) %>" class="chats-thread__messages">
-      <%# Explicit loop (not a collection render) so the «new messages»
-          divider can sit BEFORE the first unread bubble (WhatsApp's "the
-          catch-up starts here" line). Server-rendered on the initial page
-          only; it scrolls away naturally as the thread lives on. %>
-      <% messages.each do |message| %>
-        <% if message.id == first_unread_id %>
-          <div class="chats-thread__unread-line" role="separator">
-            <span><%= t("chats.thread.new_messages") %></span>
-          </div>
-        <% end %>
-        <%= render "chats/messages/message", message: message %>
-      <% end %>
-    </div>
-
-    <%= render "chats/conversations/read_state", conversation: conversation %>
-
-    <div id="<%= dom_id(conversation, :typing) %>"
-         class="chats-typing"
-         data-chats--thread-target="typing"
-         hidden></div>
+  <%# tabindex: the arrow keys scroll the history (WCAG 2.1.1). The id is
+      what the stale-thread catch-up re-renders when the thread fell more
+      than a page behind (ConversationsController#refresh). %>
+  <div id="<%= dom_id(conversation, :history) %>" class="chats-thread__scroll" data-chats--thread-target="scroller" tabindex="0">
+    <%= render "chats/conversations/history", conversation: conversation, messages: messages, more: more,
+                                              first_unread_id: first_unread_id, counterpart: counterpart,
+                                              window: window %>
   </div>
 
   <%# Long-press popup (Telegram-style): the backdrop blurs the thread, the

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/badge.turbo_stream.erb

@@ -0,0 +1,6 @@
+<%# Every unread badge on the page (ConversationsController#badge), as the
+    badge streams would have sent them: the nav badge
+    (Chats::Broadcasts.update_badge_of) and the dock's (chats/dock/_update).
+    A page without one of them simply has nothing to replace. %>
+<%= turbo_stream.replace "chats_unread_badge", partial: "chats/shared/unread_badge", locals: { count: count } %>
+<%= turbo_stream.replace_all ".chats-dock [data-chats-unread-badge]", partial: "chats/dock/badge", locals: { count: count } %>

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).
@@ -10,18 +29,22 @@
     The chats--refresh-inbox wrapper heals a MISSED refresh broadcast: Action
     Cable has no replay, so a broadcast sent while the socket was down (tab
     backgrounded, network blip) would leave the inbox stale until the user
-    navigated. The controller re-runs the same page refresh on cable reconnect
-    and on return-to-visible. It needs to wrap the <turbo-cable-stream-source>
-    that `turbo_stream_from` renders so it can observe its `connected`
-    attribute as the heartbeat. %>
+    navigated. The controller re-runs the same page refresh when the stream
+    reconnects, when the page comes back after 10 seconds hidden, when the
+    network comes back and when the browser restores the page (see
+    chats/recovery.js), and reruns a refresh Turbo dropped because it
+    arrived mid-visit. It wraps the <turbo-cable-stream-source> that
+    `turbo_stream_from` renders: the stream's own confirmations are how it
+    sees a reconnect. One per page: don't wrap it in a reconciler of your
+    own as well. %>
 
 <%# The OTHER inbox-staleness case, distinct from a missed broadcast: a Turbo
     RESTORATION visit (browser back / Hotwire Native stack pop) serves the
     inbox's cached snapshot with no GET. Open a chat from a profile, send a
     message, tap back — the snapshot cached before the chat existed comes back
     and the new conversation is missing until you navigate away and return.
-    The reconciler above can't help (it only fires on reconnect / visibility,
-    not on a restore visit). `turbo-cache-control: no-cache` makes the inbox
+    The wrapper above can't help (it fires on reconnect and visibility, not
+    on a restore visit). `turbo-cache-control: no-cache` makes the inbox
     uncacheable, so a restore visit re-fetches from the network and is always
     fresh — on the web AND in Hotwire Native, whose back-pop issues a Turbo
     `.restore` visit that honors this. Requires the host layout to
@@ -35,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>
@@ -49,15 +73,26 @@
   <% end %>
 
   <% if Chats.config.search && !@inbox.filtered? %>
-    <%= form_with url: conversations_path,
-          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",
           role: "search",
           data: {
             controller: "chats--debounced-submit",
             action: "input->chats--debounced-submit#queue search->chats--debounced-submit#queue",
             "chats--debounced-submit-delay-value": 250,
-            turbo_frame: "chats_inbox_results"
+            turbo_frame: "chats_inbox_results",
+            # The query goes in the URL (replaced, not pushed): a page
+            # refresh re-requests the URL, so a live update or a catch-up
+            # keeps the results and the field as they are.
+            turbo_action: "replace"
           } do %>
       <%= search_field_tag :q, params[:q],
             placeholder: t("chats.inbox.search_placeholder"),
@@ -75,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>
@@ -89,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>
@@ -98,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/refresh.turbo_stream.erb

@@ -1,7 +1,7 @@
-<%# Stale-thread catch-up payload (ConversationsController#refresh):
-    append what arrived while the client slept, replace what changed.
-    Appends are idempotent by dom_id, so a message that raced in through
-    the live stream during the fetch can't duplicate. %>
+<%# Stale-thread catch-up payload (ConversationsController#refresh): what the
+    stream would have delivered while the client wasn't listening. Appends
+    are idempotent by dom_id, so a message that raced in through the live
+    stream during the fetch can't duplicate. %>
 <%= turbo_stream.append dom_id(@conversation, :messages) do %>
   <%= render partial: "chats/messages/message", collection: @new_messages, as: :message %>
 <% end if @new_messages.any? %>
@@ -11,3 +11,23 @@
         partial: "chats/messages/message",
         locals: { message: message } %>
 <% end %>
+
+<%# Who has read what: a read the stream missed would leave "Sent" where it
+    should say "Seen". %>
+<%= turbo_stream.replace dom_id(@conversation, :read_state),
+      partial: "chats/conversations/read_state",
+      locals: { conversation: @conversation } %>
+
+<%# `deletion: :hard` only: every message from the client's oldest bubble on
+    that still exists (the chats_prune action, registered by the thread
+    controller, removes the rest). %>
+<%# Where the client stands now (ConversationsController#caught_up_cursors):
+    its cursors move only when an answer like this one arrives. %>
+<%= @caught_up %>
+
+<% if @present %>
+  <%= turbo_stream_action_tag :chats_prune,
+        target: dom_id(@conversation, :history),
+        "data-ids": @present[:ids].join(" "),
+        "data-until": @present[:until] %>
+<% end %>