From 0894ac06476f9471fd24d4d4011bb3c1bb364fb3 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Thu, 20 Mar 2025 17:52:09 +0000
Subject: [PATCH 1/3] feat: add load more notifications on inbox

---
 site/src/api/api.ts                           |  8 +++-
 site/src/components/ScrollArea/ScrollArea.tsx |  2 +-
 .../NotificationsInbox/InboxPopover.tsx       | 28 ++++++++++-
 .../NotificationsInbox/NotificationsInbox.tsx | 46 ++++++++++++++++---
 4 files changed, 73 insertions(+), 11 deletions(-)

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 0959a5c79124e..b042735357ab0 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -2434,9 +2434,13 @@ class ApiMethods {
 		return res.data;
 	};
 
-	getInboxNotifications = async () => {
+	getInboxNotifications = async (startingBeforeId?: string) => {
+		const params = new URLSearchParams();
+		if (startingBeforeId) {
+			params.append("starting_before", startingBeforeId);
+		}
 		const res = await this.axios.get<TypesGen.ListInboxNotificationsResponse>(
-			"/api/v2/notifications/inbox",
+			`/api/v2/notifications/inbox?${params.toString()}`,
 		);
 		return res.data;
 	};
diff --git a/site/src/components/ScrollArea/ScrollArea.tsx b/site/src/components/ScrollArea/ScrollArea.tsx
index d4544a0ca2d33..2c3b2f3255755 100644
--- a/site/src/components/ScrollArea/ScrollArea.tsx
+++ b/site/src/components/ScrollArea/ScrollArea.tsx
@@ -18,7 +18,7 @@ export const ScrollArea = React.forwardRef<
 		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
 			{children}
 		</ScrollAreaPrimitive.Viewport>
-		<ScrollBar />
+		<ScrollBar className="z-10" />
 		<ScrollAreaPrimitive.Corner />
 	</ScrollAreaPrimitive.Root>
 ));
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx b/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
index 7651a83ebed66..80939fd9d4b47 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
@@ -19,9 +19,12 @@ type InboxPopoverProps = {
 	notifications: readonly InboxNotification[] | undefined;
 	unreadCount: number;
 	error: unknown;
+	isLoadingMoreNotifications: boolean;
+	hasMoreNotifications: boolean;
 	onRetry: () => void;
 	onMarkAllAsRead: () => void;
 	onMarkNotificationAsRead: (notificationId: string) => void;
+	onLoadMoreNotifications: () => void;
 	defaultOpen?: boolean;
 };
 
@@ -30,9 +33,12 @@ export const InboxPopover: FC<InboxPopoverProps> = ({
 	unreadCount,
 	notifications,
 	error,
+	isLoadingMoreNotifications,
+	hasMoreNotifications,
 	onRetry,
 	onMarkAllAsRead,
 	onMarkNotificationAsRead,
+	onLoadMoreNotifications,
 }) => {
 	const [isOpen, setIsOpen] = useState(defaultOpen);
 
@@ -41,12 +47,18 @@ export const InboxPopover: FC<InboxPopoverProps> = ({
 			<PopoverTrigger asChild>
 				<InboxButton unreadCount={unreadCount} />
 			</PopoverTrigger>
-			<PopoverContent className="w-[466px]" align="end">
+			<PopoverContent className="w-[466px] flex flex-col" align="end">
 				{/*
 				 * data-radix-scroll-area-viewport is used to set the max-height of the ScrollArea
 				 * https://github.com/shadcn-ui/ui/issues/542#issuecomment-2339361283
 				 */}
-				<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(var(--radix-popover-content-available-height)-24px)]">
+				<ScrollArea
+					className={cn([
+						"[--bottom-offset:48px]",
+						"[--max-height:calc(var(--radix-popover-content-available-height)-var(--bottom-offset))]",
+						"[&>[data-radix-scroll-area-viewport]]:max-h-[var(--max-height)]",
+					])}
+				>
 					<div
 						className={cn([
 							"flex items-center justify-between p-3 border-0 border-b border-solid border-border",
@@ -94,6 +106,18 @@ export const InboxPopover: FC<InboxPopoverProps> = ({
 										onMarkNotificationAsRead={onMarkNotificationAsRead}
 									/>
 								))}
+								{hasMoreNotifications && (
+									<Button
+										variant="subtle"
+										size="sm"
+										disabled={isLoadingMoreNotifications}
+										onClick={onLoadMoreNotifications}
+										className="w-full"
+									>
+										<Spinner loading={isLoadingMoreNotifications} size="sm" />
+										Load more
+									</Button>
+								)}
 							</div>
 						) : (
 							<div className="p-6 flex items-center justify-center min-h-48">
diff --git a/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.tsx b/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.tsx
index bee4d7482b6ce..1c567e4fbf4ba 100644
--- a/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.tsx
@@ -1,4 +1,4 @@
-import { API, watchInboxNotifications } from "api/api";
+import { watchInboxNotifications } from "api/api";
 import { getErrorDetail, getErrorMessage } from "api/errors";
 import type {
 	ListInboxNotificationsResponse,
@@ -11,10 +11,13 @@ import { useMutation, useQuery, useQueryClient } from "react-query";
 import { InboxPopover } from "./InboxPopover";
 
 const NOTIFICATIONS_QUERY_KEY = ["notifications"];
+const NOTIFICATIONS_LIMIT = 25; // This is hard set in the API
 
 type NotificationsInboxProps = {
 	defaultOpen?: boolean;
-	fetchNotifications: () => Promise<ListInboxNotificationsResponse>;
+	fetchNotifications: (
+		startingBeforeId?: string,
+	) => Promise<ListInboxNotificationsResponse>;
 	markAllAsRead: () => Promise<void>;
 	markNotificationAsRead: (
 		notificationId: string,
@@ -30,12 +33,12 @@ export const NotificationsInbox: FC<NotificationsInboxProps> = ({
 	const queryClient = useQueryClient();
 
 	const {
-		data: res,
+		data: inboxRes,
 		error,
 		refetch,
 	} = useQuery({
 		queryKey: NOTIFICATIONS_QUERY_KEY,
-		queryFn: fetchNotifications,
+		queryFn: () => fetchNotifications(),
 	});
 
 	const updateNotificationsCache = useEffectEvent(
@@ -75,6 +78,32 @@ export const NotificationsInbox: FC<NotificationsInboxProps> = ({
 		};
 	}, [updateNotificationsCache]);
 
+	const {
+		mutate: loadMoreNotifications,
+		isLoading: isLoadingMoreNotifications,
+	} = useMutation({
+		mutationFn: async () => {
+			if (!inboxRes) {
+				return;
+			}
+			const lastNotification =
+				inboxRes.notifications[inboxRes.notifications.length - 1];
+			const newRes = await fetchNotifications(lastNotification.id);
+			updateNotificationsCache((prev) => {
+				return {
+					unread_count: newRes.unread_count,
+					notifications: [...prev.notifications, ...newRes.notifications],
+				};
+			});
+		},
+		onError: (error) => {
+			displayError(
+				getErrorMessage(error, "Error loading more notifications"),
+				getErrorDetail(error),
+			);
+		},
+	});
+
 	const markAllAsReadMutation = useMutation({
 		mutationFn: markAllAsRead,
 		onSuccess: () => {
@@ -122,12 +151,17 @@ export const NotificationsInbox: FC<NotificationsInboxProps> = ({
 	return (
 		<InboxPopover
 			defaultOpen={defaultOpen}
-			notifications={res?.notifications}
-			unreadCount={res?.unread_count ?? 0}
+			notifications={inboxRes?.notifications}
+			unreadCount={inboxRes?.unread_count ?? 0}
 			error={error}
+			isLoadingMoreNotifications={isLoadingMoreNotifications}
+			hasMoreNotifications={Boolean(
+				inboxRes && inboxRes.notifications.length === NOTIFICATIONS_LIMIT,
+			)}
 			onRetry={refetch}
 			onMarkAllAsRead={markAllAsReadMutation.mutate}
 			onMarkNotificationAsRead={markNotificationAsReadMutation.mutate}
+			onLoadMoreNotifications={loadMoreNotifications}
 		/>
 	);
 };

From 379b90ecfe1f03a3a4c231f9792f9f1dd623d679 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 21 Mar 2025 16:08:21 +0000
Subject: [PATCH 2/3] Apply Michaels review comments

---
 .../notifications/NotificationsInbox/InboxPopover.tsx        | 5 ++++-
 .../notifications/NotificationsInbox/NotificationsInbox.tsx  | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx b/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
index 80939fd9d4b47..1b68d851ac101 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
@@ -47,7 +47,10 @@ export const InboxPopover: FC<InboxPopoverProps> = ({
 			<PopoverTrigger asChild>
 				<InboxButton unreadCount={unreadCount} />
 			</PopoverTrigger>
-			<PopoverContent className="w-[466px] flex flex-col" align="end">
+			<PopoverContent
+				className="w-full max-w-[466px] flex flex-col"
+				align="end"
+			>
 				{/*
 				 * data-radix-scroll-area-viewport is used to set the max-height of the ScrollArea
 				 * https://github.com/shadcn-ui/ui/issues/542#issuecomment-2339361283
diff --git a/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.tsx b/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.tsx
index 1c567e4fbf4ba..78d119a7e371f 100644
--- a/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/NotificationsInbox.tsx
@@ -83,7 +83,7 @@ export const NotificationsInbox: FC<NotificationsInboxProps> = ({
 		isLoading: isLoadingMoreNotifications,
 	} = useMutation({
 		mutationFn: async () => {
-			if (!inboxRes) {
+			if (!inboxRes || inboxRes.notifications.length === 0) {
 				return;
 			}
 			const lastNotification =

From 7a1d48e4b3a56b3c68a9d8c932b278860550d64b Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 21 Mar 2025 16:27:30 +0000
Subject: [PATCH 3/3] Fix popover width for smaller content

---
 .../modules/notifications/NotificationsInbox/InboxPopover.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx b/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
index 1b68d851ac101..3a5cd92248b91 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxPopover.tsx
@@ -48,7 +48,7 @@ export const InboxPopover: FC<InboxPopoverProps> = ({
 				<InboxButton unreadCount={unreadCount} />
 			</PopoverTrigger>
 			<PopoverContent
-				className="w-full max-w-[466px] flex flex-col"
+				className="w-[var(--radix-popper-available-width)] max-w-[466px]"
 				align="end"
 			>
 				{/*

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17030.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17030.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17030.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/17030.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>