@axium/email 0.0.1

package/lib/ThreadMessage.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+	import { fetchAPI, text } from '@axium/client';
+	import { Icon } from '@axium/client/components';
+	import { toast } from '@axium/client/toast';
+	import { formatBytes } from '@axium/core/format';
+	import { splitQuoted, type Email } from '@axium/email/common';
+
+	let {
+		email = $bindable(),
+		expanded = $bindable(false),
+		onreply,
+		onforward,
+	}: {
+		email: Email;
+		expanded?: boolean;
+		onreply(email: Email): unknown;
+		onforward(email: Email): unknown;
+	} = $props();
+
+	const body = $derived(splitQuoted(email.text ?? ''));
+	let showQuoted = $state(false);
+
+	$effect(() => {
+		if (!expanded || email.read) return;
+		fetchAPI('PATCH', 'email/:id', { read: true }, email.id).then(
+			() => (email.read = true),
+			e => toast('error', e)
+		);
+	});
+
+	async function toggleStar(e: Event) {
+		e.stopPropagation();
+		try {
+			const result = await fetchAPI('PATCH', 'email/:id', { starred: !email.starred }, email.id);
+			email.starred = result.starred;
+		} catch (e) {
+			toast('error', e);
+		}
+	}
+
+	const toNames = $derived(email.to.map(m => (m.name ? `${m.name} <${m.address}>` : m.address)).join(', '));
+</script>
+
+<div class={['ThreadMessage', expanded && 'expanded']}>
+	{#if !expanded}
+		<div class="tm-collapsed" onclick={() => (expanded = true)} role="button" tabindex="0">
+			<strong class="tm-from">{email.from.name || email.from.address}</strong>
+			<span class="tm-snippet subtle">{email.snippet ?? ''}</span>
+			<span class="tm-date subtle">{email.date.toLocaleDateString()}</span>
+		</div>
+	{:else}
+		<div class="tm-header" onclick={() => (expanded = false)} role="button" tabindex="0">
+			<div class="tm-headers">
+				<div>
+					<strong>{email.from.name || email.from.address}</strong>
+					{#if email.from.name}
+						<span class="subtle">&lt;{email.from.address}&gt;</span>
+					{/if}
+				</div>
+				<span class="subtle">{text('ThreadMessage.to_line', { names: toNames })}</span>
+			</div>
+			<span class="tm-date subtle">{email.date.toLocaleString()}</span>
+			<button class="reset" onclick={toggleStar} 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>
+		</div>
+
+		<div class="tm-body">
+			{#if email.html}
+				<iframe sandbox="" srcdoc={email.html} title={email.subject || text('email.no_subject')}></iframe>
+			{:else}
+				<pre>{body.content}</pre>
+				{#if body.quoted}
+					<button class="quote-toggle" title={text('ThreadMessage.trimmed')} onclick={() => (showQuoted = !showQuoted)}>
+						<Icon i="ellipsis" --size="14px" />
+					</button>
+					{#if showQuoted}
+						<pre class="subtle">{body.quoted}</pre>
+					{/if}
+				{/if}
+			{/if}
+		</div>
+
+		{#if email.attachments.length}
+			<div class="tm-attachments">
+				{#each email.attachments as attachment}
+					<a href="/api/email/{email.id}/attachments/{attachment.id}" download={attachment.filename}>
+						<span class="tm-attachment icon-text">
+							<Icon i="paperclip" --size="14px" />
+							<span>{attachment.filename}</span>
+							<span class="subtle">{formatBytes(attachment.size)}</span>
+						</span>
+					</a>
+				{/each}
+			</div>
+		{/if}
+
+		<div class="tm-actions">
+			<button class="icon-text" onclick={() => onreply(email)}>
+				<Icon i="reply" />
+				<span>{text('email.reply')}</span>
+			</button>
+			<button class="icon-text" onclick={() => onforward(email)}>
+				<Icon i="share" />
+				<span>{text('email.forward')}</span>
+			</button>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.ThreadMessage {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75em;
+		padding: 0.75em 0;
+
+		&:not(:last-child) {
+			border-bottom: var(--border-alt);
+		}
+	}
+
+	.tm-collapsed {
+		display: flex;
+		align-items: center;
+		gap: 0.75em;
+		cursor: pointer;
+		min-width: 0;
+
+		.tm-from {
+			flex: 0 0 12em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.tm-snippet {
+			flex: 1;
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+
+	.tm-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.75em;
+		cursor: pointer;
+
+		.tm-headers {
+			flex: 1;
+			min-width: 0;
+			display: flex;
+			flex-direction: column;
+			gap: 0.25em;
+		}
+
+		button {
+			display: inline-flex;
+		}
+	}
+
+	.tm-date {
+		flex-shrink: 0;
+		font-size: 0.85em;
+	}
+
+	.tm-body {
+		pre {
+			background: none;
+			padding: 0;
+			white-space: pre-wrap;
+			word-break: break-word;
+			font-family: inherit;
+			margin: 0;
+		}
+
+		iframe {
+			width: 100%;
+			height: 50vh;
+			border: none;
+			background-color: white;
+			border-radius: 0.5em;
+		}
+	}
+
+	.quote-toggle {
+		display: inline-flex;
+		margin: 0.5em 0;
+		padding: 0 0.5em;
+		border-radius: 1em;
+		background-color: var(--bg-accent);
+	}
+
+	.tm-attachments {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5em;
+
+		.tm-attachment {
+			gap: 0.5em;
+			padding: 0.4em 0.8em;
+			border: var(--border-accent);
+			border-radius: 0.5em;
+
+			&:hover {
+				background-color: var(--bg-accent);
+			}
+		}
+	}
+
+	.tm-actions {
+		display: flex;
+		gap: 1em;
+	}
+</style>

package/lib/index.ts

@@ -0,0 +1,4 @@
+export { default as AddressChips } from './AddressChips.svelte';
+export { default as Composer } from './Composer.svelte';
+export { default as MessageRow } from './MessageRow.svelte';
+export { default as ThreadMessage } from './ThreadMessage.svelte';

package/lib/tsconfig.json

@@ -0,0 +1,13 @@
+{
+	"extends": ["../tsconfig.json", "../.svelte-kit/tsconfig.json"],
+	"compilerOptions": {
+		"rootDir": "..",
+		"noEmit": true,
+		"module": "preserve",
+		"moduleResolution": "Bundler",
+		"types": ["@sveltejs/kit"]
+	},
+	"include": ["**/*.svelte", "**/*.ts"],
+	"exclude": [],
+	"references": [{ "path": ".." }]
+}

package/locales/en.json

@@ -0,0 +1,57 @@
+{
+	"app_name": {
+		"email": "Email"
+	},
+	"email": {
+		"archive": "Archive",
+		"back": "Back",
+		"compose": "Compose",
+		"delete_forever": "Delete forever",
+		"drafts": "Drafts",
+		"empty_folder": "Nothing here",
+		"forward": "Forward",
+		"inbox": "Inbox",
+		"mark_read": "Mark as read",
+		"mark_spam": "Mark as spam",
+		"mark_unread": "Mark as unread",
+		"move_to_inbox": "Move to inbox",
+		"no_subject": "(no subject)",
+		"no_username": "You need a username to send and receive email.",
+		"no_username_link": "Pick one in your account settings.",
+		"not_spam": "Not spam",
+		"refresh": "Refresh",
+		"reply": "Reply",
+		"sent": "Sent",
+		"spam": "Spam",
+		"star": "Star",
+		"starred": "Starred",
+		"toast_deleted": "Email deleted",
+		"toast_draft_saved": "Draft saved",
+		"toast_received": "New email from {name}",
+		"toast_sent": "Email sent",
+		"trash": "Trash",
+		"unstar": "Unstar"
+	},
+	"AddressChips": {
+		"invalid": "Invalid address: {address}",
+		"placeholder": "Add recipients..."
+	},
+	"Composer": {
+		"bcc": "Bcc",
+		"body_placeholder": "Write your message...",
+		"cc": "Cc",
+		"discard": "Discard",
+		"forwarded_message": "Forwarded message",
+		"no_recipients": "Add at least one recipient",
+		"on_wrote": "On {date}, {name} wrote:",
+		"save_draft": "Save draft",
+		"send": "Send",
+		"subject": "Subject",
+		"title": "New message",
+		"to": "To"
+	},
+	"ThreadMessage": {
+		"to_line": "to {names}",
+		"trimmed": "Show trimmed content"
+	}
+}

package/package.json

@@ -0,0 +1,83 @@
+{
+	"name": "@axium/email",
+	"version": "0.0.1",
+	"author": "James Prevett <axium@jamespre.dev>",
+	"description": "Email for Axium",
+	"funding": {
+		"type": "individual",
+		"url": "https://github.com/sponsors/james-pre"
+	},
+	"license": "LGPL-3.0-or-later",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/james-pre/axium.git"
+	},
+	"homepage": "https://github.com/james-pre/axium#readme",
+	"bugs": {
+		"url": "https://github.com/james-pre/axium/issues"
+	},
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": "./dist/index.js",
+		"./client": "./dist/client/index.js",
+		"./server": "./dist/server/index.js",
+		"./*": "./dist/*.js",
+		"./components": "./lib/index.js",
+		"./components/*": "./lib/*.svelte"
+	},
+	"files": [
+		"dist",
+		"lib",
+		"routes",
+		"locales",
+		"db.json"
+	],
+	"scripts": {
+		"build": "tsc"
+	},
+	"peerDependencies": {
+		"@axium/client": ">=0.33.0",
+		"@axium/core": ">=0.36.0",
+		"@axium/server": ">=0.51.0",
+		"@sveltejs/kit": "^2.27.3",
+		"commander": "^15.0.0",
+		"ioium": "^1.6.0",
+		"kysely": "^0.29.0",
+		"utilium": "^3.0.0"
+	},
+	"dependencies": {
+		"mailauth": "^4.13.3",
+		"postal-mime": "^2.7.5",
+		"smtp-server": "^3.19.2",
+		"zod": "^4.0.5"
+	},
+	"devDependencies": {
+		"@types/smtp-server": "^3.5.13"
+	},
+	"axium": {
+		"server": {
+			"routes": "routes",
+			"hooks": "./dist/server/hooks.js",
+			"cli": "./dist/server/cli.js",
+			"db": "./db.json",
+			"web_client_hooks": "./dist/client/web_hook.js"
+		},
+		"apps": [
+			{
+				"id": "email",
+				"name": "Email",
+				"icon": "envelope"
+			}
+		],
+		"update_checks": true,
+		"config": {
+			"inbound": {
+				"enabled": true,
+				"port": 25,
+				"max_size": 25000
+			}
+		}
+	}
+}

package/routes/email/+layout.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { afterNavigate, invalidateAll } from '$app/navigation';
+	import { page } from '$app/state';
+	import { text } from '@axium/client';
+	import { Icon } from '@axium/client/components';
+	import { Composer } from '@axium/email/components';
+	import { setContext } from 'svelte';
+	import { emailApp, type EmailApp } from './context.js';
+	import './email.css';
+
+	const { data, children } = $props();
+
+	let composer = $state<ReturnType<typeof Composer>>();
+	let sidebar = $state<HTMLDivElement>();
+
+	setContext<EmailApp>(emailApp, {
+		composer: () => composer,
+		toggleSidebar: () => sidebar?.classList.toggle('active'),
+	});
+
+	afterNavigate(() => sidebar?.classList.remove('active'));
+
+	const folders = [
+		['inbox', 'inbox'],
+		['starred', 'star'],
+		['sent', 'paper-plane'],
+		['drafts', 'file-lines'],
+		['spam', 'triangle-exclamation'],
+		['trash', 'trash'],
+		['archive', 'box-archive'],
+	] as const;
+
+	const current = $derived(page.params.folder ?? 'inbox');
+</script>
+
+<div id="email-app">
+	<div id="email-sidebar" bind:this={sidebar}>
+		<button class="compose icon-text" onclick={() => composer?.compose()}>
+			<Icon i="pen" />
+			<span>{text('email.compose')}</span>
+		</button>
+		{#each folders as [name, icon]}
+			<a href="/email/{name}" class={['email-sidebar-item', 'icon-text', current == name && 'active']}>
+				<Icon i={icon} --size="16px" />
+				<span>{text(`email.${name}`)}</span>
+			</a>
+		{/each}
+	</div>
+
+	{@render children()}
+
+	{#if data.session}
+		<button class="mobile-only mobile-float-right mobile-button icon-text" onclick={() => composer?.compose()}>
+			<Icon i="pen" />
+			<span>{text('email.compose')}</span>
+		</button>
+		<Composer bind:this={composer} userId={data.session.userId} onSent={() => invalidateAll()} />
+	{/if}
+</div>

package/routes/email/+layout.ts

@@ -0,0 +1,17 @@
+import { invalidateAll } from '$app/navigation';
+import { addListener } from '@axium/client/socket';
+import { getCurrentSession } from '@axium/client/user';
+import type { Session, UserPublic } from '@axium/core';
+import '@axium/email/common';
+
+export const ssr = false;
+
+addListener('email.received', () => void invalidateAll());
+
+export async function load({ parent }) {
+	let { session }: { session?: (Session & { user: UserPublic }) | null } = await parent();
+
+	session ||= await getCurrentSession().catch(() => null);
+
+	return { session };
+}

package/routes/email/+page.ts

@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export function load(): never {
+	redirect(307, '/email/inbox');
+}

package/routes/email/[folder]/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { goto, invalidateAll } from '$app/navigation';
+	import { text } from '@axium/client';
+	import { Icon } from '@axium/client/components';
+	import type { Email } from '@axium/email/common';
+	import { MessageRow } from '@axium/email/components';
+	import { getContext } from 'svelte';
+	import { emailApp, type EmailApp } from '../context.js';
+
+	const { data } = $props();
+
+	let emails = $state(data.emails);
+	$effect(() => {
+		emails = data.emails;
+	});
+
+	const app = getContext<EmailApp>(emailApp);
+	const { user } = data.session;
+
+	function open(email: Email) {
+		if (email.folder == 'drafts') app.composer()?.editDraft(email);
+		else void goto(`/email/${data.folder}/${email.id}`);
+	}
+</script>
+
+<svelte:head>
+	<title>{text(`email.${data.folder}`)} — {text('app_name.email')}</title>
+</svelte:head>
+
+<div id="email-main">
+	{#if !user.username}
+		<div class="warning">
+			{text('email.no_username')}
+			<a href="/account"><u>{text('email.no_username_link')}</u></a>
+		</div>
+	{/if}
+	<div class="bar">
+		<button class="reset mobile-only" onclick={() => app.toggleSidebar()}>
+			<Icon i="bars" />
+		</button>
+		<span class="label">{text(`email.${data.folder}`)}</span>
+		<button class="reset" onclick={() => invalidateAll()} title={text('email.refresh')}>
+			<Icon i="rotate-right" --size="16px" />
+		</button>
+	</div>
+	<div class="email-list">
+		{#each emails as email, i (email.id)}
+			<MessageRow bind:email={emails[i]} onopen={open} />
+		{:else}
+			<p class="subtle empty">{text('email.empty_folder')}</p>
+		{/each}
+	</div>
+</div>

package/routes/email/[folder]/+page.ts

@@ -0,0 +1,16 @@
+import { fetchAPI } from '@axium/client/requests';
+import { emailFolders, type EmailFolder } from '@axium/email/common';
+import { redirect } from '@sveltejs/kit';
+
+export async function load({ parent, params }) {
+	const { session } = await parent();
+
+	if (!session) redirect(307, `/login?after=/email/${params.folder}`);
+
+	const folder = params.folder as EmailFolder | 'starred';
+	if (folder != 'starred' && !emailFolders.includes(folder)) redirect(307, '/email/inbox');
+
+	const emails = await fetchAPI('GET', 'users/:id/email', folder == 'starred' ? { starred: true } : { folder }, session.userId);
+
+	return { emails, folder, session };
+}

package/routes/email/[folder]/[id]/+page.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { fetchAPI, text } from '@axium/client';
+	import { Icon } from '@axium/client/components';
+	import { toast, toastStatus } from '@axium/client/toast';
+	import type { Email, EmailChangeable } from '@axium/email/common';
+	import { ThreadMessage } from '@axium/email/components';
+	import { getContext, untrack } from 'svelte';
+	import { emailApp, type EmailApp } from '../../context.js';
+
+	const { data } = $props();
+
+	const app = getContext<EmailApp>(emailApp);
+
+	/** Expand the opened and unread messages by default */
+	function initExpanded(): Record<string, boolean> {
+		const init: Record<string, boolean> = {};
+		for (const email of data.thread) init[email.id] = email.id == data.id || !email.read;
+		return init;
+	}
+
+	let thread = $state(data.thread);
+	let expanded = $state(initExpanded());
+
+	$effect(() => {
+		thread = data.thread;
+		// keep the user's manual expansion when the thread refreshes (e.g. new mail arrives)
+		expanded = { ...initExpanded(), ...untrack(() => expanded) };
+	});
+
+	const focused = $derived(thread.find(email => email.id == data.id) ?? thread.at(-1)!);
+	const back = $derived(`/email/${data.folder}`);
+
+	async function patch(changes: EmailChangeable) {
+		try {
+			const result = await fetchAPI('PATCH', 'email/:id', changes, focused.id);
+			Object.assign(focused, result, { attachments: focused.attachments });
+			if ('folder' in changes) await goto(back);
+		} catch (e) {
+			toast('error', e);
+		}
+	}
+
+	function remove() {
+		toastStatus(
+			fetchAPI('DELETE', 'email/:id', {}, focused.id).then(() => goto(back)),
+			text('email.toast_deleted')
+		);
+	}
+
+	function reply(email: Email) {
+		app.composer()?.reply(email);
+	}
+
+	function forward(email: Email) {
+		app.composer()?.forward(email);
+	}
+</script>
+
+<svelte:head>
+	<title>{focused.subject || text('email.no_subject')} — {text('app_name.email')}</title>
+</svelte:head>
+
+<div id="email-view-container">
+	<div class="view-actions">
+		<a href={back} title={text('email.back')}>
+			<button class="reset"><Icon i="arrow-left" /></button>
+		</a>
+		<button
+			class="reset"
+			onclick={() => patch({ starred: !focused.starred })}
+			title={focused.starred ? text('email.unstar') : text('email.star')}
+		>
+			<Icon i={focused.starred ? 'star' : 'regular/star'} --fill={focused.starred ? 'var(--fg-warning)' : undefined} />
+		</button>
+		{#if focused.folder != 'archive' && focused.folder != 'sent' && focused.folder != 'drafts'}
+			<button class="reset" onclick={() => patch({ folder: 'archive' })} title={text('email.archive')}>
+				<Icon i="box-archive" />
+			</button>
+		{/if}
+		{#if focused.folder == 'spam' || focused.folder == 'trash' || focused.folder == 'archive'}
+			<button class="reset" onclick={() => patch({ folder: 'inbox' })} title={text('email.move_to_inbox')}>
+				<Icon i="inbox" />
+			</button>
+		{:else if focused.folder == 'inbox'}
+			<button class="reset" onclick={() => patch({ folder: 'spam' })} title={text('email.mark_spam')}>
+				<Icon i="triangle-exclamation" />
+			</button>
+		{/if}
+		<button class="reset" onclick={() => patch({ read: false }).then(() => goto(back))} title={text('email.mark_unread')}>
+			<Icon i="envelope" />
+		</button>
+		<button
+			class="reset danger"
+			onclick={remove}
+			title={focused.folder == 'trash' || focused.folder == 'drafts' ? text('email.delete_forever') : text('generic.delete')}
+		>
+			<Icon i="trash" />
+		</button>
+	</div>
+
+	<h2 class="subject">{focused.subject || text('email.no_subject')}</h2>
+
+	<div class="thread">
+		{#each thread as email, i (email.id)}
+			<ThreadMessage bind:email={thread[i]} bind:expanded={expanded[email.id]} onreply={reply} onforward={forward} />
+		{/each}
+	</div>
+</div>
+
+<style>
+	.view-actions {
+		display: flex;
+		align-items: center;
+		gap: 1.25em;
+
+		button {
+			display: inline-flex;
+		}
+	}
+
+	.subject {
+		margin: 0;
+	}
+
+	.thread {
+		flex: 1;
+		min-height: 0;
+		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
+	}
+</style>

package/routes/email/[folder]/[id]/+page.ts

@@ -0,0 +1,12 @@
+import { fetchAPI } from '@axium/client/requests';
+import { redirect } from '@sveltejs/kit';
+
+export async function load({ parent, params }) {
+	const { session } = await parent();
+
+	if (!session) redirect(307, `/login?after=/email/${params.folder}/${params.id}`);
+
+	const thread = await fetchAPI('GET', 'email/:id/thread', {}, params.id);
+
+	return { thread, id: params.id, folder: params.folder, session };
+}

package/routes/email/context.ts

@@ -0,0 +1,10 @@
+import type { Composer } from '@axium/email/components';
+
+/** Shared by the email layout with its pages */
+export interface EmailApp {
+	/** The layout's Composer instance */
+	composer(): ReturnType<typeof Composer> | undefined;
+	toggleSidebar(): void;
+}
+
+export const emailApp = Symbol('email-app');