fix(feedback): Erfolgsstatus inline anzeigen und Modal auto-schließen

Erfolgsmeldung erscheint im Formular statt hinter dem Modal; Schließen-Button oben rechts; Fehler inline.

Co-authored-by: Cursor <cursoragent@cursor.com>

client/src/App.css

@@ -388,6 +388,51 @@ html.scheme-dark .themed-select-option.is-selected {
   max-height: min(90vh, 820px);
 }
 
+.feedback-modal {
+  position: relative;
+}
+
+.feedback-modal__close {
+  top: 12px;
+  right: 12px;
+  z-index: 1;
+}
+
+.feedback-status {
+  text-align: center;
+  padding: 8px 0 4px;
+}
+
+.feedback-status p {
+  margin: 12px 0 0;
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.feedback-status--success {
+  color: #4ade80;
+  padding: 24px 8px 32px;
+}
+
+.feedback-status--success p {
+  color: var(--app-text-heading, #f1f5f9);
+}
+
+.feedback-status--error {
+  color: var(--app-error-text, #fda4af);
+  background: var(--app-error-bg, rgba(244, 63, 94, 0.08));
+  border: 1px solid var(--app-error-border, #f43f5e);
+  border-radius: 8px;
+  margin-bottom: 16px;
+  padding: 10px 12px;
+  text-align: left;
+}
+
+.feedback-status--error p {
+  margin: 0;
+  font-size: 14px;
+}
+
 .feedback-modal .auth-actions {
   margin-top: 0;
 }

client/src/components/FeedbackModal.tsx

@@ -1,8 +1,9 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { MessageSquarePlus, X } from 'lucide-react'
+import { CheckCircle2, MessageSquarePlus, X } from 'lucide-react'
 import { FeedbackApiError, sendFeedback, type FeedbackCategory } from '../services/feedback.js'
-import { useDialog } from './ModalDialog.tsx'
+
+const SUCCESS_CLOSE_DELAY_MS = 1800
 
 interface FeedbackModalProps {
   open: boolean
@@ -11,6 +12,8 @@ interface FeedbackModalProps {
   logbookTitle?: string | null
 }
 
+type SubmitState = 'idle' | 'submitting' | 'success' | 'error'
+
 export default function FeedbackModal({
   open,
   onClose,
@@ -18,33 +21,51 @@ export default function FeedbackModal({
   logbookTitle
 }: FeedbackModalProps) {
   const { t } = useTranslation()
-  const { showAlert } = useDialog()
   const [category, setCategory] = useState<FeedbackCategory>('general')
   const [message, setMessage] = useState('')
-  const [sending, setSending] = useState(false)
+  const [submitState, setSubmitState] = useState<SubmitState>('idle')
+  const [statusMessage, setStatusMessage] = useState<string | null>(null)
+  const closeTimerRef = useRef<number | null>(null)
+
+  const isBusy = submitState === 'submitting' || submitState === 'success'
+
+  const clearCloseTimer = () => {
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+  }
+
+  useEffect(() => {
+    return () => clearCloseTimer()
+  }, [])
 
   useEffect(() => {
     if (!open) return
     const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && !sending) onClose()
+      if (event.key === 'Escape' && !isBusy) onClose()
     }
     window.addEventListener('keydown', onKeyDown)
     return () => window.removeEventListener('keydown', onKeyDown)
-  }, [open, onClose, sending])
+  }, [open, onClose, isBusy])
 
   useEffect(() => {
     if (!open) {
+      clearCloseTimer()
       setCategory('general')
       setMessage('')
-      setSending(false)
+      setSubmitState('idle')
+      setStatusMessage(null)
     }
   }, [open])
 
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault()
-    if (!message.trim() || sending) return
+    if (!message.trim() || submitState === 'submitting' || submitState === 'success') return
+
+    setSubmitState('submitting')
+    setStatusMessage(null)
 
-    setSending(true)
     try {
       await sendFeedback({
         category,
@@ -52,48 +73,65 @@ export default function FeedbackModal({
         logbookId,
         logbookTitle
       })
-      await showAlert(t('feedback.success'), t('feedback.title'))
+      setSubmitState('success')
+      setStatusMessage(t('feedback.success'))
+      closeTimerRef.current = window.setTimeout(() => {
+        closeTimerRef.current = null
         onClose()
+      }, SUCCESS_CLOSE_DELAY_MS)
     } catch (error) {
-      const msg =
+      setSubmitState('error')
+      setStatusMessage(
         error instanceof FeedbackApiError && error.code === 'NOT_CONFIGURED'
           ? t('feedback.error_not_configured')
           : t('feedback.error_send')
-      await showAlert(msg, t('feedback.title'))
+      )
-    } finally {
-      setSending(false)
     }
   }
 
   if (!open) return null
 
   return (
-    <div className="disclaimer-modal-overlay" onClick={sending ? undefined : onClose}>
+    <div className="disclaimer-modal-overlay" onClick={isBusy ? undefined : onClose}>
       <div className="disclaimer-modal-panel" onClick={(event) => event.stopPropagation()}>
         <div className="auth-card glass registration-disclaimer registration-disclaimer--modal feedback-modal">
-          <div className="auth-header">
-            <MessageSquarePlus className="auth-icon accent" size={48} />
-            <h2>{t('feedback.title')}</h2>
           <button
             type="button"
-              className="registration-disclaimer__close"
+            className="registration-disclaimer__close feedback-modal__close"
             onClick={onClose}
-              disabled={sending}
+            disabled={isBusy}
             aria-label={t('feedback.cancel')}
           >
             <X size={18} />
           </button>
+
+          <div className="auth-header">
+            <MessageSquarePlus className="auth-icon accent" size={48} />
+            <h2>{t('feedback.title')}</h2>
           </div>
 
+          {submitState === 'success' ? (
+            <div className="feedback-status feedback-status--success" role="status" aria-live="polite">
+              <CheckCircle2 size={40} aria-hidden="true" />
+              <p>{statusMessage}</p>
+            </div>
+          ) : (
+            <>
               <p className="registration-disclaimer__intro">{t('feedback.intro')}</p>
 
+              {statusMessage && submitState === 'error' && (
+                <div className="feedback-status feedback-status--error" role="alert">
+                  <p>{statusMessage}</p>
+                </div>
+              )}
+
               <form className="feedback-form" onSubmit={handleSubmit}>
                 <label className="feedback-form__field">
                   <span>{t('feedback.category_label')}</span>
                   <select
                     value={category}
                     onChange={(event) => setCategory(event.target.value as FeedbackCategory)}
-                disabled={sending}
+                    disabled={submitState === 'submitting'}
                   >
                     <option value="general">{t('feedback.category_general')}</option>
                     <option value="bug">{t('feedback.category_bug')}</option>
@@ -105,24 +143,41 @@ export default function FeedbackModal({
                   <span>{t('feedback.message_label')}</span>
                   <textarea
                     value={message}
-                onChange={(event) => setMessage(event.target.value)}
+                    onChange={(event) => {
+                      setMessage(event.target.value)
+                      if (submitState === 'error') {
+                        setSubmitState('idle')
+                        setStatusMessage(null)
+                      }
+                    }}
                     placeholder={t('feedback.message_placeholder')}
                     rows={6}
                     maxLength={2000}
                     required
-                disabled={sending}
+                    disabled={submitState === 'submitting'}
                   />
                 </label>
 
                 <div className="auth-actions feedback-form__actions">
-              <button type="button" className="btn secondary" onClick={onClose} disabled={sending}>
+                  <button
+                    type="button"
+                    className="btn secondary"
+                    onClick={onClose}
+                    disabled={submitState === 'submitting'}
+                  >
                     {t('feedback.cancel')}
                   </button>
-              <button type="submit" className="btn primary" disabled={sending || !message.trim()}>
+                  <button
-                {sending ? t('feedback.sending') : t('feedback.send')}
+                    type="submit"
+                    className="btn primary"
+                    disabled={submitState === 'submitting' || !message.trim()}
+                  >
+                    {submitState === 'submitting' ? t('feedback.sending') : t('feedback.send')}
                   </button>
                 </div>
               </form>
+            </>
+          )}
         </div>
       </div>
     </div>