@open-mercato/core 0.4.5-develop-5191db4ef3 → 0.4.5-develop-9f9549ebc8

package/src/modules/messages/components/defaults/DefaultMessageListItem.tsx

@@ -0,0 +1,102 @@
+"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'
+import { CheckCircle2, FileText, Paperclip, Zap } from 'lucide-react'
+
+function formatDateTime(value: Date | null): string {
+  if (!value) return '—'
+  if (Number.isNaN(value.getTime())) return '—'
+  return value.toLocaleString()
+}
+
+function formatSentTime(value: Date | null): string {
+  if (!value) return '—'
+  if (Number.isNaN(value.getTime())) return '—'
+
+  const now = new Date()
+  const isSameDay = now.toDateString() === value.toDateString()
+  if (isSameDay) {
+    return value.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+  }
+
+  const isSameYear = now.getFullYear() === value.getFullYear()
+  if (isSameYear) {
+    return value.toLocaleDateString([], { month: 'short', day: 'numeric' })
+  }
+
+  return value.toLocaleDateString([], { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+function truncateWords(value: string, maxWords: number): string {
+  const normalized = value.trim().replace(/\s+/g, ' ')
+  if (!normalized) return '—'
+  const words = normalized.split(' ')
+  if (words.length <= maxWords) return normalized
+  return `${words.slice(0, maxWords).join(' ')}...`
+}
+
+export function DefaultMessageListItem({ message, onClick }: MessageListItemProps) {
+  const t = useT()
+  const senderLabel = message.senderName || '—'
+  const subject = message.subject || '—'
+  const absoluteSentAt = formatDateTime(message.sentAt)
+  const sentAtLabel = formatSentTime(message.sentAt)
+  const bodyPreview = truncateWords(message.body || '', 16)
+
+  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.openMessageDetailedA11y', 'Open message {subject} from {sender}, sent {sentAt}', {
+        subject,
+        sender: senderLabel,
+        sentAt: absoluteSentAt,
+      })}
+      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>
+
+        <div className="flex min-w-0 flex-1 items-center gap-1.5 text-sm">
+          <span className={cn('truncate text-foreground', message.unread ? 'font-semibold' : 'font-normal')}>
+            {subject}
+          </span>
+          <span className="text-muted-foreground">-</span>
+          <span className="truncate text-muted-foreground">{bodyPreview}</span>
+        </div>
+
+        <div className="flex flex-shrink-0 items-center gap-1.5 text-muted-foreground">
+          {message.hasObjects ? <FileText className="h-3.5 w-3.5" aria-hidden /> : null}
+          {message.hasAttachments ? <Paperclip className="h-3.5 w-3.5" aria-hidden /> : null}
+          {message.hasActions && !message.actionTaken ? (
+            <Zap className="h-3.5 w-3.5 text-amber-600" aria-hidden />
+          ) : null}
+          {message.actionTaken ? <CheckCircle2 className="h-3.5 w-3.5 text-green-600" aria-hidden /> : null}
+        </div>
+
+        <span
+          className={cn('flex-shrink-0 text-xs', message.unread ? 'font-semibold text-foreground' : 'font-normal text-muted-foreground')}
+          title={absoluteSentAt}
+        >
+          {sentAtLabel}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default DefaultMessageListItem

package/src/modules/messages/components/defaults/MessageRecordObjectDetail.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import * as React from 'react'
+import { Link2 } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { ObjectDetailProps } from '@open-mercato/shared/modules/messages/types'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { getMessageObjectType } from '../../lib/message-objects-registry'
+
+function readSnapshotLabel(snapshot: Record<string, unknown> | undefined): string | null {
+  if (!snapshot) return null
+
+  const candidates = ['subject', 'title', 'name', 'label', 'id']
+  for (const key of candidates) {
+    const value = snapshot[key]
+    if (typeof value === 'string' && value.trim().length > 0) {
+      return value.trim()
+    }
+  }
+
+  return null
+}
+
+function readSnapshotSubtitle(snapshot: Record<string, unknown> | undefined): string | null {
+  if (!snapshot) return null
+
+  const candidates = ['type', 'status']
+  for (const key of candidates) {
+    const value = snapshot[key]
+    if (typeof value === 'string' && value.trim().length > 0) {
+      return value.trim()
+    }
+  }
+
+  return null
+}
+
+export function MessageRecordObjectDetail({
+  entityId,
+  entityModule,
+  entityType,
+  snapshot,
+  previewData,
+  actionRequired,
+  actionLabel,
+  actions,
+  onAction,
+}: ObjectDetailProps) {
+  const t = useT()
+  const [executingActionId, setExecutingActionId] = React.useState<string | null>(null)
+
+  const registeredType = getMessageObjectType(entityModule, entityType)
+  const fallbackTitle = t('messages.objectPreview.fallback.title', 'Linked object')
+  const typeLabel = registeredType
+    ? t(registeredType.labelKey, `${entityModule}:${entityType}`)
+    : `${entityModule}:${entityType}`
+  const title = previewData?.title || readSnapshotLabel(snapshot) || fallbackTitle
+  const subtitle = previewData?.subtitle
+    || readSnapshotSubtitle(snapshot)
+    || t('messages.objectPreview.fallback.subtitle', '{type} • {id}', { type: typeLabel, id: entityId })
+
+  return (
+    <div className="space-y-3 rounded p-3 text-sm">
+      <div className="flex items-start gap-3 rounded bg-muted/20 p-3">
+        <Link2 className="mt-0.5 h-4 w-4 text-muted-foreground" />
+        <div className="min-w-0 flex-1 space-y-1">
+          <p className="font-medium">{title}</p>
+          <p className="text-xs text-muted-foreground" title={entityId}>{subtitle}</p>
+          {previewData?.status ? (
+            <Badge variant="outline" className="text-xs">{previewData.status}</Badge>
+          ) : null}
+        </div>
+      </div>
+
+      {actionRequired ? (
+        <p className="text-xs text-amber-700">
+          {actionLabel
+            ? t('messages.composer.objectAction', 'Action: {action}', { action: actionLabel })
+            : t('messages.composer.objectActionRequired', 'Action required')}
+        </p>
+      ) : null}
+
+      {actions.length ? (
+        <div className="flex flex-wrap gap-2">
+          {actions.map((action) => (
+            <Button
+              key={action.id}
+              type="button"
+              size="sm"
+              variant={action.variant ?? 'default'}
+              onClick={async () => {
+                if (executingActionId) return
+                setExecutingActionId(action.id)
+                try {
+                  await onAction(action.id)
+                } finally {
+                  setExecutingActionId(null)
+                }
+              }}
+              disabled={executingActionId !== null}
+            >
+              {executingActionId === action.id
+                ? t('messages.actions.executing', 'Executing...')
+                : t(action.labelKey ?? action.id, action.labelKey ?? action.id)}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+export default MessageRecordObjectDetail

package/src/modules/messages/components/defaults/MessageRecordObjectPreview.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import { Link2 } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { ObjectPreviewProps } from '@open-mercato/shared/modules/messages/types'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { getMessageObjectType } from '../../lib/message-objects-registry'
+
+function readSnapshotLabel(snapshot: Record<string, unknown> | undefined): string | null {
+  if (!snapshot) return null
+  const candidates = ['subject', 'title', 'name', 'label', 'id']
+  for (const key of candidates) {
+    const value = snapshot[key]
+    if (typeof value === 'string' && value.trim().length > 0) {
+      return value.trim()
+    }
+  }
+  return null
+}
+
+function readSnapshotSubtitle(snapshot: Record<string, unknown> | undefined): string | null {
+  if (!snapshot) return null
+  const candidates = ['type', 'status']
+  for (const key of candidates) {
+    const value = snapshot[key]
+    if (typeof value === 'string' && value.trim().length > 0) {
+      return value.trim()
+    }
+  }
+  return null
+}
+
+export function MessageRecordObjectPreview({
+  entityId,
+  entityModule,
+  entityType,
+  snapshot,
+  previewData,
+  actionRequired,
+  actionLabel,
+}: ObjectPreviewProps) {
+  const t = useT()
+  const registeredType = getMessageObjectType(entityModule, entityType)
+  const fallbackTitle = t('messages.objectPreview.fallback.title', 'Linked object')
+  const typeLabel = registeredType
+    ? t(registeredType.labelKey, `${entityModule}:${entityType}`)
+    : `${entityModule}:${entityType}`
+  const title = previewData?.title || readSnapshotLabel(snapshot) || fallbackTitle
+  const subtitle = previewData?.subtitle
+    || readSnapshotSubtitle(snapshot)
+    || t('messages.objectPreview.fallback.subtitle', '{type} • {id}', { type: typeLabel, id: entityId })
+
+  return (
+    <div className="flex items-start gap-3 rounded bg-muted/20 p-3">
+      <Link2 className="mt-0.5 h-4 w-4 text-muted-foreground" />
+      <div className="min-w-0 flex-1 space-y-1">
+        <div className="flex items-center gap-2">
+          <p className="font-medium text-sm">{title}</p>
+          {actionRequired ? (
+            <Badge variant="secondary" className="text-xs">
+              {actionLabel || t('messages.composer.objectActionRequired', 'Action required')}
+            </Badge>
+          ) : null}
+        </div>
+        <p className="text-xs text-muted-foreground" title={entityId}>{subtitle}</p>
+        {previewData?.status ? (
+          <Badge variant="outline" className="text-xs">{previewData.status}</Badge>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export default MessageRecordObjectPreview

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

@@ -0,0 +1,13 @@
+export {
+  MessageDetailActionsSection,
+  MessageDetailAttachmentsSection,
+  MessageDetailBodySection,
+  MessageDetailComposerDialogs,
+  MessageDetailDialogs,
+  MainMessageHeader,
+  MessageListComponent,
+  MessageHeader,
+  MessageDetailMetaSection,
+  MessageDetailObjectsSection,
+  MessageDetailThreadSection,
+} from './panels'

package/src/modules/messages/components/message-detail/hooks/useMessageDetails.ts

@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import { useQueryClient } from '@tanstack/react-query'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
+import { useMessageDetailsQueries } from './useMessageDetailsQueries'
+import { useMessageDetailsActions } from './useMessageDetailsActions'
+import { useMessageDetailsConversation } from './useMessageDetailsConversation'
+
+export function useMessageDetails(id: string) {
+  const t = useT()
+  const router = useRouter()
+  const scopeVersion = useOrganizationScopeVersion()
+  const queryClient = useQueryClient()
+
+  const queryState = useMessageDetailsQueries({
+    id,
+    t,
+    scopeVersion,
+    queryClient,
+  })
+
+  const isArchived = (queryState.detail?.recipients ?? []).some((item) => item.status === 'archived')
+
+  const actionState = useMessageDetailsActions({
+    id,
+    t,
+    detail: queryState.detail,
+    detailQuery: queryState.detailQuery,
+    attachments: queryState.attachments,
+    isArchived,
+    onDeleted: () => router.push('/backend/messages'),
+    refreshDetailWithoutAutoMarkRead: queryState.refreshDetailWithoutAutoMarkRead,
+  })
+
+  const conversationState = useMessageDetailsConversation({
+    detail: queryState.detail,
+    t,
+  })
+
+  const backToList = React.useCallback(() => {
+    router.push('/backend/messages')
+  }, [router])
+
+  return {
+    t,
+    router,
+    backToList,
+    ...queryState,
+    ...conversationState,
+    ...actionState,
+    isArchived,
+  }
+}