Update blog editor features

frontend/src/admin/ArticleWritePage.tsx

@@ -8,22 +8,21 @@ import { adminApi } from './adminClient'
 import { ArticleEditor } from '../components/admin/ArticleEditor'
 import { SeoChecklist } from '../components/admin/SeoChecklist'
 import { ImageField } from '../components/admin/ImageField'
-import type { ArticleBodyDoc } from '../data/site'
+import { JalaliDatePicker } from '../components/admin/JalaliDatePicker'
+import { LuxeSelect, LuxeTagsSelect } from '../components/admin/LuxeSelect'
+import { ARTICLE_CATEGORIES } from './entities'
+import type { Article, ArticleBodyDoc } from '../data/site'
 
 const EMPTY_DOC = { type: 'doc', content: [{ type: 'paragraph' }] } as unknown as ArticleBodyDoc
 
-type Draft = {
-  id: number
-  slug: string
-  title: string
-  date: string
-  category: string
-  image: string
-  read: string
-  excerpt: string
-  body: ArticleBodyDoc
-  status: 'draft' | 'published'
-  seo_keyphrase: string
+/** پیش‌نویس صفحه نوشتن — همان شکل Article با بدنه ساختاریافته */
+type Draft = Omit<Article, 'body'> & { body: ArticleBodyDoc }
+
+/** داده‌های قدیمی ممکن است هشتگ را رشته کاماشده داشته باشند */
+function normalizeTags(value: unknown): string[] {
+  if (Array.isArray(value)) return value.map((t) => String(t).trim()).filter(Boolean)
+  if (typeof value === 'string') return value.split(',').map((t) => t.trim()).filter(Boolean)
+  return []
 }
 
 const STATUS_TEXT: Record<string, string> = {
@@ -50,9 +49,13 @@ export function ArticleWritePage() {
     id: 0,
     slug: `article-${Date.now()}`,
     title: '',
-    date: new Date().toLocaleDateString('fa-IR'),
-    category: 'یادداشت',
+    date: new Date().toISOString().split('T')[0],
+    category: ARTICLE_CATEGORIES[0],
+    tags: [],
     image: '',
+    image_alt: '',
+    author: '',
+    meta_description: '',
     read: '۵ دقیقه',
     excerpt: '',
     body: EMPTY_DOC,
@@ -92,6 +95,7 @@ export function ArticleWritePage() {
     if (!article || createdRef.current) return
     setDraft({
       ...article,
+      tags: normalizeTags(article.tags),
       body: (Array.isArray(article.body) ? EMPTY_DOC : article.body) as ArticleBodyDoc,
     })
     setCreatedId(article.id)
@@ -190,6 +194,8 @@ export function ArticleWritePage() {
       queueSave({ [name]: e.target.value }),
   })
 
+  const metaLength = (draft.meta_description ?? '').trim().length
+
   return (
     <div dir="rtl" className="min-h-screen bg-ink font-pinar text-ivory">
       {/* نوار بالا */}
@@ -280,15 +286,21 @@ export function ArticleWritePage() {
         />
         <div className="mt-4 h-px w-28 bg-copper" />
 
-        {/* تصویر شاخص */}
+        {/* تصویر شاخص + متن جایگزین */}
         <div className="mt-8">
           <ImageField
             label="تصویر شاخص مقاله"
             value={draft.image}
+            alt={draft.image_alt ?? ''}
+            altFallback={draft.title}
             onSave={async (url) => {
               queueSave({ image: url })
               return true
             }}
+            onSaveAlt={async (alt) => {
+              queueSave({ image_alt: alt })
+              return true
+            }}
           />
         </div>
 
@@ -296,23 +308,54 @@ export function ArticleWritePage() {
         <div className="mt-8">
           <ArticleEditor
             doc={draft.body as unknown as Record<string, unknown>}
-            onChange={(json) => queueSave({ body: json })}
+            onChange={(json) => {
+              // محاسبه خودکار زمان مطالعه بر اساس تعداد کلمات متن
+              const textContent = JSON.stringify(json)
+              const wordCount = textContent.split(/\s+/).length
+              const calculatedReadTime = Math.max(1, Math.ceil(wordCount / 200)) + ' دقیقه'
+              queueSave({ body: json, read: calculatedReadTime })
+            }}
           />
         </div>
 
+        {/* توضیحات متای سئو */}
+        <section className="mt-8 border border-ivory/15 bg-char p-6">
+          <div className="flex items-center justify-between gap-3">
+            <h2 className="text-sm font-bold text-copper">توضیحات سئو (Meta Description)</h2>
+            <span
+              className={`text-[11px] font-light ${
+                metaLength >= 150 && metaLength <= 160 ? 'text-emerald-400' : 'text-ivory/40'
+              }`}
+            >
+              {metaLength.toLocaleString('fa-IR')} از ۱۶۰ نویسه
+            </span>
+          </div>
+          <p className="mt-1 text-xs font-light text-ivory/50">
+            این همان متنی است که در صفحه نتایج گوگل زیر لینک مقاله به کاربران نمایش داده می‌شود (۱۵۰ تا ۱۶۰ نویسه).
+          </p>
+          <textarea
+            id="meta-description"
+            rows={3}
+            value={draft.meta_description ?? ''}
+            onChange={(e) => queueSave({ meta_description: e.target.value })}
+            placeholder="توضیح جذابی برای گوگل بنویسید که شامل کلمه کلیدی باشد…"
+            className="mt-3 w-full resize-y border border-ivory/15 bg-ink px-4 py-3 text-sm font-light leading-8 text-ivory focus:border-copper focus:outline-none"
+          />
+        </section>
+
         {/* چکیده و متادیتا */}
         <SeoChecklist
           input={{
             title: draft.title,
             slug: draft.slug,
-            excerpt: draft.excerpt,
+            excerpt: draft.meta_description || draft.excerpt,
             body: draft.body,
             keyphrase: draft.seo_keyphrase,
           }}
         />
 
         <section className="mt-12 border-t border-ivory/10 pt-8" aria-label="جزئیات مقاله">
-          <h2 className="text-sm font-bold text-copper">جزئیات انتشار</h2>
+          <h2 className="text-sm font-bold text-copper">جزئیات انتشار، دسته‌بندی و هشتگ‌ها</h2>
           <div className="mt-5 grid gap-5">
             <div>
               <label htmlFor="seo-keyphrase" className="text-xs font-light text-ivory/50">کلمه کلیدی هدف (فقط برای راهنمای سئو — در سایت نمایش داده نمی‌شود)</label>
@@ -324,37 +367,70 @@ export function ArticleWritePage() {
                 className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
               />
             </div>
-            <div>
-              <label className="text-xs font-light text-ivory/50">چکیده (روی کارت مقاله نمایش داده می‌شود)</label>
-              <textarea
-                rows={2}
-                {...textField('excerpt')}
-                className="mt-2 w-full resize-y border border-ivory/15 bg-char px-4 py-3 text-sm font-light leading-8 text-ivory focus:border-copper focus:outline-none"
-              />
+
+            <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
+              <div>
+                <label className="text-xs font-light text-ivory/50">چکیده (روی کارت مقاله نمایش داده می‌شود)</label>
+                <textarea
+                  rows={2}
+                  {...textField('excerpt')}
+                  placeholder="خلاصه کوتاه مقاله برای کارت‌های وبلاگ…"
+                  className="mt-2 w-full resize-y border border-ivory/15 bg-char px-3 py-2 text-sm font-light leading-8 text-ivory focus:border-copper focus:outline-none"
+                />
+              </div>
+              <div>
+                <label htmlFor="article-author" className="text-xs font-light text-ivory/50">نویسنده</label>
+                <input
+                  id="article-author"
+                  type="text"
+                  {...textField('author')}
+                  placeholder="نام و نام خانوادگی نویسنده"
+                  className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory placeholder:text-ivory/30 focus:border-copper focus:outline-none"
+                />
+              </div>
             </div>
-            <div className="grid grid-cols-2 gap-5 lg:grid-cols-4">
+
+            <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
               <div>
-                <label className="text-xs font-light text-ivory/50">دسته</label>
-                <input
-                  type="text"
-                  {...textField('category')}
-                  className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
-                />
+                <label className="text-xs font-light text-ivory/50">دسته‌بندی مقاله (Category)</label>
+                <div className="mt-2">
+                  <LuxeSelect
+                    value={draft.category}
+                    options={ARTICLE_CATEGORIES}
+                    onChange={(category) => queueSave({ category })}
+                    isClearable={false}
+                  />
+                </div>
               </div>
               <div>
-                <label className="text-xs font-light text-ivory/50">تاریخ</label>
-                <input
-                  type="text"
-                  {...textField('date')}
-                  className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
-                />
+                <label className="text-xs font-light text-ivory/50">هشتگ‌ها / برچسب‌ها</label>
+                <div className="mt-2">
+                  <LuxeTagsSelect
+                    value={normalizeTags(draft.tags)}
+                    onChange={(tags) => queueSave({ tags })}
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 gap-5 lg:grid-cols-3">
+              <div>
+                <label htmlFor="article-date" className="text-xs font-light text-ivory/50">تاریخ انتشار (شمسی)</label>
+                <div className="mt-2">
+                  <JalaliDatePicker
+                    id="article-date"
+                    value={draft.date ?? ''}
+                    onChange={(isoDate) => queueSave({ date: isoDate })}
+                  />
+                </div>
               </div>
               <div>
-                <label className="text-xs font-light text-ivory/50">زمان مطالعه</label>
+                <label className="text-xs font-light text-ivory/50">زمان مطالعه (محاسبه خودکار)</label>
                 <input
                   type="text"
+                  disabled
                   {...textField('read')}
-                  className="mt-2 w-full border border-ivory/15 bg-char px-3 py-2 text-sm font-light text-ivory focus:border-copper focus:outline-none"
+                  className="mt-2 w-full cursor-not-allowed border border-ivory/15 bg-char/50 px-3 py-2 text-sm font-light text-ivory/50"
                 />
               </div>
               <div>