@micha.bigler/ui-core-micha 3.14.3 → 4.0.0

package/src/messaging/MessageBubble.jsx

@@ -1,183 +0,0 @@
-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 { 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';
-import { ReactionBar } from './ReactionBar';
-import { PollCard } from './PollCard';
-import { linkifyText } from './linkifyText';
-
-export const MESSAGE_BUBBLE_ROOT_SX = {
-  position: 'relative',
-  p: 1.25,
-  minWidth: 0,
-  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',
-  },
-};
-export const MESSAGE_BUBBLE_ACTION_SX = {
-  position: 'absolute',
-  top: -12,
-  right: -12,
-  bgcolor: 'background.paper',
-  boxShadow: 1,
-};
-
-function senderName(message) {
-  return message.sender?.display_name || message.sender?.username || message.sender_name || message.sender?.name;
-}
-function quoteSnippet(message) {
-  const content = message.body || message.title;
-  if (!content) return null;
-  return content.length > 120 ? `${content.slice(0, 117)}...` : content;
-}
-// A quoted source can be textless for two different reasons: it was deleted
-// (server blanks body/title/link_target on soft delete), or it always had no
-// text — an attachment-only chat send is a real, reachable case (Composer
-// only requires body OR files). Collapsing both into "This message was
-// deleted" would mislabel the second case, so they're distinguished here.
-function quoteLabel(message, t) {
-  if (message.deleted_at) return t('MessagingThread.DELETED');
-  const snippet = quoteSnippet(message);
-  if (snippet) return snippet;
-  return message.attachments?.length ? t('MessagingThread.QUOTE_ATTACHMENT') : '';
-}
-
-/** Provider-backed timeline collaborator, including per-message mutations. */
-export function MessageBubble({ message, replyTo, conversation, onReply, onJumpToMessage, onAnnouncementLink, canModerateMessages = false, children }) {
-  const { t, i18n } = useTranslation();
-  const messaging = useOptionalMessaging();
-  const { currentUser, editMessage, removeMessage } = messaging || {};
-  const deleted = Boolean(message.deleted_at);
-  const attachments = message.attachments || [];
-  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); 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 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); }
-    catch (saveError) { setError(t('MessagingActions.EDIT_ERROR', { message: extractApiErrorMessage(saveError) })); } finally { setSaving(false); }
-  };
-  const confirmDelete = async () => {
-    setSaving(true); setError(null);
-    try { await removeMessage?.(message.id); setConfirmingDelete(false); }
-    catch (deleteError) { setError(t('MessagingActions.DELETE_ERROR', { message: extractApiErrorMessage(deleteError) })); } finally { setSaving(false); }
-  };
-  const copyMessage = async () => {
-    closeMenu();
-    try { await navigator.clipboard.writeText(message.body || ''); }
-    catch (copyError) { setError(t('MessagingActions.COPY_ERROR', { message: extractApiErrorMessage(copyError) })); }
-  };
-  return (
-    <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={[
-          MESSAGE_BUBBLE_ROOT_SX,
-          {
-            bgcolor: isOwn ? (theme) => alpha(theme.palette.primary.light, 0.24) : 'background.paper',
-            borderColor: isOwn ? (theme) => alpha(theme.palette.primary.main, 0.35) : 'divider',
-          },
-        ]}
-      >
-        {canOpenMenu && <IconButton className="message-actions" size="small" aria-label={t('MessagingActions.MENU')} onClick={openMenu} sx={MESSAGE_BUBBLE_ACTION_SX}><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>}
-          {!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') : linkifyText((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).toLocaleTimeString(i18n?.language, { hour: '2-digit', minute: '2-digit' })}</Typography>}
-            {message.edited_at && !deleted && <Typography component="span" variant="caption" color="inherit">{t('MessagingThread.EDITED')}</Typography>}
-            {children}
-          </Stack>}
-        </Stack>
-      </Paper>
-      {/* A small positive gap, not the negative-margin "peek from the bottom
-          edge" trick this used to have -- that pull was tuned against a
-          plain text line and read as an unnatural collision once the
-          bubble's actual bottom content became variable (an attachment
-          row's bordered Button, or MSG-6g's poll bars), both visually
-          boxier than text and closer to the bubble's edge. */}
-      {!deleted && (reactions.length > 0 || reactionPickerVisible) && <ReactionBar message={message} expanded={reactionPickerVisible} onExpandedChange={setReactionPickerVisible} sx={{ mt: 0.5, ml: 0.75 }} />}
-      <Menu anchorEl={menuAnchor} open={Boolean(menuAnchor)} onClose={closeMenu}>
-        <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)}>
-        <DialogTitle>{t('MessagingActions.DELETE_CONFIRM_TITLE')}</DialogTitle>
-        <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>
-    </Box>
-  );
-}

package/src/messaging/MessagingScopeConfig.jsx

@@ -1,24 +0,0 @@
-import { Alert, Box, CircularProgress, FormControl, FormControlLabel, InputLabel, MenuItem, Select, Stack, Switch, Typography } from '@mui/material';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
-
-/** Provider-backed scope configuration surface; hosts choose its placement and capability gate. */
-export function MessagingScopeConfig({ conversationId }) {
-  const { t } = useTranslation();
-  const { loadConversationConfig, saveConversationConfig } = useMessaging();
-  const [config, setConfig] = useState(null);
-  const [error, setError] = useState(null);
-  const [saving, setSaving] = useState(false);
-  useEffect(() => { let live = true; loadConversationConfig(conversationId).then((value) => live && setConfig(value)).catch((loadError) => live && setError(t('MessagingConfig.LOAD_ERROR', { message: extractApiErrorMessage(loadError) }))); return () => { live = false; }; }, [conversationId, loadConversationConfig, t]);
-  const update = async (patch) => { setSaving(true); setError(null); try { setConfig(await saveConversationConfig(conversationId, patch)); } catch (saveError) { setError(t('MessagingConfig.SAVE_ERROR', { message: extractApiErrorMessage(saveError) })); } finally { setSaving(false); } };
-  if (!config) return error
-    ? <Alert severity="error" role="alert">{error}</Alert>
-    : <Box aria-label={t('MessagingConfig.LOADING')} sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress size={24} /></Box>;
-  return <Stack spacing={1} aria-label={t('MessagingConfig.LABEL')}><Typography variant="subtitle1">{t('MessagingConfig.TITLE')}</Typography>{error && <Alert severity="error" role="alert">{error}</Alert>}
-    <FormControl fullWidth size="small" disabled={saving}><InputLabel>{t('MessagingConfig.DM_POLICY')}</InputLabel><Select label={t('MessagingConfig.DM_POLICY')} value={config.dm_policy || 'all'} onChange={(event) => update({ dm_policy: event.target.value })}><MenuItem value="all">{t('MessagingConfig.DM_ALL')}</MenuItem><MenuItem value="within_shared_groups">{t('MessagingConfig.DM_SHARED')}</MenuItem><MenuItem value="team_only">{t('MessagingConfig.DM_TEAM')}</MenuItem></Select></FormControl>
-    <FormControlLabel control={<Switch checked={Boolean(config.group_chat_enabled)} disabled={saving} onChange={(event) => update({ group_chat_enabled: event.target.checked })} />} label={t('MessagingConfig.GROUP_ENABLED')} />
-    <FormControlLabel control={<Switch checked={Boolean(config.everyone_can_post)} disabled={saving || !config.group_chat_enabled} onChange={(event) => update({ everyone_can_post: event.target.checked })} />} label={t('MessagingConfig.EVERYONE_POSTS')} />
-  </Stack>;
-}

package/src/messaging/PollCard.jsx

@@ -1,163 +0,0 @@
-import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
-import { Alert, Button, Checkbox, Chip, FormControlLabel, LinearProgress, Paper, Radio, RadioGroup, Stack, Typography } from '@mui/material';
-import { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
-
-export const POLL_CARD_ROOT_SX = { p: 1.5, minWidth: 260 };
-export const POLL_CARD_FORM_CONTROL_SX = { width: '100%', m: 0, alignItems: 'flex-start' };
-export const POLL_CARD_CHECKBOX_SX = { pt: 0.25 };
-
-/**
- * Independently mountable live poll view. Server authorization remains authoritative.
- *
- * Tap-to-vote (MSG-6g): each option is its own control, cast immediately on tap — no
- * separate submit step. Single-choice uses a real `RadioGroup` (native "tap a different
- * option moves the vote, tap the same one is a no-op" semantics, plus the group's own
- * arrow-key navigation and screen-reader group announcement — a bare ungrouped `Radio`
- * per option, tried first, loses both); multi-select uses `Checkbox` (each tap
- * independently toggles that option). `FormControlLabel` wraps each control, matching
- * this repo's existing radio convention (`AuthFactorRequirementCard.jsx`) — clicking
- * anywhere in the label natively activates the control, no manual click-handling needed.
- * Every tap is optimistic (see `castPollVote` in `MessagingProvider`), dims while
- * in flight (matching `ReactionBar`'s `pending` convention) so an optimistic vote is
- * never visually indistinguishable from a confirmed one, and visibly reverts on a
- * rejected vote.
- */
-export function PollCard({ message, canClose: canCloseProp }) {
-  const { t } = useTranslation();
-  const { castPollVote, closeConversationPoll, currentUser } = useMessaging();
-  const poll = message?.poll;
-  const [selected, setSelected] = useState([]);
-  const [error, setError] = useState(null);
-  const [busy, setBusy] = useState(false);
-  const [pending, setPending] = useState(() => new Set());
-  // Guards a rejected vote's revert against a newer tap that has since
-  // superseded it -- see the matching token in MessagingProvider.castPollVote.
-  const voteTokenRef = useRef(null);
-  // voted_option_ids is a view-level enrichment dcm adds ONLY to the
-  // create/vote/close poll REST responses (serialize_poll itself, every
-  // message-list/thread load, and every poll_updated realtime frame never
-  // carry it) — so it's only ever present right after this viewer's own
-  // vote/create/close action. When it's absent (a freshly loaded or
-  // frame-updated poll), there's no way to know this viewer's vote from the
-  // payload alone; default to no selection rather than guessing or carrying
-  // over stale local state.
-  useEffect(() => setSelected(poll?.voted_option_ids ? [...poll.voted_option_ids] : []), [poll]);
-  if (!poll) return null;
-  const closed = Boolean(poll.closed_at);
-  const creatorId = poll.created_by_id ?? poll.created_by?.id ?? poll.created_by;
-  const canClose = canCloseProp ?? poll.can_close ?? message?.can_close ?? message?.permissions?.can_close ?? (creatorId != null && creatorId === currentUser?.id);
-  // Percentage denominator (MSG-6i): the number of distinct people who
-  // answered this poll, not sum(vote_count) across options. For a
-  // multi-select poll one person can vote for several options, so summing
-  // vote_count can exceed the actual respondent count -- dividing by that
-  // inflated sum understated everyone's percentage and the bars didn't sum
-  // to a sensible 100%. dcm's serialize_poll always includes each option's
-  // `voters` (a list of user ids, ungated -- unlike messaging read
-  // receipts); the union across all options is exactly "everyone who
-  // answered", computed client-side, no backend change. This deliberately
-  // reverses MSG-6g's own explicit non-goal ("denominator = votes cast, not
-  // participant count") -- an operator-confirmed correction, not a revert.
-  const respondentCount = new Set((poll.options || []).flatMap((option) => option.voters || [])).size;
-
-  const tap = async (id) => {
-    if (closed) return;
-    const previousSelected = selected;
-    const nextSelected = poll.allow_multiple
-      ? (selected.includes(id) ? selected.filter((value) => value !== id) : [...selected, id])
-      : [id];
-    // Belt-and-suspenders: native radios already don't fire a change event
-    // when re-clicking the checked one, but this guards any caller shape.
-    if (nextSelected.length === previousSelected.length && nextSelected.every((value) => previousSelected.includes(value))) return;
-    const token = {};
-    voteTokenRef.current = token;
-    setSelected(nextSelected);
-    setError(null);
-    // Rapid re-taps are allowed and race deliberately (last write wins via
-    // the token above) -- `pending` is a visual signal only, never gates
-    // further taps, so it must not disable the control.
-    setPending((current) => new Set(current).add(id));
-    try {
-      await castPollVote(message.id, poll, nextSelected);
-    } catch (voteError) {
-      // A later tap already moved the selection on; a stale failure must not
-      // revert past it.
-      if (voteTokenRef.current === token) {
-        setSelected(previousSelected);
-        setError(t('MessagingPoll.VOTE_ERROR', { message: extractApiErrorMessage(voteError) }));
-      }
-    } finally {
-      setPending((current) => { const next = new Set(current); next.delete(id); return next; });
-    }
-  };
-  const close = async () => {
-    setBusy(true); setError(null);
-    try { await closeConversationPoll(message.id, poll); } catch (closeError) { setError(t('MessagingPoll.CLOSE_ERROR', { message: extractApiErrorMessage(closeError) })); } finally { setBusy(false); }
-  };
-
-  const optionLabel = (option) => {
-    // dcm's poll projection gives voter user ids only, never names — there
-    // is no user-directory endpoint (same structural limit already
-    // established for the DM candidate list).
-    const voteCount = option.vote_count ?? option.voters?.length ?? 0;
-    const percent = respondentCount > 0 ? Math.round((voteCount / respondentCount) * 100) : 0;
-    const votedByMe = selected.includes(option.id);
-    const resultText = t('MessagingPoll.OPTION_RESULT', { count: voteCount, percent });
-    // The bar is decorative; count/percent live in the accessible name (via
-    // aria-label on the control itself) as well as in adjacent visible text —
-    // width alone must never be the only signal (WO risk note).
-    const accessibleLabel = `${option.text || option.label}, ${resultText}${votedByMe ? `, ${t('MessagingPoll.YOU_VOTED')}` : ''}`;
-    // MSG-6i scope B: "airier, not wider" (operator, after seeing a
-    // screenshot of the checkbox/text/percent squeezed onto one tight line
-    // with a thin bar close to the text) -- more internal spacing/a taller
-    // bar, not a wider bubble (MessageBubble.jsx's maxWidth is untouched).
-    const richLabel = <Stack sx={{ flex: 1, minWidth: 0, opacity: pending.has(option.id) ? 0.6 : 1 }} spacing={0.75}>
-      {/* MSG-6j: `justifyContent: 'space-between'` only distributes LEFTOVER width -- but
-          this row sits inside a `MessageBubble` sized `width: fit-content` around this exact
-          content, so there is by construction no leftover width, and space-between alone
-          reserved a zero-width gap (the reported bug: label text ran directly into the
-          vote-count/percent text). `spacing` adds a real minimum gap via margin, independent
-          of justify-content, so the two never touch regardless of available width. */}
-      <Stack direction="row" justifyContent="space-between" spacing={1}>
-        <Typography variant="body2" noWrap>{option.text || option.label}</Typography>
-        <Typography variant="caption" color="text.secondary">{resultText}</Typography>
-      </Stack>
-      <LinearProgress variant="determinate" value={percent} sx={{ borderRadius: 1, height: 8 }} color={votedByMe ? 'primary' : 'inherit'} />
-    </Stack>;
-    return { accessibleLabel, richLabel };
-  };
-  // MSG-6j: a short question/option set could otherwise pull the whole `MessageBubble`
-  // (`width: fit-content`) in tighter than comfortable to read. 260px stays under the
-  // bubble's own `maxWidth: min(75%, 680px)` ceiling even at a 375px viewport (75% = 281px)
-  // -- verified at that width, not just desktop.
-  return <Paper variant="outlined" sx={POLL_CARD_ROOT_SX} aria-label={t('MessagingPoll.LABEL')}><Stack spacing={1.5}>
-    <Typography variant="subtitle2">{poll.question}</Typography>
-    {poll.allow_multiple
-      ? (poll.options || []).map((option) => {
-          const { accessibleLabel, richLabel } = optionLabel(option);
-          return <FormControlLabel key={option.id} disabled={closed} sx={POLL_CARD_FORM_CONTROL_SX} label={richLabel}
-            control={<Checkbox checked={selected.includes(option.id)} inputProps={{ 'aria-label': accessibleLabel }} onChange={() => tap(option.id)} sx={POLL_CARD_CHECKBOX_SX} />} />;
-        })
-      // No RadioGroup-level onChange: it would only ever hand back
-      // `event.target.value`, a DOM string -- coercing a non-string option id
-      // (dcm's are UUID strings today, but the id type isn't a guaranteed
-      // contract). `value` alone still drives each Radio's `checked` via the
-      // group's own comparison; each Radio's own `onChange` below fires
-      // `tap` with the option's real, correctly-typed id, matching the
-      // Checkbox branch above exactly.
-      : <RadioGroup value={selected[0] ?? ''} name={`poll-${poll.id}-options`}>
-          {(poll.options || []).map((option) => {
-            const { accessibleLabel, richLabel } = optionLabel(option);
-            return <FormControlLabel key={option.id} value={option.id} disabled={closed} sx={POLL_CARD_FORM_CONTROL_SX} label={richLabel}
-              control={<Radio inputProps={{ 'aria-label': accessibleLabel }} onChange={() => tap(option.id)} sx={{ pt: 0.25 }} />} />;
-          })}
-        </RadioGroup>}
-    {error && <Alert severity="error" role="alert">{error}</Alert>}
-    <Stack direction="row" spacing={1} alignItems="center">
-      {canClose && !closed && <Button size="small" color="warning" onClick={close} disabled={busy}>{t('MessagingPoll.CLOSE')}</Button>}
-      {closed && <Chip size="small" icon={<LockOutlinedIcon fontSize="small" />} label={t('MessagingPoll.CLOSED')} />}
-    </Stack>
-  </Stack></Paper>;
-}

package/src/messaging/ReactionBar.jsx

@@ -1,43 +0,0 @@
-import { Alert, Chip, Stack } from '@mui/material';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
-
-export const QUICK_EMOJIS = ['👍', '❤️', '😂', '🎉', '👀'];
-
-/** 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 [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. 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) => {
-    if (pending.has(emoji)) return;
-    setError(null);
-    setPending((current) => new Set(current).add(emoji));
-    try { await toggleReaction(message.id, emoji, active); }
-    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')} 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 })} />)}
-    </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)); onExpandedChange?.(false); }} />;
-    })}</Stack>}
-    {error && <Alert severity="error" role="alert">{error}</Alert>}
-  </Stack>;
-}

package/src/messaging/ReadTicks.jsx

@@ -1,82 +0,0 @@
-import DoneAllOutlinedIcon from '@mui/icons-material/DoneAllOutlined';
-import DoneOutlinedIcon from '@mui/icons-material/DoneOutlined';
-import { ButtonBase, List, ListItem, Popover, Tooltip, Typography } from '@mui/material';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useMessaging } from './MessagingProvider';
-
-// Explicit tokens, not `inherit`/`primary` -- `inherit` inside the message
-// meta Stack resolved to `text.disabled`, which read too close to the "read"
-// state at the rendered 1rem icon size. The icon shape (Done vs DoneAll)
-// already differs, so the colour distinction is a second, independent signal
-// rather than the only one.
-const DM_SENT_COLOR = 'grey.500';
-const DM_READ_COLOR = 'primary.main';
-
-/**
- * Shape-driven, no client-side role/permission branching: dcm only ever
- * includes `read_count`/`recipient_count` inside the same `read_receipt_detail`-
- * gated block as `recipient_detail`, and never for a `direct` conversation
- * (the DM privacy carve-out). So "counts present" already means "team member,
- * non-direct" -- checking anything else here would re-implement a decision
- * dcm's response shape already makes.
- *
- * - counts present -> a read ratio ("18/40"), numeric, no icon ladder.
- * - no counts, `direct` -> a two-state tick (sent / read).
- * - no counts, non-direct -> no indicator at all (an ordinary participant in
- *   a group; a permanently-grey tick here would be the "looks always
- *   delivered" defect this component exists to remove).
- */
-export function ReadTicks({ messageId, conversation }) {
-  const { t } = useTranslation();
-  const { cache, getMessageReadStatus } = useMessaging();
-  const [status, setStatus] = useState(null);
-  const [anchorEl, setAnchorEl] = useState(null);
-  useEffect(() => {
-    let mounted = true;
-    getMessageReadStatus(messageId).then((next) => { if (mounted) setStatus(next); }).catch(() => { if (mounted) setStatus(null); });
-    return () => { mounted = false; };
-  }, [getMessageReadStatus, messageId]);
-  if (!status) return null;
-
-  const recipientDetail = status.recipient_detail?.map((recipient) => ({ ...recipient, last_read_at: cache.receipts[`${conversation?.id}:${recipient.user_id}`]?.last_read_at ?? recipient.last_read_at })) || status.recipient_detail;
-  const directReceipt = conversation?.kind === 'direct' && conversation?.other_user_id != null
-    ? cache.receipts[`${conversation.id}:${conversation.other_user_id}`]
-    : null;
-  const allRead = status.all_read || Boolean(directReceipt?.last_read_at) || Boolean(recipientDetail?.length && recipientDetail.every((recipient) => recipient.last_read_at));
-  const hasCounts = typeof status.read_count === 'number' && typeof status.recipient_count === 'number';
-
-  if (!hasCounts && conversation?.kind !== 'direct') return null;
-  if (hasCounts && status.recipient_count === 0) return null;
-
-  // The server never returns DM detail; enforce the same carve-out defensively.
-  const detail = conversation?.kind === 'direct' ? null : recipientDetail;
-  const recipients = detail?.map((recipient) => recipient.display_name || recipient.username || recipient.user_id).filter(Boolean) || [];
-
-  if (hasCounts) {
-    // Read count/recipient_count exactly as dcm computed them -- do NOT
-    // recompute from recipientDetail here. dcm thresholds each participant's
-    // last_read_at against THIS message's created_at
-    // (`last_read_at__gte=message.created_at`, services.py); recipientDetail
-    // only carries each participant's raw, unthresholded last_read_at, and
-    // ReadTicks has no access to the message's own created_at to reproduce
-    // that comparison. Recomputing from recipientDetail (tried during
-    // implementation, caught in review) silently counted anyone who had ever
-    // read the conversation at any point as "read this message" -- in a real
-    // group with history, that reads as close to N/N regardless of who
-    // actually saw this specific message, the opposite of the WO's intent.
-    // The trade-off: unlike the DM tick and the per-person popover below
-    // (both viewer/timestamp-relative facts, not message-relative, so they
-    // safely reuse cache.receipts), this numeric ratio only updates on the
-    // next read-status fetch, not live from a read_state frame.
-    const label = t('MessagingReadTicks.READ_RATIO', { read: status.read_count, total: status.recipient_count });
-    const ratio = <Typography component="span" variant="caption" color="inherit">{status.read_count}/{status.recipient_count}</Typography>;
-    if (!recipients.length) return <Tooltip title={label} describeChild><span role="img" aria-label={label}>{ratio}</span></Tooltip>;
-    return <><Tooltip title={label} describeChild><ButtonBase aria-label={label} aria-haspopup="dialog" aria-expanded={Boolean(anchorEl)} onClick={(event) => setAnchorEl(event.currentTarget)} sx={{ display: 'inline-flex' }}>{ratio}</ButtonBase></Tooltip><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></>;
-  }
-
-  const label = allRead ? t('MessagingReadTicks.ALL_READ') : t('MessagingReadTicks.SENT');
-  const StatusIcon = allRead ? DoneAllOutlinedIcon : DoneOutlinedIcon;
-  return <StatusIcon role="img" aria-label={label} sx={{ color: allRead ? DM_READ_COLOR : DM_SENT_COLOR }} />;
-}