chats 0.4.2 → 0.5.0

data/app/javascript/chats/thread_controller.js

@@ -36,9 +36,17 @@ const TRIM_LEEWAY = 20
 //                               already near the bottom (never yank them up
 //                               mid-history-read)
 //   * mark-as-read              debounce a POST to #read when foreign messages
-//                               arrive while the tab is visible — that POST
-//                               advances our read horizon and broadcasts fresh
-//                               read-state to everyone
+//                               arrive while the thread is on screen — that
+//                               POST advances our read horizon and broadcasts
+//                               fresh read-state to everyone. Only while the
+//                               viewer can actually be reading: a visible tab,
+//                               a thread with room to show itself (a minimized
+//                               dock window has none), and — inside a dock
+//                               window — one the viewer is engaged with (the
+//                               dock's `data-chats-active` gate; a window that
+//                               popped open by itself waits for a focus, a
+//                               press or a scroll). A dock window is rendered
+//                               unread (`readPending`) and reads the same way.
 //   * sent / seen receipts      derive per-message ticks client-side from the
 //                               broadcast read-state payload
 //   * day separators            recalculate local-calendar markers after the
@@ -74,11 +82,16 @@ export default class extends Controller {
     daySeparatorClass: { type: String, default: "chats-day-separator" },
     typingSuffix: String,
     copiedLabel: String,
-    group: Boolean
+    group: Boolean,
+    readPending: Boolean
   }
 
   connect() {
     this.registerTypingStreamAction()
+    // The dock's engagement gate: the window frame around a dock thread.
+    // No gate (the thread page) means always engaged.
+    this.gate = this.element.closest("[data-chats-active]")
+    this.gate?.addEventListener("chats:activated", this.flushPendingRead)
 
     // targetConnected fires for every server-rendered bubble right after
     // connect; this flag keeps the initial flood from triggering N scrolls
@@ -90,6 +103,7 @@ export default class extends Controller {
       this.renderReceipts()
       this.renderDaySeparators()
       this.renderMessageGroups()
+      if (this.readPendingValue) this.queueRead()
     })
 
     if (this.hasTypingTarget) {
@@ -111,6 +125,7 @@ export default class extends Controller {
     }
     this.element.addEventListener("click", this.suppressClickCapture, true)
     this.watchStreamSource()
+    this.watchScreenPresence()
   }
 
   disconnect() {
@@ -120,6 +135,8 @@ export default class extends Controller {
     document.removeEventListener("visibilitychange", this.visibilityChanged)
     clearTimeout(this.readTimer)
     this.sourceObserver?.disconnect()
+    this.presenceObserver?.disconnect()
+    this.gate?.removeEventListener("chats:activated", this.flushPendingRead)
     this.element.removeEventListener("click", this.suppressClickCapture, true)
     clearTimeout(this.pressTimer)
     this.teardownPopup()
@@ -350,7 +367,7 @@ export default class extends Controller {
   // --- Mark-as-read ------------------------------------------------------------
 
   queueRead() {
-    if (document.visibilityState !== "visible") {
+    if (!this.canRead()) {
       this.pendingRead = true
       return
     }
@@ -375,8 +392,54 @@ export default class extends Controller {
     }
   }
 
+  // Whether the viewer can be reading this thread right now.
+  canRead() {
+    return document.visibilityState === "visible" && this.engaged() && this.onScreen()
+  }
+
+  // The thread has room to show itself. Geometry alone, for any host that
+  // collapses a thread its own way; the dock's own state is engaged()'s job.
+  onScreen() {
+    return !this.hasScrollerTarget || this.scrollerTarget.clientHeight > 0
+  }
+
+  // Inside a dock window, what the dock says, explicitly: the window is
+  // neither minimized (data-chats-minimized) nor waiting for the viewer to
+  // turn to it (data-chats-active="false"). Geometry can't be trusted for
+  // the first: a folded window's scroller keeps whatever padding a host
+  // gives it. No gate (the thread page): always engaged.
+  engaged() {
+    if (!this.gate) return true
+
+    return this.gate.dataset.chatsActive !== "false" && !this.gate.hasAttribute("data-chats-minimized")
+  }
+
+  // A read that waited for the thread to be seen happens the moment it is:
+  // a minimized window expanding gives its scroller a height, and the dock
+  // says when the viewer turns to a window. It lands on the newest message,
+  // which is what arrived.
+  flushPendingRead = () => {
+    if (!this.pendingRead || !this.canRead()) return
+    this.pendingRead = false
+    this.scrollToBottom()
+    this.queueRead()
+  }
+
+  watchScreenPresence() {
+    if (!this.hasScrollerTarget || typeof ResizeObserver === "undefined") return
+
+    this.presenceObserver = new ResizeObserver(this.flushPendingRead)
+    this.presenceObserver.observe(this.scrollerTarget)
+  }
+
   postRead() {
     if (!this.readUrlValue) return
+    // Asked again when the timer fires: the window may have been minimized
+    // (or the tab hidden) in the 700ms since the message arrived.
+    if (!this.canRead()) {
+      this.pendingRead = true
+      return
+    }
     fetch(this.readUrlValue, {
       method: "POST",
       headers: { "X-CSRF-Token": csrfToken(), Accept: "application/json" }
@@ -822,8 +885,11 @@ export default class extends Controller {
     const messageId = bubble.id.split("_").pop()
 
     this.closePopup()
+    // `thread`: a page can hold several threads (the page's and the dock's
+    // windows), each with its own composer listening on window — the
+    // composer inside THIS thread is the one that edits.
     window.dispatchEvent(new CustomEvent("chats:edit-message", {
-      detail: { id: messageId, body: body }
+      detail: { id: messageId, body: body, thread: this.element }
     }))
   }
 

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/_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,172 @@
+<%# 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). %>
+  <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>
+  </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/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

@@ -35,7 +35,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>

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 %>