chats 0.6.2 → 0.7.2

data/app/assets/stylesheets/chats.css

@@ -345,7 +345,8 @@ turbo-frame[id^="chats_page_"] {
 .chats-message--continuation { margin-top: 0.15rem; }
 .chats-message__avatar { width: 1.9rem; height: 1.9rem; font-size: 0.7rem; }
 .chats-message__content { display: flex; flex-direction: column; min-width: 0; }
-.chats-message__bubble-row { display: flex; align-items: flex-end; gap: 0.5rem; }
+/* relative: the anchor of the menu's "⋯" (see the popup section). */
+.chats-message__bubble-row { position: relative; display: flex; align-items: flex-end; gap: 0.5rem; }
 .chats-message__sender {
   font-size: 0.72rem;
   font-weight: 700;
@@ -720,6 +721,43 @@ turbo-frame[id^="chats_page_"] {
 .chats-popup__item:hover { background: var(--chats-surface); }
 .chats-popup__item--danger { color: #dc2626; }
 
+/* The menu's desktop door: "⋯" on the bubble's inner edge, shown while
+   the pointer is on the message or the button has keyboard focus. A fine,
+   hovering pointer only: a touch screen long-presses. Absolutely placed, so
+   no bubble moves; the transparent border is hit area touching the bubble,
+   so the pointer never crosses a gap that would un-hover it. */
+.chats-message__menu-trigger { display: none; }
+@media (hover: hover) and (pointer: fine) {
+  .chats-message__menu-trigger {
+    position: absolute;
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.1rem;
+    height: 2.1rem;
+    padding: 0;
+    border: 0.25rem solid transparent;
+    border-radius: 999px;
+    background: none;
+    background-clip: padding-box;
+    color: var(--chats-text-muted);
+    font: inherit;
+    font-size: 1.1rem;
+    line-height: 1;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 120ms ease;
+  }
+  .chats-message--own .chats-message__menu-trigger { left: auto; right: 100%; }
+  .chats-message:hover .chats-message__menu-trigger,
+  .chats-message__menu-trigger:focus-visible { opacity: 1; }
+  .chats-message__menu-trigger:hover { background-color: var(--chats-surface); color: var(--chats-text); }
+  .chats-message__menu-trigger:focus-visible { outline: 2px solid var(--chats-accent); outline-offset: -0.25rem; }
+}
+
 /* --- Seen + typing --------------------------------------------------------------------- */
 
 .chats-seen {
@@ -1175,6 +1213,11 @@ turbo-frame[id^="chats_page_"] {
   --chats-dock-focus: var(--chats-accent);
   /* --chats-dock-title-font: unset on purpose; titles inherit the host font. */
   --chats-dock-launcher-size: 56px;
+  /* 0.7.0, the tray: an open item is a window's width, the panel's height */
+  --chats-tray-panel-width: var(--chats-dock-window-width);
+  --chats-tray-panel-height: var(--chats-dock-panel-height);
+  --chats-tray-launcher-size: 48px;   /* an item's round button on a phone */
+  --chats-tray-min-width: 280px;      /* less room than this: an item opens as the sheet */
   --chats-dock-sheet-header-height: 56px;
   --chats-dock-duration: 200ms;
   --chats-dock-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -1207,7 +1250,8 @@ turbo-frame[id^="chats_page_"] {
   gap: var(--chats-dock-gap);
 }
 .chats-window,
-.chats-dock__panel { pointer-events: auto; }
+.chats-dock__panel,
+.chats-tray__item { pointer-events: auto; }
 
 /* Inset: every surface clips (overflow: hidden), so an outside ring is cut. */
 .chats-dock :focus-visible {
@@ -1218,7 +1262,8 @@ turbo-frame[id^="chats_page_"] {
 /* --- Surfaces (panel and windows share one skin) -------------------------------- */
 
 .chats-window,
-.chats-dock__panel {
+.chats-dock__panel,
+.chats-tray__item {
   background: var(--chats-dock-bg);
   border: 1px solid var(--chats-dock-edge);
   border-bottom: 0;
@@ -1270,6 +1315,7 @@ turbo-frame[id^="chats_page_"] {
 /* --- The bar (the panel's <summary>) and window headers -------------------------- */
 
 .chats-dock__bar,
+.chats-tray__launcher,
 .chats-window__header {
   flex: 0 0 var(--chats-dock-bar-height);
   height: var(--chats-dock-bar-height);
@@ -1278,7 +1324,8 @@ turbo-frame[id^="chats_page_"] {
   background: var(--chats-dock-header-bg);
   border-bottom: 1px solid var(--chats-dock-edge);
 }
-.chats-dock__toggle {
+.chats-dock__toggle,
+.chats-tray__launcher {
   gap: 10px;
   color: inherit;
   padding: 0 8px 0 12px;
@@ -1286,11 +1333,13 @@ turbo-frame[id^="chats_page_"] {
   cursor: pointer;
   user-select: none;
 }
-.chats-dock__toggle::-webkit-details-marker { display: none; }
-.chats-dock__panel:not([open]) .chats-dock__toggle { border-bottom-color: transparent; }
+:is(.chats-dock__toggle, .chats-tray__launcher)::-webkit-details-marker { display: none; }
+.chats-dock__panel:not([open]) .chats-dock__toggle,
+.chats-tray__item:not([open]) .chats-tray__launcher { border-bottom-color: transparent; }
 .chats-dock__toggle .chats-avatar { width: 32px; height: 32px; font-size: 0.8rem; }
 .chats-dock__icon { display: none; width: 26px; height: 26px; flex-shrink: 0; }
-.chats-dock__title {
+.chats-dock__title,
+.chats-tray__title {
   flex: 1;
   min-width: 0;
   font-family: var(--chats-dock-title-font);
@@ -1301,7 +1350,9 @@ turbo-frame[id^="chats_page_"] {
   text-overflow: ellipsis;
 }
 .chats-dock__chevron,
-.chats-dock__close-glyph {
+.chats-dock__close-glyph,
+.chats-tray__chevron,
+.chats-tray__close-glyph {
   flex: 0 0 32px;
   width: 32px;
   height: 32px;
@@ -1311,16 +1362,21 @@ turbo-frame[id^="chats_page_"] {
   color: var(--chats-text-muted);
 }
 .chats-dock__chevron svg,
-.chats-dock__close-glyph svg {
+.chats-dock__close-glyph svg,
+.chats-tray__chevron svg,
+.chats-tray__close-glyph svg {
   width: 18px;
   height: 18px;
   transition: transform var(--chats-dock-duration) var(--chats-dock-ease);
 }
 @media (hover: hover) {
-  .chats-dock__toggle:hover .chats-dock__chevron { background: var(--chats-dock-hover); color: var(--chats-text); }
+  .chats-dock__toggle:hover .chats-dock__chevron,
+  .chats-tray__launcher:hover .chats-tray__chevron { background: var(--chats-dock-hover); color: var(--chats-text); }
 }
-.chats-dock__panel[open] .chats-dock__chevron svg { transform: rotate(180deg); }
-.chats-dock__close-glyph { display: none; }
+.chats-dock__panel[open] .chats-dock__chevron svg,
+.chats-tray__item[open] .chats-tray__chevron svg { transform: rotate(180deg); }
+.chats-dock__close-glyph,
+.chats-tray__close-glyph { display: none; }
 
 /* Badges in the dock: one size, a hair smaller than the inbox's. */
 .chats-dock .chats-badge {
@@ -1342,9 +1398,10 @@ turbo-frame[id^="chats_page_"] {
   display: flex;
   flex-direction: column;
 }
-.chats-dock__panel[open] .chats-dock__body {
+:is(.chats-dock__panel, .chats-tray__item)[open] :is(.chats-dock__body, .chats-tray__body) {
   animation: chats-dock-rise var(--chats-dock-duration) var(--chats-dock-ease);
 }
+
 .chats-dock__search { padding: 8px 12px 4px; }
 .chats-dock__search .chats-search__input { padding: 0.45rem 0.8rem; font-size: 0.8125rem; }
 .chats-dock__results {
@@ -1404,6 +1461,71 @@ turbo-frame[id^="chats_page_"] {
 .chats-dock__skeleton span::before { width: 45%; }
 .chats-dock__skeleton span::after { width: 80%; }
 
+/* --- The tray (0.7.0) --------------------------------------------------------------
+   The items a host puts in the corner (chats_dock { … } or chats_tray { … }),
+   between the windows and the panel. An item is a <details>: closed, a tab on
+   the bottom edge as tall as the bar; open, a panel with the same skin and the
+   bar on top. The windows' row gets what the tray leaves (dock_controller.js,
+   room), so nothing ever overlaps. A corner holding only the tray
+   (.chats-dock--tray-only) is the same element class: same variables, same
+   place. */
+
+.chats-tray {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--chats-dock-gap);
+}
+/* Emptied by a visit to a page that renders no items: no gap left behind. */
+.chats-tray:not(:has(.chats-tray__item)) { display: none; }
+.chats-tray__item {
+  position: relative;
+  flex-shrink: 0;
+  padding-bottom: var(--chats-safe-bottom);
+}
+/* Never wider than what the corner leaves it (`--chats-tray-room`, measured by
+   chats--tray as it opens: the screen less the insets, the dock's panel and
+   every other item). Under --chats-tray-min-width it opens as the sheet. */
+.chats-tray__item[open] {
+  width: min(var(--chats-tray-panel-width), var(--chats-tray-room, var(--chats-tray-panel-width)));
+  height: min(var(--chats-tray-panel-height),
+              calc(100dvh - var(--chats-dock-offset) - var(--chats-dock-top-clearance)));
+}
+.chats-tray__item:not([open]) .chats-tray__launcher { padding: 0 14px 0 12px; gap: 8px; }
+.chats-tray__icon {
+  display: inline-grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+.chats-tray__icon :is(svg, img) { width: 100%; height: 100%; }
+.chats-tray__label {
+  font-family: var(--chats-dock-title-font);
+  font-size: 0.875rem;
+  font-weight: 700;
+  white-space: nowrap;
+}
+/* Closed, the tab's words; open, the panel's title and the way to close it. */
+.chats-tray__item[open] .chats-tray__label,
+.chats-tray__item:not([open]) :is(.chats-tray__title, .chats-tray__chevron) { display: none; }
+.chats-tray__title { display: flex; align-items: center; gap: 4px; }
+/* Positioned, as the panel's body is (a <details>' content sits in a UA slot
+   box). The item's content fills it: a frame, a column. */
+.chats-tray__body {
+  position: absolute;
+  inset: var(--chats-dock-bar-height) 0 var(--chats-safe-bottom) 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+.chats-tray__body > turbo-frame {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
 /* --- Windows --------------------------------------------------------------------- */
 
 .chats-window__header { padding-right: 4px; position: relative; }
@@ -1634,7 +1756,56 @@ turbo-frame[id^="chats_page_"] {
   }
   .chats-dock--no-launcher .chats-dock__panel:not([open]) { display: none; }
   /* Anything full-screen up: the launcher would only cover it. */
-  .chats-dock:has(.chats-window--front) .chats-dock__panel:not([open]) { display: none; }
+  .chats-dock:has(.chats-window--front, .chats-tray__item[open]) .chats-dock__panel:not([open]) { display: none; }
+
+  /* The tray: its closed items are smaller round buttons stacked above the
+     dock's (in its place when there is none), the same accent-free surface
+     as a window. `launcher: false` takes them away with the dock's. */
+  .chats-tray {
+    position: fixed;
+    z-index: 3;
+    right: calc(16px + var(--chats-safe-right));
+    bottom: calc(16px + var(--chats-dock-offset) + var(--chats-safe-bottom));
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 12px;
+  }
+  .chats-dock:not(.chats-dock--no-launcher, .chats-dock--tray-only) .chats-tray {
+    bottom: calc(28px + var(--chats-dock-launcher-size) + var(--chats-dock-offset) + var(--chats-safe-bottom));
+  }
+  .chats-tray__item:not([open]) {
+    width: var(--chats-tray-launcher-size);
+    height: var(--chats-tray-launcher-size);
+    padding: 0;
+    border: 1px solid var(--chats-dock-edge);
+    border-radius: 999px;
+    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.28);
+    overflow: visible;
+  }
+  .chats-tray__item:not([open]) .chats-tray__launcher {
+    position: relative;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: none;
+  }
+  .chats-tray__item:not([open]) .chats-tray__icon { width: 22px; height: 22px; }
+  .chats-tray__item:not([open]) .chats-tray__label {
+    /* Still read out ("Need help?, 2 unread"), just not shown. */
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+  }
+  .chats-tray__item:not([open]) .chats-badge { position: absolute; top: -4px; right: -4px; }
+  .chats-dock--no-launcher .chats-tray__item:not([open]) { display: none; }
+  .chats-dock:has(.chats-dock__panel[open], .chats-window--front, .chats-tray__item[open]) .chats-tray__item:not([open]) {
+    display: none;
+  }
 
   /* Open: the full-screen sheet; a window sits on top of the list. */
   .chats-dock__panel[open],
@@ -1673,8 +1844,14 @@ turbo-frame[id^="chats_page_"] {
   .chats-dock__panel[open] .chats-dock__toggle { padding: 0 6px 0 16px; }
   .chats-dock__panel[open] .chats-dock__title { font-size: 1.125rem; font-weight: 800; }
   .chats-dock__panel[open] :is(.chats-dock__toggle .chats-avatar, .chats-dock__chevron) { display: none; }
-  .chats-dock__panel[open] .chats-dock__close-glyph { display: inline-grid; flex-basis: 44px; width: 44px; height: 44px; }
+  .chats-dock__panel[open] .chats-dock__close-glyph {
+    display: inline-grid;
+    flex-basis: 44px;
+    width: 44px;
+    height: 44px;
+  }
   .chats-dock__panel[open] .chats-dock__close-glyph svg { width: 22px; height: 22px; }
+
   .chats-dock__search { padding: 8px 16px; }
   /* 16px or iOS Safari zooms the page on focus. */
   .chats-dock__search .chats-search__input { font-size: 16px; padding: 0.55rem 0.9rem; }
@@ -1708,6 +1885,39 @@ turbo-frame[id^="chats_page_"] {
   .chats-dock--keyboard .chats-thread--window .chats-composer { padding-bottom: 8px; }
 }
 
+/* An item open as the sheet: on a phone, and on a desk whose corner can't fit
+   it (chats--tray sets the class: .chats-tray__item--sheet). The dock's own
+   sheet, for an item. */
+.chats-tray__item--sheet[open] {
+  position: fixed;
+  z-index: 3;
+  left: 0;
+  right: 0;
+  top: var(--chats-vv-top, 0px);
+  width: 100%;
+  height: var(--chats-vvh, 100dvh);
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: var(--chats-safe-top) var(--chats-safe-right) var(--chats-safe-bottom) var(--chats-safe-left);
+  animation: chats-dock-sheet-up 260ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+.chats-tray__item--sheet[open] .chats-tray__body {
+  inset: calc(var(--chats-safe-top) + var(--chats-dock-sheet-header-height)) var(--chats-safe-right)
+         var(--chats-safe-bottom) var(--chats-safe-left);
+  animation: none;
+}
+.chats-tray__item--sheet[open] .chats-tray__launcher {
+  flex-basis: var(--chats-dock-sheet-header-height);
+  height: var(--chats-dock-sheet-header-height);
+  padding: 0 6px 0 16px;
+  box-shadow: none;
+}
+.chats-tray__item--sheet[open] .chats-tray__title { font-size: 1.125rem; font-weight: 800; }
+.chats-tray__item--sheet[open] :is(.chats-tray__icon, .chats-tray__chevron) { display: none; }
+.chats-tray__item--sheet[open] .chats-tray__close-glyph { display: inline-grid; flex-basis: 44px; width: 44px; height: 44px; }
+.chats-tray__item--sheet[open] .chats-tray__close-glyph svg { width: 22px; height: 22px; }
+
 html.chats-dock-sheet-open { overflow: hidden; }
 
 @media (prefers-reduced-motion: reduce) {

data/app/helpers/chats/engine_helper.rb

@@ -8,6 +8,16 @@ module Chats
     # Every slot the bundled views render, and the whole list of them. A
     # host drops `app/views/chats/slots/_<name>.html.erb` in and it appears;
     # a name that isn't here renders nothing.
+    #
+    # `message_menu` renders inside a <template>: a message's menu
+    # (long-press, right-click, the desktop "⋯"), which chats--thread
+    # CLONES into the popup. Items are `chats-popup__item` links or
+    # `button_to` forms (both survive the clone, which gives a form the
+    # page's own CSRF token), and the partial gets `message:` only: the
+    # bubble is one render per broadcast for every viewer.
+    # `data-chats-other-only` keeps an item off the viewer's own messages
+    # (a Report), `data-chats-own-only` off the others'. A link leaving the
+    # thread wants `data-turbo-frame="_top"`.
     SLOTS = %w[
       inbox_top
       inbox_empty
@@ -15,6 +25,7 @@ module Chats
       composer_actions
       locked_composer
       message_meta
+      message_menu
       dock_panel_footer
     ].freeze
 
@@ -95,15 +106,75 @@ module Chats
     #   windows:   how many windows may be open at once (3, and never more
     #              than fit beside the panel: 2 at 1280px, 1 at 768px)
     #   recent:    how many conversations the panel lists (10)
-    #   launcher:  false drops the phone's floating button, for a host that
-    #              opens the sheet from its own nav (see chats_dock_toggle)
-    def chats_dock(windows: 3, recent: 10, launcher: true, everywhere: false)
-      viewer = chats_viewer
-      return if viewer.nil?
+    #   launcher:  false drops the phone's floating buttons (the dock's and
+    #              the tray's), for a host that opens the sheet from its own
+    #              nav (see chats_dock_toggle)
+    #
+    # The block is the TRAY: items other surfaces put in the corner, beside
+    # the bar (`chats_tray_item`; support_desk's `support_launcher` is one):
+    #
+    #   <%= chats_dock do %>
+    #     <%= support_launcher %>
+    #   <% end %>
+    #
+    # With nobody signed in there is no dock, but the block's items still
+    # render, in a corner of their own (chats_tray). On the engine's own
+    # pages nothing does, tray included: those pages hide the dock anyway.
+    def chats_dock(windows: 3, recent: 10, launcher: true, everywhere: false, &tray)
       return if chats_engine_page? && !everywhere
 
+      viewer = chats_viewer
+      items = chats_tray_items(&tray)
+      return chats_tray_corner(items, launcher: launcher) if viewer.nil?
+
       render(partial: "chats/dock/dock",
-             locals: { viewer: viewer, windows: windows, recent: recent, launcher: launcher, everywhere: everywhere })
+             locals: { viewer: viewer, windows: windows, recent: recent, launcher: launcher, everywhere: everywhere,
+                       tray: items })
+    end
+
+    # The tray on its own, for a host with no messaging dock (or a page with
+    # nobody signed in): the dock's corner, same look and same variables,
+    # holding only +block+'s items.
+    #
+    #   <%= chats_tray do %>
+    #     <%= chats_tray_item :help, label: "Help", icon: help_icon do %>…<% end %>
+    #   <% end %>
+    #
+    # Inside a `chats_dock` block it renders the items alone, so a launcher
+    # helper can always wrap itself in chats_tray and work in both places.
+    # Renders nothing when the block renders nothing.
+    def chats_tray(launcher: true, &block)
+      return capture(&block) if @chats_tray_open
+
+      items = chats_tray_items(&block)
+      chats_tray_corner(items, launcher: launcher) if items
+    end
+
+    # One item of the tray: closed, a tab on the bottom edge beside the bar
+    # (a round button on a phone); open, a panel with the dock's skin (the
+    # full-screen sheet on a phone). The block is the panel's content.
+    #
+    #   key:        its stable name ("help"): its id, its memory
+    #   label:      the closed tab's words ("Need help?")
+    #   title:      the open panel's title (HTML allowed; the label by default)
+    #   icon:       HTML for the tab and the round button
+    #   badge:      HTML: a `chats_tray_badge` and the stream that replaces it
+    #   badge_url:  a GET answering that replace, asked when the stream may
+    #               have missed one
+    #
+    # The content may carry `data-chats-tray-refresh` (its frame reloads when
+    # the badge's count moves) and a frame `data-chats-tray-home="url"` (where
+    # it goes back to rather than show a conversation the page already does).
+    def chats_tray_item(key, label:, icon: nil, title: label, badge: nil, badge_url: nil, &block)
+      render(partial: "chats/tray/item",
+             locals: { key: key, label: label, title: title, icon: icon, badge: badge, badge_url: badge_url,
+                       body: block ? capture(&block) : nil })
+    end
+
+    # An item's badge, hidden at zero: what its owner's stream replaces (by
+    # +id+) when the count moves.
+    def chats_tray_badge(count, id:)
+      render(partial: "chats/tray/badge", locals: { count: count.to_i, id: id })
     end
 
     # The data that makes ANY link to a conversation — a recent-list row, a
@@ -239,7 +310,8 @@ module Chats
     #   app/views/chats/slots/_inbox_top.html.erb
     #
     # The slots: inbox_top, inbox_empty, conversation_header_actions,
-    # composer_actions, locked_composer, message_meta, dock_panel_footer.
+    # composer_actions, locked_composer, message_meta, message_menu,
+    # dock_panel_footer.
     def chats_slot(name, **locals)
       return unless chats_slot?(name)
 
@@ -381,6 +453,28 @@ module Chats
       respond_to?(method_name) ? send(method_name) : nil
     end
 
+    # The tray block's items, or nil when it renders nothing. Captured as
+    # "inside a tray", so a chats_tray in it renders its items alone.
+    def chats_tray_items(&block)
+      return if block.nil?
+
+      outer = @chats_tray_open
+      @chats_tray_open = true
+      capture(&block).presence
+    ensure
+      @chats_tray_open = outer
+    end
+
+    # The tray in a corner of its own, remembered under the viewer's key (or
+    # "guest"): nothing without items.
+    def chats_tray_corner(items, launcher:)
+      return if items.nil?
+
+      viewer = chats_viewer
+      render(partial: "chats/tray/corner",
+             locals: { tray: items, owner: viewer ? Chats.messager_key(viewer) : "guest", launcher: launcher })
+    end
+
     # Whether this view is one of the engine's own screens.
     def chats_engine_page?
       respond_to?(:controller) && controller.is_a?(Chats::ApplicationController)

data/app/javascript/chats/dock_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 import { recoverMissedBroadcasts, renderStreamFrom } from "chats/recovery"
+import { around, fitViewport, holdInert, lockScroll, releaseInert } from "chats/sheet"
 
 // chats--dock: the messaging dock (`chats_dock`) — LinkedIn / Steam style
 // floating conversation windows in the bottom-right corner.
@@ -51,6 +52,12 @@ import { recoverMissedBroadcasts, renderStreamFrom } from "chats/recovery"
 //                  photo, an edit, the window menu, then the window
 //                  (minimized), the panel (closed); on a phone, the window
 //                  back to the list, then the list closed
+//   * the tray     the items a host puts in `chats_dock { … }` sit between
+//                  the windows and the panel (chats--tray runs them). The
+//                  windows' room is what the tray leaves (measured, so an
+//                  item opening reflows them like a narrower screen), and
+//                  one menu is open at a time: an item opening closes the
+//                  panel, the panel opening closes the item
 //
 // The element is data-turbo-permanent: Turbo Drive carries it, windows and
 // all, from page to page, and may detach and reattach it, so connect()
@@ -74,7 +81,8 @@ const LIST_DELAY_MS = 300
 
 export default class extends Controller {
   static targets = [
-    "windows", "window", "panel", "list", "badge", "signal", "announcer", "loadingShell", "failedShell", "composer"
+    "windows", "window", "panel", "list", "badge", "signal", "announcer", "loadingShell", "failedShell", "composer",
+    "tray"
   ]
   static values = {
     windows: { type: Number, default: 3 },
@@ -94,7 +102,6 @@ export default class extends Controller {
   initialize() {
     this.openers = new WeakMap()
     this.announced = {}
-    this.inerted = []
     this.closed = this.read(this.storageKey)?.closed || {}
   }
 
@@ -104,6 +111,11 @@ export default class extends Controller {
     window.addEventListener("resize", this.resized)
     window.visualViewport?.addEventListener("resize", this.fitViewport)
     window.visualViewport?.addEventListener("scroll", this.fitViewport)
+    // An item opening or closing changes the tray's width, and so the room.
+    if (this.hasTrayTarget && window.ResizeObserver) {
+      this.trayObserver = new ResizeObserver(this.resized)
+      this.trayObserver.observe(this.trayTarget)
+    }
 
     // A window always names its viewer. One that doesn't match never stays:
     // nothing of one account may surface in another's page.
@@ -125,7 +137,9 @@ export default class extends Controller {
     window.removeEventListener("resize", this.resized)
     window.visualViewport?.removeEventListener("resize", this.fitViewport)
     window.visualViewport?.removeEventListener("scroll", this.fitViewport)
+    this.trayObserver?.disconnect()
     this.releaseSheet()
+
     this.stopRecovery?.()
   }
 
@@ -388,10 +402,16 @@ export default class extends Controller {
   }
 
   // What the row may take: the viewport, less the right inset, the panel
-  // and the 8px left margin the spec keeps (the fit formula's 312px).
+  // and the 8px left margin the spec keeps (the fit formula's 312px), and
+  // the tray with its gap when it holds anything.
   get room() {
     const panel = this.panelTarget.offsetWidth || this.pixels("--chats-dock-panel-width", 288)
-    return window.innerWidth - this.pixels("--chats-dock-inset", 16) - panel - this.gap
+    return window.innerWidth - this.pixels("--chats-dock-inset", 16) - panel - this.gap - this.trayWidth
+  }
+
+  get trayWidth() {
+    const width = this.hasTrayTarget ? this.trayTarget.offsetWidth : 0
+    return width ? width + this.gap : 0
   }
 
   get gap() {
@@ -500,6 +520,7 @@ export default class extends Controller {
   }
 
   panelToggled() {
+    if (this.panelTarget.open) this.closeTray()
     if (this.panelTarget.open && this.listStale) {
       this.listStale = false
       this.listTarget.reload()
@@ -511,6 +532,25 @@ export default class extends Controller {
     this.save()
   }
 
+  // --- The tray ----------------------------------------------------------------
+  //
+  // One menu open at a time in the corner. An item of the tray opened
+  // (chats--tray dispatches `chats--tray:open`): the panel closes, and on a
+  // phone the window in front goes back, so the item's sheet is the only one.
+  // Synchronous, so the dock's sheet is released before the tray's is held.
+  trayOpened() {
+    this.panelTarget.open = false
+    if (this.compact) this.windowTargets.forEach((frame) => frame.classList.remove(FRONT))
+    this.syncSheet()
+  }
+
+  // The panel opened: whatever item of the tray was open closes.
+  closeTray() {
+    if (!this.hasTrayTarget) return
+
+    this.trayTarget.querySelectorAll(".chats-tray__item[open]").forEach((item) => { item.open = false })
+  }
+
   // A send from one of our windows: the draft is gone, the list reorders.
   sent(event) {
     if (!event.detail?.success) return
@@ -960,49 +1000,30 @@ export default class extends Controller {
     })
   }
 
-  // Full-screen on a phone means the VISIBLE viewport: with the keyboard up
-  // it is shorter than 100dvh, and the composer must sit on the keys.
-  fitViewport = () => {
-    const viewport = window.visualViewport
-    if (!viewport) return
-
-    this.element.style.setProperty("--chats-vvh", `${viewport.height}px`)
-    this.element.style.setProperty("--chats-vv-top", `${viewport.offsetTop}px`)
-    this.element.classList.toggle("chats-dock--keyboard", this.compact && window.innerHeight - viewport.height > 150)
-  }
+  // Full-screen on a phone means the VISIBLE viewport (chats/sheet).
+  fitViewport = () => fitViewport(this.element, this.compact)
 
   // On a phone, an open sheet is modal: the page behind can't scroll or
   // take the focus — and neither can the list behind a window in front of
-  // it, until Back.
+  // it, until Back. Everything on the page but the dock (chats/sheet's
+  // `around`: a host may wrap the dock in a layout element) is held inert
+  // by the dock for as long as its sheet is open; the tray's own sheet
+  // holds its share separately.
   syncSheet() {
     const front = Boolean(this.compact) && this.windowTargets.some((frame) => frame.classList.contains(FRONT))
     const open = Boolean(this.compact) && !this.element.hidden && (this.panelTarget.open || front)
     this.panelTarget.inert = open && front
-    document.documentElement.classList.toggle("chats-dock-sheet-open", open)
     if (open) {
-      if (this.inerted.length) return
-      this.inerted = this.pageAround().filter((node) => !node.inert)
-      this.inerted.forEach((node) => { node.inert = true })
+      holdInert(this, around(this.element))
+      lockScroll(this, true)
     } else {
       this.releaseSheet()
     }
   }
 
-  // Everything on the page but the dock: the siblings of the dock and of
-  // each of its ancestors, up to <body>. A host may render the dock inside
-  // a layout wrapper, and inerting the wrapper would inert the sheet too.
-  pageAround() {
-    const around = []
-    for (let node = this.element; node?.parentElement && node !== document.body; node = node.parentElement) {
-      around.push(...Array.from(node.parentElement.children).filter((sibling) => sibling !== node))
-    }
-    return around
-  }
-
   releaseSheet() {
-    this.inerted?.forEach((node) => { node.inert = false })
-    this.inerted = []
-    if (this.compact !== undefined) document.documentElement.classList.remove("chats-dock-sheet-open")
+    releaseInert(this)
+    if (this.compact !== undefined) lockScroll(this, false)
   }
 
   // --- Lookups ---------------------------------------------------------------------