Split archive into four content tabs.

Move chart overview and calendar into their own tabs so trades and quotes stay focused.

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

manual_trading_hub/static/archive.js

@@ -35,6 +35,8 @@
   const elQuoteContent = document.getElementById("archive-quote-content");
   const elQuoteSubmit = document.getElementById("archive-quote-submit");
   const elContentTabs = document.getElementById("archive-content-tabs");
+  const elPanelViz = document.getElementById("archive-panel-viz");
+  const elPanelCalendar = document.getElementById("archive-panel-calendar");
   const elPanelTrades = document.getElementById("archive-panel-trades");
   const elPanelQuotes = document.getElementById("archive-panel-quotes");
   const elQuoteDayTradesMeta = document.getElementById("archive-quote-day-trades-meta");
@@ -559,8 +561,8 @@
         if (elQuoteDate) elQuoteDate.value = day;
         if (elFilterSick) elFilterSick.checked = false;
         syncPeriodUI();
+        setArchiveContentTab("trades");
         void loadDailyTrades();
-        if (archiveContentTab === "quotes") void loadQuoteDayTrades();
       },
     });
     calendarWidget.ensureMonth(calendarRefDate());
@@ -968,9 +970,9 @@
   }
 
   function setArchiveContentTab(tab) {
-    const next = tab === "quotes" ? "quotes" : "trades";
+    const allowed = { viz: 1, calendar: 1, trades: 1, quotes: 1 };
+    const next = allowed[tab] ? tab : "trades";
     archiveContentTab = next;
-    const showQuotes = next === "quotes";
     if (elContentTabs) {
       elContentTabs.querySelectorAll(".archive-content-tab").forEach(function (btn) {
         const on = btn.getAttribute("data-archive-tab") === next;
@@ -978,18 +980,26 @@
         btn.setAttribute("aria-selected", on ? "true" : "false");
       });
     }
-    if (elPanelTrades) {
-      elPanelTrades.classList.toggle("is-active", !showQuotes);
-      elPanelTrades.hidden = showQuotes;
-    }
-    if (elPanelQuotes) {
-      elPanelQuotes.classList.toggle("is-active", showQuotes);
-      elPanelQuotes.hidden = !showQuotes;
-    }
-    if (showQuotes) {
+    const panels = [
+      [elPanelViz, "viz"],
+      [elPanelCalendar, "calendar"],
+      [elPanelTrades, "trades"],
+      [elPanelQuotes, "quotes"],
+    ];
+    panels.forEach(function (pair) {
+      const el = pair[0];
+      const key = pair[1];
+      if (!el) return;
+      const on = key === next;
+      el.classList.toggle("is-active", on);
+      el.hidden = !on;
+    });
+    if (next === "quotes") {
       syncQuoteDateFromTradingDay(false);
       void loadQuoteDayTrades();
-    } else {
+    } else if (next === "calendar") {
+      void loadCalendar();
+    } else if (next === "trades") {
       requestAnimationFrame(syncTradesLayout);
     }
   }