site-builder/docs/superpowers/specs/2026-07-06-site-builder-feedback-batch-design.md

Site Builder — feedback batch (2026-07-06)

Six items from user feedback on the Craft.js site builder (/workspace/site-builder/craft/). Scope decisions were made with the user before writing this spec. Each item is independently shippable.

1 & 2 — Spotify + Twitch social links

File: craft/src/components/basic/SocialLinks.tsx Add spotify → { icon: 'fa-spotify', label: 'Spotify' } and twitch → { icon: 'fa-twitch', label: 'Twitch' } to platformIcons + platformLabels. The "Add Platform" dropdown, editor render, and toHtml pick them up automatically. Font Awesome 4.7.0 (loaded in craft/index.html) already ships both glyphs — no CDN change. Twitch live-status indicator is explicitly deferred (needs a Twitch app Client-ID + published-site JS) — see Follow-ups.

3 — Features: image option + optional button (structured, no canvas rewrite)

File: craft/src/components/sections/FeaturesGrid.tsx Extend FeatureItem:

mediaType?: 'icon' | 'image';  // default 'icon'
image?: string; imageAlt?: string;
buttonText?: string; buttonUrl?: string;

• Per-feature settings gain an icon/image toggle. Image mode = upload + URL input, reusing the uploadToWhp(file) helper pattern from Navbar.tsx/ImageBlock.tsx.
• Optional button fields (text + url); render a button under the description when buttonText is set.
• Editor render + toHtml updated: <img> when mediaType==='image', else the glyph; button block when present. Backward compatible (missing mediaType falls back to icon).

4 & 6 — Menu links in the header (seed a real default header)

Files: craft/src/state/PageContext.tsx (default header craftState), minor craft/src/panels/left/PagesPanel.tsx hint. Root cause of "no obvious way to add links to the menu": the default header (DEFAULT_HEADER craftState) is an empty Container — new sites open with a blank header and nothing to edit. Fix: seed the default header with a Navbar (logo + page links + CTA) so every new site has an editable menu out of the box. Add a one-line hint in the header-edit empty state pointing at the Navbar's Links section. No new component.

5 — "Spacer" gap between page and header

File: craft/src/components/layout/HeaderZone.tsx (+ header default from #4/6) Same root cause: the empty header zone's minHeight renders as a blank band that reads as a stray spacer. Seeding real header content (item 4/6) removes it in the common case. Additionally collapse the empty-state min-height so a deliberately empty header leaves no gap. Reproduce first to confirm there is not also a literal stray Spacer node before finalizing.

7 — Contact Form email delivery

Files: craft/src/components/forms/ContactForm.tsx, whp/web-files/api/site-builder.php (publish/deploy path), self-contained contact-handler.php dropped into the site docroot at publish.

• Add a "Send submissions to" recipient email field.
• Published sites live on the customer docroot (not the panel), so the working form needs a handler at the site. At publish/deploy time, if any page contains a ContactForm, write a self-contained contact-handler.php into the docroot with the recipient stored server-side (sidecar config, kept out of client HTML to avoid harvesting).
• toHtml emits action="contact-handler.php", a hidden honeypot field, and a thank-you redirect. Handler validates + sends via PHP mail().
• SMTP hardening via the existing mailer noted as a Follow-up.

Build & deploy

Frontend: cd craft && npm run build (runs tsc && vite build). Deploy is the standard WHP release pipeline (copy dist/ into the whp repo → build-release → download-update); not auto-deployed here — customer-facing UI, deploy is a separate authorized step.

Follow-ups (not in this batch)

• Twitch live-status badge (Twitch Helix + published-site JS + Client-ID config).
• ContactForm SMTP delivery via the WHP mailer instead of PHP mail().

Build order

1&2 (trivial) → 3 → 4/5/6 (shared header work) → 7 (largest, touches deploy path).