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>
|
||
|
|
);
|
||
|
|
}
|