From 0431bddebdab04084fcd37e6d11db5d96dab2a73 Mon Sep 17 00:00:00 2001
From: Marc Blatter <marc@braindock.local>
Date: Sat, 4 Jul 2026 23:35:01 +0200
Subject: [PATCH] Bot auto-update: src/web_dashboard.py

---
 src/web_dashboard.py | 128 ++++++++++++++++++++++++++++++-------------
 1 file changed, 90 insertions(+), 38 deletions(-)
diff --git a/src/web_dashboard.py b/src/web_dashboard.py
index 5f9bf7b..7e87596 100644
--- a/src/web_dashboard.py
+++ b/src/web_dashboard.py
@@ -103,7 +103,7 @@ async def root():
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-<title>Trading Bot V9</title>
+<title>Trading Bot V10</title>
 <style>
 :root {{
     --bg-primary: #1a1a1a;
@@ -214,14 +214,49 @@ body {{
     margin-bottom: calc(var(--spacing) * 3);
 }}
 
+.section-header {{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    padding: calc(var(--spacing) * 0.75) 0;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: calc(var(--spacing) * 1.25);
+    user-select: none;
+    transition: all 0.2s ease;
+}}
+
+.section-header:hover {{
+    color: var(--accent);
+}}
+
 .section-title {{
     font-size: clamp(13px, 2.5vw, 15px);
     color: var(--text-secondary);
     text-transform: uppercase;
     letter-spacing: 1.2px;
-    margin-bottom: calc(var(--spacing) * 1.25);
-    padding-bottom: calc(var(--spacing) * 0.75);
-    border-bottom: 1px solid var(--border);
+    transition: color 0.2s ease;
+}}
+
+.section-toggle {{
+    font-size: clamp(14px, 2vw, 16px);
+    color: var(--text-secondary);
+    transition: transform 0.3s ease;
+    margin-left: 0.5rem;
+}}
+
+.section-toggle.expanded {{
+    transform: rotate(180deg);
+}}
+
+.section-content {{
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+}}
+
+.section-content.expanded {{
+    max-height: 2000px;
 }}
 
 /* ===== TABLES ===== */
@@ -366,7 +401,6 @@ tbody tr:active {{
 
     .section-title {{
         font-size: 11px;
-        margin-bottom: var(--spacing);
     }}
 
     th, td {{
@@ -431,7 +465,7 @@ tbody tr:active {{
 <div class="app-container">
     <div class="header">
         <div class="logo">💰 Trading Bot</div>
-        <div class="version">V9 — Real-time Portfolio Dashboard</div>
+        <div class="version">V10 — Real-time Portfolio Dashboard</div>
     </div>
 
     <div class="metrics-grid">
@@ -450,41 +484,50 @@ tbody tr:active {{
     </div>
 
     <div class="section">
-        <div class="section-title">Live Prices</div>
-        <div class="table-wrapper">
-            <table>
-                <thead>
-                    <tr>
-                        <th>Asset</th>
-                        <th>Price</th>
-                    </tr>
-                </thead>
-                <tbody>'''
+        <div class="section-header" onclick="toggleSection(this)">
+            <div class="section-title">Live Prices</div>
+            <div class="section-toggle">▼</div>
+        </div>
+        <div class="section-content">
+            <div class="table-wrapper">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Asset</th>
+                            <th>Price</th>
+                        </tr>
+                    </thead>
+                    <tbody>'''
     
     for asset, price in prices.items():
         html += f'''<tr>
-                        <td>{asset}</td>
-                        <td class="price-positive">${price:.2f}</td>
-                    </tr>'''
+                            <td>{asset}</td>
+                            <td class="price-positive">${price:.2f}</td>
+                        </tr>'''
     
     html += '''</tbody>
-            </table>
+                </table>
+            </div>
         </div>
     </div>
 
     <div class="section">
-        <div class="section-title">Holdings</div>
-        <div class="table-wrapper">
-            <table>
-                <thead>
-                    <tr>
-                        <th>Asset</th>
-                        <th>Free</th>
-                        <th>Total</th>
-                        <th>Value</th>
-                    </tr>
-                </thead>
-                <tbody>'''
+        <div class="section-header" onclick="toggleSection(this)">
+            <div class="section-title">Holdings</div>
+            <div class="section-toggle expanded">▼</div>
+        </div>
+        <div class="section-content expanded">
+            <div class="table-wrapper">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Asset</th>
+                            <th>Free</th>
+                            <th>Total</th>
+                            <th>Value</th>
+                        </tr>
+                    </thead>
+                    <tbody>'''
     
     tracked = ['BTC', 'ETH', 'SOL', 'BNB', 'XRP', 'USDT', 'USDC']
     balance = state.get('balance', {})
@@ -495,19 +538,28 @@ tbody tr:active {{
             price = prices.get(asset, 0)
             value = data['total'] * price
             html += f'''<tr>
-                        <td>{asset}</td>
-                        <td>{data['free']:.4f}</td>
-                        <td>{data['total']:.4f}</td>
-                        <td class="price-positive">${value:.2f}</td>
-                    </tr>'''
+                            <td>{asset}</td>
+                            <td>{data['free']:.4f}</td>
+                            <td>{data['total']:.4f}</td>
+                            <td class="price-positive">${value:.2f}</td>
+                        </tr>'''
     
     html += '''</tbody>
-            </table>
+                </table>
+            </div>
         </div>
     </div>
 </div>
 
 <script>
+function toggleSection(header) {
+    const content = header.nextElementSibling;
+    const toggle = header.querySelector('.section-toggle');
+    
+    content.classList.toggle('expanded');
+    toggle.classList.toggle('expanded');
+}
+
 // Refresh prices every 5 seconds
 setInterval(function() {{
     location.reload();
