Add locale and remove locale dialogs with ASC error resilience

- Add locale dialog: translates fields from primary locale, generates
  keywords with forbidden-word rules, creates localizations across
  store listing and app details in one step
- Remove locale dialog: choose which sections to delete from with
  immediate ASC deletion, replacing the old per-page AlertDialog
- Handle ASC transient 500 errors gracefully: CREATE 409 falls back
  to update, DELETE 404 treated as success
- Extract shared keyword forbidden-word utilities (splitMetaWords,
  buildForbiddenKeywords) to eliminate duplicated logic
- Fix keywords save deleting unchanged localizations
- Fix AI keyword prompt leaking reasoning text
- Add refresh button support to store listing page

Author: nickustinov

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## 1.3.0
 
+- Add locale dialog – translates all fields from the primary locale, generates keywords with forbidden-word rules, and creates localizations across store listing and app details in one step
+- Remove locale dialog – choose which sections (store listing, app details, screenshots) to delete from, with immediate ASC deletion
+- Refresh button on the store listing page now reloads localizations from App Store Connect
+- Fix AI keyword generation including subtitle words as keywords – forbidden words now use the translated subtitle
+- Fix keywords save deleting unchanged localizations – only changed locales are sent to the sync endpoint
+- Fix App Store Connect 409 duplicate errors on locale creation – automatically falls back to updating the existing localization
+- Extract shared keyword forbidden-word utilities to eliminate duplicated logic across store listing, keyword insights, and AI dialogs
 - Add keywords insights page with per-locale keyword analysis, cross-locale duplicate detection, and storefront view
 - Add "Fix all issues" bulk AI keyword optimisation across all locales
 - Add per-locale "Fix issues" AI keyword improvement that removes name/subtitle overlaps and cross-locale duplicates

src/app/dashboard/apps/[appId]/aso/keywords/_components/fix-all-dialog.tsx

@@ -12,6 +12,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { localeName, FIELD_LIMITS } from "@/lib/asc/locale-names";
+import { buildForbiddenKeywords } from "@/lib/asc/keyword-utils";
 import { CharCount } from "@/components/char-count";
 import type { LocaleKeywordData, StorefrontAnalysis } from "./keyword-analysis";
 
@@ -40,24 +41,13 @@ function buildForbiddenWords(
   appName: string | undefined,
   appSubtitle: string | null,
 ): string[] {
-  const forbidden = new Set<string>();
-  for (const ld of analysis.localeData) {
-    if (ld.locale === locale) continue;
-    for (const kw of ld.keywords) {
-      forbidden.add(kw.toLowerCase());
-    }
-  }
-  if (appName) {
-    for (const w of appName.toLowerCase().split(/[\s\-–/&]+/)) {
-      if (w.length > 1) forbidden.add(w);
-    }
-  }
-  if (appSubtitle) {
-    for (const w of appSubtitle.toLowerCase().split(/[\s\-–/&]+/)) {
-      if (w.length > 1) forbidden.add(w);
-    }
-  }
-  return [...forbidden];
+  return buildForbiddenKeywords({
+    appName,
+    subtitle: appSubtitle ?? undefined,
+    otherLocaleKeywords: analysis.localeData
+      .filter((ld) => ld.locale !== locale)
+      .map((ld) => ld.keywords.join(",")),
+  });
 }
 
 function cleanKeywords(

src/app/dashboard/apps/[appId]/aso/keywords/_components/keywords-context.tsx

@@ -106,14 +106,20 @@ export function KeywordsProvider({ children }: { children: React.ReactNode }) {
         return;
       }
       try {
+        // Only send changed locales + their IDs – never trigger creates or deletes
+        const changedLocaleIds: Record<string, string> = {};
+        for (const locale of Object.keys(changed)) {
+          const id = originalLocaleIdsRef.current[locale];
+          if (id) changedLocaleIds[locale] = id;
+        }
         const res = await fetch(
           `/api/apps/${appId}/versions/${versionId}/localizations`,
           {
             method: "PUT",
             headers: { "Content-Type": "application/json" },
             body: JSON.stringify({
               locales: changed,
-              originalLocaleIds: originalLocaleIdsRef.current,
+              originalLocaleIds: changedLocaleIds,
             }),
           },
         );

src/app/dashboard/apps/[appId]/aso/keywords/_components/locale-card.tsx

@@ -12,6 +12,7 @@ import {
   CheckCircle,
 } from "@phosphor-icons/react";
 import { localeName, FIELD_LIMITS } from "@/lib/asc/locale-names";
+import { buildForbiddenKeywords } from "@/lib/asc/keyword-utils";
 import { KeywordTagInput } from "@/components/keyword-tag-input";
 import { CharCount } from "@/components/char-count";
 import { AICompareDialog } from "@/components/ai-compare-dialog";
@@ -99,24 +100,11 @@ export function LocaleCard({
       })
       .join(",");
 
-    // Build forbidden words: other locale keywords + app name/subtitle words
-    const forbiddenSet = new Set<string>();
-    for (const kw of Object.values(otherLocaleKeywords)) {
-      for (const w of kw.split(",")) {
-        const trimmed = w.trim().toLowerCase();
-        if (trimmed) forbiddenSet.add(trimmed);
-      }
-    }
-    if (appName) {
-      for (const w of appName.toLowerCase().split(/[\s\-–/&]+/)) {
-        if (w.length > 1) forbiddenSet.add(w);
-      }
-    }
-    if (appSubtitle) {
-      for (const w of appSubtitle.toLowerCase().split(/[\s\-–/&]+/)) {
-        if (w.length > 1) forbiddenSet.add(w);
-      }
-    }
+    const forbiddenWords = buildForbiddenKeywords({
+      appName,
+      subtitle: appSubtitle ?? undefined,
+      otherLocaleKeywords,
+    });
 
     setCompareState({
       title: `Improve keywords – ${localeName(data.locale)}`,
@@ -129,7 +117,7 @@ export function LocaleCard({
         subtitle: appSubtitle,
         charLimit: FIELD_LIMITS.keywords,
         description,
-        forbiddenWords: [...forbiddenSet],
+        forbiddenWords,
       },
     });
   }

src/app/dashboard/apps/[appId]/details/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useCallback, useEffect, useRef } from "react";
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { useParams, useSearchParams } from "next/navigation";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -29,17 +29,20 @@ import { CATEGORIES, categoryName } from "@/lib/asc/categories";
 import { CharCount } from "@/components/char-count";
 import { useRegisterHeaderLocale } from "@/lib/header-locale-context";
 import { useLocaleManagement } from "@/lib/hooks/use-locale-management";
-import { useLocaleHandlers } from "@/lib/hooks/use-locale-handlers";
+import { RemoveLocaleDialog } from "@/components/remove-locale-dialog";
 import { apiFetch } from "@/lib/api-fetch";
 import { useSubmissionChecklist } from "@/lib/submission-checklist-context";
 import { computeAppDetailsFlags } from "@/lib/submission-checklist-utils";
 import { MagicWandButton, wandProps } from "@/components/magic-wand-button";
 import type { MagicWandLocaleProps } from "@/components/magic-wand-button";
 import { BulkAIDialog, type BulkField } from "@/components/bulk-ai-dialog";
 import { BulkAllAIDialog } from "@/components/bulk-all-ai-dialog";
+import { AddLocaleDialog } from "@/components/add-locale-dialog";
 import { EmptyState } from "@/components/empty-state";
 import { useTabNavigation } from "@/lib/hooks/use-tab-navigation";
 import { useRegisterRefresh } from "@/lib/refresh-context";
+import { useVersions } from "@/lib/versions-context";
+import { resolveVersion } from "@/lib/asc/version-types";
 
 const SORTED_CATEGORIES = Object.keys(CATEGORIES).sort((a, b) =>
   CATEGORIES[a].localeCompare(CATEGORIES[b]),
@@ -107,6 +110,13 @@ export default function AppDetailsPage() {
     busy: refreshLoading,
   });
 
+  const { versions } = useVersions();
+  const selectedVersion = useMemo(
+    () => resolveVersion(versions, searchParams.get("version")),
+    [versions, searchParams],
+  );
+  const versionId = selectedVersion?.id ?? "";
+
   const primaryLocale = app?.primaryLocale ?? "";
 
   const [localeData, setLocaleData] = useState<
@@ -156,6 +166,8 @@ export default function AppDetailsPage() {
 
   const [bulkMode, setBulkMode] = useState<"translate" | "copy" | null>(null);
   const [bulkAllMode, setBulkAllMode] = useState<{ mode: "translate" | "copy"; field?: string } | null>(null);
+  const [addLocaleCode, setAddLocaleCode] = useState<string | null>(null);
+  const [removeLocaleCode, setRemoveLocaleCode] = useState<string | null>(null);
 
   function handleBulkApply(updates: Record<string, Record<string, string>>) {
     setLocaleData((prev) => {
@@ -407,26 +419,14 @@ export default function AppDetailsPage() {
     [selectedLocale, setDirty],
   );
 
-  const { handleAddLocale, handleBulkAddLocales, handleDeleteLocale } = useLocaleHandlers({
-    localeData,
-    setLocaleData,
-    setLocales,
-    selectedLocale,
-    changeLocale,
-    primaryLocale,
-    setDirty,
-    emptyFields: emptyLocaleFields,
-  });
-
   // Register locale picker in the header bar
   useRegisterHeaderLocale({
     locales,
     selectedLocale,
     primaryLocale,
     onLocaleChange: changeLocale,
-    onLocaleAdd: handleAddLocale,
-    onLocalesAdd: handleBulkAddLocales,
-    onLocaleDelete: handleDeleteLocale,
+    onLocaleAdd: (code: string) => setAddLocaleCode(code),
+    onLocaleDelete: (code: string) => setRemoveLocaleCode(code),
     onBulkTranslate: () => setBulkMode("translate"),
     onBulkCopy: () => setBulkMode("copy"),
     onBulkTranslateAll: () => setBulkAllMode({ mode: "translate" }),
@@ -603,6 +603,40 @@ export default function AppDetailsPage() {
         appName={app?.name}
         onApply={handleBulkApply}
       />
+      <AddLocaleDialog
+        open={addLocaleCode !== null}
+        onOpenChange={(open) => { if (!open) setAddLocaleCode(null); }}
+        locale={addLocaleCode ?? ""}
+        appId={appId}
+        primaryLocale={primaryLocale}
+        appName={app?.name}
+        versionId={versionId}
+        appInfoId={appInfoId}
+        onCreated={() => {
+          refreshLocalizations();
+          if (addLocaleCode) changeLocale(addLocaleCode);
+        }}
+      />
+      <RemoveLocaleDialog
+        open={removeLocaleCode !== null}
+        onOpenChange={(open) => { if (!open) setRemoveLocaleCode(null); }}
+        locale={removeLocaleCode ?? ""}
+        appId={appId}
+        versionId={versionId}
+        appInfoId={appInfoId}
+        sections={{
+          storeListing: otherSectionLocales["store-listing"]?.includes(removeLocaleCode ?? "") ?? false,
+          appDetails: locales.includes(removeLocaleCode ?? ""),
+          screenshots: otherSectionLocales.screenshots?.includes(removeLocaleCode ?? "") ?? false,
+        }}
+        onRemoved={() => {
+          if (removeLocaleCode === selectedLocale) {
+            const remaining = locales.filter((l) => l !== removeLocaleCode);
+            changeLocale(remaining[0] ?? primaryLocale);
+          }
+          refreshLocalizations();
+        }}
+      />
 
       {/* Categories */}
       <section className="space-y-2">

src/app/dashboard/apps/[appId]/screenshots/page.tsx

@@ -41,7 +41,10 @@ import { useApps } from "@/lib/apps-context";
 import { useVersions } from "@/lib/versions-context";
 import { resolveVersion, EDITABLE_STATES } from "@/lib/asc/version-types";
 import { useLocalizations } from "@/lib/hooks/use-localizations";
+import { useAppInfo } from "@/lib/hooks/use-app-info";
+import { pickAppInfo } from "@/lib/asc/app-info-utils";
 import { useScreenshotSets } from "@/lib/hooks/use-screenshot-sets";
+import { RemoveLocaleDialog } from "@/components/remove-locale-dialog";
 import { localeName, sortLocales } from "@/lib/asc/locale-names";
 import {
   screenshotImageUrl,
@@ -569,7 +572,10 @@ export default function ScreenshotsPage() {
     appId,
     versionId,
   );
+  const { appInfos } = useAppInfo(appId);
+  const appInfoId = useMemo(() => pickAppInfo(appInfos)?.id ?? "", [appInfos]);
   const primaryLocale = app?.primaryLocale ?? "";
+  const [removeLocaleCode, setRemoveLocaleCode] = useState<string | null>(null);
 
   const {
     locales, setLocales,
@@ -768,23 +774,6 @@ export default function ScreenshotsPage() {
     }
   }
 
-  function handleDeleteLocale(code: string) {
-    const needsLocaleSwitch = selectedLocale === code;
-    setLocales((prev) => prev.filter((l) => l !== code));
-    if (needsLocaleSwitch) {
-      const remaining = locales.filter((l) => l !== code);
-      changeLocale(remaining[0] ?? "");
-    }
-    toast(`Removed ${localeName(code)}`, {
-      action: {
-        label: "Undo",
-        onClick: () => {
-          setLocales((prev) => sortLocales([...prev, code], primaryLocale));
-        },
-      },
-    });
-  }
-
   // Register locale picker in the header bar
   useRegisterHeaderLocale({
     locales,
@@ -793,7 +782,7 @@ export default function ScreenshotsPage() {
     onLocaleChange: changeLocale,
     onLocaleAdd: handleAddLocale,
     onLocalesAdd: handleBulkAddLocales,
-    onLocaleDelete: handleDeleteLocale,
+    onLocaleDelete: (code: string) => setRemoveLocaleCode(code),
     section: "screenshots",
     otherSectionLocales,
     readOnly,
@@ -885,6 +874,26 @@ export default function ScreenshotsPage() {
           )}
         </>
       )}
+      <RemoveLocaleDialog
+        open={removeLocaleCode !== null}
+        onOpenChange={(open) => { if (!open) setRemoveLocaleCode(null); }}
+        locale={removeLocaleCode ?? ""}
+        appId={appId}
+        versionId={versionId}
+        appInfoId={appInfoId}
+        sections={{
+          storeListing: otherSectionLocales["store-listing"]?.includes(removeLocaleCode ?? "") ?? false,
+          appDetails: otherSectionLocales.details?.includes(removeLocaleCode ?? "") ?? false,
+          screenshots: locales.includes(removeLocaleCode ?? ""),
+        }}
+        onRemoved={() => {
+          if (removeLocaleCode === selectedLocale) {
+            const remaining = locales.filter((l) => l !== removeLocaleCode);
+            changeLocale(remaining[0] ?? primaryLocale);
+          }
+          refreshLocalizations();
+        }}
+      />
     </div>
   );
 }