Update src/templates/dashboard/deep_diver.html

src/templates/dashboard/deep_diver.html

@@ -167,14 +167,36 @@
     height: 14px; 
     
     }
-    /* Dynamic Watchlist State */
-.btn-action.active-watch {
-    border-color: var(--accent-orange, #f59e0b) !important;
-    color: var(--accent-orange, #f59e0b) !important;
-}
-.btn-action.active-watch svg {
-    fill: var(--accent-orange, #f59e0b);
-}
+    /* --- Enhanced Watchlist Toggle --- */
+    .btn-action.active-watch {
+        border-color: var(--accent-orange, #f59e0b) !important;
+        color: var(--accent-orange, #f59e0b) !important;
+    }
+
+    .btn-action.active-watch svg {
+        fill: var(--accent-orange, #f59e0b);
+    }
+
+    /* Hover effect to signal removal */
+    .btn-action.active-watch:hover {
+        background: rgba(239, 68, 68, 0.1) !important;
+        border-color: #ef4444 !important;
+        color: #ef4444 !important;
+    }
+
+    .btn-action.active-watch:hover svg {
+        fill: #ef4444;
+        stroke: #ef4444;
+    }
+
+    /* Swap text on hover */
+    .btn-action.active-watch:hover #watchlist-text {
+        display: none;
+    }
+
+    .btn-action.active-watch:hover::after {
+        content: "REMOVE";
+    }
     /* Sub-Branding Colors */
     #link-cg { border-color: rgba(140, 198, 63, 0.3); }
     #link-tv { border-color: rgba(41, 98, 255, 0.3); }
@@ -447,12 +469,14 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 });
 
-// Clean state sync: update UI based on backend 'is_watched' boolean
+// Sync UI based on backend state and set data attribute for logic
 function updateWatchlistUI(isWatched) {
     const btn = document.getElementById('btn-watchlist');
     const text = document.getElementById('watchlist-text');
     
-    // Toggle active state classes
+    // Set state on the element itself (Senior Best Practice)
+    btn.setAttribute('data-is-watched', isWatched);
+
     if (isWatched) {
         btn.classList.add('active-watch');
         text.innerText = "Watched";
@@ -465,31 +489,47 @@ function updateWatchlistUI(isWatched) {
 async function toggleWatchlist() {
     if (!currentCoinData) return;
     
-    const isCurrentlyWatched = document.getElementById('watchlist-text').innerText === "Watched";
+    const btn = document.getElementById('btn-watchlist');
+    // Read state from data attribute instead of parsing text
+    const isCurrentlyWatched = btn.getAttribute('data-is-watched') === 'true';
     const action = isCurrentlyWatched ? 'remove' : 'add';
 
-    const res = await fetch('/api/watchlist/toggle', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-            coin_id: currentCoinData.id,
-            symbol: currentCoinData.vitals.symbol,
-            name: currentCoinData.vitals.name,
-            price: currentCoinData.vitals.price,
-            vtmr: currentCoinData.ratios.vtmr,
-            mcap: currentCoinData.vitals.mcap,
-            chg_1y: currentCoinData.velocity.y1,
-            chg_24h: currentCoinData.velocity.h24,
-            chg_7d: currentCoinData.velocity.d7,
-            chg_30d: currentCoinData.velocity.m1,
-            action: action
-        })
-    });
-    
-    const result = await res.json();
-    if (result.status === "success") {
-        updateWatchlistUI(result.is_watched);
+    // Update immediately for a fast feel
+    updateWatchlistUI(!isCurrentlyWatched);
+
+    try {
+        const res = await fetch('/api/watchlist/toggle', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                coin_id: currentCoinData.id,
+                symbol: currentCoinData.vitals.symbol,
+                name: currentCoinData.vitals.name,
+                price: currentCoinData.vitals.price,
+                vtmr: currentCoinData.ratios.vtmr,
+                mcap: currentCoinData.vitals.mcap,
+                chg_1y: currentCoinData.velocity.y1 || currentCoinData.velocity.yearly,
+                chg_24h: currentCoinData.velocity.h24,
+                chg_7d: currentCoinData.velocity.d7,
+                chg_30d: currentCoinData.velocity.m1,
+                action: action
+            })
+        });
+        
+        const result = await res.json();
+        
+        // Ensure UI matches actual server state
+        if (result.status === "success") {
+            updateWatchlistUI(result.is_watched);
+        } else {
+            updateWatchlistUI(isCurrentlyWatched);
+            console.error("Watchlist sync error:", result.message);
+        }
+    } catch (err) {
+        updateWatchlistUI(isCurrentlyWatched);
+        console.error("Watchlist toggle failed:", err);
     }
-  }
+}
+
 </script>
 {% endblock %}