Add most recent changelog to hack page

src/app/hack/[slug]/page.tsx

@@ -23,6 +23,7 @@ import { sortOrderedTags, getCoverUrls } from "@/utils/format";
 import { RiArchiveStackFill } from "react-icons/ri";
 import { isInformationalArchiveHack, isDownloadableArchiveHack, isArchiveHack, checkEditPermission } from "@/utils/hack";
 import Avatar from "@/components/Account/Avatar";
+import CollapsibleCard from "@/components/Primitives/CollapsibleCard";
 
 interface HackDetailProps {
   params: Promise<{ slug: string }>;
@@ -197,10 +198,11 @@ export default async function HackDetail({ params }: HackDetailProps) {
   let patchId: number | null = null;
   let lastUpdated: string | null = null;
   let patchCreatedAt: string | null = null;
+  let patchChangelog: string | null = null;
   if (hack.current_patch != null) {
     const { data: patch } = await supabase
       .from("patches")
-      .select("id,bucket,filename,version,created_at")
+      .select("id,bucket,filename,version,created_at,changelog")
       .eq("id", hack.current_patch as number)
       .maybeSingle();
     if (patch) {
@@ -209,6 +211,7 @@ export default async function HackDetail({ params }: HackDetailProps) {
       patchId = patch.id;
       lastUpdated = new Date(patch.created_at).toLocaleDateString();
       patchCreatedAt = patch.created_at;
+      patchChangelog = patch.changelog;
     }
   }
 
@@ -405,6 +408,37 @@ export default async function HackDetail({ params }: HackDetailProps) {
         <div className="space-y-6 lg:min-w-[640px]">
           <Gallery images={images} title={hack.title} />
 
+          {patchId && patchCreatedAt && (
+            <CollapsibleCard
+              title={`${patchVersion || "Pre-release"} released on ${new Date(patchCreatedAt).toLocaleDateString(undefined, {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              })}`}
+            >
+              {patchChangelog && patchChangelog.trim().length > 0 ? (
+                <div className="prose prose-sm max-w-none text-foreground/80">
+                  <ReactMarkdown
+                    remarkPlugins={[remarkGfm]}
+                    rehypePlugins={[rehypeSlug]}
+                    components={{
+                      h1: 'h2',
+                      h2: 'h3',
+                      h3: 'h4',
+                      h4: 'h5',
+                      h5: 'h6',
+                      h6: 'h6',
+                    }}
+                  >
+                    {patchChangelog}
+                  </ReactMarkdown>
+                </div>
+              ) : (
+                <p className="italic text-foreground/60">No changelog provided</p>
+              )}
+            </CollapsibleCard>
+          )}
+
           <div className="card-simple p-5">
             <h2 className="text-2xl font-semibold tracking-tight">About this hack</h2>
             <div className="prose prose-sm mt-3 max-w-none text-foreground/80">

src/components/Primitives/CollapsibleCard.tsx

@@ -13,7 +13,7 @@ export default function CollapsibleCard({ title, children, defaultExpanded = fal
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   return (
-    <div className="p-4 sm:p-5 mb-6 bg-[var(--surface-1)] border border-[var(--border)]/50 rounded-lg">
+    <div className="card-simple p-4 sm:p-5">
       <button
         onClick={() => setIsExpanded(!isExpanded)}
         className="w-full flex items-center justify-between gap-2 text-left hover:opacity-80 transition-opacity"