增加折叠

onchain_scout_gate/static/app.js

@@ -262,6 +262,64 @@ function renderDailyReport(payload) {
   `;
 }
 
+const PANEL_FOLD_STORAGE_KEY = "matrix_panel_fold_v1";
+
+function initPanelFolds() {
+  let saved = {};
+  try {
+    const raw = localStorage.getItem(PANEL_FOLD_STORAGE_KEY);
+    if (raw) saved = JSON.parse(raw);
+  } catch (_) {
+    saved = {};
+  }
+
+  function applyFold(panel, folded) {
+    const toggle = panel.querySelector(".matrix-panel-fold-toggle");
+    if (folded) {
+      panel.classList.add("is-folded");
+      if (toggle) toggle.setAttribute("aria-expanded", "false");
+    } else {
+      panel.classList.remove("is-folded");
+      if (toggle) toggle.setAttribute("aria-expanded", "true");
+    }
+  }
+
+  document.querySelectorAll(".matrix-panel-fold[data-fold-id]").forEach((panel) => {
+    const id = panel.dataset.foldId;
+    const defaultOpen = panel.dataset.foldDefault === "open";
+    let folded;
+    if (Object.prototype.hasOwnProperty.call(saved, id)) {
+      folded = saved[id] === true;
+    } else {
+      folded = !defaultOpen;
+    }
+    applyFold(panel, folded);
+
+    const toggle = panel.querySelector(".matrix-panel-fold-toggle");
+    if (!toggle) return;
+
+    const onToggle = (e) => {
+      if (e.target.closest("[data-fold-ignore]")) return;
+      const willFold = !panel.classList.contains("is-folded");
+      applyFold(panel, willFold);
+      saved[id] = willFold;
+      try {
+        localStorage.setItem(PANEL_FOLD_STORAGE_KEY, JSON.stringify(saved));
+      } catch (_) {
+        /* ignore quota */
+      }
+    };
+
+    toggle.addEventListener("click", onToggle);
+    toggle.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onToggle(e);
+      }
+    });
+  });
+}
+
 function escapeHtml(s) {
   return String(s)
     .replace(/&/g, "&")
@@ -782,6 +840,7 @@ tickClock();
 setInterval(tickClock, 1000);
 initMatrixRain();
 initFunnelWindowControls();
+initPanelFolds();
 refresh();
 setInterval(refresh, 4000);
 document.addEventListener("visibilitychange", () => {

onchain_scout_gate/static/style.css

@@ -1058,6 +1058,56 @@ pre {
     flex-wrap: wrap;
 }
 
+.matrix-panel-head.matrix-panel-fold-toggle:not(.matrix-panel-head-row) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.matrix-panel-fold-toggle {
+    cursor: pointer;
+    user-select: none;
+    width: 100%;
+}
+
+.matrix-panel-fold-toggle:focus-visible {
+    outline: 1px solid rgba(0, 255, 213, 0.55);
+    outline-offset: 2px;
+}
+
+.matrix-fold-head-right {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+}
+
+.matrix-fold-chevron {
+    display: inline-block;
+    font-size: 10px;
+    color: #5ee0c5;
+    transition: transform 0.2s ease;
+    line-height: 1;
+}
+
+.matrix-panel-fold.is-folded .matrix-fold-chevron {
+    transform: rotate(-90deg);
+}
+
+.matrix-panel-fold.is-folded .matrix-panel-fold-body {
+    display: none;
+}
+
+.matrix-panel-fold.is-folded {
+    padding-bottom: 12px;
+}
+
+.matrix-panel-nested {
+    padding: 12px 14px;
+    background: rgba(0, 0, 0, 0.2);
+}
+
 .matrix-chip {
     font-size: 9px;
     letter-spacing: 0.18em;