Add OG image support for WhatsApp/social media link previews

src/pages/QuestionnaireForm.tsx

@@ -9,6 +9,7 @@ export function QuestionnaireForm() {
   const [title, setTitle] = useState('')
   const [slug, setSlug] = useState('')
   const [description, setDescription] = useState('')
+  const [ogImage, setOgImage] = useState('')
   const [isPrivate, setIsPrivate] = useState(false)
   const [error, setError] = useState('')
   const [slugError, setSlugError] = useState('')
@@ -28,6 +29,7 @@ export function QuestionnaireForm() {
         setTitle(data.questionnaire.title)
         setSlug(data.questionnaire.slug)
         setDescription(data.questionnaire.description || '')
+        setOgImage(data.questionnaire.og_image || '')
         setIsPrivate(!!data.questionnaire.is_private)
       }
     } catch (error) {
@@ -86,7 +88,7 @@ export function QuestionnaireForm() {
         method,
         headers: { 'Content-Type': 'application/json' },
         credentials: 'include',
-        body: JSON.stringify({ title, slug, description, isPrivate }),
+        body: JSON.stringify({ title, slug, description, ogImage, isPrivate }),
       })
 
       const data = await res.json()
@@ -180,6 +182,37 @@ export function QuestionnaireForm() {
             />
           </div>
 
+          <div>
+            <label htmlFor="ogImage" className="block text-sm font-medium text-text mb-2">
+              Preview Afbeelding (voor WhatsApp/Social Media)
+            </label>
+            <input
+              type="url"
+              id="ogImage"
+              value={ogImage}
+              onChange={(e) => setOgImage(e.target.value)}
+              className="w-full px-4 py-3 bg-bg-input border border-border rounded-lg text-text placeholder-text-faint focus:outline-none focus:border-accent focus:ring-2 focus:ring-accent/20 transition-colors"
+              placeholder="https://voorbeeld.nl/afbeelding.jpg"
+            />
+            <p className="mt-1 text-xs text-text-faint">
+              URL naar een afbeelding die getoond wordt bij het delen van de link op WhatsApp, Facebook, etc.
+              Aanbevolen formaat: 1200x630 pixels.
+            </p>
+            {ogImage && (
+              <div className="mt-3 p-3 bg-bg-input rounded-lg border border-border">
+                <p className="text-xs text-text-muted mb-2">Preview:</p>
+                <img 
+                  src={ogImage} 
+                  alt="Preview" 
+                  className="max-h-32 rounded border border-border"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = 'none'
+                  }}
+                />
+              </div>
+            )}
+          </div>
+
           <div className="flex items-center gap-3 p-4 bg-bg-input rounded-lg border border-border">
             <input
               type="checkbox"