From 001fffc88b6a7e6a36e8841baf16e82d20680391 Mon Sep 17 00:00:00 2001
From: Jared Schoeny <jared@schoeny.com>
Date: Sun, 21 Dec 2025 01:26:34 -1000
Subject: [PATCH] Add "Version Status Guide" info card to versions page

---
 src/app/hack/[slug]/versions/page.tsx         | 38 ++++++++++++++-
 src/components/Primitives/CollapsibleCard.tsx | 47 +++++++++++++++++++
 2 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Primitives/CollapsibleCard.tsx

diff --git a/src/app/hack/[slug]/versions/page.tsx b/src/app/hack/[slug]/versions/page.tsx
index f186973..190cbe0 100644
--- a/src/app/hack/[slug]/versions/page.tsx
+++ b/src/app/hack/[slug]/versions/page.tsx
@@ -2,8 +2,9 @@ import { notFound } from "next/navigation";
 import { createClient } from "@/utils/supabase/server";
 import { canEditAsCreator } from "@/utils/hack";
 import VersionList from "@/components/Hack/VersionList";
+import CollapsibleCard from "@/components/Primitives/CollapsibleCard";
 import Link from "next/link";
-import { FaChevronLeft, FaPlus } from "react-icons/fa6";
+import { FaChevronLeft, FaPlus, FaStar } from "react-icons/fa6";
 
 interface VersionsPageProps {
   params: Promise<{ slug: string }>;
@@ -87,6 +88,41 @@ export default async function VersionsPage({ params }: VersionsPageProps) {
         </div>
       </div>
 
+      <CollapsibleCard title="Version Status Guide">
+        <div className="space-y-5 sm:space-y-2.5 text-sm text-foreground/80">
+          <div className="flex flex-col sm:grid sm:grid-cols-[100px_1fr] gap-2 sm:gap-1 items-start">
+            <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/20 px-2 py-0.5 text-xs font-medium text-emerald-600 dark:text-emerald-400 shrink-0 w-fit">
+              <FaStar size={10} />
+              Current
+            </span>
+            <p className="text-foreground/70">
+              {canEdit ?
+                "The version that is currently active and visible to all users. This is the version users will download when pressing \"Patch Now\" on the hack page." :
+                "This is the version you will download when pressing \"Patch Now\" on the hack page."
+              }
+            </p>
+          </div>
+          {canEdit && <>
+            <div className="flex flex-col sm:grid sm:grid-cols-[100px_1fr] gap-2 sm:gap-1 items-start">
+              <span className="inline-flex items-center rounded-full bg-amber-500/20 px-2 py-0.5 text-xs font-medium text-amber-600 dark:text-amber-400 shrink-0 w-fit">
+                Unpublished
+              </span>
+              <p className="text-foreground/70">
+                Versions that are only visible to you, and will not appear in the public version list or changelog.
+              </p>
+            </div>
+            <div className="flex flex-col sm:grid sm:grid-cols-[100px_1fr] gap-2 sm:gap-1 items-start">
+              <span className="inline-flex items-center rounded-full bg-gray-500/20 px-2 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-400 shrink-0 w-fit">
+                Archived
+              </span>
+              <p className="text-foreground/70">
+                Same as unpublished, but archived versions are hidden from normal view on this page. Check "Show archived versions" to view and restore them.
+              </p>
+            </div>
+          </>}
+        </div>
+      </CollapsibleCard>
+
       <VersionList
         patches={allPatches}
         currentPatchId={hack.current_patch}
diff --git a/src/components/Primitives/CollapsibleCard.tsx b/src/components/Primitives/CollapsibleCard.tsx
new file mode 100644
index 0000000..26b3ccd
--- /dev/null
+++ b/src/components/Primitives/CollapsibleCard.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useState, ReactNode } from "react";
+import { FaChevronDown } from "react-icons/fa6";
+
+interface CollapsibleCardProps {
+  title: string;
+  children: ReactNode;
+  defaultExpanded?: boolean;
+}
+
+export default function CollapsibleCard({ title, children, defaultExpanded = false }: CollapsibleCardProps) {
+  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">
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between gap-2 text-left hover:opacity-80 transition-opacity"
+        aria-expanded={isExpanded}
+      >
+        <h2 className="text-sm font-semibold text-foreground/90">{title}</h2>
+        <span
+          className={`text-foreground/60 shrink-0 transition-transform duration-300 ease-in-out ${
+            isExpanded ? "rotate-180" : ""
+          }`}
+        >
+          <FaChevronDown size={14} />
+        </span>
+      </button>
+      <div
+        className={`grid transition-all duration-300 ease-in-out ${
+          isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        }`}
+      >
+        <div className="overflow-hidden">
+          <div className={`mt-3 transition-opacity duration-300 ${
+            isExpanded ? "opacity-100" : "opacity-0"
+          }`}>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+