@open-mercato/core 0.4.5-develop-5191db4ef3 → 0.4.5-develop-033a719bf2

package/src/modules/messages/components/message-detail/panels/MainMessageHeader.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { FormHeader, type ActionItem } from '@open-mercato/ui/backend/forms'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Archive, Forward, MailMinus, Reply, Trash2 } from 'lucide-react'
+import { PriorityBadge } from '../../utils/PriorityBadge'
+
+type MainMessageHeaderProps = {
+  subject: string
+  priority: 'low' | 'normal' | 'high' | 'urgent'
+  canReply: boolean
+  canForwardAll: boolean
+  actionsDisabled?: boolean
+  activeActionId?: 'forwardAll' | 'archiveConversation' | 'markAllUnread' | 'deleteConversation' | null
+  onReply: () => void
+  onForwardAll: () => void
+  onArchiveConversation: () => void
+  onMarkAllUnread: () => void
+  onDeleteConversation: () => void
+}
+
+export function MainMessageHeader(props: MainMessageHeaderProps) {
+  const t = useT()
+
+  const menuActions = React.useMemo<ActionItem[]>(() => [
+    {
+      id: 'reply',
+      label: t('messages.reply', 'Reply'),
+      icon: Reply,
+      onSelect: props.onReply,
+      disabled: props.actionsDisabled || !props.canReply,
+    },
+    {
+      id: 'forward-all',
+      label: t('messages.actions.forwardAll', 'Forward all'),
+      icon: Forward,
+      onSelect: props.onForwardAll,
+      disabled: props.actionsDisabled || !props.canForwardAll,
+      loading: props.activeActionId === 'forwardAll',
+    },
+    {
+      id: 'archive-conversation',
+      label: t('messages.actions.archiveConversation', 'Archive conversation'),
+      icon: Archive,
+      onSelect: props.onArchiveConversation,
+      disabled: props.actionsDisabled,
+      loading: props.activeActionId === 'archiveConversation',
+    },
+    {
+      id: 'mark-all-unread',
+      label: t('messages.actions.markAllUnread', 'Mark all unread'),
+      icon: MailMinus,
+      onSelect: props.onMarkAllUnread,
+      disabled: props.actionsDisabled,
+      loading: props.activeActionId === 'markAllUnread',
+    },
+    {
+      id: 'delete-conversation',
+      label: t('messages.actions.deleteConversation', 'Delete conversation'),
+      icon: Trash2,
+      onSelect: props.onDeleteConversation,
+      disabled: props.actionsDisabled,
+      loading: props.activeActionId === 'deleteConversation',
+    },
+  ], [
+    props.actionsDisabled,
+    props.canForwardAll,
+    props.canReply,
+    props.onArchiveConversation,
+    props.onDeleteConversation,
+    props.onForwardAll,
+    props.onMarkAllUnread,
+    props.onReply,
+    props.activeActionId,
+    t,
+  ])
+
+  return (
+    <FormHeader
+      mode="detail"
+      backHref="/backend/messages"
+      backLabel={t('messages.actions.backToList', 'Back to messages')}
+      title={(
+        <span className="inline-flex items-center gap-2">
+          <span className="truncate">{props.subject}</span>
+          <PriorityBadge priority={props.priority} />
+        </span>
+      )}
+      utilityActions={props.canReply ? (
+        <IconButton
+          type="button"
+          variant="outline"
+          size="default"
+          aria-label={t('messages.reply', 'Reply')}
+          onClick={props.onReply}
+          disabled={props.actionsDisabled || !props.canReply}
+        >
+          <Reply className="h-4 w-4" aria-hidden />
+        </IconButton>
+      ) : undefined}
+      menuTriggerMode="icon"
+      menuAriaLabel={t('messages.actions.conversationActions', 'Conversation actions')}
+      menuActions={menuActions}
+    />
+  )
+}

package/src/modules/messages/components/message-detail/panels/MessageHeader.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { FormHeader, type ActionItem } from '@open-mercato/ui/backend/forms'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import {
+  Archive,
+  ArchiveRestore,
+  ChevronDown,
+  ChevronUp,
+  FilePenLine,
+  Forward,
+  Mail,
+  MailOpen,
+  Reply,
+  Trash2,
+} from 'lucide-react'
+import type { MessageDetail } from '../types'
+import { formatDateTime } from '../utils'
+
+type MessageHeaderProps = {
+  detail: MessageDetail
+  updatingState: boolean
+  isArchived: boolean
+  showSubject?: boolean
+  onReply: () => void
+  onForward: () => void
+  onEdit: () => void
+  onToggleRead: () => void
+  onToggleArchive: () => void
+  onDelete: () => void
+  collapseToggle?: {
+    expanded: boolean
+    onToggle: () => void
+  }
+}
+
+export function MessageHeader(props: MessageHeaderProps) {
+  const t = useT()
+  const showSubject = props.showSubject !== false
+  const canReply = !props.detail.isDraft && props.detail.typeDefinition.allowReply
+  const actionItems = React.useMemo(() => {
+    const items: ActionItem[] = []
+
+    if (props.detail.isDraft && props.detail.canEditDraft) {
+      items.push({
+        id: 'edit',
+        label: t('messages.actions.edit', 'Edit'),
+        icon: FilePenLine,
+        onSelect: props.onEdit,
+      })
+    }
+
+    if (!props.detail.isDraft && props.detail.typeDefinition.allowForward) {
+      items.push({
+        id: 'forward',
+        label: t('messages.forward', 'Forward'),
+        icon: Forward,
+        onSelect: props.onForward,
+      })
+    }
+
+    if (!props.detail.isDraft) {
+      items.push({
+        id: 'toggle-read',
+        label: props.detail.isRead
+          ? t('messages.actions.markUnread', 'Mark unread')
+          : t('messages.actions.markRead', 'Mark read'),
+        icon: props.detail.isRead ? Mail : MailOpen,
+        onSelect: props.onToggleRead,
+        disabled: props.updatingState,
+      })
+    }
+
+    if (!props.detail.isDraft) {
+      items.push({
+        id: 'toggle-archive',
+        label: props.isArchived
+          ? t('messages.actions.unarchive', 'Unarchive')
+          : t('messages.actions.archive', 'Archive'),
+        icon: props.isArchived ? ArchiveRestore : Archive,
+        onSelect: props.onToggleArchive,
+        disabled: props.updatingState,
+      })
+    }
+
+    items.push({
+      id: 'delete',
+      label: t('messages.actions.delete', 'Delete'),
+      icon: Trash2,
+      onSelect: props.onDelete,
+      disabled: props.updatingState,
+    })
+
+    return items
+  }, [props, t])
+
+  return (
+    <div className="flex items-start gap-2">
+      {props.collapseToggle ? (
+        <IconButton
+          type="button"
+          onClick={props.collapseToggle.onToggle}
+          variant="ghost"
+          size="sm"
+          className="mt-1 text-muted-foreground hover:text-foreground"
+          aria-label={props.collapseToggle.expanded
+            ? t('messages.detail.hideDetails', 'Hide details')
+            : t('messages.detail.showDetails', 'Show details')}
+        >
+          {props.collapseToggle.expanded ? (
+            <ChevronUp className="h-4 w-4" aria-hidden />
+          ) : (
+            <ChevronDown className="h-4 w-4" aria-hidden />
+          )}
+        </IconButton>
+      ) : null}
+
+      <div className="min-w-0 flex-1">
+        <FormHeader
+          mode="detail"
+          title={showSubject ? props.detail.subject : undefined}
+          subtitle={`${t('messages.detail.from', 'From')}: ${props.detail.senderName || props.detail.senderEmail || props.detail.senderUserId}`}
+          statusBadge={<p className="text-xs text-muted-foreground">{formatDateTime(props.detail.sentAt)}</p>}
+          utilityActions={canReply ? (
+            <IconButton
+              type="button"
+              variant="outline"
+              size="default"
+              aria-label={t('messages.reply', 'Reply')}
+              onClick={props.onReply}
+            >
+              <Reply className="h-4 w-4" aria-hidden />
+            </IconButton>
+          ) : undefined}
+          menuTriggerMode="icon"
+          menuAriaLabel={t('ui.actions.actions', 'Actions')}
+          menuActions={actionItems}
+        />
+      </div>
+    </div>
+  )
+}

package/src/modules/messages/components/message-detail/panels/MessageListComponent.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import type { MessageListItemProps } from '@open-mercato/shared/modules/messages/types'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+function formatSentTime(value: Date | null): string {
+  if (!value || Number.isNaN(value.getTime())) return '—'
+
+  const now = new Date()
+  if (now.toDateString() === value.toDateString()) {
+    return value.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+  }
+
+  return value.toLocaleDateString([], { month: 'short', day: 'numeric' })
+}
+
+function normalizeBody(value: string | null): string {
+  const normalized = (value ?? '').trim().replace(/\s+/g, ' ')
+  return normalized || '—'
+}
+
+export function MessageListComponent({ message, onClick }: MessageListItemProps) {
+  const t = useT()
+  const senderLabel = message.senderName || '—'
+  const body = normalizeBody(message.body)
+  const sentAtLabel = formatSentTime(message.sentAt)
+
+  return (
+    <div
+      className={cn(
+        'group min-w-0 w-full cursor-pointer rounded-md px-2 py-2 transition-colors hover:bg-muted/40',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      )}
+      role="button"
+      tabIndex={0}
+      aria-label={t('messages.openMessageA11y', 'Open message from {sender}', { sender: senderLabel })}
+      onClick={onClick}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          onClick()
+        }
+      }}
+    >
+      <div className="flex items-center gap-3">
+        <span className={cn('w-40 flex-shrink-0 truncate text-sm md:w-56', message.unread ? 'font-semibold' : 'font-normal')}>
+          {senderLabel}
+        </span>
+
+        <span className="min-w-0 flex-1 truncate text-sm text-muted-foreground">{body}</span>
+
+        <span
+          className={cn('flex-shrink-0 text-xs', message.unread ? 'font-semibold text-foreground' : 'font-normal text-muted-foreground')}
+        >
+          {sentAtLabel}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default MessageListComponent

package/src/modules/messages/components/message-detail/panels/actions-panel.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import type { ComponentType } from 'react'
+import type { MessageActionsProps } from '@open-mercato/shared/modules/messages/types'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import type { MessageAction, MessageDetail } from '../types'
+import { formatDateTime } from '../utils'
+
+type ActionsPanelProps = {
+  detail: MessageDetail
+  messageActions: MessageAction[]
+  executingActionId: string | null
+  ActionsComponent: ComponentType<MessageActionsProps> | null
+  onExecuteActionById: MessageActionsProps['onExecuteAction']
+  onExecuteAction: (action: MessageAction, payload?: Record<string, unknown>) => Promise<void>
+}
+
+export function MessageDetailActionsSection(props: ActionsPanelProps) {
+  const t = useT()
+
+  if (!props.messageActions.length) return null
+
+  return (
+    <section className="space-y-3 border-l pl-4 py-2">
+      <h2 className="text-base font-semibold">{t('messages.actions.title', 'Actions')}</h2>
+      {props.ActionsComponent ? (
+        <props.ActionsComponent
+          message={{
+            id: props.detail.id,
+            type: props.detail.type,
+            actionData: {
+              ...(props.detail.actionData ?? {}),
+              actions: props.messageActions,
+            },
+            actionTaken: props.detail.actionTaken ?? null,
+          }}
+          onExecuteAction={props.onExecuteActionById}
+          isExecuting={props.executingActionId !== null}
+          executingActionId={props.executingActionId}
+        />
+      ) : (
+        <div className="flex flex-wrap gap-2">
+          {props.messageActions.map((action) => (
+            <Button
+              key={action.id}
+              type="button"
+              variant={action.variant ?? 'default'}
+              disabled={Boolean(props.detail.actionTaken) || props.executingActionId !== null}
+              onClick={() => void props.onExecuteAction(action)}
+            >
+              {props.executingActionId === action.id
+                ? t('messages.actions.executing', 'Executing...')
+                : t(action.labelKey || action.label, action.label)}
+            </Button>
+          ))}
+        </div>
+      )}
+      {props.detail.actionTaken ? (
+        <p className="text-xs text-muted-foreground">
+          {t('messages.actions.taken', 'Action taken')}: {props.detail.actionTaken} ({formatDateTime(props.detail.actionTakenAt)})
+        </p>
+      ) : null}
+    </section>
+  )
+}

package/src/modules/messages/components/message-detail/panels/attachments-panel.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  AttachmentVisualPreview,
+  formatAttachmentFileSize,
+} from '@open-mercato/ui/backend/detail/AttachmentVisualPreview'
+import {
+  buildAttachmentImageUrl,
+  slugifyAttachmentFileName,
+} from '@open-mercato/core/modules/attachments/lib/imageUrls'
+import type { MessageAttachment } from '../types'
+
+type AttachmentsPanelProps = {
+  attachmentsQuery: { isLoading: boolean; error: unknown }
+  attachments: MessageAttachment[] | undefined
+}
+
+export function MessageDetailAttachmentsSection(props: AttachmentsPanelProps) {
+  const t = useT()
+
+  if (props.attachmentsQuery.isLoading) {
+    return (
+      <section className="space-y-3 pl-4 py-2">
+        <h2 className="text-base font-semibold">{t('messages.attachedFiles', 'Attachments')}</h2>
+        <p className="text-sm text-muted-foreground">{t('messages.loading.attachments', 'Loading attachments...')}</p>
+      </section>
+    )
+  }
+
+  if (props.attachmentsQuery.error) {
+    return (
+      <section className="space-y-3 pl-4 py-2">
+        <h2 className="text-base font-semibold">{t('messages.attachedFiles', 'Attachments')}</h2>
+        <p className="text-sm text-destructive">
+          {props.attachmentsQuery.error instanceof Error
+            ? props.attachmentsQuery.error.message
+            : t('messages.errors.loadAttachmentsFailed', 'Failed to load attachments.')}
+        </p>
+      </section>
+    )
+  }
+
+  if ((props.attachments ?? []).length === 0) return null
+
+  return (
+    <section className="space-y-3 pl-4 py-2">
+      <h2 className="text-base font-semibold">{t('messages.attachedFiles', 'Attachments')}</h2>
+      <div className="space-y-2">
+        {(props.attachments ?? []).map((attachment) => (
+          <a
+            key={attachment.id}
+            href={attachment.url}
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center gap-3 rounded px-3 py-2 text-sm hover:bg-muted"
+          >
+            <AttachmentVisualPreview
+              fileName={attachment.fileName}
+              mimeType={attachment.mimeType}
+              thumbnailUrl={
+                attachment.mimeType?.toLowerCase().startsWith('image/')
+                  ? buildAttachmentImageUrl(attachment.id, {
+                    width: 120,
+                    height: 120,
+                    slug: slugifyAttachmentFileName(attachment.fileName),
+                    cropType: 'cover',
+                  })
+                  : null
+              }
+              className="h-11 w-11 shrink-0 overflow-hidden rounded"
+              iconClassName="mb-0 h-4 w-4"
+              labelClassName="text-[10px]"
+            />
+            <div className="min-w-0 flex-1">
+              <p className="truncate">{attachment.fileName}</p>
+              <p className="text-xs text-muted-foreground">
+                {formatAttachmentFileSize(attachment.fileSize)}
+              </p>
+            </div>
+          </a>
+        ))}
+      </div>
+    </section>
+  )
+}

package/src/modules/messages/components/message-detail/panels/body-panel.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from 'react'
+import type { MessageContentProps } from '@open-mercato/shared/modules/messages/types'
+import { MarkdownContent } from '@open-mercato/ui/backend/markdown/MarkdownContent'
+import type { MessageDetail } from '../types'
+
+type BodyPanelProps = {
+  detail: MessageDetail
+  contentProps: MessageContentProps
+  ContentComponent: React.ComponentType<MessageContentProps> | null
+}
+
+export function MessageDetailBodySection(props: BodyPanelProps) {
+  if (props.ContentComponent) {
+    return (
+      <div className="rounded border bg-muted/30 p-3">
+        <props.ContentComponent {...props.contentProps} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="rounded border bg-muted/30 p-3 text-sm whitespace-pre-wrap">
+      <MarkdownContent
+        body={props.detail.body}
+        format={props.detail.bodyFormat}
+        className="text-sm whitespace-pre-wrap [&>*]:mb-2 [&>*:last-child]:mb-0 [&_ul]:ml-4 [&_ul]:list-disc [&_ol]:ml-4 [&_ol]:list-decimal [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_pre]:rounded-md [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:text-xs"
+      />
+    </div>
+  )
+}

package/src/modules/messages/components/message-detail/panels/composer-dialogs.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { MessageComposer } from '@open-mercato/ui/backend/messages'
+import type { MessageAttachment, MessageDetail } from '../types'
+
+type ComposerDialogsProps = {
+  id: string
+  detail: MessageDetail
+  attachments: MessageAttachment[] | undefined
+  editOpen: boolean
+  setEditOpen: (value: boolean) => void
+  onRefresh: () => Promise<unknown>
+}
+
+export function MessageDetailComposerDialogs(props: ComposerDialogsProps) {
+  return (
+    <MessageComposer
+      variant="compose"
+      messageId={props.id}
+      open={props.editOpen && props.detail.isDraft && props.detail.canEditDraft}
+      onOpenChange={props.setEditOpen}
+      defaultValues={{
+        type: props.detail.type,
+        recipients: props.detail.recipients.map((recipient) => recipient.userId),
+        subject: props.detail.subject,
+        body: props.detail.body,
+        bodyFormat: props.detail.bodyFormat,
+        priority: props.detail.priority as 'low' | 'normal' | 'high' | 'urgent',
+        visibility: props.detail.visibility ?? 'internal',
+        sourceEntityType: props.detail.sourceEntityType ?? null,
+        sourceEntityId: props.detail.sourceEntityId ?? null,
+        externalEmail: props.detail.externalEmail ?? null,
+        externalName: props.detail.externalName ?? null,
+        attachmentIds: props.attachments?.map((attachment) => attachment.id) ?? [],
+      }}
+      onSuccess={() => {
+        props.setEditOpen(false)
+        void props.onRefresh()
+      }}
+    />
+  )
+}

package/src/modules/messages/components/message-detail/panels/dialogs.tsx

@@ -0,0 +1,107 @@
+"use client"
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import type { PendingActionConfirmation } from '../types'
+
+type DialogsProps = {
+  pendingActionConfirmation: PendingActionConfirmation | null
+  setPendingActionConfirmation: (value: PendingActionConfirmation | null) => void
+  executingActionId: string | null
+  handleConfirmPendingAction: () => Promise<void>
+  handleActionConfirmDialogKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void
+  deleteConfirmationOpen: boolean
+  setDeleteConfirmationOpen: (value: boolean) => void
+  updatingState: boolean
+  handleDelete: () => Promise<void>
+  handleDeleteDialogKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void
+}
+
+export function MessageDetailDialogs(props: DialogsProps) {
+  const t = useT()
+
+  return (
+    <>
+      <Dialog
+        open={Boolean(props.pendingActionConfirmation)}
+        onOpenChange={(open) => {
+          if (!open) props.setPendingActionConfirmation(null)
+        }}
+      >
+        <DialogContent className="sm:max-w-md" onKeyDown={props.handleActionConfirmDialogKeyDown}>
+          <DialogHeader>
+            <DialogTitle>{t('messages.confirm.actionTitle', 'Confirm action')}</DialogTitle>
+            <DialogDescription>
+              {props.pendingActionConfirmation?.action.confirmMessage
+                || t('messages.confirm.action', 'Are you sure you want to continue?')}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => props.setPendingActionConfirmation(null)}
+              disabled={props.executingActionId !== null}
+            >
+              {t('common.cancel', 'Cancel')}
+            </Button>
+            <Button
+              type="button"
+              variant={props.pendingActionConfirmation?.action.variant === 'destructive' ? 'destructive' : 'default'}
+              onClick={() => void props.handleConfirmPendingAction()}
+              disabled={props.executingActionId !== null}
+            >
+              {props.executingActionId === props.pendingActionConfirmation?.action.id
+                ? t('messages.actions.executing', 'Executing...')
+                : t(
+                  props.pendingActionConfirmation?.action.labelKey || props.pendingActionConfirmation?.action.label || 'messages.confirm.actionConfirm',
+                  props.pendingActionConfirmation?.action.label || t('messages.confirm.actionConfirm', 'Confirm'),
+                )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={props.deleteConfirmationOpen}
+        onOpenChange={props.setDeleteConfirmationOpen}
+      >
+        <DialogContent className="sm:max-w-md" onKeyDown={props.handleDeleteDialogKeyDown}>
+          <DialogHeader>
+            <DialogTitle>{t('messages.confirm.deleteTitle', 'Delete message')}</DialogTitle>
+            <DialogDescription>
+              {t('messages.confirm.delete', 'Delete this message from your view?')}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => props.setDeleteConfirmationOpen(false)}
+              disabled={props.updatingState}
+            >
+              {t('common.cancel', 'Cancel')}
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={() => void props.handleDelete()}
+              disabled={props.updatingState}
+            >
+              {t('messages.actions.delete', 'Delete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

package/src/modules/messages/components/message-detail/panels/index.ts

@@ -0,0 +1,11 @@
+export { MessageHeader } from './MessageHeader'
+export { MainMessageHeader } from './MainMessageHeader'
+export { MessageListComponent } from './MessageListComponent'
+export { MessageDetailBodySection } from './body-panel'
+export { MessageDetailMetaSection } from './meta-panel'
+export { MessageDetailActionsSection } from './actions-panel'
+export { MessageDetailObjectsSection } from './objects-panel'
+export { MessageDetailAttachmentsSection } from './attachments-panel'
+export { MessageDetailThreadSection } from './thread-panel'
+export { MessageDetailComposerDialogs } from './composer-dialogs'
+export { MessageDetailDialogs } from './dialogs'

package/src/modules/messages/components/message-detail/panels/meta-panel.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { MessageDetail } from '../types'
+
+export function MessageDetailMetaSection({ detail }: { detail: MessageDetail }) {
+  const t = useT()
+
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {detail.externalEmail ? (
+        <div className="space-y-1 rounded border p-3 text-sm">
+          <p className="font-medium">{t('messages.externalEmail', 'External email')}</p>
+          <p>{detail.externalEmail}</p>
+        </div>
+      ) : null}
+    </div>
+  )
+}