fix: logo unique gradient IDs, release notes markdown formatting

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: voidcraft-dev

src/app/routes/about.tsx

@@ -13,6 +13,33 @@ function openUrl(url: string) {
   });
 }
 
+function formatReleaseNotes(raw: string): React.ReactNode[] {
+  const lines = raw
+    .replace(/\r\n/g, "\n")
+    .split("\n")
+    .filter((line) => {
+      const trimmed = line.trim();
+      if (trimmed.startsWith("|") && (trimmed.includes("---") || trimmed.includes("平台") || trimmed.includes("Platform"))) return false;
+      if (trimmed.match(/^\|.*\|$/)) return false;
+      if (trimmed === "") return false;
+      return true;
+    });
+
+  return lines.map((line, i) => {
+    const trimmed = line.trim();
+    if (trimmed.startsWith("## ")) {
+      return <h4 key={i} className="text-sm font-semibold text-foreground pt-1">{trimmed.replace(/^##\s+/, "")}</h4>;
+    }
+    if (trimmed.startsWith("### ")) {
+      return <h5 key={i} className="text-xs font-semibold text-foreground/80">{trimmed.replace(/^###\s+/, "")}</h5>;
+    }
+    if (trimmed.startsWith("- ") || trimmed.startsWith("* ")) {
+      return <p key={i} className="pl-3 before:content-['•'] before:mr-1.5 before:text-amber-400/60">{trimmed.replace(/^[-*]\s+/, "")}</p>;
+    }
+    return <p key={i}>{trimmed}</p>;
+  });
+}
+
 export default function AboutPage() {
   const { t, snapshot } = useDesktop();
   const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null);
@@ -111,7 +138,9 @@ export default function AboutPage() {
                 {updateInfo.releaseNotes && (
                   <details className="mt-3">
                     <summary className="cursor-pointer text-xs font-medium text-quiet hover:text-foreground">{t("releaseNotes")}</summary>
-                    <pre className="mt-2 max-h-40 overflow-y-auto whitespace-pre-wrap rounded-xl border border-border/50 bg-background/50 p-3 text-xs leading-relaxed text-quiet">{updateInfo.releaseNotes}</pre>
+                    <div className="mt-2 max-h-48 overflow-y-auto rounded-xl border border-border/50 bg-background/50 p-4 text-xs leading-relaxed text-quiet space-y-2">
+                      {formatReleaseNotes(updateInfo.releaseNotes)}
+                    </div>
                   </details>
                 )}
               </div>

src/components/logo.tsx

@@ -1,6 +1,9 @@
+import { useId } from "react"
 import { cn } from "@/lib/utils"
 
 export function AppLogo({ className }: { className?: string }) {
+  const id = useId()
+  const gradId = `logo-fg-${id}`
   const isDark = document.documentElement.style.colorScheme !== "light"
   const bgColor = isDark ? "#1C1917" : "#F5F0EB"
   const gradientFrom = isDark ? "#F97316" : "#EA580C"
@@ -13,7 +16,7 @@ export function AppLogo({ className }: { className?: string }) {
       aria-hidden="true"
     >
       <defs>
-        <radialGradient id="logo-fg" cx="42%" cy="38%">
+        <radialGradient id={gradId} cx="42%" cy="38%">
           <stop offset="0%" stopColor={gradientFrom} />
           <stop offset="100%" stopColor={gradientTo} />
         </radialGradient>
@@ -22,7 +25,7 @@ export function AppLogo({ className }: { className?: string }) {
       <path
         fillRule="evenodd"
         d="M 72,184 C 72,120 120,72 184,72 L 328,72 C 392,72 440,120 440,184 L 440,328 C 440,392 392,440 328,440 L 184,440 C 120,440 72,392 72,328 Z M 156,380 L 156,164 L 256,316 L 356,164 L 356,380 L 308,380 L 308,224 L 256,344 L 204,224 L 204,380 Z"
-        fill="url(#logo-fg)"
+        fill={`url(#${gradId})`}
       />
     </svg>
   )