Savestate: Implement deck details, manual flashcard addition, and free practice mode

index.html

@@ -51,7 +51,7 @@
 </head>
 <body class="dark-theme in-chat-view">
   
-  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #4ade80; opacity: 0.9; z-index: 99999; pointer-events: none; font-weight: bold; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.5); padding: 4px 12px; border-radius: 10px; border: 1px solid rgba(74,222,128,0.5); box-shadow: 0 0 10px rgba(74,222,128,0.2);">LIVE UPDATE FUNKTIONIERT! 🚀</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.1.48</div>
     
   <!-- SVG Filters for Liquid Glass Refraction -->
   <svg width="0" height="0" style="position: absolute; pointer-events: none;">

src/db/database.js

@@ -346,7 +346,6 @@ class Database {
       [id, originalPath, isDir ? 1 : 0, now]
     );
   }
-
   removeTrashItem(id) {
     if (!this.db) return;
     this.exec("DELETE FROM trash_metadata WHERE id = ?", [id]);
@@ -355,23 +354,16 @@ class Database {
   
   getDecks() {
     try {
-      const res = this.db.exec("SELECT * FROM flashcard_decks ORDER BY created_at DESC");
-      if (res.length === 0) return [];
-      
-      const decks = res[0].values.map(row => {
-        const deck = {};
-        res[0].columns.forEach((col, i) => deck[col] = row[i]);
-        return deck;
-      });
+      const decks = this.exec("SELECT * FROM flashcard_decks ORDER BY created_at DESC");
       
       // Get due cards count for each deck
       const now = new Date().toISOString();
       decks.forEach(deck => {
-        const countRes = this.db.exec(`SELECT COUNT(*) FROM flashcards WHERE deck_id = '${deck.id}' AND next_review <= '${now}'`);
-        deck.due_count = countRes.length > 0 ? countRes[0].values[0][0] : 0;
+        const countRes = this.exec("SELECT COUNT(*) as count FROM flashcards WHERE deck_id = ? AND next_review <= ?", [deck.id, now]);
+        deck.due_count = countRes.length > 0 ? countRes[0].count : 0;
         
-        const totalRes = this.db.exec(`SELECT COUNT(*) FROM flashcards WHERE deck_id = '${deck.id}'`);
-        deck.total_count = totalRes.length > 0 ? totalRes[0].values[0][0] : 0;
+        const totalRes = this.exec("SELECT COUNT(*) as count FROM flashcards WHERE deck_id = ?", [deck.id]);
+        deck.total_count = totalRes.length > 0 ? totalRes[0].count : 0;
       });
       
       return decks;
@@ -388,14 +380,12 @@ class Database {
       "INSERT INTO flashcard_decks (id, title, description, color, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?)",
       [id, title, description, color, now, now]
     );
-    this.saveToStorage();
     return { id, title, description, color, created_at: now, updated_at: now, due_count: 0, total_count: 0 };
   }
   
   deleteDeck(deckId) {
     this.exec("DELETE FROM flashcards WHERE deck_id = ?", [deckId]);
     this.exec("DELETE FROM flashcard_decks WHERE id = ?", [deckId]);
-    this.saveToStorage();
   }
 
   addFlashcard(deckId, front, back, imageUrl = null) {
@@ -408,31 +398,32 @@ class Database {
       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
       [id, deckId, front, back, imageUrl, now, 2.5, 0, 0, now, now]
     );
-    this.saveToStorage();
     return id;
   }
   
   getDueCards(deckId) {
     const now = new Date().toISOString();
-    const res = this.db.exec(
-      `SELECT * FROM flashcards WHERE deck_id = '${deckId}' AND next_review <= '${now}' ORDER BY next_review ASC LIMIT 50`
+    return this.exec(
+      "SELECT * FROM flashcards WHERE deck_id = ? AND next_review <= ? ORDER BY next_review ASC LIMIT 50",
+      [deckId, now]
+    );
+  }
+
+  getAllCards(deckId) {
+    // For free practice, shuffle them or just order randomly
+    return this.exec(
+      "SELECT * FROM flashcards WHERE deck_id = ? ORDER BY RANDOM() LIMIT 100",
+      [deckId]
     );
-    if (res.length === 0) return [];
-    
-    return res[0].values.map(row => {
-      const card = {};
-      res[0].columns.forEach((col, i) => card[col] = row[i]);
-      return card;
-    });
   }
   
   // SM-2 Algorithm update
   updateCardProgress(cardId, quality) {
     // quality: 0 (Again), 1 (Hard), 2 (Good), 3 (Easy)
-    const res = this.db.exec(`SELECT ease_factor, interval, repetitions FROM flashcards WHERE id = '${cardId}'`);
+    const res = this.exec("SELECT ease_factor, interval, repetitions FROM flashcards WHERE id = ?", [cardId]);
     if (res.length === 0) return;
     
-    let [ease_factor, interval, repetitions] = res[0].values[0];
+    let { ease_factor, interval, repetitions } = res[0];
     
     if (quality === 0) {
       repetitions = 0;
@@ -464,10 +455,9 @@ class Database {
     const now = new Date().toISOString();
     
     this.exec(
-      `UPDATE flashcards SET next_review = ?, ease_factor = ?, interval = ?, repetitions = ?, updated_at = ? WHERE id = ?`,
+      "UPDATE flashcards SET next_review = ?, ease_factor = ?, interval = ?, repetitions = ?, updated_at = ? WHERE id = ?",
       [next_review_iso, ease_factor, interval, repetitions, now, cardId]
     );
-    this.saveToStorage();
   }
 
 }

src/views/learn/learn-view.js

@@ -44,7 +44,7 @@ export class LearnView {
       decksHtml = `
         <div class="decks-grid">
           ${this.decks.map(deck => `
-            <div class="deck-card" onclick="window.learnView.startStudy('${deck.id}')">
+            <div class="deck-card" onclick="window.learnView.renderDeckDetails('${deck.id}')">
               <div class="deck-icon-wrapper" style="background: ${deck.color}20; color: ${deck.color};">
                 ${deck.title.charAt(0).toUpperCase()}
               </div>
@@ -61,7 +61,7 @@ export class LearnView {
 
     this.container.innerHTML = `
       <div class="learn-view">
-        <div style="display: flex; justify-content: space-between; align-items: center;">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
           <h2 style="margin: 0; font-size: 28px; color: var(--text-primary);">Lernen</h2>
           <button id="add-deck-btn" class="icon-button" style="background: var(--surface-2); border-radius: 50%; padding: 8px;">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
@@ -83,16 +83,91 @@ export class LearnView {
     }
   }
 
-  startStudy(deckId) {
+  renderDeckDetails(deckId) {
     this.activeDeckId = deckId;
-    this.dueCards = db.getDueCards(deckId);
-    this.currentCardIndex = 0;
+    const deck = this.decks.find(d => d.id === deckId);
+    if (!deck) return this.renderOverview();
+
+    // Re-fetch counts
+    const dueCards = db.getDueCards(deckId);
+    const allCards = db.getAllCards(deckId);
+    deck.due_count = dueCards.length;
+    deck.total_count = allCards.length;
+
+    this.container.innerHTML = `
+      <div class="learn-view">
+        <div style="display: flex; align-items: center; margin-bottom: 24px; gap: 12px;">
+          <button onclick="window.learnView.renderOverview()" class="icon-button" style="padding: 8px; border-radius: 50%; background: var(--surface-2);">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
+          </button>
+          <h2 style="margin: 0; font-size: 24px;">${deck.title}</h2>
+        </div>
+
+        <div style="background: var(--surface-1); border-radius: 20px; padding: 24px; text-align: center; margin-bottom: 24px; border: 1px solid var(--border);">
+          <div style="font-size: 48px; margin-bottom: 12px;">${deck.title.charAt(0).toUpperCase()}</div>
+          <p style="color: var(--text-secondary); margin-bottom: 24px;">${deck.total_count} Karten insgesamt</p>
+          
+          <div style="display: flex; flex-direction: column; gap: 12px;">
+            <button onclick="window.learnView.startStudyDue('${deckId}')" style="padding: 16px; background: var(--primary); color: white; border: none; border-radius: 12px; font-weight: bold; font-size: 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
+              <span>Fällige Karten lernen</span>
+              ${deck.due_count > 0 ? `<span style="background: rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 20px; font-size: 14px;">${deck.due_count}</span>` : `<span style="opacity: 0.7; font-size: 14px;">Fertig</span>`}
+            </button>
+            <button onclick="window.learnView.startStudyAll('${deckId}')" style="padding: 16px; background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border); border-radius: 12px; font-weight: bold; font-size: 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
+              <span>Alle Karten frei üben</span>
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
+            </button>
+          </div>
+        </div>
+
+        <h3 style="margin-bottom: 16px; font-size: 18px;">Karten verwalten</h3>
+        <div style="background: var(--surface-1); border-radius: 20px; padding: 20px; border: 1px solid var(--border);">
+          <div style="display: flex; flex-direction: column; gap: 12px;">
+            <input type="text" id="new-card-front" placeholder="Vorderseite (Frage)" style="background: var(--background); border: 1px solid var(--border); color: var(--text-primary); padding: 12px; border-radius: 10px; font-size: 16px;">
+            <input type="text" id="new-card-back" placeholder="Rückseite (Antwort)" style="background: var(--background); border: 1px solid var(--border); color: var(--text-primary); padding: 12px; border-radius: 10px; font-size: 16px;">
+            <button onclick="window.learnView.addCard('${deckId}')" style="padding: 12px; background: var(--primary); color: white; border: none; border-radius: 10px; font-weight: bold; cursor: pointer;">Hinzufügen</button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  addCard(deckId) {
+    const frontEl = document.getElementById('new-card-front');
+    const backEl = document.getElementById('new-card-back');
+    const front = frontEl.value.trim();
+    const back = backEl.value.trim();
+    if (!front || !back) {
+      alert('Bitte fülle Vorder- und Rückseite aus.');
+      return;
+    }
+    db.addFlashcard(deckId, front, back);
+    
+    // Clear inputs and show success
+    frontEl.value = '';
+    backEl.value = '';
     
+    this.renderDeckDetails(deckId); // Refresh stats
+  }
+
+  startStudyDue(deckId) {
+    this.dueCards = db.getDueCards(deckId);
     if (this.dueCards.length === 0) {
       alert('Für heute hast du alle Karten in diesem Stapel gelernt!');
       return;
     }
-    
+    this.isFreePractice = false;
+    this.currentCardIndex = 0;
+    this.renderStudyMode();
+  }
+
+  startStudyAll(deckId) {
+    this.dueCards = db.getAllCards(deckId);
+    if (this.dueCards.length === 0) {
+      alert('Dieser Stapel ist noch leer.');
+      return;
+    }
+    this.isFreePractice = true;
+    this.currentCardIndex = 0;
     this.renderStudyMode();
   }
 
@@ -102,8 +177,8 @@ export class LearnView {
         <div class="learn-view" style="align-items: center; justify-content: center;">
           <div style="font-size: 60px; margin-bottom: 20px;">🎉</div>
           <h2 style="margin: 0 0 10px 0;">Stapel abgeschlossen!</h2>
-          <p style="color: var(--text-secondary); margin-bottom: 30px;">Du hast alle fälligen Karten gelernt.</p>
-          <button onclick="window.learnView.renderOverview()" style="padding: 12px 24px; background: var(--primary); border-radius: 20px; color: white; border: none; font-weight: 600; cursor: pointer;">Zurück zur Übersicht</button>
+          <p style="color: var(--text-secondary); margin-bottom: 30px;">Du hast alle anstehenden Karten gelernt.</p>
+          <button onclick="window.learnView.renderDeckDetails('${this.activeDeckId}')" style="padding: 12px 24px; background: var(--primary); border-radius: 20px; color: white; border: none; font-weight: 600; cursor: pointer;">Zurück zum Stapel</button>
         </div>
       `;
       return;
@@ -116,7 +191,7 @@ export class LearnView {
     this.container.innerHTML = `
       <div class="learn-view study-container">
         <div style="width: 100%; max-width: 380px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-          <button onclick="window.learnView.renderOverview()" style="background: none; border: none; color: var(--text-secondary); cursor: pointer;">
+          <button onclick="window.learnView.renderDeckDetails('${this.activeDeckId}')" style="background: none; border: none; color: var(--text-secondary); cursor: pointer;">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
           </button>
           <span style="color: var(--text-secondary); font-weight: 600;">${this.currentCardIndex + 1} / ${this.dueCards.length}</span>