@happyvertical/smrt-messages 0.30.0

package/dist/svelte/components/MessageCard.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { AccountData, MessageData } from '../types.js';
+export interface Props {
+    message: MessageData;
+    selected?: boolean;
+    compact?: boolean;
+    showAccount?: boolean;
+    showType?: boolean;
+    onclick?: (message: MessageData) => void;
+    onselect?: (message: MessageData) => void;
+    onflag?: (message: MessageData) => void;
+    account?: AccountData;
+    typeContent?: Snippet<[{
+        message: MessageData;
+    }]>;
+}
+declare const MessageCard: import("svelte").Component<Props, {}, "">;
+type MessageCard = ReturnType<typeof MessageCard>;
+export default MessageCard;
+//# sourceMappingURL=MessageCard.svelte.d.ts.map

package/dist/svelte/components/MessageCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MessageCard.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK5D,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,CAAC,CAAC,CAAC;CACnD;AA6ID,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/MessageDetail.svelte

@@ -0,0 +1,309 @@
+<script lang="ts">
+/**
+ * MessageDetail - Full message view with type-adaptive sections
+ */
+
+import { Card } from '@happyvertical/smrt-ui/ui';
+import type { Snippet } from 'svelte';
+import type { AccountData, AttachmentData, MessageData } from '../types.js';
+import AttachmentChip from './AttachmentChip.svelte';
+import MessageStatusIndicator from './MessageStatusIndicator.svelte';
+import MessageTypeBadge from './MessageTypeBadge.svelte';
+
+export interface Props {
+  message: MessageData;
+  attachments?: AttachmentData[];
+  account?: AccountData;
+  showHtml?: boolean;
+  onreply?: (message: MessageData) => void;
+  onforward?: (message: MessageData) => void;
+  ondelete?: (message: MessageData) => void;
+  typeDetail?: Snippet<[{ message: MessageData }]>;
+}
+
+const {
+  message,
+  attachments = [],
+  account,
+  showHtml = false,
+  onreply,
+  onforward,
+  ondelete,
+  typeDetail,
+}: Props = $props();
+
+const _formattedDate = $derived.by(() => {
+  if (!message.date) return '';
+  const d =
+    typeof message.date === 'string' ? new Date(message.date) : message.date;
+  return d.toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+});
+
+const _recipients = $derived.by(() => {
+  return message.recipientAddresses
+    .map((r) => (r.name ? `${r.name} <${r.address}>` : r.address))
+    .join(', ');
+});
+
+const _ccRecipients = $derived.by(() => {
+  if (!message.ccAddresses || message.ccAddresses.length === 0) return '';
+  return message.ccAddresses
+    .map((r) => (r.name ? `${r.name} <${r.address}>` : r.address))
+    .join(', ');
+});
+
+const _tweetMeta = $derived.by(() => {
+  if (message.type !== 'tweet') return null;
+  return message.meta || {};
+});
+
+const _slackMeta = $derived.by(() => {
+  if (message.type !== 'slack') return null;
+  return message.meta || {};
+});
+
+const _sanitizedHtml = $derived.by(() => {
+  if (!message.htmlBody) return '';
+  return message.htmlBody
+    .replace(/<script[\s\S]*?<\/script>/gi, '')
+    .replace(/<iframe[\s\S]*?<\/iframe>/gi, '')
+    .replace(/\son\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]*)/gi, '')
+    .replace(/javascript\s*:/gi, 'blocked:')
+    .replace(/<link[^>]*>/gi, '')
+    .replace(/<style[\s\S]*?<\/style>/gi, '');
+});
+</script>
+
+<article class="message-detail">
+  <Card padding="lg">
+    <header class="detail-header">
+      <div class="header-top">
+        <MessageTypeBadge type={message.type} size="md" />
+        <MessageStatusIndicator
+          isRead={message.isRead}
+          isFlagged={message.isFlagged}
+          hasAttachments={message.hasAttachments}
+        />
+      </div>
+
+      <h2 class="subject">{message.subject || '(no subject)'}</h2>
+
+      <div class="meta-grid">
+        <div class="meta-row">
+          <span class="meta-label">From</span>
+          <span class="meta-value">
+            {message.senderName ? `${message.senderName} <${message.senderAddress}>` : message.senderAddress}
+          </span>
+        </div>
+        <div class="meta-row">
+          <span class="meta-label">To</span>
+          <span class="meta-value">{_recipients}</span>
+        </div>
+        {#if _ccRecipients}
+          <div class="meta-row">
+            <span class="meta-label">Cc</span>
+            <span class="meta-value">{_ccRecipients}</span>
+          </div>
+        {/if}
+        <div class="meta-row">
+          <span class="meta-label">Date</span>
+          <time class="meta-value">{_formattedDate}</time>
+        </div>
+        {#if account}
+          <div class="meta-row">
+            <span class="meta-label">Account</span>
+            <span class="meta-value">{account.name}</span>
+          </div>
+        {/if}
+      </div>
+    </header>
+
+    {#if typeDetail}
+      <div class="type-detail">
+        {@render typeDetail({ message })}
+      </div>
+    {:else if _tweetMeta}
+      <div class="type-specific">
+        <span>🔄 {_tweetMeta.retweetCount || 0}</span>
+        <span>❤ {_tweetMeta.likeCount || 0}</span>
+        <span>💬 {_tweetMeta.replyCount || 0}</span>
+      </div>
+    {:else if _slackMeta}
+      <div class="type-specific">
+        {#if _slackMeta.channelName}
+          <span>#{_slackMeta.channelName}</span>
+        {/if}
+      </div>
+    {/if}
+
+    <div class="body">
+      {#if showHtml && message.htmlBody}
+        {@html _sanitizedHtml}
+      {:else}
+        <pre class="body-text">{message.body}</pre>
+      {/if}
+    </div>
+
+    {#if attachments.length > 0}
+      <div class="attachments">
+        <h3 class="attachments-label">Attachments ({attachments.length})</h3>
+        <div class="attachments-list">
+          {#each attachments as attachment (attachment.id)}
+            <AttachmentChip {attachment} />
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    {#if onreply || onforward || ondelete}
+      <div class="actions">
+        {#if onreply}
+          <button class="action-btn" type="button" onclick={() => onreply?.(message)}>
+            ↩ Reply
+          </button>
+        {/if}
+        {#if onforward}
+          <button class="action-btn" type="button" onclick={() => onforward?.(message)}>
+            ↪ Forward
+          </button>
+        {/if}
+        {#if ondelete}
+          <button class="action-btn action-btn--danger" type="button" onclick={() => ondelete?.(message)}>
+            🗑 Delete
+          </button>
+        {/if}
+      </div>
+    {/if}
+  </Card>
+</article>
+
+<style>
+  .message-detail {
+    max-width: 100%;
+  }
+
+  .detail-header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+  }
+
+  .header-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .subject {
+    margin: 0;
+    font: var(--smrt-typography-title-large-font, 600 1.375rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+  }
+
+  .meta-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .meta-row {
+    display: flex;
+    gap: 0.75rem;
+    font: var(--smrt-typography-body-small-font, 0.75rem / 1.33 sans-serif);
+  }
+
+  .meta-label {
+    flex-shrink: 0;
+    width: 4rem;
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+  }
+
+  .meta-value {
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .type-specific {
+    display: flex;
+    gap: 1rem;
+    padding: 0.75rem 0;
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .type-detail {
+    padding: 0.75rem 0;
+  }
+
+  .body {
+    padding: 1rem 0;
+  }
+
+  .body-text {
+    font: var(--smrt-typography-body-large-font, 1rem / 1.5 sans-serif);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin: 0;
+    font-family: inherit;
+  }
+
+  .attachments {
+    padding-top: 0.75rem;
+    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+  }
+
+  .attachments-label {
+    margin: 0 0 0.5rem;
+    font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .attachments-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+  }
+
+  .action-btn {
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--smrt-color-outline, #72787e);
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    background: var(--smrt-color-surface, #fefbff);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
+    cursor: pointer;
+    transition: background var(--smrt-duration-short2, 150ms);
+  }
+
+  .action-btn:hover {
+    background: var(--smrt-color-surface-variant, #e1e2ec);
+  }
+
+  .action-btn--danger {
+    color: var(--smrt-color-error, #ba1a1a);
+    border-color: var(--smrt-color-error, #ba1a1a);
+  }
+
+  .action-btn--danger:hover {
+    background: var(--smrt-color-error-container, #ffdad6);
+  }
+</style>

package/dist/svelte/components/MessageDetail.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { AccountData, AttachmentData, MessageData } from '../types.js';
+export interface Props {
+    message: MessageData;
+    attachments?: AttachmentData[];
+    account?: AccountData;
+    showHtml?: boolean;
+    onreply?: (message: MessageData) => void;
+    onforward?: (message: MessageData) => void;
+    ondelete?: (message: MessageData) => void;
+    typeDetail?: Snippet<[{
+        message: MessageData;
+    }]>;
+}
+declare const MessageDetail: import("svelte").Component<Props, {}, "">;
+type MessageDetail = ReturnType<typeof MessageDetail>;
+export default MessageDetail;
+//# sourceMappingURL=MessageDetail.svelte.d.ts.map

package/dist/svelte/components/MessageDetail.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageDetail.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MessageDetail.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM5E,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,WAAW,CAAA;KAAE,CAAC,CAAC,CAAC;CAClD;AA+KD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/MessageFilters.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+/**
+ * MessageFilters - Filter/sort controls bar
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.messages.js';
+import type {
+  AccountData,
+  MessageFilterState,
+  MessageSort,
+  MessageType,
+} from '../types.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  filters?: MessageFilterState;
+  sort?: MessageSort;
+  accounts?: AccountData[];
+  availableTypes?: MessageType[];
+  onfilterchange?: (filters: MessageFilterState) => void;
+  onsearch?: (query: string) => void;
+}
+
+const {
+  filters = {},
+  sort = { field: 'date', direction: 'desc' },
+  accounts = [],
+  availableTypes = ['email', 'tweet', 'slack'],
+  onfilterchange,
+  onsearch,
+}: Props = $props();
+
+function getInitialFilterState() {
+  return {
+    searchValue: filters.search ?? '',
+    filters,
+  };
+}
+
+const initialFilterState = getInitialFilterState();
+let searchValue = $state(initialFilterState.searchValue);
+let appliedFilters: MessageFilterState | undefined = initialFilterState.filters;
+
+$effect(() => {
+  if (appliedFilters === filters) {
+    return;
+  }
+
+  appliedFilters = filters;
+  searchValue = filters.search ?? '';
+});
+
+function updateFilter(key: keyof MessageFilterState, value: any) {
+  const updated = { ...filters, [key]: value || undefined };
+  onfilterchange?.(updated);
+}
+
+function handleSearch() {
+  onsearch?.(searchValue);
+  updateFilter('search', searchValue);
+}
+
+function clearFilters() {
+  searchValue = '';
+  onfilterchange?.({});
+}
+
+const _hasActiveFilters = $derived(
+  !!filters.type ||
+    !!filters.accountId ||
+    filters.isRead !== undefined ||
+    filters.isFlagged !== undefined ||
+    !!filters.search,
+);
+</script>
+
+<div class="message-filters" role="search" aria-label={t(M['messages.message_filters.filters_label'])}>
+  <div class="search-row">
+    <input
+      type="search"
+      class="search-input"
+      placeholder={t(M['messages.message_filters.search_placeholder'])}
+      bind:value={searchValue}
+      onkeydown={(e) => { if (e.key === 'Enter') handleSearch(); }}
+      aria-label={t(M['messages.message_filters.search_label'])}
+    />
+    <button class="search-btn" type="button" onclick={handleSearch}>Search</button>
+  </div>
+
+  <div class="filter-row">
+    <select
+      class="filter-select"
+      value={filters.type || ''}
+      onchange={(e) => updateFilter('type', (e.target as HTMLSelectElement).value)}
+      aria-label={t(M['messages.message_filters.filter_by_type'])}
+    >
+      <option value="">{t(M['messages.message_filters.all_types'])}</option>
+      {#each availableTypes as type}
+        <option value={type}>{type === 'email' ? 'Email' : type === 'tweet' ? 'Tweet' : type === 'slack' ? 'Slack' : type}</option>
+      {/each}
+    </select>
+
+    {#if accounts.length > 0}
+      <select
+        class="filter-select"
+        value={filters.accountId || ''}
+        onchange={(e) => updateFilter('accountId', (e.target as HTMLSelectElement).value)}
+        aria-label={t(M['messages.message_filters.filter_by_account'])}
+      >
+        <option value="">{t(M['messages.message_filters.all_accounts'])}</option>
+        {#each accounts as account}
+          <option value={account.id}>{account.name}</option>
+        {/each}
+      </select>
+    {/if}
+
+    <select
+      class="filter-select"
+      value={filters.isRead === undefined ? '' : filters.isRead ? 'read' : 'unread'}
+      onchange={(e) => {
+        const val = (e.target as HTMLSelectElement).value;
+        updateFilter('isRead', val === '' ? undefined : val === 'read');
+      }}
+      aria-label={t(M['messages.message_filters.filter_by_read_status'])}
+    >
+      <option value="">Read & unread</option>
+      <option value="unread">{t(M['messages.message_filters.unread_only'])}</option>
+      <option value="read">{t(M['messages.message_filters.read_only'])}</option>
+    </select>
+
+    <label class="filter-checkbox">
+      <input
+        type="checkbox"
+        checked={filters.isFlagged === true}
+        onchange={(e) => updateFilter('isFlagged', (e.target as HTMLInputElement).checked ? true : undefined)}
+      />
+      Flagged
+    </label>
+
+    {#if _hasActiveFilters}
+      <button class="clear-btn" type="button" onclick={clearFilters}>
+        {t(M['messages.message_filters.clear_filters'])}
+      </button>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .message-filters {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.75rem;
+    background: var(--smrt-color-surface, #fefbff);
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+  }
+
+  .search-row {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .search-input {
+    flex: 1;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--smrt-color-outline, #72787e);
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+    background: var(--smrt-color-surface, #fefbff);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+  }
+
+  .search-input:focus {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: -1px;
+  }
+
+  .search-btn {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    background: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-on-primary, #fff);
+    font: var(--smrt-typography-label-large-font, 500 0.875rem / 1.25 sans-serif);
+    cursor: pointer;
+  }
+
+  .search-btn:hover {
+    opacity: 0.9;
+  }
+
+  .filter-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .filter-select {
+    padding: 0.375rem 0.5rem;
+    border: 1px solid var(--smrt-color-outline, #72787e);
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    font: var(--smrt-typography-body-small-font, 0.75rem / 1.33 sans-serif);
+    background: var(--smrt-color-surface, #fefbff);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+  }
+
+  .filter-checkbox {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    font: var(--smrt-typography-body-small-font, 0.75rem / 1.33 sans-serif);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    cursor: pointer;
+  }
+
+  .clear-btn {
+    padding: 0.25rem 0.5rem;
+    border: none;
+    background: none;
+    font: var(--smrt-typography-label-medium-font, 500 0.75rem / 1.33 sans-serif);
+    color: var(--smrt-color-primary, #005ac1);
+    cursor: pointer;
+    text-decoration: underline;
+  }
+</style>

package/dist/svelte/components/MessageFilters.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { AccountData, MessageFilterState, MessageSort, MessageType } from '../types.js';
+export interface Props {
+    filters?: MessageFilterState;
+    sort?: MessageSort;
+    accounts?: AccountData[];
+    availableTypes?: MessageType[];
+    onfilterchange?: (filters: MessageFilterState) => void;
+    onsearch?: (query: string) => void;
+}
+declare const MessageFilters: import("svelte").Component<Props, {}, "">;
+type MessageFilters = ReturnType<typeof MessageFilters>;
+export default MessageFilters;
+//# sourceMappingURL=MessageFilters.svelte.d.ts.map

package/dist/svelte/components/MessageFilters.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageFilters.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/MessageFilters.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,WAAW,EACZ,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,cAAc,CAAC,EAAE,WAAW,EAAE,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAgHD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/MessageList.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+/**
+ * MessageList - Unified message list with selection
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { Snippet } from 'svelte';
+import { M } from '../i18n.messages.js';
+import type { AccountData, MessageData } from '../types.js';
+import MessageCard from './MessageCard.svelte';
+
+const { t } = useI18n();
+
+export interface Props {
+  messages: MessageData[];
+  selected?: Set<string>;
+  activeMessageId?: string;
+  accounts?: AccountData[];
+  loading?: boolean;
+  emptyMessage?: string;
+  onmessageclick?: (message: MessageData) => void;
+  onselect?: (message: MessageData) => void;
+  onflag?: (message: MessageData) => void;
+  showType?: boolean;
+  showAccount?: boolean;
+  compact?: boolean;
+  card?: Snippet<[{ message: MessageData }]>;
+}
+
+const {
+  messages,
+  selected = new Set(),
+  activeMessageId,
+  accounts = [],
+  loading = false,
+  emptyMessage = 'No messages found.',
+  onmessageclick,
+  onselect,
+  onflag,
+  showType = true,
+  showAccount = false,
+  compact = false,
+  card,
+}: Props = $props();
+
+function getAccount(accountId: string): AccountData | undefined {
+  return accounts.find((a) => a.id === accountId);
+}
+</script>
+
+<div class="message-list" role="grid" aria-label={t(M['messages.message_list.messages_label'])}>
+  {#if loading}
+    <div class="loading" role="status" aria-live="polite">
+      <p>{t(M['messages.message_list.loading'])}</p>
+    </div>
+  {:else if messages.length === 0}
+    <div class="empty" role="status" aria-live="polite">
+      <p>{emptyMessage}</p>
+    </div>
+  {:else}
+    {#each messages as message (message.id)}
+      {#if card}
+        {@render card({ message })}
+      {:else}
+        <MessageCard
+          {message}
+          selected={selected.has(message.id)}
+          {compact}
+          {showType}
+          {showAccount}
+          account={showAccount ? getAccount(message.accountId) : undefined}
+          onclick={onmessageclick}
+          {onselect}
+          {onflag}
+        />
+      {/if}
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .message-list {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    border-radius: var(--smrt-radius-medium, 0.5rem);
+    overflow: hidden;
+    background: var(--smrt-color-surface, #fefbff);
+  }
+
+  .loading,
+  .empty {
+    text-align: center;
+    padding: var(--smrt-spacing-3xl, 3rem);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .loading p,
+  .empty p {
+    font: var(--smrt-typography-body-large-font, 1.125rem / 1.5 sans-serif);
+  }
+</style>