refactor: consolidate English translations (#6640)

packages/ui/src/components/beta-badge.tsx

@@ -3,17 +3,17 @@
 import type { BadgeProps } from "@mantine/core";
 import { Badge } from "@mantine/core";
 
-import { useTranslations } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 interface BetaBadgeProps {
   size: BadgeProps["size"];
 }
 
 export const BetaBadge = ({ size }: BetaBadgeProps) => {
-  const t = useTranslations();
+  const t = useI18n("common");
   return (
     <Badge size={size} color="green" variant="outline">
-      {t("common.beta")}
+      {t("beta")}
     </Badge>
   );
 };

packages/ui/src/components/color-scheme-combobox.tsx

@@ -6,7 +6,7 @@ import { IconCheck, IconDeviceDesktop, IconMoon, IconSun } from "@tabler/icons-r
 
 import type { ColorScheme } from "@homarr/definitions";
 import { colorSchemes } from "@homarr/definitions";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 const schemeIcons: Record<ColorScheme, React.ElementType> = {
   auto: IconDeviceDesktop,
@@ -22,7 +22,7 @@ interface ColorSchemeComboboxProps {
 }
 
 export const ColorSchemeCombobox = ({ label, value, onChange, width }: ColorSchemeComboboxProps) => {
-  const tOptions = useScopedI18n("common.colorScheme.options");
+  const tOptions = useI18n("common.colorScheme.options");
   const combobox = useCombobox({ onDropdownClose: () => combobox.resetSelectedOption() });
 
   return (

packages/ui/src/components/password-input/password-requirements-popover.tsx

@@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react";
 import { useState } from "react";
 import { Popover, Progress, Text } from "@mantine/core";
 
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 import { passwordRequirements } from "@homarr/validation/user";
 
 import { PasswordRequirement } from "./password-requirement";
@@ -14,7 +14,7 @@ const strengthColorMap = [
 ] as const;
 
 export const PasswordRequirementsPopover = ({ password, children }: PropsWithChildren<{ password: string }>) => {
-  const tPassword = useScopedI18n("user.field.password");
+  const tPassword = useI18n("user.field.password");
   const requirements = useRequirements();
   const strength = useStrength(password);
   const [popoverOpened, setPopoverOpened] = useState(false);
@@ -46,7 +46,7 @@ export const PasswordRequirementsPopover = ({ password, children }: PropsWithChi
 };
 
 const useRequirements = () => {
-  const t = useScopedI18n("user.field.password.suggestion");
+  const t = useI18n("user.field.password.suggestion");
 
   return passwordRequirements.map(({ check, value }) => ({ check, label: t(value) }));
 };