feat: flatten /trade desktop layout (#561) #1095

2026-08-19T01:22:20Z

PlasticDigits commented

2026-08-19 01:22:20 +00:00

(Migrated from gitlab.com)

Summary

Implements GitLab #561: /trade desktop is a CSS grid (book | chart | ticket) with Recent trades on an independent bottom row. Nested card-glass around PriceChart is gone. Drag-resize handles are removed. Hide/show toggles persist as '1'/'0' and give vacated width to the chart, not the other side panel.

Workspace: frontend-dapp/src/components/trade/TradeDesktopWorkspace.tsx
Prefs: frontend-dapp/src/utils/tradeWorkspacePanels.ts
Verify: make verify-issue-561
Invariants L561-1–L561-12: docs/frontend.md § Trade page — desktop workspace, skills/AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.md

Related (not in this MR): ticket heading / Buy-Sell colors #563; tape amount formatting #557.

Test plan

make verify-issue-561 (unit + docs/skills greps + P10 Playwright) — passed twice
make lint-frontend — 0 errors (6 pre-existing warnings)
Targeted vitest: TradePage.test.tsx + tradeWorkspacePanels.test.ts (53)
Manual dark + light at 1280×720 and 1440×900: single chart surface, tape bottom row, hide/show book and ticket, fullscreen chart still works
Phone/tablet: no splitters; tape still reachable (trade-sub-lg-workspace)

Acceptance (L1–L12)

L1 Desktop chart is a single PriceChart shell-panel-strong surface
L2 One-chrome-layer principle in design-system + skill; Swap/Pool/Limits/Charts audited (Limits extra book wrapper removed; Swap IO card-glass inside page shell-panel-strong kept as distinct blocks)
L3 Recent trades is a bottom-row panel; expand/collapse is a button
L4 No PanelResizeHandle; P10 asserts handles absent
L5 Hide book → chart 3.2fr, ticket stays 1fr; restore control visible
L6 Hide ticket → hidden + inert + interactive={false}; restore visible
L7 Both hidden → chart full width; default 1fr / 2.2fr / 1fr keeps chart largest
L8 Tape/book/ticket persist '1'/'0' only; garbage → defaults
L9 Sub-lg grid structure unchanged; one TradeOrderTicket mount
L10 Visible ticket still docks footer CTA; chart flex chain unchanged; pair selector still above workspace
L11 Book Edit while ticket hidden re-shows ticket and applies draft
L12 Docs/skills/make verify-issue-561

Chrome audit (L2)

Route	Result
Swap	`card-glass` IO cards inside page `shell-panel-strong` — allowed distinct inner blocks
Pool	`shell-panel*` only; no extra wrap around chart
Charts	`PriceChart` without extra `card-glass`
Limits	Removed extra `card-glass` around `OrderBookPanel`

## Summary Implements [GitLab #561](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/561): `/trade` desktop is a CSS grid (book | chart | ticket) with Recent trades on an independent bottom row. Nested `card-glass` around `PriceChart` is gone. Drag-resize handles are removed. Hide/show toggles persist as `'1'`/`'0'` and give vacated width to the **chart**, not the other side panel. - Workspace: `frontend-dapp/src/components/trade/TradeDesktopWorkspace.tsx` - Prefs: `frontend-dapp/src/utils/tradeWorkspacePanels.ts` - Verify: `make verify-issue-561` - Invariants **L561-1–L561-12**: `docs/frontend.md` § Trade page — desktop workspace, `skills/AGENTS_FRONTEND_TRADE_PAGE_LAYOUT.md` Related (not in this MR): ticket heading / Buy-Sell colors [#563](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/563); tape amount formatting [#557](https://gitlab.com/PlasticDigits/cl8y-dex-terraclassic/-/issues/557). ## Test plan - [x] `make verify-issue-561` (unit + docs/skills greps + P10 Playwright) — passed twice - [x] `make lint-frontend` — 0 errors (6 pre-existing warnings) - [x] Targeted vitest: `TradePage.test.tsx` + `tradeWorkspacePanels.test.ts` (53) - [ ] Manual dark + light at 1280×720 and 1440×900: single chart surface, tape bottom row, hide/show book and ticket, fullscreen chart still works - [ ] Phone/tablet: no splitters; tape still reachable (`trade-sub-lg-workspace`) ## Acceptance (L1–L12) - [x] **L1** Desktop chart is a single `PriceChart` `shell-panel-strong` surface - [x] **L2** One-chrome-layer principle in design-system + skill; Swap/Pool/Limits/Charts audited (Limits extra book wrapper removed; Swap IO `card-glass` inside page `shell-panel-strong` kept as distinct blocks) - [x] **L3** Recent trades is a bottom-row panel; expand/collapse is a button - [x] **L4** No `PanelResizeHandle`; P10 asserts handles absent - [x] **L5** Hide book → chart `3.2fr`, ticket stays `1fr`; restore control visible - [x] **L6** Hide ticket → `hidden` + `inert` + `interactive={false}`; restore visible - [x] **L7** Both hidden → chart full width; default `1fr / 2.2fr / 1fr` keeps chart largest - [x] **L8** Tape/book/ticket persist `'1'`/`'0'` only; garbage → defaults - [x] **L9** Sub-`lg` grid structure unchanged; one `TradeOrderTicket` mount - [x] **L10** Visible ticket still docks footer CTA; chart flex chain unchanged; pair selector still above workspace - [x] **L11** Book Edit while ticket hidden re-shows ticket and applies draft - [x] **L12** Docs/skills/`make verify-issue-561` ## Chrome audit (L2) | Route | Result | |-------|--------| | Swap | `card-glass` IO cards inside page `shell-panel-strong` — allowed distinct inner blocks | | Pool | `shell-panel*` only; no extra wrap around chart | | Charts | `PriceChart` without extra `card-glass` | | Limits | Removed extra `card-glass` around `OrderBookPanel` |

PlasticDigits commented

2026-08-19 02:13:41 +00:00

(Migrated from gitlab.com)

added 23 commits

783ec9f3...17790e7d - 22 commits from branch main
f27003ea - Merge origin/main into feat/561-trade-layout.

Compare with previous version

added 23 commits <ul><li>783ec9f3...17790e7d - 22 commits from branch <code>main</code></li><li>f27003ea - Merge origin/main into feat/561-trade-layout.</li></ul> [Compare with previous version](/PlasticDigits/cl8y-dex-terraclassic/-/merge_requests/377/diffs?diff_id=1969767222&start_sha=783ec9f3e6af8c380a20ba3e614d60771e00c70e)

PlasticDigits commented

2026-08-19 02:13:45 +00:00

(Migrated from gitlab.com)

mentioned in commit 48f17aad35

mentioned in commit 48f17aad35e91092c4a3951cd0f2f7d6a2f32ebf