fix(ui): add language switcher to connections page (#954)

* fix(ui): add language switcher to connections page

* desciption length fix

* Update packages/web/src/pages/Connections/index.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* add new language picker key

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

packages/web/public/i18n/locales/be-BY/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Never heard"
   },
-  "language": {
+  "languagePicker": {
     "label": "Language",
     "changeLanguage": "Change Language"
   },

packages/web/public/i18n/locales/bg-BG/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Никога не е чуван"
   },
-  "language": {
+  "languagePicker": {
     "label": "Език",
     "changeLanguage": "Промяна на езика"
   },

packages/web/public/i18n/locales/cs-CZ/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Never heard"
   },
-  "language": {
+  "languagePicker": {
     "label": "Jazyk",
     "changeLanguage": "Change Language"
   },

packages/web/public/i18n/locales/de-DE/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Nie gehört"
   },
-  "language": {
+  "languagePicker": {
     "label": "Sprache",
     "changeLanguage": "Sprache ändern"
   },

packages/web/public/i18n/locales/en/ui.json

@@ -181,7 +181,7 @@
   "showUnheard": {
     "label": "Unknown last heard"
   },
-  "language": {
+  "languagePicker": {
     "label": "Language",
     "changeLanguage": "Change Language"
   },

packages/web/public/i18n/locales/es-ES/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Never heard"
   },
-  "language": {
+  "languagePicker": {
     "label": "Idioma",
     "changeLanguage": "Change Language"
   },

packages/web/public/i18n/locales/fi-FI/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Ei koskaan kuultu"
   },
-  "language": {
+  "languagePicker": {
     "label": "Kieli",
     "changeLanguage": "Vaihda kieli"
   },

packages/web/public/i18n/locales/fr-FR/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Jamais entendu"
   },
-  "language": {
+  "languagePicker": {
     "label": "Langue",
     "changeLanguage": "Changer la langue"
   },

packages/web/public/i18n/locales/hu-HU/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Never heard"
   },
-  "language": {
+  "languagePicker": {
     "label": "Nyelv",
     "changeLanguage": "Change Language"
   },

packages/web/public/i18n/locales/it-IT/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Never heard"
   },
-  "language": {
+  "languagePicker": {
     "label": "Lingua",
     "changeLanguage": "Cambia Lingua"
   },

packages/web/public/i18n/locales/ja-JP/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Never heard"
   },
-  "language": {
+  "languagePicker": {
     "label": "言語設定",
     "changeLanguage": "Change Language"
   },

packages/web/public/i18n/locales/ko-KR/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "수신된 적 없음"
   },
-  "language": {
+  "languagePicker": {
     "label": "언어",
     "changeLanguage": "언어 선택"
   },

packages/web/public/i18n/locales/nl-NL/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Never heard"
   },
-  "language": {
+  "languagePicker": {
     "label": "Taal",
     "changeLanguage": "Change Language"
   },

packages/web/public/i18n/locales/pl-PL/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Never heard"
   },
-  "language": {
+  "languagePicker": {
     "label": "Język",
     "changeLanguage": "Change Language"
   },

packages/web/public/i18n/locales/pt-BR/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Never heard"
   },
-  "language": {
+  "languagePicker": {
     "label": "Idioma",
     "changeLanguage": "Change Language"
   },

packages/web/public/i18n/locales/pt-PT/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Never heard"
   },
-  "language": {
+  "languagePicker": {
     "label": "Idioma",
     "changeLanguage": "Change Language"
   },

packages/web/public/i18n/locales/sv-SE/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Aldrig hörd"
   },
-  "language": {
+  "languagePicker": {
     "label": "Språk",
     "changeLanguage": "Byt språk"
   },

packages/web/public/i18n/locales/tr-TR/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Never heard"
   },
-  "language": {
+  "languagePicker": {
     "label": "Dil",
     "changeLanguage": "Change Language"
   },

packages/web/public/i18n/locales/uk-UA/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Never heard"
   },
-  "language": {
+  "languagePicker": {
     "label": "Мова",
     "changeLanguage": "Змінити мову"
   },

packages/web/public/i18n/locales/zh-CN/ui.json

@@ -195,7 +195,7 @@
   "showUnheard": {
     "label": "Never heard"
   },
-  "language": {
+  "languagePicker": {
     "label": "语言",
     "changeLanguage": "Change Language"
   },

packages/web/src/components/DeviceInfoPanel.tsx

@@ -135,7 +135,7 @@ export const DeviceInfoPanel = ({
 
     {
       id: "language",
-      label: t("language.changeLanguage"),
+      label: t("languagePickeer.label"),
       icon: Languages,
       render: () => <LanguageSwitcher />,
     },

packages/web/src/components/LanguageSwitcher.tsx

@@ -1,6 +1,7 @@
 import type { LangCode } from "@app/i18n-config.ts";
 import useLang from "@core/hooks/useLang.ts";
 import { cn } from "@core/utils/cn.ts";
+import { t } from "i18next";
 import { Check, Languages } from "lucide-react";
 import { useCallback } from "react";
 import { useTranslation } from "react-i18next";
@@ -56,7 +57,7 @@ export default function LanguageSwitcher({
                 "group-hover:text-gray-800 dark:group-hover:text-gray-100",
             )}
           >
-            {`${i18n.t("language.changeLanguage")}:`}
+            {`${t("languagePicker.label")}:`}
           </Subtle>
           <Subtle
             className={cn(

packages/web/src/pages/Connections/index.tsx

@@ -1,5 +1,6 @@
 import AddConnectionDialog from "@app/components/Dialog/AddConnectionDialog/AddConnectionDialog";
 import { TimeAgo } from "@app/components/generic/TimeAgo";
+import LanguageSwitcher from "@app/components/LanguageSwitcher";
 import { ConnectionStatusBadge } from "@app/components/PageComponents/Connections/ConnectionStatusBadge";
 import type { Connection } from "@app/core/stores/deviceStore/types";
 import { useConnections } from "@app/pages/Connections/useConnections";
@@ -106,16 +107,17 @@ export const Connections = () => {
             <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
               {t("page.title")}
             </h1>
-            <p className="text-slate-500 dark:text-slate-400 mt-1">
+            <p className="lg:w-4/6 md:w-6 text-slate-500 dark:text-slate-400 mt-1">
               {t("page.description")}
             </p>
           </div>
         </div>
-        <div className="flex items-center ml-2 gap-2">
+        <div className="flex flex-col items-end ml-2 gap-2">
           <Button onClick={() => setAddOpen(true)} className="gap-2">
             <RouterIcon className="size-5" />
             {t("button.addConnection")}
           </Button>
+          <LanguageSwitcher />
         </div>
       </header>