refactor: consolidate English translations (#6640)

apps/nextjs/src/components/integration/embedded-integration-edit-form.tsx

@@ -20,7 +20,8 @@ export const EmbeddedIntegrationEditForm = ({
   handleRef,
   onSuccess,
 }: EmbeddedIntegrationEditFormProps) => {
-  const t = useI18n();
+  const tItem = useI18n("item.edit.integration");
+  const tCommon = useI18n("common");
   const integrationFormRef = useRef<EditIntegrationFormHandle>(null);
   const {
     data: integration,
@@ -47,7 +48,7 @@ export const EmbeddedIntegrationEditForm = ({
 
   if (isPending) {
     return (
-      <Stack gap="sm" aria-busy="true" aria-label={t("item.edit.integration.loading")}>
+      <Stack gap="sm" aria-busy="true" aria-label={tItem("loading")}>
         <Skeleton height={36} width="60%" />
         <Skeleton height={60} />
         <Skeleton height={120} />
@@ -57,11 +58,11 @@ export const EmbeddedIntegrationEditForm = ({
 
   if (isError || !integration) {
     return (
-      <Alert color="red" title={t("common.error")}>
+      <Alert color="red" title={tCommon("error")}>
         <Stack gap="sm">
-          <Text size="sm">{t("item.edit.integration.loadError")}</Text>
+          <Text size="sm">{tItem("loadError")}</Text>
           <Button variant="light" color="red" onClick={() => void refetch()}>
-            {t("common.action.tryAgain")}
+            {tCommon("action.tryAgain")}
           </Button>
         </Stack>
       </Alert>
@@ -82,7 +83,7 @@ export const EmbeddedIntegrationEditForm = ({
         </Stack>
       </Group>
       <Alert icon={<IconInfoCircle size={16} />} color="blue" variant="light">
-        {t("item.edit.integration.propagationNotice")}
+        {tItem("propagationNotice")}
       </Alert>
       <EditIntegrationForm integration={integration} hideButtons formRef={integrationFormRef} onSuccess={onSuccess} />
     </Stack>

apps/nextjs/src/components/integration/integration-completion-modal.tsx

@@ -9,7 +9,7 @@ import { useSession } from "@homarr/auth/client";
 import { constructBoardPermissions } from "@homarr/auth/shared";
 import { useOptionalBoard } from "@homarr/boards/context";
 import type { IntegrationKind } from "@homarr/definitions";
-import { getIntegrationName, getWidgetKindsForIntegration } from "@homarr/definitions";
+import { getIntegrationName, getWidgetKindsForIntegration, getWidgetName } from "@homarr/definitions";
 import { createModal, modalSizeForm, useModalAction } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
 
@@ -27,6 +27,8 @@ interface IntegrationCompletionModalProps {
 }
 
 export const IntegrationCompletionModal = createModal<IntegrationCompletionModalProps>(({ actions, innerProps }) => {
+  const tIntegration = useI18n("integration");
+  const tCommon = useI18n("common");
   const t = useI18n();
   const board = useOptionalBoard();
   const { data: session } = useSession();
@@ -88,10 +90,10 @@ export const IntegrationCompletionModal = createModal<IntegrationCompletionModal
         </ThemeIcon>
         <Stack gap={2}>
           <Title order={3} size="h4">
-            {t("integration.completion.title", { name: innerProps.result.integration.name })}
+            {tIntegration("completion.title", { name: innerProps.result.integration.name })}
           </Title>
           <Text c="dimmed" size="sm">
-            {t("integration.completion.description")}
+            {tIntegration("completion.description")}
           </Text>
         </Stack>
       </Group>
@@ -107,14 +109,14 @@ export const IntegrationCompletionModal = createModal<IntegrationCompletionModal
         <List.Item>
           <Group gap="xs">
             <IconPlugConnected size={17} />
-            <Text size="sm">{t("integration.completion.connectionReady")}</Text>
+            <Text size="sm">{tIntegration("completion.connectionReady")}</Text>
           </Group>
         </List.Item>
         {innerProps.result.appId && (
           <List.Item>
             <Group gap="xs">
               <IconAppWindow size={17} />
-              <Text size="sm">{t("integration.completion.appReady")}</Text>
+              <Text size="sm">{tIntegration("completion.appReady")}</Text>
             </Group>
           </List.Item>
         )}
@@ -122,7 +124,7 @@ export const IntegrationCompletionModal = createModal<IntegrationCompletionModal
           <Group gap="xs">
             <IconLayoutDashboard size={17} />
             <Text size="sm">
-              {t("integration.completion.compatibleWidgets", { count: String(compatibleWidgets.length) })}
+              {tIntegration("completion.compatibleWidgets", { count: String(compatibleWidgets.length) })}
             </Text>
           </Group>
         </List.Item>
@@ -134,17 +136,17 @@ export const IntegrationCompletionModal = createModal<IntegrationCompletionModal
           <Group justify="space-between" wrap="nowrap">
             <div>
               <Text fw={600} size="sm">
-                {t("integration.completion.recipes.title")}
+                {tIntegration("completion.recipes.title")}
               </Text>
               <Text c="dimmed" size="xs">
-                {t("integration.completion.recipes.description")}
+                {tIntegration("completion.recipes.description")}
               </Text>
             </div>
-            <Tooltip label={t("integration.completion.recipes.dismiss")}>
+            <Tooltip label={tIntegration("completion.recipes.dismiss")}>
               <ActionIcon
                 variant="subtle"
                 color="gray"
-                aria-label={t("integration.completion.recipes.dismiss")}
+                aria-label={tIntegration("completion.recipes.dismiss")}
                 onClick={() => setRecommendationsDismissed(true)}
               >
                 <IconX size={16} />
@@ -155,13 +157,13 @@ export const IntegrationCompletionModal = createModal<IntegrationCompletionModal
             <Group key={recommendation.widgetKind} justify="space-between" wrap="nowrap" gap="sm">
               <Stack gap={0} style={{ minWidth: 0 }}>
                 <Text size="sm" fw={500} truncate>
-                  {t(`widget.${recommendation.widgetKind}.name`)}
+                  {getWidgetName(recommendation.widgetKind, t)}
                 </Text>
                 <Text c="dimmed" size="xs" truncate>
-                  {t(
+                  {tIntegration(
                     recommendation.isNewlyAvailable
-                      ? "integration.completion.recipes.newConnectionReason"
-                      : "integration.completion.recipes.existingConnectionReason",
+                      ? "completion.recipes.newConnectionReason"
+                      : "completion.recipes.existingConnectionReason",
                     {
                       integration: recommendation.isNewlyAvailable
                         ? innerProps.result.integration.name
@@ -171,7 +173,7 @@ export const IntegrationCompletionModal = createModal<IntegrationCompletionModal
                 </Text>
               </Stack>
               <Button variant="light" size="compact-xs" onClick={() => addRecommendedWidget(recommendation.widgetKind)}>
-                {t("integration.completion.recipes.add")}
+                {tCommon("action.add")}
               </Button>
             </Group>
           ))}
@@ -180,10 +182,10 @@ export const IntegrationCompletionModal = createModal<IntegrationCompletionModal
 
       <Group justify="end">
         <Button variant="default" onClick={actions.closeModal}>
-          {t("common.action.close")}
+          {tCommon("action.close")}
         </Button>
         {innerProps.boardId && compatibleWidgets.length > 0 && (
-          <Button onClick={addWidget}>{t("integration.completion.chooseWidget")}</Button>
+          <Button onClick={addWidget}>{tIntegration("completion.chooseWidget")}</Button>
         )}
       </Group>
     </Stack>

apps/nextjs/src/components/integration/integration-select-modal.tsx

@@ -27,7 +27,8 @@ interface IntegrationSelectModalProps {
 }
 
 export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>(({ actions, innerProps }) => {
-  const t = useI18n();
+  const tCommon = useI18n("common");
+  const tIntegration = useI18n("integration");
   const directKind =
     innerProps.initialKind ?? (innerProps.allowedKinds?.length === 1 ? innerProps.allowedKinds[0] : null);
   const isDirectForm = Boolean(directKind);
@@ -72,8 +73,12 @@ export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>((
   };
 
   if (step === "form" && selectedKind) {
-    const HeaderIcon = isDirectForm ? IconX : IconArrowLeft;
-    const headerLabel = isDirectForm ? t("common.action.close") : t("common.action.previous");
+    let HeaderIcon = IconArrowLeft;
+    let headerLabel = tCommon("action.previous");
+    if (isDirectForm) {
+      HeaderIcon = IconX;
+      headerLabel = tCommon("action.close");
+    }
 
     return (
       <ScrollArea.Autosize mah="80vh">
@@ -97,11 +102,11 @@ export const IntegrationSelectModal = createModal<IntegrationSelectModalProps>((
 
   if (isIntegrationDataError) {
     return (
-      <Alert color="red" title={t("common.error")}>
+      <Alert color="red" title={tCommon("error")}>
         <Stack gap="sm">
-          <Text size="sm">{t("integration.grid.loadError")}</Text>
+          <Text size="sm">{tIntegration("grid.loadError")}</Text>
           <Button variant="light" color="red" onClick={() => void refetch()}>
-            {t("common.action.tryAgain")}
+            {tCommon("action.tryAgain")}
           </Button>
         </Stack>
       </Alert>