Savestate: Implement E2E encrypted flashcard sync with Supabase backend

index.html

@@ -74,7 +74,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: 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.280</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.281</div>
     
   <!-- SVG Filters for Liquid Glass Refraction -->
   <svg width="0" height="0" style="position: absolute; pointer-events: none;">

src/services/sync-service.js

@@ -45,6 +45,8 @@ class SyncManager {
       if (await this.syncSettings(userId)) hasUpdates = true;
       if (await this.syncConversations(userId)) hasUpdates = true;
       if (await this.syncMessages(userId)) hasUpdates = true;
+      if (await this.syncFlashcardDecks(userId)) hasUpdates = true;
+      if (await this.syncFlashcards(userId)) hasUpdates = true;
       
       console.log('[Sync] Sync completed successfully.');
       
@@ -245,8 +247,149 @@ class SyncManager {
       }
     }
     return updated;
+  async syncFlashcardDecks(userId) {
+    const localDecks = db.getDecks();
+    
+    const { data: remoteDecks, error } = await supabase
+      .from('flashcard_decks')
+      .select('*')
+      .eq('user_id', userId);
+      
+    if (error) {
+      console.error("[Sync] Error fetching decks", error);
+      throw error;
+    }
+    
+    const remoteMap = {};
+    if (remoteDecks) {
+      for (const c of remoteDecks) remoteMap[c.id] = c;
+    }
+
+    for (const local of localDecks) {
+      const remote = remoteMap[local.id];
+      const localTime = new Date(local.updated_at).getTime();
+      const remoteTime = remote ? new Date(remote.updated_at).getTime() : 0;
+
+      if (!remote || localTime > remoteTime) {
+        await supabase.from('flashcard_decks').upsert({
+          id: local.id,
+          user_id: userId,
+          title: await cryptoService.encrypt(local.title),
+          description: await cryptoService.encrypt(local.description || ''),
+          color: local.color,
+          source_lang: local.source_lang,
+          target_lang: local.target_lang,
+          created_at: local.created_at,
+          updated_at: local.updated_at
+        }, { onConflict: 'id, user_id' });
+      }
+    }
+
+    let updated = false;
+    if (remoteDecks) {
+      for (const remote of remoteDecks) {
+        const local = localDecks.find(c => c.id === remote.id);
+        const remoteTime = new Date(remote.updated_at).getTime();
+        const localTime = local ? new Date(local.updated_at).getTime() : 0;
+
+        if (!local || remoteTime > localTime) {
+          const title = await cryptoService.decrypt(remote.title);
+          const description = await cryptoService.decrypt(remote.description);
+          
+          if (!local) {
+            db.exec(
+              "INSERT INTO flashcard_decks (id, title, description, color, source_lang, target_lang, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?)",
+              [remote.id, title, description, remote.color, remote.source_lang, remote.target_lang, remote.created_at, remote.updated_at]
+            );
+          } else {
+            db.exec(
+              "UPDATE flashcard_decks SET title = ?, description = ?, color = ?, source_lang = ?, target_lang = ?, updated_at = ? WHERE id = ?",
+              [title, description, remote.color, remote.source_lang, remote.target_lang, remote.updated_at, remote.id]
+            );
+          }
+          updated = true;
+        }
+      }
+    }
+    return updated;
   }
 
+  async syncFlashcards(userId) {
+    const localCards = db.exec("SELECT * FROM flashcards");
+    
+    const { data: remoteCardsRaw, error } = await supabase
+      .from('flashcards')
+      .select('id, updated_at')
+      .eq('user_id', userId);
+      
+    if (error) {
+      console.error("[Sync] Error fetching flashcards", error);
+      throw error;
+    }
+    
+    const remoteMapRaw = {};
+    for (const r of (remoteCardsRaw || [])) {
+      remoteMapRaw[r.id] = r;
+    }
+
+    for (const local of localCards) {
+      const remoteRaw = remoteMapRaw[local.id];
+      const localTime = new Date(local.updated_at).getTime();
+      const remoteTime = remoteRaw ? new Date(remoteRaw.updated_at).getTime() : 0;
+
+      if (!remoteRaw || localTime > remoteTime) {
+        await supabase.from('flashcards').upsert({
+          id: local.id,
+          user_id: userId,
+          deck_id: local.deck_id,
+          front: await cryptoService.encrypt(local.front),
+          back: await cryptoService.encrypt(local.back),
+          image_url: local.image_url ? await cryptoService.encrypt(local.image_url) : null,
+          next_review: local.next_review,
+          ease_factor: local.ease_factor,
+          interval: local.interval,
+          repetitions: local.repetitions,
+          created_at: local.created_at,
+          updated_at: local.updated_at
+        }, { onConflict: 'id, user_id' });
+      }
+    }
+    
+    let updated = false;
+    for (const remoteRaw of (remoteCardsRaw || [])) {
+      const local = localCards.find(c => c.id === remoteRaw.id);
+      const remoteTime = new Date(remoteRaw.updated_at).getTime();
+      const localTime = local ? new Date(local.updated_at).getTime() : 0;
+
+      if (!local || remoteTime > localTime) {
+        const { data: remoteFull } = await supabase
+          .from('flashcards')
+          .select('*')
+          .eq('id', remoteRaw.id)
+          .single();
+          
+        if (remoteFull) {
+          const front = await cryptoService.decrypt(remoteFull.front);
+          const back = await cryptoService.decrypt(remoteFull.back);
+          const image_url = remoteFull.image_url ? await cryptoService.decrypt(remoteFull.image_url) : null;
+          
+          if (!local) {
+            db.exec(
+              "INSERT INTO flashcards (id, deck_id, front, back, image_url, next_review, ease_factor, interval, repetitions, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)",
+              [remoteFull.id, remoteFull.deck_id, front, back, image_url, remoteFull.next_review, remoteFull.ease_factor, remoteFull.interval, remoteFull.repetitions, remoteFull.created_at, remoteFull.updated_at]
+            );
+          } else {
+            db.exec(
+              "UPDATE flashcards SET front = ?, back = ?, image_url = ?, next_review = ?, ease_factor = ?, interval = ?, repetitions = ?, updated_at = ? WHERE id = ?",
+              [front, back, image_url, remoteFull.next_review, remoteFull.ease_factor, remoteFull.interval, remoteFull.repetitions, remoteFull.updated_at, remoteFull.id]
+            );
+          }
+          updated = true;
+        }
+      }
+    }
+    return updated;
+  }
 }
 
 export const syncManager = new SyncManager();

src/views/learn/learn-view.js

@@ -24,6 +24,17 @@ export class LearnView {
         this.renderOverview();
       }
     });
+
+    window.addEventListener('cloud_sync_updated', () => {
+      this.loadDecks();
+      const isStudyMode = this.container.querySelector('.study-mode-container') !== null;
+      if (isStudyMode) return; // Don't interrupt study
+      if (this.activeDeckId) {
+        this.renderDeckDetails(this.activeDeckId);
+      } else if (this.container.innerHTML.trim() !== '') {
+        this.renderOverview();
+      }
+    });
   }
 
   loadDecks() {