update code

app.py

@@ -742,6 +742,7 @@ def save_template():
         title = request.form.get('title')
         prompt = request.form.get('prompt')
         mode = request.form.get('mode', 'generate')
+        note = request.form.get('note', '')
         category = request.form.get('category', 'User')
         tags_field = request.form.get('tags')
         tags = parse_tags_field(tags_field)
@@ -837,6 +838,7 @@ def save_template():
         new_template = {
             'title': title,
             'prompt': prompt,
+            'note': note,
             'mode': mode,
             'category': category,
             'preview': preview_path,
@@ -895,6 +897,7 @@ def update_template():
         title = request.form.get('title')
         prompt = request.form.get('prompt')
         mode = request.form.get('mode', 'generate')
+        note = request.form.get('note', '')
         category = request.form.get('category', 'User')
         tags_field = request.form.get('tags')
         tags = parse_tags_field(tags_field)
@@ -1004,6 +1007,7 @@ def update_template():
 
             existing_template['title'] = title
             existing_template['prompt'] = prompt
+            existing_template['note'] = note
             existing_template['mode'] = mode
             existing_template['category'] = category
             if preview_path:
@@ -1047,6 +1051,7 @@ def update_template():
         user_prompts[template_index] = {
             'title': title,
             'prompt': prompt,
+            'note': note,
             'mode': mode,
             'category': category,
             'preview': preview_path,

static/script.js

@@ -452,6 +452,10 @@ document.addEventListener('DOMContentLoaded', () => {
                 persistSettings();
                 refreshPromptHighlight();
             }
+            // Fill note (default empty when absent)
+            promptNoteInput.value = template.note !== undefined ? (i18n.getText(template.note) || '') : '';
+            refreshNoteHighlight();
+            persistSettings();
             // Stay in template gallery view - don't auto-switch
             // User will switch view by selecting image from history or generating
         }
@@ -963,6 +967,7 @@ document.addEventListener('DOMContentLoaded', () => {
     
     const templateTitleInput = document.getElementById('template-title');
     const templatePromptInput = document.getElementById('template-prompt');
+    const templateNoteInput = document.getElementById('template-note');
     const templateModeSelect = document.getElementById('template-mode');
     const templateCategorySelect = document.getElementById('template-category-select');
     const templateCategoryInput = document.getElementById('template-category-input');
@@ -1191,6 +1196,7 @@ document.addEventListener('DOMContentLoaded', () => {
         // Pre-fill with template data
         templateTitleInput.value = template.title || '';
         templatePromptInput.value = template.prompt || '';
+        templateNoteInput.value = i18n.getText(template.note) || '';
         templateModeSelect.value = template.mode || 'generate';
         templateCategoryInput.classList.add('hidden');
         templateCategoryInput.value = '';
@@ -1274,6 +1280,7 @@ document.addEventListener('DOMContentLoaded', () => {
         // Clear all fields
         templateTitleInput.value = '';
         templatePromptInput.value = '';
+        templateNoteInput.value = promptNoteInput.value || '';
         templateModeSelect.value = 'generate';
         templateCategoryInput.classList.add('hidden');
         templateCategoryInput.value = '';
@@ -1341,6 +1348,7 @@ document.addEventListener('DOMContentLoaded', () => {
             // Pre-fill data
             templateTitleInput.value = '';
             templatePromptInput.value = promptInput.value;
+            templateNoteInput.value = promptNoteInput.value || '';
             templateModeSelect.value = 'generate';
             templateCategoryInput.classList.add('hidden');
             templateCategoryInput.value = '';
@@ -1547,6 +1555,7 @@ document.addEventListener('DOMContentLoaded', () => {
         saveTemplateBtn.addEventListener('click', async () => {
             const title = templateTitleInput.value.trim();
             const prompt = templatePromptInput.value.trim();
+            const note = templateNoteInput.value.trim();
             const mode = templateModeSelect.value;
             let category = templateCategorySelect.value;
             
@@ -1574,6 +1583,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 const formData = new FormData();
                 formData.append('title', title);
                 formData.append('prompt', prompt);
+                formData.append('note', note);
                 formData.append('mode', mode);
                 formData.append('category', category);
                 formData.append('tags', JSON.stringify(templateTags));

static/style.css

@@ -399,7 +399,7 @@ select:focus {
 
 textarea {
     resize: vertical;
-    min-height: 100px;
+    min-height: 30px;
 }
 
 /* Theme overrides driven from index.css gradients */
@@ -1924,7 +1924,7 @@ button#generate-btn:disabled {
 
 .template-preview-dropzone {
     width: 100%;
-    height: 220px;
+    height: 150px;
     border: 2px dashed rgba(255, 255, 255, 0.15);
     border-radius: 0.75rem;
     background: rgba(0, 0, 0, 0.2);
@@ -2069,6 +2069,16 @@ button#generate-btn:disabled {
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.1);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+}
+
+#create-template-modal .popup-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding-right: 0.25rem;
+    margin-right: -0.25rem; /* allow scrollbar without shifting content */
 }
 
 #save-template-btn {

templates/index.html

@@ -410,6 +410,11 @@
                         <textarea id="template-prompt" rows="3" placeholder="Template Prompt"></textarea>
                     </div>
 
+                    <div class="form-group">
+                        <label for="template-note">Note</label>
+                        <textarea id="template-note" rows="2" placeholder="Template Note (optional)"></textarea>
+                    </div>
+
                     <div class="form-row">
                         <div class="form-group">
                             <label for="template-mode">Mode</label>