From 1ebde6b15c653a54bc5317d7f366d5f09a85801d Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Fri, 12 Jun 2026 07:48:30 +0330
Subject: [PATCH] feat(admin): seed colour presets with a placeholder per
 shared colour
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A colour preset is a setup for ALL of a project's shared colours, but the editor
forced the admin to add each colour one by one. Now:

- "+ پریست جدید" pre-fills one item per shared colour (seeded from each colour's
  default), so a new preset is a complete colour setup out of the box.
- New "+ همهٔ رنگ‌های مشترک" button back-fills placeholders for any shared colours
  missing from an existing preset (or after new shared colours are added).

Frontend-only change in ProjectScenes.tsx PresetsTab.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/admin/ProjectScenes.tsx | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/admin/ProjectScenes.tsx b/src/components/admin/ProjectScenes.tsx
index 143e953..346bc0b 100644
--- a/src/components/admin/ProjectScenes.tsx
+++ b/src/components/admin/ProjectScenes.tsx
@@ -547,9 +547,26 @@ function PresetsTab({ projectId }: { projectId: string }) {
 
   const colorKeys = useMemo(() => colors.map((c) => ({ key: c.element_key, title: c.title })), [colors]);
 
-  const startNew = () => setEdit({ name: "", sort: rows.length, items: [] });
+  // A preset is a colour setup for ALL shared colours, so a new preset starts
+  // pre-filled with one placeholder per shared colour (seeded from its default),
+  // instead of forcing the admin to add each one by hand.
+  const seedItems = (): PresetItem[] =>
+    colors.map((c, i) => ({ element_key: c.element_key, value: c.default_color || "#000000", sort: i }));
+
+  const startNew = () => setEdit({ name: "", sort: rows.length, items: seedItems() });
   const setItems = (items: PresetItem[]) => setEdit((e) => (e ? { ...e, items } : e));
 
+  // Fill placeholders for any shared colours not yet present (for existing presets,
+  // or after new shared colours were added).
+  const fillAllColors = () => {
+    const present = new Set((edit?.items ?? []).map((it) => it.element_key));
+    const base = edit?.items ?? [];
+    const additions = colors
+      .filter((c) => !present.has(c.element_key))
+      .map((c, i) => ({ element_key: c.element_key, value: c.default_color || "#000000", sort: base.length + i }));
+    if (additions.length) setItems([...base, ...additions]);
+  };
+
   const save = async () => {
     if (!edit) return;
     setSaving(true); setErr(null);
@@ -584,7 +601,12 @@ function PresetsTab({ projectId }: { projectId: string }) {
           <div className="space-y-2">
             <div className="flex items-center justify-between">
               <span className="text-xs text-gray-400">رنگ‌های پریست</span>
-              <button className={ghost} onClick={() => setItems([...(edit.items ?? []), { element_key: colorKeys[0]?.key ?? "", value: "#3366ff", sort: (edit.items ?? []).length }])}>+ افزودن رنگ</button>
+              <div className="flex items-center gap-2">
+                {colors.length > 0 && (edit.items ?? []).length < colors.length && (
+                  <button className={ghost} onClick={fillAllColors} title="افزودن یک جای‌خالی برای هر رنگ مشترک پروژه">+ همهٔ رنگ‌های مشترک</button>
+                )}
+                <button className={ghost} onClick={() => setItems([...(edit.items ?? []), { element_key: colorKeys[0]?.key ?? "", value: "#3366ff", sort: (edit.items ?? []).length }])}>+ افزودن رنگ</button>
+              </div>
             </div>
             {(edit.items ?? []).length === 0 ? (
               <p className="text-[11px] text-gray-600">رنگی اضافه نشده.</p>