From 6f344cfabcbe46bbb0d29ffd289965ee10341e24 Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Thu, 20 Nov 2025 16:05:46 +0100
Subject: [PATCH 1/2] chore:  use `en` by default

---
 ui/vite.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/vite.config.ts b/ui/vite.config.ts
index 3935c2df3..28324b556 100644
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -33,7 +33,7 @@ export default defineConfig(({ mode, command }) => {
     outdir: "./localization/paraglide",
     outputStructure: 'message-modules',
     cookieName: 'JETKVM_LOCALE',
-    strategy: ['cookie', 'preferredLanguage', 'baseLocale'],
+    strategy: ['cookie', 'baseLocale'],
   }))
 
   return {

From 94ce4c0c49d3722e0022bbbcfbfe9ebbbed5fd12 Mon Sep 17 00:00:00 2001
From: Adam Shiervani <adam.shiervani@gmail.com>
Date: Thu, 20 Nov 2025 16:11:06 +0100
Subject: [PATCH 2/2] feat: add badgetheme support to SettingsItem component

---
 ui/src/components/SettingsItem.tsx                  | 13 +++++++++++--
 .../routes/devices.$id.settings.general._index.tsx  |  2 ++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/SettingsItem.tsx b/ui/src/components/SettingsItem.tsx
index e2cd9489d..f37c554a5 100644
--- a/ui/src/components/SettingsItem.tsx
+++ b/ui/src/components/SettingsItem.tsx
@@ -5,13 +5,22 @@ interface SettingsItemProps {
   readonly title: string;
   readonly description: string | React.ReactNode;
   readonly badge?: string;
+  readonly badgeTheme?: keyof typeof badgeTheme;
   readonly className?: string;
   readonly loading?: boolean;
   readonly children?: React.ReactNode;
 }
 
+const badgeTheme = {
+  info: "bg-blue-500 text-white",
+  success: "bg-green-500 text-white",
+  warning: "bg-yellow-500 text-white",
+  danger: "bg-red-500 text-white",
+};
+
 export function SettingsItem(props: SettingsItemProps) {
-  const { title, description, badge, children, className, loading } = props;
+  const { title, description, badge, badgeTheme: badgeThemeProp = "danger", children, className, loading } = props;
+  const badgeThemeClass = badgeTheme[badgeThemeProp];
 
   return (
     <label
@@ -25,7 +34,7 @@ export function SettingsItem(props: SettingsItemProps) {
           <div className="flex items-center text-base font-semibold text-black dark:text-white">
             {title}
             {badge && (
-              <span className="ml-2 rounded-full bg-red-500 px-2 py-1 text-[10px] font-medium leading-none text-white dark:border dark:border-red-700 dark:bg-red-800 dark:text-red-50">
+              <span className={cx("ml-2 rounded-full px-2 py-1 text-[10px] font-medium leading-none text-white", badgeThemeClass)}>
                 {badge}
               </span>
             )}
diff --git a/ui/src/routes/devices.$id.settings.general._index.tsx b/ui/src/routes/devices.$id.settings.general._index.tsx
index 55b92c006..f8d845718 100644
--- a/ui/src/routes/devices.$id.settings.general._index.tsx
+++ b/ui/src/routes/devices.$id.settings.general._index.tsx
@@ -84,6 +84,8 @@ export default function SettingsGeneralRoute() {
         <div className="space-y-4 pb-2">
           <div className="space-y-4">
             <SettingsItem
+              badge="Beta"
+              badgeTheme="info"
               title={m.user_interface_language_title()}
               description={m.user_interface_language_description()}
             >