@@ -134,13 +139,15 @@ export function RightPanel({
// This is the shared surface: the agenda, mini-month, event popover, event form
// and search results are the calendar app's own code, so future changes propagate.
const CAL_BUNDLE = "/api/plugins/calendar/ui/page.js";
-function PanelCalendar({ invite }: { invite: InviteSignal | null }) {
+function PanelCalendar({ invite, focus }: { invite: InviteSignal | null; focus: CalendarFocus | null }) {
const ref = useRef
(null);
const ctx = usePluginContext("calendar");
// A phone has no use for "Open calendar in new tab".
const mobile = useIsMobile();
- // Remount when a new "Invite all" fires so the form opens with those guests.
+ // Remount when a new "Invite all" fires so the form opens with those guests,
+ // and when asked to show a day / event (a reminder notification).
const inviteN = invite?.n ?? 0;
+ const focusN = focus?.n ?? 0;
useEffect(() => {
let alive = true;
let cleanup: (() => void) | void;
@@ -151,11 +158,12 @@ function PanelCalendar({ invite }: { invite: InviteSignal | null }) {
embed: "panel",
newEventGuests: invite?.guests,
newTabLink: !mobile,
+ focus: focus ? { date: focus.date, event: focus.event, start: focus.start } : null,
});
});
return () => { alive = false; if (typeof cleanup === "function") cleanup(); };
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [ctx, inviteN, mobile]);
+ }, [ctx, inviteN, focusN, mobile]);
return ;
}
diff --git a/frontend/src/plugins/PluginPage.tsx b/frontend/src/plugins/PluginPage.tsx
index d1a8418..5b24261 100644
--- a/frontend/src/plugins/PluginPage.tsx
+++ b/frontend/src/plugins/PluginPage.tsx
@@ -8,6 +8,7 @@ import { useEffect, useMemo, useRef } from "react";
import { Navigate, useLocation } from "react-router-dom";
import { useT } from "../i18n";
+import { useIsMobile } from "../lib/useIsMobile";
import { loadBundle } from "./bundleLoader";
import { usePluginContext } from "./context";
import { usePluginManifest, usePluginPages } from "./manifest";
@@ -48,11 +49,20 @@ export function PluginPage() {
const location = useLocation();
const { data, isLoading } = usePluginManifest();
const pages = usePluginPages();
+ const mobile = useIsMobile();
// 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}/`));
+ // The calendar page is made for a big screen: a phone gets Mail with the
+ // Calendar panel slid in instead (a reminder's link included, with its day and
+ // event).
+ if (mobile && subpath.startsWith("/calendar")) {
+ const params = new URLSearchParams(location.search);
+ params.set("panel", "calendar");
+ return ;
+ }
if (isLoading || !data) {
return {t("common.loading")}
;
}
diff --git a/frontend/src/routes/MailLayout.tsx b/frontend/src/routes/MailLayout.tsx
index de1356b..e9c998f 100644
--- a/frontend/src/routes/MailLayout.tsx
+++ b/frontend/src/routes/MailLayout.tsx
@@ -35,7 +35,7 @@ import { BackfillBanner } from "../components/BackfillBanner";
import { Clock, NotSavedOffline, OfflineIndicator } from "../components/Offline";
import { ThreadView } from "../components/thread/ThreadView";
import { MailboxDisplay } from "../components/mail/MailboxDisplay";
-import { RightPanel, type PanelTab } from "../components/mail/RightPanel";
+import { RightPanel, type CalendarFocus, type PanelTab } from "../components/mail/RightPanel";
import { ScheduledSendPane } from "../components/mail/ScheduledSendPane";
import { useT } from "../i18n";
import type { MessageKey } from "../i18n/en";
@@ -873,6 +873,27 @@ export function MailLayout() {
// Deep link (e.g. Contacts "Compose"): /mail?compose=1&to= opens a new,
// maximized composer prefilled with the recipient, then strips the params.
const [searchParams, setSearchParams] = useSearchParams();
+ // ?panel=calendar[&date=&event=&start=]: the phone's way to the calendar (the
+ // calendar page sends it here; a reminder's link carries its day and event).
+ const [calendarFocus, setCalendarFocus] = useState(null);
+ useEffect(() => {
+ if (searchParams.get("panel") !== "calendar") return;
+ const date = searchParams.get("date");
+ setCalendarFocus(
+ date
+ ? {
+ date,
+ event: searchParams.get("event") ?? undefined,
+ start: searchParams.get("start") ?? undefined,
+ n: Date.now(),
+ }
+ : null,
+ );
+ if (mobile) openFromMenu("calendar");
+ else openPanel("calendar");
+ setSearchParams({}, { replace: true });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [searchParams]);
useEffect(() => {
if (searchParams.get("compose") !== "1") return;
const first = accountsQuery.data?.[0];
@@ -1713,6 +1734,7 @@ export function MailLayout() {
onClose={() => setSheetOpen(false)}
thread={detailQuery.data}
single={sheetSingle}
+ calendarFocus={calendarFocus}
/>