// Dashboard — overlays owned by the Accounts card.
//
// Modal shared scrim + card shell
// AddAccountModal Figma 7357:122071 — step one of account creation
// InvestmentAccountsModal Figma 7367:16259 — the "View More" account table
// Hint the dark hover tooltip used by status pills and
// the balance-change chip
//
// Loaded before db-app.jsx, so everything here is a plain top-level function
// in the shared script scope, and hooks are reached through `React.` rather
// than destructured — same convention as db-charts.jsx.
/* ---------------- shared shell ---------------- */
function Modal({ title, onClose, width, children }) {
const card = React.useRef(null);
// Escape closes; the scrim swallows scroll behind it so the page underneath
// stays put while the dialog is open.
React.useEffect(() => {
const key = (e) => { if (e.key === 'Escape') onClose(); };
document.addEventListener('keydown', key);
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => {
document.removeEventListener('keydown', key);
document.body.style.overflow = prev;
};
}, [onClose]);
// Move focus inside on open so the dialog is reachable by keyboard and the
// first Tab continues within it rather than back out into the page.
React.useEffect(() => {
const el = card.current && (card.current.querySelector('.db-iconbtn') || card.current.querySelector('button'));
if (el) el.focus();
}, []);
return (
{ if (e.target === e.currentTarget) onClose(); }}>
{children}
);
}
function ModalHead({ title, onClose, children }) {
return (
{title}
{children}
);
}
/* ---------------- hover tooltip ----------------
Fixed-positioned rather than absolute: the accounts table scrolls, so an
absolutely-positioned tip would be clipped by its own row. */
function Hint({ id, anchor, title, rows, align = 'left', compact }) {
const [pos, setPos] = React.useState(null);
// Re-measure on scroll and resize: the tip is viewport-fixed, so a scrolling
// page or accounts table would otherwise leave it stranded where it opened.
React.useLayoutEffect(() => {
if (!anchor) return;
const place = () => {
const r = anchor.getBoundingClientRect();
setPos({ top: r.bottom + 6, left: align === 'right' ? r.right : r.left });
};
place();
window.addEventListener('scroll', place, true);
window.addEventListener('resize', place);
return () => {
window.removeEventListener('scroll', place, true);
window.removeEventListener('resize', place);
};
}, [anchor, align]);
if (!pos) return null;
return (
);
}
// Wraps any inline element in hover/focus tooltip plumbing. The trigger is
// focusable and described by the tip, so the provider detail is reachable
// without a mouse.
function WithHint({ title, rows, align, compact, className = '', children }) {
const [anchor, setAnchor] = React.useState(null);
const ref = React.useRef(null);
const id = React.useId();
const show = () => setAnchor(ref.current);
const hide = () => setAnchor(null);
return (
{children}
{anchor && }
);
}
/* ---------------- 1. Add Account ---------------- */
function AddAccountOption({ opt, onPick }) {
return (
{opt.title}
{opt.desc}
{opt.tag}
{opt.features.map((f, i) => (
{f}
))}
);
}
function AddAccountModal({ onClose }) {
const a = DB.addAccount;
// Step two (the manual form / the Yodlee handoff) is not designed yet, so the
// prototype acknowledges the choice and closes rather than dead-ending.
const pick = (key) => {
console.info(`[prototype] Add Account — chose "${key}"; step two is not designed yet.`);
onClose();
};
return (