feat(notifications): toon textarea altijd in answer-modal naast opties

Vervang opties-XOR-textarea door twee onafhankelijke blokken: opties
alleen wanneer aanwezig, vrij tekstveld altijd zichtbaar. Bij opties
een visuele scheiding (border-t) en label 'Of typ een eigen antwoord'.
Verstuur-knop nu altijd in footer zichtbaar (was verborgen bij opties).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/notifications/answer-modal.tsx

@@ -115,7 +115,7 @@ export function AnswerModal({ question, isDemo, onClose }: AnswerModalProps) {
               {question.question}
             </div>
 
-            {question.options && question.options.length > 0 ? (
+            {question.options && question.options.length > 0 && (
               <div className="space-y-2">
                 <p className="text-muted-foreground text-xs">Kies een van de opties:</p>
                 <div className="flex flex-col gap-2">
@@ -134,28 +134,31 @@ export function AnswerModal({ question, isDemo, onClose }: AnswerModalProps) {
                   ))}
                 </div>
               </div>
-            ) : (
-              <div className="space-y-1">
-                <Textarea
-                  value={answer}
-                  onChange={(e) => setAnswer(e.target.value)}
-                  placeholder="Typ je antwoord…"
-                  rows={5}
-                  maxLength={ANSWER_MAX_CHARS}
-                  disabled={isDemo}
-                  aria-label="Antwoord op Claude's vraag"
-                />
-                <div
-                  className={
-                    tooLong
-                      ? 'text-error text-right text-xs'
-                      : 'text-muted-foreground text-right text-xs'
-                  }
-                >
-                  {charsLeft} tekens over
-                </div>
-              </div>
             )}
+
+            <div className={question.options && question.options.length > 0 ? 'space-y-1 border-t pt-4' : 'space-y-1'}>
+              {question.options && question.options.length > 0 && (
+                <p className="text-muted-foreground text-xs">Of typ een eigen antwoord</p>
+              )}
+              <Textarea
+                value={answer}
+                onChange={(e) => setAnswer(e.target.value)}
+                placeholder="Typ je antwoord…"
+                rows={5}
+                maxLength={ANSWER_MAX_CHARS}
+                disabled={isDemo}
+                aria-label="Antwoord op Claude's vraag"
+              />
+              <div
+                className={
+                  tooLong
+                    ? 'text-error text-right text-xs'
+                    : 'text-muted-foreground text-right text-xs'
+                }
+              >
+                {charsLeft} tekens over
+              </div>
+            </div>
           </div>
 
           <div className={entityDialogFooterClasses} data-debug-id="answer-modal__submit">
@@ -163,16 +166,14 @@ export function AnswerModal({ question, isDemo, onClose }: AnswerModalProps) {
               <Button variant="ghost" onClick={closeGuard.attemptClose} disabled={pending}>
                 Annuleren
               </Button>
-              {(!question.options || question.options.length === 0) && (
+              <DemoTooltip show={isDemo}>
-                <DemoTooltip show={isDemo}>
+                <Button
-                  <Button
+                  onClick={() => submit(answer)}
-                    onClick={() => submit(answer)}
+                  disabled={submitDisabled}
-                    disabled={submitDisabled}
+                >
-                  >
+                  {pending ? 'Bezig…' : 'Verstuur'}
-                    {pending ? 'Bezig…' : 'Verstuur'}
+                </Button>
-                  </Button>
+              </DemoTooltip>
-                </DemoTooltip>
-              )}
             </div>
           </div>
         </DialogContent>