فرانت‌اند: ویرایش زنده درجا — دوقلوی دیجیتال سایت برای ادمین

لایه ویرایش بصری روی سایت واقعی (بدون داشبورد جدا):

- ورود ادمین از مسیر پنهان /admin/login با توکن JWT (localStorage) و
  AdminContext شامل isEditMode و وضعیت ذخیره (همگام/در حال ذخیره/خطا)
- AdminBar شناور پایین صفحه (فقط برای کاربر واردشده): کلید حالت ویرایش،
  وضعیت ذخیره، خروج — حالت ویرایش در sessionStorage می‌ماند
- InlineEdit: در حالت عادی دقیقاً همان HTML قبلی (بدون تغییر چیدمان)؛
  در حالت ویرایش کادرخط‌چین + contentEditable با ذخیره خودکار در blur
  (Enter ذخیره، Esc لغو) — وایرایش‌شده روی همه متن‌های سایت: هیرو،
  تیتر بخش‌ها، هیرو صفحات، داستان، فرم تماس، خبرنامه، فوتر، منو،
  برچسب‌های وضعیت پروژه و...
- کشوی عمومی EntityDrawer با پیکربندی متمرکز برای ۱۴ مجموعه (خدمات،
  پروژه‌ها، مقالات، نظرات، سوالات، تیم، تایم‌لاین، آمار، چرا آرامش،
  مدل‌های سرمایه‌گذاری، مراحل کار، دفاتر، گالری، منو): ویرایش چندفیلدی،
  افزودن، حذف و جابه‌جایی ترتیب (▲▼) با ذخیره خودکار هر فیلد
- دکمه‌های شناور ویرایش/حذف/ترتیب فقط در حالت ویرایش روی آیتم‌ها
- کشوهای یگانه: برند و لوگو، تنظیمات هیرو، فرم تماس، خبرنامه، فوتر،
  قبل/بعد و نقل‌قول داستان — آپلود تصویر به MinIO از همان‌جا
- به‌روزرسانی خوش‌بینانه SiteContext (updateSite) پس از هر PATCH؛
  مسیرها در حالت ویرایش کلیک نمی‌شوند؛ breadcrumb محافظ beforeunload

frontend/src/components/home/Gallery.tsx

@@ -3,11 +3,11 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { ChevronLeftIcon, ChevronRightIcon, XIcon } from 'lucide-react'
 import { Reveal } from '../Reveal'
 import { SectionHeading } from '../SectionHeading'
-import { useSectionHeading, useSite } from '../../api'
+import { useSite } from '../../api'
+import { AddItemButton, EditableItem } from '../../admin/Editable'
 
 export function Gallery() {
   const { gallery } = useSite()
-  const heading = useSectionHeading('gallery')
   const [active, setActive] = useState<number | null>(null)
 
   const close = useCallback(() => setActive(null), [])
@@ -30,33 +30,37 @@ export function Gallery() {
     <section className="bg-ink py-24 lg:py-32" aria-labelledby="gallery-title">
       <div className="mx-auto max-w-site px-6 lg:px-10">
         <SectionHeading
-          title={heading.title}
-          lead={heading.lead}
+          title="گالری تصاویر"
+          lead="قاب‌هایی از کارگاه‌ها و پروژه‌های تحویل‌شده گروه ساختمانی آرامش."
+          headingKey="gallery"
           align="center"
         />
 
         <div className="mt-14 grid grid-cols-2 gap-4 lg:grid-cols-3">
           {gallery.map((image, i) => (
             <Reveal key={image.id} delay={0.04 * i}>
-              <button
-                type="button"
-                onClick={() => setActive(i)}
-                className="group block w-full overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
-                aria-label={`بزرگ‌نمایی تصویر شماره ${(i + 1).toLocaleString('fa-IR')}`}
-              >
-                <img
-                  src={image.src}
-                  alt={image.alt}
-                  className="aspect-[4/3] w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
-                />
-              </button>
+              <EditableItem resource="gallery" item={image}>
+                <button
+                  type="button"
+                  onClick={() => setActive(i)}
+                  className="group block w-full overflow-hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-copper"
+                  aria-label={`بزرگ‌نمایی تصویر شماره ${(i + 1).toLocaleString('fa-IR')}`}
+                >
+                  <img
+                    src={image.src}
+                    alt={image.alt}
+                    className="aspect-[4/3] w-full object-cover transition-transform duration-500 ease-lux group-hover:scale-105"
+                  />
+                </button>
+              </EditableItem>
             </Reveal>
           ))}
+          <AddItemButton resource="gallery" />
         </div>
       </div>
 
       <AnimatePresence>
-        {active !== null && (
+        {active !== null && gallery[active] && (
           <motion.div
             className="fixed inset-0 z-[80] flex items-center justify-center bg-char/80 backdrop-blur-lg p-6"
             initial={{ opacity: 0 }}
@@ -116,4 +120,4 @@ export function Gallery() {
       </AnimatePresence>
     </section>
   )
-}
+}