chats 0.1.1 → 0.6.2

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

@@ -1,25 +1,101 @@
 <%# The inbox. Subscribed to the viewer's inbox stream: new activity anywhere
     triggers a Turbo 8 page refresh (morphing, scroll-preserving), which
     re-renders this page per-viewer — see Chats::Broadcasts for why refreshes
-    beat surgical row patches here. %>
+    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).
+
+    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 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 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
+    `yield :head` (the Rails convention); harmless no-op otherwise.
+    https://turbo.hotwired.dev/handbook/building#opting-out-of-caching %>
+<%# The page's title, for a layout that shows `yield(:title)`: the inbox's,
+    or the open conversation's (chats_page_title, config.page_title). %>
+<% content_for :title, chats_page_title(@conversation) %>
+<% content_for :head do %>
+  <meta name="turbo-cache-control" content="no-cache">
+<% end %>
 <%= chats_styles %>
-<%= turbo_stream_from chats_current_messager, :chats_inbox %>
+<div data-controller="chats--refresh-inbox">
+  <%= turbo_stream_from chats_current_messager, :chats_inbox %>
+</div>
 
-<div class="chats chats-inbox">
+<% 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>
 
-  <% if Chats.config.search %>
-    <%= form_with url: conversations_path,
-          method: :get,
+  <% if @inbox.filtered? %>
+    <p class="chats-inbox__filter">
+      <%= t("chats.inbox.filtered_by", name: Chats.display_name_for(@inbox.with)) %>
+      <%= link_to t("chats.inbox.clear_filter"), conversations_path, class: "chats-inbox__filter-clear" %>
+    </p>
+  <% end %>
+
+  <% if Chats.config.search && !@inbox.filtered? %>
+    <%# 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"),
@@ -29,13 +105,26 @@
   <% end %>
 
   <%= turbo_frame_tag "chats_inbox_results", target: "_top" do %>
-    <% if @conversations.any? %>
+    <%# Slot: anything the host wants above the first row — a support door,
+        an announcement, a filter bar. Renders only when the partial exists. %>
+    <%= chats_slot :inbox_top, viewer: chats_current_messager, inbox: @inbox %>
+
+    <% if @rows.any? %>
       <ul class="chats-inbox__list">
-        <% @conversations.each do |conversation| %>
-          <%= render "chats/conversations/conversation_row",
-                conversation: conversation,
-                viewer: chats_current_messager,
-                unread_count: @unread_counts.fetch(conversation.id, 0) %>
+        <% @rows.each do |row| %>
+          <% if row.is_a?(Chats::InboxGroup) %>
+            <%= 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),
+                  pane: split,
+                  current: @conversation,
+                  filter: chats_inbox_filter %>
+          <% end %>
         <% end %>
       </ul>
     <% elsif params[:q].present? %>
@@ -43,12 +132,50 @@
         <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>
         <p class="chats-empty__hint"><%= t("chats.inbox.empty_hint") %></p>
+        <%= chats_slot :inbox_empty, viewer: chats_current_messager, inbox: @inbox %>
       </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 " \
+                        "chats:read->chats--split#threadRead " \
+                        "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,14 @@
+<%# 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, turbo-rails' minimal frame layout
+    (ConversationsController#show). The pane carries its title
+    (data-title), which chats--split gives the tab.
+    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 %>

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

@@ -1,137 +1,21 @@
-<%# The thread. One conversation stream powers everything live here:
-    message append/replace/remove, the read-state payload, and typing pings.
-    Bubbles arrive VIEWER-AGNOSTIC from shared broadcasts; the chats--thread
-    Stimulus controller aligns own-vs-other by comparing each bubble's
-    sender key against its `me` value (that's what makes one broadcast render
-    work for every subscriber). %>
+<%# 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). %>
+<% content_for :title, chats_page_title(@conversation) %>
 <%= chats_styles %>
 
-<%= tag.div class: "chats chats-thread", data: {
-      controller: "chats--thread",
-      "chats--thread-me-value": Chats.messager_key(chats_current_messager),
-      "chats--thread-read-url-value": read_conversation_path(@conversation),
-      "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"),
-      "chats--thread-yesterday-label-value": t("chats.thread.yesterday"),
-      "chats--thread-typing-suffix-value": t("chats.thread.typing_suffix"),
-      "chats--thread-group-value": @conversation.group?,
-      "chats--thread-refresh-url-value": refresh_conversation_path(@conversation),
-      "chats--thread-thread-url-value": conversation_path(@conversation),
-      "chats--thread-copied-label-value": t("chats.message.copied"),
-      action: "pointerdown->chats--thread#pressStart pointermove->chats--thread#pressMove " \
-              "pointerup->chats--thread#pressEnd pointercancel->chats--thread#pressCancel " \
-              "contextmenu->chats--thread#contextMenu"
-    } do %>
-
-  <%= turbo_stream_from @conversation %>
-
-  <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 %>
-
-    <%= chats_conversation_avatar(@conversation, chats_current_messager) %>
-
-    <div class="chats-thread__identity">
-      <h1 class="chats-thread__title"><%= @conversation.title_for(chats_current_messager) %></h1>
-      <% if @conversation.subject_label %>
-        <p class="chats-thread__subject"><%= @conversation.subject_label %></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 %>
-      </div>
-    </details>
-  </header>
-
-  <div class="chats-thread__scroll" data-chats--thread-target="scroller">
-    <% if @more_messages && @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>
-  </div>
-
-  <%# Long-press popup (Telegram-style): the backdrop blurs the thread, the
-      pressed bubble's clone morphs to the center, the reactions pill sits
-      above it and the contextual menu below. Slots are filled by cloning
-      the bubble's <template data-chats-message-menu>. %>
-  <div class="chats-popup"
-       role="dialog"
-       aria-modal="true"
-       data-chats--thread-target="popup"
-       hidden>
-    <div class="chats-popup__backdrop" data-action="click->chats--thread#closePopup"></div>
-    <div class="chats-popup__stack">
-      <div class="chats-popup__slot chats-popup__slot--reactions"
-           data-chats--thread-target="popupReactions"
-           data-action="click->chats--thread#popupMenuClicked"></div>
-      <div class="chats-popup__slot chats-popup__slot--bubble" data-chats--thread-target="popupBubble"></div>
-      <div class="chats-popup__slot chats-popup__slot--menu"
-           data-chats--thread-target="popupMenu"
-           data-action="click->chats--thread#popupMenuClicked"></div>
-    </div>
-  </div>
-
-  <div class="chats-attachment-preview"
-       role="dialog"
-       aria-modal="true"
-       tabindex="-1"
-       data-chats--thread-target="attachmentDialog"
-       data-action="keydown.esc->chats--thread#closeAttachment"
-       hidden>
-    <div class="chats-attachment-preview__surface"
-         data-action="click->chats--thread#closeAttachmentFromBackdrop">
-      <button type="button"
-              class="chats-attachment-preview__close"
-              aria-label="<%= t("chats.message.close_attachment") %>"
-              data-action="chats--thread#closeAttachment">×</button>
-      <figure class="chats-attachment-preview__figure">
-        <img class="chats-attachment-preview__image"
-             alt=""
-             data-chats--thread-target="attachmentImage">
-      </figure>
-    </div>
-  </div>
-
-  <%= render "chats/messages/composer", conversation: @conversation %>
+<%= render layout: "chats/conversations/thread",
+           locals: {
+             conversation: @conversation,
+             messages: @messages,
+             more: @more_messages,
+             first_unread_id: @first_unread_id,
+             counterpart: chats_counterpart,
+             read_pending: @read_pending
+           } do %>
+  <%= render "chats/conversations/thread_header",
+             conversation: @conversation, participant: @participant, counterpart: chats_counterpart %>
 <% end %>

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

@@ -0,0 +1,26 @@
+<%# A floating dock window's content (GET /:id?window=1 from inside the
+    window's turbo frame — see chats/dock/_window for the frame and
+    ConversationsController#show): the SAME thread body the page renders,
+    rooted at .chats-thread--window, under the window's compact header.
+
+    The header's chats--dock actions reach the dock's controller because the
+    window lives inside the dock element. The title is a button: it
+    minimizes and expands the window (LinkedIn's header click), and says
+    which way with aria-expanded. %>
+<% title = @conversation.title_for(chats_current_messager) %>
+<%= turbo_frame_tag dom_id(@conversation, :window) do %>
+  <section class="chats-window__card" role="region" aria-label="<%= t("chats.dock.window_label", name: title) %>">
+    <%= render layout: "chats/conversations/thread",
+               locals: {
+                 conversation: @conversation,
+                 messages: @messages,
+                 more: @more_messages,
+                 first_unread_id: @first_unread_id,
+                 counterpart: chats_counterpart,
+                 window: true
+               } do %>
+      <%= render "chats/dock/window_header", conversation: @conversation, title: title,
+                                             counterpart: chats_counterpart %>
+    <% end %>
+  </section>
+<% end %>

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

@@ -0,0 +1,12 @@
+<%# The dock's unread badge: the same number as the nav badge
+    (`unread_chats_count`), replaced on the viewer's dock stream with every
+    other [data-chats-unread-badge] inside the dock. No id — a page may hold
+    the nav badge too, and ids must stay unique. Not a live region: it would
+    chatter on every read; new messages are announced by the dock instead.
+    Hidden at zero, number kept. %>
+<%= tag.span class: "chats-badge chats-dock__badge",
+      hidden: !count.positive?,
+      data: { chats_unread_badge: true, "chats--dock-target": "badge", count: count } do %>
+  <span aria-hidden="true"><%= count > 99 ? "99+" : count %></span>
+  <span class="chats-visually-hidden"><%= count %> <%= t("chats.dock.unread_suffix") %></span>
+<% end %>

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

@@ -0,0 +1,139 @@
+<%# The messaging dock (`chats_dock` in the host's layout): fixed to the
+    bottom-right corner, LinkedIn / Steam style. Left to right, the floating
+    conversation WINDOWS (newest nearest the panel), then the PANEL: its
+    header is the collapsed bar (avatar, "Messages", unread badge), and open
+    it holds search, the recent list and the way to the full inbox. On a
+    phone (chats.css: under 700px wide or 500px tall) the closed bar is a
+    round button, the open panel a full-screen sheet.
+
+    data-turbo-permanent: Turbo Drive carries this element from page to page
+    as it is — open windows, scroll positions, drafts and cable
+    subscriptions included — as long as the next page renders a dock with
+    the same id. The id names the VIEWER, so a visit that lands on another
+    account's page (sign out and in, an account switcher) never matches and
+    never carries one person's windows into another's page.
+
+    The panel is a <details>: it opens and closes with no JavaScript at all,
+    and its rows, search and links are real links and forms. The chats--dock
+    controller (dock_controller.js) does the rest. Its live signal is the
+    template on the viewer's own `[messager, :chats_dock]` stream (see
+    chats/dock/_signal and Chats::Broadcasts). %>
+<% key = Chats.messager_key(viewer) %>
+<%= chats_styles %>
+<%= tag.aside id: "chats_dock_#{key}",
+      class: ["chats-dock", ("chats-dock--no-launcher" unless launcher)],
+      "aria-label": t("chats.dock.title"),
+      data: {
+        turbo_permanent: true,
+        chats_messager: key,
+        controller: "chats--dock",
+        "chats--dock-windows-value": windows,
+        "chats--dock-messager-value": key,
+        "chats--dock-everywhere-value": everywhere,
+        "chats--dock-window-url-value": chats_routes.conversation_path("__id__", window: 1),
+        "chats--dock-record-key-value": Chats::Conversation.model_name.param_key,
+        "chats--dock-badge-url-value": chats_routes.badge_conversations_path,
+        "chats--dock-announcement-value": t("chats.dock.new_message_from", name: "%{name}"),
+        # Every plural form the locale has (CLDR: zero, one, two, few, many,
+        # other), uninterpolated: the controller picks one with
+        # Intl.PluralRules and fills %{count} in.
+        "chats--dock-window-unread-value": chats_plural_forms("chats.dock.window_unread").to_json,
+        action: "keydown->chats--dock#keydown " \
+                "focusin->chats--dock#engage pointerdown->chats--dock#engage wheel->chats--dock#engage " \
+                "touchstart->chats--dock#engage " \
+                "turbo:before-fetch-response->chats--dock#frameResponded " \
+                "turbo:frame-missing->chats--dock#frameMissing " \
+                "turbo:frame-load->chats--dock#frameLoaded " \
+                "turbo:fetch-request-error->chats--dock#frameFailed " \
+                "turbo:submit-end->chats--dock#sent " \
+                "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:frame-load@document->chats--dock#pageFrameLoaded"
+      } do %>
+  <%= turbo_stream_from viewer, :chats_dock %>
+  <%= render "chats/dock/signal" %>
+
+  <div id="chats_dock_windows" class="chats-dock__windows" data-chats--dock-target="windows"></div>
+
+  <%# What a window shows before its thread arrives, and if it can't. %>
+  <template data-chats--dock-target="loadingShell"><%= render "chats/dock/window_shell", state: :loading %></template>
+  <template data-chats--dock-target="failedShell"><%= render "chats/dock/window_shell", state: :failed %></template>
+
+  <details class="chats-dock__panel"
+           data-chats--dock-target="panel"
+           data-action="toggle->chats--dock#panelToggled">
+    <%# The summary reads "Messages, 3 unread" from its own text; on a phone
+        the closed one is the round launcher (chats.css). %>
+    <summary class="chats-dock__bar chats-dock__toggle">
+      <%= chats_messager_avatar(viewer) %>
+      <svg class="chats-dock__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+           stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+        <path d="M12 3a9 9 0 0 0-7.8 13.5L3 21l4.6-1.2A9 9 0 1 0 12 3Z" />
+      </svg>
+      <span class="chats-dock__title"><%= t("chats.dock.title") %></span>
+      <%= render "chats/dock/badge", count: viewer.unread_chats_count %>
+      <span class="chats-dock__chevron" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+             stroke-linejoin="round" focusable="false"><path d="m6 15 6-6 6 6" /></svg>
+      </span>
+      <span class="chats-dock__close-glyph" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+             focusable="false"><path d="M6 6l12 12M18 6 6 18" /></svg>
+      </span>
+    </summary>
+
+    <div class="chats-dock__body">
+      <% if Chats.config.search %>
+        <%# The inbox's own search: with JavaScript the results land in the
+            dock's frame (the inbox answers that frame with the dock's list);
+            without it, on the full inbox. %>
+        <%= form_with url: chats_routes.conversations_path,
+              method: :get,
+              class: "chats-search chats-dock__search",
+              # `html:`: form_with drops attributes it doesn't know (role among them).
+              html: { 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_dock_list"
+              } do %>
+          <%= hidden_field_tag :recent, recent, id: nil %>
+          <%= search_field_tag :q, nil,
+                id: "chats_dock_q",
+                placeholder: t("chats.inbox.search_placeholder"),
+                "aria-label": t("chats.inbox.search_placeholder"),
+                class: "chats-search__input",
+                autocomplete: "off" %>
+        <% end %>
+      <% end %>
+
+      <%# Lazy: nothing is fetched until the panel first opens; until then,
+          four still rows. The controller reloads it when the signal says,
+          and when its stream may have missed a signal. `refresh: :morph`:
+          a reload morphs the rows in place, so the list keeps its scroll
+          position, and it reloads its own src, so a search stays. %>
+      <%= turbo_frame_tag "chats_dock_list",
+            src: chats_routes.dock_conversations_path(recent: recent),
+            loading: :lazy,
+            refresh: :morph,
+            target: "_top",
+            class: "chats-dock__results",
+            # A click here opens a window, never the page: hovering a row
+            # must not prefetch it.
+            data: { "chats--dock-target": "list", turbo_prefetch: false } do %>
+        <div aria-busy="true" aria-label="<%= t("chats.thread.loading") %>">
+          <% 4.times do %><div class="chats-dock__skeleton"><span></span></div><% end %>
+        </div>
+      <% end %>
+
+      <%= link_to t("chats.dock.see_all"), chats_routes.conversations_path, class: "chats-dock__see-all" %>
+      <%= chats_slot :dock_panel_footer, viewer: viewer %>
+    </div>
+  </details>
+
+  <%# "New message from …": polite, one at a time. The badge is not live. %>
+  <div class="chats-visually-hidden" aria-live="polite" aria-atomic="true" data-chats--dock-target="announcer"></div>
+<% end %>

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

@@ -0,0 +1,26 @@
+<%# What just changed, for the dock's controller (it acts when the replaced
+    element connects, and consumes data-changed so a Turbo Drive visit that
+    reconnects the same node never acts twice). An inert <template>: it
+    renders nothing. The dock renders it bare; Chats::Broadcasts sends it
+    with the signal:
+
+      data-changed               reload the recent list
+      data-conversation-id       the conversation it was about, when the
+                                 viewer can see it
+      data-notify                a message they'd be notified about: its
+                                 window may pop open, and it is announced
+      data-sender-name           who it is from, for the announcement
+      data-unread-count          unread there now, for the window's header
+
+    Strings for people are rendered by the dock in the VIEWER's locale
+    (Stimulus values), never here: a broadcast renders in no one's. %>
+<% signal = local_assigns[:signal] %>
+<%= tag.template id: "chats_dock_signal",
+      data: {
+        "chats--dock-target": "signal",
+        changed: (true if signal),
+        conversation_id: signal&.dig(:conversation_id),
+        notify: (true if signal&.dig(:notify)),
+        sender_name: signal&.dig(:sender_name),
+        unread_count: signal&.dig(:unread_count)
+      } %>

data/app/views/chats/dock/_update.turbo_stream.erb

@@ -0,0 +1,10 @@
+<%# One dock update (Chats::Broadcasts.update_dock_of), rendered per
+    participant and sent on their own `[messager, :chats_dock]` stream:
+    the badges when the unread count moved, and the signal. %>
+<% if count %>
+  <%= turbo_stream.replace_all ".chats-dock [data-chats-unread-badge]",
+        partial: "chats/dock/badge", locals: { count: count } %>
+<% end %>
+<% if signal %>
+  <%= turbo_stream.replace "chats_dock_signal", partial: "chats/dock/signal", locals: { signal: signal } %>
+<% end %>

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

@@ -0,0 +1,23 @@
+<%# A floating window's FRAME, loading its thread from `?window=1`
+    (conversations/window.html.erb). Appended to #chats_dock_windows by
+    ConversationsController#create (`chat_button_to …, dock: true`); the
+    dock's controller builds the identical element itself when a row or a
+    live message opens one (dock_controller.js, buildWindow) — keep the two
+    in step. A conversation already open in a window is focused instead of
+    reloaded (the controller intercepts the append).
+
+    `target: "_top"`: links inside a window open the page, never the frame.
+    `data-chats-active`: the viewer opened it, so it may mark messages read.
+    `data-focus`: and the composer takes the focus once the thread arrives. %>
+<%= turbo_frame_tag dom_id(conversation, :window),
+      src: chats_routes.conversation_path(conversation, window: 1),
+      target: "_top",
+      class: "chats-window",
+      data: {
+        "chats--dock-target": "window",
+        conversation_id: conversation.id,
+        chats_active: true,
+        focus: (true if local_assigns[:focus])
+      } do %>
+  <%= render "chats/dock/window_shell", state: :loading, title: conversation.title_for(chats_current_messager) %>
+<% end %>