{/* Popover menu */}
{open && (
<>
setOpen(false)}
style={{
position: 'fixed', inset: 0, zIndex: 0,
}}
/>
排列方式
{options.map((opt) => {
const active = opt.id === mode;
return (
);
})}
)}
{/* FAB button */}
);
}
// ──────────────────────────────────────────────
// View tabs row — pills + horizontal scroll + edit mode
// "全部" (kind='all') is protected: shown as plain pill in edit mode
// without rename input or delete button.
// ──────────────────────────────────────────────
function ViewTabsRow({ tabs, active, editing, onActivate, onToggleEdit, onRename, onDelete, onAdd }) {
const scrollerRef = React.useRef(null);
const [edges, setEdges] = useState({ left: false, right: false });
const updateEdges = useCallback(() => {
const c = scrollerRef.current;
if (!c) return setEdges({ left: false, right: false });
setEdges({
left: c.scrollLeft > 2,
right: c.scrollLeft + c.clientWidth < c.scrollWidth - 2,
});
}, []);
useEffect(() => {
updateEdges();
const c = scrollerRef.current;
if (!c) return;
c.addEventListener('scroll', updateEdges, { passive: true });
const ro = new ResizeObserver(updateEdges);
ro.observe(c);
return () => { c.removeEventListener('scroll', updateEdges); ro.disconnect(); };
}, [updateEdges, tabs, editing]);
useEffect(() => {
if (editing) return;
const c = scrollerRef.current;
if (!c) return;
const btn = c.querySelector(`[data-view-id="${active}"]`);
if (!btn) return;
const target = btn.offsetLeft + btn.offsetWidth / 2 - c.clientWidth / 2;
c.scrollTo({ left: Math.max(0, target), behavior: 'smooth' });
}, [active, editing, tabs]);
useEffect(() => {
if (!editing) return;
const c = scrollerRef.current;
if (!c) return;
requestAnimationFrame(() => c.scrollTo({ left: c.scrollWidth, behavior: 'smooth' }));
}, [editing]);
return (
{tabs.map((v) => {
const isActive = v.id === active;
const isAll = v.kind === 'all';
if (editing) {
if (isAll) {
// 全部 stays as a non-editable static pill in edit mode
return (
🔒
{v.label}
);
}
return (
onRename(v.id, e.target.value)}
style={{
width: Math.max(40, (v.label.length + 1) * 11),
border: 0, background: 'transparent', outline: 'none',
fontFamily: 'var(--font-ui)', fontSize: 11, fontWeight: 600, color: 'var(--ink)',
padding: '3px 2px',
}}
/>
);
}
return (
);
})}
{editing && (
)}
{edges.left && (
)}
{edges.right && (
)}
);
}
// ──────────────────────────────────────────────
// Top-level app
// ──────────────────────────────────────────────
const InventoryIcon = (
);
const NAV_TABS = [
{ id: 'Portfolio', label: '庫存', glyph: InventoryIcon },
{ id: 'Add', label: '增減個股', glyph: '+', isCta: true },
{ id: 'Trades', label: '交易紀錄', glyph: '⇅' },
];
function Tracker() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [ccy, setCcy] = useState(t.ccy);
const [screen, setScreen] = useState('Portfolio');
const [editing, setEditing] = useState(null);
const [presetMode, setPresetMode] = useState(null);
const [activeSym, setActiveSym] = useState(null);
// ── User-added transactions (replayed onto the seed positions) ──
const [userTxs, setUserTxs] = useState(loadUserTxs);
useEffect(() => {
try { localStorage.setItem(PORTFOLIO_LS, JSON.stringify({ userTxs })); } catch {}
}, [userTxs]);
// Replay txs → live state
const live = useMemo(() => replayTransactions(
window.PORTFOLIO.positions,
window.PORTFOLIO.usdCash,
window.PORTFOLIO.realizedPnL,
window.PORTFOLIO.totalDeposited != null ? window.PORTFOLIO.totalDeposited : 0,
userTxs,
), [userTxs]);
// Combined transaction list shown in Trades screen (seed + user, newest first)
const allTxs = useMemo(() => {
const seeds = window.PORTFOLIO.transactions || [];
return [...userTxs, ...seeds].sort((a, b) => (b.date || '').localeCompare(a.date || ''));
}, [userTxs]);
// Lift positions & viewTabs to top-level state for cross-screen mutation
const [tagOverrides, setTagOverrides] = useState(loadTagOverrides);
const [noteOverrides, setNoteOverrides] = useState(loadNoteOverrides);
const positions = useMemo(
() => buildLivePositions(live.positions, tagOverrides, noteOverrides),
[live.positions, tagOverrides, noteOverrides]
);
const [viewTabs, setViewTabs] = useState(() => loadViewTabs(buildLivePositions(window.PORTFOLIO.positions, loadTagOverrides())));
const [activeView, setActiveView] = useState(() => {
const tabs = loadViewTabs(window.PORTFOLIO.positions);
return tabs[0]?.id;
});
// Persist
useEffect(() => { try { localStorage.setItem(VIEW_TABS_LS, JSON.stringify(viewTabs)); } catch {} }, [viewTabs]);
useEffect(() => { try { localStorage.setItem(TAGS_LS, JSON.stringify(tagOverrides)); } catch {} }, [tagOverrides]);
useEffect(() => { try { localStorage.setItem(NOTES_LS, JSON.stringify(noteOverrides)); } catch {} }, [noteOverrides]);
// If active view disappears (deleted), fall back to first
useEffect(() => {
if (!viewTabs.find((v) => v.id === activeView)) setActiveView(viewTabs[0]?.id);
}, [viewTabs, activeView]);
// Tweaks
useEffect(() => { setCcy(t.ccy); }, [t.ccy]);
useEffect(() => { applyColorRule(t.colorRule); }, [t.colorRule]);
// ── Tag mutation API ──
// Build a fresh overrides map that includes ALL positions (preserves seeded tags)
const ensureOverrides = useCallback(() => {
const cur = { ...tagOverrides };
for (const p of window.PORTFOLIO.positions) {
if (cur[p.sym] == null) cur[p.sym] = [...(p.tags || [])];
}
return cur;
}, [tagOverrides]);
const setStockTags = useCallback((sym, newTags) => {
setTagOverrides((prev) => ({ ...ensureOverrides(), [sym]: newTags }));
}, [ensureOverrides]);
const setStockNote = useCallback((sym, newNote) => {
setNoteOverrides((prev) => ({ ...prev, [sym]: newNote }));
}, []);
const toggleStockTag = useCallback((sym, tag) => {
const cur = positions.find((p) => p.sym === sym);
if (!cur) return;
const has = cur.tags.includes(tag);
const next = has ? cur.tags.filter((x) => x !== tag) : [...cur.tags, tag];
setStockTags(sym, next);
// Ensure tab exists for new tag
if (!has && !viewTabs.find((v) => v.kind === 'tag' && v.label === tag)) {
const id = 'v-' + Date.now().toString(36);
setViewTabs((p) => [...p, { id, label: tag, kind: 'tag' }]);
}
}, [positions, viewTabs, setStockTags]);
// Listen for rename/delete from ViewTabsRow (cascades into tags)
useEffect(() => {
const onRename = (e) => {
const { oldLabel, newLabel } = e.detail;
setTagOverrides((prev) => {
const next = { ...ensureOverrides() };
for (const sym of Object.keys(next)) {
next[sym] = next[sym].map((t) => t === oldLabel ? newLabel : t);
}
return next;
});
};
const onDelete = (e) => {
const { label } = e.detail;
setTagOverrides((prev) => {
const next = { ...ensureOverrides() };
for (const sym of Object.keys(next)) {
next[sym] = next[sym].filter((t) => t !== label);
}
return next;
});
};
window.addEventListener('gca:renameTag', onRename);
window.addEventListener('gca:deleteTag', onDelete);
return () => {
window.removeEventListener('gca:renameTag', onRename);
window.removeEventListener('gca:deleteTag', onDelete);
};
}, [ensureOverrides]);
// ── Navigation ──
const goToAdd = () => { setEditing(null); setPresetMode(null); setScreen('Add'); };
const goToEdit = (tx) => { setEditing(tx); setPresetMode(null); setScreen('Add'); };
const goToDetail = (sym) => { setActiveSym(sym); setScreen('Detail'); };
const back = () => {
if (screen === 'Detail') return setScreen('Portfolio');
setScreen(editing ? 'Trades' : 'Portfolio'); setEditing(null); setPresetMode(null);
};
// ── Save/delete transaction ──
const saveTransaction = useCallback((tx) => {
setUserTxs((prev) => {
// Edit existing user tx
if (tx.id && prev.find((x) => x.id === tx.id)) {
return prev.map((x) => x.id === tx.id ? { ...x, ...tx } : x);
}
// New tx — generate id
const id = 'u' + Date.now().toString(36);
return [{ ...tx, id }, ...prev];
});
}, []);
const deleteTransaction = useCallback((id) => {
setUserTxs((prev) => prev.filter((x) => x.id !== id));
}, []);
const handleTab = (id) => {
if (id === 'Add') return goToAdd();
setEditing(null);
setActiveSym(null);
setScreen(id);
};
const renderScreen = () => {
if (screen === 'Portfolio') return (
{ setEditing(null); setPresetMode('cash'); setScreen('Add'); }}
/>
);
if (screen === 'Trades') return tx.id?.startsWith('u') ? goToEdit(tx) : null}
onAdd={goToAdd}
/>;
if (screen === 'Add') return { saveTransaction(tx); back(); }}
onDelete={editing && editing.id?.startsWith('u') ? () => { deleteTransaction(editing.id); back(); } : null}
/>;
if (screen === 'Detail') {
const pos = positions.find((p) => p.sym === activeSym);
if (!pos) { setScreen('Portfolio'); return null; }
return (
x.sym === pos.sym)}
allTags={viewTabs.filter((v) => v.kind === 'tag').map((v) => v.label)}
onBack={back}
onToggleTag={(tag) => toggleStockTag(pos.sym, tag)}
onSetTags={(tags) => setStockTags(pos.sym, tags)}
onSetNote={(note) => setStockNote(pos.sym, note)}
ccy={ccy}
/>
);
}
return null;
};
return (
{renderScreen()}
({ value: v, label: { dark: '深色', light: '淺色', accent: '強調' }[v] }))}
onChange={(v) => setTweak('summaryStyle', v)} />
({ value: v, label: { compact: '緊湊', cozy: '舒適' }[v] }))}
onChange={(v) => setTweak('density', v)} />
setTweak('ccy', v)} />
setTweak('colorRule', v)} />
{
try { localStorage.removeItem(VIEW_TABS_LS); localStorage.removeItem(TAGS_LS); } catch {}
setTagOverrides({});
const fresh = buildDefaultViewTabs(window.PORTFOLIO.positions);
setViewTabs(fresh);
setActiveView(fresh[0]?.id);
}} />
{
if (!confirm('確定清除所有手動新增的交易紀錄？此動作無法復原。')) return;
try { localStorage.removeItem(PORTFOLIO_LS); } catch {}
setUserTxs([]);
}} />
);
}
function Shell() {
return (
);
}
ReactDOM.createRoot(document.getElementById('root')).render();