# 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`:
```ts
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).