Visualizer UI: kafelki → warstwy (stack)

Ten dokument opisuje MVP dla przełączania układu UI w apps/visualizer:

Grid (kafelki / standard): obecny layout aplikacji.
Stack (warstwy / fullscreen): jedna aktywna warstwa jest na wierzchu (fullscreen), a kolejność warstw można ustawiać przez DnD.

Zachowanie (MVP)

Chart: przycisk Fullscreen w pasku narzędzi wykresu przełącza tryb grid ↔ stack (dla warstwy chart).
DLOB: przycisk Fullscreen w nagłówku DLOB przełącza tryb grid ↔ stack (dla warstwy dlob).
Wyjście ze stack:
- przycisk Back w panelu warstw
- klawisz Esc dwa razy (w ciągu ~0.8s)

W stack pojawia się panel Layers jako wysuwany drawer z boku.
Lista w panelu jest od góry (top) do dołu (bottom):
- element na górze listy jest active (czyli jest “na wierzchu”).
DnD na liście:
- przeciągnij element i upuść na inny — zmienisz kolejność (top/bottom).
Kliknięcie elementu na liście przenosi go na wierzch (active).

Są dwie osobne warstwy kosztów:
- Costs (New) — estymata nowego kontraktu (domyślnie na samej górze),
- Costs (Active) — monitoring puszczonego kontraktu (pojawia się i jest ustawiana jeden poziom niżej po wpisaniu contract_id).
Możesz zmienić kolejność DnD (to nadpisuje domyślne ustawienie).
Po pierwszym DnD aplikacja oznacza układ jako “manualny” i nie przestawia już automatycznie warstw przy pojawieniu się contract_id.

Domyślnie drawer ma auto-hide (chowa się po ~1s po zjechaniu kursorem z panelu).
Przycisk Auto/Locked:
- Auto = auto-hide włączony,
- Locked = auto-hide wyłączony (drawer zostaje otwarty).
Drawer otwiera się po najechaniu kursorem na wąski “hotspot” przy lewym brzegu ekranu.

W drawerze są suwaki:
- Backdrop (przyciemnienie tła w stack)
- Panel (tło drawera)
Wartości są zapisywane w localStorage (trade.stackBackdropOpacity, trade.stackDrawerOpacity).

Każda warstwa ma swój suwak opacity (0–100%):
- 0% = warstwa niewidoczna,
- 100% = pełna widoczność.
DnD nadal ustawia kolejność (z-index), a interakcje trafiają do warstwy active (top).
Wartości są zapisywane w localStorage (trade.layerOpacity).

Każda warstwa ma suwak brightness (60–180%).
To jest filtr UI (nie wpływa na dane), przydatny gdy chcesz rozjaśnić wykres/DLOB w stack.
Wartości są zapisywane w localStorage (trade.layerBrightness).

Ikona “oka” przełącza widoczność warstwy (nie resetuje suwaka opacity).
Ikona “kłódki” blokuje warstwę:
- nie da się jej przeciągać (DnD),
- suwak opacity jest wyłączony,
- klik w wiersz nie zmienia kolejności (nie “wypycha” na top).
Ustawienia są zapisywane w localStorage (trade.layerVisible, trade.layerLocked).

Sterowanie układem i panel Layers: apps/visualizer/src/App.tsx
- trade.layoutMode w localStorage: 'grid' | 'stack'
- trade.stackOrder w localStorage: kolejność warstw (z-index; ostatni = top)
- trade.stackOrderManual w localStorage: czy użytkownik zmienił kolejność przez DnD (blokuje auto-przestawianie)
- trade.stackPanelLocked w localStorage: blokada auto-hide panelu warstw
- trade.contractId w localStorage: aktywny kontrakt do monitoringu
Fullscreen chart przez warstwy: apps/visualizer/src/features/chart/ChartPanel.tsx
- fullscreenOverride + onToggleFullscreenOverride (fullscreen kontrolowany z zewnątrz, bez backdropu)
Fullscreen DLOB: apps/visualizer/src/features/market/DlobDashboard.tsx
- isFullscreen + onToggleFullscreen (przycisk w nagłówku)
Panel kosztów: apps/visualizer/src/features/contracts/ContractCostsPanel.tsx

MVP nie robi jeszcze “prawdziwego” układu kafelków z:

Proponowane następne kroki: