06/05 Optimize app

app/templates/investments/index.html

@@ -79,7 +79,7 @@
 {% else %}
 
 <!-- Price alerts banner (populated by AJAX) -->
-<div id="price-alert-banner" style="display:none;" class="alert d-flex align-items-start gap-2 mb-3" style="background:#fef3c7;border:1px solid #fcd34d;color:#78350f;font-size:13px;border-radius:8px;padding:10px 14px;">
+<div id="price-alert-banner" style="display:none;background:#fef3c7;border:1px solid #fcd34d;color:#78350f;font-size:13px;border-radius:8px;padding:10px 14px;" class="d-flex align-items-start gap-2 mb-3">
     <i class="bi bi-graph-up-arrow flex-shrink-0 mt-1" style="color:#d97706;"></i>
     <div class="flex-grow-1" id="price-alert-text"></div>
     <button type="button" onclick="document.getElementById('price-alert-banner').style.display='none';"
@@ -525,6 +525,27 @@
   }
 
 })();
+
+// ── Price alert banner ────────────────────────────────────────────────────────
+(function () {
+  fetch('{{ url_for("investments.api_price_alerts") }}')
+    .then(r => r.ok ? r.json() : null)
+    .then(data => {
+      if (!data || !data.alerts || !data.alerts.length) return;
+      const sym = '{{ current_user.currency_symbol or "$" }}';
+      const parts = data.alerts.map(a => {
+        const sign  = a.day_change_pct >= 0 ? '+' : '';
+        const color = a.day_change_pct >= 0 ? '#065f46' : '#991b1b';
+        return `<strong style="color:${color};">${a.ticker} (${sign}${a.day_change_pct}%)</strong>`;
+      });
+      const banner  = document.getElementById('price-alert-banner');
+      const textEl  = document.getElementById('price-alert-text');
+      const label   = data.alerts.length === 1 ? 'holding moved' : 'holdings moved';
+      textEl.innerHTML = `<strong>${data.alerts.length} ${label} ≥5% today:</strong> ${parts.join(', ')}`;
+      banner.style.display = '';
+    })
+    .catch(() => {});
+})();
 </script>
 {% endif %}
 {% endblock %}