chats 0.6.2 → 0.7.2

data/app/javascript/chats/tray_controller.js

@@ -0,0 +1,506 @@
+import { Controller } from "@hotwired/stimulus"
+import { recoverMissedBroadcasts, renderStreamFrom } from "chats/recovery"
+import { around, fitViewport, holdInert, lockScroll, releaseInert } from "chats/sheet"
+
+// chats--tray: the items a host puts in the corner (`chats_dock { … }`, or
+// `chats_tray { … }` on its own), each a <details> rendered by
+// `chats_tray_item`: closed, a tab on the bottom edge (a round button on a
+// phone); open, a panel with the dock's skin (a full-screen sheet on a
+// phone). The server renders the items and their content; this controller
+// runs them:
+//
+//   * one open      opening an item closes the others, and (`chats--tray:open`,
+//                   handled by chats--dock synchronously) the dock's panel;
+//                   the dock's panel opening closes the open item
+//   * the read gate every item carries data-chats-active and, while closed,
+//                   data-chats-minimized: the attributes a dock window has,
+//                   which chats' thread controller obeys, so a thread inside
+//                   a closed item never reads. Opening it dispatches
+//                   `chats:activated`, and a read that waited happens then.
+//   * the sheet     on a phone an open item is modal: everything around it
+//                   inert and the page still (chats/sheet, shared with the
+//                   dock's own sheet, so one closing never frees the other's)
+//   * keyboard      Escape closes the open item, focus back on its tab (the
+//                   thread's own popups close themselves first)
+//   * memory        which item was open, on a desk only (a sheet always
+//                   starts closed), per owner in localStorage
+//                   (`chats:tray:v1:<owner>`). Every access is guarded.
+//   * badges        an item's badge (`chats_tray_badge`) arrives on its
+//                   owner's stream; what the stream missed (chats/recovery)
+//                   is asked again from the item's data-chats-tray-badge-url.
+//                   When a badge's count moves, the frames of the item's
+//                   content marked [data-chats-tray-refresh] reload: now if
+//                   the item is open, when it opens if it is closed.
+//   * never twice   a thread the page shows (or a dock window) is never
+//                   also shown in an item: the item's
+//                   turbo-frame[data-chats-tray-home] goes back home. The
+//                   live streams address a thread's ids, which must exist once.
+//   * room          an open item is as wide as the corner leaves it: the
+//                   screen less the insets, the dock's panel and every other
+//                   item (`--chats-tray-room`, measured); when that is less
+//                   than `--chats-tray-min-width`, it opens as the sheet, as
+//                   on a phone (`.chats-tray__item--sheet`)
+//   * visits        the tray is carried from page to page (permanent), and
+//                   reconciled with the items the new page rendered: their
+//                   words, badges, badge URLs, streams and panels are the new
+//                   page's; only an item's open state, and a frame open in it
+//                   that the new page renders too (what is being read), stay
+//   * on its own    (`standalone`: a corner of its own, no dock around it)
+//                   it also hides on any page carrying [data-chats-dock-hide]
+//                   and fits the visual viewport, which the dock otherwise does
+//
+// Registered automatically as "chats--tray" through the engine's importmap
+// pin (see config/importmap.rb and Chats::Engine).
+
+const SHEET = "(max-width: 699.98px), (max-height: 499.98px)" // keep in step with chats.css
+const AS_SHEET = "chats-tray__item--sheet"
+const REFRESH_DELAY_MS = 300
+// What this controller manages on an item, which a visit never takes from
+// the new page (refreshItem): its attributes, its classes, its properties.
+const MANAGED_ATTRIBUTES = new Set(["open", "data-chats-minimized", "data-chats-active"])
+const MANAGED_CLASSES = [AS_SHEET]
+const MANAGED_PROPERTIES = ["--chats-tray-room"]
+
+export default class extends Controller {
+  static targets = ["item", "badge"]
+  static values = { owner: String, standalone: Boolean }
+
+  // Stimulus runs the target callbacks BEFORE connect(): set up here.
+  initialize() {
+    this.counts = new WeakMap()
+    this.stale = new WeakSet()
+  }
+
+  connect() {
+    this.corner = this.standaloneValue ? this.element.closest(".chats-dock") || this.element : null
+    this.media = window.matchMedia(SHEET)
+    this.media.addEventListener?.("change", this.layout)
+    window.addEventListener("resize", this.resized)
+    if (this.corner) {
+      window.visualViewport?.addEventListener("resize", this.fitViewport)
+      window.visualViewport?.addEventListener("scroll", this.fitViewport)
+    }
+
+    this.layout()
+    this.restore()
+    this.pageChanged()
+
+    this.stopRecovery = recoverMissedBroadcasts(this.element, () => this.catchUp(),
+                                                { sources: ".chats-tray__launcher turbo-cable-stream-source" })
+  }
+
+  disconnect() {
+    this.media?.removeEventListener?.("change", this.layout)
+    window.removeEventListener("resize", this.resized)
+    window.visualViewport?.removeEventListener("resize", this.fitViewport)
+    window.visualViewport?.removeEventListener("scroll", this.fitViewport)
+    clearTimeout(this.refreshTimer)
+    cancelAnimationFrame(this.resizeFrame)
+    this.releaseSheet()
+    this.stopRecovery?.()
+  }
+
+  // --- Items ---------------------------------------------------------------
+
+  itemTargetConnected(item) {
+    item.dataset.chatsActive = "true"
+    item.toggleAttribute("data-chats-minimized", !item.open)
+    if (this.compact) item.classList.add(AS_SHEET)
+    rendered(item) // its frames, as the page rendered them (refreshItem)
+  }
+
+  // Every item's `toggle` (it doesn't bubble: each item names this action).
+  toggled(event) {
+    const item = event.target
+    if (!this.itemTargets.includes(item)) return
+
+    item.toggleAttribute("data-chats-minimized", !item.open)
+    if (item.open) {
+      this.itemTargets.forEach((other) => { if (other !== item) other.open = false })
+      this.fit(item)
+      this.dispatch("open", { target: item, detail: { key: item.dataset.chatsTrayKey } })
+      item.dispatchEvent(new CustomEvent("chats:activated"))
+      if (this.stale.has(item)) this.refresh(item)
+    } else {
+      this.dispatch("close", { target: item, detail: { key: item.dataset.chatsTrayKey } })
+    }
+    this.syncSheet()
+    this.save()
+  }
+
+  get openItem() {
+    return this.itemTargets.find((item) => item.open)
+  }
+
+  close(item) {
+    if (!item?.open) return
+
+    item.open = false
+    item.querySelector("summary")?.focus()
+  }
+
+  // --- Keyboard ------------------------------------------------------------
+
+  keydown(event) {
+    if (event.key !== "Escape" || event.defaultPrevented) return
+    // The thread's long-press popup and photo preview close themselves.
+    if (event.target.closest?.(".chats-popup, .chats-attachment-preview")) return
+    if (this.element.querySelector(".chats-popup:not([hidden]), .chats-attachment-preview:not([hidden])")) return
+
+    const item = this.openItem
+    if (!item) return
+
+    event.preventDefault()
+    this.close(item)
+  }
+
+  // --- Badges and their content ---------------------------------------------
+
+  // A badge arrived (the server's, or one its owner's stream replaced): when
+  // the count moved, what the item shows may be stale.
+  badgeTargetConnected(badge) {
+    const item = badge.closest(".chats-tray__item")
+    if (!item) return
+
+    const count = Number(badge.dataset.count || 0)
+    const before = this.counts.get(item)
+    this.counts.set(item, count)
+    if (before === undefined || before === count) return
+
+    if (count > before) this.flash(badge, "chats-badge--bumped", 200)
+    this.refresh(item)
+  }
+
+  // Reload the frames that asked to follow the badge: debounced while open,
+  // marked stale while closed (they reload on open).
+  refresh(item) {
+    if (!item.open) {
+      this.stale.add(item)
+      return
+    }
+    this.stale.delete(item)
+    clearTimeout(this.refreshTimer)
+    this.refreshTimer = setTimeout(() => {
+      this.refreshableFrames(item).forEach((frame) => frame.reload?.())
+    }, REFRESH_DELAY_MS)
+  }
+
+  refreshableFrames(item) {
+    const frames = new Set()
+    item.querySelectorAll("[data-chats-tray-refresh]").forEach((marker) => {
+      const frame = marker.closest("turbo-frame")
+      if (frame && item.contains(frame)) frames.add(frame)
+    })
+    return Array.from(frames)
+  }
+
+  // Each item's badge asked again. Only from this site: what comes back is a
+  // Turbo Stream applied to the page, so a badge URL on another origin (one
+  // that answers CORS) is refused, never fetched.
+  catchUp() {
+    this.itemTargets.forEach((item) => {
+      const url = sameOrigin(item.dataset.chatsTrayBadgeUrl)
+      if (url) renderStreamFrom(url)
+    })
+  }
+
+  // --- Pages ---------------------------------------------------------------
+
+  // A visit is about to render, and Turbo will keep this (permanent) tray
+  // rather than the one the new page rendered: make its items the new
+  // page's, by key. One the page no longer renders goes; a new one comes in;
+  // one still there takes everything the new page says about it (see
+  // refreshItem), in the new page's order.
+  reconcile(event) {
+    const find = (id) => event.detail?.newBody?.querySelector?.(`[id="${cssEscape(id)}"]`)
+    // The permanent element the tray rides in (the dock, or its own corner):
+    // only when the new page renders it too does Turbo carry this tray there.
+    const holder = this.element.closest("[data-turbo-permanent]")
+    const newHolder = holder ? find(holder.id) : find(this.element.id)
+    if (!newHolder) return
+
+    const incoming = holder ? newHolder.querySelector(`[id="${cssEscape(this.element.id)}"]`) : newHolder
+    const current = new Map(this.itemTargets.map((item) => [item.dataset.chatsTrayKey, item]))
+    const wanted = incoming ? Array.from(incoming.querySelectorAll(":scope > .chats-tray__item")) : []
+    const keys = new Set(wanted.map((item) => item.dataset.chatsTrayKey))
+    const sameOrder = wanted.map((item) => item.dataset.chatsTrayKey).join("\n") === Array.from(current.keys()).join("\n")
+
+    current.forEach((item, key) => { if (!keys.has(key)) item.remove() })
+    wanted.forEach((fresh) => {
+      const kept = current.get(fresh.dataset.chatsTrayKey)
+      if (kept) this.refreshItem(kept, fresh)
+      // The new page's order. When it is the same, nothing moves: a move
+      // reconnects what is in the item (its streams, an open thread).
+      if (!kept || !sameOrder) this.element.append(kept || document.importNode(fresh, true))
+    })
+  }
+
+  // A retained item takes the new page's version of itself: its attributes
+  // (class, style and the badge URL among them), its tab (words, icon,
+  // badge, the badge's stream) and its panel. It keeps only what this
+  // controller manages (MANAGED_*: open or not, the read gate, the sheet and
+  // the room it measured) and, while it is open, a frame of its panel that
+  // the new page renders as the previous page did, live and in place: what
+  // is being read or written there.
+  refreshItem(kept, fresh) {
+    adopt(kept, fresh, MANAGED_ATTRIBUTES)
+
+    const summary = kept.querySelector(":scope > summary")
+    const freshSummary = fresh.querySelector(":scope > summary")
+    if (freshSummary && summary) {
+      summary.replaceWith(document.importNode(freshSummary, true))
+    } else if (freshSummary) {
+      kept.prepend(document.importNode(freshSummary, true))
+    }
+
+    const body = kept.querySelector(":scope > .chats-tray__body")
+    const freshBody = fresh.querySelector(":scope > .chats-tray__body")
+    if (!body || !freshBody) return
+    adopt(body, freshBody)
+
+    const staying = new Set()
+    const keep = new Map()
+    if (kept.open) {
+      const live = new Map(Array.from(body.querySelectorAll(":scope > turbo-frame[id]"), (frame) => [frame.id, frame]))
+      Array.from(freshBody.children).forEach((node) => {
+        const frame = live.get(node.id)
+        if (frame && sameFrame(frame, node)) {
+          staying.add(frame)
+          keep.set(node, frame)
+        }
+      })
+    }
+    Array.from(body.childNodes).forEach((node) => { if (!staying.has(node)) node.remove() })
+    let anchor = body.firstChild
+    Array.from(freshBody.childNodes).forEach((node) => {
+      const frame = keep.get(node)
+      if (frame) {
+        anchor = frame.nextSibling // it stays where it is
+      } else {
+        body.insertBefore(rendered(document.importNode(node, true)), anchor)
+      }
+    })
+  }
+
+  // After every visit: on its own, hidden on the pages that hide the dock;
+  // anywhere, no item keeps a thread the page now shows.
+  pageChanged() {
+    if (this.corner) {
+      const hide = Array.from(document.querySelectorAll("[data-chats-dock-hide]"))
+        .some((node) => !this.corner.contains(node))
+      this.corner.hidden = hide
+      if (hide) this.itemTargets.forEach((item) => { item.open = false })
+    }
+    this.yieldDuplicates()
+    this.syncSheet()
+  }
+
+  // A frame loaded somewhere (a dock window, the page's pane, an item's own):
+  // the same rule.
+  frameLoaded() {
+    this.yieldDuplicates()
+  }
+
+  // A thread is identified by its history's id (dom_id(conversation,
+  // :history)): one inside an item that also exists outside it sends the
+  // item's home frames back home.
+  yieldDuplicates() {
+    this.itemTargets.forEach((item) => {
+      const twice = Array.from(item.querySelectorAll(".chats-thread__scroll[id]")).some((history) =>
+        Array.from(document.querySelectorAll(`[id="${cssEscape(history.id)}"]`)).some((other) => !item.contains(other)))
+      if (!twice) return
+
+      item.querySelectorAll("turbo-frame[data-chats-tray-home]").forEach((frame) => {
+        frame.replaceChildren()
+        frame.src = frame.dataset.chatsTrayHome
+      })
+    })
+  }
+
+  // --- The sheet -------------------------------------------------------------
+
+  layout = () => {
+    const compact = this.media.matches
+    if (this.compact === false && compact) this.itemTargets.forEach((item) => { item.open = false })
+
+    this.compact = compact
+    if (this.corner) this.corner.dataset.mode = compact ? "sheet" : "dock"
+    this.itemTargets.forEach((item) => (item.open ? this.fit(item) : item.classList.toggle(AS_SHEET, compact)))
+    this.fitViewport()
+    this.syncSheet()
+  }
+
+  // The viewport changed size: the open item fits again (or becomes the sheet).
+  // At most once a frame, as the dock reflows (a resize fires many times).
+  resized = () => {
+    cancelAnimationFrame(this.resizeFrame)
+    this.resizeFrame = requestAnimationFrame(() => {
+      const item = this.openItem
+      if (!item) return
+
+      this.fit(item)
+      this.syncSheet()
+    })
+  }
+
+  // How wide +item+ may open: the screen less the insets, the dock's panel
+  // and every other item with its gap. Too little (under
+  // --chats-tray-min-width), or a phone: the sheet.
+  fit(item) {
+    const room = this.roomFor(item)
+    item.style.setProperty("--chats-tray-room", `${Math.max(0, Math.floor(room))}px`)
+    item.classList.toggle(AS_SHEET, Boolean(this.compact) || room < this.pixels("--chats-tray-min-width", 280))
+  }
+
+  roomFor(item) {
+    const gap = this.pixels("--chats-dock-gap", 8)
+    const panel = this.element.closest(".chats-dock")?.querySelector(":scope > .chats-dock__panel")
+    let taken = 2 * this.pixels("--chats-dock-inset", 16) + (panel ? panel.offsetWidth + gap : 0)
+    this.itemTargets.forEach((other) => { if (other !== item) taken += other.offsetWidth + gap })
+    return window.innerWidth - taken
+  }
+
+  pixels(property, fallback) {
+    const value = getComputedStyle(this.element).getPropertyValue(property).trim()
+    return value.endsWith("px") ? parseFloat(value) : fallback
+  }
+
+  fitViewport = () => {
+    if (this.corner) fitViewport(this.corner, this.compact)
+  }
+
+  // Open as the sheet (a phone, or a corner too narrow for it), an item is
+  // modal: everything around it is held inert, and the page doesn't scroll,
+  // until it closes.
+  syncSheet() {
+    const item = this.openItem
+    const hidden = this.corner?.hidden || this.element.closest(".chats-dock")?.hidden
+    if (item?.classList.contains(AS_SHEET) && !hidden) {
+      holdInert(this, around(item))
+      lockScroll(this, true)
+    } else {
+      this.releaseSheet()
+    }
+  }
+
+  releaseSheet() {
+    releaseInert(this)
+    lockScroll(this, false)
+  }
+
+  // --- Memory ----------------------------------------------------------------
+
+  get storageKey() {
+    return `chats:tray:v1:${this.ownerValue}`
+  }
+
+  save() {
+    const saved = this.read() || {}
+    const open = this.openItem
+    // A sheet always starts closed: on a phone, only a desk's choice is kept,
+    // and an item that opened as the sheet on a narrow desk isn't remembered.
+    if (this.compact) return this.write({ open: saved.open || null })
+    this.write({ open: open && !open.classList.contains(AS_SHEET) ? open.dataset.chatsTrayKey : null })
+  }
+
+  // The item that was open, on a desk. A Turbo visit carries the live
+  // element along, so this only ever reopens what is already open.
+  restore() {
+    if (this.compact || this.openItem) return
+
+    const key = this.read()?.open
+    if (typeof key !== "string") return
+    const item = this.itemTargets.find((candidate) => candidate.dataset.chatsTrayKey === key)
+    if (item) item.open = true
+  }
+
+  read() {
+    try {
+      const saved = JSON.parse(window.localStorage.getItem(this.storageKey) || "null")
+      return saved && typeof saved === "object" ? saved : null
+    } catch {
+      return null
+    }
+  }
+
+  write(value) {
+    try {
+      window.localStorage.setItem(this.storageKey, JSON.stringify(value))
+    } catch {
+      // nothing to remember with
+    }
+  }
+
+  flash(element, className, duration) {
+    element.classList.add(className)
+    setTimeout(() => element.classList.remove(className), duration)
+  }
+}
+
+// +target+ takes +source+'s attributes: every one it carries, and none it
+// doesn't, except the +managed+ ones (kept as they are); its class and style
+// are the source's too, plus the classes and properties this controller
+// manages.
+function adopt(target, source, managed = new Set()) {
+  const classes = MANAGED_CLASSES.filter((name) => target.classList.contains(name))
+  const properties = MANAGED_PROPERTIES.map((name) => [name, target.style.getPropertyValue(name)]).filter(([, v]) => v)
+  Array.from(target.attributes).forEach(({ name }) => {
+    if (!managed.has(name) && !source.hasAttribute(name)) target.removeAttribute(name)
+  })
+  Array.from(source.attributes).forEach(({ name, value }) => {
+    if (!managed.has(name)) target.setAttribute(name, value)
+  })
+  classes.forEach((name) => target.classList.add(name))
+  properties.forEach(([name, value]) => target.style.setProperty(name, value))
+}
+
+// Whether the new page's +node+ is the frame +frame+ already is: the same id,
+// rendered with the same destination (the src resolved, query included) as
+// the page that rendered +frame+. Where the frame went since (a link followed
+// inside it) is the viewer's, and stays; another destination is another
+// frame (another thread), and replaces it.
+//
+// Each src is resolved against the page that rendered it, at the moment it
+// renders: +frame+'s when it connected (rendered), +node+'s now, on
+// turbo:before-render, when Turbo has already moved the address to the new
+// page. So `src="threads"` on /a/ and on /b/ are two destinations.
+function sameFrame(frame, node) {
+  return node.matches?.("turbo-frame") && node.id === frame.id &&
+    frame.renderedSrc === resolved(node.getAttribute("src"))
+}
+
+// The absolute destination the page rendered a frame with, remembered on it
+// (and on the frames inside it) before Turbo navigates it.
+function rendered(node) {
+  const frames = node.matches?.("turbo-frame") ? [node] : []
+  frames.push(...(node.querySelectorAll?.("turbo-frame") || []))
+  frames.forEach((frame) => { frame.renderedSrc ??= resolved(frame.getAttribute("src")) })
+  return node
+}
+
+function resolved(src) {
+  if (!src) return ""
+  try {
+    return new URL(src, window.location.href).toString()
+  } catch {
+    return src
+  }
+}
+
+// +url+ resolved against the page, when it is on the page's own origin; null
+// (and said, in the console) when it is not.
+function sameOrigin(url) {
+  if (!url) return null
+  try {
+    const resolved = new URL(url, window.location.href)
+    if (resolved.origin === window.location.origin) return resolved.toString()
+  } catch {
+    // not a URL at all
+  }
+  console.error(`chats--tray: refusing a badge URL on another origin: ${url}`)
+  return null
+}
+
+function cssEscape(value) {
+  return window.CSS?.escape ? window.CSS.escape(value) : String(value).replace(/["\\]/g, "\\$&")
+}

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

@@ -68,6 +68,7 @@
       "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"),
+      "chats--thread-menu-label-value": t("chats.message.menu"),
       # 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`.
@@ -94,9 +95,12 @@
       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>. %>
+  <%# Modal on every screen (the backdrop covers the thread; a tap or a
+      click on it closes): chats--thread keeps the focus inside while open. %>
   <div class="chats-popup"
        role="dialog"
        aria-modal="true"
+       aria-label="<%= t("chats.message.menu") %>"
        data-chats--thread-target="popup"
        hidden>
     <div class="chats-popup__backdrop" data-action="click->chats--thread#closePopup"></div>

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

@@ -13,6 +13,10 @@
     account's page (sign out and in, an account switcher) never matches and
     never carries one person's windows into another's page.
 
+    Between the windows and the panel, the TRAY (chats/tray/_tray): the
+    items the host's block gave `chats_dock { … }`, e.g. support_desk's
+    "Need help?". Nothing at all without a block.
+
     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
@@ -50,7 +54,9 @@
                 "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"
+                "turbo:frame-load@document->chats--dock#pageFrameLoaded " \
+                "chats--tray:open->chats--dock#trayOpened " \
+                "turbo:before-cache@document->chats--dock#releaseSheet"
       } do %>
   <%= turbo_stream_from viewer, :chats_dock %>
   <%= render "chats/dock/signal" %>
@@ -61,6 +67,8 @@
   <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>
 
+  <% if (tray = local_assigns[:tray]) %><%= render "chats/tray/tray", tray: tray, owner: key %><% end %>
+
   <details class="chats-dock__panel"
            data-chats--dock-target="panel"
            data-action="toggle->chats--dock#panelToggled">

data/app/views/chats/messages/_message.html.erb

@@ -108,6 +108,25 @@
             <% end %>
           </span>
         </div>
+
+        <%# The menu's desktop door: "⋯" on the bubble's inner edge (the row
+            reverses for own bubbles), the popup right-click opens. chats.css
+            shows it to a fine, hovering pointer only; touch long-presses.
+            tabindex="-1": a thread is ONE tab stop, which chats--thread
+            keeps on one of these (arrows move it). The label is this
+            render's language (a live bubble's is the sender's), so
+            chats--thread stamps the reader's. %>
+        <% unless message.deleted? %>
+          <button type="button"
+                  class="chats-message__menu-trigger"
+                  tabindex="-1"
+                  aria-label="<%= t("chats.message.menu") %>"
+                  aria-haspopup="dialog"
+                  data-chats-message-menu-trigger
+                  data-action="chats--thread#openMenu keydown->chats--thread#moveMenuFocus">
+            <span aria-hidden="true">⋯</span>
+          </button>
+        <% end %>
       </div>
 
       <% unless message.deleted? %>
@@ -146,9 +165,12 @@
             long-press/right-click: the reactions pill lands above the
             lifted bubble, this contextual menu below it. Items marked
             data-chats-own-only are stripped from the clone for foreign
-            messages (cosmetic — the server still authorizes for real).
-            button_to forms keep working when cloned: the CSRF token is
-            baked in at render time. %>
+            messages, and items marked data-chats-other-only from the clone
+            for the viewer's own (cosmetic — the server still authorizes for
+            real). button_to forms keep working when cloned: a broadcast
+            render's token is nobody's, so chats--thread puts the page's own
+            (the csrf-token meta) in each cloned form, and a native submit
+            (Turbo off around the thread) passes too. %>
         <template data-chats-message-menu>
           <% if Chats.config.reactions && !locked %>
             <div class="chats-popup__reactions" role="group" aria-label="<%= t("chats.message.react") %>">
@@ -178,6 +200,11 @@
                     role: "menuitem",
                     form: { data: { turbo_confirm: t("chats.message.delete_confirm"), chats_own_only: true } } %>
             <% end %>
+            <%# The host's items (Report, Pin, Reply in private…), after
+                ours, in the same menu. Rendered here, so as viewer-agnostic
+                as the rest of the bubble: see the message_menu slot in the
+                README for what an item may be. %>
+            <%= chats_slot :message_menu, message: message %>
           </div>
         </template>
       <% end %>

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

@@ -0,0 +1,12 @@
+<%# An item's badge (`chats_tray_badge`): hidden at zero, number kept. Its
+    owner's stream replaces it by +id+ (and the item's badge_url answers the
+    same replace when that stream missed one); chats--tray notices the count
+    move and reloads the item's [data-chats-tray-refresh] content. Not a
+    live region: it would chatter on every read. %>
+<%= tag.span id: id,
+      class: "chats-badge chats-tray__badge",
+      hidden: !count.positive?,
+      data: { "chats--tray-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/tray/_corner.html.erb

@@ -0,0 +1,16 @@
+<%# The tray on its own (`chats_tray`, or `chats_dock` with a block and no
+    viewer): the dock's corner without messaging — same element class, so
+    the same `--chats-dock-*` variables, position, z-index and phone layout
+    — holding only the tray.
+
+    data-turbo-permanent, as the dock is: an open item, and whatever its
+    frame shows, ride along from page to page. The id names the owner, so a
+    visit that lands on another account's page (or a sign in) starts fresh.
+
+    Locals: tray, owner, launcher (false: no round buttons on a phone). %>
+<%= chats_styles %>
+<%= tag.div id: "chats_tray_#{owner}",
+      class: ["chats-dock", "chats-dock--tray-only", ("chats-dock--no-launcher" unless launcher)],
+      data: { turbo_permanent: true } do %>
+  <%= render "chats/tray/tray", tray: tray, owner: owner, standalone: true %>
+<% end %>