refactor: consolidate English translations (#6640)

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 = ({