refactor: consolidate English translations (#6640)

apps/nextjs/src/components/onboarding/board-tour.tsx

@@ -7,7 +7,7 @@ import type { OnboardingTourStep } from "@gfazioli/mantine-onboarding-tour";
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { createDocumentationLink } from "@homarr/definitions";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import { useBoardPermissions } from "~/components/board/permissions/client";
 import { TourTargetsProvider } from "~/components/layout/header/tour-target";
@@ -15,7 +15,7 @@ import { TourShell } from "./tour-shell";
 import { TourStepContent } from "./tour-step-content";
 
 export const BoardTourProvider = ({ children }: PropsWithChildren) => {
-  const t = useScopedI18n("onboardingTour.board");
+  const t = useI18n("onboardingTour.board");
   const board = useRequiredBoard();
   const { hasChangeAccess } = useBoardPermissions(board);
   const [started, setStarted] = useState(true);

apps/nextjs/src/components/onboarding/manage-tour.tsx

@@ -15,7 +15,7 @@ import {
 
 import { clientApi } from "@homarr/api/client";
 import { createDocumentationLink } from "@homarr/definitions";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import { TourTargetsProvider } from "~/components/layout/header/tour-target";
 import { TourShell } from "./tour-shell";
@@ -46,7 +46,7 @@ const usersStepFocusRevealProps: OnboardingTourFocusRevealProps = {
 };
 
 export const ManageTourProvider = ({ children, isAdmin }: ManageTourProviderProps) => {
-  const t = useScopedI18n("onboardingTour.manage");
+  const t = useI18n("onboardingTour.manage");
   const { mutate: completeTour } = clientApi.user.completeTour.useMutation();
   const isMobile = useMediaQuery("(max-width: 48em)");
   const pathname = usePathname();

apps/nextjs/src/components/onboarding/tour-shell.tsx

@@ -77,7 +77,8 @@ const TourDoneButton = ({ label, onClick }: TourDoneButtonProps) => {
 };
 
 export const TourShell = ({ steps, started, onEnd, stepRoutes, position, children }: TourShellProps) => {
-  const t = useI18n();
+  const tCommon = useI18n("common.action");
+  const tTour = useI18n("onboardingTour");
   const router = useRouter();
   const forwardActionRef = useRef<(() => void) | null>(null);
 
@@ -154,11 +155,11 @@ export const TourShell = ({ steps, started, onEnd, stepRoutes, position, childre
         const action = bindForwardAction(controller, () => {
           navigateAndAdvance(controller.currentStep?.id, nextStep?.id, () => controller.nextStep());
         });
-        return <TourForwardButton label={t("onboardingTour.next")} onClick={action} />;
+        return <TourForwardButton label={tCommon("next")} onClick={action} />;
       }}
       endStepNavigation={(controller) => {
         const action = bindForwardAction(controller, () => controller.endTour());
-        return <TourDoneButton label={t("onboardingTour.done")} onClick={action} />;
+        return <TourDoneButton label={tTour("done")} onClick={action} />;
       }}
       prevStepNavigation={(controller) => (
         <Button
@@ -169,12 +170,12 @@ export const TourShell = ({ steps, started, onEnd, stepRoutes, position, childre
             navigateAndAdvance(controller.currentStep?.id, prevStep?.id, () => controller.prevStep());
           }}
         >
-          {t("onboardingTour.prev")}
+          {tTour("prev")}
         </Button>
       )}
       skipNavigation={(controller) => (
         <Button size="sm" variant="subtle" color="gray" onClick={() => controller.skipTour()}>
-          {t("onboardingTour.skip")}
+          {tTour("skip")}
         </Button>
       )}
       withPrevButton

apps/nextjs/src/components/onboarding/tour-step-content.tsx

@@ -13,7 +13,7 @@ interface TourStepContentProps {
 }
 
 export const TourStepContent = ({ description, documentationHref, icon }: TourStepContentProps) => {
-  const t = useI18n();
+  const t = useI18n("onboardingTour");
 
   return (
     <Stack gap="sm">
@@ -31,7 +31,7 @@ export const TourStepContent = ({ description, documentationHref, icon }: TourSt
       <Anchor href={documentationHref} target="_blank" size="xs" fw={500}>
         <Group gap={4} wrap="nowrap">
           <IconExternalLink size={14} />
-          {t("onboardingTour.learnMore")}
+          {t("learnMore")}
         </Group>
       </Anchor>
     </Stack>