feat(upgrade): add linkifyChangelog utility and update changelog rendering

- Introduced a new utility function `linkifyChangelog` to convert commit hashes, issue/PR numbers, and contributor mentions into clickable links.
- Updated the `AppNotificationContainer` to utilize the new utility for rendering the changelog in both development and production environments.
- Modified the `Paper` component styling for improved visual consistency.

Signed-off-by: Innei <tukon479@gmail.com>

apps/desktop/layer/renderer/src/components/ui/paper/Paper.tsx

@@ -8,7 +8,7 @@ export const Paper: Component<{
     className={cn(
       "bg-background relative md:col-start-1 lg:col-auto",
       "-m-4 p-[2rem_1rem] md:m-0 lg:p-[30px_45px]",
-      "border-border rounded-[0_6px_6px_0] lg:border",
+      "border-border rounded-lg lg:border",
       "shadow-perfect perfect-sm",
       "min-w-0",
       "print:!border-none print:!bg-transparent print:!shadow-none",

apps/desktop/layer/renderer/src/modules/upgrade/container.tsx

@@ -14,6 +14,8 @@ import { useModalStack } from "~/components/ui/modal/stacked/hooks"
 import { Paper } from "~/components/ui/paper"
 import { DebugRegistry } from "~/modules/debug/registry"
 
+import { linkifyChangelog } from "./utils"
+
 const AppNotificationContainer: FC = () => {
   const { present } = useModalStack()
 
@@ -110,10 +112,12 @@ const AppNotificationContainer: FC = () => {
 export default AppNotificationContainer
 
 const changelogContext = (async () => {
+  const repoUrl = repository.url
   if (import.meta.env.DEV) {
-    return import("../../../../../changelog/next.md?raw").then((m) => m.default)
+    const content = await import("../../../../../changelog/next.md?raw").then((m) => m.default)
+    return linkifyChangelog(content, repoUrl)
   }
-  return CHANGELOG_CONTENT
+  return linkifyChangelog(CHANGELOG_CONTENT, repoUrl)
 })()
 const Changelog = () => (
   <Paper>

apps/desktop/layer/renderer/src/modules/upgrade/utils.ts

@@ -0,0 +1,26 @@
+export const linkifyChangelog = (content: string, repoUrl: string) => {
+  if (!repoUrl) {
+    return content
+  }
+  const cleanRepoUrl = repoUrl.replace(/\.git$/, "")
+
+  // Linkify commit hashes, e.g., (26c6853)
+  let linkedContent = content.replaceAll(
+    /\((([a-f0-9]{7,40}))\)/g,
+    (match, hash) => `([${hash}](${cleanRepoUrl}/commit/${hash}))`,
+  )
+
+  // Linkify issue/PR numbers, e.g., (#3809)
+  linkedContent = linkedContent.replaceAll(
+    /\(#(\d+)\)/g,
+    (match, issue) => `([#${issue}](${cleanRepoUrl}/pull/${issue}))`,
+  )
+
+  // Linkify contributors, e.g., @ericyzhu
+  linkedContent = linkedContent.replaceAll(
+    /\B@([a-z0-9-]+)/gi,
+    (match, username) => `[@${username}](https://github.com/${username})`,
+  )
+
+  return linkedContent
+}