@axium/email 0.0.1

package/lib/AddressChips.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { text } from '@axium/client';
+	import { Icon } from '@axium/client/components';
+	import { Mailbox } from '@axium/email/common';
+
+	let {
+		value = $bindable(),
+		id,
+		placeholder,
+	}: {
+		value: Mailbox[];
+		id?: string;
+		placeholder?: string;
+	} = $props();
+
+	let input = $state('');
+	let error = $state<string>();
+
+	function addChip() {
+		const raw = input.trim().replace(/,$/, '');
+		if (!raw) return;
+
+		// allow `Name <user@example.com>` or a bare address
+		const match = raw.match(/^(?:"?([^"<]*)"?\s*)?<([^>]+)>$/);
+		const parsed = Mailbox.safeParse(match ? { name: match[1]?.trim() || null, address: match[2] } : { address: raw });
+
+		if (!parsed.success) {
+			error = text('AddressChips.invalid', { address: raw });
+			return;
+		}
+
+		error = undefined;
+		if (!value.some(v => v.address == parsed.data.address)) value.push(parsed.data);
+		input = '';
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		if (e.key == 'Enter' || e.key == ',') {
+			e.preventDefault();
+			addChip();
+		} else if (e.key == 'Backspace' && !input && value.length) {
+			value.pop();
+		}
+	}
+</script>
+
+<div class="AddressChips">
+	{#each value as mailbox, i}
+		<span class="chip">
+			{#if mailbox.name}
+				<span>{mailbox.name}</span>
+				<span class="subtle">&lt;{mailbox.address}&gt;</span>
+			{:else}
+				<span>{mailbox.address}</span>
+			{/if}
+			<button type="button" class="reset" onclick={() => value.splice(i, 1)}>
+				<Icon i="xmark" --size="12px" />
+			</button>
+		</span>
+	{/each}
+	<input
+		{id}
+		type="text"
+		bind:value={input}
+		{onkeydown}
+		onblur={addChip}
+		placeholder={value.length ? '' : placeholder || text('AddressChips.placeholder')}
+		class={[error && 'error']}
+	/>
+	{#if error}
+		<span class="error">{error}</span>
+	{/if}
+</div>
+
+<style>
+	.AddressChips {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.25em;
+		flex: 1;
+		min-width: 0;
+
+		input {
+			border: none;
+			flex: 1;
+			min-width: 8em;
+			padding: 0.25em 0;
+		}
+	}
+
+	.chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5em;
+		padding: 0.2em 0.6em;
+		border-radius: 1em;
+		border: var(--border-accent);
+		background-color: var(--bg-accent);
+		white-space: nowrap;
+	}
+
+	span.error {
+		width: 100%;
+		font-size: 0.85em;
+	}
+</style>

package/lib/Composer.svelte

@@ -0,0 +1,245 @@
+<script lang="ts">
+	import { fetchAPI, text } from '@axium/client';
+	import { closeOnBackGesture } from '@axium/client/attachments';
+	import { Icon } from '@axium/client/components';
+	import { toast, toastStatus } from '@axium/client/toast';
+	import type { Email, Mailbox } from '@axium/email/common';
+	import AddressChips from './AddressChips.svelte';
+
+	let {
+		dialog = $bindable(),
+		userId,
+		onSent,
+	}: {
+		dialog?: HTMLDialogElement;
+		userId: string;
+		onSent?(email: Email): unknown;
+	} = $props();
+
+	let to = $state<Mailbox[]>([]),
+		cc = $state<Mailbox[]>([]),
+		bcc = $state<Mailbox[]>([]),
+		subject = $state(''),
+		body = $state(''),
+		inReplyTo = $state<string | null>(null),
+		draftId = $state<string | null>(null),
+		showCc = $state(false),
+		showBcc = $state(false),
+		sending = $state(false);
+
+	export function compose() {
+		reset();
+		dialog?.showModal();
+	}
+
+	export function editDraft(draft: Email) {
+		reset();
+		to = [...draft.to];
+		cc = [...draft.cc];
+		bcc = [...draft.bcc];
+		showCc = !!draft.cc.length;
+		showBcc = !!draft.bcc.length;
+		subject = draft.subject;
+		body = draft.text ?? '';
+		inReplyTo = draft.inReplyTo ?? null;
+		draftId = draft.id;
+		dialog?.showModal();
+	}
+
+	export function reply(email: Email) {
+		reset();
+		to = [email.from];
+		subject = /^re:/i.test(email.subject) ? email.subject : `Re: ${email.subject}`;
+		inReplyTo = email.messageId;
+		const quoted = (email.text ?? '').replaceAll(/^/gm, '> ');
+		body = `\n\n${text('Composer.on_wrote', { date: email.date.toLocaleString(), name: email.from.name || email.from.address })}\n${quoted}`;
+		dialog?.showModal();
+	}
+
+	export function forward(email: Email) {
+		reset();
+		subject = /^fwd:/i.test(email.subject) ? email.subject : `Fwd: ${email.subject}`;
+		body = [
+			'',
+			'',
+			`---------- ${text('Composer.forwarded_message')} ----------`,
+			`From: ${email.from.name || ''} <${email.from.address}>`,
+			`Date: ${email.date.toLocaleString()}`,
+			`Subject: ${email.subject}`,
+			`To: ${email.to.map(m => m.address).join(', ')}`,
+			'',
+			email.text ?? '',
+		].join('\n');
+		dialog?.showModal();
+	}
+
+	function reset() {
+		to = [];
+		cc = [];
+		bcc = [];
+		subject = '';
+		body = '';
+		inReplyTo = null;
+		draftId = null;
+		showCc = false;
+		showBcc = false;
+	}
+
+	async function send() {
+		if (!to.length && !cc.length && !bcc.length) {
+			toast('warning', text('Composer.no_recipients'));
+			return;
+		}
+		sending = true;
+		try {
+			const email = await fetchAPI('PUT', 'users/:id/email', { to, cc, bcc, subject, text: body, inReplyTo, draftId }, userId);
+			toast('success', text('email.toast_sent'));
+			dialog?.close();
+			reset();
+			onSent?.(email);
+		} catch (e) {
+			toast('error', e);
+		} finally {
+			sending = false;
+		}
+	}
+
+	async function saveDraft() {
+		const promise = fetchAPI(
+			'PUT',
+			'users/:id/email',
+			{ to, cc, bcc, subject, text: body, inReplyTo, draftId, isDraft: true },
+			userId
+		).then(draft => {
+			draftId = draft.id;
+		});
+		await toastStatus(promise, text('email.toast_draft_saved'));
+	}
+</script>
+
+<dialog bind:this={dialog} class="Composer" {@attach closeOnBackGesture}>
+	<div class="composer-header">
+		<strong>{text('Composer.title')}</strong>
+		<button type="button" class="reset" onclick={() => dialog?.close()}>
+			<Icon i="xmark" />
+		</button>
+	</div>
+	<div class="field">
+		<label for="composer-to">{text('Composer.to')}</label>
+		<AddressChips id="composer-to" bind:value={to} />
+		<span class="cc-toggles subtle">
+			{#if !showCc}<button type="button" class="reset" onclick={() => (showCc = true)}>{text('Composer.cc')}</button>{/if}
+			{#if !showBcc}<button type="button" class="reset" onclick={() => (showBcc = true)}>{text('Composer.bcc')}</button>{/if}
+		</span>
+	</div>
+	{#if showCc}
+		<div class="field">
+			<label for="composer-cc">{text('Composer.cc')}</label>
+			<AddressChips id="composer-cc" bind:value={cc} />
+		</div>
+	{/if}
+	{#if showBcc}
+		<div class="field">
+			<label for="composer-bcc">{text('Composer.bcc')}</label>
+			<AddressChips id="composer-bcc" bind:value={bcc} />
+		</div>
+	{/if}
+	<div class="field">
+		<label for="composer-subject">{text('Composer.subject')}</label>
+		<input id="composer-subject" type="text" bind:value={subject} maxlength="998" />
+	</div>
+	<textarea bind:value={body} placeholder={text('Composer.body_placeholder')}></textarea>
+	<div class="composer-actions">
+		<button type="button" class="icon-text send" onclick={send} disabled={sending}>
+			<Icon i="paper-plane" />
+			<span>{text('Composer.send')}</span>
+		</button>
+		<button type="button" onclick={saveDraft} disabled={sending}>{text('Composer.save_draft')}</button>
+		<button
+			type="button"
+			class="reset discard"
+			onclick={() => {
+				dialog?.close();
+				reset();
+			}}
+		>
+			<Icon i="trash" />
+			<span class="mobile-hide">{text('Composer.discard')}</span>
+		</button>
+	</div>
+</dialog>
+
+<style>
+	dialog.Composer {
+		display: none;
+		flex-direction: column;
+		gap: 0.5em;
+		width: min(40em, calc(100% - 2em));
+		height: min(35em, 90dvh);
+
+		&:modal {
+			display: flex;
+		}
+	}
+
+	.composer-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.field {
+		display: flex;
+		align-items: center;
+		gap: 0.5em;
+		border-bottom: var(--border-alt);
+		padding-bottom: 0.25em;
+
+		label {
+			color: var(--fg-disabled);
+			flex-shrink: 0;
+		}
+
+		input {
+			border: none;
+			border-radius: 0;
+			flex: 1;
+			padding: 0.25em 0;
+		}
+	}
+
+	.cc-toggles {
+		display: flex;
+		gap: 0.75em;
+		flex-shrink: 0;
+
+		button:hover {
+			text-decoration: underline;
+		}
+	}
+
+	textarea {
+		flex: 1;
+		resize: none;
+		border: none;
+		padding: 0.5em 0;
+		font-size: 16px;
+	}
+
+	.composer-actions {
+		display: flex;
+		align-items: center;
+		gap: 1em;
+
+		.send {
+			font-weight: bold;
+		}
+
+		.discard {
+			margin-left: auto;
+			display: inline-flex;
+			align-items: center;
+			gap: 0.5em;
+		}
+	}
+</style>

package/lib/MessageRow.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	import { invalidateAll } from '$app/navigation';
+	import { fetchAPI, text } from '@axium/client';
+	import { contextMenu } from '@axium/client/attachments';
+	import { Icon } from '@axium/client/components';
+	import { toast, toastStatus } from '@axium/client/toast';
+	import type { Email, EmailChangeable } from '@axium/email/common';
+
+	let { email = $bindable(), onopen }: { email: Email; onopen(email: Email): unknown } = $props();
+
+	function shortDate(date: Date): string {
+		const now = new Date();
+		if (date.toDateString() == now.toDateString()) return date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+		if (date.getFullYear() == now.getFullYear()) return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+		return date.toLocaleDateString();
+	}
+
+	async function patch(changes: EmailChangeable) {
+		try {
+			const result = await fetchAPI('PATCH', 'email/:id', changes, email.id);
+			Object.assign(email, result, { attachments: email.attachments });
+			if ('folder' in changes) await invalidateAll();
+		} catch (e) {
+			toast('error', e);
+		}
+	}
+
+	const correspondents = $derived(
+		email.folder == 'sent' || email.folder == 'drafts'
+			? email.to.map(m => m.name || m.address).join(', ')
+			: email.from.name || email.from.address
+	);
+</script>
+
+<div
+	class={['MessageRow', !email.read && 'unread']}
+	onclick={() => onopen(email)}
+	role="row"
+	tabindex="0"
+	{@attach contextMenu(() => [
+		{
+			i: email.read ? 'envelope' : 'envelope-open',
+			text: email.read ? text('email.mark_unread') : text('email.mark_read'),
+			action: () => patch({ read: !email.read }),
+		},
+		{
+			i: email.starred ? 'star' : 'regular/star',
+			text: email.starred ? text('email.unstar') : text('email.star'),
+			action: () => patch({ starred: !email.starred }),
+		},
+		email.folder != 'archive' &&
+			email.folder != 'sent' &&
+			email.folder != 'drafts' && { i: 'box-archive', text: text('email.archive'), action: () => patch({ folder: 'archive' }) },
+		email.folder == 'inbox' && { i: 'triangle-exclamation', text: text('email.mark_spam'), action: () => patch({ folder: 'spam' }) },
+		email.folder == 'spam' && { i: 'inbox', text: text('email.not_spam'), action: () => patch({ folder: 'inbox' }) },
+		(email.folder == 'trash' || email.folder == 'archive') && {
+			i: 'inbox',
+			text: text('email.move_to_inbox'),
+			action: () => patch({ folder: 'inbox' }),
+		},
+		{
+			i: 'trash',
+			danger: true,
+			text: email.folder == 'trash' || email.folder == 'drafts' ? text('email.delete_forever') : text('generic.delete'),
+			action: () => toastStatus(fetchAPI('DELETE', 'email/:id', {}, email.id).then(invalidateAll), text('email.toast_deleted')),
+		},
+	])}
+>
+	<button
+		class="reset star"
+		onclick={e => {
+			e.stopPropagation();
+			void patch({ starred: !email.starred });
+		}}
+		title={email.starred ? text('email.unstar') : text('email.star')}
+	>
+		<Icon i={email.starred ? 'star' : 'regular/star'} --size="16px" --fill={email.starred ? 'var(--fg-warning)' : undefined} />
+	</button>
+	<span class="correspondents">{correspondents}</span>
+	<span class="MessageRow-content">
+		<span class="subject">{email.subject || text('email.no_subject')}</span>
+		{#if email.snippet}
+			<span class="snippet subtle mobile-hide">&nbsp;&mdash;&nbsp;{email.snippet}</span>
+		{/if}
+	</span>
+	{#if email.attachments.length}
+		<Icon i="paperclip" --size="14px" />
+	{/if}
+	<span class="date">{shortDate(email.date)}</span>
+</div>
+
+<style>
+	.MessageRow {
+		display: flex;
+		align-items: center;
+		gap: 0.75em;
+		padding: 0.6em 1em;
+		border-bottom: var(--border-alt);
+		cursor: pointer;
+		min-width: 0;
+
+		&:hover {
+			background-color: var(--bg-alt);
+		}
+
+		&.unread {
+			font-weight: bold;
+			background-color: var(--bg-menu);
+
+			&:hover {
+				background-color: var(--bg-alt);
+			}
+		}
+	}
+
+	.star {
+		flex-shrink: 0;
+		display: inline-flex;
+	}
+
+	.correspondents {
+		flex: 0 0 12em;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.MessageRow-content {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+
+		.snippet {
+			font-weight: normal;
+		}
+	}
+
+	.date {
+		flex-shrink: 0;
+		font-size: 0.85em;
+	}
+
+	@media (width < 700px) {
+		.MessageRow {
+			flex-wrap: wrap;
+			row-gap: 0.1em;
+		}
+
+		.correspondents {
+			flex: 1;
+		}
+
+		.MessageRow-content {
+			flex-basis: 100%;
+			order: 1;
+		}
+	}
+</style>