Feature/protocol handlers

* Added account selection for protocol links when multiple connected accounts are available, including mailto: links * Added support for handling mailto: links in an already-open PWA/session instead of always opening a new tab * Added webcal: protocol handling for calendar links * Added account selection for webcal: links when multiple calendar-capable accounts are connected * Added an import-or-subscribe choice for detected webcal calendars * Added protocol handler settings for registering mail and calendar handlers and choosing the open mode * Added service worker/session coordination for passing protocol requests between browser/PWA contexts * Added tests and translations for the new protocol handler flows
2026-05-12 20:49:05 +02:00
parent 8b0e2052cf
commit 3f444a8912
40 changed files with 2514 additions and 55 deletions
@@ -0,0 +1,108 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { getPathPrefix } from "@/lib/browser-navigation";
+import { useSettingsStore } from "@/stores/settings-store";
+import type { ProtocolOpenMode } from "@/stores/settings-store";
+import { toast } from "@/stores/toast-store";
+import { SettingsSection, SettingItem, Select } from "./settings-section";
+
+type Protocol = "mailto" | "webcal";
+
+function canRegisterProtocolHandler(): boolean {
+  return typeof navigator !== "undefined"
+    && "registerProtocolHandler" in navigator
+    && typeof window !== "undefined"
+    && window.isSecureContext;
+}
+
+function getProtocolHandlerUrl(protocol: Protocol) {
+  return `${window.location.origin}${getPathPrefix()}/protocol/${protocol}?url=%s`;
+}
+
+function registerProtocolHandler(protocol: Protocol) {
+  navigator.registerProtocolHandler(
+    protocol,
+    getProtocolHandlerUrl(protocol),
+  );
+}
+
+interface ProtocolHandlerSettingsProps {
+  supportsCalendar: boolean;
+}
+
+export function ProtocolHandlerSettings({ supportsCalendar }: ProtocolHandlerSettingsProps) {
+  const t = useTranslations("protocol_handlers");
+  const protocolOpenMode = useSettingsStore((state) => state.protocolOpenMode);
+  const updateSetting = useSettingsStore((state) => state.updateSetting);
+  const [supported, setSupported] = useState(false);
+
+  useEffect(() => {
+    setSupported(canRegisterProtocolHandler());
+  }, []);
+
+  const handleOpenModeChange = async (value: string) => {
+    const openMode = value as ProtocolOpenMode;
+
+    if (openMode === "active-session"
+      && typeof window !== "undefined"
+      && "Notification" in window
+      && Notification.permission === "default") {
+      await Notification.requestPermission();
+    }
+
+    updateSetting("protocolOpenMode", openMode);
+  };
+
+  const handleRegister = (protocol: Protocol) => {
+    try {
+      registerProtocolHandler(protocol);
+      toast.success(protocol === "mailto" ? t("mailto_registered") : t("webcal_registered"));
+    } catch {
+      toast.error(t("registration_failed"));
+    }
+  };
+
+  const renderRegistrationControl = (protocol: Protocol) => {
+    return (
+      <Button size="sm" onClick={() => handleRegister(protocol)} disabled={!supported}>
+        {protocol === "mailto" ? t("register_mailto") : t("register_webcal")}
+      </Button>
+    );
+  };
+
+  return (
+    <SettingsSection title={t("title")} description={t("description")}>
+      {!supported && (
+        <div className="rounded-md border border-border bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
+          {t("unsupported")}
+        </div>
+      )}
+
+      <SettingItem label={t("mailto_label")} description={t("mailto_description")}>
+        {renderRegistrationControl("mailto")}
+      </SettingItem>
+
+      {supportsCalendar && (
+        <SettingItem label={t("webcal_label")} description={t("webcal_description")}>
+          {renderRegistrationControl("webcal")}
+        </SettingItem>
+      )}
+
+      <SettingItem label={t("protocol_open_mode_label")} description={t("protocol_open_mode_description")}>
+        <Select
+          value={protocolOpenMode}
+          onChange={handleOpenModeChange}
+          options={[
+            { value: "new-tab", label: t("protocol_open_mode_new_tab") },
+            { value: "active-session", label: t("protocol_open_mode_active_session") },
+          ]}
+        />
+      </SettingItem>
+
+      <p className="text-xs text-muted-foreground">{t("browser_note")}</p>
+    </SettingsSection>
+  );
+}