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

package/src/messaging/Thread.jsx

@@ -1,195 +0,0 @@
-import { Alert, Badge, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { AuthContext } from '../auth/AuthContext';
-import { MessageBubble } from './MessageBubble';
-import { MESSAGING_ENVELOPE, useMessaging } from './MessagingProvider';
-import { ReadTicks } from './ReadTicks';
-import { useRealtime } from '../notifications/realtime';
-
-export const THREAD_DAY_SEPARATOR_SX = { flex: 1 };
-
-function chronological(messages) { return [...messages].sort((left, right) => new Date(left.created_at || 0) - new Date(right.created_at || 0)); }
-function replyToId(message) { return message.reply_to_id ?? message.reply_to; }
-// last_reply_at/reply_count are viewer-independent (always on serialize_message);
-// thread_last_read_at is viewer-specific and REST-only (never on a frame — see
-// MessagingProvider.jsx's applyFrame merge-trap handling). A null receipt with
-// at least one reply counts as unread; no replies means no marker at all.
-function hasUnreadReplies(message, receipts, userId) {
-  if (!message.reply_count) return false;
-  const lastReadAt = receipts[`thread:${message.id}:${userId}`]?.last_read_at ?? message.thread_last_read_at;
-  if (lastReadAt == null) return true;
-  return Boolean(message.last_reply_at) && new Date(message.last_reply_at) > new Date(lastReadAt);
-}
-// A still-pending optimistic row (chunk 4) has a fake `local-<requestId>` id
-// and no durable server row yet — mounting ReadTicks against it would fire a
-// getMessageReadStatus REST call for an id the server has never heard of.
-// Wait for reconciliation (status !== 'pending') before showing read state.
-function canShowReadTicks(message, user) {
-  return Boolean(user?.id) && message.sender?.id === user.id && message.status !== 'pending';
-}
-
-/**
- * A standalone timeline. Compose/reaction/poll/attachment mutations remain
- * separate chunk collaborators.
- *
- * ReadTicks is only mounted for the current user's own messages (matches
- * jg's `shouldShowReadTick(msg, isOwn)`): a read receipt tells the sender
- * whether their own message was seen, not the recipient anything about a
- * message they're currently reading. Gating here also bounds the number of
- * `getMessageReadStatus` REST calls a rendered timeline fires — one per own
- * message shown, not one per message in the conversation.
- */
-export function Thread({ conversationId, onReplyTargetChange, canModerateMessages = false, onAnnouncementLink }) {
-  const { t, i18n } = useTranslation();
-  const { user } = useContext(AuthContext) || {};
-  const { cache, loadMoreMessages, loadThreadReplies, markConversationRead, markThreadRead, refreshThread } = useMessaging();
-  const { subscribe } = useRealtime();
-  const scrollRef = useRef(null);
-  const wasNearBottomRef = useRef(true);
-  const messageCountRef = useRef(0);
-  const [loadingOlder, setLoadingOlder] = useState(false);
-  const [loadingInitial, setLoadingInitial] = useState(false);
-  const [error, setError] = useState(null);
-  const [replyingTo, setReplyingTo] = useState(null);
-  const [openThreads, setOpenThreads] = useState({});
-  const conversation = cache.conversations[conversationId];
-  const conversationMessages = useMemo(() => chronological(Object.values(cache.messages).filter((message) => message.conversation_id === conversationId)), [cache.messages, conversationId]);
-  const roots = useMemo(() => chronological(Object.values(cache.messages).filter((message) => message.conversation_id === conversationId && !replyToId(message))), [cache.messages, conversationId]);
-  const datedRoots = useMemo(() => roots.map((message, index) => ({ message, showDateSeparator: index > 0 && new Date(roots[index - 1].created_at).toDateString() !== new Date(message.created_at).toDateString() })), [roots]);
-
-  useEffect(() => { if (conversationId != null) markConversationRead(conversationId).catch(() => {}); }, [conversationId, markConversationRead]);
-  // Re-mark read when a live message frame arrives for the conversation
-  // currently open -- without this, `read_count` biases downward for the
-  // person paying the most attention: the mount-effect above only fires once
-  // per open, so a viewer already sitting in the thread when a new message
-  // lands is recorded as "not read" until they navigate away and back.
-  // Subscribes independently of MessagingProvider's own subscription to the
-  // same envelope (the registry supports multiple handlers per envelope) so
-  // this stays a Thread-local concern, not a MessagingProvider reducer change.
-  // No sender check needed: dcm's `resolve_live_recipients(sender=actor)`
-  // already excludes the sender from the live fan-out, so a `message` frame
-  // for this conversation structurally cannot be the viewer's own send.
-  useEffect(() => {
-    if (conversationId == null) return undefined;
-    return subscribe(MESSAGING_ENVELOPE, (frame) => {
-      if (frame.type !== 'message') return;
-      const frameConversationId = frame.conversation_id ?? frame.message?.conversation_id;
-      if (String(frameConversationId) !== String(conversationId)) return;
-      if (document.visibilityState === 'hidden') return;
-      markConversationRead(conversationId).catch(() => {});
-    });
-  }, [conversationId, markConversationRead, subscribe]);
-  useEffect(() => { wasNearBottomRef.current = true; messageCountRef.current = 0; }, [conversationId]);
-  // Nothing else in this component ever fetches messages for the conversation
-  // actually being opened — `cache.messages` is otherwise only populated by a
-  // live realtime frame arriving while mounted, or this browser's own
-  // optimistic send. A conversation whose history predates this session (the
-  // common case — every DM someone didn't have open when a message arrived)
-  // rendered as permanently empty despite the conversation list correctly
-  // showing a last-message preview, which comes from a completely different
-  // request. Fetch on open, every time — a stale first page is worse than a
-  // redundant one.
-  useEffect(() => {
-    if (conversationId == null) return undefined;
-    let cancelled = false;
-    setLoadingInitial(true);
-    setError(null);
-    refreshThread(conversationId)
-      .catch(() => { if (!cancelled) setError(t('MessagingThread.LOAD_ERROR')); })
-      .finally(() => { if (!cancelled) setLoadingInitial(false); });
-    return () => { cancelled = true; };
-    // `t` deliberately not in deps: a language switch mid-flight must not re-trigger the fetch.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [conversationId, refreshThread]);
-  useEffect(() => {
-    if (replyingTo && cache.messages[replyingTo.id]?.deleted_at) {
-      setReplyingTo(null);
-      onReplyTargetChange?.(null);
-    }
-  }, [cache.messages, onReplyTargetChange, replyingTo]);
-  useEffect(() => {
-    const isNewMessage = conversationMessages.length > messageCountRef.current;
-    messageCountRef.current = conversationMessages.length;
-    if (!isNewMessage || !wasNearBottomRef.current || !scrollRef.current) return;
-    const timeline = scrollRef.current;
-    if (typeof timeline.scrollTo === 'function') timeline.scrollTo({ top: timeline.scrollHeight, behavior: 'smooth' });
-    else timeline.scrollTop = timeline.scrollHeight;
-  }, [conversationMessages]);
-
-  const loadOlder = useCallback(async () => {
-    setLoadingOlder(true); setError(null);
-    try { await loadMoreMessages(conversationId); } catch { setError(t('MessagingThread.LOAD_ERROR')); } finally { setLoadingOlder(false); }
-  }, [conversationId, loadMoreMessages, t]);
-  const onScroll = () => {
-    const timeline = scrollRef.current;
-    if (timeline) wasNearBottomRef.current = timeline.scrollHeight - timeline.scrollTop - timeline.clientHeight < 80;
-    if (timeline?.scrollTop === 0 && cache.cursors.messages[conversationId] && !loadingOlder) loadOlder();
-  };
-  const reply = (message) => { setReplyingTo(message); onReplyTargetChange?.(message); };
-  const jumpToMessage = (messageId) => {
-    const target = [...(scrollRef.current?.querySelectorAll('[data-message-id]') || [])]
-      .find((element) => String(element.dataset.messageId) === String(messageId));
-    target?.scrollIntoView?.({ block: 'center', behavior: 'smooth' });
-  };
-  const toggleReplies = async (root) => {
-    if (!openThreads[root.id]) {
-      try { await loadThreadReplies(root.id); } catch { setError(t('MessagingThread.REPLIES_ERROR')); return; }
-      markThreadRead(root.id).catch(() => {});
-    }
-    setOpenThreads((current) => ({ ...current, [root.id]: !current[root.id] }));
-  };
-  return (
-    // flex: 1, minHeight: 0 (here and on the scroll Box below): lets Thread
-    // shrink to fit when a host embeds it inside a fixed-height flex-column
-    // layout (e.g. header + Thread + Composer all fitting one screen, no
-    // page-level scroll) -- a flex item's default min-height is 'auto',
-    // which refuses to shrink below content size without this. Both
-    // properties are no-ops outside a flex context, so a host that doesn't
-    // flex-wrap Thread sees no behaviour change at all; maxHeight below
-    // still caps growth the same as before for that case (MSG-18, found
-    // while investigating why jg-ferien's Composer rendered behind its
-    // mobile bottom nav -- Thread's own fixed 560px cap never shrank for a
-    // short mobile viewport, no matter how the host's own layout was fixed).
-    <Stack spacing={1} sx={{ minWidth: 0, flex: 1, minHeight: 0 }}>
-      {error && <Alert severity="error" role="alert">{error}</Alert>}
-      {replyingTo && <Alert severity="info" onClose={() => { setReplyingTo(null); onReplyTargetChange?.(null); }}>{t('MessagingThread.REPLYING_TO', { sender: replyingTo.sender?.display_name || t('MessagingThread.UNKNOWN_SENDER') })}</Alert>}
-      <Box ref={scrollRef} onScroll={onScroll} sx={{ flex: 1, minHeight: 0, maxHeight: 560, overflowY: 'auto', overflowX: 'hidden', px: 0.5 }} aria-label={t('MessagingThread.TIMELINE')}>
-        {cache.cursors.messages[conversationId] && <Box textAlign="center" py={1}><Button onClick={loadOlder} disabled={loadingOlder}>{loadingOlder ? <CircularProgress size={18} /> : t('MessagingThread.LOAD_OLDER')}</Button></Box>}
-        {/* Only show the initial-load spinner when there's nothing to show yet
-            — re-opening a conversation whose messages are already cached (an
-            earlier visit this session, or a realtime frame that arrived while
-            a different conversation was open) still re-fetches in the
-            background, but the already-visible messages must not be replaced
-            by a spinner while that redundant refetch is in flight. */}
-        {loadingInitial && !roots.length ? <Box textAlign="center" py={4}><CircularProgress size={20} /></Box> : (!roots.length && <Typography color="text.secondary" textAlign="center" py={4}>{t('MessagingThread.EMPTY')}</Typography>)}
-        {/* pr wider than pl, on this Stack only (not the scroll container
-            above, which stays symmetric so the centered LOAD_OLDER button
-            isn't skewed): an own (right-aligned) bubble sits flush against
-            this Stack's right edge, and MessageBubble's hover/tap "more
-            actions" icon (MessageBubble.jsx, `top: -12, right: -12`) floats
-            12px past the bubble's own right edge — without enough padding to
-            absorb that overhang, the scroll container's overflowX: hidden
-            (the scrollbar fix above) would clip the icon whenever there's no
-            vertical scrollbar reserving extra width (a short conversation,
-            no vertical overflow). */}
-        <Stack spacing={1} sx={{ pr: 2 }}>{datedRoots.map(({ message, showDateSeparator }) => {
-          const replies = chronological(Object.values(cache.messages).filter((item) => String(replyToId(item)) === String(message.id)));
-          return <Stack key={message.id} spacing={0.75}>{showDateSeparator && <Stack data-testid="day-separator" direction="row" alignItems="center" spacing={1}><Divider sx={THREAD_DAY_SEPARATOR_SX} /><Typography variant="caption" color="text.secondary">{new Date(message.created_at).toLocaleDateString(i18n?.language)}</Typography><Divider sx={THREAD_DAY_SEPARATOR_SX} /></Stack>}<MessageBubble message={message} conversation={conversation} onReply={reply} onJumpToMessage={jumpToMessage} onAnnouncementLink={onAnnouncementLink} canModerateMessages={canModerateMessages}>{canShowReadTicks(message, user) && <ReadTicks messageId={message.id} conversation={conversation} />}</MessageBubble>
-            {(message.reply_count || replies.length) > 0 && (() => {
-              const unread = hasUnreadReplies(message, cache.receipts, user?.id);
-              const label = openThreads[message.id] ? t('MessagingThread.HIDE_REPLIES') : t('MessagingThread.SHOW_REPLIES', { count: message.reply_count || replies.length });
-              // MUI's Badge spreads unrecognized props (incl. aria-label) onto
-              // its own non-interactive wrapping span, not the inner control —
-              // a screen reader focuses the Button, so the accessible name
-              // must live there, not on the purely-visual dot.
-              return <Badge color="error" variant="dot" invisible={!unread}><Button size="small" aria-label={unread ? `${label} — ${t('MessagingThread.UNREAD_REPLIES')}` : undefined} onClick={() => toggleReplies(message)}>{label}</Button></Badge>;
-            })()}
-            {openThreads[message.id] && <Stack spacing={0.75} sx={{ pl: 3, borderLeft: 2, borderColor: 'divider' }}>{replies.map((item) => <MessageBubble key={item.id} message={item} replyTo={message} conversation={conversation} onReply={reply} onJumpToMessage={jumpToMessage} onAnnouncementLink={onAnnouncementLink} canModerateMessages={canModerateMessages}>{canShowReadTicks(item, user) && <ReadTicks messageId={item.id} conversation={conversation} />}</MessageBubble>)}</Stack>}
-            <Divider /></Stack>;
-        })}</Stack>
-      </Box>
-    </Stack>
-  );
-}

package/src/messaging/api.js

@@ -1,48 +0,0 @@
-import apiClient from '../auth/apiClient';
-
-const BASE_URL = '/api/messaging/';
-const conversationsUrl = `${BASE_URL}conversations/`;
-
-function data(response) {
-  return response.data;
-}
-
-function requestConfig({ cursor, params, headers, onUploadProgress } = {}) {
-  return {
-    ...(params ? { params } : {}),
-    ...(cursor ? { params: { ...(params || {}), cursor } } : {}),
-    ...(headers ? { headers } : {}),
-    ...(onUploadProgress ? { onUploadProgress } : {}),
-  };
-}
-
-export function listConversations({ cursor, ...filters } = {}) {
-  return apiClient.get(conversationsUrl, requestConfig({ cursor, params: filters })).then(data);
-}
-export function createDirectConversation(payload) { return apiClient.post(`${conversationsUrl}direct/`, payload).then(data); }
-export function createGroupConversation(payload) { return apiClient.post(`${conversationsUrl}group/`, payload).then(data); }
-export function createBroadcastConversation(payload) { return apiClient.post(`${conversationsUrl}broadcast/`, payload).then(data); }
-export function createManagedConversation(payload) { return apiClient.post(`${conversationsUrl}managed/`, payload).then(data); }
-export function createObjectThreadConversation(payload) { return apiClient.post(`${conversationsUrl}object-thread/`, payload).then(data); }
-export function getConversationConfig(conversationId) { return apiClient.get(`${conversationsUrl}${conversationId}/config/`).then(data); }
-export function patchConversationConfig(conversationId, patch) { return apiClient.patch(`${conversationsUrl}${conversationId}/config/`, patch).then(data); }
-export function archiveConversation(conversationId, archived) { return apiClient.post(`${conversationsUrl}${conversationId}/archive/`, { archived }).then(data); }
-export function patchConversationPreferences(conversationId, patch) { return apiClient.post(`${conversationsUrl}${conversationId}/preferences/`, patch).then(data); }
-export function listMessages(conversationId, { cursor } = {}) { return apiClient.get(`${conversationsUrl}${conversationId}/messages/`, requestConfig({ cursor })).then(data); }
-export function createMessage(conversationId, payload, { idempotencyKey } = {}) { return apiClient.post(`${conversationsUrl}${conversationId}/messages/`, payload, requestConfig({ headers: idempotencyKey ? { 'Idempotency-Key': idempotencyKey } : undefined })).then(data); }
-export function uploadAttachments(conversationId, formData, { idempotencyKey, onUploadProgress } = {}) { return apiClient.post(`${conversationsUrl}${conversationId}/attachments/`, formData, requestConfig({ headers: idempotencyKey ? { 'Idempotency-Key': idempotencyKey } : undefined, onUploadProgress })).then(data); }
-export function createPoll(conversationId, payload, { idempotencyKey } = {}) { return apiClient.post(`${conversationsUrl}${conversationId}/polls/`, payload, requestConfig({ headers: idempotencyKey ? { 'Idempotency-Key': idempotencyKey } : undefined })).then(data); }
-export function getMessage(messageId) { return apiClient.get(`${BASE_URL}messages/${messageId}/`).then(data); }
-export function patchMessage(messageId, patch) { return apiClient.patch(`${BASE_URL}messages/${messageId}/`, patch).then(data); }
-export function deleteMessage(messageId) { return apiClient.delete(`${BASE_URL}messages/${messageId}/`).then(data); }
-export function addReaction(messageId, emoji) { return apiClient.post(`${BASE_URL}messages/${messageId}/reactions/`, { emoji }).then(data); }
-export function removeReaction(messageId, emoji) { return apiClient.delete(`${BASE_URL}messages/${messageId}/reactions/${encodeURIComponent(emoji)}/`).then(data); }
-export function listThread(rootId, { cursor } = {}) { return apiClient.get(`${BASE_URL}messages/${rootId}/thread/`, requestConfig({ cursor })).then(data); }
-export function markThreadRead(rootId, readAt) { return apiClient.post(`${BASE_URL}messages/${rootId}/thread/read/`, readAt ? { read_at: readAt } : {}).then(data); }
-export function markConversationRead(conversationId, readAt) { return apiClient.post(`${conversationsUrl}${conversationId}/read/`, readAt ? { read_at: readAt } : {}).then(data); }
-export function getReadStatus(messageId) { return apiClient.get(`${BASE_URL}messages/${messageId}/read-status/`).then(data); }
-export function votePoll(pollId, optionIds) { return apiClient.post(`${BASE_URL}polls/${pollId}/vote/`, { option_ids: optionIds }).then(data); }
-export function closePoll(pollId) { return apiClient.post(`${BASE_URL}polls/${pollId}/close/`).then(data); }
-export function getAttachment(attachmentId) { return apiClient.get(`${BASE_URL}attachments/${attachmentId}/`, { responseType: 'blob' }).then(data); }
-export function getAttachmentThumbnail(attachmentId) { return apiClient.get(`${BASE_URL}attachments/${attachmentId}/thumbnail/`, { responseType: 'blob' }).then(data); }
-export function getUnreadCount() { return apiClient.get(`${BASE_URL}unread-count/`).then(data); }

package/src/messaging/composerImageCompression.js

@@ -1,35 +0,0 @@
-const MAX_IMAGE_BYTES = 2 * 1024 * 1024;
-const MAX_IMAGE_EDGE = 2560;
-
-function imageDimensions(file) {
-  return new Promise((resolve, reject) => {
-    const url = URL.createObjectURL(file);
-    const image = new Image();
-    image.onload = () => { URL.revokeObjectURL(url); resolve(image); };
-    image.onerror = () => { URL.revokeObjectURL(url); reject(new Error('Unable to decode image')); };
-    image.src = url;
-  });
-}
-
-function canvasBlob(canvas) {
-  return new Promise((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.85));
-}
-
-/** Compresses large images opportunistically; callers always receive a sendable file. */
-export async function compressImageForUpload(file) {
-  if (!file?.type?.startsWith('image/') || file.size <= MAX_IMAGE_BYTES) return file;
-  try {
-    const image = await imageDimensions(file);
-    const largestEdge = Math.max(image.naturalWidth || image.width, image.naturalHeight || image.height);
-    if (!largestEdge || largestEdge <= MAX_IMAGE_EDGE) return file;
-    const scale = MAX_IMAGE_EDGE / largestEdge;
-    const canvas = document.createElement('canvas');
-    canvas.width = Math.round((image.naturalWidth || image.width) * scale);
-    canvas.height = Math.round((image.naturalHeight || image.height) * scale);
-    canvas.getContext('2d')?.drawImage(image, 0, 0, canvas.width, canvas.height);
-    const blob = await canvasBlob(canvas);
-    return blob ? new File([blob], file.name.replace(/\.[^.]+$/, '') + '.jpg', { type: 'image/jpeg', lastModified: file.lastModified }) : file;
-  } catch {
-    return file;
-  }
-}

package/src/messaging/linkifyText.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Link } from '@mui/material';
-
-const HTTP_URL_PATTERN = /(https?:\/\/[^\s<>"']+)/g;
-
-function splitTrailingPunctuation(rawUrl) {
-  let url = rawUrl;
-  let trailing = '';
-  while (/[.,!?]$/.test(url)) {
-    trailing = `${url.slice(-1)}${trailing}`;
-    url = url.slice(0, -1);
-  }
-  const openingParentheses = (url.match(/\(/g) || []).length;
-  const closingParentheses = (url.match(/\)/g) || []).length;
-  if (closingParentheses > openingParentheses) {
-    trailing = `)${trailing}`;
-    url = url.slice(0, -1);
-  }
-  return { url, trailing };
-}
-
-export function linkifyText(text) {
-  const value = String(text ?? '');
-  const parts = [];
-  let lastIndex = 0;
-  for (const match of value.matchAll(HTTP_URL_PATTERN)) {
-    const rawUrl = match[0];
-    const start = match.index ?? 0;
-    if (start > lastIndex) parts.push(value.slice(lastIndex, start));
-    const { url, trailing } = splitTrailingPunctuation(rawUrl);
-    parts.push(<Link key={`url-${start}`} href={url} target="_blank" rel="noopener noreferrer">{url}</Link>);
-    if (trailing) parts.push(trailing);
-    lastIndex = start + rawUrl.length;
-  }
-  if (lastIndex < value.length) parts.push(value.slice(lastIndex));
-  return parts.length ? parts : [value];
-}

package/src/notifications/NotificationBell.jsx

@@ -1,84 +0,0 @@
-import { useState } from 'react';
-
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import {
-  Badge,
-  Box,
-  Button,
-  IconButton,
-  List,
-  ListItemButton,
-  ListItemText,
-  Menu,
-  Typography,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-import { useNotifications } from './NotificationsProvider';
-
-export function NotificationBell({ resolveLink }) {
-  const { t } = useTranslation();
-  const { notifications, unreadCount, markSeen } = useNotifications();
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const unreadIds = notifications
-    .filter((notification) => !notification.seen && !notification.dismissed && notification.id != null)
-    .map((notification) => notification.id);
-
-  const handleItemClick = (notification) => {
-    if (notification.id != null) markSeen([notification.id]);
-    setAnchorEl(null);
-    if (resolveLink && notification.content?.link) resolveLink(notification.content.link);
-  };
-
-  return (
-    <>
-      <IconButton
-        aria-label={t('NotificationBell.TITLE')}
-        color="inherit"
-        onClick={(event) => setAnchorEl(event.currentTarget)}
-      >
-        <Badge badgeContent={unreadCount} color="error" max={99}>
-          <NotificationsIcon />
-        </Badge>
-      </IconButton>
-      <Menu
-        anchorEl={anchorEl}
-        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-        onClose={() => setAnchorEl(null)}
-        open={open}
-        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-      >
-        <Box sx={{ minWidth: 320 }}>
-          <Box sx={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between', px: 2, py: 1 }}>
-            <Typography variant="subtitle1">{t('NotificationBell.TITLE')}</Typography>
-            {unreadIds.length > 0 && (
-              <Button onClick={() => markSeen(unreadIds)} size="small">
-                {t('NotificationBell.MARK_ALL')}
-              </Button>
-            )}
-          </Box>
-          {notifications.length === 0 ? (
-            <Typography sx={{ px: 2, py: 2 }} variant="body2">
-              {t('NotificationBell.EMPTY')}
-            </Typography>
-          ) : (
-            <List dense disablePadding>
-              {notifications.map((notification) => (
-                <ListItemButton key={notification.id ?? notification.notification_id} onClick={() => handleItemClick(notification)}>
-                  <ListItemText
-                    primary={t(notification.content?.title_key, notification.content?.params || {})}
-                    secondary={notification.content?.body_key
-                      ? t(notification.content.body_key, notification.content.params || {})
-                      : undefined}
-                    slotProps={{ primary: { fontWeight: notification.seen || notification.dismissed ? 'regular' : 'bold' } }}
-                  />
-                </ListItemButton>
-              ))}
-            </List>
-          )}
-        </Box>
-      </Menu>
-    </>
-  );
-}