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

fix(ui): improve watchlist entry feedback

Browse Source
This commit is contained in:
Saravana Achu Mac 2026-05-09 01:02:10 -07:00
parent 8c5a6d17f1
commit 4f152b4b45
2 changed files with 138 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
web/src/index.css
View File

@ -1257,6 +1257,101 @@ body {
box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
}
.entry-card {
display: flex;
height: 100%;
min-width: 0;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--bl-radius-card);
background: var(--card);
padding: 20px;
box-shadow: 0 12px 34px rgba(15, 23, 42, 0.05);
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.entry-card:hover {
border-color: var(--border-strong);
box-shadow: var(--card-shadow);
transform: translateY(-1px);
}
.entry-mode-pill,
.entry-state-pill {
display: inline-flex;
min-height: 24px;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 999px;
padding: 0 10px;
font-size: 11px;
font-weight: 760;
line-height: 1;
white-space: nowrap;
}
.entry-mode-pill.is-real {
border-color: color-mix(in oklab, var(--bl-info) 28%, var(--border));
background: var(--bl-info-muted);
color: var(--bl-info);
}
.entry-mode-pill.is-paper {
border-color: color-mix(in oklab, var(--bl-emphasis) 24%, var(--border));
background: color-mix(in oklab, var(--bl-emphasis) 10%, var(--card));
color: color-mix(in oklab, var(--bl-emphasis) 72%, var(--foreground));
}
.entry-state-pill {
background: color-mix(in oklab, var(--muted) 64%, var(--card));
color: var(--muted-foreground);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.entry-state-pill.state-locked,
.entry-state-pill.state-confirmed {
border-color: color-mix(in oklab, var(--bl-success) 28%, var(--border));
background: var(--bl-success-muted);
color: var(--bl-success);
}
.entry-state-pill.state-blocked,
.entry-state-pill.state-orphan {
border-color: color-mix(in oklab, var(--bl-danger) 28%, var(--border));
background: var(--bl-danger-muted);
color: var(--bl-danger);
}
.entry-state-pill.state-submitted {
border-color: color-mix(in oklab, var(--bl-warning) 28%, var(--border));
background: var(--bl-warning-muted);
color: color-mix(in oklab, var(--bl-warning) 76%, var(--foreground));
}
.watchlist-feedback {
border: 1px solid var(--border);
border-radius: 14px;
padding: 12px 14px;
font-size: 13px;
font-weight: 680;
line-height: 1.5;
}
.watchlist-feedback.is-success {
border-color: color-mix(in oklab, var(--bl-success) 28%, var(--border));
background: var(--bl-success-muted);
color: var(--bl-success);
}
.watchlist-feedback.is-error {
border-color: color-mix(in oklab, var(--bl-danger) 28%, var(--border));
background: var(--bl-danger-muted);
color: var(--bl-danger);
}
.product-tabs {
gap: 8px;
width: fit-content;

50
web/src/tabs/EntriesTab.tsx
View File

@ -101,24 +101,34 @@ const NAV_TABS = [
const tabClass = (isActive: boolean) =>
`min-h-9 rounded-lg px-3 text-xs font-semibold transition flex items-center gap-2 whitespace-nowrap ${isActive ? "border border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground)] shadow-sm" : "text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"}`;
const entryModeClass = (isRealTrade: boolean) =>
`entry-mode-pill ${isRealTrade ? 'is-real' : 'is-paper'}`;
export const EntriesTab = ({ botState = DEFAULT_BOT_STATE }: EntriesTabProps) => {
const { user } = useAuth();
const [entries, setEntries] = useState<Entry[]>([]);
const [editingEntry, setEditingEntry] = useState<Entry | null>(null);
const [activeTab, setActiveTab] = useState("paperActive");
const [isAdding, setIsAdding] = useState(false);
const [loading, setLoading] = useState(false);
const [feedback, setFeedback] = useState<{ tone: 'success' | 'error'; message: string } | null>(null);
// Filter Logic
const filteredEntries = filterEntriesByTab(entries, activeTab);
const fetchEntries = async () => {
if (!user) return;
setLoading(true);
try {
const data = await fetchManualEntries();
setEntries(data as Entry[]);
setFeedback((current) => current?.tone === 'error' ? null : current);
} catch (err: unknown) {
const message = err instanceof Error ? err.message : String(err);
console.error("Error fetching entries:", message);
setFeedback({ tone: 'error', message: `Failed to load watchlist entries: ${message}` });
} finally {
setLoading(false);
}
};
@ -128,24 +138,36 @@ export const EntriesTab = ({ botState = DEFAULT_BOT_STATE }: EntriesTabProps) =>
const handleDelete = async (id: string) => {
if (!confirm('Permanently delete this watchlist entry?')) return;
await deleteManualEntry(id);
fetchEntries();
try {
await deleteManualEntry(id);
setFeedback({ tone: 'success', message: 'Watchlist entry deleted.' });
await fetchEntries();
} catch (err: unknown) {
const message = err instanceof Error ? err.message : String(err);
setFeedback({ tone: 'error', message: `Failed to delete entry: ${message}` });
}
};
const handleClone = async (entry: Entry) => {
await createManualEntry(buildClonedEntryPayload(entry, crypto.randomUUID()) as unknown as ManualEntryPayload);
fetchEntries();
try {
await createManualEntry(buildClonedEntryPayload(entry, crypto.randomUUID()) as unknown as ManualEntryPayload);
setFeedback({ tone: 'success', message: `${entry.symbol} cloned as a suspended entry.` });
await fetchEntries();
} catch (err: unknown) {
const message = err instanceof Error ? err.message : String(err);
setFeedback({ tone: 'error', message: `Failed to clone entry: ${message}` });
}
};
const entryCards = filteredEntries.map((entry) => {
const entryState = deriveEntryState(entry, botState);
return (
<article key={entry.stock_instance_id} className="group flex h-full flex-col rounded-[var(--bl-radius-card)] border border-[var(--border)] bg-[var(--card)] p-5 shadow-sm transition hover:border-[var(--border-strong)] hover:shadow-[var(--card-shadow)]">
<article key={entry.stock_instance_id} className="entry-card group">
<div className="mb-5 flex items-start justify-between gap-4">
<div className="min-w-0 space-y-2">
<h4 className="m-0 truncate text-xl font-semibold tracking-tight text-[var(--foreground)]">{entry.symbol}</h4>
<div className="flex items-center gap-2">
<span className={`rounded-full px-2.5 py-1 text-[11px] font-semibold ${entry.is_real_trade ? 'bg-blue-500/15 text-blue-300' : 'bg-violet-500/15 text-violet-300'}`}>
<span className={entryModeClass(entry.is_real_trade)}>
{entry.is_real_trade ? 'Real' : 'Paper'}
</span>
{entry.label && (
@ -259,9 +281,23 @@ export const EntriesTab = ({ botState = DEFAULT_BOT_STATE }: EntriesTabProps) =>
</Button>
))}
</div>
{feedback && (
<div className={`watchlist-feedback is-${feedback.tone}`} role="status">
{feedback.message}
</div>
)}
<div className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
{loading && filteredEntries.length === 0 && (
<div className="ux-empty-state col-span-full">
<div>
<LayoutGrid size={34} className="mx-auto mb-4 text-[var(--muted-foreground)]" />
<strong>Loading entries</strong>
<span>Fetching your saved watchlist and manual entries.</span>
</div>
</div>
)}
{entryCards}
{filteredEntries.length === 0 && (
{!loading && filteredEntries.length === 0 && (
<div className="ux-empty-state col-span-full">
<div>
<LayoutGrid size={34} className="mx-auto mb-4 text-[var(--muted-foreground)]" />