From 171678f7d39702bf23efa7fe944bfbfe85c2439a Mon Sep 17 00:00:00 2001
From: Luke Policinski <luke@lukepolo.com>
Date: Tue, 29 Sep 2026 20:34:31 -0400
Subject: [PATCH] feature: chat message hover toolbar, reaction picker and
 moderation menu

---
 components/SanctionPlayer.vue                 |  29 +-
 components/chat/ChatMessage.vue               |  28 +-
 components/chat/ChatMessageActions.vue        | 410 +++++++++------
 components/chat/ChatMessageReactions.vue      | 164 ++++--
 components/chat/ChatReactionMenuStrip.vue     |  48 ++
 components/chat/ChatReactionPicker.vue        | 111 +++++
 constants/chat.ts                             |  18 +
 i18n/locales/ar_SA.json                       |   2 +
 i18n/locales/da_DK.json                       |   2 +
 i18n/locales/de_DE.json                       |   2 +
 i18n/locales/en.json                          |   2 +
 i18n/locales/es_ES.json                       |   2 +
 i18n/locales/fr_FR.json                       |   2 +
 i18n/locales/it_IT.json                       |   2 +
 i18n/locales/ja_JP.json                       |   2 +
 i18n/locales/ko_KR.json                       |   2 +
 i18n/locales/pl_PL.json                       |   2 +
 i18n/locales/pt_BR.json                       |   2 +
 i18n/locales/ru_RU.json                       |   2 +
 i18n/locales/sv_SE.json                       |   2 +
 i18n/locales/tr_TR.json                       |   2 +
 i18n/locales/uk_UA.json                       |   2 +
 i18n/locales/zh_Hans.json                     |   2 +
 i18n/locales/zh_Hant.json                     |   2 +
 tests/components/ChatLobby.spec.ts            |  17 +-
 tests/components/ChatMessage.spec.ts          |  56 ++-
 tests/components/ChatMessageActions.spec.ts   | 466 +++++++++++++-----
 tests/components/ChatMessageReactions.spec.ts |  35 ++
 tests/utilities/chatMessageActions.spec.ts    |  32 ++
 utilities/chatMessageActions.ts               |  30 ++
 30 files changed, 1141 insertions(+), 337 deletions(-)
 create mode 100644 components/chat/ChatReactionMenuStrip.vue
 create mode 100644 components/chat/ChatReactionPicker.vue

diff --git a/components/SanctionPlayer.vue b/components/SanctionPlayer.vue
index 6d4220b2..30f8c861 100644
--- a/components/SanctionPlayer.vue
+++ b/components/SanctionPlayer.vue
@@ -25,7 +25,7 @@ import SettingHeader from "~/components/match/SettingHeader.vue";
 </script>
 
 <template>
-  <Popover>
+  <Popover v-if="variant !== 'none'">
     <PopoverTrigger as-child>
       <button
         v-if="variant === 'block'"
@@ -206,13 +206,25 @@ export default {
       type: String,
       default: undefined,
     },
+    // "none" renders no trigger: the caller opens the form through `open`,
+    // for the type it names in `presetType`.
     variant: {
       required: false,
-      type: String as () => "icon" | "block",
+      type: String as () => "icon" | "block" | "none",
       default: "icon",
     },
+    open: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
+    presetType: {
+      required: false,
+      type: String,
+      default: undefined,
+    },
   },
-  emits: ["sanctioned"],
+  emits: ["sanctioned", "update:open"],
   data() {
     return {
       submitting: false,
@@ -286,6 +298,17 @@ export default {
       ];
     },
   },
+  watch: {
+    open(open: boolean) {
+      if (open) {
+        this.sanctionType = this.presetType;
+        this.sanctioningPlayer = true;
+      }
+    },
+    sanctioningPlayer(open: boolean) {
+      this.$emit("update:open", open);
+    },
+  },
   methods: {
     async sanctionPlayer() {
       if (this.submitting) {
diff --git a/components/chat/ChatMessage.vue b/components/chat/ChatMessage.vue
index 979dfafc..d2184c83 100644
--- a/components/chat/ChatMessage.vue
+++ b/components/chat/ChatMessage.vue
@@ -9,7 +9,12 @@ import FiveStackToolTip from "~/components/FiveStackToolTip.vue";
 </script>
 
 <template>
-  <div :class="rowClasses" :style="{ paddingTop: `${padTopRem}rem` }">
+  <div
+    :class="rowClasses"
+    :style="{ paddingTop: `${padTopRem}rem` }"
+    @pointerenter="hovered = $event.pointerType !== 'touch'"
+    @pointerleave="hovered = false"
+  >
     <!-- One rail down a whole run of team lines. Rows inside a run carry no
          margin, so the segments meet and read as a single stroke; a border per
          row broke into dashes the moment two people spoke in a row. -->
@@ -121,13 +126,14 @@ import FiveStackToolTip from "~/components/FiveStackToolTip.vue";
       />
     </div>
 
-    <!-- Centred on the first line rather than hung off its top: the trigger is
-         taller than a line of chat. -->
+    <!-- Floats over the top edge of the line, as the frame is taller than a
+         line of chat and would otherwise hide the text it acts on. -->
     <ChatMessageActions
       v-if="hasActions && !editing"
       ref="actions"
-      class="absolute right-0 z-10"
-      :style="{ top: `calc(${padTopRem}rem - 0.25rem)` }"
+      class="absolute right-0.5 z-10"
+      :style="{ top: `calc(${padTopRem}rem - 0.75rem)` }"
+      :hovered="hovered"
       :message="message"
       :room="room"
       :permissions="permissions"
@@ -192,6 +198,7 @@ export default {
     return {
       // Not a ticking clock: the menu refreshes it when it opens.
       permissionsCheckedAt: Date.now(),
+      hovered: false,
     };
   },
   methods: {
@@ -221,8 +228,7 @@ export default {
 
       void this.$nextTick(() => {
         const actions = this.$refs.actions as
-          | { focusTrigger?: () => void }
-          | undefined;
+          { focusTrigger?: () => void } | undefined;
 
         actions?.focusTrigger?.();
       });
@@ -325,7 +331,10 @@ export default {
       // to it, so a team line starts on the same column as every other line and
       // the avatars stay in one straight edge down the list.
       const classes = [
-        "group group/chat-message relative pl-12 text-[11px] leading-snug",
+        "group group/chat-message relative isolate pl-12 text-[11px] leading-snug",
+        // Lifts the line under the pointer, and holds it while one of its menus
+        // is open and the pointer has gone into it.
+        "before:pointer-events-none before:absolute before:-z-10 before:rounded-sm before:transition-colors before:duration-150 [@media(hover:hover)]:hover:before:bg-muted/25 has-[[data-chat-menu-open]]:before:bg-muted/40",
       ];
 
       // Room for the actions trigger kept whether or not it is showing, so a
@@ -336,12 +345,13 @@ export default {
 
       if (!this.isTeamMessage) {
         classes.push(
+          "before:inset-x-0 before:-inset-y-0.5",
           this.isSameSender && this.isCloseTogether ? "mt-1" : "mt-3",
         );
         return classes;
       }
 
-      classes.push("bg-[hsl(var(--tac-amber)/0.05)]");
+      classes.push("bg-[hsl(var(--tac-amber)/0.05)] before:inset-0");
       if (!this.reservesActions) {
         classes.push("pr-2");
       }
diff --git a/components/chat/ChatMessageActions.vue b/components/chat/ChatMessageActions.vue
index 645abaec..990616cf 100644
--- a/components/chat/ChatMessageActions.vue
+++ b/components/chat/ChatMessageActions.vue
@@ -1,17 +1,34 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from "vue";
-import { MoreVertical, Pencil, SmilePlus, Trash2 } from "lucide-vue-next";
+import { useI18n } from "vue-i18n";
+import { useMediaQuery } from "@vueuse/core";
+import {
+  Ban,
+  BellOff,
+  Copy,
+  MessageSquareOff,
+  MicOff,
+  MoreHorizontal,
+  Pencil,
+  ShieldAlert,
+  Trash2,
+  TriangleAlert,
+} from "lucide-vue-next";
+import FiveStackToolTip from "~/components/FiveStackToolTip.vue";
+import SanctionPlayer from "~/components/SanctionPlayer.vue";
+import ChatReactionMenuStrip from "~/components/chat/ChatReactionMenuStrip.vue";
+import ChatReactionPicker from "~/components/chat/ChatReactionPicker.vue";
 import { useRightSidebar } from "~/composables/useRightSidebar";
-import { CHAT_REACTIONS, type ChatReaction } from "~/constants/chat";
+import type { ChatReaction } from "~/constants/chat";
 import socket, { type ChatType, type LobbyMessage } from "~/web-sockets/Socket";
+import { toast } from "@/components/ui/toast";
 import {
   chatErrorFailed,
   toastChatError,
   type ChatError,
 } from "~/utilities/chatErrors";
 import {
-  canToggleChatReaction,
-  heldChatReactions,
+  chatReactionChoices,
   type ChatMessagePermissions,
 } from "~/utilities/chatMessageActions";
 import { tacticalFilterPillActiveClasses } from "~/utilities/tacticalClasses";
@@ -24,6 +41,9 @@ const props = defineProps<{
   permissions: ChatMessagePermissions;
   own?: boolean;
   viewerSteamId?: string | null;
+  // The pointer is over the line. Only then, or with keyboard focus in it, is
+  // the whole toolbar rendered -- one per chat, not one per line.
+  hovered?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -33,36 +53,80 @@ const emit = defineEmits<{
   react: [reaction: ChatReaction];
 }>();
 
-const triggerRef = ref<{ $el?: HTMLElement } | null>(null);
+const { t } = useI18n();
 
-defineExpose({
-  focusTrigger() {
-    triggerRef.value?.$el?.focus();
-  },
-});
+const rootRef = ref<HTMLElement | null>(null);
+const triggerRef = ref<{ $el?: HTMLElement } | null>(null);
 
 const menuOpen = ref(false);
-const confirmDelete = ref(false);
 const pickerOpen = ref(false);
-let pickerRequested = false;
+const confirmDelete = ref(false);
+const sanctionOpen = ref(false);
+const sanctionType = ref<string>();
+
+function startSanction(type: string) {
+  sanctionType.value = type;
+  sanctionOpen.value = true;
+}
+
+// Reactions live on the hover toolbar. A touch screen never gets it, so there
+// they stay in the menu -- the only way in.
+const canHover = useMediaQuery("(hover: hover)");
+
+// Mildest first, so the one a moderator reaches for most sits at the top.
+const sanctionTypes = [
+  { type: "warning", icon: TriangleAlert },
+  { type: "gag", icon: MessageSquareOff },
+  { type: "mute", icon: MicOff },
+  { type: "silence", icon: BellOff },
+  { type: "ban", icon: Ban },
+];
+
+// Keyboard focus only. Focus handed back to a trigger after a menu closed under
+// the mouse would otherwise pin the toolbar open after the pointer has gone.
+const keyboardFocused = ref(false);
+
+function onFocusIn(event: FocusEvent) {
+  keyboardFocused.value = (event.target as HTMLElement).matches(
+    ":focus-visible",
+  );
+}
+
+function onFocusOut(event: FocusEvent) {
+  if (!rootRef.value?.contains(event.relatedTarget as Node | null)) {
+    keyboardFocused.value = false;
+  }
+}
+
+const expanded = computed(
+  () =>
+    props.hovered ||
+    keyboardFocused.value ||
+    menuOpen.value ||
+    pickerOpen.value,
+);
 
 // Before the menu renders, so the row re-checks the ten minute window against
 // the clock now rather than when the line first rendered.
 function setMenuOpen(open: boolean) {
   if (open) {
-    pickerRequested = false;
-    holdRightHub("picker", pickerOpen.value);
     emit("open");
   }
 
   menuOpen.value = open;
 }
 
-// The menu and what opens from it sit over the right hub, which closes itself
-// when the pointer leaves. All count as still interacting with it. The row can
-// unmount this before a watcher sees the menu open, so only locks actually
-// taken are released.
-type HubHold = "menu" | "confirm" | "picker";
+defineExpose({
+  focusTrigger() {
+    triggerRef.value?.$el?.focus();
+  },
+});
+
+// The menu, the confirm and the sanction drawer sit over the right hub, which
+// closes itself when the pointer leaves. All count as still interacting with
+// it. The row can unmount this before a watcher sees a menu open, so only locks
+// actually taken are released. The picker holds it itself.
+type HubHold = "menu" | "confirm" | "sanction";
 
 const hubHolds = new Set<HubHold>();
 
@@ -77,76 +141,45 @@ function holdRightHub(hold: HubHold, open: boolean) {
 
 watch(menuOpen, (open) => holdRightHub("menu", open));
 watch(confirmDelete, (open) => holdRightHub("confirm", open));
-watch(pickerOpen, (open) => holdRightHub("picker", open));
+watch(sanctionOpen, (open) => holdRightHub("sanction", open));
 
 onBeforeUnmount(() => {
   holdRightHub("menu", false);
   holdRightHub("confirm", false);
-  holdRightHub("picker", false);
+  holdRightHub("sanction", false);
 });
 
-// The picker opens once the menu has finished closing. Opened any sooner, the
-// menu hands focus back to the trigger, which reads as a click outside the
-// picker and closes it again. The hub is held from the pick, since the menu's
-// exit animation outlasts the hub's hover-close delay.
-function requestPicker() {
-  pickerRequested = true;
-  holdRightHub("picker", true);
-}
-
-function menuClosedFocus(event: Event) {
-  if (!pickerRequested) {
-    return;
-  }
+const reactionChoices = computed(() =>
+  chatReactionChoices(props.message, props.viewerSteamId, props.permissions),
+);
 
-  pickerRequested = false;
-  event.preventDefault();
-  pickerOpen.value = true;
-}
+// Three on the toolbar itself; the picker has them all.
+const quickReactions = computed(() => reactionChoices.value.slice(0, 3));
 
-const heldReactions = computed(() =>
-  heldChatReactions(props.message, props.viewerSteamId),
-);
+const toolClasses =
+  "h-6 w-6 rounded-sm text-muted-foreground hover:bg-[hsl(var(--tac-amber)/0.12)] hover:text-[hsl(var(--tac-amber))] [&_svg]:size-3.5";
 
-const pickerChoices = computed(() =>
-  CHAT_REACTIONS.map(({ id, glyph }) => {
-    const mine = heldReactions.value.has(id);
-
-    return {
-      id,
-      glyph,
-      mine,
-      disabled: !canToggleChatReaction(props.permissions, mine),
-    };
-  }),
-);
+const quickReactionClasses =
+  "inline-flex h-6 w-6 items-center justify-center rounded-sm border border-transparent text-sm leading-none transition-colors duration-150 hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent motion-reduce:transition-none";
 
-function pickReaction(reaction: ChatReaction) {
-  if (!pickerOpen.value) {
+// Closed here rather than a tick later by the item, so the second click of a
+// double click can't take the reaction straight back.
+function react(reaction: ChatReaction) {
+  if (!menuOpen.value) {
     return;
   }
 
-  pickerOpen.value = false;
+  menuOpen.value = false;
   emit("react", reaction);
 }
 
-// Back to the trigger unless the picker was closed by clicking somewhere else,
-// where that click decides focus. reka's non-modal popover emits this twice,
-// and the second call must not undo the first.
-let pickerDismissedOutside = false;
-
-function pickerClosedFocus(event: Event) {
-  if (event.defaultPrevented) {
-    return;
-  }
-
-  event.preventDefault();
-
-  if (!pickerDismissedOutside) {
-    triggerRef.value?.$el?.focus();
+async function copyMessage() {
+  try {
+    await navigator.clipboard.writeText(props.message.message);
+    toast({ title: t("pages.toasts.copied_to_clipboard") });
+  } catch {
+    toast({ title: t("toasts.copy_failed"), variant: "destructive" });
   }
-
-  pickerDismissedOutside = false;
 }
 
 async function deleteMessage() {
@@ -179,99 +212,164 @@ async function deleteMessage() {
 
 <template>
   <div
-    class="opacity-0 transition-opacity duration-150 focus-within:opacity-100 group-hover/chat-message:opacity-100 has-[[data-state=open]]:opacity-100 motion-reduce:transition-none [@media(hover:none)]:opacity-100"
+    ref="rootRef"
+    class="transition-opacity motion-reduce:transition-none"
+    :class="
+      expanded
+        ? 'opacity-100 duration-150 ease-out'
+        : 'opacity-0 duration-100 ease-in [@media(hover:none)]:opacity-100'
+    "
+    :data-chat-menu-open="menuOpen || pickerOpen ? '' : undefined"
+    @focusin="onFocusIn"
+    @focusout="onFocusOut"
   >
-    <!-- The picker hangs off the trigger without being opened by it: the
-         trigger already belongs to the menu. -->
-    <Popover v-model:open="pickerOpen">
-      <PopoverAnchor as-child>
-        <span class="inline-flex" :data-state="pickerOpen ? 'open' : 'closed'">
-          <DropdownMenu
-            :open="menuOpen"
-            :modal="false"
-            @update:open="setMenuOpen"
+    <!-- Fades as one piece at its full size: the buttons stay mounted until the
+         fade out has finished, so the frame never visibly shrinks. The frame is
+         dropped where nothing hovers: a touch screen only ever gets the bare
+         menu trigger, on every line, as before. -->
+    <div
+      class="flex items-center gap-px rounded-md border border-border bg-popover p-0.5 shadow-md [@media(hover:none)]:translate-y-1 [@media(hover:none)]:border-transparent [@media(hover:none)]:bg-transparent [@media(hover:none)]:shadow-none"
+    >
+      <Transition
+        leave-active-class="transition-opacity duration-100 ease-in motion-reduce:transition-none"
+        leave-to-class="opacity-0"
+      >
+        <div v-if="expanded" class="flex items-center gap-px">
+          <template v-if="permissions.canReact">
+            <button
+              v-for="choice in quickReactions"
+              :key="choice.id"
+              type="button"
+              :class="[
+                quickReactionClasses,
+                choice.mine ? tacticalFilterPillActiveClasses : '',
+              ]"
+              :aria-pressed="choice.mine"
+              :aria-label="$t('chat.react_with', { emoji: choice.glyph })"
+              :disabled="choice.disabled"
+              :data-quick-reaction="choice.id"
+              @click="emit('react', choice.id)"
+            >
+              <span aria-hidden="true">{{ choice.glyph }}</span>
+            </button>
+            <span aria-hidden="true" class="mx-0.5 h-4 w-px bg-border"></span>
+            <ChatReactionPicker
+              v-model:open="pickerOpen"
+              :choices="reactionChoices"
+              :gagged="!permissions.canAddReaction"
+              :trigger-class="toolClasses"
+              @react="emit('react', $event)"
+            />
+          </template>
+          <FiveStackToolTip
+            v-if="permissions.canEdit"
+            as-child
+            side="top"
+            :delay-duration="120"
+            :tap-toggle="false"
           >
-            <DropdownMenuTrigger as-child>
+            <template #trigger>
               <Button
-                ref="triggerRef"
                 variant="ghost"
                 size="icon"
-                class="h-6 w-6 text-muted-foreground hover:bg-[hsl(var(--tac-amber)/0.12)] hover:text-[hsl(var(--tac-amber))] [&_svg]:size-3.5"
-                :aria-label="$t('chat.message_actions')"
-              >
-                <MoreVertical />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              align="end"
-              class="w-48"
-              data-right-hub-interactive
-              @close-auto-focus="menuClosedFocus"
-            >
-              <DropdownMenuItem
-                v-if="permissions.canReact"
-                @select="requestPicker"
-              >
-                <SmilePlus />
-                <span>{{ $t("chat.add_reaction") }}</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                v-if="permissions.canEdit"
-                @select="emit('edit')"
+                :class="toolClasses"
+                :aria-label="$t('chat.edit_message')"
+                @click="emit('edit')"
               >
                 <Pencil />
-                <span>{{ $t("chat.edit_message") }}</span>
-              </DropdownMenuItem>
-              <DropdownMenuSeparator
-                v-if="
-                  (permissions.canReact || permissions.canEdit) &&
-                  permissions.canDelete
-                "
-              />
-              <DropdownMenuItem
-                v-if="permissions.canDelete"
-                class="text-destructive focus:text-destructive"
-                @select="confirmDelete = true"
-              >
-                <Trash2 />
-                <span>{{ $t("chat.delete_message") }}</span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </span>
-      </PopoverAnchor>
-      <PopoverContent
-        align="end"
-        class="w-auto p-1"
-        :aria-label="$t('chat.react')"
-        data-right-hub-interactive
-        @interact-outside="pickerDismissedOutside = true"
-        @close-auto-focus="pickerClosedFocus"
-      >
-        <div class="grid grid-cols-6 gap-0.5">
-          <button
-            v-for="choice in pickerChoices"
-            :key="choice.id"
-            type="button"
-            class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-transparent text-base leading-none transition-colors duration-150 hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent motion-reduce:transition-none"
-            :class="choice.mine ? tacticalFilterPillActiveClasses : ''"
-            :aria-pressed="choice.mine"
-            :aria-label="$t('chat.react_with', { emoji: choice.glyph })"
-            :disabled="choice.disabled"
-            :data-reaction="choice.id"
-            @click="pickReaction(choice.id)"
-          >
-            {{ choice.glyph }}
-          </button>
+              </Button>
+            </template>
+            {{ $t("chat.edit_message") }}
+          </FiveStackToolTip>
         </div>
-        <p
-          v-if="!permissions.canAddReaction"
-          class="mt-1 max-w-[13rem] px-1 pb-0.5 text-[10px] leading-snug text-muted-foreground"
+      </Transition>
+
+      <DropdownMenu :open="menuOpen" :modal="false" @update:open="setMenuOpen">
+        <DropdownMenuTrigger as-child>
+          <Button
+            ref="triggerRef"
+            variant="ghost"
+            size="icon"
+            :class="toolClasses"
+            :aria-label="$t('chat.message_actions')"
+          >
+            <MoreHorizontal />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="end"
+          :collision-padding="8"
+          class="w-48"
+          data-right-hub-interactive
         >
-          {{ $t("chat.react_gagged") }}
-        </p>
-      </PopoverContent>
-    </Popover>
+          <template v-if="permissions.canReact && !canHover">
+            <ChatReactionMenuStrip
+              :choices="reactionChoices"
+              :gagged="!permissions.canAddReaction"
+              @react="react"
+            />
+            <DropdownMenuSeparator />
+          </template>
+          <DropdownMenuItem @select="copyMessage">
+            <Copy />
+            <span>{{ $t("chat.copy_message") }}</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem v-if="permissions.canEdit" @select="emit('edit')">
+            <Pencil />
+            <span>{{ $t("chat.edit_message") }}</span>
+          </DropdownMenuItem>
+          <template v-if="permissions.canSanction || permissions.canDelete">
+            <DropdownMenuSeparator />
+            <DropdownMenuSub v-if="permissions.canSanction">
+              <DropdownMenuSubTrigger>
+                <ShieldAlert class="size-4 shrink-0" />
+                <span class="truncate">
+                  {{
+                    $t("chat.moderate_player", {
+                      name: message.from?.name || $t("common.unknown"),
+                    })
+                  }}
+                </span>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent class="w-40">
+                <DropdownMenuItem
+                  v-for="sanction in sanctionTypes"
+                  :key="sanction.type"
+                  :class="
+                    sanction.type === 'ban'
+                      ? 'text-destructive focus:text-destructive'
+                      : ''
+                  "
+                  :data-sanction="sanction.type"
+                  @select="startSanction(sanction.type)"
+                >
+                  <component :is="sanction.icon" />
+                  <span>
+                    {{ $t(`player.sanctions.type_labels.${sanction.type}`) }}
+                  </span>
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+            <DropdownMenuItem
+              v-if="permissions.canDelete"
+              class="text-destructive focus:text-destructive"
+              @select="confirmDelete = true"
+            >
+              <Trash2 />
+              <span>{{ $t("chat.delete_message") }}</span>
+            </DropdownMenuItem>
+          </template>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+
+    <SanctionPlayer
+      v-if="permissions.canSanction && message.from"
+      v-model:open="sanctionOpen"
+      variant="none"
+      :preset-type="sanctionType"
+      :player="message.from"
+    />
 
     <AlertDialog v-model:open="confirmDelete">
       <AlertDialogContent data-right-hub-interactive>
diff --git a/components/chat/ChatMessageReactions.vue b/components/chat/ChatMessageReactions.vue
index 4b6eace1..2e3b6daf 100644
--- a/components/chat/ChatMessageReactions.vue
+++ b/components/chat/ChatMessageReactions.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import FiveStackToolTip from "~/components/FiveStackToolTip.vue";
+import ChatReactionPicker from "~/components/chat/ChatReactionPicker.vue";
+import { Fold } from "~/components/ui/transitions";
 import { CHAT_REACTIONS, type ChatReaction } from "~/constants/chat";
 import { useMatchLobbyStore } from "~/stores/MatchLobbyStore";
 import { dateLocale } from "~/utilities/dateLocale";
 import {
   canToggleChatReaction,
+  chatReactionChoices,
   heldChatReactions,
   type ChatMessagePermissions,
 } from "~/utilities/chatMessageActions";
@@ -29,7 +32,15 @@ const { t } = useI18n();
 const NAMES_SHOWN = 8;
 
 const pillClasses =
-  "inline-flex h-5 items-center gap-1 rounded-full border border-border bg-muted/30 px-1.5 text-[10px] leading-none tabular-nums text-muted-foreground transition-colors duration-150 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring motion-reduce:transition-none";
+  "inline-flex h-6 items-center gap-1.5 rounded-md border border-border/70 bg-muted/30 pl-1.5 pr-2 text-[11px] font-semibold leading-none tabular-nums text-muted-foreground transition-colors duration-150 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring motion-reduce:transition-none";
+
+const pickerOpen = ref(false);
+
+const canAdd = computed(() => !!props.room && props.permissions.canReact);
+
+const reactionChoices = computed(() =>
+  chatReactionChoices(props.message, props.viewerSteamId, props.permissions),
+);
 
 const heldStaticClasses = tacticalFilterPillActiveClasses
   .split(" ")
@@ -108,11 +119,7 @@ function reactorName(steamId: string) {
   return undefined;
 }
 
-function reactedBy(pill: {
-  glyph: string;
-  steamIds: string[];
-  mine: boolean;
-}) {
+function reactedBy(pill: { glyph: string; steamIds: string[]; mine: boolean }) {
   const viewer = String(props.viewerSteamId);
   const steamIds = pill.steamIds.map(String);
   const ordered = pill.mine
@@ -153,35 +160,116 @@ function reactedBy(pill: {
 </script>
 
 <template>
-  <div v-if="pills.length" class="mt-1 flex flex-wrap gap-1">
-    <FiveStackToolTip
-      v-for="pill in pills"
-      :key="pill.id"
-      as-child
-      :delay-duration="120"
-      side="top"
-      :tap-toggle="!pill.interactive"
-    >
-      <template #trigger>
-        <button
-          type="button"
-          :class="[pillClasses, pillTone(pill)]"
-          :aria-pressed="pill.mine"
-          :aria-disabled="pill.interactive ? undefined : 'true'"
-          :aria-label="
-            t('chat.react_with_count', {
-              emoji: pill.glyph,
-              count: pill.steamIds.length,
-            })
-          "
-          :data-reaction="pill.id"
-          @click="toggle(pill)"
-        >
-          <span class="text-[11px]" aria-hidden="true">{{ pill.glyph }}</span>
-          <span aria-hidden="true">{{ pill.steamIds.length }}</span>
-        </button>
-      </template>
-      {{ reactedBy(pill) }}
-    </FiveStackToolTip>
-  </div>
+  <!-- The row folds open with its first reaction and shut with its last, the
+       dying pill carried by the frozen subtree rather than snapping away. -->
+  <Fold :open="pills.length > 0">
+    <div class="-m-0.5 flex flex-wrap items-center pt-1">
+      <TransitionGroup
+        tag="div"
+        class="contents"
+        enter-active-class="pill-anim"
+        enter-from-class="pill-collapsed"
+        leave-active-class="pill-anim pill-leave"
+        leave-to-class="pill-collapsed"
+      >
+        <!-- A bare cell whose column folds, so the pills beside it slide over
+             rather than jump. Its spacing rides inside the clip. -->
+        <div v-for="pill in pills" :key="pill.id" class="grid grid-cols-[1fr]">
+          <div class="pill-cell min-w-0">
+            <div class="p-0.5">
+              <FiveStackToolTip
+                as-child
+                :delay-duration="120"
+                side="top"
+                :tap-toggle="!pill.interactive"
+              >
+                <template #trigger>
+                  <button
+                    type="button"
+                    :class="[pillClasses, pillTone(pill)]"
+                    :aria-pressed="pill.mine"
+                    :aria-disabled="pill.interactive ? undefined : 'true'"
+                    :aria-label="
+                      t('chat.react_with_count', {
+                        emoji: pill.glyph,
+                        count: pill.steamIds.length,
+                      })
+                    "
+                    :data-reaction="pill.id"
+                    @click="toggle(pill)"
+                  >
+                    <span class="text-sm leading-none" aria-hidden="true">
+                      {{ pill.glyph }}
+                    </span>
+                    <!-- The count rolls rather than blinks when it changes. -->
+                    <span
+                      class="inline-grid overflow-hidden"
+                      aria-hidden="true"
+                    >
+                      <Transition
+                        enter-from-class="translate-y-full opacity-0"
+                        enter-active-class="transition-[transform,opacity] duration-200 ease-out motion-reduce:transition-none"
+                        leave-active-class="transition-[transform,opacity] duration-150 ease-in motion-reduce:transition-none"
+                        leave-to-class="-translate-y-full opacity-0"
+                      >
+                        <span
+                          :key="pill.steamIds.length"
+                          class="[grid-area:1/1]"
+                        >
+                          {{ pill.steamIds.length }}
+                        </span>
+                      </Transition>
+                    </span>
+                  </button>
+                </template>
+                {{ reactedBy(pill) }}
+              </FiveStackToolTip>
+            </div>
+          </div>
+        </div>
+      </TransitionGroup>
+      <!-- Always holds its place at the end, so showing it on hover moves
+           nothing. A touch screen reacts from the line's menu instead. -->
+      <div
+        v-if="canAdd"
+        class="p-0.5 opacity-0 transition-opacity duration-150 focus-within:opacity-100 group-hover/chat-message:opacity-100 has-[[aria-expanded=true]]:opacity-100 motion-reduce:transition-none [@media(hover:none)]:hidden"
+      >
+        <ChatReactionPicker
+          v-model:open="pickerOpen"
+          :choices="reactionChoices"
+          :gagged="!permissions.canAddReaction"
+          trigger-class="h-6 w-7 rounded-md border border-transparent bg-muted/30 text-muted-foreground hover:bg-muted/60 hover:text-foreground [&_svg]:size-3.5"
+          @react="emit('toggle', $event)"
+        />
+      </div>
+    </div>
+  </Fold>
 </template>
+
+<style scoped>
+.pill-anim {
+  transition:
+    grid-template-columns 0.24s cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 0.18s ease,
+    transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: left center;
+}
+.pill-leave {
+  transition-duration: 0.11s;
+  transition-timing-function: ease-in;
+}
+/* Clipped only while animating, so focus rings survive at rest. */
+.pill-anim > .pill-cell {
+  overflow: hidden;
+}
+.pill-collapsed {
+  grid-template-columns: 0fr;
+  opacity: 0;
+  transform: scale(0.6);
+}
+@media (prefers-reduced-motion: reduce) {
+  .pill-anim {
+    transition-duration: 1ms;
+  }
+}
+</style>
diff --git a/components/chat/ChatReactionMenuStrip.vue b/components/chat/ChatReactionMenuStrip.vue
new file mode 100644
index 00000000..d237a69c
--- /dev/null
+++ b/components/chat/ChatReactionMenuStrip.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { DropdownMenuCheckboxItem as ReactionItem } from "reka-ui";
+import type { ChatReaction } from "~/constants/chat";
+import { tacticalFilterPillActiveClasses } from "~/utilities/tacticalClasses";
+
+// Every reaction as one row of menu items, for any menu that offers them.
+defineProps<{
+  choices: {
+    id: ChatReaction;
+    glyph: string;
+    mine: boolean;
+    disabled: boolean;
+  }[];
+  gagged: boolean;
+}>();
+
+const emit = defineEmits<{
+  react: [reaction: ChatReaction];
+}>();
+</script>
+
+<template>
+  <div
+    role="group"
+    :aria-label="$t('chat.react')"
+    class="grid grid-cols-6 gap-0.5"
+  >
+    <ReactionItem
+      v-for="choice in choices"
+      :key="choice.id"
+      :model-value="choice.mine"
+      :disabled="choice.disabled"
+      :aria-label="$t('chat.react_with', { emoji: choice.glyph })"
+      :data-reaction="choice.id"
+      class="flex h-8 min-w-8 cursor-pointer select-none items-center justify-center rounded-sm border border-transparent text-base leading-none outline-none transition-colors duration-150 focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-40 motion-reduce:transition-none"
+      :class="choice.mine ? tacticalFilterPillActiveClasses : ''"
+      @select="emit('react', choice.id)"
+    >
+      <span aria-hidden="true">{{ choice.glyph }}</span>
+    </ReactionItem>
+  </div>
+  <p
+    v-if="gagged"
+    class="max-w-[13rem] px-1.5 pb-0.5 pt-1.5 text-[10px] leading-snug text-muted-foreground"
+  >
+    {{ $t("chat.react_gagged") }}
+  </p>
+</template>
diff --git a/components/chat/ChatReactionPicker.vue b/components/chat/ChatReactionPicker.vue
new file mode 100644
index 00000000..5fee8b48
--- /dev/null
+++ b/components/chat/ChatReactionPicker.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { SmilePlus } from "lucide-vue-next";
+import FiveStackToolTip from "~/components/FiveStackToolTip.vue";
+import ChatReactionMenuStrip from "~/components/chat/ChatReactionMenuStrip.vue";
+import { useRightSidebar } from "~/composables/useRightSidebar";
+import type { ChatReaction } from "~/constants/chat";
+
+// Every reaction, from a smiley button.
+const props = defineProps<{
+  choices: {
+    id: ChatReaction;
+    glyph: string;
+    mine: boolean;
+    disabled: boolean;
+  }[];
+  gagged: boolean;
+  triggerClass?: string;
+}>();
+
+const emit = defineEmits<{
+  react: [reaction: ChatReaction];
+}>();
+
+const open = defineModel<boolean>("open", { default: false });
+
+// reka's tooltip and menu share one popper context, so the menu trigger inside
+// the tooltip hands its anchor to the tooltip. Unanchored, the menu opens but
+// never positions and stays off screen -- so it is given the button outright.
+const triggerRef = ref<{ $el?: HTMLElement } | null>(null);
+const reference = computed(() => triggerRef.value?.$el);
+
+// The picker sits over the right hub, which closes itself when the pointer
+// leaves.
+let holding = false;
+
+// Set on the first pick. The model only reads false once the parent has
+// re-rendered, which is after the second click of a double click.
+let picked = false;
+
+watch(open, (value) => {
+  if (value) {
+    picked = false;
+  }
+
+  if (value && !holding) {
+    holding = true;
+    useRightSidebar().suspendHoverClose();
+  } else if (!value && holding) {
+    holding = false;
+    useRightSidebar().resumeHoverClose();
+  }
+});
+
+onBeforeUnmount(() => {
+  if (holding) {
+    useRightSidebar().resumeHoverClose();
+  }
+});
+
+// Closed here rather than a tick later by the item, so the second click of a
+// double click can't take the reaction straight back.
+function react(reaction: ChatReaction) {
+  if (!open.value || picked) {
+    return;
+  }
+
+  picked = true;
+  open.value = false;
+  emit("react", reaction);
+}
+</script>
+
+<template>
+  <DropdownMenu v-model:open="open" :modal="false">
+    <FiveStackToolTip
+      as-child
+      side="top"
+      :delay-duration="120"
+      :tap-toggle="false"
+    >
+      <template #trigger>
+        <DropdownMenuTrigger as-child>
+          <Button
+            ref="triggerRef"
+            variant="ghost"
+            size="icon"
+            :class="props.triggerClass"
+            :aria-label="$t('chat.add_reaction')"
+          >
+            <SmilePlus />
+          </Button>
+        </DropdownMenuTrigger>
+      </template>
+      {{ $t("chat.add_reaction") }}
+    </FiveStackToolTip>
+    <DropdownMenuContent
+      :reference="reference"
+      align="end"
+      :collision-padding="8"
+      class="p-1"
+      data-right-hub-interactive
+    >
+      <ChatReactionMenuStrip
+        :choices="choices"
+        :gagged="gagged"
+        @react="react"
+      />
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/constants/chat.ts b/constants/chat.ts
index 6296e9b8..683cffe9 100644
--- a/constants/chat.ts
+++ b/constants/chat.ts
@@ -13,6 +13,24 @@ export const CHAT_REACTIONS = [
   { id: "fire", glyph: "🔥" },
   { id: "wow", glyph: "😮" },
   { id: "sad", glyph: "😢" },
+  { id: "thumbsdown", glyph: "👎" },
+  { id: "skull", glyph: "💀" },
+  { id: "sob", glyph: "😭" },
+  { id: "rofl", glyph: "🤣" },
+  { id: "angry", glyph: "😡" },
+  { id: "thinking", glyph: "🤔" },
+  { id: "eyes", glyph: "👀" },
+  { id: "hundred", glyph: "💯" },
+  { id: "target", glyph: "🎯" },
+  { id: "clap", glyph: "👏" },
+  { id: "pray", glyph: "🙏" },
+  { id: "handshake", glyph: "🤝" },
+  { id: "tada", glyph: "🎉" },
+  { id: "cool", glyph: "😎" },
+  { id: "salute", glyph: "🫡" },
+  { id: "muscle", glyph: "💪" },
+  { id: "goat", glyph: "🐐" },
+  { id: "clown", glyph: "🤡" },
 ] as const;
 
 export type ChatReaction = (typeof CHAT_REACTIONS)[number]["id"];
diff --git a/i18n/locales/ar_SA.json b/i18n/locales/ar_SA.json
index bc19a35a..2d0baeba 100644
--- a/i18n/locales/ar_SA.json
+++ b/i18n/locales/ar_SA.json
@@ -8477,6 +8477,8 @@
     "send_failed": "تعذّر إرسال رسالتك",
     "gagged": "أنت ممنوع من الكتابة ولا يمكنك إرسال رسائل في الدردشة.",
     "message_actions": "إجراءات الرسالة",
+    "copy_message": "نسخ النص",
+    "moderate_player": "إدارة {name}",
     "delete_message": "حذف الرسالة",
     "delete_confirm_title": "حذف الرسالة؟",
     "delete_confirm_description": "ستُزال رسالة {name} لدى جميع من في هذه الدردشة.",
diff --git a/i18n/locales/da_DK.json b/i18n/locales/da_DK.json
index 8bea0596..16acf363 100644
--- a/i18n/locales/da_DK.json
+++ b/i18n/locales/da_DK.json
@@ -8477,6 +8477,8 @@
     "send_failed": "Din besked kunne ikke sendes",
     "gagged": "Din chat er lukket, så du kan ikke sende chatbeskeder.",
     "message_actions": "Beskedhandlinger",
+    "copy_message": "Kopiér tekst",
+    "moderate_player": "Moderér {name}",
     "delete_message": "Slet besked",
     "delete_confirm_title": "Slet besked?",
     "delete_confirm_description": "Beskeden fra {name} bliver fjernet for alle i denne chat.",
diff --git a/i18n/locales/de_DE.json b/i18n/locales/de_DE.json
index 8e42737c..fef7a575 100644
--- a/i18n/locales/de_DE.json
+++ b/i18n/locales/de_DE.json
@@ -8477,6 +8477,8 @@
     "send_failed": "Deine Nachricht konnte nicht gesendet werden",
     "gagged": "Du bist im Chat gesperrt und kannst keine Nachrichten senden.",
     "message_actions": "Nachrichtenaktionen",
+    "copy_message": "Text kopieren",
+    "moderate_player": "{name} moderieren",
     "delete_message": "Nachricht löschen",
     "delete_confirm_title": "Nachricht löschen?",
     "delete_confirm_description": "Die Nachricht von {name} wird für alle in diesem Chat entfernt.",
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index fe228123..c23e6123 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -8477,6 +8477,8 @@
     "send_failed": "Failed to send message",
     "gagged": "You're gagged and can't send chat messages.",
     "message_actions": "Message actions",
+    "copy_message": "Copy Text",
+    "moderate_player": "Moderate {name}",
     "delete_message": "Delete Message",
     "delete_confirm_title": "Delete Message?",
     "delete_confirm_description": "The message from {name} will be removed for everyone in this chat.",
diff --git a/i18n/locales/es_ES.json b/i18n/locales/es_ES.json
index 636854fe..87cb09c9 100644
--- a/i18n/locales/es_ES.json
+++ b/i18n/locales/es_ES.json
@@ -8477,6 +8477,8 @@
     "send_failed": "No se ha podido enviar tu mensaje",
     "gagged": "Estás silenciado en el chat y no puedes enviar mensajes.",
     "message_actions": "Acciones del mensaje",
+    "copy_message": "Copiar texto",
+    "moderate_player": "Moderar a {name}",
     "delete_message": "Eliminar mensaje",
     "delete_confirm_title": "¿Eliminar mensaje?",
     "delete_confirm_description": "El mensaje de {name} se eliminará para todos en este chat.",
diff --git a/i18n/locales/fr_FR.json b/i18n/locales/fr_FR.json
index a54c5888..47c22fd4 100644
--- a/i18n/locales/fr_FR.json
+++ b/i18n/locales/fr_FR.json
@@ -8477,6 +8477,8 @@
     "send_failed": "Votre message n'a pas pu être envoyé",
     "gagged": "Vous êtes bâillonné et ne pouvez pas envoyer de messages dans le chat.",
     "message_actions": "Actions du message",
+    "copy_message": "Copier le texte",
+    "moderate_player": "Modérer {name}",
     "delete_message": "Supprimer le message",
     "delete_confirm_title": "Supprimer le message ?",
     "delete_confirm_description": "Le message de {name} sera supprimé pour tous les participants de ce chat.",
diff --git a/i18n/locales/it_IT.json b/i18n/locales/it_IT.json
index 2c45bb2f..d3ce18fa 100644
--- a/i18n/locales/it_IT.json
+++ b/i18n/locales/it_IT.json
@@ -8477,6 +8477,8 @@
     "send_failed": "Non è stato possibile inviare il tuo messaggio",
     "gagged": "Sei silenziato in chat e non puoi inviare messaggi.",
     "message_actions": "Azioni messaggio",
+    "copy_message": "Copia testo",
+    "moderate_player": "Modera {name}",
     "delete_message": "Elimina messaggio",
     "delete_confirm_title": "Eliminare il messaggio?",
     "delete_confirm_description": "Il messaggio di {name} verrà rimosso per tutti i partecipanti a questa chat.",
diff --git a/i18n/locales/ja_JP.json b/i18n/locales/ja_JP.json
index 5b4ab222..26b74323 100644
--- a/i18n/locales/ja_JP.json
+++ b/i18n/locales/ja_JP.json
@@ -8477,6 +8477,8 @@
     "send_failed": "メッセージを送信できませんでした",
     "gagged": "発言禁止中のため、チャットメッセージを送信できません。",
     "message_actions": "メッセージの操作",
+    "copy_message": "テキストをコピー",
+    "moderate_player": "{name}をモデレート",
     "delete_message": "メッセージを削除",
     "delete_confirm_title": "メッセージを削除しますか？",
     "delete_confirm_description": "{name} のメッセージは、このチャットの全員に対して削除されます。",
diff --git a/i18n/locales/ko_KR.json b/i18n/locales/ko_KR.json
index 53f10fcf..50e6f7a3 100644
--- a/i18n/locales/ko_KR.json
+++ b/i18n/locales/ko_KR.json
@@ -8477,6 +8477,8 @@
     "send_failed": "메시지를 보내지 못했습니다",
     "gagged": "채팅이 금지되어 메시지를 보낼 수 없습니다.",
     "message_actions": "메시지 작업",
+    "copy_message": "텍스트 복사",
+    "moderate_player": "{name} 관리",
     "delete_message": "메시지 삭제",
     "delete_confirm_title": "메시지를 삭제할까요?",
     "delete_confirm_description": "{name}님의 메시지가 이 채팅의 모든 사람에게서 삭제됩니다.",
diff --git a/i18n/locales/pl_PL.json b/i18n/locales/pl_PL.json
index b4be4a49..07062d4b 100644
--- a/i18n/locales/pl_PL.json
+++ b/i18n/locales/pl_PL.json
@@ -8477,6 +8477,8 @@
     "send_failed": "Nie udało się wysłać wiadomości",
     "gagged": "Masz zablokowany czat i nie możesz wysyłać wiadomości.",
     "message_actions": "Akcje wiadomości",
+    "copy_message": "Kopiuj tekst",
+    "moderate_player": "Moderuj {name}",
     "delete_message": "Usuń wiadomość",
     "delete_confirm_title": "Usunąć wiadomość?",
     "delete_confirm_description": "Wiadomość od {name} zostanie usunięta dla wszystkich na tym czacie.",
diff --git a/i18n/locales/pt_BR.json b/i18n/locales/pt_BR.json
index ac4b6af3..0dd73dff 100644
--- a/i18n/locales/pt_BR.json
+++ b/i18n/locales/pt_BR.json
@@ -8477,6 +8477,8 @@
     "send_failed": "Não foi possível enviar sua mensagem",
     "gagged": "Você está censurado no chat e não pode enviar mensagens.",
     "message_actions": "Ações da mensagem",
+    "copy_message": "Copiar Texto",
+    "moderate_player": "Moderar {name}",
     "delete_message": "Excluir Mensagem",
     "delete_confirm_title": "Excluir Mensagem?",
     "delete_confirm_description": "A mensagem de {name} será removida para todos neste chat.",
diff --git a/i18n/locales/ru_RU.json b/i18n/locales/ru_RU.json
index c6608ce7..bae7b378 100644
--- a/i18n/locales/ru_RU.json
+++ b/i18n/locales/ru_RU.json
@@ -8477,6 +8477,8 @@
     "send_failed": "Не удалось отправить сообщение",
     "gagged": "Вам отключили чат, и вы не можете отправлять сообщения.",
     "message_actions": "Действия с сообщением",
+    "copy_message": "Копировать текст",
+    "moderate_player": "Модерировать {name}",
     "delete_message": "Удалить сообщение",
     "delete_confirm_title": "Удалить сообщение?",
     "delete_confirm_description": "Сообщение от {name} будет удалено у всех участников этого чата.",
diff --git a/i18n/locales/sv_SE.json b/i18n/locales/sv_SE.json
index 392eaab5..b546715e 100644
--- a/i18n/locales/sv_SE.json
+++ b/i18n/locales/sv_SE.json
@@ -8477,6 +8477,8 @@
     "send_failed": "Ditt meddelande kunde inte skickas",
     "gagged": "Din chatt är avstängd och du kan inte skicka chattmeddelanden.",
     "message_actions": "Meddelandeåtgärder",
+    "copy_message": "Kopiera text",
+    "moderate_player": "Moderera {name}",
     "delete_message": "Ta bort meddelande",
     "delete_confirm_title": "Ta bort meddelande?",
     "delete_confirm_description": "Meddelandet från {name} tas bort för alla i den här chatten.",
diff --git a/i18n/locales/tr_TR.json b/i18n/locales/tr_TR.json
index 3affbfcb..79f00018 100644
--- a/i18n/locales/tr_TR.json
+++ b/i18n/locales/tr_TR.json
@@ -8477,6 +8477,8 @@
     "send_failed": "Mesajın gönderilemedi",
     "gagged": "Sohbetin kapatıldı, sohbet mesajı gönderemezsin.",
     "message_actions": "Mesaj işlemleri",
+    "copy_message": "Metni kopyala",
+    "moderate_player": "{name} kullanıcısını denetle",
     "delete_message": "Mesajı sil",
     "delete_confirm_title": "Mesaj silinsin mi?",
     "delete_confirm_description": "{name} adlı oyuncunun mesajı bu sohbetteki herkes için kaldırılacak.",
diff --git a/i18n/locales/uk_UA.json b/i18n/locales/uk_UA.json
index c6c3c601..a55647dd 100644
--- a/i18n/locales/uk_UA.json
+++ b/i18n/locales/uk_UA.json
@@ -8477,6 +8477,8 @@
     "send_failed": "Не вдалося надіслати повідомлення",
     "gagged": "Вам вимкнули чат, тож ви не можете надсилати повідомлення.",
     "message_actions": "Дії з повідомленням",
+    "copy_message": "Копіювати текст",
+    "moderate_player": "Модерувати {name}",
     "delete_message": "Видалити повідомлення",
     "delete_confirm_title": "Видалити повідомлення?",
     "delete_confirm_description": "Повідомлення від {name} буде видалено для всіх учасників цього чату.",
diff --git a/i18n/locales/zh_Hans.json b/i18n/locales/zh_Hans.json
index fd703915..85452860 100644
--- a/i18n/locales/zh_Hans.json
+++ b/i18n/locales/zh_Hans.json
@@ -8477,6 +8477,8 @@
     "send_failed": "消息发送失败",
     "gagged": "你已被禁言，无法发送聊天消息。",
     "message_actions": "消息操作",
+    "copy_message": "复制文本",
+    "moderate_player": "管理 {name}",
     "delete_message": "删除消息",
     "delete_confirm_title": "要删除消息吗？",
     "delete_confirm_description": "{name} 的这条消息将对本聊天中的所有人移除。",
diff --git a/i18n/locales/zh_Hant.json b/i18n/locales/zh_Hant.json
index a1a258d1..7a5b9457 100644
--- a/i18n/locales/zh_Hant.json
+++ b/i18n/locales/zh_Hant.json
@@ -8477,6 +8477,8 @@
     "send_failed": "訊息傳送失敗",
     "gagged": "你已被禁言，無法傳送聊天訊息。",
     "message_actions": "訊息操作",
+    "copy_message": "複製文字",
+    "moderate_player": "管理 {name}",
     "delete_message": "刪除訊息",
     "delete_confirm_title": "要刪除訊息嗎？",
     "delete_confirm_description": "{name} 的這則訊息將對此聊天中的所有人移除。",
diff --git a/tests/components/ChatLobby.spec.ts b/tests/components/ChatLobby.spec.ts
index 691976d8..77b812d5 100644
--- a/tests/components/ChatLobby.spec.ts
+++ b/tests/components/ChatLobby.spec.ts
@@ -136,8 +136,10 @@ describe("ChatLobby moderation", () => {
     await flushPromises();
 
     return Array.from(
-      document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
-    ).map((item) => item.textContent?.trim());
+      document.body.querySelectorAll<HTMLElement>(
+        '[role="menu"] [role="group"], [role="menuitem"]',
+      ),
+    ).map((item) => item.getAttribute("aria-label") ?? item.textContent?.trim());
   }
 
   it("offers a moderator no delete in a direct conversation", async () => {
@@ -148,7 +150,7 @@ describe("ChatLobby moderation", () => {
     ]);
 
     expect(wrapper.text()).toContain("line a");
-    expect(await menuItems(wrapper)).toEqual(["Add Reaction"]);
+    expect(await menuItems(wrapper)).toEqual(["Copy Text"]);
   });
 
   it("offers a streamer a reaction and nothing else", async () => {
@@ -158,7 +160,14 @@ describe("ChatLobby moderation", () => {
       line("a", 0),
     ]);
 
-    expect(await menuItems(wrapper)).toEqual(["Add Reaction"]);
+    wrapper
+      .get(TRIGGER)
+      .element.closest(".group\\/chat-message")!
+      .dispatchEvent(new PointerEvent("pointerenter", { pointerType: "mouse" }));
+    await flushPromises();
+
+    expect(wrapper.findAll("button[data-quick-reaction]")).toHaveLength(3);
+    expect(await menuItems(wrapper)).toEqual(["Copy Text"]);
   });
 
   it("offers nothing where the room is read-only", async () => {
diff --git a/tests/components/ChatMessage.spec.ts b/tests/components/ChatMessage.spec.ts
index ebe5dbdc..8f629f82 100644
--- a/tests/components/ChatMessage.spec.ts
+++ b/tests/components/ChatMessage.spec.ts
@@ -378,7 +378,7 @@ describe("ChatMessage editing", () => {
     const items = Array.from(
       document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
     ).map((item) => item.textContent?.trim());
-    expect(items).toEqual(["Delete Message"]);
+    expect(items).toEqual(["Copy Text", "Delete Message"]);
   });
 
   it("closes and explains when the window closed first", async () => {
@@ -493,24 +493,16 @@ describe("ChatMessage reactions", () => {
     });
   });
 
-  it("reacts from the menu's picker", async () => {
+  it("reacts from the toolbar", async () => {
     const react = vi.spyOn(socket, "react").mockResolvedValue(undefined);
     const wrapper = await mountMessage();
 
-    await wrapper.get(TRIGGER).trigger("keydown", { key: "Enter" });
-    await flushPromises();
-    Array.from(
-      document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
-    )
-      .find((item) => item.textContent?.trim() === "Add Reaction")!
-      .click();
-    await flushPromises();
-    await new Promise((resolve) => setTimeout(resolve, 20));
+    wrapper.element.dispatchEvent(
+      new PointerEvent("pointerenter", { pointerType: "mouse" }),
+    );
     await flushPromises();
 
-    document.body
-      .querySelector<HTMLElement>('[role="dialog"] [data-reaction="laugh"]')!
-      .click();
+    await wrapper.get('button[data-quick-reaction="laugh"]').trigger("click");
     await flushPromises();
 
     expect(react).toHaveBeenCalledWith(
@@ -539,8 +531,42 @@ describe("ChatMessage reactions", () => {
       Array.from(
         document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
       ).map((item) => item.textContent?.trim()),
-    ).toEqual(["Add Reaction"]);
+    ).toEqual(["Copy Text"]);
     expect(toast).not.toHaveBeenCalled();
+
+    wrapper.element.dispatchEvent(
+      new PointerEvent("pointerenter", { pointerType: "mouse" }),
+    );
+    await flushPromises();
+
+    expect(wrapper.findAll("button[data-quick-reaction]")).toHaveLength(3);
+  });
+
+  it("shows the toolbar for a mouse over the line, never a touch", async () => {
+    const wrapper = await mountMessage();
+    const quick = () => wrapper.findAll("button[data-quick-reaction]");
+
+    wrapper.element.dispatchEvent(
+      new PointerEvent("pointerenter", { pointerType: "mouse" }),
+    );
+    await flushPromises();
+
+    expect(quick()).toHaveLength(3);
+
+    wrapper.element.dispatchEvent(
+      new PointerEvent("pointerleave", { pointerType: "mouse" }),
+    );
+    await flushPromises();
+
+    expect(quick()).toHaveLength(0);
+
+    wrapper.element.dispatchEvent(
+      new PointerEvent("pointerenter", { pointerType: "touch" }),
+    );
+    await flushPromises();
+
+    expect(quick()).toHaveLength(0);
+    expect(wrapper.find(TRIGGER).exists()).toBe(true);
   });
 
   it("keeps a gagged player's row the same width with or without a trigger", async () => {
diff --git a/tests/components/ChatMessageActions.spec.ts b/tests/components/ChatMessageActions.spec.ts
index cc32abe0..64d0a2cf 100644
--- a/tests/components/ChatMessageActions.spec.ts
+++ b/tests/components/ChatMessageActions.spec.ts
@@ -1,10 +1,10 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { watch } from "vue";
 import { flushPromises } from "@vue/test-utils";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import ChatMessage from "~/components/chat/ChatMessage.vue";
 import ChatMessageActions from "~/components/chat/ChatMessageActions.vue";
 import { useRightSidebar } from "~/composables/useRightSidebar";
+import { CHAT_REACTIONS } from "~/constants/chat";
 import socket from "~/web-sockets/Socket";
 
 const { toast } = vi.hoisted(() => ({ toast: vi.fn() }));
@@ -17,7 +17,7 @@ vi.mock("@/components/ui/toast", async (importOriginal) => ({
 const MESSAGE = {
   id: "7f1d0c2e-8b1a-4c6e-9f00-000000000001",
   message: "gg",
-  source: "web",
+  source: "web" as const,
   timestamp: new Date(Date.UTC(2026, 8, 28, 12, 0)).toISOString(),
   from: { steam_id: "76561198000000002", name: "Dana" },
 };
@@ -26,6 +26,23 @@ const TRIGGER = 'button[aria-label="Message actions"]';
 
 let unmount: (() => void) | undefined;
 
+// The test window hovers; this is the phone the toolbar never reaches.
+function touchScreen() {
+  vi.spyOn(window, "matchMedia").mockImplementation(
+    (query: string) =>
+      ({
+        matches: query === "(hover: none)",
+        media: query,
+        onchange: null,
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        addListener: () => {},
+        removeListener: () => {},
+        dispatchEvent: () => false,
+      }) as MediaQueryList,
+  );
+}
+
 afterEach(() => {
   unmount?.();
   unmount = undefined;
@@ -268,10 +285,14 @@ describe("ChatMessageActions for the author", () => {
     expect(wrapper.emitted("open")).toHaveLength(1);
   });
 
-  it("puts Edit first, and Delete after a separator", async () => {
+  it("puts Copy and Edit first, and Delete after a separator", async () => {
     await openMenu();
 
-    expect(menuItems()).toEqual(["Edit Message", "Delete Message"]);
+    expect(menuItems()).toEqual([
+      "Copy Text",
+      "Edit Message",
+      "Delete Message",
+    ]);
     expect(
       document.body.querySelector('[role="menu"] [role="separator"]'),
     ).not.toBeNull();
@@ -280,7 +301,7 @@ describe("ChatMessageActions for the author", () => {
   it("leaves the separator out when there is nothing to separate", async () => {
     await openMenu({ canDelete: false, canEdit: true });
 
-    expect(menuItems()).toEqual(["Edit Message"]);
+    expect(menuItems()).toEqual(["Copy Text", "Edit Message"]);
     expect(
       document.body.querySelector('[role="menu"] [role="separator"]'),
     ).toBeNull();
@@ -332,7 +353,8 @@ describe("ChatMessageActions for the author", () => {
   });
 });
 
-describe("ChatMessageActions reactions", () => {
+// A touch screen never gets the toolbar, so the menu is where its reactions are.
+describe("ChatMessageActions reactions on a touch screen", () => {
   const ME = "76561198000000001";
   const everything = {
     canDelete: true,
@@ -343,35 +365,31 @@ describe("ChatMessageActions reactions", () => {
 
   const hubHeld = () => useRightSidebar().hoverCloseSuspended.value;
 
+  const menu = () => document.body.querySelector<HTMLElement>('[role="menu"]');
+
   const menuItems = () =>
     Array.from(
       document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
     ).map((item) => item.textContent?.trim());
 
-  const menuItem = (label: string) =>
-    Array.from(
-      document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
-    ).find((item) => item.textContent?.trim() === label);
-
-  const picker = () =>
-    document.body.querySelector<HTMLElement>('[role="dialog"]');
-
   const choices = () =>
     Array.from(
-      picker()?.querySelectorAll<HTMLButtonElement>("button[data-reaction]") ??
-        [],
+      menu()?.querySelectorAll<HTMLElement>(
+        '[role="menuitemcheckbox"][data-reaction]',
+      ) ?? [],
     );
 
   const choice = (reaction: string) =>
-    choices().find((button) => button.dataset.reaction === reaction)!;
+    choices().find((item) => item.dataset.reaction === reaction)!;
 
   beforeEach(() => {
+    touchScreen();
     while (useRightSidebar().hoverCloseSuspended.value) {
       useRightSidebar().resumeHoverClose();
     }
   });
 
-  async function openPicker(
+  async function openMenu(
     permissions = everything,
     reactions: Record<string, string[]> = {},
   ) {
@@ -391,85 +409,49 @@ describe("ChatMessageActions reactions", () => {
     await trigger.trigger("keydown", { key: "Enter" });
     await flushPromises();
 
-    menuItem("Add Reaction")!.click();
-    await flushPromises();
-    await new Promise((resolve) => setTimeout(resolve, 20));
-    await flushPromises();
-
     return wrapper;
   }
 
-  it("puts Add Reaction above Edit, and Delete after a separator", async () => {
-    const wrapper = await mountSuspended(ChatMessageActions, {
-      props: {
-        message: MESSAGE,
-        room: { type: "match", id: "match-1" },
-        permissions: everything,
-        viewerSteamId: ME,
-      },
-      attachTo: document.body,
-    });
-    unmount = () => wrapper.unmount();
-
-    await wrapper.get(TRIGGER).trigger("keydown", { key: "Enter" });
-    await flushPromises();
+  it("leads with the reactions, then Copy and Edit, and Delete after a separator", async () => {
+    await openMenu();
 
+    expect(choices().map((item) => item.textContent?.trim())).toEqual(
+      CHAT_REACTIONS.map(({ glyph }) => glyph),
+    );
     expect(menuItems()).toEqual([
-      "Add Reaction",
+      "Copy Text",
       "Edit Message",
       "Delete Message",
     ]);
-    expect(
-      document.body.querySelectorAll('[role="menu"] [role="separator"]'),
-    ).toHaveLength(1);
+    expect(menu()?.querySelectorAll('[role="separator"]')).toHaveLength(2);
+    expect(hubHeld()).toBe(true);
   });
 
-  it("opens the picker from the menu, with focus in it, holding the hub", async () => {
-    await openPicker();
+  it("names the reactions for screen readers", async () => {
+    await openMenu();
 
-    expect(document.body.querySelector('[role="menu"]')).toBeNull();
-    expect(picker()?.hasAttribute("data-right-hub-interactive")).toBe(true);
-    expect(choices().map((button) => button.textContent?.trim())).toEqual([
-      "👍",
-      "❤️",
-      "😂",
-      "🔥",
-      "😮",
-      "😢",
-    ]);
+    expect(menu()?.querySelector('[role="group"]')?.getAttribute("aria-label")).toBe(
+      "React",
+    );
     expect(choice("thumbsup").getAttribute("aria-label")).toBe(
       "React with 👍",
     );
-    expect(picker()?.contains(document.activeElement)).toBe(true);
-    expect(hubHeld()).toBe(true);
   });
 
-  it("names the picker for screen readers", async () => {
-    await openPicker();
-
-    expect(picker()?.getAttribute("aria-label")).toBe("React");
-  });
+  it("offers no reactions where the viewer can't react", async () => {
+    await openMenu({ ...everything, canReact: false, canAddReaction: false });
 
-  it("never lets go of the hub between the menu and the picker", async () => {
-    const held: boolean[] = [];
-    const stop = watch(
-      () => useRightSidebar().hoverCloseSuspended.value,
-      (value) => held.push(value),
-      { flush: "sync" },
-    );
-
-    try {
-      await openPicker();
-    } finally {
-      stop();
-    }
-
-    expect(picker()).not.toBeNull();
-    expect(held).toEqual([true]);
+    expect(choices()).toHaveLength(0);
+    expect(menuItems()).toEqual([
+      "Copy Text",
+      "Edit Message",
+      "Delete Message",
+    ]);
+    expect(menu()?.querySelectorAll('[role="separator"]')).toHaveLength(1);
   });
 
   it("reacts with the pick, closes, and hands focus back", async () => {
-    const wrapper = await openPicker();
+    const wrapper = await openMenu();
 
     choice("fire").click();
     await flushPromises();
@@ -477,30 +459,30 @@ describe("ChatMessageActions reactions", () => {
     await flushPromises();
 
     expect(wrapper.emitted("react")).toEqual([["fire"]]);
-    expect(picker()).toBeNull();
+    expect(menu()).toBeNull();
     expect(hubHeld()).toBe(false);
     expect(document.activeElement).toBe(wrapper.get(TRIGGER).element);
   });
 
   it("marks what the viewer already holds, to take it back", async () => {
-    await openPicker(everything, { heart: [ME], fire: ["76561198000000002"] });
+    await openMenu(everything, { heart: [ME], fire: ["76561198000000002"] });
 
-    expect(choice("heart").getAttribute("aria-pressed")).toBe("true");
-    expect(choice("fire").getAttribute("aria-pressed")).toBe("false");
+    expect(choice("heart").getAttribute("aria-checked")).toBe("true");
+    expect(choice("fire").getAttribute("aria-checked")).toBe("false");
   });
 
   it("lets a gagged viewer take a reaction back but not add one", async () => {
-    const wrapper = await openPicker(
+    const wrapper = await openMenu(
       { ...everything, canAddReaction: false },
       { heart: [ME] },
     );
 
     expect(
       choices()
-        .filter((button) => !button.disabled)
-        .map((button) => button.dataset.reaction),
+        .filter((item) => !item.hasAttribute("data-disabled"))
+        .map((item) => item.dataset.reaction),
     ).toEqual(["heart"]);
-    expect(picker()?.textContent).toContain(
+    expect(menu()?.textContent).toContain(
       "You're gagged and can't add reactions.",
     );
 
@@ -512,7 +494,7 @@ describe("ChatMessageActions reactions", () => {
   });
 
   it("reacts once for a double click", async () => {
-    const wrapper = await openPicker();
+    const wrapper = await openMenu();
 
     const fire = choice("fire");
     fire.click();
@@ -522,50 +504,310 @@ describe("ChatMessageActions reactions", () => {
     expect(wrapper.emitted("react")).toEqual([["fire"]]);
   });
 
-  it("leaves focus where a click outside put it", async () => {
-    const wrapper = await openPicker();
-
-    const outside = document.createElement("button");
-    document.body.appendChild(outside);
+  it("copies the message text", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal("navigator", { ...navigator, clipboard: { writeText } });
 
     try {
-      outside.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, button: 0 }),
-      );
-      outside.focus();
-      await flushPromises();
-      await new Promise((resolve) => setTimeout(resolve, 20));
+      await openMenu();
+
+      Array.from(
+        document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+      )
+        .find((item) => item.textContent?.trim() === "Copy Text")!
+        .click();
       await flushPromises();
 
-      expect(picker()).toBeNull();
-      expect(hubHeld()).toBe(false);
-      expect(document.activeElement).not.toBe(wrapper.get(TRIGGER).element);
+      expect(writeText).toHaveBeenCalledWith("gg");
+      expect(toast).toHaveBeenCalledWith({ title: "Copied to Clipboard" });
     } finally {
-      outside.remove();
+      vi.unstubAllGlobals();
     }
   });
+});
+
+describe("ChatMessageActions toolbar", () => {
+  const ME = "76561198000000001";
+  const everything = {
+    canDelete: true,
+    canEdit: true,
+    canReact: true,
+    canAddReaction: true,
+  };
+
+  const hubHeld = () => useRightSidebar().hoverCloseSuspended.value;
+
+  const menu = () => document.body.querySelector<HTMLElement>('[role="menu"]');
+
+  beforeEach(() => {
+    while (useRightSidebar().hoverCloseSuspended.value) {
+      useRightSidebar().resumeHoverClose();
+    }
+  });
+
+  async function mountToolbar(
+    props: Record<string, unknown> = {},
+    reactions: Record<string, string[]> = {},
+  ) {
+    const wrapper = await mountSuspended(ChatMessageActions, {
+      props: {
+        message: { ...MESSAGE, reactions },
+        room: { type: "match", id: "match-1" },
+        permissions: everything,
+        viewerSteamId: ME,
+        hovered: true,
+        ...props,
+      },
+      attachTo: document.body,
+    });
+    unmount = () => wrapper.unmount();
+    await flushPromises();
+    return wrapper;
+  }
+
+  const quick = (wrapper: Awaited<ReturnType<typeof mountToolbar>>) =>
+    wrapper.findAll<HTMLButtonElement>("button[data-quick-reaction]");
+
+  it("is only the menu trigger until the line is hovered", async () => {
+    const wrapper = await mountToolbar({ hovered: false });
+
+    expect(quick(wrapper)).toHaveLength(0);
+    expect(wrapper.find('button[aria-label="Add Reaction"]').exists()).toBe(
+      false,
+    );
+    expect(wrapper.find(TRIGGER).exists()).toBe(true);
+
+    await wrapper.setProps({ hovered: true });
+
+    expect(quick(wrapper).map((button) => button.text())).toEqual([
+      "👍",
+      "❤️",
+      "😂",
+    ]);
+    expect(wrapper.find('button[aria-label="Add Reaction"]').exists()).toBe(
+      true,
+    );
+    expect(wrapper.find('button[aria-label="Edit Message"]').exists()).toBe(
+      true,
+    );
+  });
+
+  it("reacts from a quick reaction", async () => {
+    const wrapper = await mountToolbar();
+
+    await wrapper.get('button[data-quick-reaction="heart"]').trigger("click");
+
+    expect(wrapper.emitted("react")).toEqual([["heart"]]);
+  });
+
+  it("marks what the viewer holds, and what a gag won't let them add", async () => {
+    const wrapper = await mountToolbar(
+      { permissions: { ...everything, canAddReaction: false } },
+      { heart: [ME] },
+    );
+
+    const heart = wrapper.get('button[data-quick-reaction="heart"]');
+    expect(heart.attributes("aria-pressed")).toBe("true");
+    expect(heart.attributes("disabled")).toBeUndefined();
+    expect(
+      wrapper
+        .get('button[data-quick-reaction="thumbsup"]')
+        .attributes("disabled"),
+    ).toBeDefined();
+  });
+
+  it("offers no reactions where the viewer can't react", async () => {
+    const wrapper = await mountToolbar({
+      permissions: { ...everything, canReact: false, canAddReaction: false },
+    });
+
+    expect(quick(wrapper)).toHaveLength(0);
+    expect(wrapper.find('button[aria-label="Add Reaction"]').exists()).toBe(
+      false,
+    );
+    expect(wrapper.find('button[aria-label="Edit Message"]').exists()).toBe(
+      true,
+    );
+  });
+
+  it("keeps reactions out of the menu, where the toolbar has them", async () => {
+    const wrapper = await mountToolbar();
+
+    await wrapper.get(TRIGGER).trigger("keydown", { key: "Enter" });
+    await flushPromises();
+
+    expect(menu()?.querySelectorAll("[data-reaction]")).toHaveLength(0);
+    expect(
+      Array.from(
+        document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+      ).map((item) => item.textContent?.trim()),
+    ).toEqual(["Copy Text", "Edit Message", "Delete Message"]);
+    expect(menu()?.querySelectorAll('[role="separator"]')).toHaveLength(1);
+  });
+
+  it("hands the edit to the row", async () => {
+    const wrapper = await mountToolbar();
+
+    await wrapper.get('button[aria-label="Edit Message"]').trigger("click");
+
+    expect(wrapper.emitted("edit")).toHaveLength(1);
+  });
 
-  it("closes on Escape and lets go of the hub", async () => {
-    const wrapper = await openPicker();
+  it("opens every reaction from the smiley and reacts once", async () => {
+    const wrapper = await mountToolbar();
 
-    document.activeElement?.dispatchEvent(
-      new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+    await wrapper
+      .get('button[aria-label="Add Reaction"]')
+      .trigger("keydown", { key: "Enter" });
+    await flushPromises();
+
+    const choices = Array.from(
+      menu()?.querySelectorAll<HTMLElement>('[role="menuitemcheckbox"]') ??
+        [],
     );
+    expect(choices.map((item) => item.dataset.reaction)).toEqual(
+      CHAT_REACTIONS.map(({ id }) => id),
+    );
+    expect(choices.length).toBeGreaterThan(6);
+    expect(hubHeld()).toBe(true);
+    expect(wrapper.attributes("data-chat-menu-open")).toBeDefined();
+
+    const fire = choices.find((item) => item.dataset.reaction === "fire")!;
+    fire.click();
+    fire.click();
     await flushPromises();
     await new Promise((resolve) => setTimeout(resolve, 20));
     await flushPromises();
 
-    expect(picker()).toBeNull();
-    expect(wrapper.emitted("react")).toBeUndefined();
+    expect(wrapper.emitted("react")).toEqual([["fire"]]);
+    expect(menu()).toBeNull();
     expect(hubHeld()).toBe(false);
   });
 
-  it("lets go of the hub when the message goes away mid-pick", async () => {
-    await openPicker();
+  // The smiley sits inside a tooltip, and reka's tooltip and menu share one
+  // popper context: unanchored, the picker opened but never left its
+  // off-screen starting point.
+  it("positions the picker it opens on a mouse click", async () => {
+    const wrapper = await mountToolbar();
 
-    unmount?.();
-    unmount = undefined;
+    wrapper
+      .get('button[aria-label="Add Reaction"]')
+      .element.dispatchEvent(
+        new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 }),
+      );
+    await flushPromises();
+    await new Promise((resolve) => setTimeout(resolve, 20));
 
-    expect(hubHeld()).toBe(false);
+    expect(menu()).not.toBeNull();
+    expect(menu()!.parentElement!.style.transform).not.toBe(
+      "translate(0, -200%)",
+    );
+  });
+
+  it("stays out while one of its menus is open, after the pointer leaves", async () => {
+    const wrapper = await mountToolbar();
+
+    await wrapper
+      .get('button[aria-label="Add Reaction"]')
+      .trigger("keydown", { key: "Enter" });
+    await flushPromises();
+    await wrapper.setProps({ hovered: false });
+
+    expect(menu()).not.toBeNull();
+    expect(quick(wrapper)).toHaveLength(3);
+  });
+});
+
+describe("ChatMessageActions moderation", () => {
+  const moderator = {
+    canDelete: true,
+    canEdit: false,
+    canReact: false,
+    canAddReaction: false,
+    canSanction: true,
+  };
+
+  const hubHeld = () => useRightSidebar().hoverCloseSuspended.value;
+
+  const menuItem = (label: string) =>
+    Array.from(
+      document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).find((item) => item.textContent?.trim() === label);
+
+  beforeEach(() => {
+    while (useRightSidebar().hoverCloseSuspended.value) {
+      useRightSidebar().resumeHoverClose();
+    }
+  });
+
+  async function openMenu(permissions: Record<string, boolean>) {
+    const wrapper = await mountSuspended(ChatMessageActions, {
+      props: {
+        message: MESSAGE,
+        room: { type: "match", id: "match-1" },
+        permissions,
+      },
+      attachTo: document.body,
+    });
+    unmount = () => wrapper.unmount();
+
+    await wrapper.get(TRIGGER).trigger("keydown", { key: "Enter" });
+    await flushPromises();
+
+    return wrapper;
+  }
+
+  it("puts the author's sanctions under Moderate, above Delete", async () => {
+    await openMenu(moderator);
+
+    const moderate = menuItem("Moderate Dana")!;
+    expect(moderate.getAttribute("aria-haspopup")).toBe("menu");
+    expect(
+      Array.from(
+        document.body.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+      ).map((item) => item.textContent?.trim()),
+    ).toEqual(["Copy Text", "Moderate Dana", "Delete Message"]);
+
+    moderate.focus();
+    moderate.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }),
+    );
+    await flushPromises();
+
+    expect(
+      Array.from(
+        document.body.querySelectorAll<HTMLElement>("[data-sanction]"),
+      ).map((item) => item.dataset.sanction),
+    ).toEqual(["warning", "gag", "mute", "silence", "ban"]);
+  });
+
+  it("opens the sanction form for the pick, holding the hub", async () => {
+    const wrapper = await openMenu(moderator);
+
+    const moderate = menuItem("Moderate Dana")!;
+    moderate.focus();
+    moderate.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }),
+    );
+    await flushPromises();
+
+    document.body.querySelector<HTMLElement>('[data-sanction="gag"]')!.click();
+    await flushPromises();
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    await flushPromises();
+
+    const sanction = wrapper.findComponent({ name: "SanctionPlayer" });
+    expect(sanction.props("presetType")).toBe("gag");
+    expect((sanction.vm as any).sanctionType).toBe("gag");
+    expect((sanction.vm as any).sanctioningPlayer).toBe(true);
+    expect(document.body.querySelector("form")).not.toBeNull();
+    expect(hubHeld()).toBe(true);
+  });
+
+  it("offers no moderation to someone who can't sanction", async () => {
+    await openMenu({ ...moderator, canSanction: false });
+
+    expect(menuItem("Moderate Dana")).toBeUndefined();
+    expect(menuItem("Delete Message")).toBeDefined();
   });
 });
diff --git a/tests/components/ChatMessageReactions.spec.ts b/tests/components/ChatMessageReactions.spec.ts
index 0f783be2..c4ca70b4 100644
--- a/tests/components/ChatMessageReactions.spec.ts
+++ b/tests/components/ChatMessageReactions.spec.ts
@@ -188,3 +188,38 @@ describe("ChatMessageReactions", () => {
     });
   });
 });
+
+describe("ChatMessageReactions picker", () => {
+  const menu = () => document.body.querySelector<HTMLElement>('[role="menu"]');
+
+  it("offers every reaction beside the pills, and toggles the pick", async () => {
+    const wrapper = await mountPills({ thumbsup: [DANA] });
+
+    const add = wrapper.get('button[aria-label="Add Reaction"]');
+    add.element.dispatchEvent(
+      new MouseEvent("click", { bubbles: true, cancelable: true, button: 0 }),
+    );
+    await flushPromises();
+
+    expect(
+      menu()?.querySelectorAll('[role="menuitemcheckbox"]').length,
+    ).toBeGreaterThan(6);
+
+    menu()!.querySelector<HTMLElement>('[data-reaction="fire"]')!.click();
+    await flushPromises();
+
+    expect(wrapper.emitted("toggle")).toEqual([["fire"]]);
+  });
+
+  it("offers no picker to a viewer who can't react", async () => {
+    const wrapper = await mountPills(
+      { thumbsup: [DANA] },
+      { permissions: { canReact: false, canAddReaction: false } },
+    );
+
+    expect(wrapper.find('button[aria-label="Add Reaction"]').exists()).toBe(
+      false,
+    );
+  });
+});
+
diff --git a/tests/utilities/chatMessageActions.spec.ts b/tests/utilities/chatMessageActions.spec.ts
index 01870172..e673baa2 100644
--- a/tests/utilities/chatMessageActions.spec.ts
+++ b/tests/utilities/chatMessageActions.spec.ts
@@ -37,9 +37,29 @@ describe("chatMessagePermissions", () => {
       canEdit: false,
       canReact: false,
       canAddReaction: false,
+      canSanction: true,
     });
   });
 
+  it("offers a moderator no sanction on their own line or in a conversation", () => {
+    expect(
+      chatMessagePermissions({
+        message: { ...message, from: { steam_id: viewerSteamId } },
+        viewerSteamId,
+        canModerate: true,
+        roomType: "match",
+      }).canSanction,
+    ).toBe(false);
+    expect(
+      chatMessagePermissions({
+        message,
+        viewerSteamId,
+        canModerate: true,
+        roomType: "direct",
+      }).canSanction,
+    ).toBe(false);
+  });
+
   it("never offers a delete in a direct conversation", () => {
     expect(
       chatMessagePermissions({
@@ -103,6 +123,7 @@ describe("chatMessagePermissions for the author", () => {
         canEdit: true,
         canReact: false,
         canAddReaction: false,
+        canSanction: false,
       });
     },
   );
@@ -113,12 +134,14 @@ describe("chatMessagePermissions for the author", () => {
       canEdit: true,
       canReact: false,
       canAddReaction: false,
+      canSanction: false,
     });
     expect(permissions({}, { age: SELF_SERVICE_WINDOW_MS })).toEqual({
       canDelete: false,
       canEdit: false,
       canReact: false,
       canAddReaction: false,
+      canSanction: false,
     });
   });
 
@@ -133,6 +156,7 @@ describe("chatMessagePermissions for the author", () => {
       canEdit: false,
       canReact: false,
       canAddReaction: false,
+      canSanction: false,
     });
   });
 
@@ -151,6 +175,7 @@ describe("chatMessagePermissions for the author", () => {
       canEdit: false,
       canReact: false,
       canAddReaction: false,
+      canSanction: false,
     });
   });
 
@@ -169,6 +194,7 @@ describe("chatMessagePermissions for the author", () => {
       canEdit: false,
       canReact: false,
       canAddReaction: false,
+      canSanction: false,
     });
   });
 
@@ -187,6 +213,7 @@ describe("chatMessagePermissions for the author", () => {
       canEdit: true,
       canReact: false,
       canAddReaction: false,
+      canSanction: false,
     });
   });
 
@@ -201,6 +228,7 @@ describe("chatMessagePermissions for the author", () => {
       canEdit: false,
       canReact: false,
       canAddReaction: false,
+      canSanction: true,
     });
   });
 
@@ -215,6 +243,7 @@ describe("chatMessagePermissions for the author", () => {
       canEdit: false,
       canReact: false,
       canAddReaction: false,
+      canSanction: false,
     });
   });
 
@@ -232,6 +261,7 @@ describe("chatMessagePermissions for the author", () => {
       canEdit: false,
       canReact: false,
       canAddReaction: false,
+      canSanction: false,
     });
   });
 });
@@ -349,12 +379,14 @@ describe("hasChatMessageActions", () => {
     canEdit: false,
     canReact: false,
     canAddReaction: false,
+    canSanction: false,
   };
 
   it("is true only when something is permitted", () => {
     expect(hasChatMessageActions({ ...none, canDelete: true })).toBe(true);
     expect(hasChatMessageActions({ ...none, canEdit: true })).toBe(true);
     expect(hasChatMessageActions({ ...none, canReact: true })).toBe(true);
+    expect(hasChatMessageActions({ ...none, canSanction: true })).toBe(true);
     expect(hasChatMessageActions(none)).toBe(false);
   });
 });
diff --git a/utilities/chatMessageActions.ts b/utilities/chatMessageActions.ts
index 94680086..e1dccd43 100644
--- a/utilities/chatMessageActions.ts
+++ b/utilities/chatMessageActions.ts
@@ -9,6 +9,7 @@ export interface ChatMessagePermissions {
   canEdit: boolean;
   canReact: boolean;
   canAddReaction: boolean;
+  canSanction: boolean;
 }
 
 export interface ChatMessagePermissionInput {
@@ -67,6 +68,9 @@ export function heldChatReactions(
 // Reacting follows sending instead, on any line of any source. A gag in a group
 // room stops adding a reaction but not taking one back, so a gagged player is
 // only offered the reactions they already hold.
+//
+// A sanction is on the author, not the line, so it needs neither an id nor a
+// source -- only someone other than the viewer to put it on.
 export function chatMessagePermissions({
   message,
   viewerSteamId,
@@ -101,6 +105,11 @@ export function chatMessagePermissions({
       canAddReaction ||
       (reactor && heldChatReactions(message, viewerSteamId).size > 0),
     canAddReaction,
+    canSanction:
+      canModerate &&
+      roomType !== "direct" &&
+      !!message?.from?.steam_id &&
+      !isOwnChatMessage(message, viewerSteamId),
   };
 }
 
@@ -111,6 +120,27 @@ export function canToggleChatReaction(
   return held ? permissions.canReact : permissions.canAddReaction;
 }
 
+// Every reaction, marked with whether the viewer holds it and whether they may
+// toggle it -- what a picker lays out.
+export function chatReactionChoices(
+  message: LobbyMessage | null | undefined,
+  viewerSteamId: string | null | undefined,
+  permissions: Pick<ChatMessagePermissions, "canReact" | "canAddReaction">,
+) {
+  const held = heldChatReactions(message, viewerSteamId);
+
+  return CHAT_REACTIONS.map(({ id, glyph }) => {
+    const mine = held.has(id);
+
+    return {
+      id,
+      glyph,
+      mine,
+      disabled: !canToggleChatReaction(permissions, mine),
+    };
+  });
+}
+
 export function hasChatMessageActions(permissions: ChatMessagePermissions) {
   return Object.values(permissions).some(Boolean);
 }