feat: implement notification inbox system

Coder User · claude · Coder User · commit 380bf63f5146 · 2025-03-13T03:03:57.000Z
- Add API methods for getting notifications and marking them as read - Add TypeScript types for the notification inbox API - Update notification components to use the official API types - Integrate NotificationsInbox component into the navbar Closes #16804 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -2388,6 +2388,22 @@ class ApiMethods {
 			);
 		return res.data;
 	};
+
+	// Notification inbox API methods
+	getUserNotifications = async () => {
+		const response = await this.axios.get<TypesGen.UserNotificationsResponse>(
+			"/api/v2/users/me/notifications"
+		);
+		return response.data;
+	};
+
+	markAllNotificationsAsRead = async (): Promise<void> => {
+		await this.axios.post("/api/v2/users/me/notifications/read");
+	};
+
+	markNotificationAsRead = async (notificationId: string): Promise<void> => {
+		await this.axios.post(`/api/v2/users/me/notifications/${notificationId}/read`);
+	};
 }
 
 // This is a hard coded CSRF token/cookie pair for local development. In prod,
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -1,7 +1,9 @@
+import { API } from "api/api";
 import type * as TypesGen from "api/typesGenerated";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { CoderIcon } from "components/Icons/CoderIcon";
 import type { ProxyContextValue } from "contexts/ProxyContext";
+import { NotificationsInbox } from "modules/notifications/NotificationsInbox/NotificationsInbox";
 import type { FC } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import { cn } from "utils/cn";
@@ -57,6 +59,14 @@ export const NavbarView: FC<NavbarViewProps> = ({
 				{proxyContextValue && (
 					<ProxyMenu proxyContextValue={proxyContextValue} />
 				)}
+				
+				{user && (
+					<NotificationsInbox
+						fetchNotifications={API.getUserNotifications}
+						markAllAsRead={API.markAllNotificationsAsRead}
+						markNotificationAsRead={API.markNotificationAsRead}
+					/>
+				)}
 
 				<DeploymentDropdown
 					canViewAuditLog={canViewAuditLog}
diff --git a/site/src/modules/notifications/NotificationsInbox/types.ts b/site/src/modules/notifications/NotificationsInbox/types.ts
@@ -1,12 +1,5 @@
-// TODO: Remove this file when the types from API are available
+// This file uses the official API types
+import type { InboxNotification } from "api/typesGenerated";
 
-export type Notification = {
-	id: string;
-	read_status: "read" | "unread";
-	content: string;
-	created_at: string;
-	actions: {
-		label: string;
-		url: string;
-	}[];
-};
+// Reexport the InboxNotification type for backward compatibility
+export type Notification = InboxNotification;
