# 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)

### Wejście / wyjście ze stack
- **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)

### Warstwy i DnD
- 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`).

### Warstwy kosztów (Costs)
- 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`.

### Auto-hide + lock
- 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.

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

### Opacity (warstwy)
- 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`).

### Jasność (warstwy)
- 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`).

### Widoczność + lock (warstwy)
- 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`).

## Implementacja (gdzie w kodzie)
- 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`

## Co dalej (kolejne iteracje)

MVP nie robi jeszcze “prawdziwego” układu kafelków z:
- drag/resize okien w trybie stack,
- wyświetlaniem kilku warstw jednocześnie (np. jako nakładające się okna),
- przełączaniem grid→stack przez zoom kafelka (z animacją).

Proponowane następne kroki:
1) wydzielić `Pane` abstraction (id, title, render, hotkeys),
2) zrobić `grid` jako faktyczne kafelki (Chart, DLOB, Orderbook, TradeForm),
3) dodać “zoom” kafelka → wejście do stack,
4) dodać opcjonalnie drag/resize w stack (na start tylko z-index + focus).