refactor: consolidate English translations (#6640)

apps/nextjs/src/components/workshop/workshop-code-viewer.tsx

@@ -4,7 +4,8 @@ import { useId } from "react";
 
 import { ReadOnlyCustomWidgetCode } from "@homarr/custom-widgets/workbench";
 import type { CustomWidgetEditorMessages } from "@homarr/custom-widgets/workbench";
-import { useScopedI18n } from "@homarr/translation/client";
+import { invariantTechnicalLabels } from "@homarr/definitions";
+import { useI18n } from "@homarr/translation/client";
 
 /** Read-only source view of a Workshop submission, used for both widget JSON and Custom CSS. */
 export function WorkshopCodeViewer({
@@ -17,12 +18,13 @@ export function WorkshopCodeViewer({
   height?: string;
 }) {
   const id = useId();
-  const t = useScopedI18n("customWidget.editor");
-  const workshopT = useScopedI18n("workshop");
+  const t = useI18n("customWidget.editor");
+  const tCommon = useI18n("common");
+  const workshopT = useI18n("workshop");
   const messages: CustomWidgetEditorMessages = {
-    languageJsx: t("language.jsx"),
-    languageJson: t("language.json"),
-    undo: t("action.undo"),
+    languageJsx: invariantTechnicalLabels.jsx,
+    languageJson: invariantTechnicalLabels.json,
+    undo: tCommon("action.undo"),
     redo: t("action.redo"),
     components: t("action.components"),
     componentSearch: t("componentReference.search"),
@@ -30,10 +32,10 @@ export function WorkshopCodeViewer({
     componentCount: (count) => t("componentReference.count", { count }),
     insertStarter: t("action.insertStarter"),
     format: t("action.format"),
-    copy: t("action.copy"),
+    copy: tCommon("action.copy"),
     copied: t("action.copied"),
     schema: t("action.schema"),
-    schemaTab: t("reference.schema"),
+    schemaTab: invariantTechnicalLabels.jsonSchema,
     minimalTab: t("reference.minimal"),
     fullTab: t("reference.full"),
     errors: (count) => t("status.errors", { count }),

apps/nextjs/src/components/workshop/workshop-css-import-button.tsx

@@ -7,7 +7,7 @@ import { IconDownload, IconExternalLink, IconSearch } from "@tabler/icons-react"
 
 import { modalSizeSelect, useConfirmModal } from "@homarr/modals";
 import { showErrorNotification } from "@homarr/notifications";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 import { useWorkshopQuery } from "@homarr/workshop/backend";
 import type { WorkshopSubmissionSummary } from "@homarr/workshop/schema";
 import { validateWorkshopContent } from "@homarr/workshop/schema";
@@ -24,7 +24,7 @@ import { WorkshopVoteControl } from "./workshop-vote-control";
  * board settings themselves are saved, so there is nothing to preview twice.
  */
 export function WorkshopCssImportButton({ onImport }: { onImport(css: string): void }) {
-  const t = useScopedI18n("workshop");
+  const t = useI18n("workshop");
   const [opened, controls] = useDisclosure(false);
 
   return (
@@ -45,7 +45,7 @@ export function WorkshopCssImportButton({ onImport }: { onImport(css: string): v
 }
 
 function WorkshopCssPicker({ onImport }: { onImport(css: string): void }) {
-  const t = useScopedI18n("workshop");
+  const t = useI18n("workshop");
   const session = useWorkshopSession();
   const { openConfirmModal } = useConfirmModal();
   const [search, setSearch] = useState("");

apps/nextjs/src/components/workshop/workshop-report-modal.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { Alert, Button, Group, Modal, Select, Stack, Textarea } from "@mantine/core";
 
 import { showSuccessNotification } from "@homarr/notifications";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 import type { WorkshopBackend } from "@homarr/workshop/backend";
 import { useWorkshopReportMutation } from "@homarr/workshop/backend";
 import type { WorkshopReport } from "@homarr/workshop/schema";
@@ -19,7 +19,8 @@ interface WorkshopReportModalProps {
 }
 
 export function WorkshopReportModal({ client, submissionId, opened, onClose }: WorkshopReportModalProps) {
-  const t = useScopedI18n("workshop");
+  const t = useI18n("workshop");
+  const tCommon = useI18n("common");
   const [category, setCategory] = useState<WorkshopReport["category"]>("other");
   const [explanation, setExplanation] = useState("");
   const report = useWorkshopReportMutation(client);
@@ -67,7 +68,7 @@ export function WorkshopReportModal({ client, submissionId, opened, onClose }: W
         {report.error && <Alert color="red">{report.error.message}</Alert>}
         <Group justify="flex-end" gap="sm">
           <Button variant="default" onClick={close}>
-            {t("cancel")}
+            {tCommon("action.cancel")}
           </Button>
           <Button color="red" loading={report.isPending} disabled={explanation.trim().length < 3} onClick={submit}>
             {t("reportSend")}

apps/nextjs/src/components/workshop/workshop-screenshots.tsx

@@ -5,7 +5,7 @@ import { ActionIcon, Box, Group, Image, Modal, Paper, Tooltip, UnstyledButton }
 import { useDisclosure } from "@mantine/hooks";
 import { IconChevronLeft, IconChevronRight, IconZoomIn } from "@tabler/icons-react";
 
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 import type { WorkshopBackend } from "@homarr/workshop/backend";
 
 interface WorkshopScreenshotsProps {
@@ -20,7 +20,7 @@ interface WorkshopScreenshotsProps {
  * click-to-zoom lightbox, so people can actually see what they are installing.
  */
 export function WorkshopScreenshots({ client, submissionId, title, screenshots }: WorkshopScreenshotsProps) {
-  const t = useScopedI18n("workshop");
+  const t = useI18n("workshop");
   const [index, setIndex] = useState(0);
   const [zoomOpened, zoomControls] = useDisclosure(false);
 

apps/nextjs/src/components/workshop/workshop-session.tsx

@@ -5,7 +5,7 @@ import { Button, Group, Text } from "@mantine/core";
 import { IconBrandGithub } from "@tabler/icons-react";
 
 import { showErrorNotification } from "@homarr/notifications";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 import type { WorkshopUser } from "@homarr/workshop/schema";
 
 import { createWorkshopClient } from "./workshop-client";
@@ -15,7 +15,7 @@ import { createWorkshopClient } from "./workshop-client";
  * never to install, so every surface can render this without gating its content.
  */
 export function useWorkshopSession() {
-  const t = useScopedI18n("workshop");
+  const t = useI18n("workshop");
   const client = useMemo(createWorkshopClient, []);
   const [user, setUser] = useState<WorkshopUser | null>(null);
   const [pending, setPending] = useState(false);
@@ -51,7 +51,7 @@ export function useWorkshopSession() {
 export type WorkshopSession = ReturnType<typeof useWorkshopSession>;
 
 export function WorkshopAccountButton({ session }: { session: WorkshopSession }) {
-  const t = useScopedI18n("workshop");
+  const t = useI18n("workshop");
 
   if (!session.user) {
     return (

apps/nextjs/src/components/workshop/workshop-submission-card.tsx

@@ -4,7 +4,7 @@ import type { ReactNode } from "react";
 import { Badge, Box, Card, Group, Image, Stack, Text, Tooltip } from "@mantine/core";
 import { IconAlertTriangle, IconFlag, IconPhoto } from "@tabler/icons-react";
 
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 import type { WorkshopBackend } from "@homarr/workshop/backend";
 import type { WorkshopSubmissionSummary } from "@homarr/workshop/schema";
 
@@ -19,7 +19,7 @@ interface WorkshopSubmissionCardProps {
 }
 
 export function WorkshopSubmissionCard({ client, item, actions }: WorkshopSubmissionCardProps) {
-  const t = useScopedI18n("workshop");
+  const t = useI18n("workshop");
   const screenshot = item.screenshots[0];
 
   return (

apps/nextjs/src/components/workshop/workshop-submission-grid.tsx

@@ -6,7 +6,7 @@ import type { StyleProp } from "@mantine/core";
 import { IconAlertTriangle, IconRefresh } from "@tabler/icons-react";
 import type { UseQueryResult } from "@tanstack/react-query";
 
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 import type { WorkshopBackend, WorkshopPage } from "@homarr/workshop/backend";
 import type { WorkshopSubmissionSummary } from "@homarr/workshop/schema";
 
@@ -33,7 +33,8 @@ export function WorkshopSubmissionGrid({
   cols = { base: 1, sm: 2, lg: 3 },
   renderActions,
 }: WorkshopSubmissionGridProps) {
-  const t = useScopedI18n("workshop");
+  const t = useI18n("workshop");
+  const tCommon = useI18n("common");
 
   if (query.isLoading) {
     return (
@@ -57,7 +58,7 @@ export function WorkshopSubmissionGrid({
             loading={query.isFetching}
             onClick={() => void query.refetch()}
           >
-            {t("retry")}
+            {tCommon("action.tryAgain")}
           </Button>
         </Stack>
       </Alert>

apps/nextjs/src/components/workshop/workshop-vote-control.tsx

@@ -4,7 +4,7 @@ import { ActionIcon, Group, Text, Tooltip } from "@mantine/core";
 import { IconArrowBigDown, IconArrowBigDownFilled, IconArrowBigUp, IconArrowBigUpFilled } from "@tabler/icons-react";
 
 import { showErrorNotification } from "@homarr/notifications";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 import type { WorkshopBackend } from "@homarr/workshop/backend";
 import { useWorkshopUserVotesQuery, useWorkshopVoteMutation } from "@homarr/workshop/backend";
 
@@ -22,7 +22,7 @@ interface WorkshopVoteControlProps {
  * and clicking it again removes the vote.
  */
 export function WorkshopVoteControl({ client, submissionId, score, canVote, size = "md" }: WorkshopVoteControlProps) {
-  const t = useScopedI18n("workshop");
+  const t = useI18n("workshop");
   const vote = useWorkshopVoteMutation(client);
   const userVotes = useWorkshopUserVotesQuery(client);
   const ownVote = userVotes.data?.find((entry) => entry.submission === submissionId)?.value ?? null;