Feat: Implement invisible pending queue for quick settings modal to allow background processing without blocking UI

index.html

@@ -74,7 +74,7 @@
 </head>
 <body class="dark-theme in-chat-view" style="visibility: hidden;">
   
-  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.8.321</div>
+  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.8.322</div>
     
   <!-- SVG Filters for Liquid Glass Refraction -->
   <svg width="0" height="0" style="position: absolute; pointer-events: none;">

src/app.js

@@ -365,31 +365,20 @@ Zu übersetzen: "${word}"`;
     // Only run if we're not in the tiny transparent overlay mode
     if (window.isOverlayMode) return;
     
-    let decks = db.getDecks();
-    if (!decks || decks.length === 0) return;
-
-    let cardsToEnrich = [];
-    for (const deck of decks) {
-      const cards = db.getCardsForDeck(deck.id);
-      cardsToEnrich.push(...cards.filter(c => 
-        c.back.includes('<!-- NEEDS_ENRICHMENT -->') || 
-        (!c.back.includes('**Erklärung:**') && !c.back.includes('Erklärung:'))
-      ));
-    }
-    
-    if (cardsToEnrich.length > 0) {
-      console.log(`Found ${cardsToEnrich.length} cards needing AI enrichment...`);
-      
-      // Delay slightly to not block initial UI render
-      setTimeout(async () => {
-        try {
-          const { aiRouter } = await import('./ai/router.js');
+    let pendingCards = db.getPendingCards();
+    if (!pendingCards || pendingCards.length === 0) return;
+
+    if (!window.isEnriching) {
+      window.isEnriching = true;
+      try {
+        const { aiRouter } = await import('./ai/router.js');
+        
+        // Process sequentially
+        for (const card of pendingCards) {
+          const word = card.front;
+          const pureTranslation = card.back.replace('<!-- PENDING_CORRECTION -->', '').replace('<!-- NEEDS_ENRICHMENT -->', '').trim();
           
-          for (const card of cardsToEnrich) {
-            const word = card.front;
-            const pureTranslation = card.back.replace('<!-- NEEDS_ENRICHMENT -->', '').trim();
-            
-            const prompt = `Erstelle eine kurze Erklärung und ein passendes Beispiel für diese Vokabelkarte, sowie einen Suchbegriff für ein Bild.
+          const prompt = `Erstelle eine kurze Erklärung und ein passendes Beispiel für diese Vokabelkarte, sowie einen Suchbegriff für ein Bild.
 Wort: "${word}"
 Übersetzung: "${pureTranslation}"
 

src/db/database.js

@@ -504,7 +504,7 @@ class Database {
   getDueCards(deckId) {
     const now = new Date().toISOString();
     return this.exec(
-      "SELECT * FROM flashcards WHERE deck_id = ? AND next_review <= ? ORDER BY next_review ASC",
+      "SELECT * FROM flashcards WHERE deck_id = ? AND next_review <= ? AND back NOT LIKE '%<!-- PENDING_CORRECTION -->%' ORDER BY next_review ASC",
       [deckId, now]
     );
   }
@@ -519,11 +519,15 @@ class Database {
 
   getCardsForDeck(deckId) {
     return this.exec(
-      "SELECT * FROM flashcards WHERE deck_id = ? ORDER BY created_at DESC",
+      "SELECT * FROM flashcards WHERE deck_id = ? AND back NOT LIKE '%<!-- PENDING_CORRECTION -->%' ORDER BY created_at DESC",
       [deckId]
     );
   }
 
+  getPendingCards() {
+    return this.exec("SELECT * FROM flashcards WHERE back LIKE '%<!-- PENDING_CORRECTION -->%' OR back LIKE '%<!-- NEEDS_ENRICHMENT -->%'");
+  }
+
   searchFlashcards(query) {
     return this.exec(`
       SELECT f.*, d.title as deck_title, d.color as deck_color

src/views/vocabulary-modal.js

@@ -271,49 +271,18 @@ Nur das rohe JSON:`;
       const isDuplicate = existingCards.some(card => card.front.toLowerCase() === parsed.front.toLowerCase());
       
       if (!isDuplicate) {
-        // Run AI correction and enrichment in the background BEFORE saving to DB
-        // This keeps the modal fast but ensures typos aren't saved
-        setTimeout(async () => {
-          try {
-            const { aiRouter } = await import('../ai/router.js');
-            const prompt = `Erstelle eine kurze Erklärung und ein passendes Beispiel für diese Vokabelkarte, sowie einen Suchbegriff für ein Bild.
-Wort: "${parsed.front}"
-Übersetzung: "${parsed.back}"
-
-WICHTIG: Prüfe, ob das "Wort" offensichtlich falsch geschrieben ist (z.B. phonetisch nach Gehör geschrieben). 
-Falls es einen Tippfehler enthält, gib das richtig geschriebene Wort im Feld "correctedWord" zurück. Wenn es korrekt geschrieben ist, lass das Feld weg oder setze es auf null.
-
-Generiere:
-- "explanation": 1-2 kurze Sätze in der Sprache der Übersetzung, die genau dieses Wort erklären. WICHTIG: Markiere das Lernwort (und seine Abwandlungen) IMMER fett mit HTML-Tags (z.B. <b>Wort</b>).
-- "example": Ein prägnanter Beispielsatz mit der Übersetzung. Das Lernwort MUSS auch hier mit <b>...</b> fett markiert sein.
-- "imageQuery": Ein präziser englischer Suchbegriff für die Bing-Bildersuche. Das Bild muss EINDEUTIG zur Übersetzung passen. Füge IMMER 'single photo, clear focus, high quality' am Ende hinzu. Keine abstrakten Cartoons.
-
-Antworte AUSSCHLIESSLICH mit einem validen JSON-Objekt. Keine Markdown-Formatierung.
-Beispiel für Tippfehler bei "abanden": 
-{"correctedWord": "abandon", "explanation": "Jemanden oder etwas <b>verlassen</b> oder aufgeben.", "example": "Er musste das alte Auto <b>verlassen</b>.", "imageQuery": "abandoned old car single photo clear focus"}`;
-
-            const response = await aiRouter.sendMessage(prompt, { 
-              model: 'gemini-3.1-flash-lite'
-            });
+        let finalBack = parsed.back;
+        
+        if (parsed.isDeepL) {
+          // Add a temporary marker so the background job knows this needs correction and enrichment
+          finalBack = `${parsed.back}\n\n<!-- PENDING_CORRECTION -->`;
+        }
 
-            let jsonStr = response.trim();
-            if (jsonStr.startsWith('```json')) jsonStr = jsonStr.replace(/```json/g, '').replace(/```/g, '').trim();
-            else if (jsonStr.startsWith('```')) jsonStr = jsonStr.replace(/```/g, '').trim();
-            
-            const aiData = JSON.parse(jsonStr);
-            const finalFront = aiData.correctedWord ? aiData.correctedWord : parsed.front;
-            const finalBack = `${parsed.back}\n\n**Erklärung:** ${aiData.explanation}\n\n**Beispiel:** ${aiData.example}`;
-            const searchTerms = encodeURIComponent(aiData.imageQuery || finalFront);
-            const imageUrl = `https://tse1.mm.bing.net/th?q=${searchTerms}&w=800&h=1000&c=7&rs=1`;
+        const searchTerms = encodeURIComponent(parsed.imageQuery || parsed.front);
+        const imageUrl = `https://tse1.mm.bing.net/th?q=${searchTerms}&w=800&h=1000&c=7&rs=1`;
 
-            db.addFlashcard(schnelldeck.id, finalFront, finalBack, imageUrl);
-            window.dispatchEvent(new CustomEvent('flashcards-updated'));
-          } catch (e) {
-            console.warn("Background AI enrichment failed, saving original.", e);
-            db.addFlashcard(schnelldeck.id, parsed.front, parsed.back, '');
-            window.dispatchEvent(new CustomEvent('flashcards-updated'));
-          }
-        }, 100);
+        db.addFlashcard(schnelldeck.id, parsed.front, finalBack, imageUrl);
+        window.dispatchEvent(new CustomEvent('flashcards-updated'));
       }
 
       // Show success with translation