bytelyst/learning_ai_invt_trdg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): migrate trade plan and chat controls

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-06 15:49:04 -07:00
parent 3892093dc4
commit 324e34d537
3 changed files with 318 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
web/src/components/ChatControl.tsx
View File

@ -8,7 +8,7 @@ import {
Check, Loader2, Check, Loader2,
Zap, Copy Zap, Copy
} from 'lucide-react'; } from 'lucide-react';
import { Button } from './ui/button'; import { Button, Input, Select, Textarea } from './ui/Primitives';
import { cn } from '../lib/utils'; import { cn } from '../lib/utils';
interface ChatMessage { interface ChatMessage {
@ -323,8 +323,10 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
// Floating robot button - bottom right corner (portaled to body to avoid parent CSS issues) // Floating robot button - bottom right corner (portaled to body to avoid parent CSS issues)
if (!isOpen) { if (!isOpen) {
return createPortal( return createPortal(
<button <Button
type="button"
onClick={() => setIsOpen(true)} onClick={() => setIsOpen(true)}
variant="ghost"
style={{ style={{
position: 'fixed', position: 'fixed',
bottom: '24px', bottom: '24px',
@ -388,7 +390,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
50% { transform: scale(0.8); opacity: 0.6; } 50% { transform: scale(0.8); opacity: 0.6; }
} }
`}</style> `}</style>
</button>, </Button>,
document.body document.body
); );
} }
@ -448,7 +450,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
<Button <Button
onClick={() => setIsOpen(false)} onClick={() => setIsOpen(false)}
variant="ghost" variant="ghost"
size="icon" size="sm"
className="h-8 w-8 rounded-lg" className="h-8 w-8 rounded-lg"
> >
<X size={14} /> <X size={14} />
@ -509,13 +511,16 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
{msg.action === 'create_profile' ? 'New Profile' : 'Update Profile'} {msg.action === 'create_profile' ? 'New Profile' : 'Update Profile'}
</span> </span>
</div> </div>
<button <Button
type="button"
onClick={() => copyJson(activeProfileData)} onClick={() => copyJson(activeProfileData)}
variant="ghost"
size="sm"
className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors" className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
title="Copy JSON" title="Copy JSON"
> >
<Copy size={11} /> <Copy size={11} />
</button> </Button>
</div> </div>
<div className="px-3.5 py-2.5 space-y-1.5"> <div className="px-3.5 py-2.5 space-y-1.5">
@ -554,7 +559,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
{isEditing ? ( {isEditing ? (
<div className="px-3.5 pb-3 space-y-2"> <div className="px-3.5 pb-3 space-y-2">
<div className="text-[10px] text-[var(--muted-foreground)] uppercase tracking-wider font-bold">Edit Parameters Before Apply</div> <div className="text-[10px] text-[var(--muted-foreground)] uppercase tracking-wider font-bold">Edit Parameters Before Apply</div>
<input <Input
value={activeProfileData?.name || ''} value={activeProfileData?.name || ''}
onChange={(e) => updateDraftField(msg.id, 'name', e.target.value)} onChange={(e) => updateDraftField(msg.id, 'name', e.target.value)}
placeholder="Profile Name" placeholder="Profile Name"
@ -562,7 +567,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
style={inputStyle} style={inputStyle}
/> />
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
<input <Input
type="number" type="number"
min="0" min="0"
step="1" step="1"
@ -572,7 +577,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
className="w-full rounded-lg px-2.5 py-1.5 text-[11px] outline-none" className="w-full rounded-lg px-2.5 py-1.5 text-[11px] outline-none"
style={inputStyle} style={inputStyle}
/> />
<input <Input
type="number" type="number"
min="0" min="0"
step="0.1" step="0.1"
@ -583,7 +588,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
style={inputStyle} style={inputStyle}
/> />
</div> </div>
<input <Input
value={activeProfileData?.symbols || ''} value={activeProfileData?.symbols || ''}
onChange={(e) => updateDraftField(msg.id, 'symbols', e.target.value)} onChange={(e) => updateDraftField(msg.id, 'symbols', e.target.value)}
placeholder="Symbols (e.g. BTC/USDT,ETH/USDT)" placeholder="Symbols (e.g. BTC/USDT,ETH/USDT)"
@ -592,15 +597,16 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
/> />
<div className="flex items-center justify-between rounded-lg px-2.5 py-1.5" style={inputStyle}> <div className="flex items-center justify-between rounded-lg px-2.5 py-1.5" style={inputStyle}>
<span className="text-[10px] text-[var(--muted-foreground)] uppercase tracking-wider">Auto Trading</span> <span className="text-[10px] text-[var(--muted-foreground)] uppercase tracking-wider">Auto Trading</span>
<select <Select
value={activeProfileData?.is_active === false ? 'false' : 'true'} value={activeProfileData?.is_active === false ? 'false' : 'true'}
onChange={(e) => updateDraftField(msg.id, 'is_active', e.target.value === 'true')} onChange={(e) => updateDraftField(msg.id, 'is_active', e.target.value === 'true')}
className="rounded px-2 py-1 text-[10px] outline-none" className="rounded px-2 py-1 text-[10px] outline-none"
style={inputStyle} style={inputStyle}
> options={[
<option value="true">Active</option> { value: 'true', label: 'Active' },
<option value="false">Paused</option> { value: 'false', label: 'Paused' },
</select> ]}
/>
</div> </div>
<div className="flex justify-end"> <div className="flex justify-end">
<Button <Button
@ -617,8 +623,10 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
{!appliedIds.has(msg.id) && !cancelledIds.has(msg.id) ? ( {!appliedIds.has(msg.id) && !cancelledIds.has(msg.id) ? (
<div className="flex" style={{ borderTop: '1px solid var(--border)' }}> <div className="flex" style={{ borderTop: '1px solid var(--border)' }}>
<button <Button
type="button"
onClick={() => handleCancel(msg.id)} onClick={() => handleCancel(msg.id)}
variant="ghost"
className="flex-1 py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:bg-white/[0.03]" className="flex-1 py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:bg-white/[0.03]"
style={{ style={{
color: 'var(--destructive)', color: 'var(--destructive)',
@ -627,9 +635,11 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
> >
<X size={11} /> <X size={11} />
Cancel Cancel
</button> </Button>
<button <Button
type="button"
onClick={() => isEditing ? closeDraftEditor(msg.id) : openDraftEditor(msg)} onClick={() => isEditing ? closeDraftEditor(msg.id) : openDraftEditor(msg)}
variant="ghost"
className="flex-1 py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:bg-white/[0.03]" className="flex-1 py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:bg-white/[0.03]"
style={{ style={{
color: '#fbbf24', color: '#fbbf24',
@ -638,9 +648,11 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
> >
<Copy size={11} /> <Copy size={11} />
{isEditing ? 'Done Editing' : 'Edit Params'} {isEditing ? 'Done Editing' : 'Edit Params'}
</button> </Button>
<button <Button
type="button"
onClick={() => handleApply(msg)} onClick={() => handleApply(msg)}
variant="ghost"
className="flex-[2] py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:brightness-110" className="flex-[2] py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:brightness-110"
style={{ style={{
background: 'var(--accent-soft)', background: 'var(--accent-soft)',
@ -649,7 +661,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
> >
<Zap size={11} /> <Zap size={11} />
Apply to Dashboard Apply to Dashboard
</button> </Button>
</div> </div>
) : cancelledIds.has(msg.id) ? ( ) : cancelledIds.has(msg.id) ? (
<div className="w-full py-2 flex items-center justify-center gap-1.5 text-[10px] font-semibold" style={{ <div className="w-full py-2 flex items-center justify-center gap-1.5 text-[10px] font-semibold" style={{
@ -686,9 +698,11 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
<p style={{ fontSize: '9px', color: 'var(--muted-foreground)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700, marginBottom: '10px', paddingLeft: '4px' }}>Quick Actions</p> <p style={{ fontSize: '9px', color: 'var(--muted-foreground)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700, marginBottom: '10px', paddingLeft: '4px' }}>Quick Actions</p>
<div className="grid grid-cols-2 gap-2"> <div className="grid grid-cols-2 gap-2">
{quickActions.map((action, i) => ( {quickActions.map((action, i) => (
<button <Button
type="button"
key={i} key={i}
onClick={() => sendMessage(action.prompt)} onClick={() => sendMessage(action.prompt)}
variant="ghost"
className="text-left px-3.5 py-3 rounded-xl transition-all" className="text-left px-3.5 py-3 rounded-xl transition-all"
style={{ style={{
background: 'var(--card)', background: 'var(--card)',
@ -706,7 +720,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
> >
<span style={{ fontSize: '13px', display: 'block', marginBottom: '3px', color: 'var(--foreground)' }}>{action.label}</span> <span style={{ fontSize: '13px', display: 'block', marginBottom: '3px', color: 'var(--foreground)' }}>{action.label}</span>
<span style={{ fontSize: '10px', color: 'var(--muted-foreground)', lineHeight: '1.4', display: 'block' }}>{action.prompt.slice(0, 55)}...</span> <span style={{ fontSize: '10px', color: 'var(--muted-foreground)', lineHeight: '1.4', display: 'block' }}>{action.prompt.slice(0, 55)}...</span>
</button> </Button>
))} ))}
</div> </div>
</div> </div>
@ -738,7 +752,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
}}> }}>
<div className="flex items-end gap-2.5"> <div className="flex items-end gap-2.5">
<div className="flex-1 relative"> <div className="flex-1 relative">
<textarea <Textarea
ref={inputRef} ref={inputRef}
value={input} value={input}
onChange={e => setInput(e.target.value)} onChange={e => setInput(e.target.value)}
@ -749,9 +763,11 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
className="w-full rounded-xl py-3 pl-4 pr-12 outline-none disabled:opacity-50 transition-all resize-none" className="w-full rounded-xl py-3 pl-4 pr-12 outline-none disabled:opacity-50 transition-all resize-none"
style={{ ...inputStyle, lineHeight: '1.5', fontFamily: 'inherit', fontSize: '13px' }} style={{ ...inputStyle, lineHeight: '1.5', fontFamily: 'inherit', fontSize: '13px' }}
/> />
<button <Button
type="button"
onClick={() => sendMessage()} onClick={() => sendMessage()}
disabled={!input.trim() || isLoading} disabled={!input.trim() || isLoading}
variant="ghost"
className="absolute right-2.5 bottom-2.5 w-8 h-8 rounded-lg flex items-center justify-center transition-all disabled:opacity-20 hover:scale-105" className="absolute right-2.5 bottom-2.5 w-8 h-8 rounded-lg flex items-center justify-center transition-all disabled:opacity-20 hover:scale-105"
style={{ style={{
background: input.trim() ? 'var(--primary)' : 'var(--accent-soft)', background: input.trim() ? 'var(--primary)' : 'var(--accent-soft)',
@ -760,7 +776,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
}} }}
> >
<Send size={14} /> <Send size={14} />
</button> </Button>
</div> </div>
</div> </div>
<p className="mt-1.5 ml-1 text-[9px] text-[var(--muted-foreground)]">Enter to send · Shift+Enter new line</p> <p className="mt-1.5 ml-1 text-[9px] text-[var(--muted-foreground)]">Enter to send · Shift+Enter new line</p>

29
web/src/views/ScreenerView.tsx
View File

@ -7,9 +7,7 @@ import { tradingRuntime } from '../lib/runtime';
import { createRequestId } from '../../../shared/request-id.js'; import { createRequestId } from '../../../shared/request-id.js';
import { SkeletonBlock } from '../components/Skeleton'; import { SkeletonBlock } from '../components/Skeleton';
import { PageHeader } from '../components/ui/page-header'; import { PageHeader } from '../components/ui/page-header';
import { Button } from '../components/ui/button'; import { Button, Input, Select } from '../components/ui/Primitives';
import { Input } from '../components/ui/input';
import { Select } from '../components/ui/select';
import { Card, CardContent } from '../components/ui/card'; import { Card, CardContent } from '../components/ui/card';
// ─── Types ──────────────────────────────────────────────────────────────────── // ─── Types ────────────────────────────────────────────────────────────────────
@ -198,22 +196,20 @@ export function ScreenerView() {
value={String(capIdx)} value={String(capIdx)}
onChange={e => setCapIdx(Number(e.target.value))} onChange={e => setCapIdx(Number(e.target.value))}
style={{ width: 180 }} style={{ width: 180 }}
> options={CAP_OPTIONS.map((c, i) => ({ value: String(i), label: c.label }))}
{CAP_OPTIONS.map((c, i) => ( />
<option key={c.label} value={i}>{c.label}</option>
))}
</Select>
<div style={{ display: 'flex', gap: 5, flexWrap: 'wrap', alignItems: 'center' }}> <div style={{ display: 'flex', gap: 5, flexWrap: 'wrap', alignItems: 'center' }}>
<SlidersHorizontal size={13} color="var(--muted-foreground)" /> <SlidersHorizontal size={13} color="var(--muted-foreground)" />
{SECTORS.slice(0, 6).map(s => ( {SECTORS.slice(0, 6).map(s => (
<button <Button
key={s} key={s}
onClick={() => setSector(s)} onClick={() => setSector(s)}
variant={sector === s ? 'secondary' : 'outline'}
size="sm"
style={{ style={{
padding: '5px 10px', borderRadius: 20, padding: '5px 10px', borderRadius: 20,
border: '1px solid', fontSize: 11, fontWeight: 600, border: '1px solid', fontSize: 11, fontWeight: 600,
cursor: 'pointer',
borderColor: sector === s ? 'var(--primary)' : 'var(--border)', borderColor: sector === s ? 'var(--primary)' : 'var(--border)',
background: sector === s ? 'var(--accent-soft)' : 'var(--card)', background: sector === s ? 'var(--accent-soft)' : 'var(--card)',
color: sector === s ? 'var(--primary)' : 'var(--muted-foreground)', color: sector === s ? 'var(--primary)' : 'var(--muted-foreground)',
@ -221,12 +217,16 @@ export function ScreenerView() {
}} }}
> >
{s} {s}
</button> </Button>
))} ))}
<Select <Select
aria-label="More sectors" aria-label="More sectors"
value={SECTORS.indexOf(sector) >= 6 ? sector : ''} value={SECTORS.indexOf(sector) >= 6 ? sector : ''}
onChange={e => e.target.value && setSector(e.target.value)} onChange={e => e.target.value && setSector(e.target.value)}
options={[
{ value: '', label: 'More sectors…' },
...SECTORS.slice(6).map(s => ({ value: s, label: s })),
]}
style={{ style={{
width: 140, width: 140,
borderRadius: 999, borderRadius: 999,
@ -235,12 +235,7 @@ export function ScreenerView() {
color: moreSectorSelected ? 'var(--primary)' : 'var(--muted-foreground)', color: moreSectorSelected ? 'var(--primary)' : 'var(--muted-foreground)',
fontWeight: moreSectorSelected ? 700 : 500, fontWeight: moreSectorSelected ? 700 : 500,
}} }}
> />
<option value="">More sectors…</option>
{SECTORS.slice(6).map(s => (
<option key={s} value={s}>{s}</option>
))}
</Select>
</div> </div>
</div> </div>
</CardContent> </CardContent>

74
web/src/views/SimpleView.tsx
View File

@ -12,11 +12,9 @@ import {
type ManualEntryPayload, type ManualEntryPayload,
} from '../lib/manualEntriesApi'; } from '../lib/manualEntriesApi';
import { fetchTradeProfiles, type TradeProfilePayload } from '../lib/profileApi'; import { fetchTradeProfiles, type TradeProfilePayload } from '../lib/profileApi';
import { Button } from '../components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card';
import { Input } from '../components/ui/input';
import { PageHeader } from '../components/ui/page-header'; import { PageHeader } from '../components/ui/page-header';
import { Select } from '../components/ui/select'; import { Button, Input, Select } from '../components/ui/Primitives';
import { import {
DEFAULT_TRADE_PLANS_UI_STATE, DEFAULT_TRADE_PLANS_UI_STATE,
reduceTradePlansUiState, reduceTradePlansUiState,
@ -1000,13 +998,14 @@ export function SimpleView() {
<CardContent> <CardContent>
<form className="space-y-6" onSubmit={handleSubmit}> <form className="space-y-6" onSubmit={handleSubmit}>
<div className="grid gap-3 md:grid-cols-2"> <div className="grid gap-3 md:grid-cols-2">
<button <Button
type="button" type="button"
onClick={() => { onClick={() => {
dispatch({ type: 'clear-feedback' }); dispatch({ type: 'clear-feedback' });
dispatch({ type: 'set-selected-holding-trade-id', value: null }); dispatch({ type: 'set-selected-holding-trade-id', value: null });
updateDraft('side', 'buy'); updateDraft('side', 'buy');
}} }}
variant="ghost"
className={`rounded-[1.25rem] border px-4 py-4 text-left transition ${ className={`rounded-[1.25rem] border px-4 py-4 text-left transition ${
draft.side === 'buy' draft.side === 'buy'
? 'border-[var(--primary)] bg-[var(--accent-soft)]' ? 'border-[var(--primary)] bg-[var(--accent-soft)]'
@ -1016,8 +1015,8 @@ export function SimpleView() {
<div className="text-[11px] font-black uppercase tracking-[0.24em] text-[var(--muted-foreground)]">Create plan</div> <div className="text-[11px] font-black uppercase tracking-[0.24em] text-[var(--muted-foreground)]">Create plan</div>
<div className="mt-1 text-sm font-semibold text-[var(--foreground)]">New short-term buy plan</div> <div className="mt-1 text-sm font-semibold text-[var(--foreground)]">New short-term buy plan</div>
<div className="mt-1 text-sm text-[var(--muted-foreground)]">Arm a dip-buy trigger and let the app manage the profit exit after fill.</div> <div className="mt-1 text-sm text-[var(--muted-foreground)]">Arm a dip-buy trigger and let the app manage the profit exit after fill.</div>
</button> </Button>
<button <Button
type="button" type="button"
onClick={() => { onClick={() => {
dispatch({ type: 'clear-feedback' }); dispatch({ type: 'clear-feedback' });
@ -1027,6 +1026,7 @@ export function SimpleView() {
updateDraft('side', 'sell'); updateDraft('side', 'sell');
} }
}} }}
variant="ghost"
className={`rounded-[1.25rem] border px-4 py-4 text-left transition ${ className={`rounded-[1.25rem] border px-4 py-4 text-left transition ${
draft.side === 'sell' draft.side === 'sell'
? 'border-[var(--primary)] bg-[var(--accent-soft)]' ? 'border-[var(--primary)] bg-[var(--accent-soft)]'
@ -1036,7 +1036,7 @@ export function SimpleView() {
<div className="text-[11px] font-black uppercase tracking-[0.24em] text-[var(--muted-foreground)]">Manage holding</div> <div className="text-[11px] font-black uppercase tracking-[0.24em] text-[var(--muted-foreground)]">Manage holding</div>
<div className="mt-1 text-sm font-semibold text-[var(--foreground)]">Attach an exit plan</div> <div className="mt-1 text-sm font-semibold text-[var(--foreground)]">Attach an exit plan</div>
<div className="mt-1 text-sm text-[var(--muted-foreground)]">Choose an existing holding and place it back under managed profit-taking.</div> <div className="mt-1 text-sm text-[var(--muted-foreground)]">Choose an existing holding and place it back under managed profit-taking.</div>
</button> </Button>
</div> </div>
{draft.side === 'sell' && ( {draft.side === 'sell' && (
@ -1049,17 +1049,13 @@ export function SimpleView() {
if (selected) applyHoldingToDraft(selected); if (selected) applyHoldingToDraft(selected);
}} }}
disabled={availableSellHoldings.length === 0} disabled={availableSellHoldings.length === 0}
> options={availableSellHoldings.length === 0
{availableSellHoldings.length === 0 ? ( ? [{ value: '', label: 'No eligible holdings available' }]
<option value="">No eligible holdings available</option> : availableSellHoldings.map((holding) => ({
) : ( value: holding.tradeId || '',
availableSellHoldings.map((holding) => ( label: `${holding.symbol} · ${holding.size} @ ${holding.entryPrice.toFixed(4)}`,
<option key={`${holding.symbol}:${holding.tradeId || 'holding'}`} value={holding.tradeId || ''}> }))}
{holding.symbol} · {holding.size} @ {holding.entryPrice.toFixed(4)} />
</option>
))
)}
</Select>
<span className="block text-[11px] text-[var(--muted-foreground)]"> <span className="block text-[11px] text-[var(--muted-foreground)]">
Trade Plans can manage an existing filled holding by attaching a profit exit target to it. Trade Plans can manage an existing filled holding by attaching a profit exit target to it.
</span> </span>
@ -1104,7 +1100,7 @@ export function SimpleView() {
{filteredSymbolSuggestions.length > 0 ? ( {filteredSymbolSuggestions.length > 0 ? (
<div className="flex flex-wrap gap-2 pt-1"> <div className="flex flex-wrap gap-2 pt-1">
{filteredSymbolSuggestions.map((symbol) => ( {filteredSymbolSuggestions.map((symbol) => (
<button <Button
key={symbol} key={symbol}
type="button" type="button"
onClick={() => { onClick={() => {
@ -1121,6 +1117,8 @@ export function SimpleView() {
}, },
}); });
}} }}
variant="ghost"
size="sm"
className={`rounded-full border px-3 py-1 text-[11px] font-semibold transition ${ className={`rounded-full border px-3 py-1 text-[11px] font-semibold transition ${
symbol === normalizedSymbol symbol === normalizedSymbol
? 'border-[var(--primary)] bg-[var(--accent-soft)] text-[var(--primary)]' ? 'border-[var(--primary)] bg-[var(--accent-soft)] text-[var(--primary)]'
@ -1128,7 +1126,7 @@ export function SimpleView() {
}`} }`}
> >
{symbol} {symbol}
</button> </Button>
))} ))}
</div> </div>
) : null} ) : null}
@ -1139,10 +1137,11 @@ export function SimpleView() {
<Select <Select
value={draft.side} value={draft.side}
onChange={(e) => updateDraft('side', e.target.value as SimpleSide)} onChange={(e) => updateDraft('side', e.target.value as SimpleSide)}
> options={[
<option value="buy">Buy the dip + profit exit</option> { value: 'buy', label: 'Buy the dip + profit exit' },
<option value="sell">Manage existing holding at profit</option> { value: 'sell', label: 'Manage existing holding at profit' },
</Select> ]}
/>
</label> </label>
</div> </div>
@ -1194,10 +1193,11 @@ export function SimpleView() {
<Select <Select
value={draft.sizingMode} value={draft.sizingMode}
onChange={(e) => updateDraft('sizingMode', e.target.value as 'quantity' | 'amount')} onChange={(e) => updateDraft('sizingMode', e.target.value as 'quantity' | 'amount')}
> options={[
<option value="quantity">Quantity / fractional shares</option> { value: 'quantity', label: 'Quantity / fractional shares' },
<option value="amount">USD amount</option> { value: 'amount', label: 'USD amount' },
</Select> ]}
/>
</label> </label>
<label className="space-y-2"> <label className="space-y-2">
@ -1255,10 +1255,11 @@ export function SimpleView() {
<Select <Select
value={draft.dropMode} value={draft.dropMode}
onChange={(e) => updateDraft('dropMode', e.target.value as TriggerMode)} onChange={(e) => updateDraft('dropMode', e.target.value as TriggerMode)}
> options={[
<option value="dollar">Dollar drop from current market</option> { value: 'dollar', label: 'Dollar drop from current market' },
<option value="percent">Percent drop from current market</option> { value: 'percent', label: 'Percent drop from current market' },
</Select> ]}
/>
</div> </div>
<label className="space-y-3"> <label className="space-y-3">
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-700"> <span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-700">
@ -1279,10 +1280,11 @@ export function SimpleView() {
<Select <Select
value={draft.profitMode} value={draft.profitMode}
onChange={(e) => updateDraft('profitMode', e.target.value as TriggerMode)} onChange={(e) => updateDraft('profitMode', e.target.value as TriggerMode)}
> options={[
<option value="dollar">Dollar gain from purchase</option> { value: 'dollar', label: 'Dollar gain from purchase' },
<option value="percent">Percent gain from purchase</option> { value: 'percent', label: 'Percent gain from purchase' },
</Select> ]}
/>
</div> </div>
<label className="space-y-3"> <label className="space-y-3">
<span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-700"> <span className="text-[11px] font-black uppercase tracking-[0.24em] text-zinc-700">