From 1cfb51f181712c83357858b6003541cccadd4fbe Mon Sep 17 00:00:00 2001
From: Josh Knapp <jknapp85@gmail.com>
Date: Tue, 7 Jul 2026 14:06:24 -0700
Subject: [PATCH] site-builder: surface Spotify/Twitch + contact-form recipient
 in the Styles (guided) panel

The right panel only renders GuidedStyles (there is no Settings tab), so the
per-component Settings panels I'd edited never showed. Add Spotify/Twitch to
SocialStylePanel's platform dropdown and the 'Send submissions to' + thank-you
fields to FormStylePanel (shown for any form with a recipientEmail prop).
---
 .../src/panels/right/styles/FormStylePanel.tsx | 18 ++++++++++++++++++
 .../panels/right/styles/SocialStylePanel.tsx   |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/craft/src/panels/right/styles/FormStylePanel.tsx b/craft/src/panels/right/styles/FormStylePanel.tsx
index 642d1d3..76f343b 100644
--- a/craft/src/panels/right/styles/FormStylePanel.tsx
+++ b/craft/src/panels/right/styles/FormStylePanel.tsx
@@ -35,6 +35,24 @@ export const FormStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProp
 
   return (
     <>
+      {/* Contact-form relay: where submissions are emailed. Present on ContactForm
+          and FormContainer (both have recipientEmail/thankYouUrl props). */}
+      {nodeProps.recipientEmail !== undefined && (
+        <div style={sectionGap}>
+          <label style={labelStyle}>Send submissions to (email)</label>
+          <input type="email" value={nodeProps.recipientEmail || ''} onChange={(e) => setProp('recipientEmail', e.target.value)} placeholder="you@example.com" style={inputStyle} />
+          <p style={{ fontSize: 10, color: '#71717a', margin: '4px 0 0' }}>
+            Emailed via the site's contact-form relay (an admin must enable it in Server Settings). Leave blank to use the Form Action URL instead.
+          </p>
+        </div>
+      )}
+      {nodeProps.thankYouUrl !== undefined && (
+        <div style={sectionGap}>
+          <label style={labelStyle}>Thank-you page URL (optional)</label>
+          <input type="text" value={nodeProps.thankYouUrl || ''} onChange={(e) => setProp('thankYouUrl', e.target.value)} placeholder="/thank-you (blank = hosted page)" style={inputStyle} />
+        </div>
+      )}
+
       {/* Form action/method */}
       {nodeProps.action !== undefined && (
         <div style={sectionGap}>
diff --git a/craft/src/panels/right/styles/SocialStylePanel.tsx b/craft/src/panels/right/styles/SocialStylePanel.tsx
index 785f675..9e42610 100644
--- a/craft/src/panels/right/styles/SocialStylePanel.tsx
+++ b/craft/src/panels/right/styles/SocialStylePanel.tsx
@@ -83,7 +83,7 @@ export const SocialStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodePr
               style={{ width: '100%', padding: '6px', fontSize: 11, background: '#27272a', color: '#e4e4e7', border: '1px solid #3f3f46', borderRadius: 4, cursor: 'pointer' }}
             >
               <option value="">+ Add Platform...</option>
-              {['facebook', 'twitter', 'instagram', 'linkedin', 'youtube', 'github', 'tiktok', 'pinterest', 'snapchat', 'whatsapp'].map((p) => (
+              {['facebook', 'twitter', 'instagram', 'linkedin', 'youtube', 'github', 'tiktok', 'pinterest', 'snapchat', 'whatsapp', 'spotify', 'twitch'].map((p) => (
                 <option key={p} value={p}>{p.charAt(0).toUpperCase() + p.slice(1)}</option>
               ))}
             </select>