// Main App shell — async data load, theme, bottom nav, screen routing, // favorites + dataSaver + darkMode persistence. Defaults are baked: editorial // font pair, comfy density, film grain on, dark mode by default. const { useState, useEffect } = React; const FONT_PAIR = { display: "'Fraunces', 'Times New Roman', serif", ui: "'Inter Tight', system-ui, sans-serif", mono: "'JetBrains Mono', monospace", }; const DENSITY = "comfy"; // "airy" | "comfy" | "cozy" const GRAIN = true; // Accent is keyed off the theme: punchy red on OLED-true black, slightly // deeper crimson on warm cream so it reads as "ink" rather than "neon". const ACCENT_DARK = "#DD1717"; const ACCENT_LIGHT = "#B11518"; const FAVS_KEY = "wallpeppers:favorites"; const SAVER_KEY = "wallpeppers:datasaver"; const DARK_KEY = "wallpeppers:darkmode"; function App() { const [tab, setTab] = useState("home"); const [openId, setOpenId] = useState(null); const [favorites, setFavorites] = useState(() => { try { const v = localStorage.getItem(FAVS_KEY); return v ? JSON.parse(v) : []; } catch (e) { return []; } }); const [dataSaver, setDataSaver] = useState(() => { try { return localStorage.getItem(SAVER_KEY) === "1"; } catch (e) { return false; } }); const [darkMode, setDarkMode] = useState(() => { try { const v = localStorage.getItem(DARK_KEY); return v === null ? true : v === "1"; } catch (e) { return true; } }); const [data, setData] = useState({ items: null, categories: [], moods: [] }); const [loadError, setLoadError] = useState(null); useEffect(() => { let mounted = true; loadWallpapers() .then((d) => { if (!mounted) return; setData(d); const boot = document.getElementById("boot"); if (boot) { boot.dataset.done = "1"; setTimeout(() => boot.remove(), 400); } }) .catch((err) => { if (!mounted) return; setLoadError(err.message || "Failed to load wallpapers"); }); return () => { mounted = false; }; }, []); useEffect(() => { try { localStorage.setItem(FAVS_KEY, JSON.stringify(favorites)); } catch (e) {} }, [favorites]); useEffect(() => { try { localStorage.setItem(SAVER_KEY, dataSaver ? "1" : "0"); } catch (e) {} }, [dataSaver]); useEffect(() => { try { localStorage.setItem(DARK_KEY, darkMode ? "1" : "0"); } catch (e) {} }, [darkMode]); const dark = darkMode; const accent = dark ? ACCENT_DARK : ACCENT_LIGHT; const toggleFavorite = (id) => setFavorites((f) => (f.includes(id) ? f.filter((x) => x !== id) : [...f, id])); const wallpapers = data.items || []; const open = wallpapers.find((w) => w.id === openId); const themeVars = dark ? { "--bg": "#0a0a0a", "--fg": "#f4f1ec", "--muted": "#8a857d", "--surface": "#141413", "--line": "rgba(244, 241, 236, 0.12)", } : { "--bg": "#f7f5f0", "--fg": "#16140f", "--muted": "#807a70", "--surface": "#ffffff", "--line": "rgba(22, 20, 15, 0.12)", }; // Mirror theme vars onto so portal-rendered subtrees (e.g. the Vaul // drawer mounted on document.body) inherit the same values. useEffect(() => { const root = document.documentElement; const all = { ...themeVars, "--accent": accent, "--font-display": FONT_PAIR.display, "--font-ui": FONT_PAIR.ui, "--font-mono": FONT_PAIR.mono, }; for (const [k, v] of Object.entries(all)) root.style.setProperty(k, v); }, [dark, accent]); return (
{!data.items && !loadError && } {loadError && } {data.items && (
{tab === "search" && ( )}
{tab === "settings" && ( )}
{open && ( setOpenId(null)} onOpen={setOpenId} favorites={favorites} toggleFavorite={toggleFavorite} wallpapers={wallpapers} dataSaver={dataSaver} /> )} )} {GRAIN && }
); } const LoadingPane = () => (
Loading wallpapers…
); const ErrorPane = ({ message }) => (
Couldn't load wallpapers
{message}
Tip: open this page through a local server (e.g. yarn dev), not file://.
); const BottomNav = ({ tab, setTab, hidden }) => { const items = [ { id: "home", icon: "home", label: "Gallery" }, { id: "search", icon: "search", label: "Search" }, { id: "settings", icon: "user", label: "Profile" }, ]; return ( ); }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render();