From 9a63099b7601f78e1a7ffbb8384f6648de65da14 Mon Sep 17 00:00:00 2001
From: Harwinder Sekhon <hs.sekhon3@gmail.com>
Date: Sun, 16 Aug 2026 21:02:24 -0400
Subject: [PATCH] dashboard: color ladder levels red/green on cells (Bootstrap
 table overrides row colors), add direction icons

---
 static/dashboard.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/static/dashboard.js b/static/dashboard.js
index 03f96c5..721112a 100644
--- a/static/dashboard.js
+++ b/static/dashboard.js
@@ -281,14 +281,16 @@ function ladder(levels, price) {
   if (price != null) rows.push({ here: true, v: +price });
   rows.sort((a, b) => b.v - a.v);
   const body = rows.map(row => {
-    if (row.here) return `<tr class="table-primary fw-bold"><td>current price</td>
+    if (row.here) return `<tr class="table-primary fw-bold"><td><i class="bi bi-geo-alt-fill me-1"></i>current price</td>
       <td class="num text-end">${fmt$(row.v)}</td><td class="num text-end">—</td><td class="small text-secondary">spot</td></tr>`;
     const d = price != null ? row.v - price : null;
-    return `<tr class="${d == null ? "" : d > 0 ? "text-danger" : "text-success"}">
+    const cls = d == null ? "" : d > 0 ? "text-danger" : "text-success";
+    const icon = d == null ? "" : d > 0 ? "bi-arrow-up-short" : "bi-arrow-down-short";
+    return `<tr>
       <td class="text-secondary">${esc(row.label)}</td>
-      <td class="num text-end">${fmt$(row.v)}</td>
-      <td class="num text-end">${d == null ? "" : signed(d) + (atr ? ` · ${signed(d / atr, 2)} ATR` : "")}</td>
-      <td class="small text-secondary">${d == null ? "" : d > 0 ? "resistance" : "support"}</td></tr>`;
+      <td class="num text-end ${cls}">${fmt$(row.v)}</td>
+      <td class="num text-end ${cls}">${d == null ? "" : signed(d) + (atr ? ` · ${signed(d / atr, 2)} ATR` : "")}</td>
+      <td class="small ${cls}">${d == null ? "" : `<i class="bi ${icon}"></i>${d > 0 ? "resistance" : "support"}`}</td></tr>`;
   }).join("");
   return `<table class="table table-sm ladder"><thead><tr><th>Level</th><th class="text-end">Price</th>
     <th class="text-end">vs. spot</th><th>Role</th></tr></thead><tbody>${body}</tbody></table>`;