feat(changelog): update changelog view with version details and download links

Author: ComputelessComputer

apps/web/src/routes/_view/changelog/index.tsx

@@ -1,12 +1,14 @@
 import { MDXContent } from "@content-collections/mdx/react";
 import { Icon } from "@iconify-icon/react";
 import { createFileRoute, Link } from "@tanstack/react-router";
+import { Download } from "lucide-react";
 import semver from "semver";
 
 import { cn } from "@hypr/utils";
 
 import { type ChangelogWithMeta, getChangelogList } from "@/changelog";
 import { defaultMDXComponents } from "@/components/mdx";
+import { getDownloadLinks, groupDownloadLinks } from "@/utils/download";
 
 export const Route = createFileRoute("/_view/changelog/")({
   component: Component,
@@ -43,17 +45,20 @@ function Component() {
       <div className="max-w-6xl mx-auto border-x border-neutral-100 bg-white">
         <div className="px-6 py-16 lg:py-24">
           <HeroSection />
-          <div className="mt-16 max-w-4xl mx-auto">
-            {changelogs.map((changelog, index) => (
-              <ChangelogSection
-                key={changelog.slug}
-                changelog={changelog}
-                isFirst={index === 0}
-                isLast={index === changelogs.length - 1}
-              />
-            ))}
-          </div>
         </div>
+        <div className="mt-16">
+          {changelogs.map((changelog, index) => (
+            <div key={changelog.slug}>
+              <div className="max-w-4xl mx-auto px-6">
+                <ChangelogSection changelog={changelog} isFirst={index === 0} />
+              </div>
+              {index < changelogs.length - 1 && (
+                <div className="border-b border-neutral-100 my-12" />
+              )}
+            </div>
+          ))}
+        </div>
+        <div className="px-6 pb-16 lg:pb-24"></div>
       </div>
     </main>
   );
@@ -75,38 +80,48 @@ function HeroSection() {
 function ChangelogSection({
   changelog,
   isFirst,
-  isLast,
 }: {
   changelog: ChangelogWithMeta;
   isFirst: boolean;
-  isLast: boolean;
 }) {
   const currentVersion = semver.parse(changelog.version);
   const isPrerelease = currentVersion && currentVersion.prerelease.length > 0;
+  const nightlyNumber =
+    isPrerelease && currentVersion?.prerelease[0] === "nightly"
+      ? currentVersion.prerelease[1]
+      : null;
 
   return (
-    <section
-      className={cn([
-        "grid grid-cols-1 md:grid-cols-[200px_1fr] gap-6 md:gap-12",
-        !isLast && "border-b border-neutral-100 pb-12 mb-12",
-      ])}
-    >
-      <div className="md:sticky md:top-24 md:self-start">
-        <div className="flex items-center gap-2">
-          <h2 className="text-lg font-semibold text-stone-700">
-            {changelog.version}
-          </h2>
+    <section className="grid grid-cols-1 md:grid-cols-[160px_1fr] gap-6 md:gap-12">
+      <div className="md:sticky md:top-24 md:self-start space-y-6">
+        <div className="flex flex-col gap-1">
           {isFirst && (
-            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium bg-linear-to-t from-amber-200 to-amber-100 text-amber-900 rounded-full">
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium bg-linear-to-t from-amber-200 to-amber-100 text-amber-900 rounded-full w-fit">
               <Icon icon="ri:rocket-fill" className="text-xs" />
+              Stable
             </span>
           )}
           {isPrerelease && (
-            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium bg-linear-to-b from-[#03BCF1] to-[#127FE5] text-white rounded-full">
-              <Icon icon="ri:moon-fill" className="text-xs" />
-            </span>
+            <div className="flex items-center gap-1.5">
+              <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-xs font-medium bg-linear-to-b from-[#03BCF1] to-[#127FE5] text-white rounded-full">
+                <Icon icon="ri:moon-fill" className="text-xs" />
+                Beta
+              </span>
+              {nightlyNumber !== null && (
+                <span className="inline-flex items-center px-1.5 py-0.5 text-xs font-medium bg-stone-100 text-stone-600 rounded-full">
+                  #{nightlyNumber}
+                </span>
+              )}
+            </div>
           )}
+          <h2 className="text-4xl font-mono font-medium text-stone-700">
+            {currentVersion
+              ? `${currentVersion.major}.${currentVersion.minor}.${currentVersion.patch}`
+              : changelog.version}
+          </h2>
         </div>
+
+        <DownloadLinks version={changelog.version} />
       </div>
 
       <div>
@@ -126,3 +141,60 @@ function ChangelogSection({
     </section>
   );
 }
+
+function DownloadLinks({ version }: { version: string }) {
+  const links = getDownloadLinks(version);
+  const grouped = groupDownloadLinks(links);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="flex items-center gap-1.5 text-xs font-medium text-stone-500 uppercase tracking-wider mb-2">
+          <Icon icon="simple-icons:apple" className="text-sm" />
+          macOS
+        </h3>
+        <div className="space-y-1.5">
+          {grouped.macos.map((link) => (
+            <a
+              key={link.url}
+              href={link.url}
+              className={cn([
+                "flex items-center gap-2 px-4 h-8 text-sm rounded-full transition-all",
+                "bg-linear-to-b from-white to-stone-50 text-neutral-700",
+                "border border-neutral-300",
+                "hover:shadow-sm hover:scale-[102%] active:scale-[98%]",
+              ])}
+            >
+              <Download className="size-3.5 shrink-0" />
+              <span className="truncate">{link.label}</span>
+            </a>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <h3 className="flex items-center gap-1.5 text-xs font-medium text-stone-500 uppercase tracking-wider mb-2">
+          <Icon icon="simple-icons:linux" className="text-sm" />
+          Linux
+        </h3>
+        <div className="space-y-1.5">
+          {grouped.linux.map((link) => (
+            <a
+              key={link.url}
+              href={link.url}
+              className={cn([
+                "flex items-center gap-2 px-4 h-8 text-sm rounded-full transition-all",
+                "bg-linear-to-b from-white to-stone-50 text-neutral-700",
+                "border border-neutral-300",
+                "hover:shadow-sm hover:scale-[102%] active:scale-[98%]",
+              ])}
+            >
+              <Download className="size-3.5 shrink-0" />
+              <span className="truncate">{link.label}</span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}