From d413f5f01865d1ba044a02abfd32c13f04185d7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9D=D0=B8=D0=BA=20=28Claude=29?= <claude@zeroday.su>
Date: Tue, 9 Jun 2026 10:48:38 +0300
Subject: [PATCH] feat: image_prompt_instructions in ChannelEdit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Добавлен state imagePromptInstructions с дефолтом из style.image_prompt_instructions
- Новая карточка UI с textarea (макс 500 символов + счётчик)
- Поле включено в PATCH payload
- Размещено между палиткой и info-блоком «Как это работает»
---
 components/ChannelEdit.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/components/ChannelEdit.js b/components/ChannelEdit.js
index c1dc73a..3a576a1 100644
--- a/components/ChannelEdit.js
+++ b/components/ChannelEdit.js
@@ -80,6 +80,7 @@ export default function ChannelEdit({ channel }) {
   const [imageStyle, setImageStyle] = useState(style.image_style || 'flat-illustration');
   const [imagePalette, setImagePalette] = useState(style.image_palette || 'auto');
   const [imageCustomColors, setImageCustomColors] = useState(style.image_custom_colors || '');
+  const [imagePromptInstructions, setImagePromptInstructions] = useState(style.image_prompt_instructions || '');
 
   const [saving, setSaving] = useState(false);
   const [deleting, setDeleting] = useState(false);
@@ -103,6 +104,7 @@ export default function ChannelEdit({ channel }) {
           image_style: imageStyle,
           image_palette: imagePalette,
           image_custom_colors: imageCustomColors.trim() || null,
+          image_prompt_instructions: imagePromptInstructions.trim() || null,
         },
       };
       const res = await fetch(`/api/channels/${channel.id}`, {
@@ -329,6 +331,26 @@ export default function ChannelEdit({ channel }) {
                 </div>
               </div>
 
+              {/* Инструкции для AI */}
+              <div className="card p-5">
+                <h3 className="font-semibold text-sm mb-1 flex items-center gap-2">
+                  <Sparkles className="w-4 h-4 text-accent" />
+                  Инструкции для AI
+                </h3>
+                <p className="text-xs text-gray-500 mb-3">
+                  Опиши, какими должны быть картинки. Например: <em>«тёмный фон, минималистичные 3D-объекты, технологичная эстетика, без людей»</em>.
+                  Применяется ко всем постам и обложкам статей этого канала.
+                </p>
+                <textarea
+                  className="input min-h-[90px] text-sm"
+                  value={imagePromptInstructions}
+                  onChange={e => setImagePromptInstructions(e.target.value)}
+                  placeholder="Примеры:&#10;— технологичный объект на тёмном градиентном фоне, как Stripe/Vercel blog&#10;— реалистичное фото молочного производства, без людей, фокус на деталях&#10;— мягкая пастельная акварель, природа и животные, тёплый тон"
+                  maxLength={500}
+                />
+                <div className="text-xs text-gray-500 text-right mt-1">{imagePromptInstructions.length}/500</div>
+              </div>
+
               {/* Preview подсказка */}
               <div className="card p-4 bg-accent/5 border-accent/20 text-sm text-gray-300">
                 <div className="font-medium text-accent mb-1">Как это работает</div>