From 6ea92bef495c65f9ff3ab0d1f3e0a748990d7bfb Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 23 Apr 2026 11:01:04 +0200
Subject: [PATCH] refactor(MatchReportApiDialog): update draft status display
 and improve styling

- Removed the old draft status indicator and replaced it with a new draft status bar for better visibility.
- Enhanced the styling of the draft status bar to improve user experience and consistency.
- Updated the logic to return a 'Bereit' status when applicable, ensuring accurate draft state representation.
- Integrated local draft persistence and synchronization methods to maintain draft state effectively.
---
 .../src/components/MatchReportApiDialog.vue   | 65 +++++++++++--------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/MatchReportApiDialog.vue b/frontend/src/components/MatchReportApiDialog.vue
index 8b09346c..01be76b4 100644
--- a/frontend/src/components/MatchReportApiDialog.vue
+++ b/frontend/src/components/MatchReportApiDialog.vue
@@ -591,13 +591,6 @@
 
             <!-- Absenden-Button -->
             <div class="submit-section">
-                <div
-                    v-if="draftStatusText && !isMatchCompleted"
-                    class="draft-status-indicator"
-                    :class="`state-${draftStatusState}`"
-                >
-                    {{ draftStatusText }}
-                </div>
                 <button 
                     @click="submitMatchReport" 
                     class="btn-primary submit-btn"
@@ -645,6 +638,11 @@
             </div>
         </div>
 
+        <div class="draft-status-bar" :class="`state-${draftStatusState}`">
+            <span class="draft-status-dot" aria-hidden="true"></span>
+            <span class="draft-status-text">{{ draftStatusText }}</span>
+        </div>
+
         <!-- PIN-Modal für zertifizierte Aufstellungen -->
         <div v-if="showPinModal" class="pin-modal-overlay" @click="closePinModal">
             <div class="pin-modal" @click.stop>
@@ -945,7 +943,7 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
             if (this.draftStatusState === 'saved') {
                 return 'Zwischengespeichert';
             }
-            return '';
+            return 'Bereit';
         }
     },
     async mounted() {
@@ -3226,6 +3224,8 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
             // Aktualisiere die Anzeige
             this.$forceUpdate();
             this.broadcastDraftDebounced();
+            this.persistLocalDraftDebounced();
+            this.syncDraftToServerDebounced(300);
         },
 
         // Berechne gewonnene Sätze für einen Spieler in einem Match
@@ -5239,38 +5239,51 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
     padding: 16px;
 }
 
-.draft-status-indicator {
-    display: inline-flex;
+.draft-status-bar {
+    border-top: 1px solid var(--border-color);
+    padding: 0.5rem 0.9rem;
+    display: flex;
     align-items: center;
-    justify-content: center;
-    margin-bottom: 10px;
-    padding: 0.25rem 0.6rem;
-    border-radius: 999px;
-    font-size: 0.78rem;
+    gap: 0.45rem;
+    background: var(--surface-color);
+    font-size: 0.82rem;
     font-weight: 600;
-    border: 1px solid var(--border-color);
-    background: var(--surface-muted);
     color: var(--text-muted);
+    min-height: 36px;
 }
 
-.draft-status-indicator.state-syncing {
-    border-color: rgba(59, 130, 246, 0.35);
-    background: rgba(59, 130, 246, 0.12);
+.draft-status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #6b7280;
+    flex: 0 0 auto;
+}
+
+.draft-status-bar.state-syncing {
     color: #1d4ed8;
 }
 
-.draft-status-indicator.state-saved {
-    border-color: rgba(16, 185, 129, 0.3);
-    background: rgba(16, 185, 129, 0.12);
+.draft-status-bar.state-syncing .draft-status-dot {
+    background: #2563eb;
+}
+
+.draft-status-bar.state-saved {
     color: #047857;
 }
 
-.draft-status-indicator.state-fallback {
-    border-color: rgba(245, 158, 11, 0.35);
-    background: rgba(245, 158, 11, 0.15);
+.draft-status-bar.state-saved .draft-status-dot {
+    background: #059669;
+}
+
+.draft-status-bar.state-fallback {
     color: #b45309;
 }
 
+.draft-status-bar.state-fallback .draft-status-dot {
+    background: #d97706;
+}
+
 .submit-btn {
     font-size: 16px;
     padding: 12px 24px;