UI/UX - Email node

🧩 Component Name: Email Node A smart node block used in automated workflows to send styled email messages. Message: it's gonna be similar to SMS but needs way more styling/formatting with this one i imagine it's gonna have a button to enlarge / pop out for more detailed editing so it might be like core details From: Subject line: preview text: [edit email] > opens pop up/pop out with email editor (you press edit email, and the editor opens) Preview on right side and i think the header should be editable so we can say like "welcome email" 🔧 Structure & Fields Element Type Notes 🏷️ Header (Editable Title) Text Field Default: “Email” — can be renamed to “Welcome Email”, “Report Email”, etc. 📤 From Text Input Custom sender email or domain shown (e.g., noreply@formflow.com) 📥 To Auto-linked or placeholder Usually auto-filled from user data or prior steps ✉️ Subject Line Text Input Required 🔎 Preview Text Text Input Optional preview snippet (shown in inboxes) 📝 Edit Email Button Opens a modal/pop-out WYSIWYG email editor 👁 Live Preview Right Panel Shows real-time visual of the formatted email ✨ UI/UX Design Guidelines Layout & Structure: Two-Column Layout (Optional Responsive Toggle): Left Side: All inputs (From, To, Subject, Preview, [Edit Email]) Right Side: Live rendered preview (like the one in Resend editor or Mailchimp) Pop-Out Email Editor (Modal or Side Panel): Rich text editor: bold, italic, underline, links, image, buttons Drag/drop blocks or markdown mode (optional for dev power users) Compact mode by default, expandable with Edit Email to open full editor. Interactions: Hovering over “Edit Email” shows tooltip: “Open full email editor” Auto-save drafts while editing Preview updates in real time (on the right) or with a short delay after editing Fallback view if editor is empty: “Start designing your email” 💡 Use Cases Welcome Email: Automated first touchpoint after signup Monthly Report: Send a summary of form or app activity Abandoned Submission Reminder: Personalized nudge for users Team Notification: Internal alert on form submission or update Marketing Blast: Stylized message to a contact list 🧠 Smart Behavior Suggestions Detect if subject/preview is too long and warn Option to clone/copy existing email nodes AI suggestions: "Generate subject line", "Summarize content for preview" Figma Design (WIP)