@open-mercato/ui 0.6.5-develop.4384.1.ce2ec6eaaa → 0.6.5-develop.4393.1.de282b5dfd

package/src/backend/messages/EmailThreadsPanel.tsx

@@ -0,0 +1,351 @@
+'use client'
+
+import * as React from 'react'
+import { ArrowDownLeft, ArrowUpRight, Check, Mail, RefreshCw, Reply, TriangleAlert } from 'lucide-react'
+import { Button } from '../../primitives/button'
+import { Badge } from '../../primitives/badge'
+import { Spinner } from '../../primitives/spinner'
+import { Alert, AlertDescription } from '../../primitives/alert'
+import { EmptyState } from '../EmptyState'
+import { formatDateTime } from '@open-mercato/shared/lib/time'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export type EmailThreadDirection = 'inbound' | 'outbound'
+
+/**
+ * Optimistic delivery status for a just-sent outbound message. Server-confirmed
+ * messages leave this `undefined` and render without a status indicator.
+ */
+export type EmailThreadMessageStatus = 'sending' | 'sent' | 'failed'
+
+export type EmailThreadMessage = {
+  id: string
+  messageId: string | null
+  rfcMessageId: string | null
+  references: string[]
+  direction: EmailThreadDirection
+  fromName: string | null
+  fromEmail: string | null
+  to: string[]
+  cc: string[]
+  subject: string | null
+  bodyText: string | null
+  sentAt: string
+  providerKey: string | null
+  /** Optimistic send status; absent on server-confirmed messages. */
+  status?: EmailThreadMessageStatus
+  /** Human-readable failure reason shown when `status === 'failed'`. */
+  statusError?: string | null
+}
+
+export type EmailThread = {
+  threadKey: string
+  subject: string | null
+  preview: string | null
+  participants: string[]
+  lastMessageAt: string
+  messageCount: number
+  providerKey: string | null
+  lastDirection: EmailThreadDirection
+  messages: EmailThreadMessage[]
+}
+
+export type EmailThreadsPanelProps = {
+  threads: EmailThread[]
+  loading?: boolean
+  error?: string | null
+  /** When false, compose/reply controls are hidden and `composeDisabledHint` is shown. */
+  canCompose?: boolean
+  composeDisabledHint?: React.ReactNode
+  onComposeNew?: () => void
+  onReply?: (thread: EmailThread) => void
+  onRefresh?: () => void
+  /** Invoked when the user retries a message whose `status === 'failed'`. */
+  onRetry?: (message: EmailThreadMessage) => void
+  className?: string
+}
+
+function formatWhen(value: string): string {
+  return formatDateTime(value) ?? value
+}
+
+/**
+ * Entity-agnostic Gmail-style email thread viewer. The host supplies the
+ * already-fetched threads plus compose/reply/refresh handlers; this component
+ * owns only the master/detail layout, selection, and conversation rendering, so
+ * it can be dropped onto the CRM Person page, a Company page, or any module.
+ */
+export function EmailThreadsPanel({
+  threads,
+  loading = false,
+  error = null,
+  canCompose = false,
+  composeDisabledHint,
+  onComposeNew,
+  onReply,
+  onRefresh,
+  onRetry,
+  className,
+}: EmailThreadsPanelProps) {
+  const t = useT()
+  const [selectedKey, setSelectedKey] = React.useState<string | null>(null)
+
+  // Keep a valid selection as the thread set changes (refresh, new email).
+  React.useEffect(() => {
+    if (threads.length === 0) {
+      setSelectedKey(null)
+      return
+    }
+    setSelectedKey((current) =>
+      current && threads.some((thread) => thread.threadKey === current)
+        ? current
+        : threads[0].threadKey,
+    )
+  }, [threads])
+
+  const selected = React.useMemo(
+    () => threads.find((thread) => thread.threadKey === selectedKey) ?? null,
+    [threads, selectedKey],
+  )
+
+  return (
+    <div className={cn('flex flex-col gap-4', className)}>
+      <div className="flex items-center justify-between gap-2">
+        <div className="text-sm text-muted-foreground">
+          {t('ui.email.threads.count', '{count} conversations', { count: threads.length })}
+        </div>
+        <div className="flex items-center gap-2">
+          {onRefresh ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="gap-2"
+              onClick={onRefresh}
+              disabled={loading}
+            >
+              <RefreshCw className={cn('h-4 w-4', loading && 'animate-spin')} />
+              {t('ui.email.threads.refresh', 'Refresh')}
+            </Button>
+          ) : null}
+          {canCompose && onComposeNew ? (
+            <Button type="button" size="sm" className="gap-2" onClick={onComposeNew}>
+              <Mail className="h-4 w-4" />
+              {t('ui.email.threads.new', 'New email')}
+            </Button>
+          ) : null}
+        </div>
+      </div>
+
+      {!canCompose && composeDisabledHint ? <div>{composeDisabledHint}</div> : null}
+
+      {error ? (
+        <Alert variant="destructive">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      ) : null}
+
+      {loading && threads.length === 0 ? (
+        <div className="flex items-center justify-center gap-2 py-10 text-sm text-muted-foreground">
+          <Spinner className="h-4 w-4" />
+          {t('ui.email.threads.loading', 'Loading conversations…')}
+        </div>
+      ) : threads.length === 0 ? (
+        <EmptyState
+          icon={<Mail className="h-6 w-6" />}
+          title={t('ui.email.threads.empty.title', 'No emails yet')}
+          description={t(
+            'ui.email.threads.empty.description',
+            'Emails you send or receive with this contact will appear here, grouped into conversations.',
+          )}
+        />
+      ) : (
+        <div className="grid gap-4 md:grid-cols-3">
+          {/* Master: thread list */}
+          <div className="md:col-span-1">
+            <ul className="max-h-96 divide-y divide-border overflow-y-auto rounded-md border border-border">
+              {threads.map((thread) => {
+                const isSelected = thread.threadKey === selectedKey
+                return (
+                  <li key={thread.threadKey}>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      onClick={() => setSelectedKey(thread.threadKey)}
+                      className={cn(
+                        'h-auto w-full flex-col items-stretch justify-start gap-1 whitespace-normal rounded-none p-3 text-left hover:bg-muted',
+                        isSelected ? 'bg-muted' : 'bg-transparent',
+                      )}
+                      aria-current={isSelected}
+                    >
+                      <div className="flex items-baseline justify-between gap-2">
+                        <span className="truncate text-sm font-medium text-foreground">
+                          {thread.subject || t('ui.email.threads.noSubject', '(no subject)')}
+                        </span>
+                        <span className="shrink-0 text-xs text-muted-foreground">
+                          {formatWhen(thread.lastMessageAt)}
+                        </span>
+                      </div>
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="truncate text-xs text-muted-foreground">
+                          {thread.participants.join(', ') ||
+                            t('ui.email.threads.unknownParticipant', 'Unknown sender')}
+                        </span>
+                        <Badge variant="secondary" className="shrink-0">
+                          {thread.messageCount}
+                        </Badge>
+                      </div>
+                      {thread.preview ? (
+                        <span className="line-clamp-1 text-xs text-muted-foreground">
+                          {thread.preview}
+                        </span>
+                      ) : null}
+                    </Button>
+                  </li>
+                )
+              })}
+            </ul>
+          </div>
+
+          {/* Detail: conversation */}
+          <div className="md:col-span-2">
+            {selected ? (
+              <div className="flex flex-col gap-3 rounded-md border border-border p-4">
+                <div className="flex items-start justify-between gap-2">
+                  <h3 className="text-base font-semibold text-foreground">
+                    {selected.subject || t('ui.email.threads.noSubject', '(no subject)')}
+                  </h3>
+                  {canCompose && onReply ? (
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="shrink-0 gap-2"
+                      onClick={() => onReply(selected)}
+                    >
+                      <Reply className="h-4 w-4" />
+                      {t('ui.email.threads.reply', 'Reply')}
+                    </Button>
+                  ) : null}
+                </div>
+                <div className="flex flex-col gap-3">
+                  {selected.messages.map((message) => (
+                    <EmailMessageCard key={message.id} message={message} onRetry={onRetry} />
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-center justify-center rounded-md border border-border p-10 text-sm text-muted-foreground">
+                {t('ui.email.threads.selectPrompt', 'Select a conversation to read it.')}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function EmailMessageCard({
+  message,
+  onRetry,
+}: {
+  message: EmailThreadMessage
+  onRetry?: (message: EmailThreadMessage) => void
+}) {
+  const t = useT()
+  const isOutbound = message.direction === 'outbound'
+  const fromLabel = message.fromName
+    ? `${message.fromName}${message.fromEmail ? ` <${message.fromEmail}>` : ''}`
+    : message.fromEmail ?? t('ui.email.threads.unknownParticipant', 'Unknown sender')
+  return (
+    <div
+      className={`rounded-md border border-border p-3 ${isOutbound ? 'bg-accent' : 'bg-muted'}`}
+    >
+      <div className="mb-2 flex items-start justify-between gap-2">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          {isOutbound ? (
+            <ArrowUpRight className="h-3.5 w-3.5" />
+          ) : (
+            <ArrowDownLeft className="h-3.5 w-3.5" />
+          )}
+          <span className="font-medium text-foreground">
+            {isOutbound ? t('ui.email.threads.you', 'You') : fromLabel}
+          </span>
+          {message.to.length > 0 ? (
+            <span className="truncate">
+              {t('ui.email.threads.toLabel', 'to {recipients}', {
+                recipients: message.to.join(', '),
+              })}
+            </span>
+          ) : null}
+        </div>
+        <span className="shrink-0 text-xs text-muted-foreground">{formatWhen(message.sentAt)}</span>
+      </div>
+      <div className="whitespace-pre-wrap break-words text-sm text-foreground">
+        {message.bodyText || t('ui.email.threads.noBody', '(no content)')}
+      </div>
+      <EmailMessageStatus message={message} onRetry={onRetry} />
+    </div>
+  )
+}
+
+/**
+ * Renders the optimistic send-status footer for an outbound message: a spinner
+ * while sending, a success check once confirmed, or an error with a Retry action
+ * on delivery failure. Server-confirmed messages have no `status` and render
+ * nothing here.
+ */
+function EmailMessageStatus({
+  message,
+  onRetry,
+}: {
+  message: EmailThreadMessage
+  onRetry?: (message: EmailThreadMessage) => void
+}) {
+  const t = useT()
+  if (message.status === 'sending') {
+    return (
+      <div className="mt-2 flex items-center gap-1.5 text-xs text-muted-foreground" aria-live="polite">
+        <Spinner className="h-3 w-3" />
+        {t('ui.email.threads.status.sending', 'Sending…')}
+      </div>
+    )
+  }
+  if (message.status === 'sent') {
+    return (
+      <div className="mt-2 flex items-center gap-1.5 text-xs text-status-success-text" aria-live="polite">
+        <Check className="h-3.5 w-3.5 text-status-success-icon" />
+        {t('ui.email.threads.status.sent', 'Sent')}
+      </div>
+    )
+  }
+  if (message.status === 'failed') {
+    return (
+      <div
+        className="mt-2 flex flex-wrap items-center gap-2 text-xs text-status-error-text"
+        aria-live="polite"
+      >
+        <span className="flex items-center gap-1.5">
+          <TriangleAlert className="h-3.5 w-3.5 text-status-error-icon" />
+          {message.statusError || t('ui.email.threads.status.failed', 'Not delivered')}
+        </span>
+        {onRetry ? (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="h-auto px-2 py-0.5 text-xs"
+            onClick={() => onRetry(message)}
+          >
+            {t('ui.email.threads.status.retry', 'Retry')}
+          </Button>
+        ) : null}
+      </div>
+    )
+  }
+  return null
+}
+
+export default EmailThreadsPanel

package/src/backend/messages/__tests__/mergeOptimisticEmailThreads.test.ts

@@ -0,0 +1,126 @@
+import { mergeOptimisticEmailThreads, type OptimisticEmailMessage } from '../mergeOptimisticEmailThreads'
+import type { EmailThread, EmailThreadMessage } from '../EmailThreadsPanel'
+
+function message(overrides: Partial<EmailThreadMessage> & { id: string }): EmailThreadMessage {
+  return {
+    messageId: overrides.id,
+    rfcMessageId: null,
+    references: [],
+    direction: 'outbound',
+    fromName: null,
+    fromEmail: null,
+    to: ['contact@example.com'],
+    cc: [],
+    subject: 'Hello',
+    bodyText: 'Body',
+    sentAt: '2026-06-02T10:00:00.000Z',
+    providerKey: 'gmail',
+    ...overrides,
+  }
+}
+
+function thread(overrides: Partial<EmailThread> & { threadKey: string }): EmailThread {
+  const messages = overrides.messages ?? [message({ id: `${overrides.threadKey}-m1` })]
+  const last = messages[messages.length - 1]
+  return {
+    subject: 'Hello',
+    preview: 'Body',
+    participants: ['contact@example.com'],
+    lastMessageAt: last.sentAt,
+    messageCount: messages.length,
+    providerKey: 'gmail',
+    lastDirection: last.direction,
+    ...overrides,
+    messages,
+  }
+}
+
+function optimistic(
+  overrides: Partial<EmailThreadMessage> & { id: string; threadKey: string },
+): OptimisticEmailMessage {
+  const { threadKey, ...rest } = overrides
+  return { ...message(rest), threadKey, status: 'sending' }
+}
+
+describe('mergeOptimisticEmailThreads', () => {
+  it('returns the server threads unchanged when there are no optimistic messages', () => {
+    const server = [thread({ threadKey: 't1' })]
+    expect(mergeOptimisticEmailThreads(server, [])).toBe(server)
+  })
+
+  it('appends an optimistic message to its matching server thread, sorted by sentAt', () => {
+    const server = [
+      thread({
+        threadKey: 't1',
+        messages: [message({ id: 'srv-1', messageId: 'srv-1', sentAt: '2026-06-02T09:00:00.000Z' })],
+      }),
+    ]
+    const opt = optimistic({
+      id: 'optimistic:c1',
+      messageId: 'msg-new',
+      threadKey: 't1',
+      sentAt: '2026-06-02T11:00:00.000Z',
+    })
+    const merged = mergeOptimisticEmailThreads(server, [opt])
+    expect(merged).toHaveLength(1)
+    expect(merged[0].messages.map((m) => m.id)).toEqual(['srv-1', 'optimistic:c1'])
+    expect(merged[0].messageCount).toBe(2)
+    expect(merged[0].lastMessageAt).toBe('2026-06-02T11:00:00.000Z')
+    expect(merged[0].messages[1].status).toBe('sending')
+  })
+
+  it('drops the optimistic copy once the server thread contains the same messageId (no duplicate)', () => {
+    const server = [
+      thread({
+        threadKey: 't1',
+        messages: [message({ id: 'srv-row', messageId: 'msg-1' })],
+      }),
+    ]
+    const opt = optimistic({ id: 'optimistic:c1', messageId: 'msg-1', threadKey: 't1' })
+    const merged = mergeOptimisticEmailThreads(server, [opt])
+    expect(merged).toBe(server) // nothing left to overlay
+  })
+
+  it('creates a new thread when the optimistic threadKey matches no server thread', () => {
+    const server = [
+      thread({ threadKey: 't1', messages: [message({ id: 's1', messageId: 's1', sentAt: '2026-06-02T08:00:00.000Z' })] }),
+    ]
+    const opt = optimistic({
+      id: 'optimistic:c1',
+      messageId: 'msg-new',
+      threadKey: 'new-thread',
+      subject: 'Fresh',
+      sentAt: '2026-06-02T12:00:00.000Z',
+    })
+    const merged = mergeOptimisticEmailThreads(server, [opt])
+    expect(merged).toHaveLength(2)
+    // Newest thread (the optimistic one) sorts first.
+    expect(merged[0].threadKey).toBe('new-thread')
+    expect(merged[0].subject).toBe('Fresh')
+    expect(merged[0].messages[0].status).toBe('sending')
+  })
+
+  it('preserves a failed status and keeps it visible until the server has the message', () => {
+    const server = [thread({ threadKey: 't1', messages: [message({ id: 's1', messageId: 's1' })] })]
+    const opt = optimistic({
+      id: 'optimistic:c1',
+      messageId: 'msg-failed',
+      threadKey: 't1',
+      sentAt: '2026-06-02T13:00:00.000Z',
+    })
+    opt.status = 'failed'
+    opt.statusError = 'SMTP rejected'
+    const merged = mergeOptimisticEmailThreads(server, [opt])
+    const last = merged[0].messages[merged[0].messages.length - 1]
+    expect(last.status).toBe('failed')
+    expect(last.statusError).toBe('SMTP rejected')
+  })
+
+  it('does not mutate the input arrays', () => {
+    const server = [thread({ threadKey: 't1', messages: [message({ id: 's1', messageId: 's1' })] })]
+    const serverSnapshot = JSON.parse(JSON.stringify(server))
+    const opt = optimistic({ id: 'optimistic:c1', messageId: 'msg-new', threadKey: 't1' })
+    mergeOptimisticEmailThreads(server, [opt])
+    expect(server).toEqual(serverSnapshot)
+  })
+})

package/src/backend/messages/index.ts

@@ -22,3 +22,15 @@ export type { MessagePollItem, UseMessagesPollResult } from './useMessagesPoll'
 
 export { MessageObjectPreview } from './MessageObjectPreview'
 export { MessageObjectDetail } from './MessageObjectDetail'
+
+export { EmailThreadsPanel } from './EmailThreadsPanel'
+export type {
+  EmailThread,
+  EmailThreadMessage,
+  EmailThreadMessageStatus,
+  EmailThreadDirection,
+  EmailThreadsPanelProps,
+} from './EmailThreadsPanel'
+
+export { mergeOptimisticEmailThreads } from './mergeOptimisticEmailThreads'
+export type { OptimisticEmailMessage } from './mergeOptimisticEmailThreads'

package/src/backend/messages/mergeOptimisticEmailThreads.ts

@@ -0,0 +1,84 @@
+import type { EmailThread, EmailThreadMessage } from './EmailThreadsPanel'
+
+/**
+ * An optimistic (client-side, not-yet-server-confirmed) outbound message plus
+ * the key of the thread it belongs to. `message.messageId` is the Open Mercato
+ * Message id returned by the send API — it is the reconciliation key against the
+ * server-fetched threads.
+ */
+export type OptimisticEmailMessage = EmailThreadMessage & { threadKey: string }
+
+/**
+ * Overlay optimistic "sending" / "sent" / "failed" messages onto the
+ * server-fetched threads so a just-sent email appears immediately and is then
+ * replaced by the real record once the delivery worker links it.
+ *
+ * Reconciliation is keyed on `messageId`: when a server thread already contains a
+ * message with the same `messageId` as an optimistic one, the optimistic copy is
+ * dropped (the server record wins) so the message never appears twice. Ordering
+ * matches the server build: messages ascending by `sentAt`, threads descending by
+ * `lastMessageAt`. The input arrays are never mutated.
+ */
+export function mergeOptimisticEmailThreads(
+  serverThreads: EmailThread[],
+  optimistic: OptimisticEmailMessage[],
+): EmailThread[] {
+  if (optimistic.length === 0) return serverThreads
+
+  const serverMessageIds = new Set<string>()
+  for (const thread of serverThreads) {
+    for (const message of thread.messages) {
+      if (message.messageId) serverMessageIds.add(message.messageId)
+    }
+  }
+
+  // Drop optimistic copies the server has already linked (dedupe by messageId).
+  const pending = optimistic.filter(
+    (entry) => !(entry.messageId && serverMessageIds.has(entry.messageId)),
+  )
+  if (pending.length === 0) return serverThreads
+
+  const byKey = new Map<string, EmailThread>()
+  const order: string[] = []
+  for (const thread of serverThreads) {
+    byKey.set(thread.threadKey, thread)
+    order.push(thread.threadKey)
+  }
+
+  for (const entry of pending) {
+    const { threadKey, ...message } = entry
+    const existing = byKey.get(threadKey)
+    if (existing) {
+      // Guard against double-adding the same optimistic message across re-renders.
+      if (existing.messages.some((m) => m.id === message.id)) continue
+      const messages = [...existing.messages, message].sort((a, b) =>
+        a.sentAt.localeCompare(b.sentAt),
+      )
+      const last = messages[messages.length - 1]
+      byKey.set(threadKey, {
+        ...existing,
+        messages,
+        messageCount: messages.length,
+        lastMessageAt: last?.sentAt ?? existing.lastMessageAt,
+        lastDirection: last?.direction ?? existing.lastDirection,
+      })
+    } else {
+      byKey.set(threadKey, {
+        threadKey,
+        subject: message.subject,
+        preview: message.bodyText ? message.bodyText.slice(0, 140) : null,
+        participants: message.to,
+        lastMessageAt: message.sentAt,
+        messageCount: 1,
+        providerKey: message.providerKey,
+        lastDirection: message.direction,
+        messages: [message],
+      })
+      order.push(threadKey)
+    }
+  }
+
+  return order
+    .map((key) => byKey.get(key)!)
+    .sort((a, b) => b.lastMessageAt.localeCompare(a.lastMessageAt))
+}

package/src/backend/notifications/NotificationDispatcher.ts

@@ -15,6 +15,7 @@ type RuntimeContext = {
   userId?: string
   features: string[]
   currentPath: string
+  t?: (key: string, fallback?: string) => string
   refreshNotifications: () => void
   navigate: (href: string) => void
   markAsRead: (notificationId: string) => Promise<void>
@@ -57,6 +58,7 @@ function buildHandlerContext(runtime: RuntimeContext): NotificationHandlerContex
     userId: runtime.userId,
     features: runtime.features,
     currentPath: runtime.currentPath,
+    t: runtime.t,
     toast(options) {
       const text = options.body ? `${options.title}: ${options.body}` : options.title
       flash(text, toFlashKind(options.severity))

package/src/backend/notifications/useNotificationsPoll.ts

@@ -6,6 +6,7 @@ import {
   emitNotificationCountChanged,
 } from '@open-mercato/shared/lib/frontend/notificationEvents'
 import type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'
+import { useOptionalT } from '@open-mercato/shared/lib/i18n/context'
 import {
   dispatchNotificationHandlers,
   getRequiredNotificationHandlerFeatures,
@@ -36,6 +37,9 @@ export function useNotificationsPoll(): UseNotificationsPollResult {
   const [isLoading, setIsLoading] = React.useState(true)
   const [error, setError] = React.useState<string | null>(null)
   const grantedFeaturesRef = React.useRef<string[]>([])
+  const translate = useOptionalT()
+  const translateRef = React.useRef(translate)
+  React.useEffect(() => { translateRef.current = translate }, [translate])
   const lastIdRef = React.useRef<string | null>(null)
   const prevUnreadRef = React.useRef(0)
   const {
@@ -76,6 +80,7 @@ export function useNotificationsPoll(): UseNotificationsPollResult {
         if (newNotifications.length > 0) {
           dispatchNotificationHandlers(newNotifications, {
             features: grantedFeaturesRef.current,
+            t: translateRef.current,
             currentPath:
               typeof window === 'undefined'
                 ? '/'

package/src/backend/notifications/useNotificationsSse.ts

@@ -7,6 +7,7 @@ import {
 } from '@open-mercato/shared/lib/frontend/notificationEvents'
 import type { AppEventPayload } from '@open-mercato/shared/modules/widgets/injection'
 import type { NotificationDto } from '@open-mercato/shared/modules/notifications/types'
+import { useOptionalT } from '@open-mercato/shared/lib/i18n/context'
 import { useAppEvent } from '../injection/useAppEvent'
 import {
   dispatchNotificationHandlers,
@@ -46,6 +47,9 @@ export function useNotificationsSse(): UseNotificationsSseResult {
   const [isLoading, setIsLoading] = React.useState(true)
   const [error, setError] = React.useState<string | null>(null)
   const grantedFeaturesRef = React.useRef<string[]>([])
+  const translate = useOptionalT()
+  const translateRef = React.useRef(translate)
+  React.useEffect(() => { translateRef.current = translate }, [translate])
   const lastIdRef = React.useRef<string | null>(null)
   const prevUnreadRef = React.useRef(0)
   const {
@@ -73,6 +77,7 @@ export function useNotificationsSse(): UseNotificationsSseResult {
           lastIdRef.current = fetched[0].id
           dispatchNotificationHandlers(fetched, {
             features: grantedFeaturesRef.current,
+            t: translateRef.current,
             currentPath:
               typeof window === 'undefined'
                 ? '/'
@@ -162,6 +167,7 @@ export function useNotificationsSse(): UseNotificationsSseResult {
       window.setTimeout(() => setHasNew(false), 3000)
       dispatchNotificationHandlers([notification], {
         features: grantedFeaturesRef.current,
+        t: translateRef.current,
         currentPath:
           typeof window === 'undefined'
             ? '/'