feat(admin): enhance editor UI (links, image captions) & fix categories

Added animated auto-opening link modal, custom image node with isolated caption deletion, fixed single-select category data binding, improved featured image layout, and updated README.

frontend/src/admin/EntityDrawer.tsx

@@ -8,7 +8,7 @@ import { adminApi } from './adminClient'
 import type { EntityConfig, FieldConfig } from './entities'
 import { ImageField } from '../components/admin/ImageField'
 import { JalaliDatePicker } from '../components/admin/JalaliDatePicker'
-import { LuxeSelect, LuxeTagsSelect } from '../components/admin/LuxeSelect'
+import { LuxeCreatableSelect, LuxeSelect, LuxeTagsSelect } from '../components/admin/LuxeSelect'
 import { ArticleEditor } from '../components/admin/ArticleEditor'
 
 type EntityDrawerProps = {
@@ -114,22 +114,34 @@ 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) => {
+              const isImage = field.type === 'image'
               // فیلد Alt تصویر: برای گالری همان ستون alt و برای بقیه <نام فیلد>_alt
-              const altKey =
-                field.type === 'image'
-                  ? field.name === 'src' && 'alt' in item
-                    ? 'alt'
-                    : `${field.name}_alt`
-                  : ''
+              const altKey = isImage
+                ? field.name === 'src' && 'alt' in item
+                  ? 'alt'
+                  : `${field.name}_alt`
+                : ''
+              const imageTitleKey = isImage ? `${field.name}_title` : ''
+              // پیشنهاد Alt از عنوان رکورد ساخته می‌شود (هرگز از URL)
+              const imageAltFallback = [
+                String(item[config.titleKey] ?? '').trim(),
+                field.altFallbackSuffix,
+              ]
+                .filter(Boolean)
+                .join(' - ')
               return (
                 <FieldControl
                   key={field.name}
                   field={field}
                   value={item[field.name]}
                   altValue={altKey ? String(item[altKey] ?? '') : undefined}
-                  altFallback={String(item[config.titleKey] ?? '')}
+                  altFallback={imageAltFallback}
+                  imageTitleValue={imageTitleKey ? String(item[imageTitleKey] ?? '') : undefined}
                   onSave={(value) => saveField(field.name, value)}
                   onSaveAlt={altKey ? (alt) => saveField(altKey, alt) : undefined}
+                  onSaveImageTitle={
+                    imageTitleKey ? (title) => saveField(imageTitleKey, title) : undefined
+                  }
                   registerFlush={
                     field.type === 'wysiwyg'
                       ? (fn) => {
@@ -166,8 +178,10 @@ function FieldControl({
   value,
   altValue,
   altFallback,
+  imageTitleValue,
   onSave,
   onSaveAlt,
+  onSaveImageTitle,
   registerFlush,
 }: {
   field: FieldConfig
@@ -175,12 +189,20 @@ function FieldControl({
   /** مقدار Alt تصویر — فقط برای فیلدهای image */
   altValue?: string
   altFallback?: string
+  /** مقدار Title تصویر — فقط برای فیلدهای image */
+  imageTitleValue?: string
   onSave: (value: unknown) => Promise<boolean>
   onSaveAlt?: (alt: string) => Promise<boolean>
+  onSaveImageTitle?: (title: string) => Promise<boolean>
   registerFlush?: (fn: () => void) => void
 }) {
   const [text, setText] = useState<string>(String(value ?? ''))
 
+  // همگام‌سازی مقدار محلی با داده‌ای که از بیرون می‌آید (بارگذاری/به‌روزرسانی خوش‌بینانه)
+  useEffect(() => {
+    setText(String(value ?? ''))
+  }, [value])
+
   const commitText = async () => {
     const next = field.type === 'number' ? Number(text) || 0 : text
     if (String(value ?? '') === String(next)) return
@@ -194,26 +216,34 @@ function FieldControl({
         value={String(value ?? '')}
         alt={altValue}
         altFallback={altFallback}
+        title={imageTitleValue}
         onSave={(url) => onSave(url)}
         onSaveAlt={onSaveAlt}
+        onSaveTitle={onSaveImageTitle}
       />
     )
   }
 
   if (field.type === 'select') {
+    // مقدار نمایشی از وضعیت محلی می‌آید تا افزودن/حذف گزینه فوراً دیده شود
+    const selectProps = {
+      value: text,
+      options: field.options ?? [],
+      onChange: (next: string) => {
+        setText(next)
+        void onSave(next)
+      },
+    }
     return (
       <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>}
         <div className="mt-2">
-          <LuxeSelect
-            value={String(value ?? '')}
-            options={field.options ?? []}
-            onChange={(next) => {
-              setText(next)
-              void onSave(next)
-            }}
-          />
+          {field.creatable ? (
+            <LuxeCreatableSelect {...selectProps} />
+          ) : (
+            <LuxeSelect {...selectProps} />
+          )}
         </div>
       </div>
     )