feat(web/PositionPanel): handle missing position gracefully with deposit CTA (#560)

[davismas23]

Summary

Closes #560

Upgrades the PositionPanel empty state from a plain-text message to a purposeful, accessible block that guides users toward opening a position.

Problem

When the contract's get_position returns null (the user has no recorded position in the market), the panel rendered:

You have no open position in this market yet.
Deposit funds above to get started.

This satisfied "no crash" but failed the acceptance criterion "CTA to deposit when empty" — there was no button or interactive element, and the deposit form was potentially off-screen.

Changes

apps/web/components/PositionPanel.tsx

Empty state — replaced the two-line text block with a centred card:

• Chart-bar icon (aria-hidden) — visual signal that no data is present
• No open position heading
• One-line explanation: You don't have an active position in this market yet.
• Deposit to get started primary button — scrolls the DepositForm into view via scrollIntoView({ behavior: 'smooth', block: 'center' }) and programmatically focuses the amount input

depositFormRef (new) — a useRef<HTMLDivElement> attached to a wrapper <div> around <DepositForm>, giving the CTA a stable DOM target to scroll to.

handleDepositCTA — small helper that reads depositFormRef.current, scrolls, and focuses the first input[type='number'] inside the form.

JSDoc — updated the component docstring to document the empty-state / CTA behaviour.

Import — added useRef to the React import (was unused before).

No-crash guarantee

The !position branch in the conditional render tree was already correct — all null/absent positions reach the empty-state path without throwing. This PR only changes what is rendered in that branch, not the guard logic.

} : !position ? (
  // NEW: accessible empty state with deposit CTA
  <div className="flex flex-col items-center …">
    <svg aria-hidden="true" … />
    <p>No open position</p>
    <p>You don't have an active position …</p>
    <button onClick={handleDepositCTA}>Deposit to get started</button>
  </div>
) : (
  // existing position grid unchanged

Acceptance criteria

• No uncaught render error when position is null/absent
• CTA to deposit when empty (scrolls + focuses DepositForm)

Notes

• PR is focused on issue Position panel handles missing position gracefully #560 only
• No contract or API changes
• Accessible: button has descriptive aria-label, icon is aria-hidden