From 6a53c31e907fffa79320997c27f99660c946b4a6 Mon Sep 17 00:00:00 2001
From: Simos Mikelatos <simosmik@gmail.com>
Date: Tue, 9 Jun 2026 20:53:15 +0000
Subject: [PATCH] feat: render changelog as markdown in version upgrade modal

---
 .../view/VersionUpgradeModal.tsx               | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/version-upgrade/view/VersionUpgradeModal.tsx b/src/components/version-upgrade/view/VersionUpgradeModal.tsx
index cf6b94b7..45343119 100644
--- a/src/components/version-upgrade/view/VersionUpgradeModal.tsx
+++ b/src/components/version-upgrade/view/VersionUpgradeModal.tsx
@@ -1,4 +1,6 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, type ReactNode } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { useTranslation } from "react-i18next";
 import { authenticatedFetch } from "../../../utils/api";
 import { ReleaseInfo } from "../../../types/sharedTypes";
@@ -154,8 +156,10 @@ export function VersionUpgradeModal({
                             )}
                         </div>
                         <div className="max-h-64 overflow-y-auto rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-600 dark:bg-gray-700/50">
-                            <div className="prose prose-sm max-w-none whitespace-pre-wrap text-sm text-gray-700 dark:prose-invert dark:text-gray-300">
-                                {cleanChangelog(releaseInfo.body)}
+                            <div className="prose prose-sm max-w-none text-sm text-gray-700 dark:prose-invert dark:text-gray-300">
+                                <ReactMarkdown remarkPlugins={[remarkGfm]} components={changelogComponents}>
+                                    {cleanChangelog(releaseInfo.body)}
+                                </ReactMarkdown>
                             </div>
                         </div>
                     </div>
@@ -236,6 +240,14 @@ export function VersionUpgradeModal({
     );
 };
 
+const changelogComponents = {
+    a: ({ href, children }: { href?: string; children?: ReactNode }) => (
+        <a href={href} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline dark:text-blue-400">
+            {children}
+        </a>
+    ),
+};
+
 // Clean up changelog by removing GitHub-specific metadata
 const cleanChangelog = (body: string) => {
     if (!body) return '';