refactor: Update release notes page to handle missing release notes gracefully

src/app/release-notes/[version]/page.tsx

@@ -1,14 +1,35 @@
 'use client'
 
+import Footer from '@/components/footer';
+import { Navigation } from '@/components/navigation';
+import ReleaseNote from '@/components/release-note';
+import { Button } from '@/components/ui/button';
+import { releaseNotes } from '@/lib/release-notes';
+import Link from 'next/link';
 import { useParams } from 'next/navigation'
 
 export default function() {
   const params = useParams<{ version: string }>()
   const { version } = params;
 
+  const releaseNote = releaseNotes.find((note) => note.version === version);
+  if (!releaseNote) {
+    return (
+      <main className="flex min-h-screen flex-col items-center justify-start">
+        <div className="h-screen flex flex-col items-center justify-center">
+          <h1 className="text-4xl font-bold mt-12">Release note not found</h1>
+          <Link href="/release-notes"><Button className="mt-4">Back to release notes</Button></Link>
+        </div>
+        <Footer />  
+        <Navigation /> {/* At the bottom of the page */}
+      </main>
+    );
+  }
   return (
-    <div>
+    <main className="flex min-h-screen flex-col items-center justify-start">
-      <h1>{version}</h1>
+      <ReleaseNote data={releaseNote} />
-    </div>
+      <Footer />  
+      <Navigation /> {/* At the bottom of the page */}
+    </main>
   )
 }

src/app/release-notes/page.tsx

@@ -1,7 +1,33 @@
-import { releaseNotes } from "@/lib/release-notes";
+import Footer from "@/components/footer";
-import { redirect } from "next/navigation";
+import { Navigation } from "@/components/navigation";
+import { releaseNoteIsAlpha, releaseNotes } from "@/lib/release-notes";
+import Link from "next/link";
 
 export default function() {
-  // "0" is the latest release
+  return (
-  redirect(`/release-notes/${releaseNotes[0].version}`);
+    <main className="flex min-h-screen flex-col items-center justify-start">
+      <div className="min-h-screen py-42 flex justify-center flex-col">
+        <h1 className="text-4xl text-center font-bold mt-12">Release Notes</h1>
+        <div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10">
+          {releaseNotes.map((releaseNote) => (
+            <Link href={`/release-notes/${releaseNote.version}`} className="bg-background relative max-w-64 overflow-hidden rounded-lg border p-5 hover:border-blue-500 transition-all duration-300 hover:-translate-y-1 hover:-translate-x-1">
+              <div className="text-md font-medium mb-5">
+                {releaseNote.version}
+              </div>
+              <div className="text-muted-foreground text-sm font-medium">
+                Check out the new features and improvements for {releaseNote.version}
+              </div>
+              {releaseNoteIsAlpha(releaseNote) && (
+                <div className="absolute top-0 right-0 bg-blue-500 text-white text-xs font-medium p-1 rounded-bl-lg">
+                  Alpha Release
+                </div>
+              )}
+            </Link>
+          ))}
+        </div>
+      </div>
+      <Footer />  
+      <Navigation /> {/* At the bottom of the page */}
+    </main>
+  )
 }

src/components/navigation.tsx

@@ -35,7 +35,7 @@ export function Navigation() {
       <NavigationMenu>
         <NavigationMenuList className="w-full">
           <NavigationMenuItem className="cursor-pointer mr-20">
-            <NavigationMenuLink href="/" asChild>
+            <NavigationMenuLink href="/">
               <Logo withText />
             </NavigationMenuLink>
           </NavigationMenuItem>

src/components/release-note.tsx

@@ -0,0 +1,72 @@
+import { ReleaseNote } from "@/lib/release-notes";
+import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
+import { CheckCheckIcon, StarIcon } from "lucide-react";
+import { Button } from "./ui/button";
+
+export default function ReleaseNote({ data }: { data: ReleaseNote }) {
+  return (
+    <div className="flex flex-col mt-52 mb-24">
+      <div className="mx-auto w-1/3">
+        <h1 className="text-4xl font-bold">Release notes for {data.version} 🎉</h1>
+        <p className="text-sm mt-1 font-bold text-muted-foreground">{data.date}</p>
+        {data.extra && (
+          <p className="text-md mt-8">{data.extra}</p>
+        )}
+        {data.breakingChanges && (
+          <>
+            <h2 className="text-2xl font-bold mt-8 flex items-center">
+              <ExclamationTriangleIcon className="w-6 h-6 mr-4" />
+              Breaking changes
+            </h2>
+            <p className="text-md mt-4">The following changes may break existing functionality:</p>
+            <ul className="list-disc list-inside mt-2">
+              {data.breakingChanges?.map((change, index) => (
+                <li key={index} className="mt-1 text-muted-foreground">{change}</li>
+              ))}
+            </ul>
+          </>
+        )}
+        {data.features && (
+          <>
+            <h2 className="text-2xl font-bold mt-8 flex items-center">
+              <StarIcon className="w-6 h-6 mr-4" />
+              Features
+            </h2>
+            <p className="text-md mt-2">The following features have been added:</p>
+            <ul className="list-disc list-inside mt-4">
+              {data.features?.map((feature, index) => (
+                <li key={index} className="text-md mt-1 text-muted-foreground">{feature}</li>
+              ))}
+            </ul>
+          </>
+        )}
+        {data.fixes && (
+          <>
+            <h2 className="text-2xl flex items-center font-bold mt-8">
+              <CheckCheckIcon className="w-6 h-6 mr-4" />
+              Fixes
+            </h2>
+            <p className="text-md mt-2">The following issues have been fixed:</p>
+            <ul className="list-disc list-inside mt-2">
+              {data.fixes?.map((fix, index) => (
+                <li key={index} className="mt-1 text-muted-foreground">
+                  {fix.description}
+                  {fix.issue && (
+                    <a
+                      href={`https://github.com/zen-browser/desktop/issues/${fix.issue}`}
+                      target="_blank"
+                      className="ml-1 text-blue-500"
+                    >
+                      issue #{fix.issue}
+                    </a>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </div>
+      <Button className="mt-12 w-fit mx-auto" onClick={() => window.location.href = '/download'}>Download zen now!</Button>
+    </div>
+  );
+}

src/lib/release-notes.ts

@@ -1,9 +1,14 @@
 
+interface Fix {
+  description: string;
+  issue?: number;
+}
+
 export interface ReleaseNote {
   version: string;
   date: string;
   extra?: string;
-  fixes?: string[];
+  fixes?: Fix[];
   features?: string[];
   breakingChanges?: string[];
 }
@@ -12,13 +17,34 @@ export const releaseNotes: ReleaseNote[] = [
   {
     version: "0.0.0-a.3",
     date: "11/07/2024",
-    extra: "This is a test release.",
+    extra: "This release will be the first release considered as stable. It's still in alpha, but it's the first release that we consider to be stable enough for daily use. You can start using it as your main browser right now if you are reading this!",
     features: [
-      "Added a new feature.",
+      "Stable support for split views.",
+      "Updated firefox to version 128.0",
+      "Vertical tabs are now supported.",
+      "Better profile management system.",
+      "Full support for sidebar web panels.",
+      "Other minor UI additions and improvements.",
+      "Added support for an automatic update system.",
     ],
     fixes: [
-      "Fixed a bug.",
+      {
-    ],
+        description: "Fixed a bug where the browser would crash when opening any extension.",
+        issue: 34,
+      },
+      {
+        description: "Fixed extension icon resolution on the toolbar.",
+        issue: 35,
+      },
+      {
+        description: "Applied a fix for that affected some linux users.",
+        issue: 36,
+      }
+    ]
   },
 ];
 
+export function releaseNoteIsAlpha(note: ReleaseNote) {
+  return note.version.includes("-a.");
+}
+