From 762131f93968cc8d0eea7b20fce7e2c4edb8e225 Mon Sep 17 00:00:00 2001
From: Trevor Mears <trevor.mears@gmail.com>
Date: Sat, 27 Dec 2025 21:49:22 -0800
Subject: [PATCH] Fixed issue with favorites list not snycing in some
 circumstances

---
 public/js/components/ChannelList.js |  5 ++++
 public/js/components/EpgGuide.js    | 43 +++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+)

diff --git a/public/js/components/ChannelList.js b/public/js/components/ChannelList.js
index 98e0815..5c83dab 100644
--- a/public/js/components/ChannelList.js
+++ b/public/js/components/ChannelList.js
@@ -636,6 +636,11 @@ class ChannelList {
             } else {
                 await API.favorites.add(sourceId, channelId, 'channel');
             }
+
+            // Sync to EPG Guide
+            if (window.app?.epgGuide) {
+                window.app.epgGuide.syncFavorite(sourceId, channelId, !wasFavorite);
+            }
         } catch (err) {
             console.error('Error toggling favorite:', err);
             // Revert on error
diff --git a/public/js/components/EpgGuide.js b/public/js/components/EpgGuide.js
index 3b1a713..256b863 100644
--- a/public/js/components/EpgGuide.js
+++ b/public/js/components/EpgGuide.js
@@ -555,6 +555,11 @@ class EpgGuide {
             } else {
                 await API.favorites.add(sourceId, channelId, 'channel');
             }
+
+            // 4. Re-render if viewing Favorites group (so new favorites appear immediately)
+            if (this.selectedGroup === 'Favorites') {
+                this.render();
+            }
         } catch (err) {
             console.error('Error toggling favorite in EPG:', err);
 
@@ -587,6 +592,44 @@ class EpgGuide {
         }
     }
 
+    /**
+     * Sync favorite status from external source (e.g. ChannelList) without API call
+     */
+    syncFavorite(sourceId, channelId, isFavorite) {
+        // Ensure consistent string format for key
+        const key = `${String(sourceId)}:${String(channelId)}`;
+        const currentlyFav = this.favorites.has(key);
+
+        if (currentlyFav === isFavorite) return; // No change needed
+
+        // Update State
+        if (isFavorite) {
+            this.favorites.add(key);
+        } else {
+            this.favorites.delete(key);
+        }
+
+        // Update DOM (All instances in EPG)
+        const rows = this.container.querySelectorAll(`.epg-channel-row[data-channel-id="${channelId}"][data-source-id="${sourceId}"]`);
+        rows.forEach(row => {
+            const btn = row.querySelector('.favorite-btn');
+            if (btn) {
+                if (isFavorite) {
+                    btn.classList.add('active');
+                    btn.innerHTML = '❤️';
+                    btn.title = 'Remove from Favorites';
+                } else {
+                    btn.classList.remove('active');
+                    btn.innerHTML = '♡';
+                    btn.title = 'Add to Favorites';
+                }
+            }
+        });
+
+        // Note: We don't call render() here - the favorites Set is updated
+        // and will be used when the user navigates to Guide or switches groups
+    }
+
     /**
      * Generate time slots
      */