@happyvertical/smrt-messages 0.30.0

package/dist/svelte/components/FolderNav.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+/**
+ * FolderNav - Folder/label navigation sidebar
+ */
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.messages.js';
+import type { FolderData } from '../types.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  folders: FolderData[];
+  activeFolderId?: string;
+  showCounts?: boolean;
+  onfolderclick?: (folder: FolderData) => void;
+}
+
+const {
+  folders,
+  activeFolderId,
+  showCounts = true,
+  onfolderclick,
+}: Props = $props();
+
+const _systemFolders = $derived(folders.filter((f) => f.specialUse));
+
+const _userFolders = $derived(folders.filter((f) => !f.specialUse));
+
+function getFolderIcon(specialUse?: string): string {
+  switch (specialUse) {
+    case '\\Inbox':
+      return '📥';
+    case '\\Sent':
+      return '📤';
+    case '\\Drafts':
+      return '✎';
+    case '\\Trash':
+      return '🗑';
+    case '\\Junk':
+    case '\\Spam':
+      return '⚠';
+    default:
+      return '📁';
+  }
+}
+</script>
+
+<nav class="folder-nav" aria-label={t(M['messages.folder_nav.folders'])}>
+  {#if _systemFolders.length > 0}
+    <ul class="folder-list" role="list">
+      {#each _systemFolders as folder (folder.id)}
+        <li>
+          <button
+            class="folder-item"
+            class:folder-item--active={folder.id === activeFolderId}
+            type="button"
+            onclick={() => onfolderclick?.(folder)}
+            aria-current={folder.id === activeFolderId ? 'true' : undefined}
+          >
+            <span class="folder-icon">{getFolderIcon(folder.specialUse)}</span>
+            <span class="folder-name">{folder.name}</span>
+            {#if showCounts && folder.unreadCount > 0}
+              <span class="unread-badge">{folder.unreadCount}</span>
+            {/if}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  {#if _userFolders.length > 0}
+    {#if _systemFolders.length > 0}
+      <hr class="divider" />
+    {/if}
+    <ul class="folder-list" role="list">
+      {#each _userFolders as folder (folder.id)}
+        <li>
+          <button
+            class="folder-item"
+            class:folder-item--active={folder.id === activeFolderId}
+            type="button"
+            onclick={() => onfolderclick?.(folder)}
+            aria-current={folder.id === activeFolderId ? 'true' : undefined}
+          >
+            <span class="folder-icon">📁</span>
+            <span class="folder-name">{folder.name}</span>
+            {#if showCounts && folder.unreadCount > 0}
+              <span class="unread-badge">{folder.unreadCount}</span>
+            {/if}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</nav>
+
+<style>
+  .folder-nav {
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem 0;
+  }
+
+  .folder-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .folder-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: none;
+    background: none;
+    cursor: pointer;
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    transition: background var(--smrt-duration-short2, 150ms);
+    text-align: left;
+  }
+
+  .folder-item:hover {
+    background: var(--smrt-color-surface-variant, #e1e2ec);
+  }
+
+  .folder-item--active {
+    background: var(--smrt-color-secondary-container, #d7e3f7);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+  }
+
+  .folder-item:focus-visible {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: -2px;
+  }
+
+  .folder-icon {
+    flex-shrink: 0;
+    font-size: var(--smrt-typography-body-large-size, 1rem);
+  }
+
+  .folder-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .unread-badge {
+    flex-shrink: 0;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-on-primary, #fff);
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
+    padding: 0 0.25rem;
+  }
+
+  .divider {
+    border: none;
+    border-top: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    margin: 0.25rem 0.75rem;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { FolderData } from '../types.js';
+export interface Props {
+    folders: FolderData[];
+    activeFolderId?: string;
+    showCounts?: boolean;
+    onfolderclick?: (folder: FolderData) => void;
+}
+declare const FolderNav: import("svelte").Component<Props, {}, "">;
+type FolderNav = ReturnType<typeof FolderNav>;
+export default FolderNav;
+//# sourceMappingURL=FolderNav.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderNav.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/FolderNav.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG9C,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CAC9C;AAiFD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/svelte/components/ForwardForm.svelte

@@ -0,0 +1,166 @@
+<script lang="ts" module>
+import type { MessageData, RecipientEntry } from '../types.js';
+
+export interface Props {
+  originalMessage: MessageData;
+  onsend?: (to: RecipientEntry[], body: string) => void;
+  oncancel?: () => void;
+}
+</script>
+
+<script lang="ts">
+  import { useI18n } from '@happyvertical/smrt-ui/i18n';
+  import { M } from '../i18n.js';
+  import RecipientInput from './RecipientInput.svelte';
+
+  const { t } = useI18n();
+
+  let { originalMessage, onsend, oncancel }: Props = $props();
+
+  let to: RecipientEntry[] = $state([]);
+  let body = $state('');
+  let isSending = $state(false);
+
+  const forwardedBlock = $derived.by(() => {
+    const dateStr = originalMessage.date
+      ? new Date(originalMessage.date).toLocaleString()
+      : 'unknown date';
+    const from = originalMessage.senderName || originalMessage.senderAddress;
+    const toStr = originalMessage.recipientAddresses
+      ?.map((r) => (r.name ? `${r.name} <${r.address}>` : r.address))
+      .join(', ') || '';
+
+    return [
+      '---------- Forwarded message ----------',
+      `From: ${from}`,
+      `Date: ${dateStr}`,
+      `Subject: ${originalMessage.subject}`,
+      `To: ${toStr}`,
+      '',
+      originalMessage.body || '',
+    ].join('\n');
+  });
+
+  function handleSend() {
+    if (isSending || to.length === 0) return;
+    isSending = true;
+    onsend?.(to, body);
+  }
+</script>
+
+<div class="forward-form">
+  <div class="forward-header">{t(M['messages.forward_form.header'])}</div>
+
+  <RecipientInput
+    label="To"
+    recipients={to}
+    onchange={(r) => { to = r; }}
+  />
+
+  <textarea
+    class="forward-body"
+    bind:value={body}
+    placeholder={t(M['messages.forward_form.note_placeholder'])}
+    rows={3}
+  ></textarea>
+
+  <div class="forwarded-original">
+    <pre class="forwarded-text">{forwardedBlock}</pre>
+  </div>
+
+  <div class="actions">
+    <button
+      type="button"
+      class="btn-primary"
+      disabled={isSending || to.length === 0}
+      onclick={handleSend}
+    >
+      {isSending ? 'Sending...' : 'Forward'}
+    </button>
+    <button type="button" class="btn-text" onclick={() => oncancel?.()}>
+      Cancel
+    </button>
+  </div>
+</div>
+
+<style>
+  .forward-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-2, 8px);
+    padding: var(--smrt-spacing-3, 12px);
+    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+    border-radius: var(--smrt-radius-md, 12px);
+    background: var(--smrt-color-surface, #fffbfe);
+    font-family: var(--smrt-font-family, system-ui);
+  }
+
+  .forward-header {
+    font-size: var(--smrt-typography-title-small-size, 13px);
+    color: var(--smrt-color-on-surface-variant, #49454f);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+  }
+
+  .forward-body {
+    width: 100%;
+    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+    border-radius: var(--smrt-radius-sm, 8px);
+    padding: var(--smrt-spacing-2, 8px);
+    font-family: var(--smrt-font-family, system-ui);
+    font-size: var(--smrt-typography-body-medium-size, 14px);
+    resize: vertical;
+    box-sizing: border-box;
+  }
+
+  .forward-body:focus {
+    outline: 2px solid var(--smrt-color-primary, #6750a4);
+    outline-offset: -1px;
+  }
+
+  .forwarded-original {
+    padding: var(--smrt-spacing-2, 8px);
+    background: var(--smrt-color-surface-variant, #e7e0ec);
+    border-radius: var(--smrt-radius-sm, 8px);
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  .forwarded-text {
+    margin: 0;
+    font-size: var(--smrt-typography-body-small-size, 12px);
+    color: var(--smrt-color-on-surface-variant, #49454f);
+    white-space: pre-wrap;
+    font-family: var(--smrt-font-family, system-ui);
+  }
+
+  .actions {
+    display: flex;
+    gap: var(--smrt-spacing-2, 8px);
+  }
+
+  .btn-primary {
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-6, 24px);
+    border-radius: var(--smrt-radius-full, 20px);
+    border: none;
+    background: var(--smrt-color-primary, #6750a4);
+    color: var(--smrt-color-on-primary, #fff);
+    font-family: var(--smrt-font-family, system-ui);
+    font-size: var(--smrt-typography-label-large-size, 14px);
+    cursor: pointer;
+  }
+
+  .btn-primary:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .btn-text {
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-4, 16px);
+    border: none;
+    background: transparent;
+    color: var(--smrt-color-on-surface-variant, #49454f);
+    font-family: var(--smrt-font-family, system-ui);
+    font-size: var(--smrt-typography-label-large-size, 14px);
+    cursor: pointer;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { MessageData, RecipientEntry } from '../types.js';
+export interface Props {
+    originalMessage: MessageData;
+    onsend?: (to: RecipientEntry[], body: string) => void;
+    oncancel?: () => void;
+}
+declare const ForwardForm: import("svelte").Component<Props, {}, "">;
+type ForwardForm = ReturnType<typeof ForwardForm>;
+export default ForwardForm;
+//# sourceMappingURL=ForwardForm.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ForwardForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ForwardForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE/D,MAAM,WAAW,KAAK;IACpB,eAAe,EAAE,WAAW,CAAC;IAC7B,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,EAAE,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA0ED,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/svelte/components/MessageCard.svelte

@@ -0,0 +1,336 @@
+<script lang="ts">
+/**
+ * MessageCard - Single message row with type-adaptive rendering
+ */
+
+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 MessageStatusIndicator from './MessageStatusIndicator.svelte';
+import MessageTypeBadge from './MessageTypeBadge.svelte';
+
+const { t } = useI18n();
+
+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 }]>;
+}
+
+const {
+  message,
+  selected = false,
+  compact = false,
+  showAccount = false,
+  showType = true,
+  onclick,
+  onselect,
+  onflag,
+  account,
+  typeContent,
+}: Props = $props();
+
+const _formattedDate = $derived.by(() => {
+  if (!message.date) return '';
+  const d =
+    typeof message.date === 'string' ? new Date(message.date) : message.date;
+  const now = new Date();
+  const isToday = d.toDateString() === now.toDateString();
+  if (isToday) {
+    return d.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+  }
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+});
+
+const _preview = $derived.by(() => {
+  const text = message.body || '';
+  if (text.length <= 120) return text;
+  return `${text.slice(0, 120)}...`;
+});
+
+const _emailMeta = $derived.by(() => {
+  if (message.type !== 'email') return null;
+  return {
+    folderPath: message.folderPath,
+    ccCount: message.ccAddresses?.length || 0,
+  };
+});
+
+const _tweetMeta = $derived.by(() => {
+  if (message.type !== 'tweet') return null;
+  const meta = message.meta || {};
+  return {
+    retweetCount: meta.retweetCount || 0,
+    likeCount: meta.likeCount || 0,
+    replyCount: meta.replyCount || 0,
+  };
+});
+
+const _slackMeta = $derived.by(() => {
+  if (message.type !== 'slack') return null;
+  const meta = message.meta || {};
+  return {
+    channelName: meta.channelName || '',
+    reactions: meta.reactions || [],
+  };
+});
+</script>
+
+<div
+  class="message-card"
+  class:message-card--selected={selected}
+  class:message-card--unread={!message.isRead}
+  class:message-card--compact={compact}
+  role="row"
+  aria-selected={selected}
+>
+  {#if onselect}
+    <div class="select-col">
+      <input
+        type="checkbox"
+        checked={selected}
+        onchange={() => onselect?.(message)}
+        aria-label={t(M['messages.message_card.select_message'])}
+      />
+    </div>
+  {/if}
+
+  <button
+    class="message-content"
+    type="button"
+    onclick={() => onclick?.(message)}
+  >
+    <div class="header-row">
+      <div class="sender">
+        <span class="sender-name" class:sender-name--unread={!message.isRead}>
+          {message.senderName || message.senderAddress}
+        </span>
+        {#if showAccount && account}
+          <span class="account-label">{account.name}</span>
+        {/if}
+      </div>
+      <div class="header-right">
+        <MessageStatusIndicator
+          isRead={message.isRead}
+          isFlagged={message.isFlagged}
+          hasAttachments={message.hasAttachments}
+        />
+        <time class="date">{_formattedDate}</time>
+      </div>
+    </div>
+
+    <div class="subject-row">
+      {#if showType}
+        <MessageTypeBadge type={message.type} />
+      {/if}
+      <span class="subject" class:subject--unread={!message.isRead}>
+        {message.subject || '(no subject)'}
+      </span>
+    </div>
+
+    {#if !compact}
+      <div class="preview-row">
+        {#if typeContent}
+          {@render typeContent({ message })}
+        {:else if _tweetMeta}
+          <span class="meta-inline">
+            🔄 {_tweetMeta.retweetCount}
+            ❤ {_tweetMeta.likeCount}
+            💬 {_tweetMeta.replyCount}
+          </span>
+        {:else if _slackMeta && _slackMeta.channelName}
+          <span class="meta-inline">
+            #{_slackMeta.channelName}
+          </span>
+        {:else if _emailMeta?.folderPath}
+          <span class="meta-inline">{_emailMeta.folderPath}</span>
+        {/if}
+        <span class="preview">{_preview}</span>
+      </div>
+    {/if}
+  </button>
+
+  {#if onflag}
+    <button
+      class="flag-btn"
+      type="button"
+      onclick={() => onflag?.(message)}
+      title={message.isFlagged ? 'Unflag' : 'Flag'}
+      aria-label={message.isFlagged ? 'Unflag' : 'Flag'}
+    >
+      {message.isFlagged ? '⚑' : '⚐'}
+    </button>
+  {/if}
+</div>
+
+<style>
+  .message-card {
+    display: flex;
+    align-items: stretch;
+    border-bottom: 1px solid var(--smrt-color-outline-variant, #c4c6d0);
+    transition: background var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .message-card:hover {
+    background: var(--smrt-color-surface-variant, #e1e2ec);
+  }
+
+  .message-card--selected {
+    background: var(--smrt-color-secondary-container, #d7e3f7);
+  }
+
+  .message-card--unread {
+    background: var(--smrt-color-surface, #fefbff);
+  }
+
+  .select-col {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 0.5rem 0.75rem 0.75rem;
+  }
+
+  .message-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    padding: 0.75rem 0.75rem 0.75rem 0.5rem;
+    border: none;
+    background: none;
+    text-align: left;
+    cursor: pointer;
+    min-width: 0;
+    color: inherit;
+    font: inherit;
+  }
+
+  .message-content:focus-visible {
+    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline-offset: -2px;
+  }
+
+  .header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .sender {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+
+  .sender-name {
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sender-name--unread {
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  .account-label {
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    background: var(--smrt-color-surface-variant, #e1e2ec);
+    padding: 0.125rem 0.375rem;
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    white-space: nowrap;
+  }
+
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .date {
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    white-space: nowrap;
+  }
+
+  .subject-row {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    min-width: 0;
+  }
+
+  .subject {
+    font: var(--smrt-typography-body-medium-font, 0.875rem / 1.25 sans-serif);
+    color: var(--smrt-color-on-surface, #1a1c1e);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .subject--unread {
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+
+  .preview-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+
+  .preview {
+    font: var(--smrt-typography-body-small-font, 0.75rem / 1.33 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .meta-inline {
+    flex-shrink: 0;
+    font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+  }
+
+  .flag-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    border: none;
+    background: none;
+    cursor: pointer;
+    font-size: var(--smrt-typography-body-large-size, 1rem);
+    color: var(--smrt-color-on-surface-variant, #43474e);
+    opacity: 0.5;
+    transition: opacity var(--smrt-duration-short2, 150ms);
+  }
+
+  .flag-btn:hover {
+    opacity: 1;
+  }
+
+  .message-card--compact .message-content {
+    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
+  }
+
+  .message-card--compact .preview-row {
+    display: none;
+  }
+</style>