From 2a7dc0cae3d6f53ce89fce9572500ed1ea5f3eef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?mauro=20=F0=9F=A4=99?=
 <91018726+mauro-balades@users.noreply.github.com>
Date: Sun, 25 Aug 2024 00:51:46 +0200
Subject: [PATCH] Revert "refactor: Improved platform detection, UI
 enhancements, and overall code quality"

---
 src/components/download.tsx | 467 ++++++++++++++++++++----------------
 src/lib/db.ts               |  60 ++---
 src/lib/releases.ts         |  76 +++---
 3 files changed, 312 insertions(+), 291 deletions(-)

diff --git a/src/components/download.tsx b/src/components/download.tsx
index 3a80113..2ab7f6e 100644
--- a/src/components/download.tsx
+++ b/src/components/download.tsx
@@ -1,7 +1,6 @@
 "use client";
-
-import { incrementDownloadCount } from "@/lib/db";
-import { useState, useEffect, useCallback } from "react";
+import { addDownload } from "@/lib/db";
+import { useState, useEffect } from "react";
 import styled, { keyframes } from "styled-components";
 import { ny } from "@/lib/utils";
 import { Checkbox } from "./ui/checkbox";
@@ -9,36 +8,50 @@ import { ChevronLeft } from "lucide-react";
 import { Button } from "./ui/button";
 import Particles from "./ui/particles";
 import confetti from "canvas-confetti";
-import type {
-  Architecture,
-  LinuxDownloadType,
-  Platform,
-  WindowsDownloadType,
-} from "@/lib/releases";
 import { releases, releaseTree } from "@/lib/releases";
 import { InfoCircledIcon } from "@radix-ui/react-icons";
 import Link from "next/link";
-import SparklesText from "./ui/sparkles-text";
-import { useRouter } from "next/navigation";
-
 const BASE_URL =
   "https://github.com/zen-browser/desktop/releases/latest/download";
 
+import SparklesText from "./ui/sparkles-text";
 const field_enter = keyframes`
-  0% { opacity: 0; transform: scale(0.9); filter: blur(10px); }
-  1% { max-height: 100%; }
-  100% { opacity: 1; transform: scale(1); filter: blur(0); }
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+    filter: blur(10px);
+  }
+  1% {
+    max-height: 100%;
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0);
+  }
 `;
 
 const field_exit = keyframes`
-  from { display: flex; opacity: 1; transform: scale(1); filter: blur(0); }
-  99% { opacity: 0; transform: scale(0.9); filter: blur(10px); }
-  100% { display: none; }
+  from {
+    display: flex;
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0);
+  }
+  99% {
+    opacity: 0;
+    transform: scale(0.9);
+    filter: blur(10px);
+  }
+  100% {
+    display: none;
+  }
 `;
 
 const FormField = styled.div<{ enter: boolean; out: boolean }>`
   max-height: 0;
   flex-direction: column;
+  margin-top: 3rem;
   opacity: 0;
   width: 100%;
   animation: 0.2s ease-in-out forwards
@@ -46,59 +59,53 @@ const FormField = styled.div<{ enter: boolean; out: boolean }>`
   animation-delay: ${({ enter }) => (enter ? "0.4s" : "0s")};
 `;
 
-const FieldTitle = ({
-  children,
-  className,
-}: React.PropsWithChildren & React.HTMLAttributes<HTMLHeadElement>) => (
-  <h2 className={ny("text-xl font-medium", className)}>{children}</h2>
-);
+const FieldTitle = styled.div`
+  font-size: 1.35rem;
+  font-weight: 500;
+`;
 
-const FieldDescription = ({
-  children,
-  className,
-}: React.PropsWithChildren & React.HTMLAttributes<HTMLDivElement>) => (
-  <p className={ny("text-base text-[#666] mb-4", className)}>{children}</p>
-);
-
-const platforms = {
-  Windows: { color: "blue", icon: "windows8" },
-  Linux: { color: "yellow", icon: "linux" },
-  MacOS: { color: "purple", icon: "apple" },
-};
+const FieldDescription = styled.div`
+  font-size: 1rem;
+  color: #666;
+  margin-bottom: 1rem;
+`;
 
 export default function DownloadPage() {
-  const router = useRouter();
-
-  const [platform, setPlatform] = useState<Platform | null>(null);
-  const [selectedPlatform, setSelectedPlatform] = useState<Platform | null>(
+  const [platform, setPlatform] = useState<string | null>(null);
+  const [architecture, setArchitecture] = useState<string | null>(null);
+  const [windowsDownloadType, setWindowsDownloadType] = useState<string | null>(
+    null
+  );
+  const [linuxDownloadType, setLinuxDownloadType] = useState<string | null>(
     null
   );
 
-  const [selectedArchitecture, setSelectedArchitecture] =
-    useState<Architecture>("specific");
+  const [selectedPlatform, setSelectedPlatform] = useState("");
+  const [selectedArchitecture, setSelectedArchitecture] = useState("specific");
   const [selectedWindowsDownloadType, setSelectedWindowsDownloadType] =
-    useState<WindowsDownloadType>("installer");
+    useState("installer");
   const [selectedLinuxDownloadType, setSelectedLinuxDownloadType] =
-    useState<LinuxDownloadType>("portable");
+    useState("portable");
 
-  const [hasDownloaded, setHasDownloaded] = useState<boolean>(false);
-  const [flowIndex, setFlowIndex] = useState<number>(0);
+  const [hasDownloaded, setHasDownloaded] = useState(false);
 
-  const detectPlatform = useCallback(() => {
-    if (typeof window === "undefined") return;
-
-    const userAgent = window.navigator.userAgent.toLowerCase();
-
-    if (userAgent.includes("win")) {
+  const [flowIndex, setFlowIndex] = useState(0);
+  useEffect(() => {
+    let userAgent: string = "";
+    if (typeof window !== "undefined") {
+      userAgent = window.navigator.userAgent;
+    }
+    if (userAgent.includes("Win")) {
       setSelectedPlatform("Windows");
-    } else if (userAgent.includes("mac")) {
+    }
+    if (userAgent.includes("Mac")) {
       setSelectedPlatform("MacOS");
-    } else if (userAgent.includes("linux")) {
+    }
+    if (userAgent.includes("Linux")) {
       setSelectedPlatform("Linux");
     }
   }, []);
-
-  const throwConfetti = useCallback(() => {
+  const throwConfetti = () => {
     const end = Date.now() + 3 * 1000; // 3 seconds
     const colors = ["#a786ff", "#fd8bbc", "#eca184", "#f8deb1"];
     const frame = () => {
@@ -123,75 +130,68 @@ export default function DownloadPage() {
       requestAnimationFrame(frame);
     };
     frame();
-  }, []);
+  };
 
-  const getReleaseTarget = useCallback(():
-    | keyof typeof releases
-    | undefined => {
+  const startDownload = () => {
+    let releaseTarget: string;
     if (selectedLinuxDownloadType === "flatpak") {
-      router.push(
+      window.open(
         "https://dl.flathub.org/repo/appstream/io.github.zen_browser.zen.flatpakref"
       );
-      return;
+      releaseTarget = "flatpak";
+    } else {
+      const platform = releaseTree[selectedPlatform.toLowerCase()];
+      let arch: string = selectedArchitecture;
+      if (selectedPlatform === "MacOS") {
+        releaseTarget = platform[arch];
+      } else {
+        releaseTarget =
+          platform[arch][
+            selectedPlatform === "Windows"
+              ? (selectedWindowsDownloadType as string)
+              : (selectedLinuxDownloadType as string)
+          ];
+      }
+      console.log("Downloading: ");
+      console.log("platform: ", selectedPlatform);
+      console.log("compat: ", arch);
+      window.location.replace(`${BASE_URL}/${releases[releaseTarget]}`);
     }
-
-    if (!selectedPlatform) return;
-
-    const platformReleases = releaseTree[selectedPlatform.toLowerCase()];
-
-    if (selectedPlatform === "MacOS")
-      return platformReleases[selectedArchitecture];
-
-    return platformReleases[selectedArchitecture][
-      selectedPlatform === "Windows"
-        ? selectedWindowsDownloadType
-        : selectedLinuxDownloadType
-    ];
-  }, [
-    router,
-    selectedArchitecture,
-    selectedLinuxDownloadType,
-    selectedPlatform,
-    selectedWindowsDownloadType,
-  ]);
-
-  const startDownload = useCallback(() => {
-    const releaseTarget = getReleaseTarget();
-
-    if (!releaseTarget) return;
-
-    router.push(`${BASE_URL}/${releases[releaseTarget]}`);
-
     setHasDownloaded(true);
-    incrementDownloadCount(releaseTarget);
+    addDownload(releaseTarget);
     throwConfetti();
-  }, [getReleaseTarget, router, throwConfetti]);
+  };
 
-  const continueFlow = useCallback(() => {
+  const continueFlow = () => {
     if (flowIndex === 0) setPlatform(selectedPlatform);
+    if (flowIndex === 1) setArchitecture(selectedArchitecture);
     if (flowIndex === 2 || (flowIndex === 1 && platform === "MacOS")) {
+      setWindowsDownloadType(selectedWindowsDownloadType);
+      setLinuxDownloadType(selectedLinuxDownloadType);
       startDownload();
     }
     setFlowIndex(flowIndex + 1);
-  }, [flowIndex, platform, selectedPlatform, startDownload]);
+  };
 
-  const goBackFlow = useCallback(() => {
-    if (flowIndex === 1) setPlatform(null);
-    else if (flowIndex === 3) {
+  const goBackFlow = () => {
+    if (flowIndex === 1) {
+      setPlatform(null);
+    } else if (flowIndex === 2) {
+      setArchitecture(null);
+    } else if (flowIndex === 3) {
+      setWindowsDownloadType(null);
       setSelectedWindowsDownloadType("installer");
+      setLinuxDownloadType(null);
       setSelectedLinuxDownloadType("portable");
     }
     if (flowIndex > 0) setFlowIndex(flowIndex - 1);
-  }, [flowIndex]);
+  };
 
-  const changeToFlatpak = useCallback(() => {
-    if (selectedArchitecture !== "specific") return;
-    setSelectedLinuxDownloadType("flatpak");
-  }, [selectedArchitecture]);
-
-  useEffect(() => {
-    detectPlatform();
-  }, [detectPlatform]);
+  const changeToFlatpak = () => {
+    if (selectedArchitecture === "specific") {
+      setSelectedLinuxDownloadType("flatpak");
+    }
+  };
 
   return (
     <>
@@ -244,52 +244,63 @@ export default function DownloadPage() {
                   <Button
                     className="mt-5"
                     onClick={() =>
-                      router.push(
-                        "https://docs.zen-browser.app/guides/install-macos"
-                      )
+                      (window.location.href =
+                        "https://docs.zen-browser.app/guides/install-macos")
                     }
                   >
-                    Read Installation Instructions
+                    Download Zen for MacOS
                   </Button>
                 </div>
               )}
             </div>
           )) || (
             <>
-              <h1 className="text-6xl font-bold flex flex-col lg:flex-row">
-                Download <SparklesText className="mx-2" text="Zen" />
-              </h1>
+              <h1 className="text-6xl font-bold flex flex-col lg:flex-row">Download <SparklesText className="mx-2" text="Zen" /></h1>
               <p className="text-muted-foreground mt-3">
-                We're thrilled for you to experience Zen Browser. First, let us
-                know which device you're using. This will only take a moment, we
-                promise.
+                We're thrilled for you to experience Zen Browser. First, let us know which device you're using. This will only take a moment, we promise.
               </p>
             </>
           )}
-          <div className="relative w-full pt-12">
-            {/* Platform */}
-            {!platform && (
-              <FormField enter={!platform} out={!platform}>
+          <div className="relative w-full">
+            {platform === null && (
+              <FormField enter={platform === null} out={platform !== null}>
                 <FieldTitle>Platform</FieldTitle>
                 <FieldDescription>
                   Choose the platform you want to download Zen for.
                 </FieldDescription>
-                {Object.entries(platforms).map(([plat, { color, icon }]) => (
-                  <div
-                    key={plat}
-                    onClick={() => setSelectedPlatform(plat as Platform)}
-                    className={ny(
-                      "select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border",
-                      selectedPlatform === plat && `border-${color}-400`
-                    )}
-                  >
-                    <Checkbox checked={selectedPlatform === plat} />
-                    <i
-                      className={`devicon-${icon}-plain ml-3 p-2 border border-${color}-400 rounded-lg`}
-                    ></i>
-                    <div className="ml-2">{plat}</div>
-                  </div>
-                ))}
+                <div
+                  onClick={() => setSelectedPlatform("Windows")}
+                  className={ny(
+                    "select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border",
+                    selectedPlatform === "Windows" ? "border-blue-400" : ""
+                  )}
+                >
+                  <Checkbox checked={selectedPlatform === "Windows"} />
+                  <i className="devicon-windows8-original ml-3 p-2 border border-blue-400 rounded-lg"></i>
+                  <div className="ml-2">Windows</div>
+                </div>
+                <div
+                  onClick={() => setSelectedPlatform("Linux")}
+                  className={ny(
+                    "select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border",
+                    selectedPlatform === "Linux" ? "border-yellow-400" : ""
+                  )}
+                >
+                  <Checkbox checked={selectedPlatform === "Linux"} />
+                  <i className="devicon-linux-plain ml-3 p-2 border border-yellow-400 rounded-lg"></i>
+                  <div className="ml-2">Linux</div>
+                </div>
+                <div
+                  onClick={() => setSelectedPlatform("MacOS")}
+                  className={ny(
+                    "select-none mb-2 px-4 py-3 flex items-center rounded-lg bg-background cursor-pointer border",
+                    selectedPlatform === "MacOS" ? "border-purple-400" : ""
+                  )}
+                >
+                  <Checkbox checked={selectedPlatform === "MacOS"} />
+                  <i className="devicon-apple-original p-2 border border-purple-400 ml-3 rounded-lg"></i>
+                  <div className="ml-2 font-bold">MacOS</div>
+                </div>
               </FormField>
             )}
             {/* Architecture */}
@@ -311,30 +322,38 @@ export default function DownloadPage() {
                     Choose the architecture of your device, either optimized or
                     generic.
                   </FieldDescription>
-                  <div className="flex items-center justify-center gap-2">
+                  <div className="flex items-center justify-center">
                     <div
                       onClick={() => setSelectedArchitecture("specific")}
                       className={ny(
                         "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
-                        selectedArchitecture === "specific" && "border-blue-400"
+                        selectedArchitecture === "specific"
+                          ? "border-blue-400"
+                          : ""
                       )}
                     >
-                      <h1 className="text-5xl my-2">🚀</h1>
-                      <h1 className="text-xl font-semibold my-2">Optimized</h1>
-                      <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
+                      <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                        🚀
+                      </h1>
+                      <h1 className="text-2xl font-semibold my-2">Optimized</h1>
+                      <p className="text-muted-foreground mx-auto text-center">
                         Blazing fast and compatible with modern devices
                       </p>
                     </div>
                     <div
                       onClick={() => setSelectedArchitecture("generic")}
                       className={ny(
-                        "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
-                        selectedArchitecture === "generic" && "border-blue-400"
+                        "select-none w-full h-full mb-2 ml-10 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
+                        selectedArchitecture === "generic"
+                          ? "border-blue-400"
+                          : ""
                       )}
                     >
-                      <h1 className="text-5xl my-2">👴</h1>
-                      <h1 className="text-xl font-semibold my-2">Generic</h1>
-                      <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
+                      <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                        👴
+                      </h1>
+                      <h1 className="text-2xl font-semibold my-2">Generic</h1>
+                      <p className="text-muted-foreground mx-auto text-center">
                         Slow but compatible with older devices.
                       </p>
                     </div>
@@ -350,33 +369,39 @@ export default function DownloadPage() {
                 <FieldDescription>
                   Click the button below to download Zen for MacOS.
                 </FieldDescription>
-                <div className="flex items-center justify-center gap-2">
-                  <button
+                <div className="flex items-center justify-center">
+                  <div
                     onClick={() => setSelectedArchitecture("specific")}
                     className={ny(
                       "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
-                      selectedArchitecture === "specific" && "border-blue-400"
+                      selectedArchitecture === "specific"
+                        ? "border-blue-400"
+                        : ""
                     )}
                   >
-                    <h1 className="text-5xl my-2">🍏</h1>
-                    <h1 className="text-xl font-semibold my-2">aarch64</h1>
-                    <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
-                      64-bit ARM architecture, for Apple's M Series Chips
-                    </p>
-                  </button>
-                  <button
+                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                      🍏
+                    </h1>
+                    <h1 className="text-2xl font-semibold my-2">aarch64</h1>
+                    <p className="text-muted-foreground mx-auto text-center">64-bit ARM architecture, for Apple's M Series Chips</p>
+                  </div>
+                  <div
                     onClick={() => setSelectedArchitecture("generic")}
                     className={ny(
-                      "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
-                      selectedArchitecture === "generic" && "border-blue-400"
+                      "select-none w-full h-full mb-2 ml-10 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
+                      selectedArchitecture === "generic"
+                        ? "border-blue-400"
+                        : ""
                     )}
                   >
-                    <h1 className="text-5xl font-bold my-2">x64</h1>
-                    <h1 className="text-xl font-semibold my-2">Intel</h1>
-                    <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
+                    <h1 className="text-5xl font-bold my-2 opacity-40 dark:opacity-20">
+                      x64
+                    </h1>
+                    <h1 className="text-2xl font-semibold my-2">Intel</h1>
+                    <p className="text-muted-foreground mx-auto text-center">
                       64-bit Intel architecture, for older Macs
                     </p>
-                  </button>
+                  </div>
                 </div>
               </FormField>
             )}
@@ -391,35 +416,41 @@ export default function DownloadPage() {
                 <FieldDescription>
                   Choose the type of download you want for Zen for Windows.
                 </FieldDescription>
-                <div className="flex items-center justify-center gap-2">
-                  <button
+                <div className="flex items-center justify-center">
+                  <div
                     onClick={() => setSelectedWindowsDownloadType("installer")}
                     className={ny(
                       "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
-                      selectedWindowsDownloadType === "installer" &&
-                        "border-blue-400"
+                      selectedWindowsDownloadType === "installer"
+                        ? "border-blue-400"
+                        : ""
                     )}
                   >
-                    <h1 className="text-5xl my-2">🚀</h1>
-                    <h1 className="text-xl font-semibold my-2">Installer</h1>
-                    <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
+                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                      🚀
+                    </h1>
+                    <h1 className="text-2xl font-semibold my-2">Installer</h1>
+                    <p className="text-muted-foreground mx-auto text-center">
                       Install Zen with a setup wizard
                     </p>
-                  </button>
-                  <button
+                  </div>
+                  <div
                     onClick={() => setSelectedWindowsDownloadType("portable")}
                     className={ny(
-                      "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
-                      selectedWindowsDownloadType === "portable" &&
-                        "border-blue-400"
+                      "select-none w-full h-full mb-2 ml-10 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
+                      selectedWindowsDownloadType === "portable"
+                        ? "border-blue-400"
+                        : ""
                     )}
                   >
-                    <h1 className="text-5xl my-2">📦</h1>
-                    <h1 className="text-xl font-semibold my-2">Portable</h1>
-                    <p className="text-muted-foreground mx-auto text-center text-balance text-sm">
+                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                      📦
+                    </h1>
+                    <h1 className="text-2xl font-semibold my-2">Portable</h1>
+                    <p className="text-muted-foreground mx-auto text-center">
                       Download Zen as a ZIP file
                     </p>
-                  </button>
+                  </div>
                 </div>
               </FormField>
             )}
@@ -434,51 +465,61 @@ export default function DownloadPage() {
                 <FieldDescription>
                   Choose the type of download you want for Zen for Linux.
                 </FieldDescription>
-                <div className="flex items-center justify-center gap-2">
-                  <article
+                <div className="flex items-center justify-center">
+                  <div
                     onClick={() => setSelectedLinuxDownloadType("appimage")}
                     className={ny(
-                      "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border space-y-2",
-                      selectedLinuxDownloadType === "appimage" &&
-                        "border-blue-400"
+                      "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
+                      selectedLinuxDownloadType === "appimage"
+                        ? "border-blue-400"
+                        : ""
                     )}
                   >
-                    <h1 className="text-5xl">🚀</h1>
-                    <h1 className="text-xl font-semibold">AppImage</h1>
-                    <p className="text-muted-foreground text-center text-balance text-sm">
+                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                      🚀
+                    </h1>
+                    <h1 className="text-2xl font-semibold my-2">AppImage</h1>
+                    <p className="text-muted-foreground mx-auto text-center">
                       Install Zen with a setup wizard
                     </p>
-                  </article>
-                  <article
+                  </div>
+                  <div
                     onClick={() => setSelectedLinuxDownloadType("portable")}
                     className={ny(
-                      "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border space-y-2",
-                      selectedLinuxDownloadType === "portable" &&
-                        "border-blue-400"
+                      "select-none w-full h-full mb-2 ml-5 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
+                      selectedLinuxDownloadType === "portable"
+                        ? "border-blue-400"
+                        : ""
                     )}
                   >
-                    <h1 className="text-5xl">📦</h1>
-                    <h1 className="text-xl font-semibold">Portable</h1>
-                    <p className="text-muted-foreground text-center text-balance text-sm">
+                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                      📦
+                    </h1>
+                    <h1 className="text-2xl font-semibold my-2">Portable</h1>
+                    <p className="text-muted-foreground mx-auto text-center">
                       Download Zen as a ZIP file
                     </p>
-                  </article>
-                  <article
-                    onClick={changeToFlatpak}
+                  </div>
+                  <div
+                    onClick={() => changeToFlatpak()}
                     className={ny(
-                      "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border space-y-2",
-                      selectedLinuxDownloadType === "flatpak" &&
-                        "border-blue-400",
-                      selectedArchitecture === "generic" &&
-                        "opacity-50 cursor-not-allowed"
+                      "select-none w-full h-full mb-2 ml-5 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
+                      selectedLinuxDownloadType === "flatpak"
+                        ? "border-blue-400"
+                        : "",
+                      selectedArchitecture === "generic"
+                        ? "opacity-50 cursor-not-allowed"
+                        : ""
                     )}
                   >
-                    <h1 className="text-5xl">🧑‍💻</h1>
-                    <h1 className="text-xl font-semibold">Flatpak</h1>
-                    <p className="text-muted-foreground text-center text-balance text-sm">
+                    <h1 className="text-5xl my-2 opacity-40 dark:opacity-20">
+                      🧑‍💻
+                    </h1>
+                    <h1 className="text-2xl font-semibold my-2">Flatpak</h1>
+                    <p className="text-muted-foreground mx-auto text-center">
                       Install Zen from the Flatpak repository.
                     </p>
-                  </article>
+                  </div>
                 </div>
               </FormField>
             )}
@@ -487,13 +528,19 @@ export default function DownloadPage() {
             <div className="mt-5 flex items-center justify-between">
               <Button
                 variant="ghost"
-                onClick={goBackFlow}
-                className={ny("opacity-70", !platform && "invisible")}
+                onClick={() => goBackFlow()}
+                className={ny(
+                  "opacity-70",
+                  platform === null ? "invisible" : ""
+                )}
               >
                 <ChevronLeft className="size-4" />
                 Back
               </Button>
-              <Button onClick={continueFlow} disabled={!selectedPlatform}>
+              <Button
+                onClick={() => continueFlow()}
+                disabled={selectedPlatform === null}
+              >
                 {(flowIndex === 1 && platform === "MacOS") || flowIndex === 2
                   ? "Download 🥳"
                   : "Continue"}
@@ -502,7 +549,7 @@ export default function DownloadPage() {
           )}
           {(platform === "Linux" || platform === "Windows") &&
             flowIndex === 1 && (
-              <div className="mt-5 flex items-center justify-center">
+              <div className="mt-5 flex items-center">
                 <InfoCircledIcon className="size-4 mr-2" />
                 <p className="text-muted-foreground">
                   Confused about which build to choose?{" "}
diff --git a/src/lib/db.ts b/src/lib/db.ts
index b71c737..5551339 100644
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -1,49 +1,31 @@
 "use server";
 
-import { createClient } from "@supabase/supabase-js";
-import { releases } from "./releases";
+import { createClient } from '@supabase/supabase-js'
 
-const supabaseUrl = "https://dmthyedfjzcysoekmyns.supabase.co";
+const supabaseUrl = 'https://dmthyedfjzcysoekmyns.supabase.co'
 const supabaseKey = process.env.SUPABASE_KEY as string;
 const supabase = createClient(supabaseUrl, supabaseKey);
 
-const DOWNLOADS_TABLE = "downloads";
-const PLATFORM_COLUMN = "platform";
-const COUNT_COLUMN = "count";
-
-export async function incrementDownloadCount(platform: keyof typeof releases) {
-  try {
-    //? Check if the download count for the platform exists
+export async function addDownload(platform: string) {
+    // Check if the download count for the platform exists
     const { data, error } = await supabase
-      .from(DOWNLOADS_TABLE)
-      .select(COUNT_COLUMN)
-      .eq(PLATFORM_COLUMN, platform);
-
-    if (error) throw new Error("Error fetching download count");
-
-    if (!data || data.length === 0) {
-      //? If it doesn't exist, create it
-      const { data: insertData, error: insertError } = await supabase
-        .from(DOWNLOADS_TABLE)
-        .insert([{ platform, count: 1 }]);
-
-      if (insertError) throw new Error("Error inserting download count");
-
-      return insertData;
+        .from('downloads')
+        .select('count')
+        .eq('platform', platform)
+    // If it doesn't exist, create it
+    console.log(data)
+    if (data?.length === 0 || data === null) {
+        const {data, error} = await supabase
+            .from('downloads')
+            .insert([{ platform, count: 1 }]);
+        if (error) {
+            console.error(error)
+        }
     } else {
-      //? If it exists, increment the count
-      const newCount = data![0][COUNT_COLUMN] + 1;
-      const { data: updateData, error: updateError } = await supabase
-        .from(DOWNLOADS_TABLE)
-        .update({ count: newCount })
-        .eq(PLATFORM_COLUMN, platform);
-
-      if (updateError) throw new Error("Error updating download count");
-
-      return updateData;
+        // If it exists, increment the count
+        await supabase
+            .from('downloads')
+            .update({ count: data![0].count + 1 })
+            .eq('platform', platform)
     }
-  } catch (err) {
-    console.error("Unexpected error in addDownload:", err);
-    throw err;
-  }
 }
diff --git a/src/lib/releases.ts b/src/lib/releases.ts
index 4989f2a..dea6041 100644
--- a/src/lib/releases.ts
+++ b/src/lib/releases.ts
@@ -1,54 +1,46 @@
-export const releases = {
-  WindowsInstaller: "zen.installer.exe",
-  WindowsInstallerGeneric: "zen.installer-generic.exe",
+export const releases: any = {
+    WindowsInstaller: "zen.installer.exe",
+    WindowsInstallerGeneric: "zen.installer-generic.exe",
+    
+    WindowsZip: "zen.win-specific.zip",
+    WindowsZipGeneric: "zen.win-generic.zip",
 
-  WindowsZip: "zen.win-specific.zip",
-  WindowsZipGeneric: "zen.win-generic.zip",
+    MacOS: "zen.macos-aarch64.dmg",
+    MacOSIntel: "zen.macos-x64.dmg",
 
-  MacOS: "zen.macos-aarch64.dmg",
-  MacOSIntel: "zen.macos-x64.dmg",
+    Linux: "zen.linux-specific.tar.bz2",
+    LinuxGeneric: "zen.linux-generic.tar.bz2",
 
-  Linux: "zen.linux-specific.tar.bz2",
-  LinuxGeneric: "zen.linux-generic.tar.bz2",
-
-  LinuxAppImage: "zen-specific.AppImage",
-  LinuxAppImageGeneric: "zen-generic.AppImage",
-} as const;
+    LinuxAppImage: "zen-specific.AppImage",
+    LinuxAppImageGeneric: "zen-generic.AppImage",
+};
 
 // platform
 //  -> arch
 //      -> file
 export const releaseTree: any = {
-  windows: {
-    specific: {
-      installer: "WindowsInstaller",
-      portable: "WindowsZip",
+    windows: {
+        specific: {
+            installer: "WindowsInstaller",
+            portable: "WindowsZip",
+        },
+        generic: {
+            installer: "WindowsInstallerGeneric",
+            portable: "WindowsZipGeneric",
+        },
     },
-    generic: {
-      installer: "WindowsInstallerGeneric",
-      portable: "WindowsZipGeneric",
+    macos: {
+        generic: "MacOSIntel",
+        specific: "MacOS",
     },
-  },
-  macos: {
-    generic: "MacOSIntel",
-    specific: "MacOS",
-  },
-  linux: {
-    specific: {
-      portable: "Linux",
-      appimage: "LinuxAppImage",
+    linux: {
+        specific: {
+            portable: "Linux",
+            appimage: "LinuxAppImage",
+        },
+        generic: {
+            portable: "LinuxGeneric",
+            appimage: "LinuxAppImageGeneric",
+        },
     },
-    generic: {
-      portable: "LinuxGeneric",
-      appimage: "LinuxAppImageGeneric",
-    },
-  },
 };
-
-type Platform = "Windows" | "MacOS" | "Linux";
-type Architecture = "specific" | "generic";
-
-type WindowsDownloadType = "installer" | "portable";
-type LinuxDownloadType = "portable" | "appimage" | "flatpak";
-
-export type { Platform, Architecture, WindowsDownloadType, LinuxDownloadType };