Expand options position card inline below the clicked bar.

Co-authored-by: Cursor <cursoragent@cursor.com>

lib/common/static/instance_theme.css

@@ -3213,35 +3213,15 @@ html[data-theme="light"] .options-estimate-row {
   font-size: 0.78rem;
   color: #b8c0dc;
 }
-.options-pos-live-layout {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1;
-}
-.opt-pos-expanded-host {
-  flex-shrink: 0;
-  margin-top: 8px;
-  overflow: visible;
-}
-.opt-pos-expanded-host .opt-pos-card {
-  margin-bottom: 0;
-}
-.options-pos-live-pane--bars-only {
-  flex: 1;
-  min-height: 72px;
-  max-height: 140px;
-  overflow-y: auto;
-}
-.options-pos-subcard .options-pos-live-layout {
-  min-height: 0;
-}
 .options-pos-live-pane {
   flex: 1;
   min-height: 100px;
   max-height: 220px;
   overflow-y: auto;
 }
+.options-pos-live-pane.options-pos-live-pane--accordion {
+  max-height: 360px;
+}
 .options-pos-stats-card {
   flex-shrink: 0;
 }
@@ -3308,8 +3288,18 @@ html[data-theme="light"] .options-estimate-row {
 }
 .opt-pos-accordion-item.is-expanded .opt-pos-bar {
   border-color: #4a6fd8;
+  border-radius: 8px 8px 0 0;
+  border-bottom-color: transparent;
   background: #171d2a;
 }
+.opt-pos-accordion-body {
+  overflow: visible;
+}
+.opt-pos-card--inline {
+  margin-bottom: 0 !important;
+  border-top: none !important;
+  border-radius: 0 0 8px 8px !important;
+}
 .opt-pos-bar-main {
   display: flex;
   align-items: center;

lib/common/static/options_panel.js

@@ -470,7 +470,7 @@
     );
   }
 
-  function renderPositionBar(p, expanded) {
+  function renderPositionAccordionItem(p, expanded) {
     const upl = p.upl;
     const uplCls = upl > 0 ? "pos-pnl-profit" : upl < 0 ? "pos-pnl-loss" : "";
     const sideCls = (p.opt_type || "").toUpperCase() === "P" ? "pos-side-short" : "pos-side-long";
@@ -494,49 +494,28 @@
       '<span class="opt-pos-bar-roi ' + uplCls + '">' +
       (p.upl_ratio_pct != null ? fmt(p.upl_ratio_pct, 2) + "%" : "—") + "</span>" +
       "</span>" +
-      "</button></div>"
+      "</button>" +
+      '<div class="opt-pos-accordion-body"' + (expanded ? "" : ' hidden') + '>' +
+      '<div class="pos-card opt-pos-card opt-pos-card--inline" data-inst="' + inst + '">' +
+      renderPositionCardInner(p) +
+      "</div></div></div>"
     );
   }
 
-  function renderExpandedPositionCard(p) {
-    return renderPositionCard(p);
-  }
-
-  function applyAccordionState(list) {
+  function applyAccordionState() {
     const wrap = document.getElementById("opt-pos-cards");
-    const expandedHost = document.getElementById("opt-pos-expanded-host");
-    const livePane = document.getElementById("opt-pos-live");
     if (!wrap) return;
-    const expanded = (list || []).find(function (p) { return p.inst_id === state.expandedPosInst; }) || null;
     wrap.querySelectorAll(".opt-pos-accordion-item").forEach(function (el) {
       const open = el.getAttribute("data-inst") === state.expandedPosInst;
       el.classList.toggle("is-expanded", open);
       const btn = el.querySelector(".opt-pos-bar");
+      const body = el.querySelector(".opt-pos-accordion-body");
       if (btn) btn.setAttribute("aria-expanded", open ? "true" : "false");
+      if (body) body.hidden = !open;
     });
-    if (expandedHost) {
-      if (expanded) {
-        expandedHost.hidden = false;
-        expandedHost.setAttribute("aria-hidden", "false");
-        expandedHost.innerHTML = renderExpandedPositionCard(expanded);
-        expandedHost.querySelectorAll(".opt-close-btn").forEach(function (btn) {
-          btn.addEventListener("click", function (e) {
-            e.stopPropagation();
-            closePosition(btn.getAttribute("data-inst"), btn);
-          });
-        });
-      } else {
-        expandedHost.hidden = true;
-        expandedHost.setAttribute("aria-hidden", "true");
-        expandedHost.innerHTML = "";
-      }
-    }
-    if (livePane) {
-      livePane.classList.toggle("options-pos-live-pane--bars-only", !!(list && list.length >= 2));
-    }
   }
 
-  function bindPositionActions(container, list) {
+  function bindPositionActions(container) {
     if (!container) return;
     container.querySelectorAll(".opt-close-btn").forEach(function (btn) {
       btn.addEventListener("click", function (e) {
@@ -550,7 +529,7 @@
         if (!item) return;
         const inst = item.getAttribute("data-inst");
         state.expandedPosInst = state.expandedPosInst === inst ? null : inst;
-        applyAccordionState(list);
+        applyAccordionState();
         if (window.OptionsExpiryCountdown && OptionsExpiryCountdown.ensureTimer) {
           OptionsExpiryCountdown.ensureTimer();
         }
@@ -593,24 +572,19 @@
     const d = await apiJson("/api/options/positions");
     const wrap = document.getElementById("opt-pos-cards");
     const empty = document.getElementById("opt-pos-empty");
-    const expandedHost = document.getElementById("opt-pos-expanded-host");
     const livePane = document.getElementById("opt-pos-live");
     const list = (d.ok && d.positions) || [];
     wrap.innerHTML = "";
-    if (expandedHost) {
-      expandedHost.hidden = true;
-      expandedHost.setAttribute("aria-hidden", "true");
-      expandedHost.innerHTML = "";
-    }
     if (!list.length) {
       empty.style.display = "";
       state.expandedPosInst = null;
-      if (livePane) livePane.classList.remove("options-pos-live-pane--bars-only");
+      if (livePane) livePane.classList.remove("options-pos-live-pane--accordion");
       return;
     }
     empty.style.display = "none";
     const multi = list.length >= 2;
     wrap.classList.toggle("opt-pos-cards--accordion", multi);
+    if (livePane) livePane.classList.toggle("options-pos-live-pane--accordion", multi);
     if (multi) {
       const ids = list.map(function (p) { return p.inst_id; });
       if (state.expandedPosInst && ids.indexOf(state.expandedPosInst) < 0) {
@@ -618,21 +592,18 @@
       }
       list.forEach(function (p) {
         const div = document.createElement("div");
-        div.innerHTML = renderPositionBar(p, p.inst_id === state.expandedPosInst);
+        div.innerHTML = renderPositionAccordionItem(p, p.inst_id === state.expandedPosInst);
         wrap.appendChild(div.firstChild);
       });
-      applyAccordionState(list);
-      bindPositionActions(wrap, list);
     } else {
       state.expandedPosInst = null;
-      if (livePane) livePane.classList.remove("options-pos-live-pane--bars-only");
       list.forEach(function (p) {
         const div = document.createElement("div");
         div.innerHTML = renderPositionCard(p);
         wrap.appendChild(div.firstChild);
       });
-      bindPositionActions(wrap, list);
     }
+    bindPositionActions(wrap);
     if (window.OptionsExpiryCountdown && OptionsExpiryCountdown.ensureTimer) {
       OptionsExpiryCountdown.ensureTimer();
     }

lib/options/templates/options_panel.html

@@ -81,12 +81,9 @@
             <div class="options-pos-stack">
                 <div class="card-nested options-pos-subcard">
                     <h3>当前持仓</h3>
-                    <div class="options-pos-live-layout">
-                        <div id="opt-pos-live" class="panel-scroll pos-list options-pos-live-pane">
-                            <div class="pos-empty" id="opt-pos-empty">暂无持仓</div>
-                            <div id="opt-pos-cards"></div>
-                        </div>
-                        <div id="opt-pos-expanded-host" class="opt-pos-expanded-host" hidden aria-hidden="true"></div>
+                    <div id="opt-pos-live" class="panel-scroll pos-list options-pos-live-pane">
+                        <div class="pos-empty" id="opt-pos-empty">暂无持仓</div>
+                        <div id="opt-pos-cards"></div>
                     </div>
                 </div>
                 <div class="card-nested options-pos-subcard options-pos-stats-card">