// app.jsx — root router. TR-style: Portfolio is the entry point; // no Home tab. Bottom CTA: "Suche" + "Aktivität" (TR-like). const { useState: AU, useCallback: AC, useEffect: AE } = React; // ─── Theme — dark/light with localStorage persistence ───────────── // Note: an inline script in the HTML sets data-theme on *before* // React mounts so there's no flash. We just track state + toggle here. function useTheme() { const [theme, setTheme] = AU(() => { try { return document.documentElement.getAttribute('data-theme') || localStorage.getItem('bb:theme') || 'dark'; } catch { return 'dark'; } }); AE(() => { document.documentElement.setAttribute('data-theme', theme); try { localStorage.setItem('bb:theme', theme); } catch {} }, [theme]); // When embedded in an iframe, the parent page may set data-theme directly. // Mirror those changes into React state so props like IOSDevice.dark stay in sync. AE(() => { const obs = new MutationObserver(() => { const t = document.documentElement.getAttribute('data-theme'); if ((t === 'dark' || t === 'light') && t !== theme) setTheme(t); }); obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] }); return () => obs.disconnect(); }, [theme]); const toggle = AC(() => setTheme(t => t === 'dark' ? 'light' : 'dark'), []); return [theme, toggle]; } const ThemeContext = React.createContext({ theme: 'dark', toggle: () => {} }); const useThemeCtx = () => React.useContext(ThemeContext); function HomeRedirect({ navigate }) { React.useEffect(() => { navigate('portfolio'); }, []); return null; } function ProfileScreen({ goBack }) { const store = useStore(); return (
} title="Profil" />
{store.account.name[0]}
{store.account.name}
Cash {fmtEur(store.account.cash_eur)}
{['Persönliche Daten', 'Dokumente', 'Benachrichtigungen', 'Hilfe'].map((t, i, a) => (
{t}
))}
Basket Broker · Demo
); } // Bottom CTA bar — TR-style "Suche" / "Aktivität" pill row. // Floating, doesn't take vertical space; appears on top-level screens. function BottomBar({ active, onChange }) { const items = [ { id: 'search', label: 'Suche', icon: 'search' }, { id: 'portfolio', label: 'Portfolio', icon: 'pie' }, { id: 'activity', label: 'Aktivität', icon: 'list' }, ]; return (
{items.map(it => { const isActive = it.id === active; return ( ); })}
); } function App() { const [stack, setStack] = AU([{ screen: 'portfolio', params: {} }]); const [tab, setTab] = AU('portfolio'); const current = stack[stack.length - 1]; const navigate = AC((screen, params = {}, opts = {}) => { const tabScreens = { search: 'search', portfolio: 'portfolio', activity: 'activity' }; if (tabScreens[screen]) { setStack([{ screen, params }]); setTab(screen); return; } if (opts.reset) { setStack([{ screen, params }]); } else { setStack(s => [...s, { screen, params }]); } }, []); const goBack = AC(() => { setStack(s => s.length > 1 ? s.slice(0, -1) : [{ screen: 'portfolio', params: {} }]); setTab(t => t); }, []); const switchTab = AC((id) => { setTab(id); setStack([{ screen: id, params: {} }]); }, []); const screens = { home: HomeRedirect, portfolio: PortfolioScreen, search: SearchScreen, activity: ActivityScreen, basket: BasketDetailScreen, weights: WeightsScreen, savings: SavingsScreen, buy: BuyScreen, sell: SellScreen, buySuccess: BuySuccessScreen, claimGhost: ClaimGhostScreen, profile: ProfileScreen, }; const Screen = screens[current.screen] || PortfolioScreen; // Hide bottom bar on overlay flows (they have their own sticky footer). const hideBar = ['buy', 'sell', 'savings', 'weights', 'claimGhost', 'buySuccess', 'basket', 'profile'].includes(current.screen) || (current.screen === 'search' && current.params.addToBasketId); const labels = { portfolio: '01 Portfolio', search: '02 Suche', activity: '03 Aktivität', basket: '04 Basket', weights: '05 Gewichtung', savings: '06 Sparplan', buy: '07 Kauf', buySuccess: '08 Bestätigung', claimGhost: '09 Übernehmen', profile: '10 Profil', sell: '11 Verkauf', }; return (
{!hideBar && }
); } function Root() { const [theme, toggle] = useTheme(); const embedded = typeof document !== 'undefined' && document.documentElement.classList.contains('embedded'); return (
); } Object.assign(window, { ThemeContext, useThemeCtx }); ReactDOM.createRoot(document.getElementById('root')).render();