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

frontend/src/admin/EntityDrawer.tsx

@@ -5,6 +5,7 @@ import Swal from 'sweetalert2'
 import { useSiteData } from '../api'
 import { useAdmin, useFieldSaver } from './AdminContext'
 import { adminApi } from './adminClient'
+import { editableFields } from './entities'
 import type { EntityConfig, FieldConfig } from './entities'
 import { ImageField } from '../components/admin/ImageField'
 import { ArticleEditor } from '../components/admin/ArticleEditor'
@@ -20,11 +21,16 @@ type EntityDrawerProps = {
 
 export function EntityDrawer({ config, item, onClose, deletable = false }: EntityDrawerProps) {
   const save = useFieldSaver()
-  const { runSave } = useAdmin()
+  const { runSave, editLang } = useAdmin()
   const { reload } = useSiteData()
   const [deleting, setDeleting] = useState(false)
   const flushRef = useRef<() => void>(() => {})
 
+  // در ویرایش انگلیسی فقط فیلدهای قابل ترجمه با نام انگلیسی رندر می‌شوند؛
+  // متن فارسی همان فیلد به‌عنوان جای‌نگهدار نشان داده می‌شود تا مترجم زمینه را ببیند
+  const fields = editableFields(config, editLang)
+  const faBase = (name: string) => name.replace(/_en$/, '')
+
   const closeWithFlush = () => {
     flushRef.current()
     onClose()
@@ -111,11 +117,12 @@ export function EntityDrawer({ config, item, onClose, deletable = false }: Entit
 
         <div className="flex-1 overflow-y-auto px-6 py-6">
           <div className="grid gap-6">
-            {config.fields.map((field) => (
+            {fields.map((field) => (
               <FieldControl
                 key={field.name}
                 field={field}
                 value={item[field.name]}
+                placeholder={editLang === 'en' ? item[faBase(field.name)] : undefined}
                 onSave={(value) => saveField(field.name, value)}
                 registerFlush={
                   field.type === 'wysiwyg'
@@ -150,11 +157,14 @@ export function EntityDrawer({ config, item, onClose, deletable = false }: Entit
 function FieldControl({
   field,
   value,
+  placeholder,
   onSave,
   registerFlush,
 }: {
   field: FieldConfig
   value: unknown
+  /** مقدار فارسی همان فیلد — فقط در ویرایش انگلیسی به‌عنوان جای‌نگهدار نمایش داده می‌شود */
+  placeholder?: unknown
   onSave: (value: unknown) => Promise<boolean>
   registerFlush?: (fn: () => void) => void
 }) {
@@ -171,11 +181,19 @@ function FieldControl({
   }
 
   if (field.type === 'wysiwyg') {
-    return <WysiwygField field={field} value={value} onSave={onSave} registerFlush={registerFlush} />
+    return (
+      <WysiwygField
+        field={field}
+        value={value}
+        onSave={onSave}
+        registerFlush={registerFlush}
+        hint={placeholder ? 'خالی = بازدیدکننده متن فارسی را می‌بیند' : undefined}
+      />
+    )
   }
 
   if (field.type === 'list') {
-    return <ListField field={field} value={value} onSave={onSave} />
+    return <ListField field={field} value={value} onSave={onSave} hint={placeholder ? 'خالی = بازدیدکننده فهرست فارسی را می‌بیند' : undefined} />
   }
 
   if (field.type === 'textarea') {
@@ -185,6 +203,7 @@ function FieldControl({
         <textarea
           dir="auto"
           rows={4}
+          placeholder={placeholder ? String(placeholder) : undefined}
           value={text}
           onChange={(e) => setText(e.target.value)}
           onBlur={commitText}
@@ -201,6 +220,7 @@ function FieldControl({
       <input
         dir={field.type === 'number' ? 'ltr' : 'auto'}
         type={field.type === 'number' ? 'number' : 'text'}
+        placeholder={placeholder ? String(placeholder) : undefined}
         value={text}
         onChange={(e) => setText(e.target.value)}
         onBlur={commitText}
@@ -215,10 +235,12 @@ function ListField({
   field,
   value,
   onSave,
+  hint,
 }: {
   field: FieldConfig
   value: unknown
   onSave: (value: unknown) => Promise<boolean>
+  hint?: string
 }) {
   const [lines, setLines] = useState<string[]>(Array.isArray(value) ? (value as string[]) : [])
 
@@ -231,6 +253,7 @@ function ListField({
     <div>
       <p className="text-xs font-bold text-ivory/80">{field.label}</p>
       {field.hint && <p className="mt-1 text-[10px] font-light text-ivory/40">{field.hint}</p>}
+      {hint && <p className="mt-1 text-[10px] font-light text-copper/70">{hint}</p>}
       <div className="mt-2 grid gap-2">
         {lines.map((line, i) => (
           <div key={i} className="flex items-start gap-2">
@@ -278,11 +301,13 @@ function WysiwygField({
   value,
   onSave,
   registerFlush,
+  hint,
 }: {
   field: FieldConfig
   value: unknown
   onSave: (value: unknown) => Promise<boolean>
   registerFlush?: (fn: () => void) => void
+  hint?: string
 }) {
   const [doc, setDoc] = useState<Record<string, unknown>>(() =>
     value && typeof value === 'object' && !Array.isArray(value)
@@ -328,6 +353,7 @@ function WysiwygField({
   return (
     <div>
       <p className="text-xs font-bold text-ivory/80">{field.label}</p>
+      {hint && <p className="mt-1 text-[10px] font-light text-copper/70">{hint}</p>}
       <p className="mt-1 text-[10px] font-light text-ivory/40">
         ذخیره خودکار — تصویر را داخل متن بچسبانید یا بکشید
       </p>