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

package/src/messaging/Composer.jsx

@@ -1,197 +0,0 @@
-import { Alert, Box, Button, Checkbox, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, FormControlLabel, IconButton, LinearProgress, Popover, Stack, TextField, Typography } from '@mui/material';
-import AttachFileIcon from '@mui/icons-material/AttachFile';
-import CampaignOutlinedIcon from '@mui/icons-material/CampaignOutlined';
-import CloseIcon from '@mui/icons-material/Close';
-import EmojiEmotionsOutlinedIcon from '@mui/icons-material/EmojiEmotionsOutlined';
-import PollOutlinedIcon from '@mui/icons-material/PollOutlined';
-import { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { compressImageForUpload } from './composerImageCompression';
-import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
-
-export const COMPOSER_EMOJI_BUTTON_SX = { fontSize: '1.15rem' };
-export const COMPOSER_MESSAGE_FIELD_SX = { flex: 1, minWidth: 120 };
-export const COMPOSER_SEND_BUTTON_SX = { flexShrink: 0 };
-
-// A wider, Composer-only set (MSG-6i) -- deliberately separate from
-// ReactionBar's own QUICK_EMOJIS (5, curated for fast reactions). Mobile
-// users already have a full native emoji keyboard for free-form text; this
-// exists for desktop, where that's far less discoverable. Not a search
-// picker -- a fixed curated grid, easy to extend later.
-const COMPOSER_EMOJIS = [
-  '😀', '😂', '😊', '😍', '😉', '😢', '😮', '😡',
-  '👍', '👎', '👏', '🙏', '💪', '🤝', '✌️', '👋',
-  '❤️', '💕', '🔥', '🎉', '🎈', '⭐', '✅', '❌',
-  '☀️', '🌧️', '⚽', '🍕',
-];
-
-function newRequestId() { return globalThis.crypto?.randomUUID?.() || `message-${Date.now()}-${Math.random().toString(36).slice(2)}`; }
-function isImage(file) { return file.type?.startsWith('image/'); }
-
-/**
- * A provider-backed, independently mountable REST composer.
- *
- * `allowAnnouncement` and `linkTarget`: whether announcement composing (jg's
- * `AnnouncementDialog` — title + body + a deep-link target) is offered here at
- * all is a host decision (the server enforces who may actually post one; the
- * client only offers the affordance). `linkTarget`'s VALUE is inherently
- * app-specific navigation context (jg pre-fills it from the currently open
- * event-info section) that ucm cannot compute itself, so the host supplies it.
- * Broadcasting to a 1:1 direct conversation is never meaningful regardless of
- * what the host passes for `allowAnnouncement` (typically an event-manager
- * permission check with no notion of the currently open conversation's kind),
- * so this is excluded here rather than relying on every host to remember it.
- */
-export function Composer({ conversationId, conversation, replyTarget = null, onReplyTargetChange, allowAnnouncement = false, linkTarget }) {
-  const canAnnounce = allowAnnouncement && conversation?.kind !== 'direct';
-  const { t } = useTranslation();
-  const { sendMessage, sendAttachments, createConversationPoll } = useMessaging();
-  const [body, setBody] = useState('');
-  const [files, setFiles] = useState([]);
-  const [error, setError] = useState(null);
-  const [failed, setFailed] = useState(null);
-  const [sending, setSending] = useState(false);
-  const [pollOpen, setPollOpen] = useState(false);
-  const [pollQuestion, setPollQuestion] = useState('');
-  const [pollOptions, setPollOptions] = useState(['', '']);
-  const [allowMultiple, setAllowMultiple] = useState(false);
-  const [announcementOpen, setAnnouncementOpen] = useState(false);
-  const [announcementTitle, setAnnouncementTitle] = useState('');
-  const [announcementBody, setAnnouncementBody] = useState('');
-  const [emojiAnchor, setEmojiAnchor] = useState(null);
-  const [previews, setPreviews] = useState([]);
-  const [uploadProgress, setUploadProgress] = useState(null);
-  const inputRef = useRef(null);
-  const messageInputRef = useRef(null);
-  useEffect(() => {
-    if (replyTarget?.deleted_at) onReplyTargetChange?.(null);
-  }, [replyTarget, onReplyTargetChange]);
-  useEffect(() => { setBody(''); setFiles([]); }, [conversationId]);
-  useEffect(() => {
-    const urls = files.map((file) => isImage(file) ? URL.createObjectURL(file) : null);
-    setPreviews(urls);
-    return () => urls.filter(Boolean).forEach((url) => URL.revokeObjectURL(url));
-  }, [files]);
-  const submit = async (requestId = newRequestId(), retry = false) => {
-    if (!body.trim() && !files.length) return;
-    setSending(true); setError(null);
-    const payload = { kind: 'chat', body: body.trim() || undefined, reply_to: replyTarget?.id || undefined, client_request_id: requestId };
-    try {
-      if (files.length) {
-        const formData = new FormData();
-        const uploadFiles = await Promise.all(files.map(compressImageForUpload));
-        uploadFiles.forEach((file) => formData.append('files[]', file));
-        if (payload.body) formData.append('body', payload.body);
-        if (payload.reply_to) formData.append('reply_to', String(payload.reply_to));
-        formData.append('client_request_id', requestId);
-        setUploadProgress(0);
-        const onUploadProgress = (event) => setUploadProgress(event.total ? Math.round((event.loaded / event.total) * 100) : null);
-        await sendAttachments(conversationId, formData, { clientRequestId: requestId, retry, onUploadProgress, optimisticMessage: { body: payload.body, reply_to: payload.reply_to, attachments: files.map((file, index) => ({ id: `local-${requestId}-${index}`, filename: file.name, content_type: file.type })) } });
-      } else await sendMessage(conversationId, payload, { clientRequestId: requestId, retry });
-      setBody(''); setFiles([]); setFailed(null); onReplyTargetChange?.(null);
-    } catch (sendError) {
-      const message = extractApiErrorMessage(sendError);
-      setError(files.length ? t('MessagingComposer.UPLOAD_ERROR', { message }) : t('MessagingComposer.SEND_ERROR', { message }));
-      setFailed({ requestId, retry: true });
-    } finally { setSending(false); setUploadProgress(null); }
-  };
-  const removeFile = (index) => setFiles((current) => current.filter((_, fileIndex) => fileIndex !== index));
-  const insertEmoji = (emoji) => {
-    const input = messageInputRef.current?.querySelector?.('textarea') || messageInputRef.current;
-    const start = input?.selectionStart ?? body.length;
-    const end = input?.selectionEnd ?? start;
-    setBody(`${body.slice(0, start)}${emoji}${body.slice(end)}`); setEmojiAnchor(null);
-    requestAnimationFrame(() => { input?.focus(); input?.setSelectionRange(start + emoji.length, start + emoji.length); });
-  };
-  const submitPoll = async () => {
-    const options = pollOptions.map((option) => option.trim()).filter(Boolean);
-    if (!pollQuestion.trim() || options.length < 2) { setError(t('MessagingPoll.CREATE_VALIDATION')); return; }
-    setSending(true); setError(null);
-    try {
-      await createConversationPoll(conversationId, { question: pollQuestion.trim(), options, allow_multiple: allowMultiple }, { clientRequestId: newRequestId() });
-      setPollQuestion(''); setPollOptions(['', '']); setAllowMultiple(false); setPollOpen(false);
-    } catch (pollError) { setError(t('MessagingPoll.CREATE_ERROR', { message: extractApiErrorMessage(pollError) })); } finally { setSending(false); }
-  };
-  const submitAnnouncement = async () => {
-    if (!announcementTitle.trim()) { setError(t('MessagingAnnouncement.VALIDATION')); return; }
-    setSending(true); setError(null);
-    const requestId = newRequestId();
-    try {
-      await sendMessage(conversationId, {
-        kind: 'announcement',
-        title: announcementTitle.trim(),
-        body: announcementBody.trim() || undefined,
-        link_target: linkTarget || undefined,
-        client_request_id: requestId,
-      }, { clientRequestId: requestId });
-      setAnnouncementTitle(''); setAnnouncementBody(''); setAnnouncementOpen(false);
-    } catch (announcementError) { setError(t('MessagingAnnouncement.ERROR', { message: extractApiErrorMessage(announcementError) })); } finally { setSending(false); }
-  };
-  return <Stack component="form" spacing={1} onSubmit={(event) => { event.preventDefault(); submit(); }} aria-label={t('MessagingComposer.LABEL')}>
-    {replyTarget && <Alert severity="info" onClose={() => onReplyTargetChange?.(null)}>{t('MessagingComposer.REPLYING_TO', { sender: replyTarget.sender?.display_name || t('MessagingThread.UNKNOWN_SENDER') })}</Alert>}
-    {error && <Alert severity="error" role="alert">{error}</Alert>}
-    {files.length > 0 && <Stack direction="row" spacing={0.5} flexWrap="wrap" aria-label={t('MessagingComposer.STAGED_FILES')}>
-      {files.map((file, index) => <Stack key={`${file.name}-${index}`} direction="row" alignItems="center" spacing={0.25} sx={{ border: 1, borderColor: 'divider', borderRadius: 1, p: 0.25 }}>
-        {previews[index] && <Box component="img" src={previews[index]} alt={file.name} width={36} height={36} sx={{ objectFit: 'cover' }} />}
-        <Typography variant="caption">{file.name}</Typography><IconButton type="button" size="small" aria-label={t('MessagingComposer.REMOVE_ATTACHMENT', { name: file.name })} onClick={() => removeFile(index)}><CloseIcon fontSize="inherit" /></IconButton>
-      </Stack>)}
-    </Stack>}
-    {files.length > 0 && <Typography variant="caption">{t('MessagingComposer.FILES_SELECTED', { count: files.length })}</Typography>}
-    <Stack direction="row" spacing={1}>
-      <input ref={inputRef} hidden type="file" multiple onChange={(event) => setFiles(Array.from(event.target.files || []))} />
-      <IconButton type="button" aria-label={t('MessagingComposer.ADD_ATTACHMENT')} onClick={() => inputRef.current?.click()}><AttachFileIcon /></IconButton>
-      <IconButton type="button" aria-label={t('MessagingComposer.ADD_EMOJI')} onClick={(event) => setEmojiAnchor(event.currentTarget)}><EmojiEmotionsOutlinedIcon /></IconButton>
-      <IconButton type="button" aria-label={t('MessagingPoll.CREATE')} disabled={pollOpen || files.some(isImage)} onClick={() => setPollOpen(true)}><PollOutlinedIcon /></IconButton>
-      {canAnnounce && <IconButton type="button" aria-label={t('MessagingAnnouncement.CREATE')} onClick={() => setAnnouncementOpen(true)}><CampaignOutlinedIcon /></IconButton>}
-    </Stack>
-    <Stack direction="row" spacing={1} alignItems="flex-end">
-      <TextField inputRef={messageInputRef} fullWidth multiline minRows={2} value={body} onChange={(event) => setBody(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) { event.preventDefault(); submit(); } }} label={t('MessagingComposer.MESSAGE')} disabled={sending} sx={COMPOSER_MESSAGE_FIELD_SX} />
-      <Button type="submit" variant="contained" disabled={sending || (!body.trim() && !files.length)} sx={COMPOSER_SEND_BUTTON_SX}>{t('MessagingComposer.SEND')}</Button>
-    </Stack>
-    {sending && files.length > 0 && <Stack spacing={0.5} role="status">
-      <Stack direction="row" spacing={1} alignItems="center">
-        {uploadProgress == null ? <CircularProgress size={16} /> : <CircularProgress size={16} variant="determinate" value={uploadProgress} />}
-        <Typography variant="caption">{t('MessagingComposer.UPLOADING')}</Typography>
-      </Stack>
-      {uploadProgress != null && <LinearProgress variant="determinate" value={uploadProgress} />}
-    </Stack>}
-    {failed && <Button type="button" onClick={() => submit(failed.requestId, true)} disabled={sending}>{t('MessagingComposer.RETRY')}</Button>}
-    <Popover
-      anchorEl={emojiAnchor}
-      open={Boolean(emojiAnchor)}
-      onClose={() => setEmojiAnchor(null)}
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-      transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-    >
-      {/*
-        A Popover, not a Menu: this is a grid of plain buttons, not a linear
-        list of menuitems, so MUI's Menu/MenuList roving-tabindex arrow-key
-        navigation does not apply here and (via role="menu") would advertise
-        semantics the grid can't deliver. Popover leaves keyboard traversal to
-        the browser's native Tab order, which does work for a button grid.
-      */}
-      <Box role="group" aria-label={t('MessagingComposer.EMOJI_PICKER')} sx={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 0.25, p: 0.5, maxWidth: 280 }}>
-        {COMPOSER_EMOJIS.map((emoji) => (
-          <IconButton key={emoji} type="button" size="small" onClick={() => insertEmoji(emoji)} sx={COMPOSER_EMOJI_BUTTON_SX}>
-            {emoji}
-          </IconButton>
-        ))}
-      </Box>
-    </Popover>
-    <Dialog open={pollOpen} onClose={() => !sending && setPollOpen(false)} fullWidth maxWidth="sm">
-      <DialogTitle>{t('MessagingPoll.CREATE')}</DialogTitle><DialogContent><Stack spacing={1} sx={{ pt: 1 }}>
-        <TextField label={t('MessagingPoll.QUESTION')} value={pollQuestion} onChange={(event) => setPollQuestion(event.target.value)} autoFocus />
-        {pollOptions.map((option, index) => <TextField key={index} label={t('MessagingPoll.OPTION', { count: index + 1 })} value={option} onChange={(event) => setPollOptions((current) => current.map((value, optionIndex) => optionIndex === index ? event.target.value : value))} />)}
-        <Button type="button" disabled={pollOptions.length >= 10} onClick={() => setPollOptions((current) => [...current, ''])}>{t('MessagingPoll.ADD_OPTION')}</Button>
-        <FormControlLabel control={<Checkbox checked={allowMultiple} onChange={(event) => setAllowMultiple(event.target.checked)} />} label={t('MessagingPoll.ALLOW_MULTIPLE')} />
-      </Stack></DialogContent><DialogActions><Button onClick={() => setPollOpen(false)}>{t('MessagingPoll.CANCEL')}</Button><Button variant="contained" onClick={submitPoll} disabled={sending}>{t('MessagingPoll.CREATE')}</Button></DialogActions>
-    </Dialog>
-    {canAnnounce && <Dialog open={announcementOpen} onClose={() => !sending && setAnnouncementOpen(false)} fullWidth maxWidth="sm">
-      <DialogTitle>{t('MessagingAnnouncement.CREATE')}</DialogTitle><DialogContent><Stack spacing={1} sx={{ pt: 1 }}>
-        <TextField label={t('MessagingAnnouncement.TITLE')} value={announcementTitle} onChange={(event) => setAnnouncementTitle(event.target.value)} autoFocus />
-        <TextField label={t('MessagingAnnouncement.BODY')} value={announcementBody} onChange={(event) => setAnnouncementBody(event.target.value)} multiline minRows={2} />
-      </Stack></DialogContent><DialogActions><Button onClick={() => setAnnouncementOpen(false)}>{t('MessagingAnnouncement.CANCEL')}</Button><Button variant="contained" onClick={submitAnnouncement} disabled={sending}>{t('MessagingAnnouncement.SEND')}</Button></DialogActions>
-    </Dialog>}
-  </Stack>;
-}

package/src/messaging/ConversationLaunchers.jsx

@@ -1,51 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { Alert, Button, Stack } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-import { useMessaging } from './MessagingProvider';
-
-/**
- * Host apps provide launchable scopes. This component owns the REST transition
- * that turns one into a normalized conversation, but deliberately does not
- * discover groups itself: that is app-specific scope-picker data.
- */
-export function ConversationLaunchers({ groupLaunchers = [], broadcastLauncher, autoOpenBroadcast = false, onOpen }) {
-  const { t } = useTranslation();
-  const { openGroupConversation, openBroadcastConversation } = useMessaging();
-  const [error, setError] = useState(null);
-  const autoOpened = useRef(false);
-
-  const open = async (kind, payload) => {
-    setError(null);
-    try {
-      const conversation = kind === 'broadcast'
-        ? await openBroadcastConversation(payload)
-        : await openGroupConversation(payload);
-      onOpen?.(conversation);
-    } catch {
-      setError(t('MessagingLaunchers.OPEN_ERROR'));
-    }
-  };
-
-  useEffect(() => {
-    if (!autoOpenBroadcast || !broadcastLauncher || autoOpened.current) return;
-    autoOpened.current = true;
-    open('broadcast', broadcastLauncher.payload ?? broadcastLauncher);
-  }, [autoOpenBroadcast, broadcastLauncher]); // one intentional auto-open per mounted launcher
-
-  return (
-    <Stack spacing={1}>
-      {broadcastLauncher && !autoOpenBroadcast && (
-        <Button variant="outlined" onClick={() => open('broadcast', broadcastLauncher.payload ?? broadcastLauncher)}>
-          {broadcastLauncher.label || t('MessagingLaunchers.OPEN_BROADCAST')}
-        </Button>
-      )}
-      {groupLaunchers.map((launcher) => (
-        <Button key={launcher.id ?? launcher.label} variant="outlined" onClick={() => open('group', launcher.payload ?? launcher)}>
-          {launcher.label || t('MessagingLaunchers.OPEN_GROUP')}
-        </Button>
-      ))}
-      {error && <Alert severity="error">{error}</Alert>}
-    </Stack>
-  );
-}

package/src/messaging/ConversationList.jsx

@@ -1,109 +0,0 @@
-import { useMemo, useState } from 'react';
-import { Archive, Campaign, Groups, MoreVert, NotificationsOff, Person } from '@mui/icons-material';
-import { Badge, Box, Button, CircularProgress, IconButton, List, ListItemButton, ListItemText, Menu, MenuItem, Stack, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-import { useMessaging } from './MessagingProvider';
-import { ConversationLaunchers } from './ConversationLaunchers';
-
-// external_key (dcm 2.38.0+) is the consuming app's own identity for a
-// managed conversation — ucm must not know what any particular app's values
-// mean, so a label for it is host-supplied only; resolveManagedLabel receives
-// the raw conversation (including external_key) and owns all interpretation.
-// dcm's `other_user_id` (added alongside this) is a bare id, deliberately never
-// a resolved name — the same reason a message's `sender_id` carries no display
-// name — so a direct conversation's counterpart name is host-supplied, exactly
-// like a managed conversation's label above.
-function titleOf(conversation, t, resolveManagedLabel, resolveDirectUserName) {
-  // Not gated on kind === 'managed': a host resolver already returns null to
-  // mean "I have no label for this conversation" (the delegation contract
-  // this comment block describes above), so gating here duplicated a
-  // decision that belongs to the host and silently made the resolver
-  // unreachable for any kind the host later decided to label (found live:
-  // jg-ferien's resolver was taught to handle 'broadcast' too, but never got
-  // a chance to run because this gate excluded it).
-  if (resolveManagedLabel) {
-    const label = resolveManagedLabel(conversation);
-    if (label) return label;
-  }
-  if (conversation.kind === 'direct' && conversation.other_user_id != null && resolveDirectUserName) {
-    const name = resolveDirectUserName(conversation.other_user_id);
-    if (name) return name;
-  }
-  return conversation.title || conversation.other_user?.display_name || conversation.other_user?.username || t('MessagingList.UNTITLED');
-}
-function ordered(conversations) {
-  return [...conversations].sort((left, right) => new Date(right.last_message_at || 0) - new Date(left.last_message_at || 0));
-}
-function relativeTime(value, locale) {
-  if (!value) return null;
-  const seconds = Math.max(0, Math.floor((Date.now() - new Date(value).getTime()) / 1000));
-  const [amount, unit] = seconds < 60 ? [0, 'second'] : seconds < 3600 ? [Math.floor(seconds / 60), 'minute'] : seconds < 86400 ? [Math.floor(seconds / 3600), 'hour'] : [Math.floor(seconds / 86400), 'day'];
-  return new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: 'narrow' }).format(-amount, unit);
-}
-// jg's ConversationList renders a distinct icon per conversation kind so a
-// user can identify type/person at a glance (getConversationAvatar); that
-// glanceable identification is a feature, not layout, so it's reproduced
-// here rather than left as a generic archive-status glyph.
-function KindIcon({ conversation }) {
-  if (conversation.kind === 'broadcast') return <Campaign fontSize="small" />;
-  if (conversation.kind === 'group' || conversation.kind === 'managed' || conversation.kind === 'object_thread') return <Groups fontSize="small" />;
-  return <Person fontSize="small" />;
-}
-
-/** A standalone, provider-backed list; scope picker metadata is supplied as launcher props. */
-export function ConversationList({ onOpen, groupLaunchers, broadcastLauncher, autoOpenBroadcast = false, includeArchived = false, resolveManagedLabel, resolveDirectUserName }) {
-  const { t, i18n } = useTranslation();
-  const { cache, activeConversationId, loadMoreConversations, setConversationArchived, setConversationPreferences } = useMessaging();
-  const [menuConversation, setMenuConversation] = useState(null);
-  const [menuAnchor, setMenuAnchor] = useState(null);
-  const [loadingMore, setLoadingMore] = useState(false);
-  const [error, setError] = useState(null);
-  const conversations = useMemo(() => ordered(Object.values(cache.conversations).filter((item) => includeArchived || !item.archived_at && !item.archived)), [cache.conversations, includeArchived]);
-  const unreadFor = (conversation) => conversation.unread_count ?? cache.unread.by_conversation?.[conversation.id] ?? 0;
-  // Once opened, the broadcast conversation becomes a normal, recency-sorted
-  // row with real unread/preview state — hide the static launcher so it isn't
-  // shown twice (button + list row) with the button's stale, unread-less copy.
-  const broadcastAlreadyOpened = useMemo(() => Object.values(cache.conversations).some((item) => item.kind === 'broadcast'), [cache.conversations]);
-
-  const loadMore = async () => {
-    setLoadingMore(true); setError(null);
-    try { await loadMoreConversations(); } catch { setError(t('MessagingList.LOAD_ERROR')); } finally { setLoadingMore(false); }
-  };
-  const closeMenu = () => { setMenuConversation(null); setMenuAnchor(null); };
-  const archive = async () => {
-    try { await setConversationArchived(menuConversation.id, true); } catch { setError(t('MessagingList.ARCHIVE_ERROR')); }
-    closeMenu();
-  };
-  const toggleMute = async () => {
-    try { await setConversationPreferences(menuConversation.id, { muted: !menuConversation.muted }); } catch { setError(t('MessagingList.PREFERENCES_ERROR')); }
-    closeMenu();
-  };
-
-  return (
-    <Stack spacing={1}>
-      <ConversationLaunchers groupLaunchers={groupLaunchers} broadcastLauncher={broadcastAlreadyOpened ? null : broadcastLauncher} autoOpenBroadcast={autoOpenBroadcast && !broadcastAlreadyOpened} onOpen={onOpen} />
-      {error && <Typography color="error" role="alert">{error}</Typography>}
-      {!conversations.length ? <Box sx={{ py: 3, textAlign: 'center' }}><Typography color="text.secondary">{t('MessagingList.EMPTY')}</Typography></Box> : (
-        <List disablePadding aria-label={t('MessagingList.LABEL')}>
-          {conversations.map((conversation) => {
-            const unread = unreadFor(conversation);
-            const archived = Boolean(conversation.archived || conversation.archived_at);
-            return <ListItemButton key={conversation.id} selected={conversation.id === activeConversationId} onClick={() => onOpen?.(conversation)} sx={{ minHeight: 64, opacity: archived ? 0.6 : 1 }}>
-              <Badge color="error" badgeContent={unread || null} max={99} sx={{ mr: 2 }}>
-                {archived ? <Archive fontSize="small" color="disabled" /> : <KindIcon conversation={conversation} />}
-              </Badge>
-              <ListItemText primary={<Stack direction="row" spacing={1} justifyContent="space-between"><Typography component="span" fontWeight={unread ? 700 : 400} noWrap>{titleOf(conversation, t, resolveManagedLabel, resolveDirectUserName)}</Typography>{relativeTime(conversation.last_message_at, i18n?.language) && <Typography component="span" variant="caption" color="text.secondary" noWrap>{relativeTime(conversation.last_message_at, i18n?.language)}</Typography>}</Stack>} secondary={conversation.last_message?.excerpt || t('MessagingList.NO_MESSAGES')} secondaryTypographyProps={{ noWrap: true }} />
-              <IconButton aria-label={t('MessagingList.ACTIONS')} onClick={(event) => { event.stopPropagation(); setMenuAnchor(event.currentTarget); setMenuConversation(conversation); }}><MoreVert /></IconButton>
-            </ListItemButton>;
-          })}
-        </List>
-      )}
-      {cache.cursors.conversations && <Button onClick={loadMore} disabled={loadingMore}>{loadingMore ? <CircularProgress size={18} /> : t('MessagingList.LOAD_MORE')}</Button>}
-      <Menu anchorEl={menuAnchor} open={Boolean(menuConversation)} onClose={closeMenu}>
-        <MenuItem onClick={toggleMute}><NotificationsOff fontSize="small" sx={{ mr: 1 }} />{menuConversation?.muted ? t('MessagingList.UNMUTE') : t('MessagingList.MUTE')}</MenuItem>
-        <MenuItem onClick={archive}><Archive fontSize="small" sx={{ mr: 1 }} />{t('MessagingList.ARCHIVE')}</MenuItem>
-      </Menu>
-    </Stack>
-  );
-}

package/src/messaging/DirectMessageLauncher.jsx

@@ -1,112 +0,0 @@
-import { useId, useMemo, useState } from 'react';
-import {
-  Alert,
-  Autocomplete,
-  Button,
-  CircularProgress,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  TextField,
-  Typography,
-  useMediaQuery,
-} from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { useTranslation } from 'react-i18next';
-
-import { extractApiErrorMessage, useMessaging } from './MessagingProvider';
-
-export const DIRECT_MESSAGE_LAUNCHER_ALERT_SX = { mb: 1 };
-
-function candidateLabel(candidate) {
-  if (!candidate) return '';
-  return candidate.display_name || candidate.name || candidate.label || String(candidate.id);
-}
-
-/**
- * Starts direct conversations from host-provided people. Candidate discovery is
- * intentionally outside messaging because memberships are host-domain data.
- */
-export function DirectMessageLauncher({ candidates = [], scope, onOpen }) {
-  const { t } = useTranslation();
-  const { openDirectConversation } = useMessaging();
-  const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
-  const [open, setOpen] = useState(false);
-  const [selectedId, setSelectedId] = useState(null);
-  const [starting, setStarting] = useState(false);
-  const [error, setError] = useState(null);
-  const titleId = useId();
-  const selectedCandidate = useMemo(
-    () => candidates.find((candidate) => candidate.id === selectedId) || null,
-    [candidates, selectedId],
-  );
-
-  const showPicker = () => {
-    setSelectedId(null);
-    setError(null);
-    setOpen(true);
-  };
-  const closePicker = () => {
-    if (!starting) setOpen(false);
-  };
-  const start = async () => {
-    if (selectedId == null || starting) return;
-    setStarting(true);
-    setError(null);
-    try {
-      const effectiveScope = selectedCandidate?.scope ?? scope;
-      const conversation = await openDirectConversation({
-        target_user_id: selectedId,
-        ...(effectiveScope == null ? {} : { scope: effectiveScope }),
-      });
-      setOpen(false);
-      onOpen?.(conversation);
-    } catch (requestError) {
-      setError(extractApiErrorMessage(requestError) || t('MessagingDirect.START_ERROR'));
-    } finally {
-      setStarting(false);
-    }
-  };
-
-  return (
-    <>
-      <Button variant="outlined" onClick={showPicker}>{t('MessagingDirect.LAUNCH')}</Button>
-      <Dialog open={open} onClose={closePicker} fullScreen={fullScreen} aria-labelledby={titleId}>
-        <DialogTitle id={titleId}>{t('MessagingDirect.TITLE')}</DialogTitle>
-        <DialogContent>
-          {error && <Alert severity="error" sx={DIRECT_MESSAGE_LAUNCHER_ALERT_SX}>{error}</Alert>}
-          {starting && <Typography role="status" sx={{ mb: 1 }}><CircularProgress size={16} sx={{ mr: 1 }} />{t('MessagingDirect.STARTING')}</Typography>}
-          {candidates.length === 0 ? (
-            <Typography>{t('MessagingDirect.EMPTY')}</Typography>
-          ) : (
-            <Autocomplete
-              fullWidth
-              options={candidates}
-              value={selectedCandidate}
-              onChange={(_event, nextValue) => setSelectedId(nextValue?.id ?? null)}
-              getOptionLabel={candidateLabel}
-              isOptionEqualToValue={(option, value) => option.id === value.id}
-              disabled={starting}
-              noOptionsText={t('MessagingDirect.NO_MATCHES')}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  label={t('MessagingDirect.CANDIDATES')}
-                  placeholder={t('MessagingDirect.SEARCH_PLACEHOLDER')}
-                />
-              )}
-            />
-          )}
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={closePicker} disabled={starting}>{t('MessagingDirect.CANCEL')}</Button>
-          <Button variant="contained" onClick={start} disabled={selectedId == null || starting}>
-            {t('MessagingDirect.START')}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </>
-  );
-}