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/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>