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

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

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

frontend/src/components/Header.tsx

@@ -2,9 +2,19 @@ import React, { useEffect, useState } from "react";
 import { Link, NavLink, useLocation } from "react-router-dom";
 import { MenuIcon, PhoneIcon, XIcon } from "lucide-react";
 import { useSite } from "../api";
+import { useFieldSaver } from "../admin/AdminContext";
+import { InlineEdit } from "./admin/InlineEdit";
+import { EditableItem, SingletonPill } from "../admin/Editable";
 
 export function Header() {
   const { brand, nav } = useSite();
+  const save = useFieldSaver();
+
+  const saveNav = (id: number, changes: Record<string, unknown>) =>
+    save("nav", id, changes, (d) => {
+      const item = d.nav.find((n) => n.id === id);
+      if (item) Object.assign(item, changes);
+    });
   const [scrolled, setScrolled] = useState(false);
   const [open, setOpen] = useState(false);
   const { pathname } = useLocation();
@@ -28,6 +38,7 @@ export function Header() {
       }`}
     >
       <div className="mx-auto flex max-w-site items-center justify-between gap-8 px-6 py-4 lg:px-10">
+        <div className="relative flex items-center">
         <Link
           to="/"
           className="flex items-center gap-3"
@@ -41,11 +52,14 @@ export function Header() {
             }`}
           />
         </Link>
+          <SingletonPill resource="brand" label="ویرایش برند و لوگو" className="absolute -left-10 top-1/2 -translate-y-1/2" />
+        </div>
 
         <nav aria-label="ناوبری اصلی" className="hidden xl:block">
           <ul className="flex items-center gap-7">
             {nav.map((item) => (
-              <li key={item.href}>
+              <EditableItem key={item.id} resource="nav" item={item}>
+              <li>
                 <NavLink
                   to={item.href}
                   className={({ isActive }) =>
@@ -56,7 +70,10 @@ export function Header() {
                 >
                   {({ isActive }) => (
                     <>
-                      {item.label}
+                      <InlineEdit
+                        value={item.label}
+                        onSave={(v) => saveNav(item.id, { label: v })}
+                      />
                       <span
                         className={`absolute -bottom-0.5 left-0 right-0 h-px w-full origin-center bg-copper transition-transform duration-300 ease-lux ${
                           isActive
@@ -68,6 +85,7 @@ export function Header() {
                   )}
                 </NavLink>
               </li>
+              </EditableItem>
             ))}
           </ul>
         </nav>
@@ -109,7 +127,8 @@ export function Header() {
         >
           <ul className="grid gap-1">
             {nav.map((item) => (
-              <li key={item.href}>
+              <EditableItem key={item.id} resource="nav" item={item}>
+              <li>
                 <NavLink
                   to={item.href}
                   className={({ isActive }) =>
@@ -118,9 +137,13 @@ export function Header() {
                     }`
                   }
                 >
-                  {item.label}
+                  <InlineEdit
+                    value={item.label}
+                    onSave={(v) => saveNav(item.id, { label: v })}
+                  />
                 </NavLink>
               </li>
+              </EditableItem>
             ))}
           </ul>
         </nav>