feat(webapp): add dashboard platform notifications service & UI

Introduce a new server-side service to read and record platform notifications
targeted at the webapp.

- Add payload schema (v1) using zod and typed PayloadV1.
- Define PlatformNotificationWithPayload type and scope priority map.
- Implement getActivePlatformNotifications to:
  - query active WEBAPP notifications with scope/org/project/user filters,
  - include user interactions and validate payloads,
  - filter dismissed items, compute unreadCount, and return sorted results.
- Add helper functions:
  - findInteraction to match global/org interactions,
  - compareNotifications to sort by scope, priority, then recency.
- Implement upsertInteraction to create or update platform notification
  interactions, handling GLOBAL-scoped interactions per organization.

These changes centralize notification read/write logic, enforce payload
validation, and provide deterministic ordering and unread counts for the
webapp UI.

Author: 0ski

apps/webapp/app/components/navigation/NotificationPanel.tsx

@@ -49,6 +49,7 @@ import { type UserWithDashboardPreferences } from "~/models/user.server";
 import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
 import { type FeedbackType } from "~/routes/resources.feedback";
 import { IncidentStatusPanel, useIncidentStatus } from "~/routes/resources.incidents";
+import { NotificationPanel } from "./NotificationPanel";
 import { cn } from "~/utils/cn";
 import {
   accountPath,
@@ -638,6 +639,12 @@ export function SideMenu({
             hasIncident={incidentStatus.hasIncident}
             isManagedCloud={incidentStatus.isManagedCloud}
           />
+          <NotificationPanel
+            isCollapsed={isCollapsed}
+            hasIncident={incidentStatus.hasIncident}
+            organizationId={organization.id}
+            projectId={project.id}
+          />
           <motion.div
             layout
             transition={{ duration: 0.2, ease: "easeInOut" }}

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -0,0 +1,60 @@
+import { type ActionFunctionArgs, json } from "@remix-run/server-runtime";
+import { err, ok, type Result } from "neverthrow";
+import { prisma } from "~/db.server";
+import { authenticateApiRequestWithPersonalAccessToken } from "~/services/personalAccessToken.server";
+import {
+  createPlatformNotification,
+  type CreatePlatformNotificationInput,
+} from "~/services/platformNotifications.server";
+
+type AdminUser = { id: string; admin: boolean };
+type AuthError = { status: number; message: string };
+
+async function authenticateAdmin(request: Request): Promise<Result<AdminUser, AuthError>> {
+  const authResult = await authenticateApiRequestWithPersonalAccessToken(request);
+  if (!authResult) {
+    return err({ status: 401, message: "Invalid or Missing API key" });
+  }
+
+  const user = await prisma.user.findUnique({
+    where: { id: authResult.userId },
+    select: { id: true, admin: true },
+  });
+
+  if (!user) {
+    return err({ status: 401, message: "Invalid or Missing API key" });
+  }
+
+  if (!user.admin) {
+    return err({ status: 403, message: "You must be an admin to perform this action" });
+  }
+
+  return ok(user);
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  if (request.method !== "POST") {
+    return json({ error: "Method not allowed" }, { status: 405 });
+  }
+
+  const authResult = await authenticateAdmin(request);
+  if (authResult.isErr()) {
+    const { status, message } = authResult.error;
+    return json({ error: message }, { status });
+  }
+
+  const body = await request.json();
+  const result = await createPlatformNotification(body as CreatePlatformNotificationInput);
+
+  if (result.isErr()) {
+    const error = result.error;
+
+    if (error.type === "validation") {
+      return json({ error: "Validation failed", details: error.issues }, { status: 400 });
+    }
+
+    return json({ error: error.message }, { status: 500 });
+  }
+
+  return json(result.value, { status: 201 });
+}

apps/webapp/app/routes/admin.api.v1.platform-notifications.ts

@@ -0,0 +1,22 @@
+import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { json } from "@remix-run/server-runtime";
+import { authenticateApiRequestWithPersonalAccessToken } from "~/services/personalAccessToken.server";
+import { getNextCliNotification } from "~/services/platformNotifications.server";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const authenticationResult = await authenticateApiRequestWithPersonalAccessToken(request);
+
+  if (!authenticationResult) {
+    return json({ error: "Invalid or Missing Access Token" }, { status: 401 });
+  }
+
+  const url = new URL(request.url);
+  const projectRef = url.searchParams.get("projectRef") ?? undefined;
+
+  const notification = await getNextCliNotification({
+    userId: authenticationResult.userId,
+    projectRef,
+  });
+
+  return json({ notification });
+}

apps/webapp/app/routes/api.v1.platform-notifications.ts

@@ -0,0 +1,17 @@
+import { json } from "@remix-run/node";
+import type { ActionFunctionArgs } from "@remix-run/node";
+import { requireUserId } from "~/services/session.server";
+import { dismissNotification } from "~/services/platformNotifications.server";
+
+export async function action({ request, params }: ActionFunctionArgs) {
+  const userId = await requireUserId(request);
+  const notificationId = params.id;
+
+  if (!notificationId) {
+    return json({ success: false }, { status: 400 });
+  }
+
+  await dismissNotification({ notificationId, userId });
+
+  return json({ success: true });
+}

apps/webapp/app/routes/resources.platform-notifications.$id.dismiss.tsx

@@ -0,0 +1,17 @@
+import { json } from "@remix-run/node";
+import type { ActionFunctionArgs } from "@remix-run/node";
+import { requireUserId } from "~/services/session.server";
+import { recordNotificationSeen } from "~/services/platformNotifications.server";
+
+export async function action({ request, params }: ActionFunctionArgs) {
+  const userId = await requireUserId(request);
+  const notificationId = params.id;
+
+  if (!notificationId) {
+    return json({ success: false }, { status: 400 });
+  }
+
+  await recordNotificationSeen({ notificationId, userId });
+
+  return json({ success: true });
+}

apps/webapp/app/routes/resources.platform-notifications.$id.seen.tsx

@@ -0,0 +1,61 @@
+import { json } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { useFetcher, type ShouldRevalidateFunction } from "@remix-run/react";
+import { useEffect, useRef } from "react";
+import { requireUserId } from "~/services/session.server";
+import {
+  getActivePlatformNotifications,
+  type PlatformNotificationWithPayload,
+} from "~/services/platformNotifications.server";
+
+export const shouldRevalidate: ShouldRevalidateFunction = () => false;
+
+export type PlatformNotificationsLoaderData = {
+  notifications: PlatformNotificationWithPayload[];
+  unreadCount: number;
+};
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const userId = await requireUserId(request);
+  const url = new URL(request.url);
+  const organizationId = url.searchParams.get("organizationId");
+  const projectId = url.searchParams.get("projectId") ?? undefined;
+
+  if (!organizationId) {
+    return json<PlatformNotificationsLoaderData>({ notifications: [], unreadCount: 0 });
+  }
+
+  const result = await getActivePlatformNotifications({ userId, organizationId, projectId });
+
+  return json<PlatformNotificationsLoaderData>(result);
+}
+
+const POLL_INTERVAL_MS = 60_000; // 1 minute
+
+export function usePlatformNotifications(organizationId: string, projectId: string) {
+  const fetcher = useFetcher<typeof loader>();
+  const hasInitiallyFetched = useRef(false);
+
+  useEffect(() => {
+    const url = `/resources/platform-notifications?organizationId=${encodeURIComponent(organizationId)}&projectId=${encodeURIComponent(projectId)}`;
+
+    if (!hasInitiallyFetched.current && fetcher.state === "idle") {
+      hasInitiallyFetched.current = true;
+      fetcher.load(url);
+    }
+
+    const interval = setInterval(() => {
+      if (fetcher.state === "idle") {
+        fetcher.load(url);
+      }
+    }, POLL_INTERVAL_MS);
+
+    return () => clearInterval(interval);
+  }, [organizationId, projectId]);
+
+  return {
+    notifications: fetcher.data?.notifications ?? [],
+    unreadCount: fetcher.data?.unreadCount ?? 0,
+    isLoading: fetcher.state !== "idle",
+  };
+}