feat(website): improve ARM detection

apps/website/.gitignore

@@ -24,5 +24,5 @@ dist-ssr
 *.sw?
 
 *.d.ts
-!types-assets.d.ts
+!types.d.ts
 *.map

apps/website/package.json

@@ -17,6 +17,7 @@
 		"eslint": "^9.36.0",
 		"eslint-config-preact": "^2.0.0",
 		"typescript": "^5.9.2",
+		"user-agent-data-types": "0.4.2",
 		"vite": "^7.0.4"
 	},
 	"eslintConfig": {

apps/website/src/components/DownloadButton.tsx

@@ -11,7 +11,9 @@ interface DownloadButtonProps {
 
 export default function DownloadButton({ big }: DownloadButtonProps) {
     const [ recommendedDownload, setRecommendedDownload ] = useState<RecommendedDownload | null>();
-    useEffect(() => setRecommendedDownload(getRecommendedDownload()), []);
+    useEffect(() => {
+        getRecommendedDownload()?.then(setRecommendedDownload);
+    }, []);
 
     return (recommendedDownload &&
         <>

apps/website/src/download-helper.ts

@@ -188,9 +188,14 @@ export function buildDownloadUrl(app: App, platform: Platform, format: string, a
     }
 }
 
-export function getArchitecture(): Architecture | null {
+export async function getArchitecture(): Promise<Architecture | null> {
     if (typeof window === "undefined") return null;
 
+    if (navigator.userAgentData) {
+        const { architecture } = await navigator.userAgentData.getHighEntropyValues(["architecture"]);
+        return architecture?.startsWith("arm") ? "arm64" : "x64";
+    }
+
     const userAgent = navigator.userAgent.toLowerCase();
     if (userAgent.includes('arm64') || userAgent.includes('aarch64')) {
         return 'arm64';
@@ -212,10 +217,10 @@ export function getPlatform(): Platform | null {
     }
 }
 
-export function getRecommendedDownload(): RecommendedDownload | null {
+export async function getRecommendedDownload(): Promise<RecommendedDownload | null> {
     if (typeof window === "undefined") return null;
 
-    const architecture = getArchitecture();
+    const architecture = await getArchitecture();
     const platform = getPlatform();
     if (!platform || !architecture) return null;
 

apps/website/src/pages/GetStarted/get-started.tsx

@@ -14,7 +14,7 @@ export default function DownloadPage() {
     const [ userPlatform, setUserPlatform ] = useState<Platform>();
 
     useLayoutEffect(() => {
-        setCurrentArch(getArchitecture() ?? "x64");
+        getArchitecture().then((arch) => setCurrentArch(arch ?? "x64"));
         setUserPlatform(getPlatform() ?? "windows");
     }, []);
 

apps/website/src/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="user-agent-data-types" />