rename tape to options and switch the web shell to a drawer
This commit is contained in:
parent
f056f6d2b8
commit
7ca0e05a2d
10 changed files with 916 additions and 154 deletions
|
|
@ -18,7 +18,7 @@
|
|||
--red-soft: oklch(0.68 0.16 28 / 0.12);
|
||||
--blue: oklch(0.72 0.13 247);
|
||||
--blue-soft: oklch(0.72 0.13 247 / 0.11);
|
||||
--rail-width: 236px;
|
||||
--drawer-width: min(320px, calc(100vw - 28px));
|
||||
--topbar-height: 64px;
|
||||
}
|
||||
|
||||
|
|
@ -86,22 +86,43 @@ input {
|
|||
}
|
||||
|
||||
.terminal-shell {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: var(--rail-width) minmax(0, 1fr);
|
||||
background: linear-gradient(180deg, oklch(0.14 0.011 250) 0%, oklch(0.11 0.01 250) 100%);
|
||||
}
|
||||
|
||||
.terminal-rail {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
padding: 22px 18px;
|
||||
.terminal-nav-drawer {
|
||||
position: fixed;
|
||||
inset: 0 auto 0 0;
|
||||
z-index: 45;
|
||||
width: var(--drawer-width);
|
||||
padding: 20px 18px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
background: linear-gradient(180deg, oklch(0.16 0.012 250 / 0.98), oklch(0.13 0.011 250 / 0.98));
|
||||
border-right: 1px solid var(--border);
|
||||
box-shadow: 0 28px 72px rgba(0, 0, 0, 0.48);
|
||||
}
|
||||
|
||||
.terminal-drawer-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
border: 0;
|
||||
background: rgba(3, 5, 8, 0.62);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.terminal-drawer-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.terminal-drawer-close {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.terminal-brand {
|
||||
|
|
@ -198,6 +219,7 @@ input {
|
|||
|
||||
.terminal-frame {
|
||||
min-width: 0;
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(var(--topbar-height), auto) minmax(0, 1fr);
|
||||
}
|
||||
|
|
@ -208,11 +230,39 @@ input {
|
|||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 10px 20px;
|
||||
background: oklch(0.15 0.012 250 / 0.96);
|
||||
border-bottom: 1px solid var(--border);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.terminal-topbar-leading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.terminal-menu-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 104px;
|
||||
}
|
||||
|
||||
.terminal-menu-trigger-icon {
|
||||
display: inline-grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.terminal-menu-trigger-icon span {
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 1px;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.status-dot,
|
||||
|
|
@ -463,7 +513,7 @@ input {
|
|||
|
||||
.terminal-content {
|
||||
min-width: 0;
|
||||
padding: 24px 24px 24px;
|
||||
padding: 24px clamp(16px, 2vw, 28px) 24px;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
|
|
@ -689,8 +739,8 @@ h3 {
|
|||
grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
|
||||
}
|
||||
|
||||
.page-grid-tape {
|
||||
grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
|
||||
.page-grid-options {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.page-grid-signals {
|
||||
|
|
@ -714,7 +764,7 @@ h3 {
|
|||
|
||||
.page-grid-home > :nth-child(3),
|
||||
.page-grid-home > :nth-child(4),
|
||||
.page-grid-tape > :nth-child(1),
|
||||
.page-grid-options > :nth-child(1),
|
||||
.page-grid-replay > :nth-child(1) {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
|
@ -963,11 +1013,11 @@ h3 {
|
|||
grid-row: 2;
|
||||
}
|
||||
|
||||
.page-grid-tape > :first-child {
|
||||
.page-grid-options > :first-child {
|
||||
height: clamp(460px, 64vh, 880px);
|
||||
}
|
||||
|
||||
.page-grid-tape > :not(:first-child) {
|
||||
.page-grid-options > :not(:first-child) {
|
||||
height: clamp(400px, 50vh, 680px);
|
||||
}
|
||||
|
||||
|
|
@ -1965,68 +2015,23 @@ h3 {
|
|||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.terminal-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.terminal-rail {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 35;
|
||||
height: auto;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(170px, auto) minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 14px 18px;
|
||||
padding: 14px 16px;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.terminal-brand {
|
||||
gap: 2px;
|
||||
.terminal-nav-drawer {
|
||||
width: min(300px, calc(100vw - 24px));
|
||||
}
|
||||
|
||||
.terminal-brand-name {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.terminal-nav {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.terminal-nav-link {
|
||||
flex: 0 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.shell-metrics {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 0;
|
||||
grid-template-columns: repeat(4, minmax(136px, 1fr));
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 2px;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.shell-metric {
|
||||
min-width: 136px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.terminal-topbar {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.page-grid-home,
|
||||
.page-grid-tape,
|
||||
.page-grid-options,
|
||||
.page-grid-signals,
|
||||
.page-grid-charts,
|
||||
.page-grid-replay,
|
||||
|
|
@ -2037,7 +2042,7 @@ h3 {
|
|||
|
||||
.page-grid-home > :nth-child(3),
|
||||
.page-grid-home > :nth-child(4),
|
||||
.page-grid-tape > :nth-child(1),
|
||||
.page-grid-options > :nth-child(1),
|
||||
.page-grid-replay > :nth-child(1) {
|
||||
grid-column: auto;
|
||||
grid-row: auto;
|
||||
|
|
@ -2049,8 +2054,8 @@ h3 {
|
|||
.page-grid-home > :nth-child(4),
|
||||
.page-grid-signals > .terminal-pane,
|
||||
.page-grid-replay > :not(:first-child),
|
||||
.page-grid-tape > :first-child,
|
||||
.page-grid-tape > :not(:first-child),
|
||||
.page-grid-options > :first-child,
|
||||
.page-grid-options > :not(:first-child),
|
||||
.page-grid-charts > :last-child {
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -2062,14 +2067,12 @@ h3 {
|
|||
|
||||
.terminal-topbar {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.terminal-topbar-actions {
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.terminal-topbar-controls {
|
||||
|
|
@ -2086,11 +2089,9 @@ h3 {
|
|||
background-size: 24px 24px, 24px 24px, 100% 100%, auto;
|
||||
}
|
||||
|
||||
.terminal-rail {
|
||||
position: static;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
.terminal-nav-drawer {
|
||||
width: min(340px, calc(100vw - 12px));
|
||||
padding: 16px 12px 12px;
|
||||
}
|
||||
|
||||
.terminal-brand {
|
||||
|
|
@ -2111,20 +2112,6 @@ h3 {
|
|||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.terminal-nav-link {
|
||||
padding: 12px;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.shell-metrics {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.shell-metric {
|
||||
flex: 0 0 156px;
|
||||
}
|
||||
|
||||
.terminal-content {
|
||||
padding: 16px 10px 22px;
|
||||
}
|
||||
|
|
@ -2160,6 +2147,10 @@ h3 {
|
|||
padding: 12px 10px;
|
||||
}
|
||||
|
||||
.terminal-topbar-leading {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.terminal-button,
|
||||
.mode-button,
|
||||
.filter-clear,
|
||||
|
|
@ -2186,8 +2177,14 @@ h3 {
|
|||
align-items: stretch;
|
||||
}
|
||||
|
||||
.terminal-menu-trigger {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.terminal-topbar-mode .terminal-button,
|
||||
.terminal-topbar-controls > .terminal-button,
|
||||
.terminal-topbar-leading > .terminal-button,
|
||||
.page-actions > .terminal-button,
|
||||
.page-actions > .flow-filter-popover {
|
||||
width: 100%;
|
||||
|
|
|
|||
7
apps/web/app/options/page.tsx
Normal file
7
apps/web/app/options/page.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { OptionsRoute } from "../terminal";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default function Page() {
|
||||
return <OptionsRoute />;
|
||||
}
|
||||
|
|
@ -28,4 +28,10 @@ describe("legacy page redirects", () => {
|
|||
expect(() => mod.default()).toThrow("NEXT_REDIRECT:/");
|
||||
expect(redirect).toHaveBeenCalledWith("/");
|
||||
});
|
||||
|
||||
it("redirects /tape to /options", async () => {
|
||||
const mod = await import("./tape/page");
|
||||
expect(() => mod.default()).toThrow("NEXT_REDIRECT:/options");
|
||||
expect(redirect).toHaveBeenCalledWith("/options");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { TapeRoute } from "../terminal";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default function Page() {
|
||||
return <TapeRoute />;
|
||||
redirect("/options");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ import {
|
|||
getOptionScope,
|
||||
getLiveFeedStatus,
|
||||
getLiveManifest,
|
||||
getTerminalNavCurrentHref,
|
||||
getRouteFeatures,
|
||||
getTapeVirtualConfig,
|
||||
mergeHeldTapeHistory,
|
||||
|
|
@ -44,6 +45,7 @@ import {
|
|||
smartMoneyProfileLabel,
|
||||
smartMoneyToneForProfile,
|
||||
getAlertFlowPacketRefs,
|
||||
normalizeTerminalPathname,
|
||||
resolveAlertFlowPacket,
|
||||
statusLabel,
|
||||
toggleFilterValue
|
||||
|
|
@ -165,18 +167,24 @@ describe("alert context hydration helpers", () => {
|
|||
});
|
||||
|
||||
describe("live manifest", () => {
|
||||
it("includes only tape channels on /tape", () => {
|
||||
it("includes only options channels on /options", () => {
|
||||
const filters = buildDefaultFlowFilters();
|
||||
const channels = getLiveManifest("/tape", "SPY", 60000, filters).map(
|
||||
const channels = getLiveManifest("/options", "SPY", 60000, filters).map(
|
||||
(subscription) => subscription.channel
|
||||
);
|
||||
|
||||
expect(channels).toEqual(["options", "nbbo", "equities", "flow"]);
|
||||
expect(channels).toEqual(["options", "nbbo", "flow"]);
|
||||
});
|
||||
|
||||
it("dedupes tape options subscription", () => {
|
||||
it("keeps /tape as a compatibility alias for /options subscriptions", () => {
|
||||
expect(getLiveManifest("/tape", "SPY", 60000, buildDefaultFlowFilters())).toEqual(
|
||||
getLiveManifest("/options", "SPY", 60000, buildDefaultFlowFilters())
|
||||
);
|
||||
});
|
||||
|
||||
it("dedupes options subscriptions on /options", () => {
|
||||
const tapeOptionsSubscriptions = getLiveManifest(
|
||||
"/tape",
|
||||
"/options",
|
||||
"SPY",
|
||||
60000,
|
||||
buildDefaultFlowFilters()
|
||||
|
|
@ -184,35 +192,35 @@ describe("live manifest", () => {
|
|||
expect(tapeOptionsSubscriptions).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("keeps option filters on /tape options subscriptions", () => {
|
||||
it("keeps option filters on /options subscriptions", () => {
|
||||
const filters = {
|
||||
...buildDefaultFlowFilters(),
|
||||
minNotional: 125_000
|
||||
};
|
||||
|
||||
const tapeOptionsSubscription = getLiveManifest("/tape", "SPY", 60000, filters).find(
|
||||
const tapeOptionsSubscription = getLiveManifest("/options", "SPY", 60000, filters).find(
|
||||
(subscription) => subscription.channel === "options"
|
||||
);
|
||||
|
||||
expect(tapeOptionsSubscription?.filters).toBe(filters);
|
||||
});
|
||||
|
||||
it("applies global flow filters to flow subscriptions on /tape", () => {
|
||||
it("applies global flow filters to flow subscriptions on /options", () => {
|
||||
const filters = {
|
||||
...buildDefaultFlowFilters(),
|
||||
minNotional: 50_000
|
||||
};
|
||||
|
||||
const tapeFlowSubscription = getLiveManifest("/tape", "SPY", 60000, filters).find(
|
||||
const tapeFlowSubscription = getLiveManifest("/options", "SPY", 60000, filters).find(
|
||||
(subscription) => subscription.channel === "flow"
|
||||
);
|
||||
|
||||
expect(tapeFlowSubscription?.filters).toBe(filters);
|
||||
});
|
||||
|
||||
it("includes scoped option and equity subscriptions", () => {
|
||||
it("includes scoped option subscriptions on /options", () => {
|
||||
const manifest = getLiveManifest(
|
||||
"/tape",
|
||||
"/options",
|
||||
"AAPL",
|
||||
60000,
|
||||
buildDefaultFlowFilters(),
|
||||
|
|
@ -226,15 +234,11 @@ describe("live manifest", () => {
|
|||
(subscription): subscription is Extract<(typeof manifest)[number], { channel: "options" }> =>
|
||||
subscription.channel === "options"
|
||||
);
|
||||
const equitiesSubscription = manifest.find(
|
||||
(subscription): subscription is Extract<(typeof manifest)[number], { channel: "equities" }> =>
|
||||
subscription.channel === "equities"
|
||||
);
|
||||
|
||||
expect(optionsSubscription?.underlying_ids).toEqual(["AAPL"]);
|
||||
expect(optionsSubscription?.option_contract_id).toBe("AAPL-2025-01-17-200-C");
|
||||
expect(optionsSubscription?.snapshot_limit).toBe(100);
|
||||
expect(equitiesSubscription?.underlying_ids).toEqual(["AAPL"]);
|
||||
expect(manifest.some((subscription) => subscription.channel === "equities")).toBe(false);
|
||||
});
|
||||
|
||||
it("drops option-print filters for contract-focused options subscriptions but keeps flow filters", () => {
|
||||
|
|
@ -244,7 +248,7 @@ describe("live manifest", () => {
|
|||
optionTypes: ["put"] as const
|
||||
};
|
||||
const manifest = getLiveManifest(
|
||||
"/tape",
|
||||
"/options",
|
||||
"AAPL",
|
||||
60000,
|
||||
filters,
|
||||
|
|
@ -443,15 +447,21 @@ describe("contract-focused option helpers", () => {
|
|||
});
|
||||
|
||||
describe("route feature map", () => {
|
||||
it("maps /tape to tape panes and dependencies", () => {
|
||||
const features = getRouteFeatures("/tape");
|
||||
it("maps /options to the options and packets panes", () => {
|
||||
const features = getRouteFeatures("/options");
|
||||
expect(features.showOptionsPane).toBe(true);
|
||||
expect(features.showEquitiesPane).toBe(true);
|
||||
expect(features.showEquitiesPane).toBe(false);
|
||||
expect(features.showFlowPane).toBe(true);
|
||||
expect(features.needsClassifierDecor).toBe(true);
|
||||
expect(features.alerts).toBe(false);
|
||||
});
|
||||
|
||||
it("keeps /tape route compatibility while normalizing to /options", () => {
|
||||
expect(normalizeTerminalPathname("/tape")).toBe("/options");
|
||||
expect(getTerminalNavCurrentHref("/tape")).toBe("/options");
|
||||
expect(getRouteFeatures("/tape")).toEqual(getRouteFeatures("/options"));
|
||||
});
|
||||
|
||||
it("maps /signals to signal panes and dependencies", () => {
|
||||
const features = getRouteFeatures("/signals");
|
||||
expect(features.showAlertsPane).toBe(true);
|
||||
|
|
@ -506,10 +516,10 @@ describe("dark underlying route dependency helper", () => {
|
|||
});
|
||||
|
||||
describe("terminal navigation", () => {
|
||||
it("exposes Home, Tape, and News as top-level destinations", () => {
|
||||
it("exposes Home, Options, and News as top-level destinations", () => {
|
||||
expect(NAV_ITEMS).toEqual([
|
||||
{ href: "/", label: "Home" },
|
||||
{ href: "/tape", label: "Tape" },
|
||||
{ href: "/options", label: "Options" },
|
||||
{ href: "/news", label: "News" }
|
||||
]);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -186,23 +186,34 @@ export const shouldIncludeEquitiesForDarkUnderlyingFallback = (): boolean => {
|
|||
return false;
|
||||
};
|
||||
|
||||
const CANONICAL_OPTIONS_PATH = "/options";
|
||||
const TAPE_COMPAT_PATH = "/tape";
|
||||
const KNOWN_TERMINAL_PATHS = new Set([
|
||||
CANONICAL_OPTIONS_PATH,
|
||||
TAPE_COMPAT_PATH,
|
||||
"/news",
|
||||
"/signals",
|
||||
"/charts",
|
||||
"/replay"
|
||||
]);
|
||||
|
||||
export const normalizeTerminalPathname = (pathname: string): string => {
|
||||
if (pathname === TAPE_COMPAT_PATH) {
|
||||
return CANONICAL_OPTIONS_PATH;
|
||||
}
|
||||
return KNOWN_TERMINAL_PATHS.has(pathname) ? pathname : "/";
|
||||
};
|
||||
|
||||
export const getRouteFeatures = (pathname: string): RouteFeatures => {
|
||||
const includeEquitiesFallback = shouldIncludeEquitiesForDarkUnderlyingFallback();
|
||||
const normalizedPath =
|
||||
pathname === "/tape" ||
|
||||
pathname === "/news" ||
|
||||
pathname === "/signals" ||
|
||||
pathname === "/charts" ||
|
||||
pathname === "/replay"
|
||||
? pathname
|
||||
: "/";
|
||||
const normalizedPath = normalizeTerminalPathname(pathname);
|
||||
|
||||
switch (normalizedPath) {
|
||||
case "/tape":
|
||||
case "/options":
|
||||
return {
|
||||
options: true,
|
||||
nbbo: true,
|
||||
equities: true,
|
||||
equities: false,
|
||||
flow: true,
|
||||
news: false,
|
||||
alerts: false,
|
||||
|
|
@ -213,7 +224,7 @@ export const getRouteFeatures = (pathname: string): RouteFeatures => {
|
|||
equityCandles: false,
|
||||
equityOverlay: false,
|
||||
showOptionsPane: true,
|
||||
showEquitiesPane: true,
|
||||
showEquitiesPane: false,
|
||||
showFlowPane: true,
|
||||
showNewsPane: false,
|
||||
showAlertsPane: false,
|
||||
|
|
@ -370,6 +381,10 @@ export const getRouteFeatures = (pathname: string): RouteFeatures => {
|
|||
}
|
||||
};
|
||||
|
||||
export const getTerminalNavCurrentHref = (pathname: string): string => {
|
||||
return normalizeTerminalPathname(pathname);
|
||||
};
|
||||
|
||||
const EMPTY_ALERT_EVENTS: AlertEvent[] = [];
|
||||
const EMPTY_CLASSIFIER_HIT_EVENTS: ClassifierHitEvent[] = [];
|
||||
const EMPTY_SMART_MONEY_EVENTS: SmartMoneyEvent[] = [];
|
||||
|
|
@ -7170,7 +7185,7 @@ const useTerminal = (): TerminalState => {
|
|||
|
||||
export const NAV_ITEMS = [
|
||||
{ href: "/", label: "Home" },
|
||||
{ href: "/tape", label: "Tape" },
|
||||
{ href: "/options", label: "Options" },
|
||||
{ href: "/news", label: "News" }
|
||||
] as const;
|
||||
|
||||
|
|
@ -8812,8 +8827,31 @@ function SyntheticControlDock() {
|
|||
export function TerminalAppShell({ children }: { children: ReactNode }) {
|
||||
const state = useTerminalState();
|
||||
const pathname = usePathname();
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
const tickerFieldId = useId();
|
||||
const tickerHintId = useId();
|
||||
const activeNavHref = getTerminalNavCurrentHref(pathname);
|
||||
|
||||
useEffect(() => {
|
||||
setDrawerOpen(false);
|
||||
}, [pathname]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!drawerOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") {
|
||||
setDrawerOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => {
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
};
|
||||
}, [drawerOpen]);
|
||||
|
||||
return (
|
||||
<TerminalContext.Provider value={state}>
|
||||
|
|
@ -8821,31 +8859,26 @@ export function TerminalAppShell({ children }: { children: ReactNode }) {
|
|||
<a className="skip-link" href="#terminal-content">
|
||||
Skip to terminal content
|
||||
</a>
|
||||
<aside className="terminal-rail">
|
||||
<div className="terminal-brand">
|
||||
<span className="terminal-brand-kicker">IF</span>
|
||||
<span className="terminal-brand-name">Islandflow</span>
|
||||
</div>
|
||||
<nav aria-label="Primary" className="terminal-nav">
|
||||
{NAV_ITEMS.map((item) => {
|
||||
const active = pathname === item.href;
|
||||
return (
|
||||
<Link
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={`terminal-nav-link${active ? " terminal-nav-link-active" : ""}`}
|
||||
href={item.href}
|
||||
key={item.href}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
<ShellMetricStrip />
|
||||
</aside>
|
||||
|
||||
<div className="terminal-frame">
|
||||
<header className="terminal-topbar">
|
||||
<div className="terminal-topbar-leading">
|
||||
<button
|
||||
aria-controls="terminal-nav-drawer"
|
||||
aria-expanded={drawerOpen}
|
||||
aria-label={drawerOpen ? "Close navigation menu" : "Open navigation menu"}
|
||||
className="terminal-button terminal-menu-trigger"
|
||||
type="button"
|
||||
onClick={() => setDrawerOpen((current) => !current)}
|
||||
>
|
||||
<span aria-hidden="true" className="terminal-menu-trigger-icon">
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
</span>
|
||||
<span>Menu</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="terminal-topbar-actions">
|
||||
<div className="terminal-topbar-controls">
|
||||
{state.selectedInstrumentLabel && state.selectedInstrument?.kind !== "option-contract" ? (
|
||||
|
|
@ -8909,6 +8942,53 @@ export function TerminalAppShell({ children }: { children: ReactNode }) {
|
|||
</main>
|
||||
</div>
|
||||
|
||||
{drawerOpen ? (
|
||||
<>
|
||||
<button
|
||||
aria-label="Close navigation drawer"
|
||||
className="terminal-drawer-backdrop"
|
||||
type="button"
|
||||
onClick={() => setDrawerOpen(false)}
|
||||
/>
|
||||
<aside
|
||||
aria-label="Primary navigation"
|
||||
className="terminal-nav-drawer"
|
||||
id="terminal-nav-drawer"
|
||||
>
|
||||
<div className="terminal-drawer-head">
|
||||
<div className="terminal-brand">
|
||||
<span className="terminal-brand-kicker">IF</span>
|
||||
<span className="terminal-brand-name">Islandflow</span>
|
||||
</div>
|
||||
<button
|
||||
aria-label="Close navigation drawer"
|
||||
className="terminal-button terminal-drawer-close"
|
||||
type="button"
|
||||
onClick={() => setDrawerOpen(false)}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
<nav aria-label="Primary" className="terminal-nav">
|
||||
{NAV_ITEMS.map((item) => {
|
||||
const active = activeNavHref === item.href;
|
||||
return (
|
||||
<Link
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={`terminal-nav-link${active ? " terminal-nav-link-active" : ""}`}
|
||||
href={item.href}
|
||||
key={item.href}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
<ShellMetricStrip />
|
||||
</aside>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<SyntheticControlDock />
|
||||
|
||||
{state.selectedAlert ? (
|
||||
|
|
@ -8981,11 +9061,11 @@ export function NewsRoute() {
|
|||
);
|
||||
}
|
||||
|
||||
export function TapeRoute() {
|
||||
export function OptionsRoute() {
|
||||
const state = useTerminal();
|
||||
return (
|
||||
<PageFrame
|
||||
title="Tape"
|
||||
title="Options"
|
||||
actions={
|
||||
<>
|
||||
<button
|
||||
|
|
@ -9009,9 +9089,8 @@ export function TapeRoute() {
|
|||
</>
|
||||
}
|
||||
>
|
||||
<div className="page-grid page-grid-tape">
|
||||
<div className="page-grid page-grid-options">
|
||||
<OptionsPane state={state} />
|
||||
<EquitiesPane state={state} />
|
||||
<FlowPane state={state} title="Packets" />
|
||||
</div>
|
||||
</PageFrame>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue