refactor: consolidate English translations (#6640)

packages/widgets/src/network-controller/network-status/component.tsx

@@ -4,7 +4,7 @@ import { useMemo } from "react";
 import { Badge, Card, Center, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
 import { IntegrationErrorIndicator } from "../../common/integration-error-indicator";
@@ -32,8 +32,9 @@ export default function NetworkControllerNetworkStatusWidget({
       ),
     [results],
   );
-  const t = useScopedI18n("widget.networkControllerStatus");
-  const tCommon = useScopedI18n("common");
+  const t = useI18n("widget.networkControllerStatus");
+  const tWidgetCommon = useI18n("widget.common");
+  const tCommon = useI18n("common");
   const locale = useCurrentIntlLocale();
 
   const countWifiGuests = summaries.reduce((sum, { summary }) => sum + summary.wifi.guests, 0);
@@ -55,7 +56,7 @@ export default function NetworkControllerNetworkStatusWidget({
         {queryIndicators}
         <Center p="sm" style={{ flex: 1 }}>
           <Text c="dimmed" size="sm" ta="center">
-            {summaryQuery.isPending ? tCommon("action.loading") : t("error.integrationsDisconnected")}
+            {summaryQuery.isPending ? tCommon("action.loading") : tWidgetCommon("integrationDisconnected")}
           </Text>
         </Center>
       </Stack>
@@ -77,7 +78,7 @@ export default function NetworkControllerNetworkStatusWidget({
                     </Text>
                     {updatedAt && (
                       <Text size="xs" c="dimmed">
-                        {t("advanced.updatedAt", { date: new Date(updatedAt).toLocaleString(locale) })}
+                        {tWidgetCommon("updatedAt", { date: new Date(updatedAt).toLocaleString(locale) })}
                       </Text>
                     )}
                   </Stack>

packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx

@@ -1,7 +1,7 @@
 import { Group, SimpleGrid, Text } from "@mantine/core";
 import { IconWifi } from "@tabler/icons-react";
 
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import { StatRow } from "./stat-row";
 
@@ -16,7 +16,7 @@ export const WifiVariant = ({
   compact?: boolean;
   horizontal?: boolean;
 }) => {
-  const t = useScopedI18n("widget.networkControllerStatus.card");
+  const t = useI18n("widget.networkControllerStatus.card");
   return (
     <>
       <Group gap="xs" wrap="nowrap" mb={compact ? "xs" : "md"}>

packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx

@@ -1,7 +1,7 @@
 import { Group, SimpleGrid, Text } from "@mantine/core";
 import { IconNetwork } from "@tabler/icons-react";
 
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import { StatRow } from "./stat-row";
 
@@ -16,7 +16,7 @@ export const WiredVariant = ({
   compact?: boolean;
   horizontal?: boolean;
 }) => {
-  const t = useScopedI18n("widget.networkControllerStatus.card");
+  const t = useI18n("widget.networkControllerStatus.card");
   return (
     <>
       <Group gap="xs" wrap="nowrap" mb={compact ? "xs" : "md"}>

packages/widgets/src/network-controller/summary/component.tsx

@@ -8,7 +8,7 @@ import objectSupport from "dayjs/plugin/objectSupport";
 import relativeTime from "dayjs/plugin/relativeTime";
 
 import { clientApi } from "@homarr/api/client";
-import type { TranslationFunction } from "@homarr/translation";
+import type { ScopedTranslationFunction } from "@homarr/translation";
 import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
@@ -39,12 +39,15 @@ export default function NetworkControllerSummaryWidget({
   );
   const { isPending } = summaryQuery;
 
-  const t = useI18n();
+  const t = useI18n("widget.networkControllerSummary");
+  const tDns = useI18n("widget.dnsHoleSummary");
+  const tCommon = useI18n("common");
+  const tWidgetCommon = useI18n("widget.common");
   const locale = useCurrentIntlLocale();
   const statusLabels = {
-    enabled: t("widget.dnsHoleSummary.status.enabled"),
-    disabled: t("widget.dnsHoleSummary.status.disabled"),
-    unknown: t("widget.dnsHoleSummary.status.unknown"),
+    enabled: tDns("status.enabled"),
+    disabled: tDns("status.disabled"),
+    unknown: tDns("status.unknown"),
   };
 
   const isDense = height < 160;
@@ -54,7 +57,7 @@ export default function NetworkControllerSummaryWidget({
   const queryIndicators = (
     <Group gap={0} justify="flex-end">
       <IntegrationErrorIndicator results={results} />
-      <WidgetQueryErrorIndicator error={summaryQuery.error} label={t("widget.networkControllerSummary.name")} />
+      <WidgetQueryErrorIndicator error={summaryQuery.error} label={t("name")} />
     </Group>
   );
 
@@ -64,9 +67,7 @@ export default function NetworkControllerSummaryWidget({
         {queryIndicators}
         <Center p="sm" style={{ flex: 1 }}>
           <Text c="dimmed" size="sm" ta="center">
-            {isPending
-              ? t("common.action.loading")
-              : t("widget.networkControllerSummary.error.integrationsDisconnected")}
+            {isPending ? tCommon("action.loading") : tWidgetCommon("integrationDisconnected")}
           </Text>
         </Center>
       </Stack>
@@ -95,7 +96,7 @@ export default function NetworkControllerSummaryWidget({
                   </Stack>
                   <Stack gap={0} align="flex-end" style={{ flexShrink: 0 }}>
                     <Text size="10px" c="dimmed">
-                      {t("widget.networkControllerSummary.advanced.updated")}
+                      {t("advanced.updated")}
                     </Text>
                     <Text size="xs" c="dimmed" ta="right">
                       {new Date(updatedAt).toLocaleString(locale)}
@@ -174,7 +175,7 @@ export default function NetworkControllerSummaryWidget({
                     />
                   }
                 >
-                  {t("widget.networkControllerSummary.card.wan")}
+                  {t("card.wan")}
                 </List.Item>
                 <List.Item
                   icon={
@@ -186,7 +187,7 @@ export default function NetworkControllerSummaryWidget({
                   }
                 >
                   <Text>
-                    {t("widget.networkControllerSummary.card.web")}
+                    {t("card.web")}
                     <Text c="dimmed" size="sm" ms="xs" span>
                       {summary.www.latency}ms{showDetails ? ` · ${summary.www.ping}ms` : ""}
                     </Text>
@@ -201,7 +202,7 @@ export default function NetworkControllerSummaryWidget({
                     />
                   }
                 >
-                  {t("widget.networkControllerSummary.card.wifi")}
+                  {t("card.wifi")}
                   {showDetails ? ` · ${summary.wifi.users + summary.wifi.guests}` : ""}
                 </List.Item>
                 {showDetails && (
@@ -214,7 +215,7 @@ export default function NetworkControllerSummaryWidget({
                       />
                     }
                   >
-                    {t("widget.networkControllerSummary.card.lan")} · {summary.lan.users + summary.lan.guests}
+                    {t("card.lan")} · {summary.lan.users + summary.lan.guests}
                   </List.Item>
                 )}
                 <List.Item
@@ -227,9 +228,9 @@ export default function NetworkControllerSummaryWidget({
                   }
                 >
                   <Text>
-                    {t("widget.networkControllerSummary.card.vpn.label")}
+                    {t("card.vpn.label")}
                     <Text c="dimmed" size="sm" ms="xs" span>
-                      {t("widget.networkControllerSummary.card.vpn.countConnected", { count: summary.vpn.users })}
+                      {t("card.vpn.countConnected", { count: summary.vpn.users })}
                     </Text>
                   </Text>
                 </List.Item>
@@ -242,8 +243,10 @@ export default function NetworkControllerSummaryWidget({
   );
 }
 
-const getMatrixMetricLabel = (key: NetworkControllerMatrixMetricKey, t: TranslationFunction) =>
-  t(`widget.networkControllerSummary.advanced.metric.${key}`);
+const getMatrixMetricLabel = (
+  key: NetworkControllerMatrixMetricKey,
+  t: ScopedTranslationFunction<"widget.networkControllerSummary">,
+) => t(`advanced.metric.${key}` as never);
 
 const formatMatrixMetric = (key: NetworkControllerMatrixMetricKey, value: number) => {
   if (key === "latency" || key === "ping") return `${value}ms`;
@@ -251,9 +254,12 @@ const formatMatrixMetric = (key: NetworkControllerMatrixMetricKey, value: number
   return String(value);
 };
 
-const getMatrixSectionLabel = (key: NetworkControllerMatrixSectionKey, t: TranslationFunction) => {
-  if (key === "vpn") return t("widget.networkControllerSummary.card.vpn.label");
-  return t(`widget.networkControllerSummary.card.${key}`);
+const getMatrixSectionLabel = (
+  key: NetworkControllerMatrixSectionKey,
+  t: ScopedTranslationFunction<"widget.networkControllerSummary">,
+) => {
+  if (key === "vpn") return t("card.vpn.label");
+  return t(`card.${key}` as never);
 };
 
 const StatusIcon = ({