feat(frontend): do not display buttons when no pending notifications

IgnisDa · Jan 22, 2025 · a7d1616 · a7d1616
1 parent ef28fec
commit a7d1616
Showing 1 changed file with 25 additions and 23 deletions.
diff --git a/apps/frontend/app/routes/_dashboard.tsx b/apps/frontend/app/routes/_dashboard.tsx
@@ -986,31 +986,33 @@ const Footer = () => {
 				title={`You have ${userPendingNotificationsQuery.data?.length} pending notifications`}
 			>
 				<Stack ref={parent}>
-					{userPendingNotificationsQuery.data ? (
-						userPendingNotificationsQuery.data.map((n, idx) => (
-							<DisplayNotificationContent idx={idx} key={n.id} />
-						))
+					{userPendingNotificationsQuery.data?.map((n, idx) => (
+						<DisplayNotificationContent idx={idx} key={n.id} />
+					))}
+					{(userPendingNotificationsQuery.data?.length || 0) > 0 ? (
+						<Button
+							ta="right"
+							variant="subtle"
+							size="compact-md"
+							rightSection={<IconChecks />}
+							onClick={() => {
+								const ids = userPendingNotificationsQuery.data?.map(
+									(n) => n.id,
+								);
+								if (!ids) return;
+								notifications.show({
+									color: "green",
+									message: "All notifications will be marked as read",
+								});
+								markUserNotificationsAsAddressedMutation.mutate(ids);
+								setIsNotificationModalOpen(false);
+							}}
+						>
+							Mark all as read
+						</Button>
 					) : (
-						<Text>No notifications</Text>
+						<Text ta="center">No notifications</Text>
 					)}
-					<Button
-						ta="right"
-						variant="subtle"
-						size="compact-md"
-						rightSection={<IconChecks />}
-						onClick={() => {
-							const ids = userPendingNotificationsQuery.data?.map((n) => n.id);
-							if (!ids) return;
-							notifications.show({
-								color: "green",
-								message: "All notifications will be marked as read",
-							});
-							markUserNotificationsAsAddressedMutation.mutate(ids);
-							setIsNotificationModalOpen(false);
-						}}
-					>
-						Mark all as read
-					</Button>
 				</Stack>
 			</Modal>
 			<Container>