فرانت‌اند: نسخه انگلیسی با مسیر /en/ — مسیریابی دوزبانه، دیکشنری رابط، بومی‌سازی داده، تغییر زبان در هدر، ویرایش انگلیسی در پنل و پشتیبانی LTR

frontend/src/admin/AdminContext.tsx

@@ -4,8 +4,11 @@ import Swal from 'sweetalert2'
 import type { SiteData } from '../api'
 import { useSiteData } from '../api'
 import { adminApi, getToken, HttpError, setToken } from './adminClient'
+import { ENTITIES, isTranslatable } from './entities'
 
 export type SaveStatus = 'idle' | 'saving' | 'error'
+/** زبان ویرایش محتوا — رابط مدیریتی فارسی می‌ماند؛ این فقط تعیین می‌کند کدام ستون زبان ذخیره شود */
+export type EditLang = 'fa' | 'en'
 
 interface AdminContextValue {
   isAuthenticated: boolean
@@ -16,6 +19,9 @@ interface AdminContextValue {
   saveStatus: SaveStatus
   /** اجرای یک عملیات ذخیره — وضعیت نوار ادمین را به‌روز می‌کند و خطاها را با دکمه تلاش دوباره نشان می‌دهد */
   runSave: (action: () => Promise<void>) => Promise<boolean>
+  /** زبان محتوایی که در حالت ویرایش ذخیره می‌شود (فارسی یا انگلیسی) */
+  editLang: EditLang
+  toggleEditLang: () => void
 }
 
 const AdminContext = createContext<AdminContextValue | null>(null)
@@ -54,6 +60,9 @@ export function AdminProvider({ children }: { children: ReactNode }) {
   const [isEditMode, setIsEditMode] = useState<boolean>(
     () => sessionStorage.getItem('aramesh_edit_mode') === '1',
   )
+  const [editLang, setEditLang] = useState<EditLang>(
+    () => (sessionStorage.getItem('aramesh_edit_lang') === 'en' ? 'en' : 'fa'),
+  )
   const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle')
   const { reload } = useSiteData()
 
@@ -64,6 +73,14 @@ export function AdminProvider({ children }: { children: ReactNode }) {
     })
   }, [])
 
+  const toggleEditLang = useCallback(() => {
+    setEditLang((v) => {
+      const next: EditLang = v === 'fa' ? 'en' : 'fa'
+      sessionStorage.setItem('aramesh_edit_lang', next)
+      return next
+    })
+  }, [])
+
   const login = useCallback(async (username: string, password: string) => {
     await adminApi.login(username, password)
     setIsAuthenticated(true)
@@ -131,8 +148,10 @@ export function AdminProvider({ children }: { children: ReactNode }) {
       logout,
       saveStatus,
       runSave,
+      editLang,
+      toggleEditLang,
     }),
-    [isAuthenticated, isEditMode, toggleEditMode, login, logout, saveStatus, runSave],
+    [isAuthenticated, isEditMode, toggleEditMode, login, logout, saveStatus, runSave, editLang, toggleEditLang],
   )
 
   return <AdminContext.Provider value={value}>{children}</AdminContext.Provider>
@@ -141,9 +160,14 @@ export function AdminProvider({ children }: { children: ReactNode }) {
 /**
  * پرکاربردترین کمک‌ساز ویرایش: یک فیلد واحد را PATCH می‌کند و پس از موفقیت
  * همان تغییر را به‌صورت خوش‌بینانه در درخت داده سایت اعمال می‌کند.
+ *
+ * در حالت ویرایش انگلیسی، کلیدهای قابل ترجمه به پسوند _en نگاشت می‌شوند؛ چون
+ * برخی mutatorهای کامپوننت‌ها نام فیلد را جداگانه می‌نویسند، مقدار قبلی فیلدهای
+ * فارسی اسنپ‌شات می‌شود و پس از اجرای mutator بازگردانده می‌شود تا متن انگلیسی
+ * هرگز جای متن فارسی در درخت خام ننشیند.
  */
 export function useFieldSaver() {
-  const { runSave } = useAdmin()
+  const { runSave, editLang } = useAdmin()
   const { updateSite } = useSiteData()
 
   return useCallback(
@@ -154,9 +178,50 @@ export function useFieldSaver() {
       apply: (data: SiteData) => void,
     ): Promise<boolean> =>
       runSave(async () => {
+        const originalKeys = Object.keys(changes)
+        if (editLang === 'en') {
+          const mapped: Record<string, unknown> = {}
+          for (const [key, value] of Object.entries(changes)) {
+            mapped[isTranslatable(resource, key) ? `${key}_en` : key] = value
+          }
+          for (const key of Object.keys(changes)) delete changes[key]
+          Object.assign(changes, mapped)
+        }
         await adminApi.patch(resource, id, changes)
-        updateSite(apply)
+        updateSite((d) => {
+          const config = ENTITIES[resource]
+          let node: Record<string, unknown> | undefined
+          if (config) {
+            const target = d[config.dataKey as keyof SiteData] as unknown
+            node =
+              config.kind === 'singleton'
+                ? (target as Record<string, unknown> | undefined)
+                : (target as { id: number }[] | undefined)?.find((x) => x.id === id)
+          }
+          const snapshot =
+            editLang === 'en' && node
+              ? Object.fromEntries(originalKeys.filter((k) => k !== 'id').map((k) => [k, node![k]]))
+              : null
+          apply(d)
+          if (snapshot && node) {
+            Object.assign(node, snapshot)
+            Object.assign(node, changes)
+          }
+        })
       }),
-    [runSave, updateSite],
+    [runSave, updateSite, editLang],
+  )
+}
+
+/**
+ * نام فیلد متناظر با زبان ویرایش جاری — در حالت انگلیسی فیلدهای قابل ترجمه
+ * پسوند _en می‌گیرند. برای جاهایی که نام فیلد جدا از شیء تغییرات ذخیره می‌شود.
+ */
+export function useEditField() {
+  const { editLang } = useAdmin()
+  return useCallback(
+    (resource: string, field: string) =>
+      editLang === 'en' && isTranslatable(resource, field) ? `${field}_en` : field,
+    [editLang],
   )
 }