refactor: consolidate English translations (#6640)

apps/nextjs/src/components/board/sections/container-section.tsx

@@ -5,7 +5,7 @@ import combineClasses from "clsx";
 
 import { useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import type { ContainerSectionItem } from "~/app/[locale]/boards/_types";
 import { SectionGrid } from "./grid/section-grid";
@@ -25,8 +25,8 @@ interface Props {
 export const BoardContainerSection = ({ section }: Props) => {
   const board = useRequiredBoard();
   const [isEditMode] = useEditMode();
-  const t = useScopedI18n("section.container");
-  const tAll = useI18n();
+  const t = useI18n("section.container");
+  const tSection = useI18n("section");
   const options = section.options;
   const { open: openAllInNewTabs, isLoading: areAppsLoading } = useOpenSectionApps(
     section.id,
@@ -137,7 +137,7 @@ export const BoardContainerSection = ({ section }: Props) => {
             radius="sm"
             loading={areAppsLoading}
             onClick={openAllInNewTabs}
-            aria-label={tAll("section.action.openAllInNewTabsFor", { name: label })}
+            aria-label={tSection("action.openAllInNewTabsFor", { name: label })}
           >
             <IconExternalLink size={16} />
           </ActionIcon>

apps/nextjs/src/components/board/sections/container/container-edit-modal.tsx

@@ -15,7 +15,7 @@ interface ModalProps {
 }
 
 export const ContainerEditModal = createModal<ModalProps>(({ actions, innerProps }) => {
-  const t = useI18n();
+  const tSection = useI18n("section");
   const theme = useMantineTheme();
   const form = useZodForm(containerSectionOptionsSchema.unwrap(), {
     mode: "controlled",
@@ -30,28 +30,28 @@ export const ContainerEditModal = createModal<ModalProps>(({ actions, innerProps
       })}
     >
       <Stack>
-        <TextInput label={t("section.container.option.title.label")} data-autofocus {...form.getInputProps("title")} />
+        <TextInput label={tSection("container.option.title.label")} data-autofocus {...form.getInputProps("title")} />
         <Switch
-          label={t("section.option.showLabel.label")}
-          description={t("section.option.showLabel.description")}
+          label={tSection("option.showLabel.label")}
+          description={tSection("option.showLabel.description")}
           {...form.getInputProps("showLabel", { type: "checkbox" })}
         />
         <Switch
-          label={t("section.option.collapsible.label")}
-          description={t("section.option.collapsible.description")}
+          label={tSection("option.collapsible.label")}
+          description={tSection("option.collapsible.description")}
           {...form.getInputProps("collapsible", { type: "checkbox" })}
         />
         <Switch
-          label={t("section.option.showOpenAll.label")}
-          description={t("section.option.showOpenAll.description")}
+          label={tSection("option.showOpenAll.label")}
+          description={tSection("option.showOpenAll.description")}
           {...form.getInputProps("showOpenAll", { type: "checkbox" })}
         />
         <TextMultiSelect
-          label={t("section.container.option.customCssClasses.label")}
+          label={tSection("container.option.customCssClasses.label")}
           {...form.getInputProps("customCssClasses")}
         />
         <ColorInput
-          label={t("section.container.option.borderColor.label")}
+          label={tSection("container.option.borderColor.label")}
           format="hex"
           swatches={Object.values(theme.colors).map((color) => color[6])}
           rightSection={

apps/nextjs/src/components/board/sections/container/container-menu.tsx

@@ -3,7 +3,7 @@ import { IconArrowsMove, IconLayoutKanban, IconPencil } from "@tabler/icons-reac
 
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { useModalAction } from "@homarr/modals";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import type { ContainerSectionItem } from "~/app/[locale]/boards/_types";
 import { BoardRemoveConfirmationMenuItem } from "../../remove-confirmation-menu-item";
@@ -13,8 +13,8 @@ import { useContainerActions } from "./container-actions";
 import { ContainerEditModal } from "./container-edit-modal";
 
 export const BoardContainerMenu = ({ section }: { section: ContainerSectionItem }) => {
-  const tContainer = useScopedI18n("section.container");
-  const tItem = useScopedI18n("item");
+  const tContainer = useI18n("section.container");
+  const tItem = useI18n("item");
   const { openModal } = useModalAction(ContainerEditModal);
   const openMoveModal = useOpenItemMoveModal();
   const { updateContainer, removeContainer } = useContainerActions();

apps/nextjs/src/components/board/sections/empty-section.tsx

@@ -1,5 +1,5 @@
 import { useEditMode } from "@homarr/boards/edit-mode";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import type { EmptySection } from "~/app/[locale]/boards/_types";
 import { SectionGrid } from "./grid/section-grid";
@@ -16,7 +16,7 @@ export const BoardEmptySection = ({ section, columnCount, requestedRowCount, rai
   const { items, innerSections } = useSectionItems(section.id);
   const totalLength = items.length + innerSections.length;
   const [isEditMode] = useEditMode();
-  const t = useScopedI18n("board.landmark");
+  const t = useI18n("board.landmark");
 
   if (totalLength === 0 && !isEditMode && requestedRowCount === 0 && railPlacement !== "main") return null;
 

apps/nextjs/src/components/board/sections/grid/fixed-grid-item.tsx

@@ -7,6 +7,7 @@ import combineClasses from "clsx";
 
 import { useCurrentLayout } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
+import { getWidgetName } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
 
 import type { ContainerSectionItem, SectionItem } from "~/app/[locale]/boards/_types";
@@ -76,7 +77,7 @@ export const FixedGridItem = ({
   });
   const displayName =
     item.type === "item"
-      ? item.advancedOptions.title?.trim() || t(`widget.${item.kind}.name`)
+      ? item.advancedOptions.title?.trim() || getWidgetName(item.kind, t)
       : item.options.title.trim() || t("section.container.untitled");
   const accessibleLabel = t("item.moveResize.entryLabel", {
     name: displayName,

apps/nextjs/src/components/board/sections/grid/grid-editor.tsx

@@ -36,6 +36,7 @@ import { DragDropProvider, DragOverlay, useDragDropManager, useDraggable, useDro
 import { IconGripHorizontal, IconGripVertical } from "@tabler/icons-react";
 
 import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { getWidgetName } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
 
 import { getLogicalTrackSize, LOGICAL_GRID_PITCH } from "~/components/board/layout";
@@ -743,7 +744,7 @@ export default function GridEditor({
         [...items, ...innerSections].map((entry) => [
           entry.id,
           entry.type === "item"
-            ? entry.advancedOptions.title?.trim() || t(`widget.${entry.kind}.name`)
+            ? entry.advancedOptions.title?.trim() || getWidgetName(entry.kind, t)
             : entry.options.title.trim() || t("section.container.untitled"),
         ]),
       ),

apps/nextjs/src/components/board/sections/use-open-section-apps.ts

@@ -80,7 +80,7 @@ export const useOpenSectionApps = (sectionId: string, enabled: boolean) => {
   const currentLayoutId = useCurrentLayout();
   const settings = useSettings();
   const { openConfirmModal } = useConfirmModal();
-  const t = useI18n();
+  const t = useI18n("section");
   const appDefinition = use(loadWidgetDefinition("app"));
   const appIds = useMemo(() => {
     const items: Item[] = getSectionItemsForLayout(board, sectionId, currentLayoutId);
@@ -115,8 +115,8 @@ export const useOpenSectionApps = (sectionId: string, enabled: boolean) => {
       if (openedWindow) continue;
 
       openConfirmModal({
-        title: t("section.openAllInNewTabs.title"),
-        children: t("section.openAllInNewTabs.text"),
+        title: t("openAllInNewTabs.title"),
+        children: t("openAllInNewTabs.text"),
       });
       break;
     }