feat: Add moment dependency and update release notes page

This commit adds the moment dependency to the project by updating the package-lock.json and package.json files. It also updates the release notes page by modifying the layout and adding a paragraph to thank users for their feedback.

package-lock.json

@@ -31,6 +31,7 @@
         "feed": "^4.2.2",
         "framer-motion": "^11.3.24",
         "lucide-react": "^0.400.0",
+        "moment": "^2.30.1",
         "next": "14.2.4",
         "next-themes": "^0.3.0",
         "react": "^18.3.1",
@@ -14115,6 +14116,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",

package.json

@@ -38,6 +38,7 @@
     "feed": "^4.2.2",
     "framer-motion": "^11.3.24",
     "lucide-react": "^0.400.0",
+    "moment": "^2.30.1",
     "next": "14.2.4",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",

src/app/globals.css

@@ -51,7 +51,7 @@
    }
 
    [data-theme='dark'], .dark {
-      --background: 0 0% 0%;
+      --background: 5 5 5;
       --foreground: 0 0% 98%;
 
       --surface: rgb(23, 23, 23); 

src/app/release-notes/page.tsx

@@ -9,8 +9,11 @@ import Link from "next/link";
 export default function ReleaseNotes() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-start">
-      <div className="min-h-screen py-42 flex justify-center flex-col px-10 lg:px-0 md:w-2/3 lg:w-1/2">
+      <div className="min-h-screen py-42 flex justify-center flex-col px-10 lg:px-0 lg:w-4/5 xl:w-3/5">
-        <h1 className="text-4xl text-center font-bold mt-24">Release Notes</h1>
+        <h1 className="text-4xl font-bold mt-36">Release Notes</h1>
+        <p className="mt-8 text-lg text-muted-foreground">
+          Stay up to date with the latest changes to Zen Browser! Since the <a className="text-blue-500" href="#1.0.0-a.1">first release</a> till <a className="text-blue-500" href={`/release-notes/${releaseNotes[0].version}`}>{releaseNotes[0].version}</a>, we've been working hard to make Zen Browser the best it can be.<br /><br /> Thanks everyone for your feedback! ❤️
+        </p>
         {releaseNotes.map((releaseNote) => (
           <ReleaseNoteElement key={releaseNote.version} data={releaseNote} />
         ))}

src/components/release-note.tsx

@@ -1,16 +1,26 @@
-import { ReleaseNote } from "@/lib/release-notes";
+import { ReleaseNote, releaseNotes } from "@/lib/release-notes";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { CheckCheckIcon, StarIcon } from "lucide-react";
 import StickyBox from "react-sticky-box";
 
+import moment from "moment";
+import { Accordion, AccordionItem } from "@radix-ui/react-accordion";
+import { AccordionContent, AccordionTrigger } from "./ui/accordion";
+import { ny } from "@/lib/utils";
+
 export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
+  const splitDate = data.date.split("/");
   return (
-    <div className="flex border-t relative pt-36 mt-36">
+    <section className={ny("flex flex-col lg:flex-row border-t relative", data.version == releaseNotes[0].version ? "mt-24 pt-24" : "pt-36 mt-36")} id={data.version}>
-      <StickyBox className="mt-1 mx-12 text-muted-foreground text-sm h-fit" offsetTop={120}>
+      <StickyBox className="mb-6 lg:mb-0 mt-1 mr-24 ml-10 text-muted-foreground text-xs min-w-52 h-fit" offsetTop={120}>
-        {data.date}
+        {moment({
+          year: parseInt(splitDate[2]),
+          month: parseInt(splitDate[1]) - 1,
+          day: parseInt(splitDate[0]),
+        }).format('MMMM Do, YYYY')}
       </StickyBox>
-      <div className="px-10 md:px-0">
+      <div className="px-5 md:px-10 md:px-0 md:pr-32">
-        <h1 className="text-4xl font-bold">
+        <h1 className="text-3xl font-bold">
           Release notes for {data.version} 🎉
         </h1>
         <p className="text-md mt-4 text-muted-foreground">
@@ -25,76 +35,87 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
         </p>
         {data.extra && (
           <p
-            className="text-md mt-8"
+            className="text-md text-muted-foreground mt-8"
             dangerouslySetInnerHTML={{
               __html: data.extra.replace(/(\n)/g, "<br />"),
             }}
           ></p>
         )}
+        <Accordion type="single" collapsible className="mt-8">
           {data.breakingChanges && (
-          <>
+            <AccordionItem value="breaking-changes" title="Breaking Changes">
-            <h2 className="text-2xl font-bold mt-8 flex items-center">
+              <AccordionTrigger>
-              <ExclamationTriangleIcon className="w-6 h-6 mr-4" />
+                <div className="flex items-center">
-              Breaking changes
+                  <ExclamationTriangleIcon className="text-red-500 mr-2 mt-1 size-5 opacity-50" />
-            </h2>
+                  <span className="ml-2">Breaking Changes</span>
-            <p className="text-md mt-4">
+                </div>
-              The following changes may break existing functionality:
+              </AccordionTrigger>
-            </p>
+              <AccordionContent>
-            <ul className="list-disc list-inside mt-2">
+                <ul className="ml-6" style={{ listStyleType: "initial" }}>
-              {data.breakingChanges?.map((change, index) => (
+                  {data.breakingChanges.map((change) => (
-                <li key={index} className="mt-1 text-muted-foreground">
+                    <li key={change} className="mt-4 text-md text-muted-foreground">
+                      <span className="ml-1">
                         {change}
+                      </span>
                     </li>
                   ))}
                 </ul>
-          </>
+              </AccordionContent>
-        )}
+            </AccordionItem>
-        {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 && (
-          <>
+            <AccordionItem value="fixes" title="Fixes">
-            <h2 className="text-2xl flex items-center font-bold mt-8">
+              <AccordionTrigger>
-              <CheckCheckIcon className="w-6 h-6 mr-4" />
+                <div className="flex items-center">
-              Fixes
+                  <CheckCheckIcon className="mr-2 mt-1 size-5 opacity-50" />
-            </h2>
+                  <span className="ml-2">Fixes</span>
-            <p className="text-md mt-2">
+                </div>
-              The following issues have been fixed:
+              </AccordionTrigger>
-            </p>
+              <AccordionContent>
-            <ul className="list-disc list-inside mt-2">
+                <ul className="ml-6" style={{ listStyleType: "initial" }}>
-              {data.fixes?.map((fix, index) => (
+                  {data.fixes.map((fix) => (
-                <li key={index} className="mt-1 text-muted-foreground">
+                    <li key={fix.description} className="mt-4 text-md text-muted-foreground">
+                      <span className="ml-1">
                         {fix.description}
+                      </span>
                       {fix.issue && (
                         <a
                           href={`https://github.com/zen-browser/desktop/issues/${fix.issue}`}
-                      target="_blank"
+                          className="text-blue-500 ml-1 text-underline"
-                      className="ml-1 text-blue-500"
                         >
-                      issue #{fix.issue}
+                          #{fix.issue}
                         </a>
                       )}
                     </li>
                   ))}
                 </ul>
-          </>
+              </AccordionContent>
+            </AccordionItem>
           )}
+          {data.features && (
+            <AccordionItem value="features" title="Features">
+              <AccordionTrigger>
+                <div className="flex items-center">
+                  <StarIcon className="text-yellow-700 mr-2 mt-1 size-5 opacity-50" />
+                  <span className="ml-2">Features</span>
                 </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                <ul className="ml-6" style={{ listStyleType: "initial" }}>
+                  {data.features.map((feature) => (
+                    <li key={feature} className="mt-4 text-md text-muted-foreground">
+                      <span className="ml-1">
+                        {feature}
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </AccordionContent>
+            </AccordionItem>
+          )}
+        </Accordion>
       </div>
+    </section>
   );
 }