From 4f152b4b45f84a1f3b4c3f35750efa05a4be1668 Mon Sep 17 00:00:00 2001 From: Saravana Achu Mac Date: Sat, 9 May 2026 01:02:10 -0700 Subject: [PATCH] fix(ui): improve watchlist entry feedback --- web/src/index.css | 95 +++++++++++++++++++++++++++++++++++++ web/src/tabs/EntriesTab.tsx | 50 ++++++++++++++++--- 2 files changed, 138 insertions(+), 7 deletions(-) diff --git a/web/src/index.css b/web/src/index.css index 109550f..69b575d 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -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; diff --git a/web/src/tabs/EntriesTab.tsx b/web/src/tabs/EntriesTab.tsx index ada857a..610cd9a 100644 --- a/web/src/tabs/EntriesTab.tsx +++ b/web/src/tabs/EntriesTab.tsx @@ -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([]); const [editingEntry, setEditingEntry] = useState(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 ( -
+

{entry.symbol}

- + {entry.is_real_trade ? 'Real' : 'Paper'} {entry.label && ( @@ -259,9 +281,23 @@ export const EntriesTab = ({ botState = DEFAULT_BOT_STATE }: EntriesTabProps) => ))}
+ {feedback && ( +
+ {feedback.message} +
+ )}
+ {loading && filteredEntries.length === 0 && ( +
+
+ + Loading entries + Fetching your saved watchlist and manual entries. +
+
+ )} {entryCards} - {filteredEntries.length === 0 && ( + {!loading && filteredEntries.length === 0 && (