@micha.bigler/ui-core-micha 2.20.0 → 2.21.1

package/src/messaging/MessageBubble.jsx

@@ -1,6 +1,7 @@
-import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Menu, MenuItem, Paper, Stack, TextField, Typography } from '@mui/material';
+import { Alert, Box, Button, ButtonBase, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Menu, MenuItem, Paper, Stack, TextField, Typography } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { useEffect, useState } from 'react';
+import { alpha } from '@mui/material/styles';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AttachmentList } from './AttachmentList';
 import { extractApiErrorMessage, useOptionalMessaging } from './MessagingProvider';
@@ -34,19 +35,52 @@ export function MessageBubble({ message, replyTo, conversation, onReply, onJumpT
   const { currentUser, editMessage, removeMessage } = messaging || {};
   const deleted = Boolean(message.deleted_at);
   const attachments = message.attachments || [];
-  const canAct = !deleted && message.kind !== 'poll' && ((Boolean(currentUser?.id) && message.sender?.id === currentUser?.id) || canModerateMessages);
+  const isOwn = Boolean(currentUser?.id) && message.sender?.id === currentUser.id;
+  const canAct = !deleted && message.kind !== 'poll' && (isOwn || canModerateMessages);
+  const canOpenMenu = !deleted;
+  const reactions = message.reactions || [];
+  const hasMeta = Boolean(message.created_at || (message.edited_at && !deleted) || children);
   const [menuAnchor, setMenuAnchor] = useState(null);
+  const [actionsVisible, setActionsVisible] = useState(false);
+  const [reactionPickerVisible, setReactionPickerVisible] = useState(false);
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(message.body || '');
   const [confirmingDelete, setConfirmingDelete] = useState(false);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState(null);
+  const bubbleRef = useRef(null);
   useEffect(() => {
-    if (deleted) { setEditing(false); setConfirmingDelete(false); setMenuAnchor(null); }
+    if (deleted) {
+      setEditing(false); setConfirmingDelete(false); setMenuAnchor(null); setReactionPickerVisible(false);
+    }
   }, [deleted]);
+  // The touch/tap reveal is a one-way state flip with no dismiss path of its
+  // own (unlike hover/focus, which un-reveal on mouseleave/blur automatically)
+  // — without this, any ordinary tap on the bubble (selecting text, opening a
+  // poll option, following the reply quote) would leave the overflow icon
+  // permanently visible, contradicting the at-rest "no visible affordance"
+  // requirement. Dismiss on any pointerdown outside this message's own DOM
+  // subtree (bubbleRef spans the Paper plus the reaction-picker sibling, so
+  // interacting with either never counts as "outside"); a pointerdown that
+  // lands on the Menu/Dialog portals does count as outside, but that's
+  // harmless — they already close themselves via their own handlers on the
+  // same interaction.
+  useEffect(() => {
+    if (!actionsVisible) return undefined;
+    const dismissIfOutside = (event) => {
+      if (bubbleRef.current && !bubbleRef.current.contains(event.target)) {
+        setActionsVisible(false);
+      }
+    };
+    document.addEventListener('pointerdown', dismissIfOutside, true);
+    return () => document.removeEventListener('pointerdown', dismissIfOutside, true);
+  }, [actionsVisible]);
   const closeMenu = () => setMenuAnchor(null);
-  const openMenu = (event) => { event.preventDefault(); setMenuAnchor(event.currentTarget); };
+  const revealActions = () => setActionsVisible(true);
+  const openMenu = (event) => { event.preventDefault(); revealActions(); setMenuAnchor(event.currentTarget); };
   const startEdit = () => { setDraft(message.body || ''); setEditing(true); closeMenu(); };
+  const startReply = () => { onReply?.(message); closeMenu(); };
+  const startReact = () => { setReactionPickerVisible(true); closeMenu(); };
   const saveEdit = async () => {
     setSaving(true); setError(null);
     try { await editMessage?.(message.id, { body: draft.trim() }); setEditing(false); }
@@ -63,35 +97,51 @@ export function MessageBubble({ message, replyTo, conversation, onReply, onJumpT
     catch (copyError) { setError(t('MessagingActions.COPY_ERROR', { message: extractApiErrorMessage(copyError) })); }
   };
   return (
-    <Paper component="article" variant="outlined" sx={{ p: 1.25, maxWidth: 'min(100%, 680px)', '& .message-actions': { opacity: 0 }, '&:hover .message-actions': { opacity: 1 } }} aria-label={t('MessagingThread.MESSAGE')} data-message-id={message.id} onContextMenu={canAct ? openMenu : undefined}>
-      <Stack spacing={0.75}>
-        {replyTo && <Button type="button" variant="text" size="small" onClick={() => onJumpToMessage?.(replyTo.id)} sx={{ justifyContent: 'flex-start', px: 0, textAlign: 'left', textTransform: 'none' }}>
-          <Stack spacing={0} alignItems="flex-start">
-            <Typography variant="caption" color="text.secondary">{t('MessagingThread.REPLY_TO', { sender: senderName(replyTo) || t('MessagingThread.UNKNOWN_SENDER') })}</Typography>
-            <Typography variant="caption" color="text.secondary">{quoteLabel(replyTo, t)}</Typography>
-          </Stack>
-        </Button>}
-        <Stack direction="row" spacing={1} alignItems="baseline">
+    <Box ref={bubbleRef} component="article" data-message-id={message.id} data-message-side={isOwn ? 'own' : 'incoming'} aria-label={t('MessagingThread.MESSAGE')} sx={{ alignSelf: isOwn ? 'flex-end' : 'flex-start', width: 'fit-content', maxWidth: 'min(75%, 680px)', minWidth: 0 }}>
+      <Paper
+        variant="outlined"
+        data-actions-visible={actionsVisible || undefined}
+        onClick={revealActions}
+        onContextMenu={canOpenMenu ? openMenu : undefined}
+        sx={{
+          position: 'relative', p: 1.25, minWidth: 0,
+          bgcolor: isOwn ? (theme) => alpha(theme.palette.primary.light, 0.24) : 'background.paper',
+          borderColor: isOwn ? (theme) => alpha(theme.palette.primary.main, 0.35) : 'divider',
+          overflowWrap: 'anywhere',
+          '& .message-actions': { opacity: 0, pointerEvents: 'none', transition: 'opacity 120ms ease-in-out' },
+          '&:hover .message-actions, &:focus-within .message-actions, &[data-actions-visible="true"] .message-actions': { opacity: 1, pointerEvents: 'auto' },
+        }}
+      >
+        {canOpenMenu && <IconButton className="message-actions" size="small" aria-label={t('MessagingActions.MENU')} onClick={openMenu} sx={{ position: 'absolute', top: -12, right: -12, bgcolor: 'background.paper', boxShadow: 1 }}><MoreVertIcon fontSize="small" /></IconButton>}
+        <Stack spacing={0.75}>
+          {replyTo && <ButtonBase type="button" onClick={() => onJumpToMessage?.(replyTo.id)} sx={{ display: 'block', width: '100%', px: 0.75, py: 0.5, textAlign: 'left', borderLeft: 3, borderColor: 'primary.main', bgcolor: 'action.hover', borderRadius: 0.5 }}>
+            <Stack spacing={0} alignItems="flex-start">
+              <Typography variant="caption" color="text.secondary">{t('MessagingThread.REPLY_TO', { sender: senderName(replyTo) || t('MessagingThread.UNKNOWN_SENDER') })}</Typography>
+              <Typography variant="caption" color="text.secondary">{quoteLabel(replyTo, t)}</Typography>
+            </Stack>
+          </ButtonBase>}
           {conversation?.kind !== 'direct' && <Typography variant="subtitle2">{senderName(message) || t('MessagingThread.UNKNOWN_SENDER')}</Typography>}
-          {message.created_at && <Typography variant="caption" color="text.secondary">{new Date(message.created_at).toLocaleString()}</Typography>}
-          {message.edited_at && !deleted && <Typography variant="caption" color="text.secondary">{t('MessagingThread.EDITED')}</Typography>}
+          {!deleted && message.kind === 'announcement' && message.title && <Typography variant="subtitle1" fontWeight={700}>{message.title}</Typography>}
+          {!deleted && message.kind === 'announcement' && message.link_target && onAnnouncementLink && <Button type="button" size="small" onClick={() => onAnnouncementLink(message.link_target)}>{t('MessagingAnnouncement.OPEN_LINK')}</Button>}
+          {error && <Alert severity="error" role="alert">{error}</Alert>}
+          {editing ? <Stack spacing={0.75}><TextField label={t('MessagingActions.EDIT')} value={draft} onChange={(event) => setDraft(event.target.value)} multiline minRows={2} autoFocus disabled={saving} /><Stack direction="row" spacing={1}><Button type="button" onClick={saveEdit} disabled={saving}>{t('MessagingActions.SAVE')}</Button><Button type="button" onClick={() => setEditing(false)} disabled={saving}>{t('MessagingActions.CANCEL')}</Button></Stack></Stack> : <Typography sx={{ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }}>{deleted ? t('MessagingThread.DELETED') : (message.kind === 'announcement' ? message.body : (message.body || message.title)) || ''}</Typography>}
+          {!deleted && <Stack spacing={0.75}>
+            {attachments.length > 0 && <AttachmentList attachments={attachments} />}
+            {message.poll && <PollCard message={message} />}
+          </Stack>}
+          {hasMeta && <Stack data-testid="message-meta" direction="row" spacing={0.5} justifyContent="flex-end" alignItems="center" flexWrap="wrap" sx={{ color: 'text.disabled', minWidth: 0, '& .MuiSvgIcon-root': { fontSize: '1rem' } }}>
+            {message.created_at && <Typography component="span" variant="caption" color="inherit" sx={{ whiteSpace: 'nowrap' }}>{new Date(message.created_at).toLocaleString()}</Typography>}
+            {message.edited_at && !deleted && <Typography component="span" variant="caption" color="inherit">{t('MessagingThread.EDITED')}</Typography>}
+            {children}
+          </Stack>}
         </Stack>
-        {!deleted && message.kind === 'announcement' && message.title && <Typography variant="subtitle1" fontWeight={700}>{message.title}</Typography>}
-        {!deleted && message.kind === 'announcement' && message.link_target && onAnnouncementLink && <Button type="button" size="small" onClick={() => onAnnouncementLink(message.link_target)}>{t('MessagingAnnouncement.OPEN_LINK')}</Button>}
-        {error && <Alert severity="error" role="alert">{error}</Alert>}
-        {editing ? <Stack spacing={0.75}><TextField label={t('MessagingActions.EDIT')} value={draft} onChange={(event) => setDraft(event.target.value)} multiline minRows={2} autoFocus disabled={saving} /><Stack direction="row" spacing={1}><Button type="button" onClick={saveEdit} disabled={saving}>{t('MessagingActions.SAVE')}</Button><Button type="button" onClick={() => setEditing(false)} disabled={saving}>{t('MessagingActions.CANCEL')}</Button></Stack></Stack> : <Typography sx={{ whiteSpace: 'pre-wrap' }}>{deleted ? t('MessagingThread.DELETED') : (message.kind === 'announcement' ? message.body : (message.body || message.title)) || ''}</Typography>}
-        {!deleted && <Stack spacing={0.75}>
-          {attachments.length > 0 && <AttachmentList attachments={attachments} />}
-          <ReactionBar message={message} />
-          {message.poll && <PollCard message={message} />}
-        </Stack>}
-        {!deleted && onReply && <Button type="button" size="small" onClick={() => onReply(message)}>{t('MessagingThread.REPLY')}</Button>}
-        {canAct && <IconButton className="message-actions" size="small" aria-label={t('MessagingActions.MENU')} onClick={openMenu}><MoreVertIcon /></IconButton>}
-        {children}
-      </Stack>
+      </Paper>
+      {!deleted && (reactions.length > 0 || reactionPickerVisible) && <ReactionBar message={message} expanded={reactionPickerVisible} onExpandedChange={setReactionPickerVisible} sx={{ mt: -0.5, ml: 0.75, position: 'relative', zIndex: 1 }} />}
       <Menu anchorEl={menuAnchor} open={Boolean(menuAnchor)} onClose={closeMenu}>
-        <MenuItem onClick={startEdit}>{t('MessagingActions.EDIT')}</MenuItem>
-        <MenuItem onClick={() => { setConfirmingDelete(true); closeMenu(); }}>{t('MessagingActions.DELETE')}</MenuItem>
+        <MenuItem onClick={startReply}>{t('MessagingThread.REPLY')}</MenuItem>
+        <MenuItem onClick={startReact}>{t('MessagingReactions.ADD')}</MenuItem>
+        {canAct && <MenuItem onClick={startEdit}>{t('MessagingActions.EDIT')}</MenuItem>}
+        {canAct && <MenuItem onClick={() => { setConfirmingDelete(true); closeMenu(); }}>{t('MessagingActions.DELETE')}</MenuItem>}
         <MenuItem onClick={copyMessage}>{t('MessagingActions.COPY')}</MenuItem>
       </Menu>
       <Dialog open={confirmingDelete} onClose={() => !saving && setConfirmingDelete(false)}>
@@ -99,6 +149,6 @@ export function MessageBubble({ message, replyTo, conversation, onReply, onJumpT
         <DialogContent>{t('MessagingActions.DELETE_CONFIRM_BODY')}</DialogContent>
         <DialogActions><Button onClick={() => setConfirmingDelete(false)} disabled={saving}>{t('MessagingActions.CANCEL')}</Button><Button onClick={confirmDelete} disabled={saving} color="error">{t('MessagingActions.DELETE')}</Button></DialogActions>
       </Dialog>
-    </Paper>
+    </Box>
   );
 }

package/src/messaging/ReactionBar.jsx

@@ -1,5 +1,4 @@
-import AddReactionOutlinedIcon from '@mui/icons-material/AddReactionOutlined';
-import { Alert, Chip, IconButton, Stack } from '@mui/material';
+import { Alert, Chip, Stack } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -7,18 +6,17 @@ import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
 
 export const QUICK_EMOJIS = ['👍', '❤️', '😂', '🎉', '👀'];
 
-/** Independently mountable aggregate reaction controls for one message. */
-export function ReactionBar({ message }) {
+/** Compact aggregate reactions; MessageBubble opens the quick picker from its action menu. */
+export function ReactionBar({ message, expanded = false, onExpandedChange, sx }) {
   const { t } = useTranslation();
   const { toggleReaction } = useMessaging();
-  const [expanded, setExpanded] = useState(false);
   const [error, setError] = useState(null);
   // Tracks in-flight emoji toggles for this message so a rapid double-click
   // can't fire two concurrent requests for the same emoji — toggleReaction's
   // rollback-on-failure reverts to a pre-optimistic snapshot, which would
   // silently discard a second, already-succeeded change if both were in
-  // flight at once. Disabling the chip while its own request is pending
-  // removes the race instead of trying to make concurrent toggles safe.
+  // flight. Disabling the chip while its own request is pending removes the
+  // race instead of trying to make concurrent toggles safe.
   const [pending, setPending] = useState(() => new Set());
   const reactions = message?.reactions || [];
   const react = async (emoji, active = false) => {
@@ -29,17 +27,16 @@ export function ReactionBar({ message }) {
     catch (reactionError) { setError(t('MessagingReactions.ERROR', { message: extractApiErrorMessage(reactionError) })); }
     finally { setPending((current) => { const next = new Set(current); next.delete(emoji); return next; }); }
   };
-  return <Stack spacing={0.5} aria-label={t('MessagingReactions.LABEL')}>
-    <Stack direction="row" spacing={0.5} flexWrap="wrap">
+  return <Stack spacing={0.5} aria-label={t('MessagingReactions.LABEL')} sx={sx}>
+    {reactions.length > 0 && <Stack direction="row" spacing={0.5} flexWrap="wrap">
       {reactions.map((reaction) => <Chip key={reaction.emoji} size="small" disabled={pending.has(reaction.emoji)} color={reaction.reacted ? 'primary' : 'default'} label={`${reaction.emoji} ${reaction.count || 0}`} onClick={() => react(reaction.emoji, Boolean(reaction.reacted))} aria-label={t('MessagingReactions.TOGGLE', { emoji: reaction.emoji, count: reaction.count || 0 })} />)}
-      <IconButton size="small" aria-label={t('MessagingReactions.ADD')} onClick={() => setExpanded((value) => !value)}><AddReactionOutlinedIcon fontSize="small" /></IconButton>
-    </Stack>
+    </Stack>}
     {expanded && <Stack direction="row" spacing={0.25} flexWrap="wrap">{QUICK_EMOJIS.map((emoji) => {
       // A quick-emoji already reflected in the aggregate row must toggle it
       // off, not re-add it — otherwise clicking an already-reacted emoji here
       // optimistically double-increments the count before the API call.
       const existing = reactions.find((reaction) => reaction.emoji === emoji);
-      return <Chip key={emoji} size="small" disabled={pending.has(emoji)} color={existing?.reacted ? 'primary' : 'default'} label={emoji} onClick={() => { react(emoji, Boolean(existing?.reacted)); setExpanded(false); }} />;
+      return <Chip key={emoji} size="small" disabled={pending.has(emoji)} color={existing?.reacted ? 'primary' : 'default'} label={emoji} onClick={() => { react(emoji, Boolean(existing?.reacted)); onExpandedChange?.(false); }} />;
     })}</Stack>}
     {error && <Alert severity="error" role="alert">{error}</Alert>}
   </Stack>;

package/src/messaging/ReadTicks.jsx

@@ -1,4 +1,6 @@
-import { ButtonBase, List, ListItem, Popover, Typography } from '@mui/material';
+import DoneAllOutlinedIcon from '@mui/icons-material/DoneAllOutlined';
+import DoneOutlinedIcon from '@mui/icons-material/DoneOutlined';
+import { ButtonBase, List, ListItem, Popover } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -17,9 +19,10 @@ export function ReadTicks({ messageId, conversation }) {
   }, [getMessageReadStatus, messageId]);
   if (!status) return null;
   const label = status.all_read ? t('MessagingReadTicks.ALL_READ') : t('MessagingReadTicks.DELIVERED', { count: status.delivered_count || 0 });
+  const StatusIcon = status.all_read ? DoneAllOutlinedIcon : DoneOutlinedIcon;
   // The server never returns DM detail; enforce the same carve-out defensively.
   const detail = conversation?.kind === 'direct' ? null : status.recipient_detail;
   const recipients = detail?.map((recipient) => recipient.display_name || recipient.username || recipient.user_id).filter(Boolean) || [];
-  if (!recipients.length) return <Typography component="span" variant="caption" color="text.secondary" aria-label={label}>{label}</Typography>;
-  return <><ButtonBase aria-label={label} aria-haspopup="dialog" aria-expanded={Boolean(anchorEl)} onClick={(event) => setAnchorEl(event.currentTarget)} sx={{ typography: 'caption', color: 'text.secondary', textDecoration: 'underline' }}>{label}</ButtonBase><Popover open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={() => setAnchorEl(null)}><List aria-label={t('MessagingReadTicks.RECIPIENTS')}>{recipients.map((recipient) => <ListItem key={recipient}>{recipient}</ListItem>)}</List></Popover></>;
+  if (!recipients.length) return <StatusIcon role="img" aria-label={label} color={status.all_read ? 'primary' : 'inherit'} />;
+  return <><ButtonBase aria-label={label} aria-haspopup="dialog" aria-expanded={Boolean(anchorEl)} onClick={(event) => setAnchorEl(event.currentTarget)} sx={{ display: 'inline-flex', color: status.all_read ? 'primary.main' : 'inherit' }}><StatusIcon aria-hidden="true" /></ButtonBase><Popover open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={() => setAnchorEl(null)}><List aria-label={t('MessagingReadTicks.RECIPIENTS')}>{recipients.map((recipient) => <ListItem key={recipient}>{recipient}</ListItem>)}</List></Popover></>;
 }

package/src/messaging/Thread.jsx

@@ -95,10 +95,20 @@ export function Thread({ conversationId, onReplyTargetChange, canModerateMessage
     <Stack spacing={1} sx={{ minWidth: 0 }}>
       {error && <Alert severity="error" role="alert">{error}</Alert>}
       {replyingTo && <Alert severity="info" onClose={() => { setReplyingTo(null); onReplyTargetChange?.(null); }}>{t('MessagingThread.REPLYING_TO', { sender: replyingTo.sender?.display_name || t('MessagingThread.UNKNOWN_SENDER') })}</Alert>}
-      <Box ref={scrollRef} onScroll={onScroll} sx={{ maxHeight: 560, overflowY: 'auto', px: 0.5 }} aria-label={t('MessagingThread.TIMELINE')}>
+      <Box ref={scrollRef} onScroll={onScroll} sx={{ maxHeight: 560, overflowY: 'auto', overflowX: 'hidden', px: 0.5 }} aria-label={t('MessagingThread.TIMELINE')}>
         {cache.cursors.messages[conversationId] && <Box textAlign="center" py={1}><Button onClick={loadOlder} disabled={loadingOlder}>{loadingOlder ? <CircularProgress size={18} /> : t('MessagingThread.LOAD_OLDER')}</Button></Box>}
         {!roots.length && <Typography color="text.secondary" textAlign="center" py={4}>{t('MessagingThread.EMPTY')}</Typography>}
-        <Stack spacing={1}>{roots.map((message) => {
+        {/* pr wider than pl, on this Stack only (not the scroll container
+            above, which stays symmetric so the centered LOAD_OLDER button
+            isn't skewed): an own (right-aligned) bubble sits flush against
+            this Stack's right edge, and MessageBubble's hover/tap "more
+            actions" icon (MessageBubble.jsx, `top: -12, right: -12`) floats
+            12px past the bubble's own right edge — without enough padding to
+            absorb that overhang, the scroll container's overflowX: hidden
+            (the scrollbar fix above) would clip the icon whenever there's no
+            vertical scrollbar reserving extra width (a short conversation,
+            no vertical overflow). */}
+        <Stack spacing={1} sx={{ pr: 2 }}>{roots.map((message) => {
           const replies = chronological(Object.values(cache.messages).filter((item) => String(replyToId(item)) === String(message.id)));
           return <Stack key={message.id} spacing={0.75}><MessageBubble message={message} conversation={conversation} onReply={reply} onJumpToMessage={jumpToMessage} onAnnouncementLink={onAnnouncementLink} canModerateMessages={canModerateMessages}>{canShowReadTicks(message, user) && <ReadTicks messageId={message.id} conversation={conversation} />}</MessageBubble>
             {(message.reply_count || replies.length) > 0 && (() => {

package/tests/ConversationList.test.jsx

@@ -53,6 +53,32 @@ describe('ConversationList', () => {
     await waitFor(() => expect(screen.queryByRole('button', { name: 'Announcements' })).toBeNull());
   });
 
+  it('resolves a direct conversation\'s title via the host-supplied resolveDirectUserName, falling back to the generic label when absent', async () => {
+    api.listConversations.mockResolvedValueOnce({
+      results: [
+        { id: 6, kind: 'direct', other_user_id: 42, last_message: { excerpt: 'Hi' } },
+        { id: 7, kind: 'direct', other_user_id: 99, last_message: { excerpt: 'Hey' } },
+      ],
+      next_cursor: null,
+    });
+    const resolveDirectUserName = vi.fn((userId) => (userId === 42 ? 'Alex' : null));
+    renderList(api, { resolveDirectUserName });
+    await screen.findByText('Alex');
+    expect(resolveDirectUserName).toHaveBeenCalledWith(42);
+    expect(screen.getByText('MessagingList.UNTITLED')).toBeTruthy();
+  });
+
+  it('does not call resolveDirectUserName for non-direct conversations', async () => {
+    api.listConversations.mockResolvedValueOnce({
+      results: [{ id: 8, kind: 'group', title: 'Ops', other_user_id: 42, last_message: { excerpt: 'Hi' } }],
+      next_cursor: null,
+    });
+    const resolveDirectUserName = vi.fn(() => 'Should not be used');
+    renderList(api, { resolveDirectUserName });
+    await screen.findByText('Ops');
+    expect(resolveDirectUserName).not.toHaveBeenCalled();
+  });
+
   it('wires mute and archive through participant APIs', async () => {
     renderList(api);
     await screen.findByText('First');

package/tests/messagingCompactBubble.test.jsx

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.count != null ? `${key}:${options.count}` : options?.sender ? `${key}:${options.sender}` : key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { AuthContext } from '../src/auth/AuthContext';
+import { MessageBubble } from '../src/messaging/MessageBubble';
+import { MessagingProvider } from '../src/messaging/MessagingProvider';
+import { ReadTicks } from '../src/messaging/ReadTicks';
+
+const api = () => ({
+  getReadStatus: vi.fn().mockResolvedValue({ all_read: false, delivered_count: 2 }),
+  getAttachment: vi.fn(), getAttachmentThumbnail: vi.fn(), addReaction: vi.fn(), removeReaction: vi.fn(),
+  votePoll: vi.fn(), closePoll: vi.fn(),
+});
+function renderBubble(message, { conversation = { kind: 'group' }, replyTo, onJumpToMessage, child, ownId = 1 } = {}) {
+  return render(<AuthContext.Provider value={{ user: { id: ownId } }}><MessagingProvider api={api()} active={false}><MessageBubble message={message} conversation={conversation} replyTo={replyTo} onJumpToMessage={onJumpToMessage}>{child}</MessageBubble></MessagingProvider></AuthContext.Provider>);
+}
+
+afterEach(cleanup);
+
+describe('compact message bubbles', () => {
+  it('keeps the timestamp and own-message status icon inside the bubble and has no standalone plain-message controls', async () => {
+    const { container } = renderBubble({ id: 1, body: 'Hallo', sender: { id: 1, display_name: 'Me' }, created_at: '2026-08-02T10:00:00Z' }, { child: <ReadTicks messageId={1} conversation={{ kind: 'group' }} /> });
+    const tick = await screen.findByLabelText('MessagingReadTicks.DELIVERED:2');
+    const paper = container.querySelector('[data-message-id="1"] .MuiPaper-root');
+    expect(paper.contains(tick)).toBe(true);
+    expect(paper.querySelector('[data-testid="message-meta"]')).toBeTruthy();
+    expect(screen.queryByText('MessagingThread.REPLY')).toBeNull();
+    expect(screen.queryByLabelText('MessagingReactions.LABEL')).toBeNull();
+  });
+
+  it('marks own and incoming bubbles differently and only shows a sender in non-direct conversations', () => {
+    const { container, rerender } = renderBubble({ id: 2, body: 'Mine', sender: { id: 1, display_name: 'Me' } });
+    expect(container.querySelector('[data-message-id="2"]').getAttribute('data-message-side')).toBe('own');
+    expect(screen.getByText('Me')).toBeTruthy();
+    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={api()} active={false}><MessageBubble message={{ id: 3, body: 'Theirs', sender: { id: 9, display_name: 'Ava' } }} conversation={{ kind: 'direct' }} /></MessagingProvider></AuthContext.Provider>);
+    expect(container.querySelector('[data-message-id="3"]').getAttribute('data-message-side')).toBe('incoming');
+    expect(screen.queryByText('Ava')).toBeNull();
+  });
+
+  it('keeps a reply quote clickable inside the bubble', () => {
+    const onJumpToMessage = vi.fn();
+    const { container } = renderBubble({ id: 5, body: 'Reply', sender: { id: 1 } }, { replyTo: { id: 4, body: 'Quoted words', sender: { display_name: 'Ava' } }, onJumpToMessage });
+    fireEvent.click(screen.getByText('Quoted words'));
+    expect(onJumpToMessage).toHaveBeenCalledWith(4);
+    expect(container.querySelector('[data-message-id="5"] .MuiPaper-root').contains(screen.getByText('Quoted words'))).toBe(true);
+  });
+
+  it('continues to render announcement, poll and attachment content inside the bubble', async () => {
+    const { container, rerender } = renderBubble({ id: 6, kind: 'announcement', title: 'Notice', body: 'Update', sender: { id: 1 } });
+    expect(container.querySelector('.MuiPaper-root').contains(screen.getByText('Notice'))).toBe(true);
+    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={api()} active={false}><MessageBubble message={{ id: 7, kind: 'poll', body: 'Poll', sender: { id: 1 }, poll: { id: 1, question: 'Where?', options: [], allow_multiple: false } }} conversation={{ kind: 'group' }} /></MessagingProvider></AuthContext.Provider>);
+    expect(container.querySelector('.MuiPaper-root').contains(screen.getByText('Where?'))).toBe(true);
+    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={api()} active={false}><MessageBubble message={{ id: 8, body: 'File', sender: { id: 1 }, attachments: [{ id: 1, filename: 'notes.pdf', content_type: 'application/pdf' }] }} conversation={{ kind: 'group' }} /></MessagingProvider></AuthContext.Provider>);
+    await waitFor(() => expect(screen.getByText(/MessagingAttachments\.DOWNLOAD/)).toBeTruthy());
+    expect(container.querySelector('.MuiPaper-root').contains(screen.getByText(/MessagingAttachments\.DOWNLOAD/))).toBe(true);
+  });
+});

package/tests/messagingInteractions.test.jsx

@@ -92,6 +92,21 @@ describe('messaging reactions and polls', () => {
     expect(screen.queryByRole('button', { name: 'MessagingAnnouncement.CREATE' })).toBeNull();
   });
 
+  it('never offers announcement composing in a direct conversation, even when the host allows it', () => {
+    // A host's allowAnnouncement is typically an event-manager permission check
+    // with no notion of which conversation is currently open — broadcasting to
+    // a 1:1 direct chat is never meaningful regardless of that permission.
+    const api = baseApi();
+    render(<MessagingProvider api={api} active={false}><Composer conversationId={4} allowAnnouncement conversation={{ kind: 'direct' }} /></MessagingProvider>);
+    expect(screen.queryByRole('button', { name: 'MessagingAnnouncement.CREATE' })).toBeNull();
+  });
+
+  it('still offers announcement composing for a non-direct conversation when the host allows it', () => {
+    const api = baseApi();
+    render(<MessagingProvider api={api} active={false}><Composer conversationId={4} allowAnnouncement conversation={{ kind: 'group' }} /></MessagingProvider>);
+    expect(screen.getByRole('button', { name: 'MessagingAnnouncement.CREATE' })).toBeTruthy();
+  });
+
   it('disables the chip while pending, then rolls back and re-enables it on API failure', async () => {
     let rejectAdd; const api = baseApi(); api.addReaction.mockReturnValue(new Promise((_, reject) => { rejectAdd = reject; }));
     render(<MessagingProvider api={api} active={false}><ReactionBar message={{ id: 7, reactions: [{ emoji: '👍', count: 1, reacted: false }] }} /></MessagingProvider>);

package/tests/messagingMessageActions.test.jsx

@@ -17,8 +17,8 @@ function makeApi() {
     deleteMessage: vi.fn().mockImplementation(async (id) => ({ id, deleted_at: '2026-07-31T10:01:00Z' })),
   };
 }
-function renderBubble(message, { userId = 1, canModerateMessages = false, api = makeApi() } = {}) {
-  const result = render(<AuthContext.Provider value={{ user: { id: userId } }}><MessagingProvider api={api} active={false}><MessageBubble message={message} canModerateMessages={canModerateMessages} /></MessagingProvider></AuthContext.Provider>);
+function renderBubble(message, { userId = 1, canModerateMessages = false, api = makeApi(), onReply } = {}) {
+  const result = render(<AuthContext.Provider value={{ user: { id: userId } }}><MessagingProvider api={api} active={false}><MessageBubble message={message} canModerateMessages={canModerateMessages} onReply={onReply} /></MessagingProvider></AuthContext.Provider>);
   return { ...result, api };
 }
 function openActions() { fireEvent.click(screen.getByRole('button', { name: 'MessagingActions.MENU' })); }
@@ -26,19 +26,89 @@ function openActions() { fireEvent.click(screen.getByRole('button', { name: 'Mes
 afterEach(cleanup);
 
 describe('message actions', () => {
-  it('gates the menu to the author or host-supplied moderator capability, never deleted or poll messages', () => {
+  it('offers Reply, React and Copy for incoming messages, adding Edit and Delete only for authors or moderators', () => {
     const mine = { id: 1, body: 'Mine', sender: { id: 1 } };
     const theirs = { id: 2, body: 'Theirs', sender: { id: 2 } };
-    const { rerender } = renderBubble(mine);
+    const { unmount } = renderBubble(mine);
     expect(screen.getByRole('button', { name: 'MessagingActions.MENU' })).toBeTruthy();
-    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={makeApi()} active={false}><MessageBubble message={theirs} /></MessagingProvider></AuthContext.Provider>);
-    expect(screen.queryByRole('button', { name: 'MessagingActions.MENU' })).toBeNull();
-    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={makeApi()} active={false}><MessageBubble message={theirs} canModerateMessages /></MessagingProvider></AuthContext.Provider>);
+    openActions();
+    ['MessagingThread.REPLY', 'MessagingReactions.ADD', 'MessagingActions.EDIT', 'MessagingActions.DELETE', 'MessagingActions.COPY'].forEach((name) => expect(screen.getByRole('menuitem', { name })).toBeTruthy());
+    fireEvent.click(screen.getByRole('menuitem', { name: 'MessagingReactions.ADD' }));
+    expect(screen.getByLabelText('MessagingReactions.LABEL')).toBeTruthy();
+    expect(screen.getByText('👍')).toBeTruthy();
+    unmount();
+    renderBubble(theirs);
     expect(screen.getByRole('button', { name: 'MessagingActions.MENU' })).toBeTruthy();
-    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={makeApi()} active={false}><MessageBubble message={{ ...mine, deleted_at: '2026-07-31T10:00:00Z' }} /></MessagingProvider></AuthContext.Provider>);
-    expect(screen.queryByRole('button', { name: 'MessagingActions.MENU' })).toBeNull();
-    rerender(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={makeApi()} active={false}><MessageBubble message={{ ...mine, kind: 'poll' }} /></MessagingProvider></AuthContext.Provider>);
+    openActions();
+    ['MessagingThread.REPLY', 'MessagingReactions.ADD', 'MessagingActions.COPY'].forEach((name) => expect(screen.getByRole('menuitem', { name })).toBeTruthy());
+    expect(screen.queryByRole('menuitem', { name: 'MessagingActions.EDIT' })).toBeNull();
+    expect(screen.queryByRole('menuitem', { name: 'MessagingActions.DELETE' })).toBeNull();
+    cleanup();
+    renderBubble(theirs, { canModerateMessages: true });
+    expect(screen.getByRole('button', { name: 'MessagingActions.MENU' })).toBeTruthy();
+    cleanup();
+    renderBubble({ ...mine, deleted_at: '2026-07-31T10:00:00Z' });
     expect(screen.queryByRole('button', { name: 'MessagingActions.MENU' })).toBeNull();
+    cleanup();
+    renderBubble({ ...mine, kind: 'poll' });
+    expect(screen.getByRole('button', { name: 'MessagingActions.MENU' })).toBeTruthy();
+  });
+
+  it('opens the affordance from a tap and lets a keyboard user reveal and operate it', () => {
+    const onReply = vi.fn();
+    const { container } = renderBubble({ id: 3, body: 'Touch me', sender: { id: 2 } }, { onReply });
+    const bubble = container.querySelector('[data-message-id="3"] .MuiPaper-root');
+    fireEvent.click(bubble);
+    expect(bubble.getAttribute('data-actions-visible')).toBe('true');
+    const actions = screen.getByRole('button', { name: 'MessagingActions.MENU' });
+    fireEvent.focus(actions);
+    fireEvent.click(actions);
+    fireEvent.click(screen.getByRole('menuitem', { name: 'MessagingThread.REPLY' }));
+    expect(onReply).toHaveBeenCalledWith(expect.objectContaining({ id: 3 }));
+  });
+
+  it('dismisses the tap-revealed affordance again on an outside interaction, but not on a reaction-picker click inside the same bubble', () => {
+    const { container } = renderBubble({ id: 3, body: 'Touch me', sender: { id: 2 }, reactions: [{ emoji: '👍', count: 1, reacted: false }] });
+    const bubble = container.querySelector('[data-message-id="3"] .MuiPaper-root');
+    fireEvent.click(bubble);
+    expect(bubble.getAttribute('data-actions-visible')).toBe('true');
+    // A pointerdown inside the same message's own reaction row (a sibling of
+    // the Paper, still within the article) must not count as "outside" —
+    // otherwise every reaction click would prematurely hide the affordance.
+    fireEvent.pointerDown(screen.getByText('👍 1'));
+    expect(bubble.getAttribute('data-actions-visible')).toBe('true');
+    // A pointerdown genuinely outside the message dismisses it — this is the
+    // U1 fix: without it, the affordance stayed pinned visible forever after
+    // any click that bubbled up to the bubble (Part A's "no visible
+    // affordance at rest" requirement).
+    fireEvent.pointerDown(document.body);
+    expect(bubble.getAttribute('data-actions-visible')).toBeNull();
+  });
+
+  it('keeps each message bubble\'s tap-reveal state independent — revealing one does not dismiss another', () => {
+    const api = makeApi();
+    const { container } = render(
+      <AuthContext.Provider value={{ user: { id: 1 } }}>
+        <MessagingProvider api={api} active={false}>
+          <MessageBubble message={{ id: 10, body: 'First', sender: { id: 2 } }} />
+          <MessageBubble message={{ id: 11, body: 'Second', sender: { id: 2 } }} />
+        </MessagingProvider>
+      </AuthContext.Provider>
+    );
+    const bubbleA = container.querySelector('[data-message-id="10"] .MuiPaper-root');
+    const bubbleB = container.querySelector('[data-message-id="11"] .MuiPaper-root');
+    fireEvent.pointerDown(bubbleA);
+    fireEvent.click(bubbleA);
+    expect(bubbleA.getAttribute('data-actions-visible')).toBe('true');
+    expect(bubbleB.getAttribute('data-actions-visible')).toBeNull();
+    // Tapping bubble B is, from bubble A's perspective, an outside
+    // interaction — A dismisses, B reveals; the two must never share state.
+    // (A real tap fires pointerdown before click; fireEvent.click alone
+    // wouldn't exercise the pointerdown-driven dismiss listener.)
+    fireEvent.pointerDown(bubbleB);
+    fireEvent.click(bubbleB);
+    expect(bubbleA.getAttribute('data-actions-visible')).toBeNull();
+    expect(bubbleB.getAttribute('data-actions-visible')).toBe('true');
   });
 
   it('edits an author message through the API and auto-cancels when deleted elsewhere', async () => {

package/tests/messagingReactionMerge.test.jsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import React from 'react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.emoji ? `${key}:${options.emoji}:${options.count}` : key }) }));
 
@@ -29,7 +29,7 @@ function baseApi(overrides = {}) {
 // a live-frame test must read the message back out of the cache.
 function ConnectedReactionBar({ messageId }) {
   const { cache } = useMessaging();
-  return <ReactionBar message={cache.messages[messageId]} />;
+  return <ReactionBar message={cache.messages[messageId]} expanded />;
 }
 
 afterEach(() => { cleanup(); realtimeSubscribers.clear(); });
@@ -54,9 +54,7 @@ describe('reaction frame/REST merge against the real aggregate-only contract', (
   it('the viewer\'s own optimistic reacted flag survives its own REST confirmation, which returns an aggregate-only shape', async () => {
     const api = baseApi({ addReaction: vi.fn().mockResolvedValue({ reactions: [{ emoji: '👍', count: 1 }] }) });
     render(<MessagingProvider api={api} active={false}><ConnectedReactionBar messageId="msg-1" /></MessagingProvider>);
-    dispatchMessagingFrame({ envelope: 'messaging', type: 'message', event_id: 'seed', conversation_id: 'conv-1', message: { id: 'msg-1', conversation_id: 'conv-1', body: 'Hi', reactions: [] } });
-    await waitFor(() => screen.getByLabelText('MessagingReactions.ADD'));
-    fireEvent.click(screen.getByLabelText('MessagingReactions.ADD'));
+    act(() => { dispatchMessagingFrame({ envelope: 'messaging', type: 'message', event_id: 'seed', conversation_id: 'conv-1', message: { id: 'msg-1', conversation_id: 'conv-1', body: 'Hi', reactions: [] } }); });
     fireEvent.click(screen.getByText('👍'));
     await waitFor(() => expect(api.addReaction).toHaveBeenCalledWith('msg-1', '👍'));
     await waitFor(() => {

package/tests/messagingThreadingQuoting.test.jsx

@@ -68,7 +68,8 @@ describe('messaging threading and quoting', () => {
     api.deleteMessage = vi.fn().mockResolvedValue({});
     render(<AuthContext.Provider value={{ user: { id: 1 } }}><MessagingProvider api={api} activeConversationId={1}><Thread conversationId={1} /></MessagingProvider></AuthContext.Provider>);
     await screen.findByText('Reply target');
-    fireEvent.click(screen.getByRole('button', { name: /MessagingThread\.REPLY\b/ }));
+    fireEvent.click(screen.getByRole('button', { name: /MessagingActions\.MENU/ }));
+    fireEvent.click(screen.getByRole('menuitem', { name: /MessagingThread\.REPLY\b/ }));
     expect(screen.getByText(/MessagingThread\.REPLYING_TO/)).toBeTruthy();
     fireEvent.click(screen.getByRole('button', { name: /MessagingActions\.MENU/ }));
     fireEvent.click(screen.getByRole('menuitem', { name: /MessagingActions\.DELETE/ }));