lukasandClaude Opus 4.8
d46ad13b7b
Completes M3 (SPEC §11 + §12 acceptance) on top of the backend platform (4e077f1).
Frontend host (§11.3):
- src/plugins/: manifest loader, runtime ESM bundle loader (framework-agnostic
mount contract), PluginSlot, PluginPage (app.page at /p/*), plugin context
(scoped api/events/i18n), capabilities hook. Wired slots into ThreadView
(message.actions/message.banner), MailLayout sidebar (sidebar.section + page nav)
and Settings→Accounts (settings.page); ws.ts fans out core + plugin.* events.
- plugin-ui.css: theme-aware .wm-* classes so bundles don't re-derive inline styles.
SDK additions:
- CurrentUserId + require_csrf (plugin-router auth), messages.envelope/header,
actions.set_flags/trash, sdk.enqueue.
Reference plugins (plugins/, installed via webmail.plugins entry points):
- hello: skeleton page-plugin (app.page + plg_hello_note w/ RLS + cron job) —
install→run→uninstall --drop-data leaves zero residue.
- labels: message.actions + sidebar.section slots, KV only, zero core diffs.
- filters: message.new hook -> match (subject/from/to) -> Mark read / Pin / Delete
(delete = move thread to Trash via the core path).
docs/plugins.md: full authoring guide + a complete "Unsubscribe button" worked
example (the §12 "writable from docs alone" bar).
Also: conftest resets the arq pool between tests (loop-bound global, like engine/redis).
Gates: backend ruff + mypy --strict (107) + full suite 337; frontend tsc + eslint
+ vitest (11) + vite build.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Rcj3TpydMTzTSmU7kunzf8
76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
// Full-content-area host for plugin pages (app.page, SPEC §11.3).
|
|
//
|
|
// Mounted at "/p/*": matches the sub-path against declared page routes and mounts
|
|
// the page bundle into the whole content area (no mail list/thread). A minimal
|
|
// header keeps a way back to Mail. (Sidebar persistence is a later refinement.)
|
|
|
|
import { useEffect, useMemo, useRef } from "react";
|
|
import { Link, Navigate, useLocation } from "react-router-dom";
|
|
|
|
import { useT } from "../i18n";
|
|
import { loadBundle } from "./bundleLoader";
|
|
import { usePluginContext } from "./context";
|
|
import { usePluginManifest, usePluginPages } from "./manifest";
|
|
import type { PluginUnmount } from "./types";
|
|
|
|
function PageMount({
|
|
pluginName,
|
|
bundle,
|
|
subpath,
|
|
}: {
|
|
pluginName: string;
|
|
bundle: string;
|
|
subpath: string;
|
|
}) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const ctx = usePluginContext(pluginName);
|
|
const props = useMemo(() => ({ subpath }), [subpath]);
|
|
|
|
useEffect(() => {
|
|
let cleanup: PluginUnmount | void;
|
|
let alive = true;
|
|
loadBundle(bundle)
|
|
.then((mount) => {
|
|
if (alive && ref.current) cleanup = mount(ref.current, ctx, props);
|
|
})
|
|
.catch((err) => console.error(`plugin page ${pluginName} failed`, err));
|
|
return () => {
|
|
alive = false;
|
|
if (typeof cleanup === "function") cleanup();
|
|
};
|
|
}, [bundle, ctx, props, pluginName]);
|
|
|
|
return <div ref={ref} data-plugin-page={pluginName} className="min-h-0 flex-1 overflow-auto" />;
|
|
}
|
|
|
|
export function PluginPage() {
|
|
const t = useT();
|
|
const location = useLocation();
|
|
const { data, isLoading } = usePluginManifest();
|
|
const pages = usePluginPages();
|
|
|
|
// Sub-path under "/p" (e.g. "/calendar/2026-07"); match the longest page route.
|
|
const subpath = location.pathname.replace(/^\/p/, "") || "/";
|
|
const match = pages.find((p) => subpath === p.route || subpath.startsWith(`${p.route}/`));
|
|
|
|
if (isLoading || !data) {
|
|
return <div className="p-8 text-app-muted">{t("common.loading")}</div>;
|
|
}
|
|
if (!match) return <Navigate to="/mail" replace />;
|
|
|
|
return (
|
|
<div className="flex h-screen flex-col bg-app-bg">
|
|
<header className="flex items-center gap-3 border-b border-app-border px-4 py-2">
|
|
<Link
|
|
to="/mail"
|
|
className="rounded px-2 py-1 text-sm text-app-muted hover:bg-app-hover hover:text-app-fg"
|
|
>
|
|
← {t("nav.mail")}
|
|
</Link>
|
|
<span className="text-sm font-semibold text-app-fg">{match.nav.label}</span>
|
|
</header>
|
|
<PageMount pluginName={match.plugin} bundle={match.bundle} subpath={subpath} />
|
|
</div>
|
|
);
|
|
}
|