[Feature/UX] Implement Draggable Resizable Sub-Panes for Indicator Panels (TradingView-style)

[Edge-Explorer]

Summary

Currently, our technical indicator panels (RSI and MACD) are rendered as fixed-height (100px) panes stacked directly below the main candlestick chart.

To elevate the trading terminal's interactivity and approach a premium, TradingView-like user experience, we want to allow users to click and drag the divider lines between the price chart and sub-panes to resize their heights dynamically.

Note: We recently fixed the indicator math and timezone alignment to render MACD and RSI perfectly on all timeframes, but a rigid fixed-height layout is still prone to spacing issues on smaller viewports. Custom panel dragging resolves this permanently.

---

Motivation

Different traders prefer different visual balances:

• Some traders want to maximize the main price chart and keep indicators very slim.
• Others want to expand the MACD histogram to read divergences in fine detail.
• Custom workspace layouts: Providing drag-to-resize panel controls makes the terminal feel highly responsive, professional, and interactive.

---

Proposed Implementation

1. Divider Elements

Inside frontend/src/components/StockChart.tsx, we need to insert active divider divs between:

• The main price chart container and the RSI panel.
• The RSI panel and the MACD panel.

These dividers should show a resize cursor (cursor: ns-resize or row-resize) on hover.

2. Interaction Logic

We can implement this using either:

• Custom React Mouse Events: Tracking onMouseDown on the divider, attaching window.addEventListener('mousemove', ...) to compute y coordinate delta, and updating state heights.
• Libraries: Using a lightweight pane-splitting library like react-resizable-panels that integrates natively with React responsive containers.

3. State Management

• Define state hooks to track the heights (e.g., mainChartHeight and subPaneHeight / macdHeight / rsiHeight).
• Persistence: Save the customized panel height ratios in localStorage keyed by user email so the workspace layout persists when the user reloads the terminal or switches tickers.

---

Files to Update

Layer	File Path	Description of Change
Frontend UI	frontend/src/components/StockChart.tsx	Wrap elements in resizable containers, add drag handlers/dividers, and manage dynamic heights state
Frontend Style	frontend/src/App.css	Add styling for row dividers, dragging state styles, and cursors

---

Acceptance Criteria

• Interactive divider bars are rendered between the main candlestick chart and the indicator panes.
• Hovering over the dividers changes the cursor to row-resize.
• Clicking and dragging the divider adjusts the heights of the adjacent charts dynamically in real time.
• Set minimum boundaries (e.g. price chart cannot shrink below 180px, and indicator panes cannot shrink below 50px or expand past 300px).
• Resized layouts are saved in localStorage and persist upon page reload.
• Panels adjust fluidly when toggling maximized mode on or off.