From 9b3d7569820f91425dbf20e503091caa55cd670d Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 24 Mar 2025 16:11:29 +0000
Subject: [PATCH 1/2] feat: support markdown in notifications

---
 .../NotificationsInbox/InboxItem.stories.tsx          | 10 ++++++++++
 .../notifications/NotificationsInbox/InboxItem.tsx    | 11 +++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx
index a42d067d144cf..815bf6511fc6f 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx
@@ -48,6 +48,16 @@ export const LongText: Story = {
 	},
 };
 
+export const Markdown: Story = {
+	args: {
+		notification: {
+			...MockNotification,
+			read_at: null,
+			content: "Hello **world**!",
+		},
+	},
+};
+
 export const UnreadFocus: Story = {
 	args: {
 		notification: {
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx
index 3a8809c38f890..e034fd5be4de7 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx
@@ -5,6 +5,8 @@ import { SquareCheckBig } from "lucide-react";
 import type { FC } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { relativeTime } from "utils/time";
+import Markdown from "react-markdown";
+import { cn } from "utils/cn";
 
 type InboxItemProps = {
 	notification: InboxNotification;
@@ -26,8 +28,13 @@ export const InboxItem: FC<InboxItemProps> = ({
 			</div>
 
 			<div className="flex flex-col gap-3 flex-1">
-				<span className="text-content-secondary text-sm font-medium whitespace-break-spaces [overflow-wrap:anywhere]">
-					{notification.content}
+				<span
+					className={cn([
+						"text-content-secondary text-sm font-medium whitespace-break-spaces [overflow-wrap:anywhere]",
+						"[&_p]:m-0",
+					])}
+				>
+					<Markdown>{notification.content}</Markdown>
 				</span>
 				<div className="flex items-center gap-1">
 					{notification.actions.map((action) => {

From 3dbc188334e2daad08cce498c017136fc06ef547 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 24 Mar 2025 16:16:35 +0000
Subject: [PATCH 2/2] FMT

---
 .../modules/notifications/NotificationsInbox/InboxItem.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx
index e034fd5be4de7..e097a6e296963 100644
--- a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx
+++ b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx
@@ -3,10 +3,10 @@ import { Avatar } from "components/Avatar/Avatar";
 import { Button } from "components/Button/Button";
 import { SquareCheckBig } from "lucide-react";
 import type { FC } from "react";
-import { Link as RouterLink } from "react-router-dom";
-import { relativeTime } from "utils/time";
 import Markdown from "react-markdown";
+import { Link as RouterLink } from "react-router-dom";
 import { cn } from "utils/cn";
+import { relativeTime } from "utils/time";
 
 type InboxItemProps = {
 	notification: InboxNotification;