refactor: consolidate English translations (#6640)

packages/widgets/src/system-resources/chart/combined-network-traffic.tsx

@@ -2,7 +2,7 @@ import { Box, Group, Paper, Stack, Text } from "@mantine/core";
 import { IconNetwork } from "@tabler/icons-react";
 
 import { formatByteRate } from "@homarr/common";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import type { LabelDisplayModeOption } from "..";
 import { CommonChart } from "./common-chart";
@@ -20,7 +20,7 @@ export const CombinedNetworkTrafficChart = ({
   labelDisplayMode: LabelDisplayModeOption;
 }) => {
   const chartData = usageOverTime.map((usage, index) => ({ index, up: usage.up, down: usage.down }));
-  const t = useScopedI18n("widget.systemResources.card");
+  const t = useI18n("widget.systemResources.card");
 
   return (
     <CommonChart

packages/widgets/src/system-resources/chart/cpu-chart.tsx

@@ -1,7 +1,7 @@
 import { Paper, Text } from "@mantine/core";
 import { IconCpu } from "@tabler/icons-react";
 
-import { useScopedI18n } from "@homarr/translation/client";
+import { invariantTechnicalLabels } from "@homarr/definitions";
 
 import type { LabelDisplayModeOption } from "..";
 import { CommonChart } from "./common-chart";
@@ -16,14 +16,13 @@ export const SystemResourceCPUChart = ({
   labelDisplayMode: LabelDisplayModeOption;
 }) => {
   const chartData = cpuUsageOverTime.map((usage, index) => ({ index, usage }));
-  const t = useScopedI18n("widget.systemResources.card");
 
   return (
     <CommonChart
       data={chartData}
       dataKey={"index"}
       series={[{ name: "usage", color: "blue.5" }]}
-      title={t("cpu")}
+      title={invariantTechnicalLabels.cpu}
       icon={IconCpu}
       lastValue={
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

packages/widgets/src/system-resources/chart/gpu-chart.tsx

@@ -1,7 +1,7 @@
 import { Paper, Text } from "@mantine/core";
 import { IconDeviceDesktop } from "@tabler/icons-react";
 
-import { useScopedI18n } from "@homarr/translation/client";
+import { invariantTechnicalLabels } from "@homarr/definitions";
 
 import type { LabelDisplayModeOption } from "..";
 import { CommonChart } from "./common-chart";
@@ -16,14 +16,13 @@ export const SystemResourceGPUChart = ({
   labelDisplayMode: LabelDisplayModeOption;
 }) => {
   const chartData = gpuUsageOverTime.map((usage, index) => ({ index, usage }));
-  const t = useScopedI18n("widget.systemResources.card");
 
   return (
     <CommonChart
       data={chartData}
       dataKey={"index"}
       series={[{ name: "usage", color: "grape.5" }]}
-      title={t("gpu")}
+      title={invariantTechnicalLabels.gpu}
       icon={IconDeviceDesktop}
       lastValue={
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

packages/widgets/src/system-resources/chart/memory-chart.tsx

@@ -2,7 +2,7 @@ import { Paper, Text } from "@mantine/core";
 import { IconBrain } from "@tabler/icons-react";
 
 import { formatBytesPair } from "@homarr/common";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import type { LabelDisplayModeOption } from "..";
 import { CommonChart } from "./common-chart";
@@ -19,7 +19,7 @@ export const SystemResourceMemoryChart = ({
   labelDisplayMode: LabelDisplayModeOption;
 }) => {
   const chartData = memoryUsageOverTime.map((usage, index) => ({ index, usage }));
-  const t = useScopedI18n("widget.systemResources.card");
+  const t = useI18n("widget.systemResources.card");
 
   const percentageUsed =
     memoryUsageOverTime.length > 0 && totalCapacityInBytes > 0

packages/widgets/src/system-resources/chart/network-traffic.tsx

@@ -2,7 +2,7 @@ import { Paper, Text } from "@mantine/core";
 import { IconArrowDown, IconArrowUp } from "@tabler/icons-react";
 
 import { formatByteRate } from "@homarr/common";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import type { LabelDisplayModeOption } from "..";
 import { CommonChart } from "./common-chart";
@@ -19,7 +19,7 @@ export const NetworkTrafficChart = ({
   labelDisplayMode: LabelDisplayModeOption;
 }) => {
   const chartData = usageOverTime.map((usage, index) => ({ index, usage }));
-  const t = useScopedI18n("widget.systemResources.card");
+  const t = useI18n("widget.systemResources.card");
 
   const max = Math.max(...usageOverTime);
   const upperBound = max + max * 0.2;

packages/widgets/src/system-resources/component.tsx

@@ -4,7 +4,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Box, Center, Group, Loader, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
@@ -84,7 +84,7 @@ export default function SystemResources({
   height,
   displayMode,
 }: WidgetComponentProps<"systemResources">) {
-  const t = useScopedI18n("widget.systemResources");
+  const t = useI18n("widget.systemResources");
   const healthQuery = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({ integrationIds });
   const results = getUsableWidgetQueryData(healthQuery) ?? [];
   const data = results.filter(

packages/widgets/src/system-resources/index.ts

@@ -1,6 +1,7 @@
 import { IconAlignLeft, IconEyeOff, IconGraphFilled, IconListDetails, IconPhoto } from "@tabler/icons-react";
 
 import { objectEntries } from "@homarr/common";
+import { invariantTechnicalLabels } from "@homarr/definitions";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
@@ -12,6 +13,12 @@ const labelDisplayModeOptions = {
   hidden: IconEyeOff,
 } as const;
 
+const getChartOptionLabel = (key: "cpu" | "memory" | "gpu" | "network", t: (key: never) => string) => {
+  if (key === "cpu") return invariantTechnicalLabels.cpu;
+  if (key === "gpu") return invariantTechnicalLabels.gpu;
+  return t(`widget.systemResources.option.visibleCharts.option.${key}` as never);
+};
+
 export const { definition, componentLoader } = createWidgetDefinition("systemResources", {
   icon: IconGraphFilled,
   supportsAdvancedFocus: true,
@@ -24,7 +31,7 @@ export const { definition, componentLoader } = createWidgetDefinition("systemRes
       visibleCharts: factory.multiSelect({
         options: (["cpu", "memory", "gpu", "network"] as const).map((key) => ({
           value: key,
-          label: (t) => t(`widget.systemResources.option.visibleCharts.option.${key}`),
+          label: (t) => getChartOptionLabel(key, t),
         })),
         defaultValue: ["cpu", "memory", "network"],
         withDescription: true,