// LoadErrorBanner — the one implementation of "a fetch failed, don't render
// it as an empty list" (swallowed-error rule). Extracted 2026-08-10: the same
// banner markup had been pasted into 8+ views/sections (rule of three, thrice
// over). Wording is state-aware: "may be stale" only makes sense when older
// rows are still on screen — on a first load that failed, nothing was ever
// loaded, so the banner just says it couldn't load.
//
//   <LoadErrorBanner what="quotes" hasData={quotes.length > 0} onRetry={load} />
const LoadErrorBanner = ({ what, hasData, onRetry, style }) => (
    <div className="api-error" style={{ margin: '0.75rem 0', ...style }}>
        <i className="fas fa-exclamation-triangle"></i>{' '}
        {hasData
            ? `Couldn't refresh ${what} — this list may be stale.`
            : `Couldn't load ${what}.`}
        <button className="btn btn-secondary btn-small" style={{ marginLeft: '0.75rem' }} onClick={onRetry}>
            <i className="fas fa-redo"></i> Retry
        </button>
    </div>
);