feat(component): Watchlist — Customizable Asset/Metric List

[bntvllnt]

Summary

Customizable, real-time updating list of tracked assets, metrics, or entities. Each row shows symbol, price, change, sparkline, and custom columns. The personal dashboard component for trading and monitoring.

Proposed API

<Watchlist
  items={watchlistItems}
  onReorder={handleReorder}
  onRemove={handleRemove}
>
  <WatchlistHeader>
    <WatchlistAdd onAdd={handleAdd} />
    <WatchlistSort options={["name", "change", "volume"]} />
  </WatchlistHeader>
  <WatchlistItem
    symbol="AAPL"
    name="Apple Inc."
    price={185.42}
    change={+2.35}
    changePercent={+1.28}
    sparkline={appleData}
    volume="52.3M"
    alert={{ above: 190, below: 180 }}
  />
</Watchlist>

Requirements

• Sortable columns (price, change, volume, custom)
• Drag-and-drop reorder
• Add/remove items
• Real-time price updates with flash animation
• Mini sparkline per row
• Price alerts (visual indicator when threshold hit)
• Custom columns support
• Groups/categories
• Compact and expanded row modes
• Dark mode default
• Accessible: data table semantics, keyboard reorder

Use Cases

• Stock/crypto watchlist
• Server/service monitoring list
• KPI tracking dashboard
• Competitor price monitoring
• Portfolio holdings view

References

• TradingView watchlist
• Robinhood portfolio view
• Yahoo Finance watchlist