Initial commit: webmail client (M0/M1)

Three-pane webmail client. - Backend: FastAPI + async SQLAlchemy + arq worker (Postgres/Redis), IMAP/SMTP sync, threading, search, drafts/outbox with undo, attachments, 2FA. - Frontend: React 18 + Vite + TypeScript + TanStack Query + Tailwind; three-pane UI with rich-text composer, light/dark themes, resizable panels. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-17 23:20:34 +02:00
commit a5ec0d21cb
174 changed files with 22239 additions and 0 deletions
@@ -0,0 +1,90 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { useT } from "../../i18n";
+import { api } from "../../lib/api";
+import type { MessageEnvelope } from "../../lib/types";
+import { Attachments } from "./Attachments";
+
+// Sanitized message HTML in a sandboxed iframe (SPEC §9.4, I-8). We use
+// sandbox="allow-same-origin" WITHOUT allow-scripts: scripts still never run
+// (the content is nh3-sanitized and script-less), but same-origin lets us (a)
+// measure the content to auto-size the frame — so the message shows in full and
+// only the thread panel scrolls — and (b) send the session cookie so inline
+// (cid:) images authenticate and load.
+export function MessageBody({ message }: { message: MessageEnvelope }) {
+  const t = useT();
+  const queryClient = useQueryClient();
+  const [allowed, setAllowed] = useState(false);
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  const observerRef = useRef<ResizeObserver | null>(null);
+  const [height, setHeight] = useState(80);
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["message-html", message.id, allowed],
+    queryFn: async () => {
+      const resp = await fetch(`/api/messages/${message.id}/html`, { credentials: "include" });
+      if (!resp.ok) throw new Error("failed to load message");
+      return resp.text();
+    },
+  });
+
+  const resize = useCallback(() => {
+    const doc = frameRef.current?.contentDocument;
+    if (doc?.documentElement) setHeight(doc.documentElement.scrollHeight);
+  }, []);
+
+  const onLoad = () => {
+    const doc = frameRef.current?.contentDocument;
+    if (!doc) return;
+    resize();
+    // Re-measure as images finish loading (they change the content height).
+    doc.querySelectorAll("img").forEach((img) => {
+      if (!img.complete) img.addEventListener("load", resize, { once: true });
+    });
+    observerRef.current?.disconnect();
+    const ro = new ResizeObserver(resize);
+    if (doc.body) ro.observe(doc.body);
+    observerRef.current = ro;
+  };
+
+  useEffect(() => () => observerRef.current?.disconnect(), []);
+
+  const loadImages = async (persist: boolean) => {
+    if (persist) {
+      await api.allowRemoteImages(message.id);
+      queryClient.invalidateQueries({ queryKey: ["message-html", message.id] });
+    }
+    setAllowed(true);
+  };
+
+  return (
+    <div>
+      {message.has_remote_images && !allowed && (
+        <div className="flex flex-wrap items-center gap-3 border-b border-app-border bg-amber-100 px-3 py-1.5 text-xs text-amber-900 dark:bg-amber-900/30 dark:text-amber-200">
+          <span>{t("mail.imagesBlocked")}</span>
+          <button className="font-medium text-app-accent hover:underline" onClick={() => loadImages(false)}>
+            {t("mail.loadImages")}
+          </button>
+          <button className="font-medium text-app-accent hover:underline" onClick={() => loadImages(true)}>
+            {t("mail.alwaysFromSender")}
+          </button>
+        </div>
+      )}
+      {isLoading && <div className="p-3 text-sm text-app-faint">{t("mail.loadingThread")}</div>}
+      {isError && <div className="p-3 text-sm text-red-500">{t("mail.loadFailed")}</div>}
+      {data !== undefined && !isLoading && (
+        <iframe
+          ref={frameRef}
+          title={`message-${message.id}`}
+          sandbox="allow-same-origin"
+          srcDoc={data}
+          onLoad={onLoad}
+          style={{ height }}
+          className="w-full border-0 bg-white"
+        />
+      )}
+      {message.has_attachments && <Attachments messageId={message.id} />}
+    </div>
+  );
+}