From 668706a6d9d176e94ada5bcfe59cc4af69234246 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 14 Jun 2025 14:24:59 +0300
Subject: [PATCH] feat(website/download): integrate architecture selector

---
 apps/website/src/lib/download-helper.ts       |  2 +-
 apps/website/src/routes/download/+page.svelte | 25 ++++++++-----------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/apps/website/src/lib/download-helper.ts b/apps/website/src/lib/download-helper.ts
index b695827d9..3e7b958c4 100644
--- a/apps/website/src/lib/download-helper.ts
+++ b/apps/website/src/lib/download-helper.ts
@@ -66,7 +66,7 @@ export const downloadMatrix = {
     }
 };
 
-function getArchitecture(): Architecture {
+export function getArchitecture(): Architecture {
     const userAgent = navigator.userAgent.toLowerCase();
     if (userAgent.includes('arm64') || userAgent.includes('aarch64')) {
         return 'arm64';
diff --git a/apps/website/src/routes/download/+page.svelte b/apps/website/src/routes/download/+page.svelte
index 89e7e7028..9e4d1c25b 100644
--- a/apps/website/src/routes/download/+page.svelte
+++ b/apps/website/src/routes/download/+page.svelte
@@ -1,7 +1,7 @@
 <script>
-    import { downloadMatrix } from "$lib/download-helper";
+    import { downloadMatrix, getArchitecture } from "$lib/download-helper";
 
-    let architecture = 'x64';
+    let architecture = getArchitecture();
 </script>
 
 <section class="mt-20 max-w-6xl mx-auto px-4">
@@ -11,17 +11,14 @@
     <div class="col-span-3 flex justify-center items-center gap-3 mb-6">
         <span class="text-gray-600 font-medium mr-2">Architecture:</span>
         <div class="inline-flex bg-violet-100 rounded-full shadow p-1">
-            <button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition
-                text-violet-100 bg-violet-700 shadow
-                aria-pressed:bg-violet-700 aria-pressed:text-violet-100
-                " aria-pressed="true">
-                x86
-            </button>
-            <button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition
-                text-violet-700 bg-transparent hover:bg-violet-200
-                " aria-pressed="false">
-                ARM
-            </button>
+            {#each ["x64", "arm64"] as arch}            
+                <button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition
+                    text-violet-700 border-violet-700
+                    aria-pressed:bg-violet-700 aria-pressed:text-violet-100
+                    " aria-pressed={architecture === arch} on:click={() => architecture = arch}>
+                    {arch}
+                </button>
+            {/each}
         </div>
     </div>
 
@@ -29,7 +26,7 @@
         {#each Object.values(downloadMatrix.desktop) as platform}
         <div class="bg-white rounded-xl shadow overflow-hidden">
             <div class="p-6">
-                <h3 class="text-xl font-semibold mb-2">{platform.title}</h3>
+                <h3 class="text-xl font-semibold mb-2">{platform.title} ({architecture})</h3>
                 <div class="flex flex-wrap gap-y-2">
                     {#each Object.values(platform.downloads) as download}
                         <a href={download[architecture]} class={