feat: add dynamic device display name

hazre · hazre · commit b71320ec1742 · 2026-03-11T22:12:31.000+01:00
diff --git a/.changeset/device_names_are_now_dynamic_showing_your_browser_and_os_eg_sable_on_firefox_for_windows_instead_of_just_sable_web.md b/.changeset/device_names_are_now_dynamic_showing_your_browser_and_os_eg_sable_on_firefox_for_windows_instead_of_just_sable_web.md
@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+# Device names are now dynamic, showing your browser and OS (e.g., "Sable on Firefox for Windows") instead of just "Sable Web".
diff --git a/src/app/pages/auth/login/PasswordLoginForm.tsx b/src/app/pages/auth/login/PasswordLoginForm.tsx
@@ -30,6 +30,7 @@ import { PasswordInput } from '$components/password-input';
 import { getResetPasswordPath } from '$pages/pathUtils';
 import { stopPropagation } from '$utils/keyboard';
 import { FieldError } from '$pages/auth/FiledError';
+import { deviceDisplayName } from '$utils/user-agent';
 import {
   CustomLoginResponse,
   LoginError,
@@ -133,7 +134,7 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
         user: username,
       },
       password,
-      initial_device_display_name: 'Sable Web',
+      initial_device_display_name: deviceDisplayName(),
     });
   };
 
@@ -151,7 +152,7 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
         user: mxIdUsername,
       },
       password,
-      initial_device_display_name: 'Sable Web',
+      initial_device_display_name: deviceDisplayName(),
     });
   };
   const handleEmailLogin = (email: string, password: string) => {
@@ -163,7 +164,7 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
         address: email,
       },
       password,
-      initial_device_display_name: 'Sable Web',
+      initial_device_display_name: deviceDisplayName(),
     });
   };
 
diff --git a/src/app/pages/auth/login/TokenLogin.tsx b/src/app/pages/auth/login/TokenLogin.tsx
@@ -14,6 +14,7 @@ import { useCallback, useEffect } from 'react';
 import { MatrixError } from '$types/matrix-sdk';
 import { useAutoDiscoveryInfo } from '$hooks/useAutoDiscoveryInfo';
 import { AsyncStatus, useAsyncCallback } from '$hooks/useAsyncCallback';
+import { deviceDisplayName } from '$utils/user-agent';
 import { CustomLoginResponse, LoginError, login, useLoginComplete } from './loginUtil';
 
 function LoginTokenError({ message }: { message: string }) {
@@ -57,7 +58,7 @@ export function TokenLogin({ token }: TokenLoginProps) {
     startLogin(baseUrl, {
       type: 'm.login.token',
       token,
-      initial_device_display_name: 'Sable Web',
+      initial_device_display_name: deviceDisplayName(),
     });
   }, [baseUrl, token, startLogin]);
 
diff --git a/src/app/pages/auth/register/PasswordRegisterForm.tsx b/src/app/pages/auth/register/PasswordRegisterForm.tsx
@@ -42,6 +42,7 @@ import { ConfirmPasswordMatch } from '$components/ConfirmPasswordMatch';
 import { UIAFlowOverlay } from '$components/UIAFlowOverlay';
 import { RequestEmailTokenCallback, RequestEmailTokenResponse } from '$hooks/types';
 import { FieldError } from '$pages/auth/FiledError';
+import { deviceDisplayName } from '$utils/user-agent';
 import { RegisterError, RegisterResult, register, useRegisterComplete } from './registerUtil';
 
 export const SUPPORTED_REGISTER_STAGES = [
@@ -109,7 +110,7 @@ function RegisterUIAFlow({
         auth: authDict,
         password,
         username,
-        initial_device_display_name: 'Sable Web',
+        initial_device_display_name: deviceDisplayName(),
       });
     },
     [onRegister, formData]
@@ -250,7 +251,7 @@ export function PasswordRegisterForm({
       auth: {
         session: authData.session,
       },
-      initial_device_display_name: 'Sable Web',
+      initial_device_display_name: deviceDisplayName(),
     });
   };
 
diff --git a/src/app/utils/user-agent.ts b/src/app/utils/user-agent.ts
@@ -14,3 +14,10 @@ const isMac = result.os.name === 'Mac OS';
 export const ua = () => result;
 export const isMacOS = () => isMac;
 export const mobileOrTablet = () => isMobileOrTablet;
+
+export const deviceDisplayName = (): string => {
+  const browser = result.browser.name;
+  const os = result.os.name;
+  if (!browser || !os) return 'Sable Web';
+  return `Sable on ${browser} for ${os}`;
+};

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +default: minor
 +---
++
 +# Device names are now dynamic, showing your browser and OS (e.g., "Sable on Firefox for Windows") instead of just "Sable Web".