attempt to use arm as default for mac

apps/site/hooks/react-client/__tests__/useDetectOS.test.mjs

@@ -71,8 +71,8 @@ describe('useDetectOS', () => {
     await waitFor(() => {
       assert.deepEqual(result.current, {
         os: 'MAC',
-        bitness: '32',
-        architecture: 'x86',
+        bitness: '64',
+        architecture: 'arm',
       });
     });
   });

apps/site/hooks/react-client/useDetectOS.ts

@@ -7,7 +7,7 @@ import type {
   Bitness,
   OperatingSystem,
 } from '#site/types/userAgent';
-import { getHighEntropyValues, detectOS } from '#site/util/userAgent';
+import { detectOS, getHighEntropyValues } from '#site/util/userAgent';
 
 type UserOSState = {
   os: OperatingSystem | 'LOADING';
@@ -28,10 +28,12 @@ const useDetectOS = () => {
       navigator.userAgent
     );
 
+    const os = detectOS();
+
     // We immediately set the OS to LOADING, and then we update it with the detected OS.
     // This is due to that initial render set within the state will indicate a mismatch from
     // the server-side rendering versus what the initial state is from the client-side
-    setUserOSState(current => ({ ...current, os: detectOS() }));
+    setUserOSState(current => ({ ...current, os }));
 
     // We attempt to get the high entropy values from the Browser and set the User OS State
     // based from the values we get from the Browser, if it fails we fallback to the User Agent
@@ -40,8 +42,9 @@ const useDetectOS = () => {
       ({
         // If there is no getHighEntropyValues API on the Browser or it failed to resolve
         // we attempt to fallback to what the User Agent indicates
-        bitness = uaIndicates64 ? '64' : '32',
-        architecture = 'x86',
+        bitness = os === 'MAC' || uaIndicates64 ? '64' : '32',
+        // we assume that MacOS has moved to arm64 by default now
+        architecture = os === 'MAC' ? 'arm' : 'x86',
       }) => {
         setUserOSState(current => ({
           ...current,