chats 0.4.2 → 0.5.1

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

@@ -1,8 +1,14 @@
 <%# One inbox row. Rendered per-viewer (this page only updates via full
     refreshes, never shared broadcasts, so viewer-specific state is fine here —
-    unlike message bubbles, which must stay viewer-agnostic). %>
+    unlike message bubbles, which must stay viewer-agnostic).
+
+    `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" do %>
+  <%= link_to conversation_path(conversation), class: "chats-row__link",
+        data: (chats_dock_opener(conversation) if local_assigns[:dock]) do %>
     <%= chats_conversation_avatar(conversation, viewer) %>
 
     <span class="chats-row__body">
@@ -13,6 +19,11 @@
         <span class="chats-row__name">
           <span class="chats-row__title"><%= conversation.title_for(viewer) %></span>
           <%= chats_verified_badge(conversation.counterpart_for(viewer)) %>
+          <% if chats_muted?(conversation, viewer) %>
+            <svg class="chats-row__muted" role="img" aria-label="<%= t("chats.dock.muted") %>" viewBox="0 0 24 24"
+                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                 focusable="false"><title><%= t("chats.dock.muted") %></title><path d="M13.7 21a2 2 0 0 1-3.4 0M18.6 13A17.9 17.9 0 0 1 18 8M6.3 6.3A5.9 5.9 0 0 0 6 8c0 7-3 9-3 9h14M18 8a6 6 0 0 0-9.3-5M3 3l18 18"/></svg>
+          <% end %>
         </span>
         <time class="chats-row__time" datetime="<%= conversation.last_message_at&.iso8601 %>">
           <%= chats_timestamp(conversation.last_message_at) %>

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

@@ -5,10 +5,14 @@
 
     A stack of one links straight to that thread (and the thread offers a
     "see all" link back here); a deeper stack opens the stack list, which is
-    either the host's `group_path:` or chats' own filtered inbox. %>
+    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? %>"
     id="<%= group.dom_id %>">
-  <%= link_to chats_group_path(group), class: "chats-row__link" do %>
+  <%= link_to chats_group_path(group), class: "chats-row__link",
+        data: (chats_dock_opener(group.conversation) if local_assigns[:dock] && group.single?) 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/_locked_composer.html.erb

@@ -5,11 +5,16 @@
     composer — the host's composer_actions leave with it.
 
     The `locked_composer` slot replaces the BODY (a reopen button, a link to
-    the closed ticket…) while keeping the id contract intact. %>
+    the closed ticket…) while keeping the id contract intact.
+
+    `notice:` replaces the subject's reason: the thread renders this same
+    box, with "You can't message this person.", for a direct thread the
+    host's policy no longer allows (or whose other account is gone). %>
+<% notice = local_assigns[:notice] || conversation.locked_notice %>
 <div id="<%= dom_id(conversation, :composer) %>" class="chats-composer chats-composer--locked">
   <% if chats_slot?(:locked_composer) %>
-    <%= chats_slot :locked_composer, conversation: conversation, notice: conversation.locked_notice %>
+    <%= chats_slot :locked_composer, conversation: conversation, notice: notice %>
   <% else %>
-    <p class="chats-composer__locked-notice"><%= conversation.locked_notice %></p>
+    <p class="chats-composer__locked-notice"><%= notice %></p>
   <% end %>
 </div>

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

@@ -0,0 +1,133 @@
+<%# 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).
+
+    One conversation stream powers everything 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 DOM ids (messages, composer, composer_errors, read_state, typing) are
+    the targets the streams address, so a conversation is rendered at most
+    ONCE per page: the dock never opens a window for a conversation the page
+    already shows.
+
+    Locals:
+      conversation     the Chats::Conversation
+      messages         the latest page, oldest first
+      more             whether older pages exist (the lazy frame chain)
+      first_unread_id  where the «new messages» line goes, or nil
+      counterpart      the other messager of a direct thread, or nil
+      window           true in a dock window: rooted at .chats-thread--window
+                       (never .chats, which is the full-page shell), and the
+                       server did NOT read this render — the controller
+                       posts #read once the window is on screen and the
+                       viewer is engaged with it (`readPending`).
+
+    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) %>
+<% 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
+    is gone — instead of letting a send fail. Same id as the composer, so
+    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: {
+      controller: "chats--thread",
+      "chats-dock-hide": (true unless window),
+      "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-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"),
+      # A plain data attribute (not a Stimulus value): host CSS/JS keys its
+      # own block/report affordances off it. False for a messager declared
+      # `acts_as_messager blockable: false`.
+      "chats-blockable": chats_blockable?(counterpart),
+      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 %>
+
+  <%= yield %>
+
+  <%# 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
+      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>
+
+  <%# A locked conversation (its SUBJECT says so — Chats::ChatSubject#
+      chat_locked?) keeps its whole history readable and swaps the composer
+      for the reason it's closed. Never a hidden screen: gate the action,
+      explain it in place. %>
+  <% if conversation.locked? %>
+    <%= render "chats/conversations/locked_composer", conversation: conversation %>
+  <% elsif refused %>
+    <%= render "chats/conversations/locked_composer", conversation: conversation,
+                                                      notice: t("chats.flashes.blocked") %>
+  <% else %>
+    <%= render "chats/messages/composer", conversation: conversation %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,40 @@
+<%# The dock's recent list (GET /dock): the first rows of the viewer's inbox,
+    rendered into the dock's `chats_dock_list` frame with the inbox's own row
+    partials. `dock: true` makes each row open a floating window instead of
+    navigating — the link stays a real link to the thread, so a modified click
+    (new tab) or a page without the dock's JavaScript still gets there. The
+    inbox answers a search from the dock's form with this same template.
+
+    `target: "_top"`: anything else inside the frame (a stack's link, a row
+    from an inbox ejected before 0.5.0) navigates the page, not the frame. %>
+<%= turbo_frame_tag "chats_dock_list", target: "_top" do %>
+  <% if @rows.any? %>
+    <ul class="chats-inbox__list chats-dock__list">
+      <% @rows.each do |row| %>
+        <% if row.is_a?(Chats::InboxGroup) %>
+          <%= render "chats/conversations/group", group: row, viewer: chats_current_messager, dock: true %>
+        <% else %>
+          <%= render "chats/conversations/conversation_row",
+                conversation: row,
+                viewer: chats_current_messager,
+                unread_count: @unread_counts.fetch(row.id, 0),
+                dock: true %>
+        <% end %>
+      <% end %>
+    </ul>
+  <% elsif @inbox.query %>
+    <div class="chats-empty">
+      <p class="chats-empty__title"><%= t("chats.inbox.no_results_title") %></p>
+      <p class="chats-empty__hint"><%= t("chats.inbox.no_results_hint", query: @inbox.query) %></p>
+    </div>
+  <% else %>
+    <%# The inbox's own empty state, the host's inbox_empty slot included:
+        the dock is how people find messaging, so it stays. %>
+    <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 %>

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

@@ -10,18 +10,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,7 +39,8 @@
   <%= turbo_stream_from chats_current_messager, :chats_inbox %>
 </div>
 
-<div class="chats chats-inbox">
+<%# data-chats-dock-hide: the messaging dock hides itself on this page. %>
+<div class="chats chats-inbox" data-chats-dock-hide>
   <header class="chats-inbox__header">
     <h1 class="chats-inbox__title"><%= t("chats.inbox.title") %></h1>
   </header>
@@ -48,15 +53,24 @@
   <% end %>
 
   <% if Chats.config.search && !@inbox.filtered? %>
-    <%= form_with url: conversations_path,
+    <%# The inbox's own path exactly as it was opened (/messages or
+        /messages/: the engine answers both), so the URL a search puts in the
+        address bar is still this page to Turbo, and the next refresh morphs
+        it instead of re-rendering it from scratch. %>
+    <%= form_with url: request.original_fullpath.split("?").first,
           method: :get,
           class: "chats-search",
-          role: "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_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"),

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,35 +1,16 @@
-<%# 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: its own header around the shared thread body
+    (chats/conversations/_thread, which a floating dock window renders too —
+    see that partial for how the live thread works). %>
 <%= 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"),
-      # A plain data attribute (not a Stimulus value): host CSS/JS keys its
-      # own block/report affordances off it. False for a messager declared
-      # `acts_as_messager blockable: false`.
-      "chats-blockable": chats_blockable?(chats_counterpart),
-      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 %>
-
+<%= render layout: "chats/conversations/thread",
+           locals: {
+             conversation: @conversation,
+             messages: @messages,
+             more: @more_messages,
+             first_unread_id: @first_unread_id,
+             counterpart: chats_counterpart
+           } do %>
   <header class="chats-thread__header">
     <%= link_to root_path, class: "chats-thread__back", "aria-label": t("chats.thread.back") do %>
       <span aria-hidden="true">‹</span>
@@ -91,92 +72,4 @@
       </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>
-
-  <%# A locked conversation (its SUBJECT says so — Chats::ChatSubject#
-      chat_locked?) keeps its whole history readable and swaps the composer
-      for the reason it's closed. Never a hidden screen: gate the action,
-      explain it in place. %>
-  <% if @conversation.locked? %>
-    <%= render "chats/conversations/locked_composer", conversation: @conversation %>
-  <% else %>
-    <%= render "chats/messages/composer", conversation: @conversation %>
-  <% end %>
 <% 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 %>