feat: improve push notification registration and onboarding

- Extract Firebase init and token registration into shared firebase.ts module
- Move notification setup to __root.tsx so it runs regardless of route
- Add standardised icon/badge constants used across app and service worker
- Add credentials: include to notifications API client and register fetch
- Gate onboarding accept button behind sign-in check with login link
- Add distinct error state for failed registration vs denied permission
- Add test notification button to settings page
- Add 15s timeout to navigator.serviceWorker.ready to avoid hanging

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: scriptcoded

.claude/settings.local.json

@@ -4,7 +4,8 @@
       "Bash(pnpm add:*)",
       "Bash(pnpm build:*)",
       "Bash(pnpm run *)",
-      "Bash(pnpm exec tsc)"
+      "Bash(pnpm exec tsc)",
+      "Bash(pnpm tsc *)"
     ]
   }
 }

public/notification-badge.png

@@ -1,4 +1,7 @@
 import createClient from "openapi-fetch";
 import type { paths } from "../generated/notification-api";
 
-export const client = createClient<paths>({ baseUrl: "/notifications" });
+export const client = createClient<paths>({
+  baseUrl: "/notifications",
+  credentials: "include",
+});

public/notification-badge.svg

@@ -0,0 +1,42 @@
+import { initializeApp } from "firebase/app";
+import { getMessaging, getToken } from "firebase/messaging";
+import { configPromise } from "../config";
+
+const FIREBASE_CONFIG = JSON.parse(import.meta.env.VITE_FIREBASE_CONFIG);
+const FIREBASE_VAPID_KEY = import.meta.env.VITE_FIREBASE_VAPID_KEY;
+
+const firebaseApp = initializeApp(FIREBASE_CONFIG);
+export const messaging = getMessaging(firebaseApp);
+
+const SW_READY_TIMEOUT_MS = 15_000;
+
+export async function registerForPushNotifications(): Promise<void> {
+  const registration = await Promise.race([
+    navigator.serviceWorker.ready,
+    new Promise<never>((_, reject) =>
+      setTimeout(
+        () => reject(new Error("Service worker not ready")),
+        SW_READY_TIMEOUT_MS,
+      ),
+    ),
+  ]);
+
+  const token = await getToken(messaging, {
+    vapidKey: FIREBASE_VAPID_KEY,
+    serviceWorkerRegistration: registration,
+  });
+
+  const { notificationsTenant } = await configPromise;
+
+  const res = await fetch(
+    `/notifications/api/tenants/${notificationsTenant}/register`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "include",
+      body: JSON.stringify({ tokens: [token] }),
+    },
+  );
+
+  if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText}`);
+}

src/notifications/client.ts

@@ -0,0 +1,2 @@
+export const NOTIFICATION_ICON = "/web-app-manifest-192x192.png";
+export const NOTIFICATION_BADGE = "/notification-badge.png";

src/notifications/firebase.ts

@@ -1,6 +1,33 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { onMessage } from "firebase/messaging";
+import { useEffect } from "react";
+import {
+  messaging,
+  registerForPushNotifications,
+} from "../notifications/firebase";
 
 const RootLayout = () => {
+  useEffect(() => {
+    if (Notification.permission === "granted") {
+      registerForPushNotifications().catch((e) => {
+        console.error("Failed to register for push notifications:", e);
+      });
+    }
+
+    let unsubscribeMessage: (() => void) | undefined;
+    navigator.serviceWorker.ready.then((registration) => {
+      unsubscribeMessage = onMessage(messaging, (payload) => {
+        console.log("Foreground message received:", payload);
+        registration.showNotification(
+          payload.notification?.title || "Notification",
+          { body: payload.notification?.body },
+        );
+      });
+    });
+
+    return () => unsubscribeMessage?.();
+  }, []);
+
   return <Outlet />;
 };
 

src/notifications/notification-defaults.ts

@@ -5,8 +5,6 @@ import {
   useRouter,
   useRouterState,
 } from "@tanstack/react-router";
-import { initializeApp } from "firebase/app";
-import { getMessaging, getToken, onMessage } from "firebase/messaging";
 import { useAtomValue, useSetAtom } from "jotai";
 import { Suspense, useEffect } from "react";
 import { AppBar } from "../components/AppBar";
@@ -19,9 +17,6 @@ import { PwaReloadBanner } from "../components/PwaReloadBanner";
 import { onboardedAtom } from "../onboarding";
 import { pageTitleAtom } from "../pageState";
 
-const FIREBASE_CONFIG = JSON.parse(import.meta.env.VITE_FIREBASE_CONFIG);
-const FIREBASE_VAPID_KEY = import.meta.env.VITE_FIREBASE_VAPID_KEY;
-
 export const Route = createFileRoute("/_app")({
   component: RouteComponent,
 });
@@ -57,55 +52,6 @@ function RouteComponent() {
     },
   });
 
-  useEffect(() => {
-    navigator.serviceWorker.ready.then((registration) => {
-      const firebaseApp = initializeApp(FIREBASE_CONFIG);
-      const messaging = getMessaging(firebaseApp);
-
-      getToken(messaging, {
-        vapidKey: FIREBASE_VAPID_KEY,
-        serviceWorkerRegistration: registration,
-      })
-        .then((token) => {
-          console.log("FCM token:", token);
-
-          onMessage(messaging, (payload) => {
-            console.log("Foreground message received:", payload);
-
-            registration.showNotification(
-              payload.notification?.title || "Notification",
-              {
-                body: payload.notification?.body,
-              },
-            );
-          });
-
-          fetch("/notifications/api/tenants/jamboree26/register", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({ tokens: [token] }),
-          })
-            .then((res) => {
-              if (!res.ok) {
-                throw new Error(
-                  `Failed to register FCM token: ${res.statusText}`,
-                );
-              }
-
-              console.log("FCM token registered with backend");
-            })
-            .catch((e) => {
-              console.error("Failed to register FCM token with backend:", e);
-            });
-        })
-        .catch((e) => {
-          console.error("Failed to get FCM token:", e);
-        });
-    });
-  }, []);
-
   // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run on load
   useEffect(() => {
     if (!onboarded) {

src/routes/__root.tsx

@@ -1,13 +1,19 @@
 import {
+  ScoutButton,
   ScoutCallout,
   ScoutListView,
   ScoutListViewItem,
 } from "@scouterna/ui-react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
+import { useState } from "react";
 import { PageContainer } from "../../../components/PageContainer";
 import type { components } from "../../../generated/notification-api";
 import * as api from "../../../notifications/api";
+import {
+  NOTIFICATION_BADGE,
+  NOTIFICATION_ICON,
+} from "../../../notifications/notification-defaults";
 
 export const Route = createFileRoute("/_app/settings/notifications")({
   component: RouteComponent,
@@ -56,6 +62,44 @@ const ChannelRow = ({
   );
 };
 
+async function sendTestNotification() {
+  if (Notification.permission !== "granted") return "denied";
+
+  const reg = await navigator.serviceWorker.ready;
+  await reg.showNotification("Testnotis", {
+    body: "Det här är en testnotis från Jamboree-appen.",
+    icon: NOTIFICATION_ICON,
+    badge: NOTIFICATION_BADGE,
+  });
+  return "sent";
+}
+
+function TestNotificationButton() {
+  const [status, setStatus] = useState<"idle" | "sent" | "denied">("idle");
+
+  const handleClick = async () => {
+    const result = await sendTestNotification();
+    setStatus(result);
+    if (result === "sent") setTimeout(() => setStatus("idle"), 3000);
+  };
+
+  return (
+    <div className="p-4 flex flex-col gap-3">
+      <ScoutButton variant="outlined" onScoutClick={handleClick}>
+        Skicka testnotis
+      </ScoutButton>
+      {status === "sent" && (
+        <ScoutCallout variant="success">Testnotis skickad!</ScoutCallout>
+      )}
+      {status === "denied" && (
+        <ScoutCallout variant="error">
+          Notiser är inte tillåtna. Aktivera dem i telefonens inställningar.
+        </ScoutCallout>
+      )}
+    </div>
+  );
+}
+
 function RouteComponent() {
   const channels = useQuery({
     queryFn: api.getChannels,
@@ -80,6 +124,8 @@ function RouteComponent() {
         </ScoutCallout>
       </div>
 
+      <TestNotificationButton />
+
       <ScoutListView>
         <ScoutListViewItem
           type="checkbox"