// Home screen — slim app header, category pills, mood subfilter, uniform grid. const HomeScreen = ({ density = "comfy", onOpen, favorites, toggleFavorite, dataSaver, wallpapers, categories, moods, }) => { const [category, setCategory] = React.useState("All"); const [mood, setMood] = React.useState(null); const [showMoods, setShowMoods] = React.useState(false); const scrollRef = React.useRef(null); const filtered = wallpapers.filter((w) => { if (category === "Favorites") { if (!favorites.includes(w.id)) return false; } else if (category !== "All" && w.category !== category) { return false; } if (mood && !w.mood.includes(mood)) return false; return true; }); const cols = density === "cozy" ? 4 : density === "comfy" ? 3 : 2; const gap = density === "cozy" ? 6 : density === "comfy" ? 10 : 16; return (
{filtered.length} of {wallpapers.length}
{(() => { const active = category === "Favorites"; return ( ); })()} {categories.map((c) => { const active = category === c; return ( ); })}
{showMoods && (
{moods.map((m) => { const active = mood === m; return ( ); })}
)}
{filtered.map((w, i) => ( ))}
{filtered.length === 0 && (
{category === "Favorites" ? (
No favorites yet
Tap the heart on any wallpaper to keep it here.
 ) : (
No wallpapers match these filters.
)}
)}
); }; const WallTile = ({ w, onOpen, favorited, toggleFavorite, dataSaver, index }) => { const [hover, setHover] = React.useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} onClick={() => onOpen(w.id)} style={{ position: "relative", aspectRatio: "9/16", background: w.palette[0] || "#1a1a1a", backgroundImage: `url("${w.thumbnail}")`, backgroundSize: "cover", backgroundPosition: "center", borderRadius: 14, overflow: "hidden", cursor: "pointer", opacity: 1, animation: `riseIn 360ms ${Math.min(index * 18, 400)}ms cubic-bezier(0.2, 0.7, 0.2, 1)`, transition: "transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1)", transform: hover ? "scale(1.015)" : "scale(1)", filter: dataSaver ? "blur(0.6px) saturate(0.92)" : "none", boxShadow: "0 1px 0 rgba(255,255,255,0.04) inset", }} >
{w.title}
{w.category}
); }; window.HomeScreen = HomeScreen;