refactor: consolidate English translations (#6640)

packages/widgets/src/docker/component.tsx

@@ -31,6 +31,7 @@ import type { DataTableColumn, DataTableSortStatus } from "mantine-datatable";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
+import { invariantTechnicalLabels } from "@homarr/definitions";
 import { useSession } from "@homarr/auth/client";
 import { constructBoardPermissions } from "@homarr/auth/shared";
 import { useOptionalBoard } from "@homarr/boards/context";
@@ -40,7 +41,7 @@ import { containerStateColorMap, cpuUsageColor, memoryUsageColor, safeValue } fr
 import { useModalAction } from "@homarr/modals";
 import { AddDockerAppToHomarr, useDockerContainerRemovalConfirmation } from "@homarr/modals-collection";
 import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { getUsableWidgetQueryData } from "../common/query-state";
@@ -92,7 +93,7 @@ const getContainersQueryInput = (endpointIds: string[]) => {
 };
 
 const ContainerStateBadge = ({ state }: { state: ContainerState }) => {
-  const t = useScopedI18n("docker.field.state.option");
+  const t = useI18n("docker.field.state.option");
 
   return (
     <Badge
@@ -108,7 +109,7 @@ const ContainerStateBadge = ({ state }: { state: ContainerState }) => {
 };
 
 const ContainerStateDot = ({ state }: { state: ContainerState }) => {
-  const t = useScopedI18n("docker.field.state.option");
+  const t = useI18n("docker.field.state.option");
   const label = t(state);
 
   return (
@@ -129,14 +130,15 @@ const ContainerStateDot = ({ state }: { state: ContainerState }) => {
 };
 
 const createColumns = (
-  t: ReturnType<typeof useScopedI18n<"docker">>,
+  t: ReturnType<typeof useI18n<"docker">>,
+  tCommon: ReturnType<typeof useI18n<"common">>,
   handlers: ContainerActionHandlers,
   sortingEnabled: boolean,
   inlineState: boolean,
 ): DataTableColumn<DockerContainer>[] => [
   {
     accessor: "name",
-    title: t("field.name.label"),
+    title: tCommon("field.name"),
     width: 180,
     ellipsis: true,
     sortable: sortingEnabled,
@@ -179,7 +181,7 @@ const createColumns = (
   },
   {
     accessor: "cpuUsage",
-    title: t("field.stats.cpu.label"),
+    title: invariantTechnicalLabels.cpu,
     width: 80,
     sortable: sortingEnabled,
     render: (container) => {
@@ -232,7 +234,7 @@ const compareContainers = (
 };
 
 const useContainerAction = (action: ContainerAction) => {
-  const t = useScopedI18n("docker.action");
+  const t = useI18n("docker.action");
   const utils = clientApi.useUtils();
 
   return clientApi.docker[`${action}All`].useMutation({
@@ -264,8 +266,9 @@ export default function DockerWidget({
   itemId,
   setOptions,
 }: WidgetComponentProps<"dockerContainers">) {
-  const t = useScopedI18n("docker");
-  const tWidget = useScopedI18n("widget.dockerContainers");
+  const t = useI18n("docker");
+  const tCommon = useI18n("common");
+  const tWidget = useI18n("widget.dockerContainers");
   const { openModal } = useModalAction(AddDockerAppToHomarr);
   const confirmRemoval = useDockerContainerRemovalConfirmation();
   const board = useOptionalBoard();
@@ -384,10 +387,10 @@ export default function DockerWidget({
     !isAdvanced && width < 340 && options.columns.includes("name") && options.columns.includes("state");
   const columns = useMemo(() => {
     const sortingEnabled = (isAdvanced || options.enableRowSorting) && !isEditMode;
-    return createColumns(t, actionHandlers, sortingEnabled, inlineState).filter(
+    return createColumns(t, tCommon, actionHandlers, sortingEnabled, inlineState).filter(
       ({ accessor }) => columnVisibility[String(accessor) as keyof typeof columnVisibility],
     );
-  }, [actionHandlers, columnVisibility, inlineState, isAdvanced, isEditMode, options.enableRowSorting, t]);
+  }, [actionHandlers, columnVisibility, inlineState, isAdvanced, isEditMode, options.enableRowSorting, t, tCommon]);
   const { effectiveColumns, storeKey } = usePersistedTableLayout({
     columns,
     columnAccessors,
@@ -507,7 +510,7 @@ function ContainerMenuButton({
   container: DockerContainer;
   handlers: ContainerActionHandlers;
 }) {
-  const t = useScopedI18n("docker.action");
+  const t = useI18n("docker.action");
   const [opened, setOpened] = useState(false);
   const close = () => setOpened(false);
 
@@ -548,7 +551,8 @@ function ContainerActionItems({
   handlers: ContainerActionHandlers;
   onClose: () => void;
 }) {
-  const t = useScopedI18n("docker.action");
+  const t = useI18n("docker.action");
+  const tCommon = useI18n("common");
   const stateAction = container.state === "running" ? "stop" : "start";
   const StateIcon = stateAction === "stop" ? IconPlayerStop : IconPlayerPlay;
 
@@ -595,7 +599,7 @@ function ContainerActionItems({
         disabled={!handlers.canUse(container, "remove")}
         onClick={() => invokeAction("remove")}
       >
-        {t("remove.label")}
+        {tCommon("action.remove")}
       </Menu.Item>
       <Menu.Divider />
       <Menu.Item

packages/widgets/src/docker/index.ts

@@ -2,6 +2,7 @@ import { IconBrandDocker, IconServerOff } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
+import { invariantTechnicalLabels } from "@homarr/definitions";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
@@ -16,13 +17,12 @@ const columnsList = [
 const allColumnsList = ["name", "state", "host", "cpuUsage", "memoryUsage", "actions"] as const;
 
 const columnTranslationKeyMap = {
-  name: "docker.field.name.label",
+  name: "common.field.name",
   state: "docker.field.state.label",
   host: "docker.field.host.label",
-  cpuUsage: "docker.field.stats.cpu.label",
   memoryUsage: "docker.field.stats.memory.label",
   actions: "docker.action.title",
-} as const satisfies Record<(typeof allColumnsList)[number], string>;
+} as const satisfies Record<Exclude<(typeof allColumnsList)[number], "cpuUsage">, string>;
 
 export const { definition, componentLoader } = createWidgetDefinition("dockerContainers", {
   icon: IconBrandDocker,
@@ -49,7 +49,10 @@ export const { definition, componentLoader } = createWidgetDefinition("dockerCon
           defaultValue: [...allColumnsList],
           options: allColumnsList.map((value) => ({
             value,
-            label: (t) => t(columnTranslationKeyMap[value]),
+            label: (t) => {
+              if (value === "cpuUsage") return invariantTechnicalLabels.cpu;
+              return t(columnTranslationKeyMap[value]);
+            },
           })),
           searchable: true,
         }),