@micha.bigler/ui-core-micha 2.22.0 → 2.24.0

package/src/messaging/AttachmentList.jsx

@@ -1,17 +1,40 @@
-import { Box, Button, Stack } from '@mui/material';
-import { useEffect, useState } from 'react';
+import CloseIcon from '@mui/icons-material/Close';
+import DownloadIcon from '@mui/icons-material/DownloadOutlined';
+import InsertDriveFileOutlinedIcon from '@mui/icons-material/InsertDriveFileOutlined';
+import { Alert, Box, ButtonBase, CircularProgress, Dialog, IconButton, Menu, MenuItem, Stack, Typography } from '@mui/material';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useMessaging } from './MessagingProvider';
 
 function isImage(attachment) { return attachment.content_type?.startsWith('image/'); }
+// `filename` is dcm's real, sanitized upload name (MSG-12) -- `id` is the
+// last-resort fallback for interop with a host still on a pre-MSG-12 pin.
 function nameOf(attachment) { return attachment.filename || attachment.name || attachment.id; }
 
-/** Download-only attachment renderer; all bytes remain behind the authenticated REST endpoints. */
+/**
+ * WhatsApp-style attachment gallery (MSG-6h): a small thumbnail per image
+ * attachment; click opens a full-size lightbox, which itself carries its own
+ * Download action (reachable by mouse, touch, or keyboard -- right-click is a
+ * shortcut, never the only path). A non-image attachment has no preview to
+ * open -- click downloads directly. Right-click still opens the same context
+ * menu on either kind, for the mouse-user shortcut. Bytes only ever move
+ * through the existing authenticated `getAttachment`/`getAttachmentThumbnail`
+ * blob endpoints -- no new byte-handling path.
+ */
 export function AttachmentList({ attachments = [] }) {
   const { t } = useTranslation();
   const { getAttachment, getAttachmentThumbnail } = useMessaging();
   const [previews, setPreviews] = useState({});
+  // { attachment, url: string|null, status: 'loading'|'ready'|'error' } | null
+  const [lightbox, setLightbox] = useState(null);
+  const [menu, setMenu] = useState(null); // { attachment, anchorPosition } | null
+  // Full-resolution object URLs, fetched once per attachment on first
+  // lightbox open and reused for the rest of this mount (a re-open must not
+  // re-fetch what's already sitting in memory). Only ever revoked on
+  // unmount -- never while the Dialog might still be displaying one.
+  const fullUrlCacheRef = useRef({});
+
   useEffect(() => {
     let live = true; const urls = [];
     attachments.filter(isImage).forEach(async (attachment) => {
@@ -23,16 +46,91 @@ export function AttachmentList({ attachments = [] }) {
     });
     return () => { live = false; urls.forEach((url) => URL.revokeObjectURL(url)); };
   }, [attachments, getAttachmentThumbnail]);
+
+  useEffect(() => () => { Object.values(fullUrlCacheRef.current).forEach((url) => URL.revokeObjectURL(url)); }, []);
+
   if (!attachments.length) return null;
+
   const download = async (attachment) => {
     const blob = await getAttachment(attachment.id);
     if (!(blob instanceof Blob)) return;
     const url = URL.createObjectURL(blob); const link = document.createElement('a');
     link.href = url; link.download = nameOf(attachment); link.click(); URL.revokeObjectURL(url);
   };
-  return <Stack direction="row" spacing={1} flexWrap="wrap" aria-label={t('MessagingAttachments.LABEL')}>
-    {attachments.map((attachment) => <Button key={attachment.id} type="button" size="small" onClick={() => download(attachment)}>
-      {previews[attachment.id] && <Box component="img" src={previews[attachment.id]} alt="" width={36} height={36} sx={{ objectFit: 'cover', mr: 0.75 }} />}{t('MessagingAttachments.DOWNLOAD', { name: nameOf(attachment) })}
-    </Button>)}
-  </Stack>;
+
+  const openLightbox = async (attachment) => {
+    const cachedUrl = fullUrlCacheRef.current[attachment.id];
+    if (cachedUrl) { setLightbox({ attachment, url: cachedUrl, status: 'ready' }); return; }
+    setLightbox({ attachment, url: null, status: 'loading' });
+    try {
+      const blob = await getAttachment(attachment.id);
+      if (!(blob instanceof Blob)) throw new Error('Attachment response was not a Blob');
+      const url = URL.createObjectURL(blob);
+      fullUrlCacheRef.current[attachment.id] = url;
+      // A newer open (a different attachment) may have superseded this one
+      // while the fetch was in flight -- don't stomp on it with a stale result.
+      setLightbox((current) => (current?.attachment.id === attachment.id ? { attachment, url, status: 'ready' } : current));
+    } catch {
+      setLightbox((current) => (current?.attachment.id === attachment.id ? { ...current, status: 'error' } : current));
+    }
+  };
+
+  const openMenu = (event, attachment) => {
+    event.preventDefault();
+    // Attachments live inside a message bubble that has its own right-click
+    // menu (MessageBubble.jsx's onContextMenu) -- this must not also open.
+    event.stopPropagation();
+    setMenu({ attachment, anchorPosition: { top: event.clientY, left: event.clientX } });
+  };
+  const closeMenu = () => setMenu(null);
+
+  return <>
+    <Stack direction="row" spacing={1} flexWrap="wrap" aria-label={t('MessagingAttachments.LABEL')}>
+      {attachments.map((attachment) => {
+        const image = isImage(attachment);
+        const preview = previews[attachment.id];
+        const label = image ? t('MessagingAttachments.PREVIEW', { name: nameOf(attachment) }) : t('MessagingAttachments.DOWNLOAD', { name: nameOf(attachment) });
+        return (
+          <ButtonBase
+            key={attachment.id}
+            type="button"
+            title={nameOf(attachment)}
+            onClick={() => (image ? openLightbox(attachment) : download(attachment))}
+            onContextMenu={(event) => openMenu(event, attachment)}
+            aria-label={label}
+            sx={{ width: 64, height: 64, borderRadius: 1, overflow: 'hidden', border: '1px solid', borderColor: 'divider', display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: 'action.hover' }}
+          >
+            {image && preview
+              ? <Box component="img" src={preview} alt="" sx={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+              : <Stack alignItems="center" spacing={0.25} sx={{ px: 0.5, maxWidth: '100%' }}>
+                  <InsertDriveFileOutlinedIcon fontSize="small" />
+                  <Typography variant="caption" noWrap sx={{ maxWidth: '100%' }}>{nameOf(attachment)}</Typography>
+                </Stack>}
+          </ButtonBase>
+        );
+      })}
+    </Stack>
+
+    <Dialog open={Boolean(lightbox)} onClose={() => setLightbox(null)} maxWidth="lg" aria-label={lightbox ? nameOf(lightbox.attachment) : undefined}>
+      {lightbox && <Box sx={{ position: 'relative', minWidth: 240, minHeight: lightbox.status === 'ready' ? undefined : 160, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Stack direction="row" spacing={0.5} sx={{ position: 'absolute', top: 4, right: 4 }}>
+          {lightbox.status === 'ready' && <IconButton aria-label={t('MessagingAttachments.DOWNLOAD_ACTION')} onClick={() => download(lightbox.attachment)} sx={{ bgcolor: 'background.paper', boxShadow: 1 }}>
+            <DownloadIcon />
+          </IconButton>}
+          <IconButton aria-label={t('MessagingAttachments.CLOSE_PREVIEW')} onClick={() => setLightbox(null)} sx={{ bgcolor: 'background.paper', boxShadow: 1 }}>
+            <CloseIcon />
+          </IconButton>
+        </Stack>
+        {lightbox.status === 'loading' && <CircularProgress aria-label={t('MessagingAttachments.LOADING_PREVIEW')} sx={{ m: 4 }} />}
+        {lightbox.status === 'error' && <Alert severity="error" role="alert" sx={{ m: 2 }}>{t('MessagingAttachments.PREVIEW_ERROR')}</Alert>}
+        {lightbox.status === 'ready' && <Box component="img" src={lightbox.url} alt={nameOf(lightbox.attachment)} sx={{ display: 'block', maxWidth: '90vw', maxHeight: '90vh' }} />}
+      </Box>}
+    </Dialog>
+
+    <Menu open={Boolean(menu)} onClose={closeMenu} anchorReference="anchorPosition" anchorPosition={menu?.anchorPosition}>
+      <MenuItem onClick={() => { const attachment = menu?.attachment; closeMenu(); if (attachment) download(attachment); }}>
+        <DownloadIcon fontSize="small" sx={{ mr: 1 }} />{t('MessagingAttachments.DOWNLOAD_ACTION')}
+      </MenuItem>
+    </Menu>
+  </>;
 }

package/src/messaging/MessageBubble.jsx

@@ -136,7 +136,13 @@ export function MessageBubble({ message, replyTo, conversation, onReply, onJumpT
           </Stack>}
         </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 }} />}
+      {/* 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>

package/src/messaging/MessagingProvider.jsx

@@ -47,6 +47,30 @@ function mergeById(slice, item) { const id = idOf(item); return id == null ? sli
 function resultsOf(response) { return response?.results || []; }
 function clientRequestIdOf(message) { return message?.client_request_id; }
 
+// Optimistic vote-count/voters projection for MSG-6g tap-to-vote -- only options whose
+// membership in the vote actually changed get their count/voters adjusted, so an
+// unrelated option's tally is never nudged by someone else's concurrent vote landing in
+// cache between taps.
+function applyOptimisticVote(poll, previousSelectedIds, nextSelectedIds, userId) {
+  const previousSet = new Set(previousSelectedIds || []);
+  const nextSet = new Set(nextSelectedIds || []);
+  const options = (poll.options || []).map((option) => {
+    const wasSelected = previousSet.has(option.id);
+    const isSelected = nextSet.has(option.id);
+    if (wasSelected === isSelected) return option;
+    const delta = isSelected ? 1 : -1;
+    // userId can be undefined for a brief window if AuthContext hasn't
+    // populated `user` yet -- never push a literal `undefined` into the
+    // voters array (the reconcile/revert below overwrites it regardless,
+    // but the optimistic window must not carry a bogus entry).
+    const voters = Array.isArray(option.voters) && userId != null
+      ? (isSelected ? [...option.voters, userId] : option.voters.filter((voter) => voter !== userId))
+      : option.voters;
+    return { ...option, vote_count: Math.max(0, (option.vote_count ?? option.voters?.length ?? 0) + delta), voters };
+  });
+  return { ...poll, options, voted_option_ids: nextSelectedIds };
+}
+
 /**
  * dcm's DRF validation errors aren't always {detail}: ConversationAttachmentView
  * translates a rejected upload into a field-keyed {"files": [...]} body (the
@@ -245,6 +269,10 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
   const activeIdRef = useRef(activeConversationId);
   const seenEventsRef = useRef(new Set());
   const filtersRef = useRef(filters);
+  // Per-poll "latest tap wins" token: rapid successive taps race, and a stale
+  // response (revert on failure, or reconcile on success) must not clobber a
+  // newer optimistic state that has already superseded it.
+  const pollVoteTokensRef = useRef({});
   activeIdRef.current = activeConversationId;
   filtersRef.current = filters;
 
@@ -421,11 +449,38 @@ export function MessagingProvider({ children, filters = {}, activeConversationId
     return poll;
   }, [api, patchMessage]);
   const castPollVote = useCallback(async (messageId, poll, optionIds) => {
-    const result = await api.votePoll(poll.id, optionIds);
-    const nextPoll = { ...poll, ...(result?.poll || result) };
-    patchMessage({ ...(cache.messages[messageId] || { id: messageId }), poll: nextPoll });
-    return result;
-  }, [api, cache.messages, patchMessage]);
+    // Optimistic tap-to-vote (MSG-6g), following the same immediate-patch /
+    // reconcile-or-revert shape `toggleReaction` already uses. The previous poll
+    // (pre-tap) is captured up front so a failure can revert to it exactly, not to
+    // whatever `cache.messages` happens to hold when the error arrives.
+    const message = cache.messages[messageId] || { id: messageId };
+    const previousPoll = message.poll || poll;
+    // Project from `previousPoll` (the freshest known state in the shared cache),
+    // never from the caller-supplied `poll` param -- `PollCard` is a "dumb",
+    // prop-driven component that may still be holding the pre-first-tap `poll`
+    // it was originally passed when a second rapid tap fires, and projecting
+    // counts from that stale baseline would compute a wrong transient
+    // vote_count/voters in the SHARED cache (visible to every consumer, not
+    // just this component's own render).
+    const optimisticPoll = applyOptimisticVote(previousPoll, previousPoll.voted_option_ids, optionIds, user?.id);
+    const token = {};
+    pollVoteTokensRef.current[poll.id] = token;
+    patchMessage({ ...message, poll: optimisticPoll });
+    try {
+      const result = await api.votePoll(poll.id, optionIds);
+      // A newer tap already started (and will reconcile/revert for itself) --
+      // applying this now-stale response would stomp on it.
+      if (pollVoteTokensRef.current[poll.id] !== token) return result;
+      const nextPoll = { ...poll, ...(result?.poll || result) };
+      patchMessage({ ...(cache.messages[messageId] || { id: messageId }), poll: nextPoll });
+      return result;
+    } catch (error) {
+      if (pollVoteTokensRef.current[poll.id] === token) {
+        patchMessage({ ...(cache.messages[messageId] || { id: messageId }), poll: previousPoll });
+      }
+      throw error;
+    }
+  }, [api, cache.messages, patchMessage, user]);
   const closeConversationPoll = useCallback(async (messageId, poll) => {
     const result = await api.closePoll(poll.id);
     const nextPoll = { ...poll, ...(result?.poll || result), closed_at: result?.poll?.closed_at || result?.closed_at || new Date().toISOString() };

package/src/messaging/PollCard.jsx

@@ -1,10 +1,26 @@
-import { Alert, Button, Checkbox, FormControlLabel, Paper, Stack, Typography } from '@mui/material';
-import { useEffect, useState } from 'react';
+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';
 
-/** Independently mountable live poll view. Server authorization remains authoritative. */
+/**
+ * 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();
@@ -12,6 +28,10 @@ export function PollCard({ message, canClose: canCloseProp }) {
   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
@@ -25,28 +45,92 @@ export function PollCard({ message, canClose: canCloseProp }) {
   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);
-  const changeSelection = (id) => setSelected((current) => poll.allow_multiple ? (current.includes(id) ? current.filter((value) => value !== id) : [...current, id]) : (current.includes(id) ? [] : [id]));
-  const vote = async () => {
-    if (!selected.length) { setError(t('MessagingPoll.SELECT_OPTION')); return; }
-    setBusy(true); setError(null);
-    try { await castPollVote(message.id, poll, selected); } catch (voteError) { setError(t('MessagingPoll.VOTE_ERROR', { message: extractApiErrorMessage(voteError) })); } finally { setBusy(false); }
+  const totalVotes = (poll.options || []).reduce((sum, option) => sum + (option.vote_count ?? option.voters?.length ?? 0), 0);
+
+  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); }
   };
-  return <Paper variant="outlined" sx={{ p: 1 }} aria-label={t('MessagingPoll.LABEL')}><Stack spacing={0.5}>
+
+  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 = totalVotes > 0 ? Math.round((voteCount / totalVotes) * 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')}` : ''}`;
+    const richLabel = <Stack sx={{ flex: 1, minWidth: 0, opacity: pending.has(option.id) ? 0.6 : 1 }} spacing={0.25}>
+      <Stack direction="row" justifyContent="space-between">
+        <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: 6 }} color={votedByMe ? 'primary' : 'inherit'} />
+    </Stack>;
+    return { accessibleLabel, richLabel };
+  };
+  const formControlSx = { width: '100%', m: 0, alignItems: 'flex-start' };
+
+  return <Paper variant="outlined" sx={{ p: 1 }} aria-label={t('MessagingPoll.LABEL')}><Stack spacing={0.75}>
     <Typography variant="subtitle2">{poll.question}</Typography>
-    {(poll.options || []).map((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). A count is always correct;
-      // marking the viewer's own vote is derivable from voted_option_ids.
-      const votedByMe = Boolean(poll.voted_option_ids?.includes(option.id));
-      const voterCount = option.voters?.length ?? option.vote_count ?? option.votes_count ?? 0;
-      return <FormControlLabel key={option.id} disabled={closed || busy} control={<Checkbox checked={selected.includes(option.id)} onChange={() => changeSelection(option.id)} />} label={`${option.text || option.label} (${option.vote_count ?? voterCount ?? 0})${votedByMe ? ` — ${t('MessagingPoll.YOU_VOTED')}` : ''}`} />;
-    })}
+    {poll.allow_multiple
+      ? (poll.options || []).map((option) => {
+          const { accessibleLabel, richLabel } = optionLabel(option);
+          return <FormControlLabel key={option.id} disabled={closed} sx={formControlSx} label={richLabel}
+            control={<Checkbox checked={selected.includes(option.id)} inputProps={{ 'aria-label': accessibleLabel }} onChange={() => tap(option.id)} sx={{ pt: 0.25 }} />} />;
+        })
+      // 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={formControlSx} 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}><Button size="small" onClick={vote} disabled={closed || busy}>{t('MessagingPoll.VOTE')}</Button>{canClose && !closed && <Button size="small" color="warning" onClick={close} disabled={busy}>{t('MessagingPoll.CLOSE')}</Button>}{closed && <Typography variant="caption">{t('MessagingPoll.CLOSED')}</Typography>}</Stack>
+    <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/tests/messagingCompactBubble.test.jsx

@@ -56,7 +56,9 @@ describe('compact message bubbles', () => {
     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);
+    // MSG-6h: a non-image attachment's visible content is now its filename +
+    // a file icon (the download semantics live in the accessible name).
+    await waitFor(() => expect(screen.getByText('notes.pdf')).toBeTruthy());
+    expect(container.querySelector('.MuiPaper-root').contains(screen.getByText('notes.pdf'))).toBe(true);
   });
 });

package/tests/messagingInteractions.test.jsx

@@ -28,12 +28,19 @@ describe('messaging reactions and polls', () => {
     fireEvent.click(screen.getByRole('button', { name: 'MessagingReactions.TOGGLE' })); await waitFor(() => expect(api.removeReaction).toHaveBeenCalledWith(7, '👍'));
   });
 
-  it('uses single selection for a single poll and preserves selections for a multi poll', async () => {
+  it('taps vote immediately (no submit step): single-choice uses radios and only ever sends the last-tapped option, multi-select uses checkboxes and accumulates', async () => {
+    // MSG-6g: tap-to-vote, no separate "Abstimmen" button.
     const single = baseApi(); single.votePoll.mockResolvedValue({ poll: { id: 1, options: [] } });
     const { unmount } = render(<MessagingProvider api={single} active={false}><PollCard message={{ id: 7, poll: { id: 1, question: 'One', options: [{ id: 1, text: 'A' }, { id: 2, text: 'B' }], allow_multiple: false }}} /></MessagingProvider>);
-    const choices = screen.getAllByRole('checkbox'); fireEvent.click(choices[0]); fireEvent.click(choices[1]); fireEvent.click(screen.getByRole('button', { name: 'MessagingPoll.VOTE' })); await waitFor(() => expect(single.votePoll).toHaveBeenCalledWith(1, [2])); unmount();
+    const radios = screen.getAllByRole('radio');
+    fireEvent.click(radios[0]); await waitFor(() => expect(single.votePoll).toHaveBeenCalledWith(1, [1]));
+    fireEvent.click(radios[1]); await waitFor(() => expect(single.votePoll).toHaveBeenCalledWith(1, [2]));
+    expect(single.votePoll).toHaveBeenCalledTimes(2);
+    unmount();
     const multiple = baseApi(); multiple.votePoll.mockResolvedValue({ poll: { id: 2, options: [] } }); render(<MessagingProvider api={multiple} active={false}><PollCard message={{ id: 8, poll: { id: 2, question: 'Many', options: [{ id: 1, text: 'A' }, { id: 2, text: 'B' }], allow_multiple: true }}} /></MessagingProvider>);
-    const multiChoices = screen.getAllByRole('checkbox'); fireEvent.click(multiChoices[0]); fireEvent.click(multiChoices[1]); fireEvent.click(screen.getByRole('button', { name: 'MessagingPoll.VOTE' })); await waitFor(() => expect(multiple.votePoll).toHaveBeenCalledWith(2, [1, 2]));
+    const multiChoices = screen.getAllByRole('checkbox');
+    fireEvent.click(multiChoices[0]); await waitFor(() => expect(multiple.votePoll).toHaveBeenCalledWith(2, [1]));
+    fireEvent.click(multiChoices[1]); await waitFor(() => expect(multiple.votePoll).toHaveBeenCalledWith(2, [1, 2]));
   });
 
   it('only exposes close to the creator/capability and surfaces a forbidden close', async () => {

package/tests/messagingMsg6g.test.jsx

@@ -0,0 +1,166 @@
+// @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 && Object.keys(options).length ? `${key}:${JSON.stringify(options)}` : key }) }));
+
+const realtimeSubscribers = new Map();
+vi.mock('../src/notifications/realtime', () => ({
+  useRealtime: () => ({
+    subscribe: (envelope, handler) => { realtimeSubscribers.set(envelope, handler); return () => realtimeSubscribers.delete(envelope); },
+    onReconnect: () => () => {},
+  }),
+}));
+function dispatchMessagingFrame(frame) { realtimeSubscribers.get('messaging')?.(frame); }
+
+import { PollCard } from '../src/messaging/PollCard';
+import { MessagingProvider, useMessaging } from '../src/messaging/MessagingProvider';
+
+function baseApi(overrides = {}) {
+  return {
+    listConversations: vi.fn().mockResolvedValue({ results: [] }), listMessages: vi.fn().mockResolvedValue({ results: [] }),
+    getUnreadCount: vi.fn().mockResolvedValue({ unread_count: 0, by_conversation: {} }),
+    votePoll: vi.fn(), closePoll: vi.fn(),
+    ...overrides,
+  };
+}
+function serverPoll(overrides = {}) {
+  return {
+    id: 'poll-1', question: 'Q', allow_multiple: false, closed_at: null, created_by_id: 'user-9',
+    options: [
+      { id: 'opt-a', text: 'A', order: 0, vote_count: 0, voters: [] },
+      { id: 'opt-b', text: 'B', order: 1, vote_count: 0, voters: [] },
+    ],
+    ...overrides,
+  };
+}
+function ConnectedPollCard({ messageId }) {
+  const { cache } = useMessaging();
+  return <PollCard message={cache.messages[messageId]} />;
+}
+function CachePollState({ messageId }) {
+  const { cache } = useMessaging();
+  return <output data-testid="cache-poll">{JSON.stringify(cache.messages[messageId]?.poll)}</output>;
+}
+
+afterEach(() => { cleanup(); realtimeSubscribers.clear(); });
+
+describe('MSG-6g: tap-to-vote poll UI with result bars', () => {
+  it('1. single-choice: tapping an option votes without further interaction; tapping a second option moves the vote', async () => {
+    const api = baseApi();
+    api.votePoll.mockResolvedValueOnce({ poll: { ...serverPoll(), voted_option_ids: ['opt-a'], options: [{ id: 'opt-a', text: 'A', order: 0, vote_count: 1, voters: ['me'] }, { id: 'opt-b', text: 'B', order: 1, vote_count: 0, voters: [] }] } });
+    api.votePoll.mockResolvedValueOnce({ poll: { ...serverPoll(), voted_option_ids: ['opt-b'], options: [{ id: 'opt-a', text: 'A', order: 0, vote_count: 0, voters: [] }, { id: 'opt-b', text: 'B', order: 1, vote_count: 1, voters: ['me'] }] } });
+    render(<MessagingProvider api={api} active={false}><PollCard message={{ id: 'msg-1', poll: serverPoll() }} /></MessagingProvider>);
+    const radios = screen.getAllByRole('radio');
+
+    fireEvent.click(radios[0]);
+    await waitFor(() => expect(api.votePoll).toHaveBeenCalledWith('poll-1', ['opt-a']));
+    expect(radios[0].checked).toBe(true);
+
+    fireEvent.click(radios[1]);
+    await waitFor(() => expect(api.votePoll).toHaveBeenCalledWith('poll-1', ['opt-b']));
+    await waitFor(() => expect(radios[1].checked).toBe(true));
+    expect(radios[0].checked).toBe(false);
+  });
+
+  it('2. multi-select: tapping toggles one option on and off, and each tap sends the complete option-id set', async () => {
+    const api = baseApi();
+    api.votePoll.mockResolvedValue({ poll: serverPoll({ allow_multiple: true }) });
+    render(<MessagingProvider api={api} active={false}><PollCard message={{ id: 'msg-1', poll: serverPoll({ allow_multiple: true }) }} /></MessagingProvider>);
+    const checkboxes = screen.getAllByRole('checkbox');
+
+    fireEvent.click(checkboxes[0]);
+    await waitFor(() => expect(api.votePoll).toHaveBeenCalledWith('poll-1', ['opt-a']));
+    fireEvent.click(checkboxes[1]);
+    await waitFor(() => expect(api.votePoll).toHaveBeenCalledWith('poll-1', ['opt-a', 'opt-b']));
+    fireEvent.click(checkboxes[0]);
+    await waitFor(() => expect(api.votePoll).toHaveBeenCalledWith('poll-1', ['opt-b']));
+    expect(api.votePoll).toHaveBeenCalledTimes(3);
+  });
+
+  it('3. a rejected vote reverts the optimistic state and surfaces an error -- the reverted value, not merely an error message', async () => {
+    const api = baseApi();
+    api.votePoll.mockRejectedValue({ response: { data: { detail: 'Voting disabled' } } });
+    render(<MessagingProvider api={api} active={false}><PollCard message={{ id: 'msg-1', poll: serverPoll() }} /></MessagingProvider>);
+    const radios = screen.getAllByRole('radio');
+
+    fireEvent.click(radios[0]);
+    // Optimistic: briefly checked before the rejection resolves.
+    await waitFor(() => expect(radios[0].checked).toBe(true));
+    await screen.findByRole('alert');
+    await waitFor(() => expect(radios[0].checked).toBe(false));
+    expect(radios[1].checked).toBe(false);
+  });
+
+  it('4. bars render proportionally, including the zero-vote case, with no NaN and no division error', () => {
+    render(<MessagingProvider api={baseApi()} active={false}><PollCard message={{ id: 'msg-1', poll: serverPoll() }} /></MessagingProvider>);
+    // vote_count 0/0 for both options -> 0%, never NaN%.
+    const results = screen.getAllByText(/MessagingPoll\.OPTION_RESULT/);
+    expect(results).toHaveLength(2);
+    results.forEach((node) => {
+      expect(node.textContent).toMatch(/"count":0/);
+      expect(node.textContent).toMatch(/"percent":0/);
+      expect(node.textContent).not.toMatch(/NaN/);
+    });
+  });
+
+  it('5. the viewer\'s own selection survives a poll_updated frame that does not carry voted_option_ids (merge-trap guard)', async () => {
+    const api = baseApi();
+    render(<MessagingProvider api={api} active={false}><ConnectedPollCard messageId="msg-1" /></MessagingProvider>);
+    dispatchMessagingFrame({ envelope: 'messaging', type: 'message', event_id: 'seed', conversation_id: 'conv-1', message: { id: 'msg-1', conversation_id: 'conv-1', kind: 'poll', poll: serverPoll({ voted_option_ids: ['opt-a'], options: [{ id: 'opt-a', text: 'A', order: 0, vote_count: 1, voters: ['me'] }, { id: 'opt-b', text: 'B', order: 1, vote_count: 0, voters: [] }] }) } });
+    await waitFor(() => expect(screen.getAllByRole('radio')[0].checked).toBe(true));
+
+    // A poll_updated frame never carries voted_option_ids (dcm's serialize_poll
+    // is viewer-independent) -- must not wipe the REST-known selection.
+    dispatchMessagingFrame({
+      envelope: 'messaging', type: 'poll_updated', event_id: 'evt-1', conversation_id: 'conv-1', message_id: 'msg-1', poll_id: 'poll-1',
+      poll: serverPoll({ options: [{ id: 'opt-a', text: 'A', order: 0, vote_count: 2, voters: ['me', 'other'] }, { id: 'opt-b', text: 'B', order: 1, vote_count: 0, voters: [] }] }),
+    });
+    await waitFor(() => expect(screen.getByText(/MessagingPoll\.OPTION_RESULT.*"count":2/)).toBeTruthy());
+    expect(screen.getAllByRole('radio')[0].checked).toBe(true);
+  });
+
+  it('6. a closed poll is non-interactive: tapping an option does nothing and issues no request', () => {
+    const api = baseApi();
+    render(<MessagingProvider api={api} active={false}><PollCard message={{ id: 'msg-1', poll: serverPoll({ closed_at: '2026-08-01T00:00:00Z' }) }} /></MessagingProvider>);
+    const radios = screen.getAllByRole('radio');
+    fireEvent.click(radios[0]);
+    expect(api.votePoll).not.toHaveBeenCalled();
+    expect(radios[0].checked).toBe(false);
+  });
+
+  it('a rapid switch (A then B, before the first vote confirms) projects counts from the freshest cache state, not a stale prop (regression)', async () => {
+    // MessagingProvider.castPollVote must build its optimistic count delta from
+    // `previousPoll` (freshly read from the shared cache at call time), never
+    // from the caller-supplied `poll` argument. PollCard is deliberately given
+    // a STATIC message prop here (never re-rendered with a fresh one between
+    // taps, exactly like PollCard's own documented "dumb, prop-driven"
+    // contract, and exactly how a host that doesn't re-connect it to live
+    // cache updates would behave) -- a separate, genuinely cache-connected
+    // reader (CachePollState) is what must show the correct number. Starting
+    // counts are non-zero so a wrong baseline isn't masked by the
+    // Math.max(0, ...) clamp.
+    const api = baseApi();
+    api.votePoll.mockReturnValue(new Promise(() => {})); // never resolves -- isolate the optimistic phase
+    const seedPoll = serverPoll({
+      voted_option_ids: [],
+      options: [
+        { id: 'opt-a', text: 'A', order: 0, vote_count: 5, voters: ['u1', 'u2', 'u3', 'u4', 'u5'] },
+        { id: 'opt-b', text: 'B', order: 1, vote_count: 2, voters: ['u6', 'u7'] },
+      ],
+    });
+    render(<MessagingProvider api={api} active={false}><PollCard message={{ id: 'msg-1', poll: seedPoll }} /><CachePollState messageId="msg-1" /></MessagingProvider>);
+    const radios = screen.getAllByRole('radio');
+
+    fireEvent.click(radios[0]); // vote A: 5 -> 6
+    await waitFor(() => expect(JSON.parse(screen.getByTestId('cache-poll').textContent).options.find((option) => option.id === 'opt-a').vote_count).toBe(6));
+
+    fireEvent.click(radios[1]); // switch to B: A must go 6 -> 5 in the shared cache (a stale-prop baseline of 5 would wrongly compute 4)
+    await waitFor(() => {
+      const poll = JSON.parse(screen.getByTestId('cache-poll').textContent);
+      expect(poll.options.find((option) => option.id === 'opt-a').vote_count).toBe(5);
+      expect(poll.options.find((option) => option.id === 'opt-b').vote_count).toBe(3);
+    });
+  });
+});