feat: support markdown in notifications

BrunoQuaresma · BrunoQuaresma · commit 9b3d7569820f · 2025-03-24T16:11:29.000Z
diff --git 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
@@ -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) => {
