From 70afb636ca5431fc8166f06f89d467faa6d3507e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 27 Sep 2025 01:01:06 +0300
Subject: [PATCH] feat(website): architecture switcher for download

---
 apps/website2/src/pages/Download/download.css | 28 +++++++++++++++++++
 apps/website2/src/pages/Download/download.tsx | 20 +++++++++++--
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/apps/website2/src/pages/Download/download.css b/apps/website2/src/pages/Download/download.css
index 1f42bcdc4..87a7cf9ef 100644
--- a/apps/website2/src/pages/Download/download.css
+++ b/apps/website2/src/pages/Download/download.css
@@ -37,4 +37,32 @@
 .download-server {
     width: 75%;
     margin: auto;
+}
+
+.architecture-switch {
+    display: flex;
+    gap: 1em;
+    justify-content: center;
+    align-items: center;
+    margin: 1em 0;
+}
+
+.architecture-switch a {
+    display: inline-block;
+    background: var(--card-background-color);
+    padding: 0.25em 0.5em;
+    text-decoration: none;
+    text-align: center;
+    min-width: 3em;
+    color: inherit;
+}
+
+.architecture-switch .toggle-wrapper {
+    border-radius: calc(infinity * 1px);
+    overflow: hidden;
+}
+
+.architecture-switch a.active {
+    background-color: var(--brand-1);
+    color: inherit;
 }
\ No newline at end of file
diff --git a/apps/website2/src/pages/Download/download.tsx b/apps/website2/src/pages/Download/download.tsx
index 994ff6884..8b5450cce 100644
--- a/apps/website2/src/pages/Download/download.tsx
+++ b/apps/website2/src/pages/Download/download.tsx
@@ -5,19 +5,33 @@ import { App, Architecture, buildDownloadUrl, downloadMatrix, DownloadMatrixEntr
 import "./download.css";
 
 export default function DownloadPage() {
-    const [ arch, setArch ] = useState(getArchitecture());
+    const [ currentArch, setCurrentArch ] = useState(getArchitecture());
 
     return (
         <>
             <Section title="Download the desktop application">
+                <div className="architecture-switch">
+                    <span>Architecture:</span>
+
+                    <div class="toggle-wrapper">
+                        {(["x64", "arm64"] as const).map(arch => (
+                            <a
+                                href="#"
+                                className={`arch ${arch === currentArch ? "active" : ""}`}
+                                onClick={() => setCurrentArch(arch)}
+                            >{arch}</a>
+                        ))}
+                    </div>
+                </div>
+
                 <div className="grid-3-cols download-desktop">
-                    {Object.entries(downloadMatrix.desktop).map(entry => <DownloadCard app="desktop" arch={arch} entry={entry} />)}
+                    {Object.entries(downloadMatrix.desktop).map(entry => <DownloadCard app="desktop" arch={currentArch} entry={entry} />)}
                 </div>
             </Section>
 
             <Section title="Set up a server for access on multiple devices">
                 <div className="grid-2-cols download-server">
-                    {Object.entries(downloadMatrix.server).map(entry => <DownloadCard app="server" arch={arch} entry={entry} />)}
+                    {Object.entries(downloadMatrix.server).map(entry => <DownloadCard app="server" arch={currentArch} entry={entry} />)}
                 </div>
             </Section>
         </>