@medusajs/dashboard 3.0.0-snapshot-20251216135612 → 3.0.0-snapshot-20260102125810

package/dist/{translations-edit-HUNKY7CO.mjs → translations-edit-6P3KC4MO.mjs}

@@ -1,7 +1,7 @@
 import {
   DataGrid,
   createDataGridHelper
-} from "./chunk-CCQD65EY.mjs";
+} from "./chunk-FKNW5MLZ.mjs";
 import "./chunk-DK4WIVY6.mjs";
 import "./chunk-IUCDCPJU.mjs";
 import {
@@ -23,215 +23,173 @@ import {
   useBatchTranslations,
   useReferenceTranslations,
   useTranslationSettings
-} from "./chunk-GRZSG4EP.mjs";
+} from "./chunk-74WPAWMW.mjs";
 import "./chunk-I4OBEAOJ.mjs";
 import "./chunk-HI6URQ7H.mjs";
 import "./chunk-6CLQKVAU.mjs";
+import "./chunk-ML7BA2NY.mjs";
 import "./chunk-KI7TOXBR.mjs";
-import "./chunk-UJ2TMPV4.mjs";
-import "./chunk-23GTCEOV.mjs";
+import "./chunk-QBIQEVTU.mjs";
 import "./chunk-WAXMT4IY.mjs";
 import "./chunk-DYDGGABK.mjs";
-import "./chunk-LGNTHZ5Y.mjs";
 import "./chunk-CN7JXSGW.mjs";
+import "./chunk-LGNTHZ5Y.mjs";
 import "./chunk-5BQQRHQS.mjs";
-import "./chunk-HTCYX4VD.mjs";
+import "./chunk-G35UUG2P.mjs";
 import "./chunk-5AFMB7XQ.mjs";
-import "./chunk-UWY5ZV66.mjs";
+import "./chunk-VQ73B7ZZ.mjs";
 import "./chunk-A63RZVX6.mjs";
 import "./chunk-HBXV7ENS.mjs";
 import "./chunk-CDORR33H.mjs";
-import "./chunk-4JQR6QNW.mjs";
-import "./chunk-FYWHE3W5.mjs";
-import "./chunk-OSHH5GAS.mjs";
-import "./chunk-2XTBDCGE.mjs";
+import "./chunk-333HK6Y6.mjs";
+import "./chunk-GJN5SXGZ.mjs";
+import "./chunk-Q34TRFIW.mjs";
 import "./chunk-3BF5SC66.mjs";
+import "./chunk-DWH2OQFK.mjs";
 import {
   useStore
 } from "./chunk-VCSSQVPD.mjs";
 import "./chunk-HP2JH45P.mjs";
 import "./chunk-SQDIZZDW.mjs";
-import "./chunk-Z6BFNHEO.mjs";
-import "./chunk-HGRIOEAR.mjs";
+import "./chunk-UCYUWNJL.mjs";
+import "./chunk-7AXHHXCX.mjs";
 import "./chunk-FXYH54JP.mjs";
 import "./chunk-774WSTCC.mjs";
 import "./chunk-NFEK63OE.mjs";
 import "./chunk-QZ7TP4HQ.mjs";
 
 // src/routes/translations/translations-edit/translations-edit.tsx
+import { keepPreviousData } from "@tanstack/react-query";
+import { useEffect as useEffect2 } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
 // src/routes/translations/translations-edit/components/translations-edit-form/translations-edit-form.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Prompt, Select, toast } from "@medusajs/ui";
+import { Button, Prompt, Select, toast, Text } from "@medusajs/ui";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { jsx, jsxs } from "react/jsx-runtime";
-var LocaleTranslationSchema = z.object({
+var EntityTranslationsSchema = z.object({
   id: z.string().nullish(),
-  locale_code: z.string(),
   fields: z.record(z.string().optional())
 });
-var EntityTranslationsSchema = z.object({
-  locales: z.record(LocaleTranslationSchema)
-});
 var TranslationsFormSchema = z.object({
   entities: z.record(EntityTranslationsSchema)
 });
 function isEntityRow(row) {
   return row._type === "entity";
 }
-function initTranslationsFormState(translations, references, availableLocales, translatableFields) {
-  const existingMap = /* @__PURE__ */ new Map();
+function buildLocaleSnapshot(translations, references, localeCode, translatableFields) {
+  const referenceTranslations = /* @__PURE__ */ new Map();
+  for (const t of translations) {
+    if (t.locale_code === localeCode) {
+      referenceTranslations.set(t.reference_id, t);
+    }
+  }
+  const entities = {};
+  for (const ref of references) {
+    const existing = referenceTranslations.get(ref.id);
+    const fields = {};
+    for (const fieldName of translatableFields) {
+      fields[fieldName] = existing?.translations?.[fieldName] ?? "";
+    }
+    entities[ref.id] = {
+      id: existing?.id ?? null,
+      fields
+    };
+  }
+  return { localeCode, entities };
+}
+function extendSnapshot(snapshot, translations, newReferences, translatableFields) {
+  const referenceTranslations = /* @__PURE__ */ new Map();
   for (const t of translations) {
-    existingMap.set(`${t.reference_id}:${t.locale_code}`, t);
+    if (t.locale_code === snapshot.localeCode) {
+      referenceTranslations.set(t.reference_id, t);
+    }
   }
-  const entitiesTranslationState = {};
-  for (const reference of references) {
-    const locales = {};
-    for (const locale of availableLocales) {
-      const key = `${reference.id}:${locale.locale_code}`;
-      const existing = existingMap.get(key);
+  const extendedEntities = { ...snapshot.entities };
+  for (const ref of newReferences) {
+    if (!extendedEntities[ref.id]) {
+      const existing = referenceTranslations.get(ref.id);
       const fields = {};
       for (const fieldName of translatableFields) {
-        const fieldValue = existing?.translations?.[fieldName] ?? "";
-        fields[fieldName] = fieldValue;
+        fields[fieldName] = existing?.translations?.[fieldName] ?? "";
       }
-      locales[locale.locale_code] = {
+      extendedEntities[ref.id] = {
         id: existing?.id ?? null,
-        locale_code: locale.locale_code,
         fields
       };
     }
-    entitiesTranslationState[reference.id] = { locales };
   }
-  return {
-    entities: entitiesTranslationState
-  };
+  return { ...snapshot, entities: extendedEntities };
 }
-function buildTranslationRows(references, translatableFields) {
-  return references.map((reference) => ({
-    _type: "entity",
-    reference_id: reference.id,
-    subRows: translatableFields.map((fieldName) => ({
-      _type: "field",
-      reference_id: reference.id,
-      field_name: fieldName
-    }))
-  }));
+function snapshotToFormValues(snapshot) {
+  return { entities: snapshot.entities };
 }
-function transformToBatchPayload(currentState, initialState, entityType) {
+function computeChanges(currentState, snapshot, entityType, localeCode) {
   const payload = {
     create: [],
     update: [],
     delete: []
   };
   for (const [entityId, entityData] of Object.entries(currentState.entities)) {
-    for (const [localeCode, localeTranslations] of Object.entries(
-      entityData.locales
-    )) {
-      const initial = initialState.entities[entityId]?.locales[localeCode];
-      const hasContent = Object.values(localeTranslations.fields).some(
-        (v) => v !== void 0 && v.trim() !== ""
-      );
-      const hadContent = initial && Object.values(initial.fields).some(
-        (v) => v !== void 0 && v.trim() !== ""
-      );
-      if (!localeTranslations.id && hasContent) {
-        payload.create.push({
-          reference_id: entityId,
-          reference: entityType,
-          locale_code: localeTranslations.locale_code,
-          translations: localeTranslations.fields
-        });
-      } else if (localeTranslations.id && hasContent) {
-        const hasChanged = !initial || JSON.stringify(localeTranslations.fields) !== JSON.stringify(initial.fields);
-        if (hasChanged) {
-          payload.update.push({
-            id: localeTranslations.id,
-            translations: localeTranslations.fields
-          });
-        }
-      } else if (localeTranslations.id && !hasContent && hadContent) {
-        payload.delete.push(localeTranslations.id);
-      }
-    }
-  }
-  return payload;
-}
-function hasLocaleChanges(currentState, initialState, localeCode) {
-  for (const [entityId, entityData] of Object.entries(currentState.entities)) {
-    const currentLocale = entityData.locales[localeCode];
-    const initialLocale = initialState.entities[entityId]?.locales[localeCode];
-    if (!currentLocale || !initialLocale) {
+    const baseline = snapshot.entities[entityId];
+    if (!baseline) {
       continue;
     }
-    for (const [fieldName, fieldValue] of Object.entries(
-      currentLocale.fields
-    )) {
-      const initialValue = initialLocale.fields[fieldName] ?? "";
-      const currentValue = fieldValue ?? "";
-      if (currentValue !== initialValue) {
-        return true;
-      }
-    }
-  }
-  return false;
-}
-function transformSingleLocaleToBatchPayload(currentState, initialState, entityType, localeCode) {
-  const payload = {
-    create: [],
-    update: [],
-    delete: []
-  };
-  for (const [entityId, entityData] of Object.entries(currentState.entities)) {
-    const localeTranslations = entityData.locales[localeCode];
-    if (!localeTranslations) continue;
-    const initial = initialState.entities[entityId]?.locales[localeCode];
-    const hasContent = Object.values(localeTranslations.fields).some(
+    const hasContent = Object.values(entityData.fields).some(
       (v) => v !== void 0 && v.trim() !== ""
     );
-    const hadContent = initial && Object.values(initial.fields).some(
+    const hadContent = Object.values(baseline.fields).some(
       (v) => v !== void 0 && v.trim() !== ""
     );
-    if (!localeTranslations.id && hasContent) {
+    const hasChanged = JSON.stringify(entityData.fields) !== JSON.stringify(baseline.fields);
+    if (!entityData.id && hasContent) {
       payload.create.push({
         reference_id: entityId,
         reference: entityType,
-        locale_code: localeTranslations.locale_code,
-        translations: localeTranslations.fields
+        locale_code: localeCode,
+        translations: entityData.fields
       });
-    } else if (localeTranslations.id && hasContent) {
-      const hasChanged = !initial || JSON.stringify(localeTranslations.fields) !== JSON.stringify(initial.fields);
-      if (hasChanged) {
-        payload.update.push({
-          id: localeTranslations.id,
-          translations: localeTranslations.fields
-        });
-      }
-    } else if (localeTranslations.id && !hasContent && hadContent) {
-      payload.delete.push(localeTranslations.id);
+    } else if (entityData.id && hasContent && hasChanged) {
+      payload.update.push({
+        id: entityData.id,
+        translations: entityData.fields
+      });
+    } else if (entityData.id && !hasContent && hadContent) {
+      payload.delete.push(entityData.id);
     }
   }
-  return payload;
+  const hasChanges = payload.create.length > 0 || payload.update.length > 0 || payload.delete.length > 0;
+  return { hasChanges, payload };
 }
 var columnHelper = createDataGridHelper();
-var FIELD_COLUMN_WIDTH = 150;
+var FIELD_COLUMN_WIDTH = 350;
+function buildTranslationRows(references, translatableFields) {
+  return references.map((reference) => ({
+    _type: "entity",
+    reference_id: reference.id,
+    subRows: translatableFields.map((fieldName) => ({
+      _type: "field",
+      reference_id: reference.id,
+      field_name: fieldName
+    }))
+  }));
+}
 function useTranslationsGridColumns({
   entities,
-  translatableFields,
   availableLocales,
   selectedLocale,
   dynamicColumnWidth
 }) {
   const { t } = useTranslation();
-  const columns = useMemo(() => {
+  return useMemo(() => {
     const selectedLocaleData = availableLocales.find(
       (l) => l.locale_code === selectedLocale
     );
-    const baseColumns = [
+    const columns = [
       columnHelper.column({
         id: "field",
         name: "field",
@@ -242,9 +200,17 @@ function useTranslationsGridColumns({
           if (isEntityRow(row)) {
             return /* @__PURE__ */ jsx(DataGrid.ReadonlyCell, { context });
           }
-          return /* @__PURE__ */ jsx(DataGrid.ReadonlyCell, { context, color: "normal", children: /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center gap-x-2 overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: t(`fields.${row.field_name}`, {
-            defaultValue: row.field_name
-          }) }) }) });
+          return /* @__PURE__ */ jsx(DataGrid.ReadonlyCell, { context, color: "normal", children: /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center gap-x-2 overflow-hidden", children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: "text-ui-fg-subtle truncate",
+              weight: "plus",
+              size: "small",
+              children: t(`fields.${row.field_name}`, {
+                defaultValue: row.field_name
+              })
+            }
+          ) }) });
         },
         disableHiding: true
       }),
@@ -252,58 +218,48 @@ function useTranslationsGridColumns({
         id: "original",
         name: "original",
         size: dynamicColumnWidth,
-        header: t("general.original"),
+        header: () => /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base", weight: "plus", size: "small", children: t("general.original") }),
         disableHiding: true,
         cell: (context) => {
           const row = context.row.original;
           if (isEntityRow(row)) {
             return /* @__PURE__ */ jsx(DataGrid.ReadonlyCell, { context });
           }
-          const entity = entities.find(
-            (entity2) => entity2.id === row.reference_id
-          );
+          const entity = entities.find((e) => e.id === row.reference_id);
           if (!entity) {
             return null;
           }
-          return /* @__PURE__ */ jsx(DataGrid.ReadonlyCell, { context, isMultiLine: true, children: entity[row.field_name] });
+          return /* @__PURE__ */ jsx(DataGrid.ReadonlyCell, { color: "normal", context, isMultiLine: true, children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", weight: "plus", size: "small", children: entity[row.field_name] }) });
         }
       })
     ];
     if (selectedLocaleData) {
-      baseColumns.push(
+      columns.push(
         columnHelper.column({
           id: selectedLocaleData.locale_code,
           name: selectedLocaleData.locale.name,
           size: dynamicColumnWidth,
-          header: () => selectedLocaleData.locale.name,
+          header: () => /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base", weight: "plus", size: "small", children: selectedLocaleData.locale.name }),
           cell: (context) => {
             const row = context.row.original;
             if (isEntityRow(row)) {
               return /* @__PURE__ */ jsx(DataGrid.ReadonlyCell, { context, isMultiLine: true });
             }
-            return /* @__PURE__ */ jsx(DataGrid.TextCell, { context, isMultiLine: true });
+            return /* @__PURE__ */ jsx(DataGrid.MultilineCell, { context });
           },
           field: (context) => {
             const row = context.row.original;
             if (isEntityRow(row)) {
               return null;
             }
-            return `entities.${row.reference_id}.locales.${selectedLocaleData.locale_code}.fields.${row.field_name}`;
+            return `entities.${row.reference_id}.fields.${row.field_name}`;
           },
-          type: "text"
+          type: "multiline-text"
         })
       );
     }
-    return baseColumns;
-  }, [
-    t,
-    translatableFields,
-    availableLocales,
-    selectedLocale,
-    entities,
-    dynamicColumnWidth
-  ]);
-  return columns;
+    return columns;
+  }, [t, availableLocales, selectedLocale, entities, dynamicColumnWidth]);
 }
 var TranslationsEditForm = ({
   translations,
@@ -324,7 +280,7 @@ var TranslationsEditForm = ({
     const calculateColumnWidth = () => {
       if (containerRef.current) {
         const containerWidth = containerRef.current.offsetWidth;
-        const availableWidth = containerWidth - FIELD_COLUMN_WIDTH - 12;
+        const availableWidth = containerWidth - FIELD_COLUMN_WIDTH - 16;
         const columnWidth = Math.max(300, Math.floor(availableWidth / 2));
         setDynamicColumnWidth(columnWidth);
       }
@@ -341,57 +297,83 @@ var TranslationsEditForm = ({
   );
   const [showUnsavedPrompt, setShowUnsavedPrompt] = useState(false);
   const [pendingLocale, setPendingLocale] = useState(null);
-  const entities = useMemo(() => references, [references]);
-  const totalCount = useMemo(
-    () => referenceCount * (translatableFields.length + 1),
-    [referenceCount, translatableFields]
-  );
-  const initialState = useRef(
-    initTranslationsFormState(
+  const [isSwitchingLocale, setIsSwitchingLocale] = useState(false);
+  const snapshotRef = useRef(
+    buildLocaleSnapshot(
       translations,
-      entities,
-      availableLocales,
+      references,
+      selectedLocale,
       translatableFields
     )
   );
+  const knownEntityIdsRef = useRef(
+    new Set(references.map((r) => r.id))
+  );
+  const latestPropsRef = useRef({ translations, references });
+  useEffect(() => {
+    latestPropsRef.current = { translations, references };
+  }, [translations, references]);
   const form = useForm({
     resolver: zodResolver(TranslationsFormSchema),
-    defaultValues: initialState.current
+    defaultValues: snapshotToFormValues(snapshotRef.current)
   });
+  useEffect(() => {
+    const currentIds = new Set(references.map((r) => r.id));
+    const newReferences = references.filter(
+      (r) => !knownEntityIdsRef.current.has(r.id)
+    );
+    if (newReferences.length === 0) {
+      return;
+    }
+    knownEntityIdsRef.current = currentIds;
+    snapshotRef.current = extendSnapshot(
+      snapshotRef.current,
+      translations,
+      newReferences,
+      translatableFields
+    );
+    const currentValues = form.getValues();
+    const newFormValues = {
+      entities: { ...currentValues.entities }
+    };
+    for (const ref of newReferences) {
+      if (!newFormValues.entities[ref.id]) {
+        newFormValues.entities[ref.id] = snapshotRef.current.entities[ref.id];
+      }
+    }
+    form.reset(newFormValues, {
+      keepDirty: true,
+      keepDirtyValues: true
+    });
+  }, [references, translations, translatableFields, form]);
   const rows = useMemo(
-    () => buildTranslationRows(entities, translatableFields),
-    [entities, translatableFields]
+    () => buildTranslationRows(references, translatableFields),
+    [references, translatableFields]
   );
-  const { mutateAsync, isPending } = useBatchTranslations(entityType);
-  const handleLocaleChange = useCallback(
-    (newLocale) => {
-      if (newLocale === selectedLocale) {
-        return;
-      }
-      const currentValues = form.getValues();
-      const hasChanges = hasLocaleChanges(
-        currentValues,
-        initialState.current,
-        selectedLocale
-      );
-      if (hasChanges) {
-        setPendingLocale(newLocale);
-        setShowUnsavedPrompt(true);
-      } else {
-        setSelectedLocale(newLocale);
-      }
-    },
-    [selectedLocale, form]
+  const totalRowCount = useMemo(
+    () => referenceCount * (translatableFields.length + 1),
+    [referenceCount, translatableFields]
   );
+  const selectedLocaleDisplay = useMemo(
+    () => availableLocales.find((l) => l.locale_code === selectedLocale)?.locale.name,
+    [availableLocales, selectedLocale]
+  );
+  const columns = useTranslationsGridColumns({
+    entities: references,
+    availableLocales,
+    selectedLocale,
+    dynamicColumnWidth
+  });
+  const { mutateAsync, isPending, invalidateQueries } = useBatchTranslations(entityType);
   const saveCurrentLocale = useCallback(async () => {
     const currentValues = form.getValues();
-    const payload = transformSingleLocaleToBatchPayload(
+    const { hasChanges, payload } = computeChanges(
       currentValues,
-      initialState.current,
+      snapshotRef.current,
       entityType,
       selectedLocale
     );
-    if (payload.create.length === 0 && payload.update.length === 0 && payload.delete.length === 0) {
+    if (!hasChanges) {
       return true;
     }
     try {
@@ -415,20 +397,32 @@ var TranslationsEditForm = ({
         }
         if (payload.delete.length > 0) {
           currentBatch.delete = payload.delete.splice(0, currentBatchAvailable);
-          currentBatchAvailable -= currentBatch.delete.length;
         }
-        await mutateAsync(currentBatch);
+        const response = await mutateAsync(currentBatch, {
+          onError: (error) => {
+            toast.error(error.message);
+          }
+        });
+        if (response.created) {
+          for (const created of response.created) {
+            form.setValue(`entities.${created.reference_id}.id`, created.id, {
+              shouldDirty: false
+            });
+            if (snapshotRef.current.entities[created.reference_id]) {
+              snapshotRef.current.entities[created.reference_id].id = created.id;
+            }
+          }
+        }
       }
-      const updatedInitialState = { ...initialState.current };
-      for (const entityId of Object.keys(currentValues.entities)) {
-        if (updatedInitialState.entities[entityId]?.locales[selectedLocale]) {
-          updatedInitialState.entities[entityId].locales[selectedLocale] = {
-            ...currentValues.entities[entityId].locales[selectedLocale]
+      const savedValues = form.getValues();
+      for (const entityId of Object.keys(savedValues.entities)) {
+        if (snapshotRef.current.entities[entityId]) {
+          snapshotRef.current.entities[entityId] = {
+            ...savedValues.entities[entityId]
           };
         }
       }
-      initialState.current = updatedInitialState;
-      form.reset(currentValues);
+      form.reset(savedValues);
       return true;
     } catch (error) {
       toast.error(
@@ -437,19 +431,59 @@ var TranslationsEditForm = ({
       return false;
     }
   }, [form, entityType, selectedLocale, mutateAsync]);
+  const switchToLocale = useCallback(
+    async (newLocale) => {
+      setIsSwitchingLocale(true);
+      try {
+        await invalidateQueries();
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        const { translations: translations2, references: references2 } = latestPropsRef.current;
+        const newSnapshot = buildLocaleSnapshot(
+          translations2,
+          references2,
+          newLocale,
+          translatableFields
+        );
+        snapshotRef.current = newSnapshot;
+        knownEntityIdsRef.current = new Set(references2.map((r) => r.id));
+        form.reset(snapshotToFormValues(newSnapshot));
+        setSelectedLocale(newLocale);
+      } finally {
+        setIsSwitchingLocale(false);
+      }
+    },
+    [translatableFields, form, invalidateQueries]
+  );
+  const handleLocaleChange = useCallback(
+    (newLocale) => {
+      if (newLocale === selectedLocale) {
+        return;
+      }
+      const currentValues = form.getValues();
+      const { hasChanges } = computeChanges(
+        currentValues,
+        snapshotRef.current,
+        entityType,
+        selectedLocale
+      );
+      if (hasChanges) {
+        setPendingLocale(newLocale);
+        setShowUnsavedPrompt(true);
+      } else {
+        switchToLocale(newLocale);
+      }
+    },
+    [selectedLocale, form, entityType, switchToLocale]
+  );
   const handleSaveAndSwitch = useCallback(async () => {
     const success = await saveCurrentLocale();
     if (success && pendingLocale) {
-      toast.success(
-        t("translations.edit.localeChangesSaved", {
-          defaultValue: "Changes saved successfully"
-        })
-      );
-      setSelectedLocale(pendingLocale);
+      toast.success(t("translations.edit.successToast"));
+      await switchToLocale(pendingLocale);
     }
     setShowUnsavedPrompt(false);
     setPendingLocale(null);
-  }, [saveCurrentLocale, pendingLocale, t]);
+  }, [saveCurrentLocale, pendingLocale, t, switchToLocale]);
   const handleCancelSwitch = useCallback(() => {
     setShowUnsavedPrompt(false);
     setPendingLocale(null);
@@ -458,11 +492,7 @@ var TranslationsEditForm = ({
     async (closeOnSuccess = false) => {
       const success = await saveCurrentLocale();
       if (success) {
-        toast.success(
-          t("translations.edit.successToast", {
-            defaultValue: "Translations updated successfully"
-          })
-        );
+        toast.success(t("translations.edit.successToast"));
         if (closeOnSuccess) {
           handleSuccess();
         }
@@ -470,96 +500,22 @@ var TranslationsEditForm = ({
     },
     [saveCurrentLocale, t, handleSuccess]
   );
-  const handleSubmit = form.handleSubmit(async (values) => {
-    const payload = transformToBatchPayload(
-      values,
-      initialState.current,
-      entityType
-    );
-    if (payload.create.length === 0 && payload.update.length === 0 && payload.delete.length === 0) {
-      toast.info(
-        t("translations.noChanges", { defaultValue: "No changes to save" })
-      );
-      return;
-    }
-    const BATCH_SIZE = 150;
-    const totalItems = payload.create.length + payload.update.length + payload.delete.length;
-    const batchCount = Math.ceil(totalItems / BATCH_SIZE);
-    for (let i = 0; i < batchCount; i++) {
-      let currentBatchAvailable = BATCH_SIZE;
-      const currentBatch = {
-        create: [],
-        update: [],
-        delete: []
-      };
-      if (payload.create.length > 0) {
-        currentBatch.create = payload.create.splice(0, currentBatchAvailable);
-        currentBatchAvailable -= currentBatch.create.length;
-      }
-      if (payload.update.length > 0) {
-        currentBatch.update = payload.update.splice(0, currentBatchAvailable);
-        currentBatchAvailable -= currentBatch.update.length;
-      }
-      if (payload.delete.length > 0) {
-        currentBatch.delete = payload.delete.splice(0, currentBatchAvailable);
-        currentBatchAvailable -= currentBatch.delete.length;
-      }
-      await mutateAsync(currentBatch, {
-        onSuccess: () => {
-          if (i === batchCount - 1) {
-            toast.success(
-              t("translations.edit.successToast", {
-                defaultValue: "Translations updated successfully"
-              })
-            );
-            handleSuccess();
-          }
-        },
-        onError: (error) => {
-          toast.error(error.message);
-        }
-      });
-    }
-  });
-  const columns = useTranslationsGridColumns({
-    entities,
-    translatableFields,
-    availableLocales,
-    selectedLocale,
-    dynamicColumnWidth
-  });
-  const selectedLocaleDisplay = availableLocales.find(
-    (l) => l.locale_code === selectedLocale
-  )?.locale.name;
-  return /* @__PURE__ */ jsxs(RouteFocusModal.Form, { form, children: [
+  const handleClose = useCallback(() => {
+    invalidateQueries();
+  }, [invalidateQueries]);
+  const isLoading = isPending || isSwitchingLocale;
+  return /* @__PURE__ */ jsxs(RouteFocusModal.Form, { form, onClose: handleClose, children: [
     /* @__PURE__ */ jsxs(
       KeyboundForm,
       {
-        onSubmit: handleSubmit,
+        onSubmit: () => handleSave(true),
         className: "flex h-full flex-col overflow-hidden",
         children: [
-          /* @__PURE__ */ jsx(RouteFocusModal.Header, { children: /* @__PURE__ */ jsx("div", { className: "-my-2 flex w-full items-center justify-between border-l px-4", children: /* @__PURE__ */ jsxs(
-            Select,
-            {
-              value: selectedLocale,
-              onValueChange: handleLocaleChange,
-              size: "small",
-              children: [
-                /* @__PURE__ */ jsx(Select.Trigger, { className: "bg-ui-bg-base w-[200px]", children: /* @__PURE__ */ jsx(Select.Value, { children: selectedLocaleDisplay }) }),
-                /* @__PURE__ */ jsx(Select.Content, { children: availableLocales.map((locale) => /* @__PURE__ */ jsx(
-                  Select.Item,
-                  {
-                    value: locale.locale_code,
-                    children: locale.locale.name
-                  },
-                  locale.locale_code
-                )) })
-              ]
-            }
-          ) }) }),
+          /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
           /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "size-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: "size-full", children: /* @__PURE__ */ jsx(
             DataGrid,
             {
+              showColumnsDropdown: false,
               columns,
               data: rows,
               getSubRows: (row) => {
@@ -569,47 +525,63 @@ var TranslationsEditForm = ({
               },
               state: form,
               onEditingChange: (editing) => setCloseOnEscape(!editing),
-              totalRowCount: totalCount,
+              totalRowCount,
               onFetchMore: fetchNextPage,
               isFetchingMore: isFetchingNextPage,
-              hasNextPage
+              hasNextPage,
+              headerContent: /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  disabled: isLoading,
+                  value: selectedLocale,
+                  onValueChange: handleLocaleChange,
+                  size: "small",
+                  children: [
+                    /* @__PURE__ */ jsx(Select.Trigger, { className: "bg-ui-bg-base w-[200px]", children: /* @__PURE__ */ jsx(Select.Value, { children: selectedLocaleDisplay }) }),
+                    /* @__PURE__ */ jsx(Select.Content, { children: availableLocales.map((locale) => /* @__PURE__ */ jsx(
+                      Select.Item,
+                      {
+                        value: locale.locale_code,
+                        children: locale.locale.name
+                      },
+                      locale.locale_code
+                    )) })
+                  ]
+                }
+              )
             }
           ) }) }),
           /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
-            /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: t("actions.cancel") }) }),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(
               Button,
               {
-                size: "small",
                 type: "button",
+                size: "small",
                 variant: "secondary",
-                onClick: () => handleSave(false),
-                isLoading: isPending,
-                children: t("actions.saveChanges", { defaultValue: "Save changes" })
+                isLoading,
+                children: t("actions.cancel")
               }
-            ),
+            ) }),
             /* @__PURE__ */ jsx(
               Button,
               {
                 size: "small",
                 type: "button",
-                onClick: () => handleSave(true),
-                isLoading: isPending,
-                children: t("actions.saveAndClose", { defaultValue: "Save and close" })
+                variant: "secondary",
+                onClick: () => handleSave(false),
+                isLoading,
+                children: t("actions.saveChanges")
               }
-            )
+            ),
+            /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading, children: t("actions.saveAndClose") })
           ] }) })
         ]
       }
     ),
     /* @__PURE__ */ jsx(Prompt, { open: showUnsavedPrompt, variant: "confirmation", children: /* @__PURE__ */ jsxs(Prompt.Content, { children: [
       /* @__PURE__ */ jsxs(Prompt.Header, { children: [
-        /* @__PURE__ */ jsx(Prompt.Title, { children: t("translations.unsavedChanges.title", {
-          defaultValue: "Unsaved changes"
-        }) }),
-        /* @__PURE__ */ jsx(Prompt.Description, { children: t("translations.unsavedChanges.description", {
-          defaultValue: "You have unsaved changes for this locale. Save them before switching?"
-        }) })
+        /* @__PURE__ */ jsx(Prompt.Title, { children: t("translations.edit.unsavedChanges.title") }),
+        /* @__PURE__ */ jsx(Prompt.Description, { children: t("translations.edit.unsavedChanges.description") })
       ] }),
       /* @__PURE__ */ jsxs(Prompt.Footer, { children: [
         /* @__PURE__ */ jsx(
@@ -628,8 +600,8 @@ var TranslationsEditForm = ({
             size: "small",
             onClick: handleSaveAndSwitch,
             type: "button",
-            isLoading: isPending,
-            children: t("actions.saveChanges", { defaultValue: "Save changes" })
+            isLoading,
+            children: t("actions.saveChanges")
           }
         )
       ] })
@@ -638,8 +610,6 @@ var TranslationsEditForm = ({
 };
 
 // src/routes/translations/translations-edit/translations-edit.tsx
-import { useEffect as useEffect2 } from "react";
-import { keepPreviousData } from "@tanstack/react-query";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var TranslationsEdit = () => {
   const isTranslationsEnabled = useFeatureFlag("translation");
@@ -669,15 +639,10 @@ var TranslationsEdit = () => {
     isPending,
     isError,
     error
-  } = useReferenceTranslations(
-    reference,
-    translatable_fields?.[reference] ?? [],
-    referenceIdParam,
-    {
-      enabled: !!translatable_fields && !!reference,
-      placeholderData: keepPreviousData
-    }
-  );
+  } = useReferenceTranslations(reference, referenceIdParam, {
+    enabled: !!reference,
+    placeholderData: keepPreviousData
+  });
   const {
     store,
     isPending: isStorePending,