From df7d543d0c1a7e608c4865b4b457cb1babafa9b5 Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Fri, 15 May 2026 05:09:48 +0200
Subject: [PATCH] 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 | 65 ++++++++++++-----------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/components/notifications/answer-modal.tsx b/components/notifications/answer-modal.tsx
index 8473e32..0123271 100644
--- a/components/notifications/answer-modal.tsx
+++ b/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}>
-                  <Button
-                    onClick={() => submit(answer)}
-                    disabled={submitDisabled}
-                  >
-                    {pending ? 'Bezig…' : 'Verstuur'}
-                  </Button>
-                </DemoTooltip>
-              )}
+              <DemoTooltip show={isDemo}>
+                <Button
+                  onClick={() => submit(answer)}
+                  disabled={submitDisabled}
+                >
+                  {pending ? 'Bezig…' : 'Verstuur'}
+                </Button>
+              </DemoTooltip>
             </div>
           </div>
         </DialogContent>