From e71b47ac56fe0fc248bfe5c59f0abfc28f97b3f5 Mon Sep 17 00:00:00 2001
From: ramseshk <45832522+ramseshk@users.noreply.github.com>
Date: Mon, 10 Aug 2026 12:58:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20VBT=20sidebar=20=E2=80=94=20cleaner?=
 =?UTF-8?q?=20UX=20with=20grouped=20sections=20+=20collapsible=20fee=20tie?=
 =?UTF-8?q?rs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sidebar reorganized into clear sections:
  [FILTERS] — Strategy + Asset + Interval + Sort
  ▶ Fee Tiers — collapsible (hidden by default), shows summary
    T0 + staking tier name when collapsed
  [NEW BACKTEST] — compact: Strategy (short names) + Interval + Limit
    Row 2: Coin + ▶ Run button (side by side) + ↻ Refresh
  [RESULTS] — count header + list + pagination

Removed:
  - Full-width run strategy row (now inline with interval/limit)
  - Duplicate fee tier labels in select options
  - Separate run/refresh button row (now same row as coin)

Added:
  - toggleFeeTiers() — expand/collapse fee settings
  - updateFeeSummary() — shows current tier in collapsed label
  - Fee changes auto-recalculate (no manual onchange needed)
  - Section headers: small uppercase labels
---
 dashboard/static/vbt.html | 90 ++++++++++++++++++++++++---------------
 1 file changed, 55 insertions(+), 35 deletions(-)

diff --git a/dashboard/static/vbt.html b/dashboard/static/vbt.html
index 7bee568..5d1b4d3 100644
--- a/dashboard/static/vbt.html
+++ b/dashboard/static/vbt.html
@@ -101,6 +101,7 @@ select:focus{outline:none;border-color:var(--text4)}
 <div class="main">
   <div class="sidebar">
     <div class="controls">
+      <div style="font-size:8px;color:var(--text4);text-transform:uppercase;letter-spacing:1px;padding:0 4px 3px">Filters</div>
       <div class="row">
         <select id="filter-strategy">
           <option value="">All Strategies</option>
@@ -136,51 +137,53 @@ select:focus{outline:none;border-color:var(--text4)}
           <option value="trades">Trades</option>
         </select>
       </div>
-      <div class="row" style="margin-top:2px">
-        <select id="fee-tier" style="flex:0.6" onchange="recalcIfSelected()">
-          <option value="0" selected>T0 (0.045%/0.015%)</option>
-          <option value="1">T1 (>$5M 0.040/0.012)</option>
-          <option value="2">T2 (>$25M 0.035/0.008)</option>
-          <option value="3">T3 (>$100M 0.030/0.004)</option>
-          <option value="4">T4 (>$500M 0.028/0.000)</option>
-          <option value="5">T5 (>$2B 0.026/0.000)</option>
-          <option value="6">T6 (>$7B 0.024/0.000)</option>
-        </select>
-        <select id="staking-tier" style="flex:0.4" onchange="recalcIfSelected()">
-          <option value="none">No Stake</option>
-          <option value="wood">Wood (-5%)</option>
-          <option value="bronze">Bronze (-10%)</option>
-          <option value="silver">Silver (-15%)</option>
-          <option value="gold">Gold (-20%)</option>
-          <option value="platinum">Platinum (-30%)</option>
-          <option value="diamond">Diamond (-40%)</option>
-        </select>
+      <div style="font-size:8px;color:var(--text4);cursor:pointer;padding:2px 4px;display:flex;align-items:center;gap:4px" onclick="toggleFeeTiers()">
+        <span id="fee-arrow">▶</span> Fee Tiers <span style="font-size:7px" id="fee-summary"></span>
       </div>
+      <div id="fee-panel" style="display:none">
+        <div class="row">
+          <select id="fee-tier" style="flex:0.55">
+            <option value="0" selected>T0 (0.045/0.015)</option>
+            <option value="1">T1 >$5M (0.040/0.012)</option>
+            <option value="2">T2 >$25M (0.035/0.008)</option>
+            <option value="3">T3 >$100M (0.030/0.004)</option>
+            <option value="4">T4 >$500M (0.028/—)</option>
+            <option value="5">T5 >$2B (0.026/—)</option>
+            <option value="6">T6 >$7B (0.024/—)</option>
+          </select>
+          <select id="staking-tier" style="flex:0.45">
+            <option value="none">No Stake</option>
+            <option value="wood">Wood −5%</option>
+            <option value="bronze">Bronze −10%</option>
+            <option value="silver">Silver −15%</option>
+            <option value="gold">Gold −20%</option>
+            <option value="platinum">Platinum −30%</option>
+            <option value="diamond">Diamond −40%</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div class="controls">
+      <div style="font-size:8px;color:var(--text4);text-transform:uppercase;letter-spacing:1px;padding:0 4px 3px">New Backtest</div>
       <div class="row">
         <select id="run-strategy">
-          <option value="pairs">Pairs Trading</option>
-          <option value="hurst_vpin">Hurst VPIN</option>
-          <option value="as_mm">Avellaneda-Stoikov</option>
-          <option value="obi">Order Book Imbalance</option>
-          <option value="grid_mm">Grid Market Making</option>
-          <option value="composite_mm">Composite MM</option>
-          <option value="iceberg">Iceberg Detection</option>
-          <option value="momentum">Momentum Breakout</option>
-          <option value="mean_rev">Mean Reversion</option>
+          <option value="pairs">Pairs</option><option value="hurst_vpin">Hurst VPIN</option>
+          <option value="as_mm">A-S</option><option value="obi">OBI</option>
+          <option value="grid_mm">Grid</option><option value="composite_mm">Composite</option>
+          <option value="iceberg">Iceberg</option><option value="momentum">Momentum</option>
+          <option value="mean_rev">Mean Rev</option>
         </select>
+        <select id="run-interval"><option value="1m">1m</option><option value="5m">5m</option><option value="15m">15m</option><option value="1h" selected>1h</option><option value="4h">4h</option><option value="1d">1d</option></select>
+        <select id="run-limit"><option value="100">100b</option><option value="200">200b</option><option value="500" selected>500b</option><option value="1000">1Kb</option><option value="2000">2Kb</option><option value="5000">5Kb</option></select>
       </div>
       <div class="row">
-        <select id="run-interval"><option value="1m">1m</option><option value="5m">5m</option><option value="15m">15m</option><option value="1h" selected>1h</option><option value="4h">4h</option><option value="1d">1d</option></select>
-        <select id="run-limit"><option value="100">100 bars</option><option value="200">200 bars</option><option value="500" selected>500 bars</option><option value="1000">1K bars</option><option value="2000">2K bars</option><option value="5000">5K bars</option></select>
         <select id="run-coin"><option value="">auto</option><option value="BTC">BTC</option><option value="ETH">ETH</option><option value="SOL">SOL</option></select>
-      </div>
-      <div style="display:flex;gap:4px">
-        <button class="btn btn-primary" onclick="runNewBacktest()" id="btn-run">▶ Run Backtest</button>
-        <button class="btn" onclick="loadResults()" id="btn-refresh">↻</button>
+        <button class="btn btn-primary" onclick="runNewBacktest()" id="btn-run" style="flex:1">▶ Run</button>
+        <button class="btn" onclick="loadResults()" title="Refresh">↻</button>
       </div>
       <div id="run-status"></div>
     </div>
-    <div style="font-size:9px;color:var(--text4);padding:2px 4px" id="result-count"></div>
+    <div style="font-size:8px;color:var(--text4);text-transform:uppercase;letter-spacing:1px;padding:4px 4px 2px"><span id="result-count"></span></div>
     <div id="results-list"><div class="loading">Loading...</div></div>
     <div class="pagination-row" id="pagination" style="display:none">
       <button class="nav-btn" id="btn-prev" onclick="loadPage(-1)" disabled>← Prev</button>
@@ -373,6 +376,23 @@ async function runNewBacktest(){
 }
 
 function applyFilter(){currentOffset=0;loadResults();}
+
+function toggleFeeTiers(){
+  const panel=document.getElementById('fee-panel');
+  const arrow=document.getElementById('fee-arrow');
+  const open=panel.style.display==='block';
+  panel.style.display=open?'none':'block';
+  arrow.textContent=open?'▶':'▼';
+}
+function updateFeeSummary(){
+  const ft=document.getElementById('fee-tier');
+  const st=document.getElementById('staking-tier');
+  const stOpt=st.options[st.selectedIndex];
+  document.getElementById('fee-summary').textContent='· T'+ft.value+' '+stOpt.text.replace(/ .+/,'');
+}
+document.getElementById('fee-tier').addEventListener('change',()=>{updateFeeSummary();recalcIfSelected();});
+document.getElementById('staking-tier').addEventListener('change',()=>{updateFeeSummary();recalcIfSelected();});
+updateFeeSummary();
 document.getElementById('filter-strategy').addEventListener('change',applyFilter);
 document.getElementById('filter-interval').addEventListener('change',applyFilter);
 document.getElementById('filter-asset').addEventListener('change',applyFilter);