refactor: consolidate English translations (#6640)

packages/widgets/src/modals/embedded-app-edit-form.tsx

@@ -20,7 +20,10 @@ interface EmbeddedAppEditFormProps {
 }
 
 export const EmbeddedAppEditForm = ({ appId, handleRef }: EmbeddedAppEditFormProps) => {
-  const t = useI18n();
+  const tCommon = useI18n("common");
+  const tAppEdit = useI18n("app.page.edit");
+  const tAppSelect = useI18n("app.action.select");
+  const tItemApp = useI18n("item.edit.app");
   const utils = clientApi.useUtils();
   const appFormRef = useRef<AppFormHandle>(null);
   const { data: app, isPending: isLoadingApp, isError, refetch } = clientApi.app.byId.useQuery({ id: appId });
@@ -29,14 +32,14 @@ export const EmbeddedAppEditForm = ({ appId, handleRef }: EmbeddedAppEditFormPro
     onSuccess: async () => {
       await utils.app.invalidate();
       showSuccessNotification({
-        title: t("app.page.edit.notification.success.title"),
-        message: t("app.page.edit.notification.success.message"),
+        title: tCommon("notification.update.success"),
+        message: tAppEdit("notification.success.message"),
       });
     },
     onError: () => {
       showErrorNotification({
-        title: t("app.page.edit.notification.error.title"),
-        message: t("app.page.edit.notification.error.message"),
+        title: tCommon("notification.update.error"),
+        message: tAppEdit("notification.error.message"),
       });
     },
   });
@@ -66,9 +69,9 @@ export const EmbeddedAppEditForm = ({ appId, handleRef }: EmbeddedAppEditFormPro
   if (isError || !app) {
     return (
       <Stack align="center" gap="md" py="xl">
-        <Text c="dimmed">{t("app.action.select.notFound")}</Text>
+        <Text c="dimmed">{tAppSelect("notFound")}</Text>
         <Button variant="light" onClick={() => void refetch()}>
-          {t("common.action.tryAgain")}
+          {tCommon("action.tryAgain")}
         </Button>
       </Stack>
     );
@@ -77,7 +80,7 @@ export const EmbeddedAppEditForm = ({ appId, handleRef }: EmbeddedAppEditFormPro
   return (
     <Stack>
       <Alert icon={<IconInfoCircle size="var(--mantine-font-size-md)" />} color="blue" variant="light">
-        {t("item.edit.app.propagationNotice")}
+        {tItemApp("propagationNotice")}
       </Alert>
       <AppForm
         formRef={appFormRef}

packages/widgets/src/modals/widget-advanced-options-modal.tsx

@@ -14,7 +14,7 @@ interface InnerProps {
 }
 
 export const WidgetAdvancedOptionsModal = createModal<InnerProps>(({ actions, innerProps }) => {
-  const t = useI18n();
+  const t = useI18n("item.edit");
   const theme = useMantineTheme();
   const form = useForm({
     initialValues: innerProps.advancedOptions,
@@ -33,17 +33,14 @@ export const WidgetAdvancedOptionsModal = createModal<InnerProps>(({ actions, in
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack>
         <TextInput
-          label={t("item.edit.field.title.label")}
+          label={t("field.title.label")}
           data-autofocus
           {...form.getInputProps("title")}
           rightSection={<Input.ClearButton onClick={() => form.setFieldValue("title", "")} />}
         />
-        <TextMultiSelect
-          label={t("item.edit.field.customCssClasses.label")}
-          {...form.getInputProps("customCssClasses")}
-        />
+        <TextMultiSelect label={t("field.customCssClasses.label")} {...form.getInputProps("customCssClasses")} />
         <ColorInput
-          label={t("item.edit.field.borderColor.label")}
+          label={t("field.borderColor.label")}
           format="hex"
           swatches={Object.values(theme.colors).map((color) => color[6])}
           rightSection={

packages/widgets/src/modals/widget-edit-modal.tsx

@@ -68,6 +68,8 @@ export const getSelectedWidgetIntegrations = (
 
 export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({ actions, innerProps }) => {
   const t = useI18n();
+  const tItem = useI18n("item.edit");
+  const tCommon = useI18n("common");
   const board = useOptionalBoard();
   const { data: session } = useSession();
   const [advancedOptions, setAdvancedOptions] = useState<BoardItemAdvancedOptions>(innerProps.value.advancedOptions);
@@ -233,7 +235,7 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
     <Stack>
       {canConfigureWidget && innerProps.integrationSupport && (
         <WidgetIntegrationSelect
-          label={t("item.edit.field.integrations.label")}
+          label={tItem("field.integrations.label")}
           data={innerProps.integrationData}
           canSelectMultiple={maxIntegrations > 1}
           withAsterisk={integrationsRequired}
@@ -280,7 +282,7 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
             })
           }
         >
-          {t("item.edit.advancedOptions.label")}
+          {tItem("advancedOptions.label")}
         </Button>
       ) : (
         <ModalFormFooter
@@ -296,7 +298,7 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
                 })
               }
             >
-              {t("item.edit.advancedOptions.label")}
+              {tItem("advancedOptions.label")}
             </Button>
           }
         />
@@ -311,9 +313,9 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
           <Stack>
             <Tabs value={activeTab} onChange={setActiveTab}>
               <Tabs.List grow>
-                <Tabs.Tab value="widget">{t("item.edit.tab.widget")}</Tabs.Tab>
-                {showAppTab && <Tabs.Tab value="app">{t("item.edit.tab.app")}</Tabs.Tab>}
-                {showIntegrationTab && <Tabs.Tab value="integration">{t("item.edit.tab.integration")}</Tabs.Tab>}
+                <Tabs.Tab value="widget">{tItem("tab.widget")}</Tabs.Tab>
+                {showAppTab && <Tabs.Tab value="app">{tItem("tab.app")}</Tabs.Tab>}
+                {showIntegrationTab && <Tabs.Tab value="integration">{tItem("tab.integration")}</Tabs.Tab>}
               </Tabs.List>
               <Tabs.Panel value="widget" pt="md">
                 {widgetFormContent}
@@ -329,7 +331,7 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
                     {displayedIntegrationId === null && (
                       <>
                         <Text size="sm" c="dimmed">
-                          {t("item.edit.integration.description")}
+                          {tItem("integration.description")}
                         </Text>
                         {selectedIntegrations.map((integration) => {
                           const canEdit = editableIntegrationIds.includes(integration.id);
@@ -352,13 +354,13 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
                                   variant="light"
                                   leftSection={<IconPencil size={16} />}
                                   onClick={() => beginEditingIntegration(integration.id)}
-                                  aria-label={t("item.edit.integration.editLabel", { name: integration.name })}
+                                  aria-label={tItem("integration.editLabel", { name: integration.name })}
                                 >
-                                  {t("item.edit.integration.action")}
+                                  {tItem("integration.action")}
                                 </Button>
                               ) : (
                                 <Text size="xs" c="dimmed" ta="end">
-                                  {t("item.edit.integration.fullAccessRequired")}
+                                  {tItem("integration.fullAccessRequired")}
                                 </Text>
                               )}
                             </Group>
@@ -374,7 +376,7 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
                         onClick={() => setActiveIntegrationId(null)}
                         style={{ alignSelf: "start" }}
                       >
-                        {t("common.action.previous")}
+                        {tCommon("action.previous")}
                       </Button>
                     )}
                     {integrationIdsToRender.map((integrationId) => (
@@ -406,10 +408,10 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({
             >
               <Group justify="end">
                 <Button onClick={actions.closeModal} variant="subtle" color="gray">
-                  {t("common.action.cancel")}
+                  {tCommon("action.cancel")}
                 </Button>
                 <Button type="submit" loading={isSubmitting}>
-                  {t("common.action.saveChanges")}
+                  {tCommon("action.saveChanges")}
                 </Button>
               </Group>
             </Box>