@developer_tribe/react-builder 1.2.42 → 1.2.43

package/src/attributes-editor/FallbackLocalizationField.tsx

@@ -1,251 +1,579 @@
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  useMemo,
+} from 'react';
 import { useRenderStore } from '../store';
 
 /**
- * Self-contained fallback localization field for react-builder.
+ * Self-contained localization key selector for react-builder.
  *
- * Uses the localizationApiConfig from the store to:
- * 1. Pre-load ALL keys on first open (per_page=100, auto-paginate)
- * 2. Filter locally — no subsequent API calls for search
- * 3. Works independently of the host app
+ * Mirrors TribeHub LocalizationKeySelector UX without external deps.
  *
- * API: GET {forgeUrl}/api/manage/localization/{platform}?per_page=100&page=N&app_id=X
- * Header: X-Authorization: {forgeToken}
+ * Features:
+ * - Auto-fetches records on mount (for compact preview + translations)
+ * - Compact preview: selected key + EN/TR translations below it
+ * - Modal: platform toggle, search, result cards with translation previews
+ * - Create new key form in modal
+ * - Module-level cache (survives re-renders); ↻ refresh button
  */
 
+// ─── Types ───────────────────────────────────────────────────────
+
 type LocalizationRecord = {
   key: string;
+  description?: string | null;
   translations: Record<string, { value: string | null }>;
 };
 
+type LanguageColumn = { code: string; title: string };
+type Platform = 'ios' | 'android';
 type FallbackLocalizationFieldProps = {
   value: string;
   onChange: (v: string) => void;
 };
 
+// ─── Module-level cache ──────────────────────────────────────────
+
+type CacheEntry = {
+  records: LocalizationRecord[];
+  languages: LanguageColumn[];
+};
+const cache: Record<string, CacheEntry> = {};
+const rk = (url: string, appId: unknown, p: Platform) =>
+  `${url}|${appId ?? ''}|${p}`;
+const lk = (url: string, appId: unknown) => `lang|${url}|${appId ?? ''}`;
+
+// ─── Component ───────────────────────────────────────────────────
+
 export function FallbackLocalizationField({
   value,
   onChange,
 }: FallbackLocalizationFieldProps) {
   const config = useRenderStore((s) => s.localizationApiConfig);
+  const storeLanguageColumns = useRenderStore((s) => s.languageColumns);
+
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
+  const [platform, setPlatform] = useState<Platform>('ios');
   const [allRecords, setAllRecords] = useState<LocalizationRecord[]>([]);
-  const [filteredRecords, setFilteredRecords] = useState<LocalizationRecord[]>(
-    [],
-  );
-  const [preloadDone, setPreloadDone] = useState(false);
   const [loading, setLoading] = useState(false);
-  const preloadVersionRef = useRef(0);
+  const [languages, setLanguages] = useState<LanguageColumn[]>([]);
+  const [dataReady, setDataReady] = useState(false);
+  const fetchVer = useRef(0);
+
+  // Create-new state
+  const [showCreate, setShowCreate] = useState(false);
+  const [newKey, setNewKey] = useState('');
+  const [newEN, setNewEN] = useState('');
+  const [newTR, setNewTR] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
 
   const canSearch = !!config?.forgeUrl && !!config?.forgeToken;
-  const platform = 'ios'; // default platform for fallback
+  const displayLangs =
+    languages.length > 0
+      ? languages
+      : ((storeLanguageColumns as LanguageColumn[]) ?? []);
 
-  // --- Forge API helpers ---
-  const buildUrl = useCallback(
-    (page: number) => {
-      if (!config) return '';
-      const base = `${config.forgeUrl.replace(/\/$/, '')}/api/manage/localization/${platform}`;
-      const params = new URLSearchParams({
-        per_page: '1000',
-        page: String(page),
-      });
-      if (config.forgeAppId) {
-        params.append('app_id', String(config.forgeAppId));
+  // ─── API helpers ───────────────────────────────────────────────
+
+  const forgeHeaders = useCallback(() => {
+    if (!config) return {};
+    return {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+      'X-Authorization': config.forgeToken,
+    };
+  }, [config]);
+
+  const doFetchRecords = useCallback(
+    async (force = false) => {
+      if (!config || !canSearch) return;
+      const key = rk(config.forgeUrl, config.forgeAppId, platform);
+      if (!force && cache[key]?.records?.length) {
+        setAllRecords(cache[key].records);
+        setDataReady(true);
+        return;
+      }
+
+      const version = ++fetchVer.current;
+      setLoading(true);
+
+      try {
+        const all: LocalizationRecord[] = [];
+        let page = 1;
+        let hasMore = true;
+        while (hasMore) {
+          const base = `${config.forgeUrl.replace(/\/$/, '')}/api/manage/localization/${platform}`;
+          const params = new URLSearchParams({
+            per_page: '1000',
+            page: String(page),
+          });
+          if (config.forgeAppId)
+            params.append('app_id', String(config.forgeAppId));
+          const res = await fetch(`${base}?${params}`, {
+            headers: forgeHeaders() as HeadersInit,
+          });
+          if (!res.ok || version !== fetchVer.current) break;
+          const json = await res.json();
+          all.push(...(json.data ?? []));
+          const pg = json.pagination;
+          hasMore = pg && pg.current_page < pg.last_page;
+          page++;
+        }
+        if (version === fetchVer.current) {
+          setAllRecords(all);
+          setDataReady(true);
+          cache[key] = { ...cache[key], records: all };
+        }
+      } catch {
+        /* silent */
+      } finally {
+        if (version === fetchVer.current) setLoading(false);
       }
-      return `${base}?${params.toString()}`;
     },
-    [config],
+    [config, canSearch, platform, forgeHeaders],
   );
 
-  const fetchPage = useCallback(
-    async (page: number) => {
-      const url = buildUrl(page);
-      const res = await fetch(url, {
-        headers: {
-          'Content-Type': 'application/json',
-          Accept: 'application/json',
-          'X-Authorization': config!.forgeToken,
-        },
+  const doFetchLanguages = useCallback(async () => {
+    if (!config || !canSearch) return;
+    const key = lk(config.forgeUrl, config.forgeAppId);
+    if (cache[key]?.languages?.length) {
+      setLanguages(cache[key].languages);
+      return;
+    }
+    try {
+      const url = `${config.forgeUrl.replace(/\/$/, '')}/api/manage/localization-languages`;
+      const params = new URLSearchParams();
+      if (config.forgeAppId) params.append('app_id', String(config.forgeAppId));
+      const res = await fetch(`${url}?${params}`, {
+        headers: forgeHeaders() as HeadersInit,
       });
-      if (!res.ok) return { data: [] as LocalizationRecord[], hasMore: false };
-      const json = await res.json();
-      const records: LocalizationRecord[] = json.data ?? [];
-      const pagination = json.pagination;
-      const hasMore =
-        pagination && pagination.current_page < pagination.last_page;
-      return { data: records, hasMore };
-    },
-    [buildUrl, config],
-  );
+      if (!res.ok) return;
+      const data = await res.json();
+      const langs: LanguageColumn[] = Array.isArray(data) ? data : [];
+      setLanguages(langs);
+      cache[key] = {
+        ...cache[key],
+        languages: langs,
+        records: cache[key]?.records ?? [],
+      };
+    } catch {
+      /* silent */
+    }
+  }, [config, canSearch, forgeHeaders]);
+
+  // ─── Auto-fetch on mount (for compact preview) ────────────────
 
-  // --- Pre-load all records on first dialog open ---
   useEffect(() => {
-    if (!open || !canSearch || preloadDone) return;
-
-    const version = ++preloadVersionRef.current;
-    setLoading(true);
-
-    const loadAll = async () => {
-      const all: LocalizationRecord[] = [];
-      let page = 1;
-      let hasMore = true;
-      while (hasMore) {
-        const result = await fetchPage(page);
-        if (version !== preloadVersionRef.current) return;
-        all.push(...result.data);
-        hasMore = result.hasMore;
-        page++;
-      }
-      if (version === preloadVersionRef.current) {
-        setAllRecords(all);
-        setFilteredRecords(all);
-        setPreloadDone(true);
-        setLoading(false);
-      }
-    };
+    if (!canSearch) return;
+    void doFetchLanguages();
+    void doFetchRecords();
+  }, [canSearch, doFetchRecords, doFetchLanguages]);
 
-    void loadAll();
-  }, [open, canSearch, preloadDone, fetchPage]);
+  // ─── Local filter ──────────────────────────────────────────────
 
-  // --- Local filter ---
-  useEffect(() => {
-    if (!preloadDone) return;
+  const filteredRecords = useMemo(() => {
+    if (!dataReady) return [];
     const q = query.trim().toLowerCase();
-    if (!q) {
-      setFilteredRecords(allRecords);
-      return;
+    if (!q) return allRecords;
+    return allRecords.filter((r) => {
+      if (r.key.toLowerCase().includes(q)) return true;
+      return Object.values(r.translations).some(
+        (t) => t?.value && t.value.toLowerCase().includes(q),
+      );
+    });
+  }, [query, allRecords, dataReady]);
+
+  // ─── Selected record for preview ──────────────────────────────
+
+  const selectedRecord = useMemo(() => {
+    if (!value) return null;
+    return allRecords.find((r) => r.key === value) ?? null;
+  }, [value, allRecords]);
+
+  const getTranslation = (record: LocalizationRecord | null, code: string) => {
+    if (!record) return '';
+    return record.translations[code.toUpperCase()]?.value?.trim() || '';
+  };
+
+  const primaryLang = displayLangs[0] ?? { code: 'EN', title: 'English' };
+  const secondaryLang = displayLangs[1] ?? { code: 'TR', title: 'Türkçe' };
+  const primaryVal = getTranslation(selectedRecord, primaryLang.code);
+  const secondaryVal = getTranslation(selectedRecord, secondaryLang.code);
+
+  // ─── Handlers ──────────────────────────────────────────────────
+
+  const handleSelect = (record: LocalizationRecord) => {
+    onChange(record.key);
+    setOpen(false);
+  };
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onChange('');
+  };
+
+  const handlePlatformChange = (p: Platform) => {
+    if (p === platform) return;
+    setPlatform(p);
+    setDataReady(false);
+    setAllRecords([]);
+  };
+
+  const handleRefresh = () => {
+    if (config) {
+      delete cache[rk(config.forgeUrl, config.forgeAppId, platform)];
+      delete cache[lk(config.forgeUrl, config.forgeAppId)];
     }
-    setFilteredRecords(
-      allRecords.filter((r) => {
-        if (r.key.toLowerCase().includes(q)) return true;
-        return Object.values(r.translations).some(
-          (t) => t?.value && t.value.toLowerCase().includes(q),
+    setDataReady(false);
+    setAllRecords([]);
+    setLanguages([]);
+    void doFetchLanguages();
+    void doFetchRecords(true);
+  };
+
+  const handleCreate = async () => {
+    if (!config || !canSearch || !newKey.trim()) return;
+    setCreating(true);
+    setCreateError(null);
+
+    try {
+      const translations: Record<string, { value: string }> = {};
+      if (newEN.trim()) translations['EN'] = { value: newEN.trim() };
+      if (newTR.trim()) translations['TR'] = { value: newTR.trim() };
+
+      const body = { key: newKey.trim(), translations };
+      const base = `${config.forgeUrl.replace(/\/$/, '')}/api/manage/localization/${platform}`;
+      const params = new URLSearchParams();
+      if (config.forgeAppId) params.append('app_id', String(config.forgeAppId));
+
+      const res = await fetch(`${base}?${params}`, {
+        method: 'POST',
+        headers: forgeHeaders() as HeadersInit,
+        body: JSON.stringify(body),
+      });
+
+      if (!res.ok) {
+        const errData = await res.json().catch(() => ({}));
+        throw new Error(
+          (errData as { message?: string }).message || `HTTP ${res.status}`,
         );
-      }),
-    );
-  }, [query, allRecords, preloadDone]);
+      }
 
-  const invalidate = () => {
-    setPreloadDone(false);
-    setAllRecords([]);
-    setFilteredRecords([]);
+      // Select the new key
+      onChange(newKey.trim());
+      setShowCreate(false);
+      setNewKey('');
+      setNewEN('');
+      setNewTR('');
+      // Invalidate cache and refresh
+      handleRefresh();
+      setOpen(false);
+    } catch (err) {
+      setCreateError(err instanceof Error ? err.message : 'Oluşturulamadı');
+    } finally {
+      setCreating(false);
+    }
   };
 
+  const resolveMissingCount = (record: LocalizationRecord) =>
+    displayLangs.filter((lang) => {
+      const cell = record.translations[lang.code];
+      return !cell?.value || !cell.value.trim();
+    }).length;
+
+  // ─── Render ────────────────────────────────────────────────────
+
   return (
     <>
-      <div style={styles.row}>
-        <input
-          type="text"
-          className="attributes-editor__text-input"
-          value={value ?? ''}
-          onChange={(e) => onChange(e.target.value)}
-          style={{ flex: 1 }}
-        />
-        {canSearch ? (
-          <button
-            type="button"
-            onClick={() => setOpen(true)}
-            title="Browse localization keys"
-            style={styles.browseBtn}
+      {/* === Compact Preview === */}
+      {value ? (
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={() => canSearch && setOpen(true)}
+          onKeyDown={(e) => e.key === 'Enter' && canSearch && setOpen(true)}
+          style={S.compactCard}
+        >
+          <div style={S.compactHeader}>
+            <span style={S.compactLabel}>Text</span>
+            <span style={S.badgeSmall}>{platform.toUpperCase()}</span>
+            <span
+              role="button"
+              tabIndex={0}
+              onClick={handleClear}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.stopPropagation();
+                  onChange('');
+                }
+              }}
+              title="Temizle"
+              style={S.clearBtn}
+            >
+              ✕
+            </span>
+          </div>
+
+          <div style={S.keyRow}>
+            <span style={S.keyText}>{value}</span>
+            <span style={{ fontSize: 12, color: '#555' }}>🔍</span>
+          </div>
+
+          {/* EN translation */}
+          <div style={S.transRow}>
+            <span style={S.langBadge}>
+              {primaryLang.title || primaryLang.code}
+            </span>
+            <span style={primaryVal ? S.transVal : S.transMissing}>
+              {primaryVal || 'Eksik'}
+            </span>
+          </div>
+
+          {/* TR translation */}
+          <div style={S.transRow}>
+            <span style={S.langBadge}>
+              {secondaryLang.title || secondaryLang.code}
+            </span>
+            <span style={secondaryVal ? S.transVal : S.transMissing}>
+              {secondaryVal || 'Eksik'}
+            </span>
+          </div>
+        </div>
+      ) : (
+        <div style={S.emptyWrap}>
+          <span style={S.compactLabel}>Text</span>
+          <div
+            role="button"
+            tabIndex={0}
+            onClick={() => canSearch && setOpen(true)}
+            onKeyDown={(e) => e.key === 'Enter' && canSearch && setOpen(true)}
+            style={S.emptyBtn}
           >
-            🔍
-          </button>
-        ) : (
-          <span title="Localization API yapılandırılmadı" style={styles.dot} />
-        )}
-      </div>
+            <span style={{ opacity: 0.5 }}>
+              Localization anahtarı seçilmedi
+            </span>
+            {canSearch && <span>🔍</span>}
+          </div>
+          {!canSearch && (
+            <div style={S.configWarn}>Localization API yapılandırılmadı</div>
+          )}
+        </div>
+      )}
+
+      {/* === Modal === */}
       {open && (
-        <div onClick={() => setOpen(false)} style={styles.overlay}>
-          <div onClick={(e) => e.stopPropagation()} style={styles.modal}>
+        <div onClick={() => setOpen(false)} style={S.overlay}>
+          <div onClick={(e) => e.stopPropagation()} style={S.modal}>
             {/* Header */}
-            <div style={styles.header}>
-              <span style={{ fontWeight: 600, fontSize: 14 }}>
-                Localization Anahtarı Seç
-              </span>
-              <button
-                type="button"
-                onClick={() => setOpen(false)}
-                style={styles.closeBtn}
+            <div style={S.modalHeader}>
+              <div>
+                <div style={{ fontWeight: 600, fontSize: 15 }}>
+                  Localization Anahtarı Seç
+                </div>
+                <div style={{ fontSize: 12, color: '#888', marginTop: 2 }}>
+                  Arama, seçim veya yeni anahtar oluşturma.
+                </div>
+              </div>
+              <div
+                style={{
+                  display: 'flex',
+                  gap: 8,
+                  alignItems: 'center',
+                  flexShrink: 0,
+                }}
               >
-                ✕
-              </button>
+                <span
+                  role="button"
+                  tabIndex={0}
+                  onClick={handleRefresh}
+                  title="Yenile"
+                  style={S.refreshBtn}
+                >
+                  ↻
+                </span>
+                <span
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => setOpen(false)}
+                  style={S.closeBtn}
+                >
+                  ✕
+                </span>
+              </div>
             </div>
-            {/* Search */}
-            <div style={{ padding: '10px 16px 6px' }}>
+
+            {/* Platform toggle */}
+            <div style={S.platformBar}>
+              {(['ios', 'android'] as Platform[]).map((p) => (
+                <div
+                  key={p}
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => handlePlatformChange(p)}
+                  style={{ ...S.pBtn, ...(platform === p ? S.pBtnActive : {}) }}
+                >
+                  {p === 'ios' ? 'iOS' : 'Android'}
+                </div>
+              ))}
+            </div>
+
+            {/* Search + Create toggle */}
+            <div style={{ padding: '10px 16px 8px', display: 'flex', gap: 8 }}>
               <input
                 autoFocus
                 type="text"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
                 placeholder="Anahtar veya çeviri ara…"
-                style={styles.searchInput}
+                style={{ ...S.searchInput, flex: 1 }}
               />
+              <div
+                role="button"
+                tabIndex={0}
+                onClick={() => setShowCreate(!showCreate)}
+                style={S.createToggle}
+              >
+                {showCreate ? '← Ara' : '+ Yeni'}
+              </div>
             </div>
-            {/* Info */}
-            {preloadDone && (
-              <div style={styles.infoBar}>
-                {filteredRecords.length} / {allRecords.length} anahtar
+
+            {/* === Create form === */}
+            {showCreate ? (
+              <div style={S.createForm}>
+                <div style={S.createField}>
+                  <label style={S.createLabel}>Anahtar</label>
+                  <input
+                    type="text"
+                    value={newKey}
+                    onChange={(e) => setNewKey(e.target.value)}
+                    placeholder="örn: faq.category.general"
+                    style={S.searchInput}
+                  />
+                </div>
+                <div style={S.createField}>
+                  <label style={S.createLabel}>English</label>
+                  <input
+                    type="text"
+                    value={newEN}
+                    onChange={(e) => setNewEN(e.target.value)}
+                    placeholder="English translation"
+                    style={S.searchInput}
+                  />
+                </div>
+                <div style={S.createField}>
+                  <label style={S.createLabel}>Türkçe</label>
+                  <input
+                    type="text"
+                    value={newTR}
+                    onChange={(e) => setNewTR(e.target.value)}
+                    placeholder="Türkçe çeviri"
+                    style={S.searchInput}
+                  />
+                </div>
+                {createError && <div style={S.errorMsg}>{createError}</div>}
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={handleCreate}
+                  style={{
+                    ...S.saveBtn,
+                    opacity: creating || !newKey.trim() ? 0.5 : 1,
+                    pointerEvents: creating || !newKey.trim() ? 'none' : 'auto',
+                  }}
+                >
+                  {creating ? 'Kaydediliyor…' : 'Oluştur ve Seç'}
+                </div>
               </div>
-            )}
-            {/* Results */}
-            <div style={styles.resultsList}>
-              {loading && <div style={styles.emptyMsg}>Yükleniyor…</div>}
-              {!loading && preloadDone && filteredRecords.length === 0 && (
-                <div style={styles.emptyMsg}>Sonuç bulunamadı</div>
-              )}
-              {filteredRecords.map((entry) => {
-                const isSelected = entry.key === value;
-                const translations = Object.entries(entry.translations);
-                return (
-                  <button
-                    key={entry.key}
-                    type="button"
-                    onClick={() => {
-                      onChange(entry.key);
-                      setOpen(false);
-                    }}
-                    style={{
-                      ...styles.resultItem,
-                      background: isSelected ? '#333' : 'transparent',
-                      border: isSelected
-                        ? '1px solid #6366f1'
-                        : '1px solid #333',
-                    }}
-                    onMouseEnter={(e) => {
-                      if (!isSelected)
-                        e.currentTarget.style.background = '#2a2a2a';
-                    }}
-                    onMouseLeave={(e) => {
-                      if (!isSelected)
-                        e.currentTarget.style.background = 'transparent';
-                    }}
-                  >
-                    <div
-                      style={{
-                        fontWeight: 600,
-                        fontSize: 12,
-                        color: '#e0e0e0',
-                      }}
-                    >
-                      {entry.key}
-                    </div>
-                    {translations.slice(0, 3).map(([lang, cell]) => (
-                      <div key={lang} style={styles.translationRow}>
-                        <span style={styles.langBadge}>{lang}</span>
-                        <span style={styles.translationText}>
-                          {cell?.value && cell.value.length > 80
-                            ? cell.value.slice(0, 80) + '…'
-                            : cell?.value || (
-                                <span style={{ color: '#ef4444' }}>Eksik</span>
-                              )}
-                        </span>
+            ) : (
+              <>
+                {/* Info bar */}
+                {dataReady && (
+                  <div style={S.infoBar}>
+                    {filteredRecords.length} / {allRecords.length} anahtar
+                  </div>
+                )}
+
+                {/* Results */}
+                <div style={S.resultsList}>
+                  {loading && <div style={S.emptyMsg}>Yükleniyor…</div>}
+                  {!loading && dataReady && filteredRecords.length === 0 && (
+                    <div style={S.emptyMsg}>Kayıt bulunamadı.</div>
+                  )}
+                  {filteredRecords.map((entry) => {
+                    const isSelected = entry.key === value;
+                    const missingCount = resolveMissingCount(entry);
+                    const pvEN = getTranslation(entry, primaryLang.code);
+
+                    return (
+                      <div
+                        key={entry.key}
+                        role="button"
+                        tabIndex={0}
+                        onClick={() => handleSelect(entry)}
+                        onKeyDown={(e) =>
+                          e.key === 'Enter' && handleSelect(entry)
+                        }
+                        style={{
+                          ...S.resultCard,
+                          ...(isSelected ? S.resultCardActive : {}),
+                        }}
+                        onMouseEnter={(e) => {
+                          if (!isSelected)
+                            e.currentTarget.style.background = '#272730';
+                        }}
+                        onMouseLeave={(e) => {
+                          if (!isSelected)
+                            e.currentTarget.style.background = isSelected
+                              ? 'rgba(99,102,241,0.12)'
+                              : 'transparent';
+                        }}
+                      >
+                        <div style={S.resultKeyRow}>
+                          <span style={S.resultKey}>{entry.key}</span>
+                          <div
+                            style={{
+                              display: 'flex',
+                              gap: 5,
+                              flexShrink: 0,
+                              alignItems: 'center',
+                            }}
+                          >
+                            <span style={S.badgeSmall}>
+                              {platform.toUpperCase()}
+                            </span>
+                            {missingCount > 0 && (
+                              <span style={S.missingBadge}>
+                                Eksik {missingCount}
+                              </span>
+                            )}
+                            {isSelected && (
+                              <span style={S.selectedBadge}>✔</span>
+                            )}
+                          </div>
+                        </div>
+                        <div style={S.transRow}>
+                          <span style={S.langBadge}>
+                            {primaryLang.title || primaryLang.code}
+                          </span>
+                          <span style={pvEN ? S.transVal : S.transMissing}>
+                            {pvEN
+                              ? pvEN.length > 100
+                                ? pvEN.slice(0, 100) + '…'
+                                : pvEN
+                              : 'Eksik'}
+                          </span>
+                        </div>
                       </div>
-                    ))}
-                  </button>
-                );
-              })}
-            </div>
+                    );
+                  })}
+                </div>
+              </>
+            )}
           </div>
         </div>
       )}
@@ -253,37 +581,85 @@ export function FallbackLocalizationField({
   );
 }
 
-const styles: Record<string, React.CSSProperties> = {
-  row: {
+// ─── Styles ──────────────────────────────────────────────────────
+
+const S: Record<string, React.CSSProperties> = {
+  compactCard: {
+    display: 'block',
+    width: '100%',
+    textAlign: 'left' as const,
+    background: 'transparent',
+    border: '1px solid hsl(0 0% 30%)',
+    borderRadius: 8,
+    padding: '8px 10px',
+    cursor: 'pointer',
+  },
+  compactHeader: {
     display: 'flex',
     alignItems: 'center',
-    gap: 4,
+    gap: 6,
+    marginBottom: 4,
+  },
+  compactLabel: {
+    fontSize: 10,
+    fontWeight: 600,
+    textTransform: 'uppercase' as const,
+    color: '#888',
+    letterSpacing: '0.05em',
+  },
+  clearBtn: {
+    cursor: 'pointer',
+    fontSize: 12,
+    color: '#666',
+    padding: '0 2px',
+    marginLeft: 'auto',
+    userSelect: 'none' as const,
   },
-  browseBtn: {
-    width: 28,
-    height: 28,
+  keyRow: {
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'center',
-    border: '1px solid hsl(0 0% 40%)',
-    borderRadius: 4,
-    background: '#2a2a2a',
-    color: '#fff',
-    cursor: 'pointer',
-    fontSize: 13,
-    flexShrink: 0,
+    justifyContent: 'space-between',
+    gap: 8,
+    marginBottom: 4,
   },
-  dot: {
-    display: 'inline-block',
-    width: 8,
-    height: 8,
-    borderRadius: '50%',
-    backgroundColor: '#ef4444',
-    flexShrink: 0,
-    cursor: 'help',
+  keyText: {
+    fontSize: 12,
+    color: '#ccc',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap' as const,
+    flex: 1,
   },
+  transRow: { display: 'flex', alignItems: 'center', gap: 6, marginTop: 3 },
+  transVal: {
+    fontSize: 11,
+    color: '#bbb',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap' as const,
+    textOverflow: 'ellipsis',
+    flex: 1,
+  },
+  transMissing: { fontSize: 11, color: '#ef4444', flex: 1 },
+
+  emptyWrap: { display: 'flex', flexDirection: 'column' as const, gap: 4 },
+  emptyBtn: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    padding: '7px 10px',
+    border: '1px solid hsl(0 0% 30%)',
+    borderRadius: 6,
+    background: 'transparent',
+    color: '#ccc',
+    fontSize: 12,
+    cursor: 'pointer',
+    textAlign: 'left' as const,
+  },
+  configWarn: { fontSize: 10, color: '#ef4444', marginTop: 2 },
+
   overlay: {
-    position: 'fixed',
+    position: 'fixed' as const,
     inset: 0,
     background: 'rgba(0,0,0,0.6)',
     zIndex: 9999,
@@ -292,93 +668,192 @@ const styles: Record<string, React.CSSProperties> = {
     justifyContent: 'center',
   },
   modal: {
-    background: '#1e1e1e',
-    borderRadius: 10,
-    width: 460,
-    maxHeight: '75vh',
+    background: '#1a1a22',
+    borderRadius: 12,
+    width: 560,
+    maxHeight: '80vh',
     display: 'flex',
-    flexDirection: 'column',
-    boxShadow: '0 12px 40px rgba(0,0,0,0.5)',
+    flexDirection: 'column' as const,
+    boxShadow: '0 16px 48px rgba(0,0,0,0.6)',
     color: '#e0e0e0',
-    border: '1px solid #333',
+    border: '1px solid #2a2a35',
     overflow: 'hidden',
   },
-  header: {
+  modalHeader: {
     display: 'flex',
     justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: '14px 18px',
-    borderBottom: '1px solid #333',
+    alignItems: 'flex-start',
+    padding: '16px 18px',
+    borderBottom: '1px solid #2a2a35',
+    gap: 12,
   },
   closeBtn: {
-    background: 'none',
-    border: 'none',
     cursor: 'pointer',
     fontSize: 18,
     color: '#999',
     padding: 4,
+    userSelect: 'none' as const,
+  },
+  refreshBtn: {
+    cursor: 'pointer',
+    fontSize: 18,
+    color: '#6366f1',
+    padding: 4,
+    userSelect: 'none' as const,
+  },
+
+  platformBar: {
+    display: 'flex',
+    gap: 8,
+    padding: '10px 16px 8px',
+    borderBottom: '1px solid #2a2a35',
+  },
+  pBtn: {
+    padding: '5px 14px',
+    borderRadius: 6,
+    border: '1px solid #3a3a45',
+    background: 'transparent',
+    color: '#999',
+    fontSize: 12,
+    fontWeight: 600,
+    cursor: 'pointer',
+    userSelect: 'none' as const,
   },
+  pBtnActive: { background: '#6366f1', borderColor: '#6366f1', color: '#fff' },
+
   searchInput: {
     width: '100%',
-    padding: '8px 10px',
-    border: '1px solid #444',
+    padding: '8px 12px',
+    border: '1px solid #3a3a45',
     borderRadius: 6,
-    background: '#2a2a2a',
+    background: '#22222a',
     color: '#e0e0e0',
     fontSize: 13,
     outline: 'none',
     boxSizing: 'border-box' as const,
   },
+  createToggle: {
+    padding: '6px 14px',
+    borderRadius: 6,
+    border: '1px solid #6366f1',
+    background: 'transparent',
+    color: '#6366f1',
+    fontSize: 12,
+    fontWeight: 600,
+    cursor: 'pointer',
+    whiteSpace: 'nowrap' as const,
+    userSelect: 'none' as const,
+  },
+
   infoBar: {
-    padding: '2px 18px 4px',
+    padding: '2px 18px 6px',
     fontSize: 11,
-    color: '#666',
+    color: '#555',
     textAlign: 'right' as const,
   },
+
   resultsList: {
     overflowY: 'auto' as const,
     flex: 1,
-    padding: '6px 10px 10px',
+    padding: '4px 10px 10px',
   },
   emptyMsg: {
-    padding: 20,
+    padding: 28,
     textAlign: 'center' as const,
-    color: '#888',
+    color: '#666',
     fontSize: 13,
   },
-  resultItem: {
+  resultCard: {
     display: 'block',
     width: '100%',
     textAlign: 'left' as const,
-    borderRadius: 6,
-    padding: '8px 10px',
+    borderRadius: 8,
+    padding: '10px 12px',
     cursor: 'pointer',
-    marginBottom: 3,
-    transition: 'background 0.15s',
+    marginBottom: 4,
+    border: '1px solid #2a2a35',
+    background: 'transparent',
   },
-  translationRow: {
+  resultCardActive: {
+    background: 'rgba(99,102,241,0.12)',
+    borderColor: '#6366f1',
+  },
+  resultKeyRow: {
     display: 'flex',
     alignItems: 'center',
-    gap: 6,
-    marginTop: 3,
-    fontSize: 11,
+    justifyContent: 'space-between',
+    gap: 8,
   },
+  resultKey: {
+    fontWeight: 600,
+    fontSize: 13,
+    color: '#e0e0e0',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap' as const,
+    flex: 1,
+  },
+
   langBadge: {
     display: 'inline-block',
-    background: '#333',
-    border: '1px solid #444',
-    borderRadius: 3,
-    padding: '1px 5px',
+    background: '#2a2a35',
+    border: '1px solid #3a3a45',
+    borderRadius: 4,
+    padding: '1px 6px',
     fontSize: 10,
     fontWeight: 600,
     color: '#aaa',
     flexShrink: 0,
   },
-  translationText: {
-    color: '#999',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap' as const,
-    textOverflow: 'ellipsis',
-    flex: 1,
+  badgeSmall: {
+    display: 'inline-block',
+    background: '#2a2a35',
+    border: '1px solid #3a3a45',
+    borderRadius: 4,
+    padding: '1px 5px',
+    fontSize: 9,
+    fontWeight: 600,
+    color: '#888',
+    textTransform: 'uppercase' as const,
+  },
+  missingBadge: {
+    display: 'inline-block',
+    background: 'rgba(239,68,68,0.15)',
+    border: '1px solid rgba(239,68,68,0.3)',
+    borderRadius: 4,
+    padding: '1px 6px',
+    fontSize: 10,
+    fontWeight: 600,
+    color: '#ef4444',
+  },
+  selectedBadge: { fontSize: 10, color: '#6366f1', fontWeight: 600 },
+
+  /* Create form */
+  createForm: {
+    padding: '12px 16px',
+    display: 'flex',
+    flexDirection: 'column' as const,
+    gap: 10,
+  },
+  createField: { display: 'flex', flexDirection: 'column' as const, gap: 4 },
+  createLabel: {
+    fontSize: 11,
+    fontWeight: 600,
+    color: '#888',
+    textTransform: 'uppercase' as const,
+  },
+  errorMsg: { fontSize: 12, color: '#ef4444', padding: '4px 0' },
+  saveBtn: {
+    padding: '8px 16px',
+    borderRadius: 6,
+    background: '#6366f1',
+    color: '#fff',
+    fontSize: 13,
+    fontWeight: 600,
+    cursor: 'pointer',
+    textAlign: 'center' as const,
+    userSelect: 'none' as const,
+    border: 'none',
+    marginTop: 4,
   },
 };