+
+
+
\ No newline at end of file
diff --git a/web_src/js/features/mail/highlight.ts b/web_src/js/features/mail/highlight.ts
new file mode 100644
index 0000000000..7c3972ad9f
--- /dev/null
+++ b/web_src/js/features/mail/highlight.ts
@@ -0,0 +1,103 @@
+// Copyright 2026 The M8SH Authors.
+// SPDX-License-Identifier: GPL-3.0
+
+// Highlighting helpers for the in-thread search. All user-controlled text is
+// HTML-escaped before being wrapped, so the produced markup is safe to v-html.
+
+// Built from char codes so the entity strings are never decoded by tooling.
+const AMP = String.fromCharCode(38);
+const ENT_AMP = `${AMP}amp;`;
+const ENT_LT = `${AMP}lt;`;
+const ENT_GT = `${AMP}gt;`;
+const ENT_QUOT = `${AMP}quot;`;
+const ENT_SQUOT = `${AMP}#39;`;
+
+export function escapeHtml(s: string): string {
+ return s.replace(/[&<>"']/g, (c) => {
+ switch (c) {
+ case '&': return ENT_AMP;
+ case '<': return ENT_LT;
+ case '>': return ENT_GT;
+ case '"': return ENT_QUOT;
+ default: return ENT_SQUOT; // '
+ }
+ });
+}
+
+function escapeRegExp(s: string): string {
+ return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+// Wraps case-insensitive occurrences of `query` in inside the plain
+// text `text`. Returns HTML safe for v-html. Empty query returns escaped text.
+export function highlightPlainText(text: string, query: string): string {
+ const escaped = escapeHtml(text);
+ const q = query.trim();
+ if (!q) return escaped;
+ const pattern = new RegExp(`(${escapeRegExp(escapeHtml(q))})`, 'gi');
+ // Trusted wrapper literal around already-escaped content.
+ // eslint-disable-next-line gitea/unescaped-html-literal
+ return escaped.replace(pattern, '$1');
+}
+
+// Returns true if `text` contains `query` (case-insensitive). Used to build
+// the match list without constructing HTML.
+export function textMatches(text: string, query: string): boolean {
+ const q = query.trim();
+ if (!q) return false;
+ return text.toLowerCase().includes(q.toLowerCase());
+}
+
+// Visible text of an HTML fragment, used for match counting and searching.
+export function htmlTextContent(html: string): string {
+ // Wrapping root is a trusted fixed literal.
+ // eslint-disable-next-line gitea/unescaped-html-literal
+ const doc = new DOMParser().parseFromString(`
${html}
`, 'text/html');
+ return doc.querySelector('#root')!.textContent ?? '';
+}
+
+// Wraps occurrences of `query` inside the text nodes of an HTML string,
+// leaving tags/attributes untouched. Returns HTML safe for v-html. The input
+// is assumed already-sanized; this only mutates TEXT_NODE children.
+export function highlightHtml(html: string, query: string): string {
+ const q = query.trim();
+ if (!q) return html;
+ // Wrapping root is a trusted fixed literal.
+ // eslint-disable-next-line gitea/unescaped-html-literal
+ const doc = new DOMParser().parseFromString(`
${html}
`, 'text/html');
+ const root = doc.querySelector('#root')!;
+ const walker = doc.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+ const targets: Text[] = [];
+ let node = walker.nextNode();
+ while (node) {
+ targets.push(node as Text);
+ node = walker.nextNode();
+ }
+ const pattern = new RegExp(escapeRegExp(q), 'gi');
+ for (const textNode of targets) {
+ const value = textNode.nodeValue ?? '';
+ if (!pattern.test(value)) continue;
+ pattern.lastIndex = 0;
+ const frag = splitAndMark(doc, value, pattern);
+ textNode.replaceWith(frag);
+ }
+ return root.innerHTML;
+}
+
+function splitAndMark(doc: Document, value: string, pattern: RegExp): DocumentFragment {
+ const frag = doc.createDocumentFragment();
+ let last = 0;
+ let match: RegExpExecArray | null;
+ pattern.lastIndex = 0;
+ while ((match = pattern.exec(value)) !== null) {
+ if (match.index > last) frag.append(doc.createTextNode(value.slice(last, match.index)));
+ const mark = doc.createElement('mark');
+ mark.className = 'search-hit';
+ mark.textContent = match[0];
+ frag.append(mark);
+ last = match.index + match[0].length;
+ if (match[0].length === 0) pattern.lastIndex++; // avoid zero-width loop
+ }
+ if (last < value.length) frag.append(doc.createTextNode(value.slice(last)));
+ return frag;
+}
diff --git a/web_src/js/features/mail/index.ts b/web_src/js/features/mail/index.ts
new file mode 100644
index 0000000000..aea4334fb4
--- /dev/null
+++ b/web_src/js/features/mail/index.ts
@@ -0,0 +1,13 @@
+// Copyright 2026 The M8SH Authors.
+// SPDX-License-Identifier: GPL-3.0
+
+import {createApp} from 'vue';
+import MailApp from './MailApp.vue';
+
+// Mounts the M8SH Mail Vue app into the #mail-app element rendered by mail.tmpl.
+export function initMailApp(): void {
+ const el = document.querySelector('#mail-app');
+ if (el) {
+ createApp(MailApp).mount(el);
+ }
+}
diff --git a/web_src/js/features/mail/md5.ts b/web_src/js/features/mail/md5.ts
new file mode 100644
index 0000000000..e25de4d1de
--- /dev/null
+++ b/web_src/js/features/mail/md5.ts
@@ -0,0 +1,166 @@
+// Copyright 2026 The M8SH Authors.
+// SPDX-License-Identifier: GPL-3.0
+
+// Pure-TypeScript MD5 implementation (RFC 1321) returning a lowercase hex digest.
+// No external library, used only for building Gravatar URLs.
+
+function safeAdd(x: number, y: number): number {
+ const lsw = (x & 0xffff) + (y & 0xffff);
+ const msw = (x >> 16) + (y >> 16) + (lsw >> 16);
+ return (msw << 16) | (lsw & 0xffff);
+}
+
+function rol(num: number, cnt: number): number {
+ return (num << cnt) | (num >>> (32 - cnt));
+}
+
+function cmn(q: number, a: number, b: number, x: number, s: number, t: number): number {
+ return safeAdd(rol(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b);
+}
+
+function ff(a: number, b: number, c: number, d: number, x: number, s: number, t: number): number {
+ return cmn((b & c) | (~b & d), a, b, x, s, t);
+}
+
+function gg(a: number, b: number, c: number, d: number, x: number, s: number, t: number): number {
+ return cmn((b & d) | (c & ~d), a, b, x, s, t);
+}
+
+function hh(a: number, b: number, c: number, d: number, x: number, s: number, t: number): number {
+ return cmn(b ^ c ^ d, a, b, x, s, t);
+}
+
+function ii(a: number, b: number, c: number, d: number, x: number, s: number, t: number): number {
+ return cmn(c ^ (b | ~d), a, b, x, s, t);
+}
+
+function coreMD5(x: number[], len: number): number[] {
+ x[len >> 5] |= 0x80 << (len % 32);
+ x[(((len + 64) >>> 9) << 4) + 14] = len;
+
+ let a = 1732584193;
+ let b = -271733879;
+ let c = -1732584194;
+ let d = 271733878;
+
+ for (let i = 0; i < x.length; i += 16) {
+ const olda = a;
+ const oldb = b;
+ const oldc = c;
+ const oldd = d;
+
+ a = ff(a, b, c, d, x[i], 7, -680876936);
+ d = ff(d, a, b, c, x[i + 1], 12, -389564586);
+ c = ff(c, d, a, b, x[i + 2], 17, 606105819);
+ b = ff(b, c, d, a, x[i + 3], 22, -1044525330);
+ a = ff(a, b, c, d, x[i + 4], 7, -176418897);
+ d = ff(d, a, b, c, x[i + 5], 12, 1200080426);
+ c = ff(c, d, a, b, x[i + 6], 17, -1473231341);
+ b = ff(b, c, d, a, x[i + 7], 22, -45705983);
+ a = ff(a, b, c, d, x[i + 8], 7, 1770035416);
+ d = ff(d, a, b, c, x[i + 9], 12, -1958414417);
+ c = ff(c, d, a, b, x[i + 10], 17, -42063);
+ b = ff(b, c, d, a, x[i + 11], 22, -1990404162);
+ a = ff(a, b, c, d, x[i + 12], 7, 1804603682);
+ d = ff(d, a, b, c, x[i + 13], 12, -40341101);
+ c = ff(c, d, a, b, x[i + 14], 17, -1502002290);
+ b = ff(b, c, d, a, x[i + 15], 22, 1236535329);
+
+ a = gg(a, b, c, d, x[i + 1], 5, -165796510);
+ d = gg(d, a, b, c, x[i + 6], 9, -1069501632);
+ c = gg(c, d, a, b, x[i + 11], 14, 643717713);
+ b = gg(b, c, d, a, x[i], 20, -373897302);
+ a = gg(a, b, c, d, x[i + 5], 5, -701558691);
+ d = gg(d, a, b, c, x[i + 10], 9, 38016083);
+ c = gg(c, d, a, b, x[i + 15], 14, -660478335);
+ b = gg(b, c, d, a, x[i + 4], 20, -405537848);
+ a = gg(a, b, c, d, x[i + 9], 5, 568446438);
+ d = gg(d, a, b, c, x[i + 14], 9, -1019803690);
+ c = gg(c, d, a, b, x[i + 3], 14, -187363961);
+ b = gg(b, c, d, a, x[i + 8], 20, 1163531501);
+ a = gg(a, b, c, d, x[i + 13], 5, -1444681467);
+ d = gg(d, a, b, c, x[i + 2], 9, -51403784);
+ c = gg(c, d, a, b, x[i + 7], 14, 1735328473);
+ b = gg(b, c, d, a, x[i + 12], 20, -1926607734);
+
+ a = hh(a, b, c, d, x[i + 5], 4, -378558);
+ d = hh(d, a, b, c, x[i + 8], 11, -2022574463);
+ c = hh(c, d, a, b, x[i + 11], 16, 1839030562);
+ b = hh(b, c, d, a, x[i + 14], 23, -35309556);
+ a = hh(a, b, c, d, x[i + 1], 4, -1530992060);
+ d = hh(d, a, b, c, x[i + 4], 11, 1272893353);
+ c = hh(c, d, a, b, x[i + 7], 16, -155497632);
+ b = hh(b, c, d, a, x[i + 10], 23, -1094730640);
+ a = hh(a, b, c, d, x[i + 13], 4, 681279174);
+ d = hh(d, a, b, c, x[i], 11, -358537222);
+ c = hh(c, d, a, b, x[i + 3], 16, -722521979);
+ b = hh(b, c, d, a, x[i + 6], 23, 76029189);
+ a = hh(a, b, c, d, x[i + 9], 4, -640364487);
+ d = hh(d, a, b, c, x[i + 12], 11, -421815835);
+ c = hh(c, d, a, b, x[i + 15], 16, 530742520);
+ b = hh(b, c, d, a, x[i + 2], 23, -995338651);
+
+ a = ii(a, b, c, d, x[i], 6, -198630844);
+ d = ii(d, a, b, c, x[i + 7], 10, 1126891415);
+ c = ii(c, d, a, b, x[i + 14], 15, -1416354905);
+ b = ii(b, c, d, a, x[i + 5], 21, -57434055);
+ a = ii(a, b, c, d, x[i + 12], 6, 1700485571);
+ d = ii(d, a, b, c, x[i + 3], 10, -1894986606);
+ c = ii(c, d, a, b, x[i + 10], 15, -1051523);
+ b = ii(b, c, d, a, x[i + 1], 21, -2054922799);
+ a = ii(a, b, c, d, x[i + 8], 6, 1873313359);
+ d = ii(d, a, b, c, x[i + 15], 10, -30611744);
+ c = ii(c, d, a, b, x[i + 6], 15, -1560198380);
+ b = ii(b, c, d, a, x[i + 13], 21, 1309151649);
+ a = ii(a, b, c, d, x[i + 4], 6, -145523070);
+ d = ii(d, a, b, c, x[i + 11], 10, -1120210379);
+ c = ii(c, d, a, b, x[i + 2], 15, 718787259);
+ b = ii(b, c, d, a, x[i + 9], 21, -343485551);
+
+ a = safeAdd(a, olda);
+ b = safeAdd(b, oldb);
+ c = safeAdd(c, oldc);
+ d = safeAdd(d, oldd);
+ }
+ return [a, b, c, d];
+}
+
+// Pack the 4 state words into a binary-style string (16 chars, one per byte, big-endian per word).
+function binl2rstr(input: number[]): string {
+ let output = '';
+ for (let i = 0; i < input.length * 32; i += 8) {
+ output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff);
+ }
+ return output;
+}
+
+function bytes2binl(bytes: Uint8Array): number[] {
+ const output: number[] = [];
+ for (let i = 0; i < bytes.length * 8; i += 8) {
+ output[i >> 5] |= (bytes[i / 8] & 0xff) << (i % 32);
+ }
+ return output;
+}
+
+function digestBytes(bytes: Uint8Array): string {
+ return binl2rstr(coreMD5(bytes2binl(bytes), bytes.length * 8));
+}
+
+function utf8Bytes(input: string): Uint8Array {
+ return new TextEncoder().encode(input);
+}
+
+function rstr2hex(input: string): string {
+ const hexTab = '0123456789abcdef';
+ let output = '';
+ for (let i = 0; i < input.length; i++) {
+ const x = input.charCodeAt(i);
+ output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f);
+ }
+ return output;
+}
+
+// Public entry point: MD5 hex digest of a UTF-8 encoded string.
+export function md5(s: string): string {
+ return rstr2hex(digestBytes(utf8Bytes(s)));
+}
diff --git a/web_src/js/features/mail/sanitize.ts b/web_src/js/features/mail/sanitize.ts
new file mode 100644
index 0000000000..996ee0c749
--- /dev/null
+++ b/web_src/js/features/mail/sanitize.ts
@@ -0,0 +1,69 @@
+// Copyright 2026 The M8SH Authors.
+// SPDX-License-Identifier: GPL-3.0
+
+// Minimal HTML allowlist sanitizer for the mock HTML email card.
+// Strips