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,77 +73,111 @@ export default function FeedbackModal({
         logbookId,
         logbookTitle
       })
-      await showAlert(t('feedback.success'), t('feedback.title'))
-      onClose()
+      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">
+          <button
+            type="button"
+            className="registration-disclaimer__close feedback-modal__close"
+            onClick={onClose}
+            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>
-            <button
-              type="button"
-              className="registration-disclaimer__close"
-              onClick={onClose}
-              disabled={sending}
-              aria-label={t('feedback.cancel')}
-            >
-              <X size={18} />
-            </button>
           </div>
 
-          <p className="registration-disclaimer__intro">{t('feedback.intro')}</p>
-
-          <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}
-              >
-                <option value="general">{t('feedback.category_general')}</option>
-                <option value="bug">{t('feedback.category_bug')}</option>
-                <option value="feature">{t('feedback.category_feature')}</option>
-              </select>
-            </label>
-
-            <label className="feedback-form__field">
-              <span>{t('feedback.message_label')}</span>
-              <textarea
-                value={message}
-                onChange={(event) => setMessage(event.target.value)}
-                placeholder={t('feedback.message_placeholder')}
-                rows={6}
-                maxLength={2000}
-                required
-                disabled={sending}
-              />
-            </label>
-
-            <div className="auth-actions feedback-form__actions">
-              <button type="button" className="btn secondary" onClick={onClose} disabled={sending}>
-                {t('feedback.cancel')}
-              </button>
-              <button type="submit" className="btn primary" disabled={sending || !message.trim()}>
-                {sending ? t('feedback.sending') : t('feedback.send')}
-              </button>
+          {submitState === 'success' ? (
+            <div className="feedback-status feedback-status--success" role="status" aria-live="polite">
+              <CheckCircle2 size={40} aria-hidden="true" />
+              <p>{statusMessage}</p>
             </div>
-          </form>
+          ) : (
+            <>
+              <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={submitState === 'submitting'}
+                  >
+                    <option value="general">{t('feedback.category_general')}</option>
+                    <option value="bug">{t('feedback.category_bug')}</option>
+                    <option value="feature">{t('feedback.category_feature')}</option>
+                  </select>
+                </label>
+
+                <label className="feedback-form__field">
+                  <span>{t('feedback.message_label')}</span>
+                  <textarea
+                    value={message}
+                    onChange={(event) => {
+                      setMessage(event.target.value)
+                      if (submitState === 'error') {
+                        setSubmitState('idle')
+                        setStatusMessage(null)
+                      }
+                    }}
+                    placeholder={t('feedback.message_placeholder')}
+                    rows={6}
+                    maxLength={2000}
+                    required
+                    disabled={submitState === 'submitting'}
+                  />
+                </label>
+
+                <div className="auth-actions feedback-form__actions">
+                  <button
+                    type="button"
+                    className="btn secondary"
+                    onClick={onClose}
+                    disabled={submitState === 'submitting'}
+                  >
+                    {t('feedback.cancel')}
+                  </button>
+                  <button
+                    type="submit"
+                    className="btn primary"
+                    disabled={submitState === 'submitting' || !message.trim()}
+                  >
+                    {submitState === 'submitting' ? t('feedback.sending') : t('feedback.send')}
+                  </button>
+                </div>
+              </form>
+            </>
+          )}
         </div>
       </div>
     </div>