From a56036b9c4aa6e2f9016a8694f9119609188a492 Mon Sep 17 00:00:00 2001
From: Muhammad Amin Ghorbani <muhammadamin.ghorbani@gmail.com>
Date: Sat, 24 Oct 2026 17:35:57 +0330
Subject: [PATCH] feat: improve IDE opening reliability, data locator plugin,
 and click-to-component handling

---
 .../rules/post_code_change_verification.md    |  21 +
 index.html                                    |  27 +-
 plugins/add-data-locator.cjs                  |  68 ++
 .../utils/dev-click-to-component.tsx          |  35 +-
 src/features/services/ServicesPage.tsx        |   4 +-
 .../services/components/BlogsServiceView.tsx  | 989 +++++++++++-------
 src/features/services/services/blogs-api.ts   |  74 +-
 src/stores/theme.ts                           |   3 +
 vite.config.ts                                |  62 +-
 9 files changed, 897 insertions(+), 386 deletions(-)
 create mode 100644 .agents/rules/post_code_change_verification.md

diff --git a/.agents/rules/post_code_change_verification.md b/.agents/rules/post_code_change_verification.md
new file mode 100644
index 0000000..f505766
--- /dev/null
+++ b/.agents/rules/post_code_change_verification.md
@@ -0,0 +1,21 @@
+# اعتبارسنجی ران‌تایم و سلامت دیتا پس از تغییر کد (Panel Admin)
+
+این قانون تضمین می‌کند که هیچ تغییری در کدهای پنل مدیریت ادمین (`aqila_panel`)، وضعیت ران بودن پروژه یا جریان داده‌ها را دچار اختلال نکرده و کاربر نیازی به ارسال مجدد ارور در پیام بعدی نداشته باشد.
+
+---
+
+## ۱. شرط فعال‌سازی (Trigger Condition)
+- **صرفاً پس از تغییر کد:** این اعتبارسنجی منحصراً زمانی انجام می‌شود که کدی توسط هوش مصنوعی در پنل ویرایش یا ایجاد شده باشد.
+- **عدم اجرا در گفتگوهای بدون تغییر کد:** در چت‌های عادی، توضیحی یا پرسش و پاسخ، هیچ اعتبارسنجی و بررسی ران‌تایمی انجام نمی‌شود.
+
+---
+
+## ۲. چک‌لیست اعتبارسنجی در پنل مدیریت
+1. **کامپایل تایپ‌اسکریپت و بیلد Vite:** تغییرات نباید باعث خطای تایپ یا کرش HMR در سرور در حال اجرا شوند.
+2. **سلامت جریان داده‌ها در جداول و فرم‌ها:** بررسی صحت مدیریت مقادیر نال/آندفایند در کامپوننت‌های داده‌محور (Data Tables, Dropdowns, Forms) تا در مواجهه با دیتای دریافتی کرش نکنند.
+3. **سازگاری با سرویس‌های API:** تطابق فراخوانی متدهای رکوئست با مدل‌ها و پاسخ‌های بک‌اند.
+
+---
+
+## ۳. اصل خودترمیمی در همان پیام (Self-Healing)
+- هرگونه خطای ناشی از ویرایش کد باید بلافاصله در انتهای همان مرحله شناسایی و اصلاح گردد تا کاربر بدون خطا به کار با پنل ادامه دهد.
diff --git a/index.html b/index.html
index be71606..3d796d9 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="fa" dir="rtl">
+<html lang="fa" dir="rtl" class="dark">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=aqila2" />
@@ -13,6 +13,31 @@
     <meta name="color-scheme" content="light dark" />
     <meta name="supported-color-schemes" content="light dark" />
     <title>پنل مدیریت کاروان نصرت عقیله زینب (س)</title>
+    <!-- اعمال سریع و پایدار حالت تم در رفرش بدون پرش و ماندگاری در نشست -->
+    <script>
+      (function() {
+        try {
+          var saved = sessionStorage.getItem('dashboard-theme') || localStorage.getItem('dashboard-theme');
+          var isDark = true;
+          if (saved) {
+            var data = JSON.parse(saved);
+            if (data && data.state && typeof data.state.isDark === 'boolean') {
+              isDark = data.state.isDark;
+            }
+          }
+          var root = document.documentElement;
+          if (isDark) {
+            root.classList.add('dark');
+            root.classList.remove('light');
+          } else {
+            root.classList.remove('dark');
+            root.classList.add('light');
+          }
+        } catch (e) {
+          document.documentElement.classList.add('dark');
+        }
+      })();
+    </script>
     <!-- اطمینان از اعمال و رفرش آنی فاوآیکون در کش مرورگر -->
     <script>
       (function() {
diff --git a/plugins/add-data-locator.cjs b/plugins/add-data-locator.cjs
index 1a8ca9d..4ffa54b 100644
--- a/plugins/add-data-locator.cjs
+++ b/plugins/add-data-locator.cjs
@@ -1,4 +1,29 @@
 module.exports = function addDataLocator({ types: t }) {
+  function getElementName(node) {
+    if (!node) return "";
+    if (t.isJSXIdentifier(node)) {
+      return node.name;
+    }
+    if (t.isJSXMemberExpression(node)) {
+      return `${getElementName(node.object)}.${node.property.name}`;
+    }
+    return "";
+  }
+
+  const FRAGMENT_DEFAULT_COMPONENTS = new Set([
+    "Fragment",
+    "React.Fragment",
+    "Tab.Group",
+    "Tabs",
+    "Transition",
+    "Transition.Root",
+    "Transition.Child",
+    "Menu",
+    "Menu.Item",
+    "Switch.Group",
+    "Popover.Group",
+  ]);
+
   return {
     name: "add-data-locator",
     visitor: {
@@ -13,6 +38,49 @@ module.exports = function addDataLocator({ types: t }) {
           return;
         }
 
+        const elementName = getElementName(path.node.name);
+
+        // 1. Skip React Fragment and known Headless UI components that render Fragment
+        if (
+          !elementName ||
+          elementName === "Fragment" ||
+          elementName.endsWith(".Fragment") ||
+          FRAGMENT_DEFAULT_COMPONENTS.has(elementName)
+        ) {
+          return;
+        }
+
+        // 2. Skip any component explicitly rendered as a Fragment (e.g. as={Fragment} or as="Fragment")
+        const hasFragmentAs = path.node.attributes.some((attribute) => {
+          if (
+            t.isJSXAttribute(attribute) &&
+            t.isJSXIdentifier(attribute.name) &&
+            attribute.name.name === "as"
+          ) {
+            if (t.isJSXExpressionContainer(attribute.value)) {
+              const expr = attribute.value.expression;
+              if (t.isIdentifier(expr, { name: "Fragment" })) return true;
+              if (
+                t.isMemberExpression(expr) &&
+                t.isIdentifier(expr.property, { name: "Fragment" })
+              ) {
+                return true;
+              }
+            }
+            if (
+              t.isStringLiteral(attribute.value) &&
+              attribute.value.value === "Fragment"
+            ) {
+              return true;
+            }
+          }
+          return false;
+        });
+
+        if (hasFragmentAs) {
+          return;
+        }
+
         const attributeExists = path.node.attributes.some(
           (attribute) =>
             t.isJSXAttribute(attribute) &&
diff --git a/src/components/utils/dev-click-to-component.tsx b/src/components/utils/dev-click-to-component.tsx
index 2d954ba..a0fac0e 100644
--- a/src/components/utils/dev-click-to-component.tsx
+++ b/src/components/utils/dev-click-to-component.tsx
@@ -97,17 +97,27 @@ export function DevClickToComponent() {
     return () => window.removeEventListener("resize", handleResize);
   }, [isMobile]);
 
-  // Handle keyboard shortcuts (Alt key for hover highlight, Escape to cancel inspect)
+  // Handle keyboard shortcuts (Alt key for hover highlight, Escape to cancel inspect, screenshot/meta key suppression)
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "Escape") {
         setIsInspecting(false);
         setHoverInfo(null);
+      } else if (
+        e.key === "Meta" ||
+        e.key === "Control" ||
+        e.key === "Shift" ||
+        e.key === "PrintScreen"
+      ) {
+        // Clear selector immediately if Meta (Cmd on Mac) or screenshot keys are pressed
+        if (!isInspecting) {
+          setHoverInfo(null);
+        }
       }
     };
 
     const handleKeyUp = (e: KeyboardEvent) => {
-      if (e.key === "Alt" && !isInspecting) {
+      if (!e.altKey && !isInspecting) {
         setHoverInfo(null);
       }
     };
@@ -118,21 +128,30 @@ export function DevClickToComponent() {
       }
     };
 
+    const handleVisibilityChange = () => {
+      if (document.hidden && !isInspecting) {
+        setHoverInfo(null);
+      }
+    };
+
     window.addEventListener("keydown", handleKeyDown);
     window.addEventListener("keyup", handleKeyUp);
     window.addEventListener("blur", handleBlur);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
 
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
       window.removeEventListener("blur", handleBlur);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
     };
   }, [isInspecting]);
 
-  // Live hover highlight when Alt is held or Inspect Mode is active
+  // Live hover highlight when Alt (Option on Mac) is held or Inspect Mode is active
   useEffect(() => {
     const handleMouseMove = (event: MouseEvent) => {
-      if (!event.altKey && !isInspecting) {
+      const isModifierActive = event.altKey && !event.metaKey && !event.ctrlKey;
+      if (!isModifierActive && !isInspecting) {
         if (hoverInfo) setHoverInfo(null);
         return;
       }
@@ -207,7 +226,8 @@ export function DevClickToComponent() {
     const cleanPath = filePath.replace(/^[/\\]+/, "");
     const uriPath = filePath.startsWith("/") ? filePath : `/${filePath}`;
     const targetUri = `${uriPath}${positionSuffix}`;
-    const antigravityIdeUrl = `antigravity-ide://file${targetUri}`;
+    const encodedUri = encodeURI(targetUri);
+    const antigravityIdeUrl = `antigravity-ide://file${encodedUri}`;
 
     try {
       const res = await fetch("/api/open-in-ide", {
@@ -229,7 +249,7 @@ export function DevClickToComponent() {
       const ideUrl =
         IDE_SCHEMES.find(({ matches }) =>
           matches.some((match) => userAgent.includes(match)),
-        )?.createUrl(targetUri) ?? antigravityIdeUrl;
+        )?.createUrl(encodedUri) ?? antigravityIdeUrl;
 
       try {
         window.location.assign(ideUrl);
@@ -246,7 +266,8 @@ export function DevClickToComponent() {
   // Click interception (Alt + Click on desktop, or tap in Inspect Mode)
   useEffect(() => {
     const handleDocumentClick = (event: MouseEvent) => {
-      if (!event.altKey && !isInspecting) {
+      const isModifierActive = event.altKey && !event.metaKey && !event.ctrlKey;
+      if (!isModifierActive && !isInspecting) {
         return;
       }
 
diff --git a/src/features/services/ServicesPage.tsx b/src/features/services/ServicesPage.tsx
index 130d1d2..b59e22c 100644
--- a/src/features/services/ServicesPage.tsx
+++ b/src/features/services/ServicesPage.tsx
@@ -251,8 +251,8 @@ export default function ServicesPage() {
 
   return (
     <div className="space-y-6 pt-2 pb-14">
-      {/* سربرگ بخش خدمات (برای شهرهای زیارتی به صورت یکپارچه داخل کامپوننت با دکمه لود مجدد مدیریت می‌شود) */}
-      {serviceKey !== 'cities' && (
+      {/* سربرگ بخش خدمات (برای شهرهای زیارتی و وبلاگ به صورت یکپارچه داخل کامپوننت با دکمه‌ها و آمار مدیریت می‌شود) */}
+      {serviceKey !== 'cities' && serviceKey !== 'blogs' && (
         <div className="flex flex-col gap-4 rounded-2xl border border-border-soft bg-card/40 p-5 shadow-xs sm:flex-row sm:items-center sm:justify-between backdrop-blur-xs">
           <div className="space-y-1">
             <div className="flex items-center gap-2.5">
diff --git a/src/features/services/components/BlogsServiceView.tsx b/src/features/services/components/BlogsServiceView.tsx
index 6ea2a3e..b5f7c22 100644
--- a/src/features/services/components/BlogsServiceView.tsx
+++ b/src/features/services/components/BlogsServiceView.tsx
@@ -5,143 +5,282 @@ import { Card, CardContent } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { Switch } from '@/components/ui/switch'
+import { Textarea } from '@/components/ui/textarea'
+import { toast } from '@/stores/toast'
 import { toFa } from '@/lib/utils'
 import {
   fetchAdminBlogs,
-  createAdminBlog,
-  updateAdminBlog,
-  deleteAdminBlog,
-  BlogItem,
+  saveAdminArticle,
+  deleteAdminArticle,
+  toggleAdminArticleStatus,
+  type BlogArticleItem,
+  type SaveBlogArticlePayload,
 } from '../services/blogs-api'
 
-const LANGUAGE_OPTIONS = [
+const LANGUAGE_CONFIG = [
+  { code: 'fa', label: 'فارسی', flag: '🇮🇷', dir: 'rtl' },
+  { code: 'ar', label: 'العربية', flag: '🇸🇦', dir: 'rtl' },
+  { code: 'en', label: 'English', flag: '🇬🇧', dir: 'ltr' },
+  { code: 'ru', label: 'Русский', flag: '🇷🇺', dir: 'ltr' },
+  { code: 'id', label: 'Indonesia', flag: '🇮🇩', dir: 'ltr' },
+] as const
+
+type SupportedLang = (typeof LANGUAGE_CONFIG)[number]['code']
+
+const FILTER_LANGUAGE_OPTIONS = [
   { code: 'ALL', label: 'همه زبان‌ها', flag: '🌐' },
-  { code: 'fa', label: 'فارسی', flag: '🇮🇷' },
-  { code: 'ar', label: 'العربية', flag: '🇸🇦' },
-  { code: 'en', label: 'English', flag: '🇬🇧' },
-  { code: 'ru', label: 'Русский', flag: '🇷🇺' },
-  { code: 'id', label: 'Indonesia', flag: '🇮🇩' },
+  ...LANGUAGE_CONFIG,
 ]
 
+interface FormTranslationState {
+  title: string
+  summary: string
+  content: string
+  tag_names: string[]
+}
+
 export function BlogsServiceView() {
   const qc = useQueryClient()
-  const [selectedLang, setSelectedLang] = useState<string>('ALL')
+  const [selectedFilterLang, setSelectedFilterLang] = useState<string>('ALL')
   const [statusFilter, setStatusFilter] = useState<string>('ALL')
   const [searchQuery, setSearchQuery] = useState<string>('')
-  const [editingBlog, setEditingBlog] = useState<Partial<BlogItem> | null>(null)
-  const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false)
+
+  // Dialog state
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
+  const [editingArticleId, setEditingArticleId] = useState<number | null>(null)
+  const [formGroupKey, setFormGroupKey] = useState<string>('')
+  const [formBaseSlug, setFormBaseSlug] = useState<string>('')
+  const [formCover, setFormCover] = useState<string>('')
+  const [formStatus, setFormStatus] = useState<boolean>(true)
+  const [formIsTopList, setFormIsTopList] = useState<boolean>(false)
+  const [activeFormLang, setActiveFormLang] = useState<SupportedLang>('fa')
   const [previewMode, setPreviewMode] = useState<boolean>(false)
 
-  // Query blogs
-  const { data: blogs = [], isLoading, refetch } = useQuery({
-    queryKey: ['admin-blogs', selectedLang, statusFilter],
-    queryFn: () => fetchAdminBlogs({
-      language_code: selectedLang !== 'ALL' ? selectedLang : undefined,
-      status: statusFilter !== 'ALL' ? statusFilter : undefined,
-    }),
+  // Translations dictionary for the 5 languages
+  const [formTranslations, setFormTranslations] = useState<Record<SupportedLang, FormTranslationState>>({
+    fa: { title: '', summary: '', content: '', tag_names: ['زیارت', 'عقیله'] },
+    ar: { title: '', summary: '', content: '', tag_names: ['زيارة', 'عقيلة'] },
+    en: { title: '', summary: '', content: '', tag_names: ['Pilgrimage', 'Aqila'] },
+    ru: { title: '', summary: '', content: '', tag_names: ['Паломничество', 'Акила'] },
+    id: { title: '', summary: '', content: '', tag_names: ['Ziarah', 'Aqila'] },
+  })
+
+  // Query articles list
+  const { data: articles = [], isLoading, refetch } = useQuery({
+    queryKey: ['admin-blogs', selectedFilterLang, statusFilter],
+    queryFn: () =>
+      fetchAdminBlogs({
+        language_code: selectedFilterLang !== 'ALL' ? selectedFilterLang : undefined,
+        status: statusFilter !== 'ALL' ? statusFilter : undefined,
+      }),
   })
 
   // Mutations
   const saveMutation = useMutation({
-    mutationFn: (payload: Partial<BlogItem>) => {
-      if (payload.id) {
-        return updateAdminBlog(payload.id, payload)
-      } else {
-        return createAdminBlog(payload)
-      }
-    },
-    onSuccess: () => {
+    mutationFn: (payload: SaveBlogArticlePayload) => saveAdminArticle(payload),
+    onSuccess: (_, variables) => {
       qc.invalidateQueries({ queryKey: ['admin-blogs'] })
-      setIsDrawerOpen(false)
-      setEditingBlog(null)
+      setIsModalOpen(false)
+      toast.success(variables.id ? 'مقاله و ترجمه‌های آن با موفقیت به‌روزرسانی شد.' : 'مقاله جدید با موفقیت در دیتابیس ثبت گردید.')
+    },
+    onError: (err: any) => {
+      toast.error(err?.message || 'خطا در ثبت یا به‌روزرسانی مقاله')
     },
   })
 
   const deleteMutation = useMutation({
-    mutationFn: (id: number) => deleteAdminBlog(id),
+    mutationFn: (id: number) => deleteAdminArticle(id),
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: ['admin-blogs'] })
+      toast.success('مقاله و کلیه ترجمه‌های آن حذف شدند.')
+    },
+    onError: (err: any) => {
+      toast.error(err?.message || 'خطا در حذف مقاله')
     },
   })
 
   const toggleStatusMutation = useMutation({
     mutationFn: ({ id, status }: { id: number; status: boolean }) =>
-      updateAdminBlog(id, { status }),
+      toggleAdminArticleStatus(id, status),
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: ['admin-blogs'] })
+      toast.success('وضعیت انتشار مقاله در کل زبان‌ها به‌روزرسانی شد.')
+    },
+    onError: (err: any) => {
+      toast.error(err?.message || 'خطا در تغییر وضعیت مقاله')
     },
   })
 
-  // Filtered list
-  const filteredBlogs = useMemo(() => {
-    let list = blogs
+  // Filtered articles
+  const filteredArticles = useMemo(() => {
+    let list = articles
     if (searchQuery.trim()) {
       const q = searchQuery.toLowerCase().trim()
-      list = list.filter(
-        (b) =>
-          b.title?.toLowerCase().includes(q) ||
-          b.slug?.toLowerCase().includes(q) ||
-          b.summary?.toLowerCase().includes(q)
-      )
+      list = list.filter((a) => {
+        if (a.title?.toLowerCase().includes(q) || a.base_slug?.toLowerCase().includes(q)) {
+          return true
+        }
+        // Search across all translations
+        return Object.values(a.translations || {}).some(
+          (t) => t.title?.toLowerCase().includes(q) || t.summary?.toLowerCase().includes(q)
+        )
+      })
     }
     return list
-  }, [blogs, searchQuery])
+  }, [articles, searchQuery])
 
-  // Stats
-  const totalCount = blogs.length
-  const activeCount = blogs.filter((b) => b.status).length
-  const draftCount = blogs.filter((b) => !b.status).length
+  // Statistics
+  const totalCount = articles.length
+  const activeCount = articles.filter((a) => a.status).length
+  const draftCount = articles.filter((a) => !a.status).length
 
+  // Open Add Dialog
   const handleOpenAdd = () => {
-    setEditingBlog({
-      title: '',
-      slug: '',
-      summary: '',
-      content: '',
-      status: true,
-      is_top_list: false,
-      language_code: selectedLang !== 'ALL' ? selectedLang : 'fa',
-      cover: '',
-      tag_names: ['زیارت', 'عقیله'],
-    })
+    setEditingArticleId(null)
+    setFormGroupKey('')
+    setFormBaseSlug('')
+    setFormCover('')
+    setFormStatus(true)
+    setFormIsTopList(false)
+    setActiveFormLang('fa')
     setPreviewMode(false)
-    setIsDrawerOpen(true)
+    setFormTranslations({
+      fa: { title: '', summary: '', content: '', tag_names: ['زیارت', 'عقیله'] },
+      ar: { title: '', summary: '', content: '', tag_names: ['زيارة', 'عقيلة'] },
+      en: { title: '', summary: '', content: '', tag_names: ['Pilgrimage', 'Aqila'] },
+      ru: { title: '', summary: '', content: '', tag_names: ['Паломничество', 'Акила'] },
+      id: { title: '', summary: '', content: '', tag_names: ['Ziarah', 'Aqila'] },
+    })
+    setIsModalOpen(true)
   }
 
-  const handleOpenEdit = (blog: BlogItem) => {
-    setEditingBlog({
-      ...blog,
-      cover_input: blog.cover || '',
-      tag_names: blog.tags?.map((t) => t.name) || [],
-      language_code: blog.language_code_display || 'fa',
-    })
+  // Open Edit Dialog
+  const handleOpenEdit = (article: BlogArticleItem) => {
+    setEditingArticleId(article.id)
+    setFormGroupKey(article.group_key || article.base_slug)
+    setFormBaseSlug(article.base_slug || article.group_key)
+    setFormCover(article.cover || '')
+    setFormStatus(article.status)
+    setFormIsTopList(article.is_top_list)
+    setActiveFormLang(
+      (article.available_languages?.[0] as SupportedLang) || 'fa'
+    )
     setPreviewMode(false)
-    setIsDrawerOpen(true)
+
+    // Populate translations
+    const newTrans: Record<SupportedLang, FormTranslationState> = {
+      fa: { title: '', summary: '', content: '', tag_names: [] },
+      ar: { title: '', summary: '', content: '', tag_names: [] },
+      en: { title: '', summary: '', content: '', tag_names: [] },
+      ru: { title: '', summary: '', content: '', tag_names: [] },
+      id: { title: '', summary: '', content: '', tag_names: [] },
+    }
+
+    LANGUAGE_CONFIG.forEach((cfg) => {
+      const existing = article.translations?.[cfg.code]
+      if (existing) {
+        newTrans[cfg.code] = {
+          title: existing.title || '',
+          summary: existing.summary || '',
+          content: existing.content || '',
+          tag_names:
+            existing.tag_names ||
+            existing.tags?.map((t) => t.name) ||
+            [],
+        }
+      }
+    })
+
+    setFormTranslations(newTrans)
+    setIsModalOpen(true)
   }
 
+  // Save handler
+  const handleSaveArticle = () => {
+    // Validate that at least one language has a title
+    const hasAnyTranslation = Object.values(formTranslations).some(
+      (t) => t.title && t.title.trim().length > 0
+    )
+
+    if (!hasAnyTranslation) {
+      toast.error('لطفاً عنوان مقاله را حداقل برای یک زبان وارد نمایید.')
+      return
+    }
+
+    let finalSlug = formBaseSlug.trim()
+    if (!finalSlug) {
+      // Auto generate from first available title
+      const firstTitle = Object.values(formTranslations).find((t) => t.title.trim())?.title || 'article'
+      finalSlug = firstTitle
+        .toLowerCase()
+        .replace(/[^a-z0-9\u0600-\u06FF\s-]/g, '')
+        .replace(/\s+/g, '-')
+        .slice(0, 50)
+    }
+
+    const payload: SaveBlogArticlePayload = {
+      id: editingArticleId || undefined,
+      group_key: formGroupKey || finalSlug,
+      base_slug: finalSlug,
+      cover: formCover.trim() || undefined,
+      status: formStatus,
+      is_top_list: formIsTopList,
+      translations: formTranslations,
+    }
+
+    saveMutation.mutate(payload)
+  }
+
+  const currentLangConfig = LANGUAGE_CONFIG.find((l) => l.code === activeFormLang) || LANGUAGE_CONFIG[0]
+  const currentTranslation = formTranslations[activeFormLang]
+
   return (
     <div className="space-y-6">
-      {/* 1. معرفی و آمار کلان مقالات وبلاگ */}
-      <div className="relative overflow-hidden rounded-2xl border border-border-soft bg-gradient-to-br from-card/80 via-card/50 to-primary/5 p-6 backdrop-blur shadow-xs">
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div className="space-y-1.5">
+      {/* ۱. سربرگ یکپارچه بخش وبلاگ و آمار کلان */}
+      <div className="relative overflow-hidden rounded-2xl border border-border-soft bg-card/40 p-5 sm:p-6 shadow-xs backdrop-blur-xs">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="space-y-1">
             <div className="flex items-center gap-2.5">
-              <span className="flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary shadow-xs">
+              <div className="flex size-9 items-center justify-center rounded-xl bg-primary/10 text-primary">
                 <Ic name="file" className="size-5" />
-              </span>
-              <div>
-                <h1 className="text-xl font-black text-foreground">وبلاگ، مقالات و دانشنامه زیارتی</h1>
-                <p className="text-xs font-mono text-grey-2">Aqila Pilgrimage Blog & Articles Management</p>
               </div>
+              <h1 className="text-xl font-black text-foreground">
+                وبلاگ و مقالات دانشنامه
+              </h1>
+              <Badge
+                variant="outline"
+                className="border-primary/30 bg-primary/10 text-primary font-bold font-mono text-xs"
+              >
+                Articles & Encyclopedia
+              </Badge>
             </div>
-            <p className="max-w-3xl text-xs text-grey-3 leading-relaxed">
-              بانک مقالات سئومحور و راهنمای اماکن مقدسه در ۵ زبان (فارسی، عربی، انگلیسی، روسی و اندونزیایی). همگام با مدل داده فرانت‌اند و اندپوینت‌های عمومی وب‌سایت عقیله.
+            <p className="text-xs text-grey-3">
+              بانک مقالات تخصصی، دانشنامه اماکن متبرکه، راهنمای جامع زیارت و سفر به عتبات عالیات با مدیریت یکپارچه ترجمه در ۵ زبان
             </p>
           </div>
-          <div className="flex items-center gap-2.5">
+
+          <div className="flex items-center gap-2.5 shrink-0 flex-wrap">
+            <Badge
+              variant="outline"
+              className="border-border-soft bg-card/70 text-grey-2 text-xs py-1.5 px-3 rounded-xl font-medium gap-1.5 shadow-2xs"
+            >
+              <span className="size-2 rounded-full bg-emerald-500 animate-pulse" />
+              <span>محتوا و سئو چندزبانه</span>
+            </Badge>
+
             <Button
               onClick={handleOpenAdd}
-              className="gap-2 bg-primary text-primary-foreground hover:bg-primary/90 text-xs font-bold h-10 px-4 rounded-xl shadow-md"
+              className="gap-2 bg-primary text-primary-foreground hover:bg-primary/90 text-xs font-bold h-9 px-4 rounded-xl shadow-xs cursor-pointer"
             >
               <Ic name="plus" className="size-4" />
               افزودن مقاله جدید
@@ -154,7 +293,7 @@ export function BlogsServiceView() {
           <Card className="border-border-soft bg-card/60 backdrop-blur">
             <CardContent className="p-4 flex items-center justify-between">
               <div>
-                <p className="text-[11px] text-grey-3">کل مقالات ثبت‌شده</p>
+                <p className="text-[11px] text-grey-3">کل مقالات دانشنامه</p>
                 <p className="text-xl font-black text-foreground mt-1 tabular-nums">{toFa(totalCount)}</p>
               </div>
               <span className="p-2 rounded-xl bg-primary/10 text-primary">
@@ -190,8 +329,8 @@ export function BlogsServiceView() {
           <Card className="border-border-soft bg-card/60 backdrop-blur">
             <CardContent className="p-4 flex items-center justify-between">
               <div>
-                <p className="text-[11px] text-grey-3">زبان‌های تحت پوشش</p>
-                <p className="text-xl font-black text-sky-400 mt-1">۵ زبان</p>
+                <p className="text-[11px] text-grey-3">پوشش زبان‌های عقیله</p>
+                <p className="text-xl font-black text-sky-400 mt-1">۵ زبان رسمی</p>
               </div>
               <span className="p-2 rounded-xl bg-sky-500/10 text-sky-400">
                 <Ic name="globe" className="size-4" />
@@ -201,16 +340,16 @@ export function BlogsServiceView() {
         </div>
       </div>
 
-      {/* 2. تب‌های فیلتر زبان و نوار جستجو */}
+      {/* ۲. تب‌های فیلتر زبان و نوار جستجو */}
       <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-        {/* زبان‌ها */}
+        {/* فیلتر زبان */}
         <div className="flex items-center gap-1.5 overflow-x-auto pb-1 scrollbar-none">
-          {LANGUAGE_OPTIONS.map((lang) => (
+          {FILTER_LANGUAGE_OPTIONS.map((lang) => (
             <button
               key={lang.code}
-              onClick={() => setSelectedLang(lang.code)}
-              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-bold transition-all shrink-0 ${
-                selectedLang === lang.code
+              onClick={() => setSelectedFilterLang(lang.code)}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-bold transition-all shrink-0 cursor-pointer ${
+                selectedFilterLang === lang.code
                   ? 'bg-primary text-primary-foreground shadow-sm'
                   : 'bg-card/60 text-grey-2 hover:bg-card/90 border border-border-soft'
               }`}
@@ -221,14 +360,14 @@ export function BlogsServiceView() {
           ))}
         </div>
 
-        {/* جستجو و وضعیت */}
+        {/* جستجو، وضعیت و دکمه بروزرسانی */}
         <div className="flex items-center gap-2.5">
           <div className="relative w-full sm:w-64">
             <Ic name="search" className="absolute start-3 top-1/2 -translate-y-1/2 size-3.5 text-grey-3" />
             <Input
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="جستجو در عنوان یا متن مقاله..."
+              placeholder="جستجو در عنوان یا موضوع مقاله..."
               className="h-9 ps-9 text-xs bg-surface-base rounded-xl border-border-soft"
             />
           </div>
@@ -236,164 +375,205 @@ export function BlogsServiceView() {
           <select
             value={statusFilter}
             onChange={(e) => setStatusFilter(e.target.value)}
-            aria-label="فیلتر وضعیت انتشار مقاله"
-            className="h-9 px-3 text-xs bg-surface-base rounded-xl border border-border-soft text-foreground focus:outline-none"
+            className="h-9 rounded-xl border border-border-soft bg-surface-base px-3 text-xs text-foreground focus:outline-none focus:border-primary/50 cursor-pointer"
           >
             <option value="ALL">همه وضعیت‌ها</option>
-            <option value="true">فقط فعال</option>
-            <option value="false">پیش‌نویس</option>
+            <option value="active">منتشرشده (فعال)</option>
+            <option value="inactive">پیش‌نویس / غیرفعال</option>
           </select>
 
           <Button
             variant="outline"
             size="sm"
             onClick={() => refetch()}
-            className="h-9 gap-1 text-xs border-border-soft"
+            className="h-9 px-3 gap-1.5 text-xs rounded-xl border-border-soft cursor-pointer"
           >
             <Ic name="refresh" className={`size-3.5 ${isLoading ? 'animate-spin' : ''}`} />
-            بروزرسانی
+            <span>بروزرسانی</span>
           </Button>
         </div>
       </div>
 
-      {/* 3. لیست مقالات در قالب جدول استاندارد */}
-      <div className="overflow-hidden rounded-2xl border border-border-soft bg-card/40 shadow-xs">
+      {/* ۳. لیست و جدول مقالات یکپارچه */}
+      <div className="rounded-2xl border border-border-soft bg-card/40 backdrop-blur-xs overflow-hidden shadow-xs">
         <div className="flex items-center justify-between border-b border-border-soft bg-card/60 px-5 py-3.5">
           <div className="flex items-center gap-2">
             <span className="text-xs font-bold text-foreground">فهرست مقالات دانشنامه عقیله</span>
             <Badge variant="secondary" className="bg-primary/10 text-primary border-0 text-[11px] font-mono">
-              {toFa(filteredBlogs.length)} مورد
+              {toFa(filteredArticles.length)} مقاله مستقل
             </Badge>
           </div>
-          <span className="text-[11px] text-grey-3">اتصال زنده به /api/blogs/admin/</span>
+          <span className="text-[11px] text-grey-3">مدیریت ترجمه ۵ زبانه در یک ص</span>
         </div>
 
         {isLoading ? (
-          <div className="p-8 text-center text-xs text-grey-3">در حال دریافت مقالات از پایگاه‌داده...</div>
-        ) : filteredBlogs.length === 0 ? (
-          <div className="p-12 text-center space-y-2">
-            <Ic name="file" className="size-8 mx-auto text-grey-3 opacity-40" />
-            <p className="text-xs font-bold text-foreground">هیچ مقاله‌ای یافت نشد</p>
-            <p className="text-[11px] text-grey-3">با تغییر فیلترها یا افزودن مقاله جدید لیست را کامل کنید.</p>
+          <div className="p-12 text-center text-xs text-grey-3 flex flex-col items-center justify-center gap-3">
+            <div className="size-8 border-2 border-primary/20 border-t-primary rounded-full animate-spin" />
+            <p>در حال بارگذاری بانک مقالات دانشنامه...</p>
+          </div>
+        ) : filteredArticles.length === 0 ? (
+          <div className="p-12 text-center text-xs text-grey-3 flex flex-col items-center justify-center gap-3">
+            <div className="p-3 rounded-2xl bg-muted/40 text-grey-3">
+              <Ic name="file" className="size-8" />
+            </div>
+            <p className="font-bold text-foreground">هیچ مقاله‌ای با این فیلترها یافت نشد.</p>
+            <p className="text-[11px]">با کلیک بر روی «افزودن مقاله جدید» دانشنامه را کامل کنید.</p>
+            <Button
+              onClick={handleOpenAdd}
+              size="sm"
+              className="mt-2 text-xs bg-primary text-primary-foreground rounded-xl font-bold cursor-pointer"
+            >
+              افزودن مقاله جدید
+            </Button>
           </div>
         ) : (
           <div className="overflow-x-auto">
-            <table className="w-full text-start text-xs">
-              <thead className="border-b border-border-soft bg-card/80 text-grey-3 font-bold">
-                <tr>
-                  <th className="p-3.5 text-start w-16">شناسه</th>
-                  <th className="p-3.5 text-start">تصویر و عنوان سئو</th>
-                  <th className="p-3.5 text-start w-28">زبان</th>
-                  <th className="p-3.5 text-start w-48">برچسب‌ها</th>
-                  <th className="p-3.5 text-center w-28">وضعیت انتشار</th>
-                  <th className="p-3.5 text-center w-36">تاریخ ثبت</th>
-                  <th className="p-3.5 text-end w-28">عملیات</th>
+            <table className="w-full text-start text-xs border-collapse">
+              <thead>
+                <tr className="border-b border-border-soft bg-muted/30 text-grey-2 text-[11px] font-bold">
+                  <th className="py-3 px-4 text-start w-16">شناسه</th>
+                  <th className="py-3 px-4 text-start">عنوان و تصویر شاخص</th>
+                  <th className="py-3 px-4 text-center w-56">زبان‌های ترجمه‌شده</th>
+                  <th className="py-3 px-4 text-center w-32">وضعیت انتشار</th>
+                  <th className="py-3 px-4 text-center w-32">تاریخ ایجاد</th>
+                  <th className="py-3 px-4 text-end w-24">عملیات</th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-border-soft">
-                {filteredBlogs.map((b, idx) => {
-                  const langOpt = LANGUAGE_OPTIONS.find((l) => l.code === (b.language_code_display || 'fa'))
+              <tbody className="divide-y divide-border-soft/60">
+                {filteredArticles.map((article) => {
+                  const langs = article.available_languages || []
                   return (
                     <tr
-                      key={b.id}
-                      style={{
-                        contentVisibility: idx >= 6 ? 'auto' : 'visible',
-                        containIntrinsicSize: idx >= 6 ? 'auto none auto 80px' : undefined,
-                      }}
-                      className="hover:bg-card/70 transition-colors"
+                      key={article.id || article.group_key}
+                      className="hover:bg-muted/20 transition-colors group"
                     >
-                      <td className="p-3.5 font-mono text-grey-3">#{toFa(b.id)}</td>
-                      <td className="p-3.5">
+                      {/* شناسه */}
+                      <td className="py-3 px-4 font-mono text-grey-3 tabular-nums text-xs">
+                        #{article.id}
+                      </td>
+
+                      {/* کاور + عنوان (+ نشان ویژه) + نامک سئو */}
+                      <td className="py-3 px-4">
                         <div className="flex items-center gap-3">
-                          {b.cover ? (
+                          {article.cover ? (
                             <img
-                              src={b.cover}
-                              alt={b.title}
-                              className="size-12 rounded-xl object-cover border border-border-soft shrink-0 bg-muted/20"
+                              src={article.cover}
+                              alt={article.title}
+                              className="size-11 rounded-xl object-cover border border-border-soft shrink-0 bg-muted/20 shadow-2xs"
                               onError={(e) => {
-                                (e.currentTarget as HTMLElement).style.display = 'none'
+                                ;(e.currentTarget as HTMLElement).style.display = 'none'
                               }}
                             />
                           ) : (
-                            <div className="size-12 rounded-xl border border-dashed border-border-soft flex items-center justify-center shrink-0 text-grey-3">
-                              <Ic name="image" className="size-5" />
+                            <div className="size-11 rounded-xl bg-primary/10 text-primary border border-border-soft flex items-center justify-center shrink-0">
+                              <Ic name="file" className="size-5" />
                             </div>
                           )}
-                          <div className="space-y-1 min-w-0">
-                            <p className="font-bold text-foreground text-sm line-clamp-1 hover:text-primary transition-colors cursor-pointer" onClick={() => handleOpenEdit(b)}>
-                              {b.title}
-                            </p>
+                          <div className="min-w-0 space-y-1">
+                            <div className="flex items-center gap-2 flex-wrap">
+                              <button
+                                type="button"
+                                onClick={() => handleOpenEdit(article)}
+                                className="font-bold text-foreground hover:text-primary transition-colors text-start line-clamp-1 cursor-pointer text-sm"
+                                title={article.title}
+                              >
+                                {article.title}
+                              </button>
+                              {article.is_top_list && (
+                                <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md bg-amber-500/10 border border-amber-500/25 text-[10px] text-amber-500 font-medium shrink-0">
+                                  <Ic name="star" className="size-2.5 fill-amber-500" />
+                                  <span>ویژه</span>
+                                </span>
+                              )}
+                            </div>
                             <p className="font-mono text-[11px] text-grey-3 truncate max-w-md" dir="ltr">
-                              /blog/{b.slug}
+                              /blog/{article.base_slug || article.group_key}
                             </p>
-                            {b.summary && (
-                              <p className="text-[11px] text-grey-2 line-clamp-1 max-w-xl">
-                                {b.summary}
-                              </p>
-                            )}
                           </div>
                         </div>
                       </td>
-                      <td className="p-3.5">
-                        <Badge variant="outline" className="gap-1 border-border-soft bg-surface-base">
-                          <span>{langOpt?.flag || '🌐'}</span>
-                          <span className="font-mono text-[10px] uppercase font-bold">{b.language_code_display || 'FA'}</span>
-                        </Badge>
-                      </td>
-                      <td className="p-3.5">
-                        <div className="flex flex-wrap gap-1 max-w-xs">
-                          {b.tags && b.tags.length > 0 ? (
-                            b.tags.slice(0, 3).map((t) => (
-                              <span key={t.id || t.name} className="px-2 py-0.5 rounded-md bg-muted/30 text-[10px] text-grey-2 border border-border-soft">
-                                #{t.name}
-                              </span>
-                            ))
-                          ) : (
-                            <span className="text-[10px] text-grey-3">-</span>
-                          )}
-                          {b.tags && b.tags.length > 3 && (
-                            <span className="text-[10px] text-grey-3 font-mono">+{b.tags.length - 3}</span>
-                          )}
+
+                      {/* وضعیت زبان‌ها و ترجمه‌های مقاله */}
+                      <td className="py-3 px-4 text-center">
+                        <div className="inline-flex items-center gap-1.5 p-1 rounded-xl bg-surface-base/80 border border-border-soft">
+                          {LANGUAGE_CONFIG.map((lang) => {
+                            const hasTranslation = langs.includes(lang.code)
+                            return (
+                              <button
+                                key={lang.code}
+                                type="button"
+                                onClick={() => {
+                                  handleOpenEdit(article)
+                                  setActiveFormLang(lang.code)
+                                }}
+                                title={
+                                  hasTranslation
+                                    ? `دارای ترجمه به ${lang.label} (برای ویرایش کلیک کنید)`
+                                    : `فاقد ترجمه به ${lang.label} (برای افزودن کلیک کنید)`
+                                }
+                                className={`px-2 py-1 rounded-lg text-[10px] font-bold font-mono transition-all flex items-center gap-1 cursor-pointer ${
+                                  hasTranslation
+                                    ? 'bg-emerald-500/15 text-emerald-400 border border-emerald-500/30 hover:bg-emerald-500/25'
+                                    : 'bg-muted/30 text-grey-3 border border-dashed border-border-soft hover:border-grey-3 hover:text-foreground opacity-50'
+                                }`}
+                              >
+                                <span>{lang.flag}</span>
+                                <span className="uppercase">{lang.code}</span>
+                                {hasTranslation ? (
+                                  <span className="size-1 rounded-full bg-emerald-400" />
+                                ) : (
+                                  <span className="text-[9px] leading-none">+</span>
+                                )}
+                              </button>
+                            )
+                          })}
                         </div>
                       </td>
-                      <td className="p-3.5 text-center">
+
+                      {/* وضعیت انتشار عمومی کل مقاله */}
+                      <td className="py-3 px-4 text-center">
                         <button
-                          onClick={() => toggleStatusMutation.mutate({ id: b.id, status: !b.status })}
-                          className={`px-2.5 py-1 rounded-full text-[11px] font-bold transition-all ${
-                            b.status
+                          onClick={() => toggleStatusMutation.mutate({ id: article.id, status: !article.status })}
+                          className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-bold transition-all cursor-pointer ${
+                            article.status
                               ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 hover:bg-emerald-500/20'
-                              : 'bg-zinc-800 text-zinc-400 border border-zinc-700 hover:bg-zinc-700'
+                              : 'bg-muted text-grey-3 border border-border-soft hover:bg-muted/80'
                           }`}
                         >
-                          {b.status ? 'منتشرشده' : 'پیش‌نویس'}
+                          <span className={`size-1.5 rounded-full ${article.status ? 'bg-emerald-400' : 'bg-grey-3'}`} />
+                          <span>{article.status ? 'منتشرشده' : 'پیش‌نویس'}</span>
                         </button>
                       </td>
-                      <td className="p-3.5 text-center font-mono text-grey-3 text-[11px]">
-                        {b.created_at ? new Date(b.created_at).toLocaleDateString('fa-IR') : '-'}
+
+                      {/* تاریخ ثبت */}
+                      <td className="py-3 px-4 text-center font-mono text-[11px] text-grey-3">
+                        {article.created_at ? new Date(article.created_at).toLocaleDateString('fa-IR') : '-'}
                       </td>
-                      <td className="p-3.5 text-end">
-                        <div className="flex items-center justify-end gap-1.5">
+
+                      {/* عملیات */}
+                      <td className="py-3 px-4 text-end">
+                        <div className="flex items-center justify-end gap-1">
                           <Button
                             variant="ghost"
                             size="sm"
-                            onClick={() => handleOpenEdit(b)}
-                            className="size-8 p-0 text-grey-2 hover:text-primary hover:bg-primary/10 rounded-lg"
-                            title="ویرایش مقاله"
+                            onClick={() => handleOpenEdit(article)}
+                            className="size-8 p-0 text-grey-2 hover:text-foreground hover:bg-muted rounded-lg cursor-pointer"
+                            title="ویرایش مقاله و ترجمه‌ها"
                           >
-                            <Ic name="pencil" className="size-4" />
+                            <Ic name="pencil" className="size-3.5" />
                           </Button>
                           <Button
                             variant="ghost"
                             size="sm"
                             onClick={() => {
-                              if (confirm(`آیا از حذف مقاله «${b.title}» اطمینان دارید؟`)) {
-                                deleteMutation.mutate(b.id)
+                              if (confirm(`آیا از حذف مقاله «${article.title}» و کلیه ترجمه‌های ۵ زبانه آن اطمینان دارید؟`)) {
+                                deleteMutation.mutate(article.id)
                               }
                             }}
-                            className="size-8 p-0 text-grey-2 hover:text-red-400 hover:bg-red-500/10 rounded-lg"
-                            title="حذف مقاله"
+                            className="size-8 p-0 text-grey-2 hover:text-red-400 hover:bg-red-500/10 rounded-lg cursor-pointer"
+                            title="حذف کامل مقاله"
                           >
-                            <Ic name="trash" className="size-4" />
+                            <Ic name="trash" className="size-3.5" />
                           </Button>
                         </div>
                       </td>
@@ -406,274 +586,369 @@ export function BlogsServiceView() {
         )}
       </div>
 
-      {/* 4. دراور افزودن / ویرایش مقاله سئومحور */}
-      {isDrawerOpen && editingBlog && (
-        <div className="fixed inset-0 z-50 flex items-center justify-end bg-black/60 backdrop-blur-xs transition-opacity animate-in fade-in">
-          <div className="relative flex h-full w-full max-w-3xl flex-col bg-card border-s border-border-soft shadow-2xl overflow-hidden animate-in slide-in-from-right duration-200">
-            {/* Header */}
-            <div className="flex items-center justify-between border-b border-border-soft bg-card/80 px-6 py-4">
-              <div className="flex items-center gap-2.5">
-                <span className="p-2 rounded-xl bg-primary/10 text-primary">
+      {/* ۴. دیالوگ یکپارچه مدیریت ۵ زبانه مقاله (همگی در یک ص هندل میشن) */}
+      <Dialog
+        open={isModalOpen}
+        onOpenChange={(open) => {
+          setIsModalOpen(open)
+        }}
+      >
+        <DialogContent className="sm:max-w-3xl md:max-w-4xl lg:max-w-5xl max-h-[92vh] overflow-hidden flex flex-col p-0 rounded-2xl">
+          {/* Header */}
+          <DialogHeader className="p-5 border-b border-border-soft bg-muted/20 shrink-0">
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex items-center gap-3">
+                <div className="size-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0">
                   <Ic name="file" className="size-5" />
-                </span>
-                <div>
-                  <h2 className="text-base font-bold text-foreground">
-                    {editingBlog.id ? 'ویرایش مقاله سئو' : 'افزودن مقاله جدید'}
-                  </h2>
-                  <p className="text-[11px] font-mono text-grey-3">
-                    {editingBlog.id ? `ID: #${editingBlog.id}` : 'پست جدید در پایگاه‌داده مقالات'}
-                  </p>
                 </div>
-              </div>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => setIsDrawerOpen(false)}
-                className="size-8 p-0 rounded-lg text-grey-3 hover:text-foreground"
-              >
-                <Ic name="close" className="size-4" />
-              </Button>
-            </div>
-
-            {/* Body */}
-            <div className="flex-1 overflow-y-auto p-6 space-y-5">
-              {/* تب‌های زبان */}
-              <div className="space-y-1.5">
-                <label className="text-xs font-bold text-grey-2">زبان مقاله (Language):</label>
-                <div className="flex items-center gap-2">
-                  {LANGUAGE_OPTIONS.filter((l) => l.code !== 'ALL').map((lang) => (
-                    <button
-                      key={lang.code}
-                      type="button"
-                      onClick={() => setEditingBlog({ ...editingBlog, language_code: lang.code })}
-                      className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-bold transition-all border ${
-                        editingBlog.language_code === lang.code
-                          ? 'bg-primary/15 border-primary text-primary'
-                          : 'border-border-soft bg-surface-base text-grey-2 hover:bg-muted/30'
-                      }`}
-                    >
-                      <span>{lang.flag}</span>
-                      <span>{lang.label}</span>
-                    </button>
-                  ))}
+                <div>
+                  <DialogTitle className="text-base font-bold text-foreground">
+                    {editingArticleId ? 'ویرایش مقاله و مدیریت ترجمه‌های ۵ زبانه' : 'افزودن مقاله دانشنامه جدید (۵ زبانه)'}
+                  </DialogTitle>
+                  <DialogDescription className="text-xs text-muted-foreground mt-0.5">
+                    یک مقاله ساخته می‌شود؛ اگر در یک زبان ترجمه داشته باشد در وب‌سایت آن زبان نمایش داده می‌شود، در غیر این‌صورت نمایش داده نخواهد شد.
+                  </DialogDescription>
                 </div>
               </div>
 
-              {/* عنوان سئو */}
-              <div className="space-y-1.5">
-                <label className="text-xs font-bold text-grey-2">عنوان سئو مقاله (H1 Title):</label>
-                <Input
-                  value={editingBlog.title || ''}
-                  onChange={(e) => setEditingBlog({ ...editingBlog, title: e.target.value })}
-                  placeholder="مثال: راهنمای کامل اماکن زیارتی و تاریخی نجف اشرف..."
-                  className="bg-surface-base border-border-soft rounded-xl text-sm"
-                />
-              </div>
+              {formBaseSlug && (
+                <Badge variant="outline" className="font-mono text-[11px] border-border-soft bg-surface-base px-2.5 py-1 text-grey-3 hidden sm:inline-flex" dir="ltr">
+                  /blog/{formBaseSlug}
+                </Badge>
+              )}
+            </div>
+          </DialogHeader>
 
-              {/* نامک اسلاگ */}
+          {/* Body */}
+          <DialogBody className="space-y-5 p-5 overflow-y-auto">
+            {/* ۱. بخش مشخصات مشترک بین همه زبان‌ها (Common settings) */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-xl border border-border-soft bg-surface-base/60">
+              {/* نامک اسلاگ پایه */}
               <div className="space-y-1.5">
-                <label className="text-xs font-bold text-grey-2">نامک URL یکتا (Slug):</label>
+                <label className="text-xs font-bold text-foreground flex items-center justify-between">
+                  <span>نامک URL یکتای مقاله (Base Slug):</span>
+                  <span className="text-[10px] text-grey-3 font-normal">مشترک در تمام زبان‌ها</span>
+                </label>
                 <Input
-                  value={editingBlog.slug || ''}
-                  onChange={(e) => setEditingBlog({ ...editingBlog, slug: e.target.value })}
+                  value={formBaseSlug}
+                  onChange={(e) => setFormBaseSlug(e.target.value)}
                   placeholder="najaf-holy-sites-guide"
                   dir="ltr"
-                  className="bg-surface-base border-border-soft rounded-xl text-xs font-mono"
+                  className="bg-card border-border-soft rounded-xl text-xs font-mono h-9"
                 />
               </div>
 
               {/* آدرس تصویر شاخص */}
               <div className="space-y-1.5">
-                <label className="text-xs font-bold text-grey-2">آدرس تصویر شاخص (Cover Image URL):</label>
-                <div className="flex gap-3">
+                <label className="text-xs font-bold text-foreground flex items-center justify-between">
+                  <span>آدرس تصویر شاخص (Cover Image URL):</span>
+                  <span className="text-[10px] text-grey-3 font-normal">مشترک در کارت‌ها</span>
+                </label>
+                <div className="flex gap-2 items-center">
                   <Input
-                    value={editingBlog.cover_input || ''}
-                    onChange={(e) => setEditingBlog({ ...editingBlog, cover_input: e.target.value })}
+                    value={formCover}
+                    onChange={(e) => setFormCover(e.target.value)}
                     placeholder="https://... یا /media/blog/cover/..."
                     dir="ltr"
-                    className="bg-surface-base border-border-soft rounded-xl text-xs font-mono flex-1"
+                    className="bg-card border-border-soft rounded-xl text-xs font-mono h-9 flex-1"
                   />
-                  {editingBlog.cover_input && (
+                  {formCover && (
                     <img
-                      src={editingBlog.cover_input}
-                      alt="پیش‌نمایش کاور"
-                      className="size-10 rounded-lg object-cover border border-border-soft shrink-0 bg-muted/20"
+                      src={formCover}
+                      alt="کاور"
+                      className="size-9 rounded-lg object-cover border border-border-soft shrink-0 bg-muted/20"
                     />
                   )}
                 </div>
               </div>
 
-              {/* خلاصه سئو */}
+              {/* وضعیت انتشار عمومی و مقاله ویژه */}
+              <div className="flex items-center justify-between p-3 rounded-xl border border-border-soft bg-card">
+                <div>
+                  <p className="text-xs font-bold text-foreground">انتشار عمومی در وب‌سایت</p>
+                  <p className="text-[10px] text-grey-3 mt-0.5">وضعیت فعال در کل زبان‌ها</p>
+                </div>
+                <Switch checked={formStatus} onCheckedChange={setFormStatus} />
+              </div>
+
+              <div className="flex items-center justify-between p-3 rounded-xl border border-border-soft bg-card">
+                <div>
+                  <p className="text-xs font-bold text-foreground">نمایش در مقالات ویژه (Top List)</p>
+                  <p className="text-[10px] text-grey-3 mt-0.5">برجسته کردن در بالای وبلاگ</p>
+                </div>
+                <Switch checked={formIsTopList} onCheckedChange={setFormIsTopList} />
+              </div>
+            </div>
+
+            {/* ۲. تب‌های انتخاب زبان ترجمه (۵ زبانه) */}
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <label className="text-xs font-bold text-foreground flex items-center gap-1.5">
+                  <Ic name="globe" className="size-4 text-primary" />
+                  <span>انتخاب زبان محتوا و ترجمه:</span>
+                </label>
+                <div className="flex items-center gap-2 text-[11px] text-grey-3">
+                  <span className="size-2 rounded-full bg-emerald-500 inline-block" />
+                  <span>دارای محتوا</span>
+                  <span className="size-2 rounded-full bg-grey-3 inline-block ms-2" />
+                  <span>فاقد ترجمه (عدم نمایش در وب این زبان)</span>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 sm:grid-cols-5 gap-2 p-1.5 rounded-2xl bg-surface-base border border-border-soft">
+                {LANGUAGE_CONFIG.map((lang) => {
+                  const isSelected = activeFormLang === lang.code
+                  const hasData = Boolean(formTranslations[lang.code]?.title?.trim())
+                  return (
+                    <button
+                      key={lang.code}
+                      type="button"
+                      onClick={() => setActiveFormLang(lang.code)}
+                      className={`h-11 px-3 rounded-xl text-xs font-bold transition flex items-center justify-center gap-2 relative cursor-pointer ${
+                        isSelected
+                          ? 'bg-primary text-primary-foreground shadow-xs'
+                          : 'text-grey-2 hover:text-foreground hover:bg-card border border-transparent hover:border-border-soft'
+                      }`}
+                    >
+                      <span className="text-base">{lang.flag}</span>
+                      <span className="truncate">{lang.label}</span>
+                      <span
+                        className={`size-2 rounded-full shrink-0 ${
+                          hasData
+                            ? isSelected
+                              ? 'bg-white'
+                              : 'bg-emerald-500'
+                            : 'bg-grey-3/40'
+                        }`}
+                        title={hasData ? 'دارای محتوا' : 'خالی'}
+                      />
+                    </button>
+                  )
+                })}
+              </div>
+            </div>
+
+            {/* ۳. فرم ورود محتوا برای زبان فعال */}
+            <div className="p-5 rounded-2xl border border-border-soft bg-card space-y-4">
+              <div className="flex items-center justify-between border-b border-border-soft pb-3">
+                <div className="flex items-center gap-2">
+                  <span className="text-base">{currentLangConfig.flag}</span>
+                  <span className="text-sm font-bold text-foreground">
+                    محتوای مقاله به زبان {currentLangConfig.label}
+                  </span>
+                  <Badge variant="outline" className="text-[10px] uppercase font-mono border-border-soft">
+                    {currentLangConfig.dir.toUpperCase()}
+                  </Badge>
+                </div>
+
+                {!currentTranslation.title.trim() && (
+                  <span className="text-[11px] text-amber-500 font-medium">
+                    (در صورت خالی ماندن، مقاله در نسخه {currentLangConfig.label} نمایش داده نمی‌شود)
+                  </span>
+                )}
+              </div>
+
+              {/* عنوان مقاله در این زبان */}
+              <div className="space-y-1.5">
+                <label className="text-xs font-bold text-foreground">
+                  عنوان سئو در زبان {currentLangConfig.label} (H1 Title):
+                </label>
+                <Input
+                  value={currentTranslation.title}
+                  onChange={(e) =>
+                    setFormTranslations({
+                      ...formTranslations,
+                      [activeFormLang]: { ...currentTranslation, title: e.target.value },
+                    })
+                  }
+                  dir={currentLangConfig.dir}
+                  placeholder={`عنوان مقاله به زبان ${currentLangConfig.label}...`}
+                  className="bg-surface-base border-border-soft rounded-xl text-sm"
+                />
+              </div>
+
+              {/* خلاصه متای سئو */}
               <div className="space-y-1.5">
                 <div className="flex items-center justify-between">
-                  <label className="text-xs font-bold text-grey-2">خلاصه متای سئو (Meta Description):</label>
+                  <label className="text-xs font-bold text-foreground">
+                    خلاصه متای سئو (Meta Description):
+                  </label>
                   <span className="text-[10px] font-mono text-grey-3">
-                    {editingBlog.summary?.length || 0} / ۱۶۰ کاراکتر
+                    {toFa(currentTranslation.summary?.length || 0)} / ۱۶۰ کاراکتر
                   </span>
                 </div>
-                <textarea
-                  value={editingBlog.summary || ''}
-                  onChange={(e) => setEditingBlog({ ...editingBlog, summary: e.target.value })}
+                <Textarea
+                  value={currentTranslation.summary}
+                  onChange={(e) =>
+                    setFormTranslations({
+                      ...formTranslations,
+                      [activeFormLang]: { ...currentTranslation, summary: e.target.value },
+                    })
+                  }
+                  dir={currentLangConfig.dir}
                   rows={2}
-                  placeholder="خلاصه جذاب برای نمایش در نتایج گوگل و کارت مقالات..."
+                  placeholder={`توضیحات کوتاه برای نمایش در کارت‌ها و نتایج جستجو به زبان ${currentLangConfig.label}...`}
                   className="w-full rounded-xl border border-border-soft bg-surface-base p-3 text-xs text-foreground focus:outline-none focus:border-primary/50"
                 />
               </div>
 
               {/* برچسب‌ها */}
               <div className="space-y-1.5">
-                <label className="text-xs font-bold text-grey-2">برچسب‌ها (با کاما جدا کنید):</label>
+                <label className="text-xs font-bold text-foreground">
+                  برچسب‌ها در زبان {currentLangConfig.label} (با کاما جدا کنید):
+                </label>
                 <Input
-                  value={editingBlog.tag_names?.join('، ') || ''}
+                  value={currentTranslation.tag_names.join('، ')}
                   onChange={(e) =>
-                    setEditingBlog({
-                      ...editingBlog,
-                      tag_names: e.target.value.split(/[،,]+/).map((s) => s.trim()).filter(Boolean),
+                    setFormTranslations({
+                      ...formTranslations,
+                      [activeFormLang]: {
+                        ...currentTranslation,
+                        tag_names: e.target.value.split(/[،,]+/).map((s) => s.trim()).filter(Boolean),
+                      },
                     })
                   }
-                  placeholder="نجف، حرم امام علی، وادی السلام، زیارت"
+                  dir={currentLangConfig.dir}
+                  placeholder="زیارت، نجف، کربلا، عقیله"
                   className="bg-surface-base border-border-soft rounded-xl text-xs"
                 />
               </div>
 
-              {/* وضعیت و ویژگی مقاله ویژه */}
-              <div className="flex items-center gap-6 rounded-xl border border-border-soft bg-surface-base p-3.5">
-                <label className="flex items-center gap-2 cursor-pointer text-xs font-bold text-foreground">
-                  <input
-                    type="checkbox"
-                    checked={editingBlog.status ?? true}
-                    onChange={(e) => setEditingBlog({ ...editingBlog, status: e.target.checked })}
-                    className="size-4 rounded accent-primary cursor-pointer"
-                  />
-                  <span>انتشار عمومی در وب‌سایت</span>
-                </label>
-
-                <label className="flex items-center gap-2 cursor-pointer text-xs font-bold text-foreground">
-                  <input
-                    type="checkbox"
-                    checked={editingBlog.is_top_list ?? false}
-                    onChange={(e) => setEditingBlog({ ...editingBlog, is_top_list: e.target.checked })}
-                    className="size-4 rounded accent-primary cursor-pointer"
-                  />
-                  <span>نمایش در بخش مقالات ویژه (Top List)</span>
-                </label>
-              </div>
-
-              {/* ویرایشگر محتوای اصلی مقاله */}
+              {/* متن کامل مقاله و سئو با قابلیت سوئیچ پیش‌نمایش */}
               <div className="space-y-2">
                 <div className="flex items-center justify-between">
-                  <label className="text-xs font-bold text-grey-2">محتوای مقاله (Semantic HTML):</label>
-                  <div className="flex items-center gap-1.5">
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      onClick={() => setPreviewMode(!previewMode)}
-                      className="h-7 text-[11px] gap-1 border-border-soft"
-                    >
-                      <Ic name="eye" className="size-3" />
-                      {previewMode ? 'حالت کد HTML' : 'پیش‌نمایش خروجی'}
-                    </Button>
-                  </div>
+                  <label className="text-xs font-bold text-foreground">
+                    محتوای کامل مقاله (Semantic HTML):
+                  </label>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setPreviewMode(!previewMode)}
+                    className="h-7 text-[11px] gap-1 border-border-soft rounded-lg cursor-pointer"
+                  >
+                    <Ic name={previewMode ? 'file' : 'eye'} className="size-3" />
+                    <span>{previewMode ? 'حالت ویرایش HTML' : 'پیش‌نمایش زنده'}</span>
+                  </Button>
                 </div>
 
                 {!previewMode ? (
-                  <div className="space-y-1.5">
-                    {/* Quick HTML tags helper */}
-                    <div className="flex flex-wrap gap-1 p-2 rounded-lg bg-muted/20 border border-border-soft text-[11px]">
+                  <div className="space-y-2">
+                    <div className="flex flex-wrap gap-1 p-2 rounded-xl bg-muted/20 border border-border-soft text-[11px]">
                       <button
                         type="button"
                         onClick={() =>
-                          setEditingBlog({
-                            ...editingBlog,
-                            content: (editingBlog.content || '') + '\n<h2>عنوان بخش جدید</h2>\n<p>متن بخش...</p>',
+                          setFormTranslations({
+                            ...formTranslations,
+                            [activeFormLang]: {
+                              ...currentTranslation,
+                              content: (currentTranslation.content || '') + '\n<h2>عنوان بخش جدید</h2>\n<p>متن توضیحات...</p>',
+                            },
                           })
                         }
-                        className="px-2 py-0.5 rounded bg-card hover:bg-card/80 border border-border-soft text-grey-2"
+                        className="px-2.5 py-1 rounded-lg bg-card hover:bg-card/80 border border-border-soft text-grey-2 text-xs font-medium cursor-pointer transition-colors"
                       >
                         + تیتر H2
                       </button>
                       <button
                         type="button"
                         onClick={() =>
-                          setEditingBlog({
-                            ...editingBlog,
-                            content: (editingBlog.content || '') + '\n<h3>زیرتیتر</h3>\n<p>متن توضیحات...</p>',
+                          setFormTranslations({
+                            ...formTranslations,
+                            [activeFormLang]: {
+                              ...currentTranslation,
+                              content: (currentTranslation.content || '') + '\n<h3>زیرتیتر</h3>\n<p>متن بخش...</p>',
+                            },
                           })
                         }
-                        className="px-2 py-0.5 rounded bg-card hover:bg-card/80 border border-border-soft text-grey-2"
+                        className="px-2.5 py-1 rounded-lg bg-card hover:bg-card/80 border border-border-soft text-grey-2 text-xs font-medium cursor-pointer transition-colors"
                       >
                         + زیرتیتر H3
                       </button>
                       <button
                         type="button"
                         onClick={() =>
-                          setEditingBlog({
-                            ...editingBlog,
-                            content: (editingBlog.content || '') + '\n<ul>\n  <li>مورد اول</li>\n  <li>مورد دوم</li>\n</ul>',
+                          setFormTranslations({
+                            ...formTranslations,
+                            [activeFormLang]: {
+                              ...currentTranslation,
+                              content: (currentTranslation.content || '') + '\n<ul>\n  <li>مورد اول</li>\n  <li>مورد دوم</li>\n</ul>',
+                            },
                           })
                         }
-                        className="px-2 py-0.5 rounded bg-card hover:bg-card/80 border border-border-soft text-grey-2"
+                        className="px-2.5 py-1 rounded-lg bg-card hover:bg-card/80 border border-border-soft text-grey-2 text-xs font-medium cursor-pointer transition-colors"
                       >
                         + لیست آیتم‌ها
                       </button>
                       <button
                         type="button"
                         onClick={() =>
-                          setEditingBlog({
-                            ...editingBlog,
-                            content:
-                              (editingBlog.content || '') +
-                              '\n<div class="callout-box bg-primary/10 border-r-4 border-primary p-4 rounded-xl my-4">\n  <p>نکته زیارتی مهم برای زائران محترم...</p>\n</div>',
+                          setFormTranslations({
+                            ...formTranslations,
+                            [activeFormLang]: {
+                              ...currentTranslation,
+                              content:
+                                (currentTranslation.content || '') +
+                                '\n<div class="callout-box bg-primary/10 border-r-4 border-primary p-4 rounded-xl my-4">\n  <p>نکته زیارتی مهم برای زائران...</p>\n</div>',
+                            },
                           })
                         }
-                        className="px-2 py-0.5 rounded bg-card hover:bg-card/80 border border-border-soft text-primary font-bold"
+                        className="px-2.5 py-1 rounded-lg bg-card hover:bg-card/80 border border-border-soft text-primary font-bold text-xs cursor-pointer transition-colors"
                       >
                         + جعبه نکته کاربردی
                       </button>
                     </div>
 
                     <textarea
-                      value={editingBlog.content || ''}
-                      onChange={(e) => setEditingBlog({ ...editingBlog, content: e.target.value })}
-                      rows={14}
-                      dir="auto"
-                      placeholder="متن کامل مقاله به همراه تگ‌های استاندارد سئو..."
-                      className="w-full rounded-xl border border-border-soft bg-surface-base p-4 text-xs font-mono text-foreground focus:outline-none focus:border-primary/50 leading-relaxed"
+                      value={currentTranslation.content}
+                      onChange={(e) =>
+                        setFormTranslations({
+                          ...formTranslations,
+                          [activeFormLang]: { ...currentTranslation, content: e.target.value },
+                        })
+                      }
+                      rows={11}
+                      dir={currentLangConfig.dir}
+                      placeholder={`متن کامل مقاله به همراه تگ‌های استاندارد به زبان ${currentLangConfig.label}...`}
+                      className="w-full rounded-xl border border-border-soft bg-surface-base p-4 text-xs font-mono text-foreground focus:outline-none focus:border-primary/50 leading-relaxed resize-y"
                     />
                   </div>
                 ) : (
                   <div
-                    className="max-h-96 overflow-y-auto rounded-xl border border-border-soft bg-card/60 p-5 prose dark:prose-invert prose-sm text-xs leading-relaxed"
-                    dangerouslySetInnerHTML={{ __html: editingBlog.content || '<p class="text-grey-3">محتوایی وارد نشده است.</p>' }}
+                    dir={currentLangConfig.dir}
+                    className="max-h-96 min-h-[160px] overflow-y-auto rounded-xl border border-border-soft bg-card/60 p-5 prose dark:prose-invert prose-sm text-xs leading-relaxed"
+                    dangerouslySetInnerHTML={{
+                      __html: currentTranslation.content || '<p class="text-grey-3">محتوایی برای این زبان وارد نشده است.</p>',
+                    }}
                   />
                 )}
               </div>
             </div>
+          </DialogBody>
 
-            {/* Footer */}
-            <div className="flex items-center justify-end gap-3 border-t border-border-soft bg-card/80 px-6 py-4">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => setIsDrawerOpen(false)}
-                className="text-xs border-border-soft"
-              >
-                انصراف
-              </Button>
-              <Button
-                size="sm"
-                onClick={() => saveMutation.mutate(editingBlog)}
-                disabled={saveMutation.isPending || !editingBlog.title?.trim()}
-                className="gap-1.5 bg-primary text-primary-foreground hover:bg-primary/90 text-xs font-bold px-5"
-              >
-                {saveMutation.isPending && <Ic name="refresh" className="size-3 animate-spin" />}
-                {editingBlog.id ? 'ذخیره تغییرات' : 'ثبت مقاله در دیتابیس'}
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
+          {/* Footer */}
+          <DialogFooter className="p-4 border-t border-border-soft bg-muted/20 shrink-0">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setIsModalOpen(false)}
+              className="text-xs border-border-soft rounded-xl cursor-pointer"
+            >
+              انصراف
+            </Button>
+            <Button
+              size="sm"
+              onClick={handleSaveArticle}
+              disabled={saveMutation.isPending}
+              className="gap-1.5 bg-primary text-primary-foreground hover:bg-primary/90 text-xs font-bold px-5 rounded-xl cursor-pointer"
+            >
+              {saveMutation.isPending && <Ic name="refresh" className="size-3 animate-spin" />}
+              {editingArticleId ? 'ذخیره مقاله و ترجمه‌ها' : 'ثبت مقاله ۵ زبانه در دیتابیس'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }
+
diff --git a/src/features/services/services/blogs-api.ts b/src/features/services/services/blogs-api.ts
index aa8ba7e..269fca1 100644
--- a/src/features/services/services/blogs-api.ts
+++ b/src/features/services/services/blogs-api.ts
@@ -26,6 +26,54 @@ export interface BlogItem {
   updated_at: string
 }
 
+export interface BlogTranslationData {
+  id?: number
+  title: string
+  slug?: string
+  summary: string
+  content: string
+  tags?: BlogTag[]
+  tag_names?: string[]
+  language_code?: string
+  status?: boolean
+  cover?: string | null
+}
+
+export interface BlogArticleItem {
+  id: number
+  group_key: string
+  base_slug: string
+  title: string
+  cover: string | null
+  cover_input?: string
+  status: boolean
+  is_top_list: boolean
+  created_at: string
+  updated_at: string
+  available_languages: string[]
+  translations: Record<string, BlogTranslationData>
+  tag_names?: string[]
+}
+
+export interface SaveBlogArticlePayload {
+  id?: number
+  group_key?: string
+  base_slug: string
+  cover?: string
+  cover_input?: string
+  status: boolean
+  is_top_list: boolean
+  translations: Record<
+    string,
+    {
+      title: string
+      summary: string
+      content: string
+      tag_names?: string[]
+    }
+  >
+}
+
 export interface BlogListResponse {
   count?: number
   next?: string | null
@@ -38,8 +86,9 @@ export async function fetchAdminBlogs(params?: {
   status?: string
   search?: string
   tag?: string
-}): Promise<BlogItem[]> {
+}): Promise<BlogArticleItem[]> {
   const query = new URLSearchParams()
+  query.set('grouped', 'true')
   if (params?.language_code && params.language_code !== 'ALL') {
     query.set('language_code', params.language_code)
   }
@@ -70,6 +119,20 @@ export async function createAdminBlog(payload: Partial<BlogItem>): Promise<BlogI
   })
 }
 
+export async function saveAdminArticle(payload: SaveBlogArticlePayload): Promise<BlogArticleItem> {
+  if (payload.id) {
+    return await apiFetch<BlogArticleItem>(`blogs/admin/${payload.id}/`, {
+      method: 'PATCH',
+      body: payload,
+    })
+  } else {
+    return await apiFetch<BlogArticleItem>('blogs/admin/', {
+      method: 'POST',
+      body: payload,
+    })
+  }
+}
+
 export async function updateAdminBlog(id: number, payload: Partial<BlogItem>): Promise<BlogItem> {
   return await apiFetch<BlogItem>(`blogs/admin/${id}/`, {
     method: 'PATCH',
@@ -83,6 +146,15 @@ export async function deleteAdminBlog(id: number): Promise<void> {
   })
 }
 
+export const deleteAdminArticle = deleteAdminBlog
+
+export async function toggleAdminArticleStatus(id: number, status: boolean): Promise<void> {
+  await apiFetch(`blogs/admin/${id}/`, {
+    method: 'PATCH',
+    body: { status },
+  })
+}
+
 export async function fetchBlogTags(): Promise<BlogTag[]> {
   const data = await apiFetch<any>('blogs/admin/tags/')
   return Array.isArray(data) ? data : data?.results ?? []
diff --git a/src/stores/theme.ts b/src/stores/theme.ts
index 873a9d2..8f4e7be 100644
--- a/src/stores/theme.ts
+++ b/src/stores/theme.ts
@@ -44,5 +44,8 @@ export function applyTheme(isDark: boolean) {
       root.classList.add('light')
       root.classList.remove('dark')
     }
+    try {
+      sessionStorage.setItem('dashboard-theme', JSON.stringify({ state: { isDark }, version: 0 }))
+    } catch (e) {}
   }
 }
diff --git a/vite.config.ts b/vite.config.ts
index 0ad5b50..7f14f89 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -128,37 +128,63 @@ function openViaCli(locator: string, callback: (err: Error | null, bin?: string)
 function openInIde(locator: string, callback: (err: Error | null, bin?: string) => void) {
   const isWindows = os.platform() === 'win32'
   const isMac = os.platform() === 'darwin'
+  const home = os.homedir()
 
-  const cleanPath = locator.replace(/^[/\\]+/, '')
-  const targetUri = `/${cleanPath}`
+  // Clean and prepare URI
+  const cleanPath = locator.replace(/\\/g, '/').replace(/^\/+/, '')
+  const encodedTargetUri = encodeURI(`/${cleanPath}`)
 
   if (isMac) {
-    // Specifically target Antigravity IDE.app to prevent opening regular Antigravity or other apps
-    const ideAppPath = fs.existsSync('/Applications/Antigravity IDE.app')
-      ? '/Applications/Antigravity IDE.app'
-      : path.join(os.homedir(), 'Applications/Antigravity IDE.app')
+    // 1. Direct macOS protocol URL scheme with targeted app:
+    // Uses macOS LaunchServices directly without spawning a secondary Electron CLI process.
+    // Instant (<100ms) with zero dock bounce and no delay.
+    const ideAppPaths = [
+      '/Applications/Antigravity IDE.app',
+      path.join(home, 'Applications/Antigravity IDE.app'),
+      '/Applications/Antigravity.app',
+      path.join(home, 'Applications/Antigravity.app'),
+      '/Applications/Cursor.app',
+      path.join(home, 'Applications/Cursor.app'),
+      '/Applications/Visual Studio Code.app',
+      path.join(home, 'Applications/Visual Studio Code.app'),
+    ]
 
-    const hasIdeApp = fs.existsSync(ideAppPath)
-    const cmd = hasIdeApp
-      ? `open -a "${ideAppPath}" "antigravity-ide://file${targetUri}"`
-      : `open "antigravity-ide://file${targetUri}" || open "cursor://file${targetUri}" || open "vscode://file${targetUri}"`
+    const foundApp = ideAppPaths.find((p) => fs.existsSync(p))
+
+    let scheme = 'antigravity-ide'
+    if (foundApp?.includes('Cursor')) {
+      scheme = 'cursor'
+    } else if (foundApp?.includes('Visual Studio Code')) {
+      scheme = 'vscode'
+    } else if (foundApp && !foundApp.includes('Antigravity IDE') && foundApp.includes('Antigravity')) {
+      scheme = 'antigravity'
+    }
+
+    const url = `${scheme}://file${encodedTargetUri}`
+    const cmd = foundApp ? `open -a "${foundApp}" "${url}"` : `open "${url}"`
 
     exec(cmd, (error) => {
-      // Specifically bring Antigravity IDE to the foreground (never 'Antigravity')
-      exec(
-        `osascript -e 'tell application id "com.google.antigravity-ide" to activate' -e 'tell application "Antigravity IDE" to activate' 2>/dev/null`,
-        () => {}
-      )
       if (!error) {
-        return callback(null, 'Antigravity IDE')
+        if (foundApp?.includes('Antigravity IDE') || !foundApp) {
+          exec(`osascript -e 'tell application id "com.google.antigravity-ide" to activate' 2>/dev/null`, () => {})
+        } else if (foundApp.includes('Antigravity')) {
+          exec(`osascript -e 'tell application id "com.google.antigravity" to activate' 2>/dev/null`, () => {})
+        } else if (foundApp.includes('Cursor')) {
+          exec(`osascript -e 'tell application "Cursor" to activate' 2>/dev/null`, () => {})
+        } else if (foundApp.includes('Visual Studio Code')) {
+          exec(`osascript -e 'tell application "Visual Studio Code" to activate' 2>/dev/null`, () => {})
+        }
+        return callback(null, foundApp || scheme)
       }
+
+      // Fallback to CLI if open command failed
       openViaCli(locator, callback)
     })
     return
   }
 
   if (isWindows) {
-    const cmd = `start "" /MAX "antigravity-ide://file${targetUri}" || start "" /MAX "cursor://file${targetUri}" || start "" /MAX "vscode://file${targetUri}"`
+    const cmd = `start "" /MAX "antigravity-ide://file${encodedTargetUri}" || start "" /MAX "cursor://file${encodedTargetUri}" || start "" /MAX "vscode://file${encodedTargetUri}"`
     exec(cmd, (error) => {
       if (!error) {
         return callback(null, 'antigravity-ide://file')
@@ -169,7 +195,7 @@ function openInIde(locator: string, callback: (err: Error | null, bin?: string)
   }
 
   // Linux
-  const cmd = `xdg-open "antigravity-ide://file${targetUri}" || xdg-open "vscode://file${targetUri}"`
+  const cmd = `xdg-open "antigravity-ide://file${encodedTargetUri}" || xdg-open "vscode://file${encodedTargetUri}"`
   exec(cmd, (error) => {
     if (!error) {
       return callback(null, 'antigravity-ide://file')