chats 0.1.1 → 0.6.2

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

@@ -0,0 +1,53 @@
+<%# The open conversation on the two-pane messaging page (`config.inbox_layout
+    = :split`), inside the page's `chats_conversation` frame: the header
+    (chats/conversations/_thread_header) over the shared thread body
+    (chats/conversations/_thread, the same one the thread page and a dock
+    window render).
+
+    The thread is wrapped in a data-turbo-permanent element keyed by the
+    conversation, the way the dock keys its own element: the inbox's live
+    updates are Turbo 8 page refreshes that MORPH this whole page, and a
+    morph leaves a permanent element alone, so the draft, the scroll
+    position, the read state and the thread's stream subscription all go
+    on untouched while the list beside it re-renders. Opening another
+    conversation renders another id, which replaces it. The id also names
+    the viewer: a visit that lands on another account's page (signing out
+    and in, an account switcher) never inherits someone else's thread.
+
+    The header stays outside it, so a refresh still brings it up to date
+    (a mute, a renamed group).
+
+    data-title: the page's title with this conversation open
+    (chats_page_title, the same the full page gives `content_for :title`):
+    chats--split gives it to the tab when a row opens the pane, since Turbo
+    leaves <head> alone on a frame visit.
+
+    data-read: the server read the conversation as it rendered this (a row
+    clicked); chats--split then clears its row's unread count at once,
+    instead of when the list next refreshes. A pane rendered unread clears
+    it when its thread reads (the thread's chats:read event).
+
+    Locals: conversation, participant, messages, more, first_unread_id,
+    counterpart, read_pending (as in chats/conversations/_thread). %>
+<% title_id = dom_id(conversation, :title) %>
+<%= tag.section class: "chats-split__pane", "aria-labelledby": title_id,
+                data: { conversation_id: conversation.id, path: conversation_path(conversation),
+                        title: chats_page_title(conversation), read: !read_pending } do %>
+  <%= render "chats/conversations/thread_header",
+             conversation: conversation, participant: participant, counterpart: counterpart,
+             heading: :h2, title_id: title_id, back_path: conversations_path(**chats_inbox_filter) %>
+
+  <%= tag.div id: "chats_conversation_pane_#{conversation.id}_#{Chats.messager_key(chats_current_messager)}",
+              class: "chats-split__thread", data: { turbo_permanent: true } do %>
+    <%= render layout: "chats/conversations/thread",
+               locals: {
+                 conversation: conversation,
+                 messages: messages,
+                 more: more,
+                 first_unread_id: first_unread_id,
+                 counterpart: counterpart,
+                 pane: true,
+                 read_pending: read_pending
+               } do %><% end %>
+  <% end %>
+<% end %>

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

@@ -1,13 +1,46 @@
 <%# 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). %>
-<li class="chats-row <%= "chats-row--unread" if unread_count.positive? %>">
-  <%= link_to conversation_path(conversation), class: "chats-row__link" do %>
+    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.
+
+    `pane: true` (the two-pane messaging page) points the link at the
+    page's conversation frame, which opens it beside the list on a wide
+    screen; on a phone, and without JavaScript, the frame is disabled and
+    the link opens the thread page. `current:` is the conversation the page
+    has open: its row says so (aria-current="page", .chats-row--current).
+    `filter:` is the list's search or stack (`q`, `with`), kept in the
+    link: the list's refreshes re-request the page's URL, and must find the
+    same list there. %>
+<% current = local_assigns[:current] == conversation %>
+<% filter = local_assigns[:pane] ? local_assigns.fetch(:filter, {}) : {} %>
+<li class="<%= class_names("chats-row", "chats-row--unread": unread_count.positive?, "chats-row--current": current) %>">
+  <%= link_to conversation_path(conversation, **filter), class: "chats-row__link",
+        "aria-current": ("page" if current),
+        data: (if local_assigns[:dock]
+                 chats_dock_opener(conversation)
+               elsif local_assigns[:pane]
+                 { turbo_frame: Chats::ConversationsController::PANE_FRAME }
+               end) do %>
     <%= chats_conversation_avatar(conversation, viewer) %>
 
     <span class="chats-row__body">
       <span class="chats-row__top">
-        <span class="chats-row__title"><%= conversation.title_for(viewer) %></span>
+        <%# The badge sits OUTSIDE the ellipsizing title so a long name
+            truncates without ever eating the mark. Nil for an ordinary
+            counterpart and for groups, so the row is unchanged. %>
+        <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) %>
         </time>

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

@@ -0,0 +1,23 @@
+<%# The conversation pane of the two-pane messaging page with no
+    conversation open (/messages, `config.inbox_layout = :split`).
+
+    With conversations to choose from, it asks for one. With none at all,
+    the inbox's own empty state lives here instead, the host's
+    inbox_empty slot included: rendered once on the page, never once in the
+    list and again beside it. On narrow screens, where the list is the
+    page, chats.css shows this pane under the list only in that case.
+
+    Locals: inbox_empty (no rows, no search), inbox (the Chats::Inbox). %>
+<% if inbox_empty %>
+  <div class="chats-split__empty chats-split__empty--inbox chats-empty">
+    <span class="chats-empty__icon" aria-hidden="true">💬</span>
+    <p class="chats-empty__title"><%= t("chats.inbox.empty_title") %></p>
+    <p class="chats-empty__hint"><%= t("chats.inbox.empty_hint") %></p>
+    <%= chats_slot :inbox_empty, viewer: chats_current_messager, inbox: inbox %>
+  </div>
+<% else %>
+  <div class="chats-split__empty chats-empty">
+    <span class="chats-empty__icon" aria-hidden="true">💬</span>
+    <p class="chats-empty__title"><%= t("chats.inbox.select_hint") %></p>
+  </div>
+<% end %>

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

@@ -0,0 +1,61 @@
+<%# One STACKED inbox row: every direct conversation the viewer has with a
+    `acts_as_messager inbox: :grouped` counterpart (a support desk, a
+    storefront), folded into a single line — their avatar and name, the
+    freshest message across the stack, and the aggregate unread badge.
+
+    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.
+
+    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. On the
+    two-pane page (`pane: true`) a stack of one opens its thread in the
+    conversation pane, and is the current row while it is open there
+    (`current:`, `filter:`, as in _conversation_row); a deeper stack still
+    goes to the stack list. %>
+<% single = group.single? %>
+<% current = single && local_assigns[:current].present? && local_assigns[:current] == group.conversation %>
+<li class="<%= class_names("chats-row chats-row--group", "chats-row--unread": group.unread?, "chats-row--current": current) %>"
+    id="<%= group.dom_id %>">
+  <% href = if local_assigns[:pane] && single
+             conversation_path(group.conversation, **local_assigns.fetch(:filter, {}))
+           else
+             chats_group_path(group)
+           end %>
+  <%= link_to href, class: "chats-row__link",
+        "aria-current": ("page" if current),
+        data: (if local_assigns[:dock] && single
+                 chats_dock_opener(group.conversation)
+               elsif local_assigns[:pane] && single
+                 { turbo_frame: Chats::ConversationsController::PANE_FRAME }
+               end) do %>
+    <%= chats_messager_avatar(group.messager) %>
+
+    <span class="chats-row__body">
+      <span class="chats-row__top">
+        <span class="chats-row__name">
+          <span class="chats-row__title"><%= group.title_for(viewer) %></span>
+          <%= chats_verified_badge(group.messager) %>
+        </span>
+        <time class="chats-row__time" datetime="<%= group.last_message_at&.iso8601 %>">
+          <%= chats_timestamp(group.last_message_at) %>
+        </time>
+      </span>
+
+      <% if group.open_count > 1 %>
+        <span class="chats-row__subject"><%= t("chats.inbox.group_count", count: group.open_count) %></span>
+      <% elsif group.conversation&.subject_label %>
+        <span class="chats-row__subject"><%= group.conversation.subject_label %></span>
+      <% end %>
+
+      <span class="chats-row__bottom">
+        <span class="chats-row__preview">
+          <%= group.conversation ? chats_preview_for(group.conversation, viewer) : "" %>
+        </span>
+        <% if group.unread? %>
+          <span class="chats-badge"><%= group.unread_count > 99 ? "99+" : group.unread_count %></span>
+        <% end %>
+      </span>
+    </span>
+  <% end %>
+</li>

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

@@ -0,0 +1,20 @@
+<%# What sits where the composer would be when the conversation's SUBJECT
+    has locked it (Chats::ChatSubject#chat_locked?). It carries the same DOM
+    id as the composer's dock, so MessagesController#create can swap one for
+    the other with a single Turbo replace when a thread closes under an open
+    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.
+
+    `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: notice %>
+  <% else %>
+    <p class="chats-composer__locked-notice"><%= notice %></p>
+  <% end %>
+</div>

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

@@ -0,0 +1,147 @@
+<%# The thread body: everything live about one open conversation, shared by
+    the thread PAGE (show.html.erb), a floating dock WINDOW (window.html.erb)
+    and the two-pane page's conversation PANE (_conversation_pane.html.erb).
+    Rendered as a partial LAYOUT — `yield` is the header, which is the one
+    thing they differ in: the page keeps its full header (back link, ⋯ menu),
+    the window its compact one (minimize, close, open full page); the pane
+    renders its header above the thread, outside it, and yields nothing.
+
+    One conversation stream powers everything here: message
+    append/replace/remove, the read-state payload, and typing pings. Bubbles
+    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`).
+      pane             true in the two-pane page's conversation pane: rooted
+                       at .chats-thread--pane, inside the page's .chats shell.
+      read_pending     the server did not read this render, so the
+                       controller posts #read once the thread is on screen
+                       (always true in a window; see
+                       ConversationsController#show for when a page or a
+                       pane is rendered unread).
+
+    The page's root carries data-chats-dock-hide: the messaging dock hides
+    itself on any page that has it. %>
+<% window = local_assigns.fetch(:window, false) %>
+<% pane = local_assigns.fetch(:pane, false) %>
+<% read_pending = window || local_assigns.fetch(:read_pending, false) %>
+<% viewer = chats_current_messager %>
+<%# A direct thread nobody may write in any more says so up front, in the
+    composer's place — the host's policy turned false, or the other account
+    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)) %>
+<% root_class = if window then "chats-thread chats-thread--window"
+                elsif pane then "chats-thread chats-thread--pane"
+                else "chats chats-thread"
+                end %>
+<%= tag.div class: root_class, data: {
+      controller: "chats--thread",
+      "chats-dock-hide": (true unless window || pane), # the pane's page carries it
+      "chats--thread-me-value": Chats.messager_key(viewer),
+      "chats--thread-read-url-value": read_conversation_path(conversation),
+      "chats--thread-read-pending-value": read_pending,
+      "chats--thread-sent-label-value": t("chats.thread.sent"),
+      "chats--thread-seen-label-value": Chats.config.read_receipts ? t("chats.thread.seen") : "",
+      "chats--thread-today-label-value": t("chats.thread.today"),
+      "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/_thread_header.html.erb

@@ -0,0 +1,83 @@
+<%# The header over a conversation: the thread page's, and the conversation
+    pane's on the two-pane messaging page (chats/conversations/
+    _conversation_pane). Back to the list, who it is with (avatar, name,
+    the verified badge, what it is about, the way back to their stack) and
+    the ⋯ menu (mute, leave, the host's conversation_header_actions).
+
+    The back link always renders: on the two-pane page chats.css hides it
+    while the list is on screen beside the conversation.
+
+    Locals:
+      conversation  the Chats::Conversation
+      participant   the viewer's seat in it (mute state), or nil
+      counterpart   the other messager of a direct thread, or nil
+      heading       the title's element: :h1 on the thread page, :h2 in the
+                    pane, under the page's own "Messages" heading
+      title_id      the title's id, which a pane is labelled by (optional);
+                    the pane's title also takes the focus when a row opens
+                    it on a touch screen (tabindex="-1", see chats--split)
+      back_path     where the back link goes (default: the inbox; the pane
+                    keeps the list's search or stack) %>
+<% heading = local_assigns.fetch(:heading, :h1) %>
+<% title_id = local_assigns[:title_id] %>
+<header class="chats-thread__header">
+  <%= link_to local_assigns[:back_path] || root_path, class: "chats-thread__back", "aria-label": t("chats.thread.back") do %>
+    <span aria-hidden="true">‹</span>
+  <% end %>
+
+  <%# The counterpart is already resolved for the title, the profile link
+      and the stack link — reuse it here instead of asking again. %>
+  <% if counterpart %>
+    <%= chats_messager_avatar(counterpart) %>
+  <% else %>
+    <%= chats_conversation_avatar(conversation, chats_current_messager) %>
+  <% end %>
+
+  <div class="chats-thread__identity">
+    <%# Both arms wrap the name in .chats-thread__name: the heading is a flex
+        row (the badge is its second child), and only a real element can
+        carry the ellipsis. %>
+    <%= content_tag heading, class: "chats-thread__title", id: title_id, tabindex: (-1 if title_id) do %>
+      <% if counterpart %>
+        <%= chats_messager_name(counterpart, css_class: "chats-thread__name") %>
+        <%= chats_verified_badge(counterpart) %>
+      <% else %>
+        <span class="chats-thread__name"><%= conversation.title_for(chats_current_messager) %></span>
+      <% end %>
+    <% end %>
+    <% if conversation.subject_label %>
+      <p class="chats-thread__subject"><%= conversation.subject_label %></p>
+    <% end %>
+    <%# A stacked counterpart's thread is one of many: offer the way back
+        to the whole stack (chats' filtered inbox, or the host's own
+        screen via `group_path:`). %>
+    <% if Chats.grouped_inbox?(counterpart) %>
+      <p class="chats-thread__see-all">
+        <%= link_to t("chats.thread.see_all"), chats_group_path_for(counterpart), class: "chats-thread__see-all-link" %>
+      </p>
+    <% end %>
+  </div>
+
+  <details class="chats-menu">
+    <summary class="chats-menu__trigger" aria-label="<%= t("chats.thread.options") %>">⋯</summary>
+    <div class="chats-menu__panel">
+      <% if participant&.muted? %>
+        <%= button_to t("chats.thread.unmute"), unmute_conversation_path(conversation), method: :post, class: "chats-menu__item" %>
+      <% else %>
+        <%= button_to t("chats.thread.mute"), mute_conversation_path(conversation), method: :post, class: "chats-menu__item" %>
+      <% end %>
+      <% if conversation.group? %>
+        <%= button_to t("chats.thread.leave"), leave_conversation_path(conversation), method: :post, class: "chats-menu__item chats-menu__item--danger" %>
+      <% end %>
+      <%# Slot: the host's own thread actions (block, report, archive…).
+          `blockable` is false for messagers declared
+          `acts_as_messager blockable: false`, so safety affordances
+          disappear against a support desk without any class check. %>
+      <%= chats_slot :conversation_header_actions,
+            conversation: conversation,
+            viewer: chats_current_messager,
+            counterpart: counterpart,
+            blockable: chats_blockable?(counterpart) %>
+    </div>
+  </details>
+</header>

data/app/views/chats/conversations/badge.turbo_stream.erb

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

data/app/views/chats/conversations/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 %>