/* ============== Admin Login + Dashboard ============== */ /* Auth is Firebase Google Sign-In, gated by an email whitelist enforced both client-side (here) and server-side (Firestore + Storage security rules). */ function AdminPage({ navigate }) { const [user, setUser] = useState(() => window.lf && window.lf.auth.currentUser); const [ready, setReady] = useState(!!(window.lf && window.lf.auth.currentUser)); useEffect(() => { if (!window.lf) return; const unsub = window.lf.onAuthChange((u) => { setUser(u); setReady(true); }); return unsub; }, []); if (!ready) { return (
Loading…
); } if (!user || !window.lf.isAdminUser(user)) { return ; } return window.lf.signOut()} navigate={navigate} />; } /* ============== Login ============== */ function AdminLogin({ user, navigate }) { const [err, setErr] = useState(""); const [busy, setBusy] = useState(false); const deniedEmail = user && user.email && !window.lf.isAdminUser(user) ? user.email : null; const signIn = async () => { setBusy(true); setErr(""); try { await window.lf.signInWithGoogle(); } catch (e) { setErr(e && e.message ? e.message : "Sign-in failed. Please try again."); } finally { setBusy(false); } }; const signOut = () => window.lf.signOut(); return (
The Studio Atelier

Private admin for managing the gallery: paintings, prices, photographs and stories.

LARISSA
Studio Administration
{deniedEmail ? (
Access denied — {deniedEmail} is not authorized for the Larissa studio admin. Sign out and sign in with an authorized account.
) : (

Sign in with your Google account to manage the studio collection.

)} {err && (
{err}
)} {deniedEmail && ( )}
); } /* ============== Dashboard ============== */ function AdminDashboard({ user, onLogout, navigate }) { const [list, setList] = useState(() => window.PAINTINGS); const [editing, setEditing] = useState(null); // painting object being edited const [search, setSearch] = useState(""); const [filterSection, setFilterSection] = useState("all"); const [savedFlash, setSavedFlash] = useState(false); const [error, setError] = useState(""); const [newId, setNewId] = useState(null); // most recently created painting — highlighted in the list const [sortBy, setSortBy] = useState("newest"); // newest | name | price-high | price-low // Stay in sync with the Firestore-driven window.PAINTINGS useEffect(() => { const handler = () => setList([...window.PAINTINGS]); window.addEventListener("lf-paintings-updated", handler); return () => window.removeEventListener("lf-paintings-updated", handler); }, []); const filtered = useMemo(() => { let l = list; if (filterSection !== "all") l = l.filter((p) => p.section === filterSection); if (search.trim()) { const q = search.toLowerCase(); l = l.filter((p) => p.title.toLowerCase().includes(q) || (p.short || "").toLowerCase().includes(q)); } // Apply the chosen sort. Copy first so we never mutate the source list. const sorted = [...l]; if (sortBy === "newest") { // Paintings created in-app carry a createdAt timestamp; older ones don't, // so they keep their existing studio order below the freshly added ones. sorted.sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)); } else if (sortBy === "name") { sorted.sort((a, b) => (a.title || "").localeCompare(b.title || "")); } else if (sortBy === "price-high") { sorted.sort((a, b) => (b.price || 0) - (a.price || 0)); } else if (sortBy === "price-low") { sorted.sort((a, b) => (a.price || 0) - (b.price || 0)); } return sorted; }, [list, search, filterSection, sortBy]); const totalAvail = list.filter((p) => p.available).length; const totalValue = list.filter((p) => p.available).reduce((s, p) => s + (p.price || 0), 0); const flashSaved = () => { setSavedFlash(true); setTimeout(() => setSavedFlash(false), 1600); }; const updateOne = async (updated) => { try { await window.lf.savePainting(updated); flashSaved(); } catch (e) { console.error(e); setError("Could not save: " + (e && e.message ? e.message : "unknown error")); } }; const removeOne = async (id) => { if (!confirm("Delete this painting? This will also remove its photos. This cannot be undone.")) return; try { await window.lf.deletePainting(id); setEditing(null); } catch (e) { console.error(e); setError("Could not delete: " + (e && e.message ? e.message : "unknown error")); } }; const createOne = async () => { const newP = { id: "p-" + Date.now() + "-" + Math.random().toString(36).slice(2, 7), title: "Untitled Painting", year: new Date().getFullYear(), category: "flowers", section: "gallery", sectionOrder: 999, medium: "Oil on canvas", dims: "24 × 36 in", price: 1500, available: true, featured: false, grad: window.grads.summerGarden, short: "A new work from the studio.", story: "Painted in the studio, from life.", images: [], shipping: 160, createdAt: Date.now(), }; try { await window.lf.savePainting(newP); // Clear any filter/search and switch to "Newest" so the new painting can't // be hidden, highlight it, and open the editor right away. setSearch(""); setFilterSection("all"); setSortBy("newest"); setNewId(newP.id); setEditing(newP); } catch (e) { console.error(e); setError("Could not create: " + (e && e.message ? e.message : "unknown error")); } }; return (
{/* Admin top bar */}
LARISSA · ATELIER
Studio administration
{savedFlash && Saved}
{/* Hero / stats */}
Welcome back, Larissa

Manage the studio collection.

{error && (
{error}
)}
p.featured).length} />
{/* Toolbar */}
Section {[{ id: "all", label: "All Sections", accent: "var(--ink)" }, ...window.SECTIONS].map((c) => ( ))}
Sort
setSearch(e.target.value)} placeholder="Search paintings…" style={{ background: "transparent", border: "none", outline: "none", fontSize: 14, fontFamily: "var(--sans)", width: 220, color: "var(--ink)" }} />
{/* Table */}
Image
Title
Section · Where it appears
Dimensions
Medium
Price
Status
Actions
{filtered.length === 0 ? (
No paintings match the current filter.
) : filtered.map((p) => { const sec = window.sectionMeta(p.section); return (
{p.title}
{p.year} · {(p.images || []).length} photo{(p.images || []).length === 1 ? "" : "s"} · {p.category} {p.featured && ★ Featured}
{sec.label.replace(/ · .*/, "")}
{sec.label.replace(/^.*· /, "")}
{p.dims}
{p.medium}
${(p.price || 0).toLocaleString()}
{p.available ? "Available" : "SOLD"}
); })}
Edits are saved to Firebase and reflected on the public site within a few seconds. Signed in as {user && user.email}.
{editing && ( setEditing(null)} onSave={(updated) => { updateOne(updated); setEditing(updated); }} onDelete={() => removeOne(editing.id)} /> )}
); } const adminLinkStyle = { background: "transparent", border: "1px solid rgba(255,255,255,0.2)", color: "var(--warm-white)", padding: "8px 16px", borderRadius: 999, fontSize: 10.5, letterSpacing: "0.2em", textTransform: "uppercase", fontWeight: 500, cursor: "pointer", }; function smallBtn(bg, color = "var(--warm-white)") { return { background: bg, color: bg === "transparent" ? color : "var(--warm-white)", border: bg === "transparent" ? "1px solid var(--line)" : "none", padding: "7px 14px", borderRadius: 999, cursor: "pointer", fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 500, }; } function Stat({ label, value }) { return (
{label}
{value}
); } /* ============== Editor Drawer ============== */ function PaintingEditor({ painting, onClose, onSave, onDelete }) { const [draft, setDraft] = useState(painting); const [activeTab, setActiveTab] = useState("details"); const scrollRef = useRef(null); useEffect(() => { setDraft(painting); }, [painting.id]); // Reset the internal scroll position whenever a different painting is // opened or the user switches tabs — otherwise the drawer keeps the // previous painting's scroll offset and looks like it opened mid-page. // requestAnimationFrame waits for layout, so this reliably scrolls to // the very top even on first open. useEffect(() => { const reset = () => { if (scrollRef.current) scrollRef.current.scrollTop = 0; }; reset(); const id = requestAnimationFrame(reset); return () => cancelAnimationFrame(id); }, [painting.id, activeTab]); // Lock the underlying page scroll while the drawer is open. Restores // the prior overflow value on close so other admin work keeps working. useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; }, []); const set = (k, v) => setDraft((d) => ({ ...d, [k]: v })); const [uploading, setUploading] = useState(false); const [uploadErr, setUploadErr] = useState(""); const uploadToSlot = async (file, slot) => { setUploadErr(""); setUploading(true); try { // iPhone Safari delivers .HEIC files by default. Convert HEIC → JPEG // before we touch the canvas (HEIC isn't natively decodable by // outside Safari, and even Safari's decoded canvas image isn't // exportable to JPEG via toBlob on every iOS version). const jpegSource = await ensureBrowserDecodable(file); // Downscale to JPEG blob to keep storage small (~200-400KB per image) const blob = await downscaleToBlob(jpegSource); // Generate a unique upload id so each new file lands at a distinct // path. This sidesteps CDN caching of old URLs and gives us a stable // identifier per upload for auditing duplicates. const uploadId = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`; const prevUrl = (draft.images || [])[slot]; const { url, path } = await window.lf.uploadImage(draft.id, slot, blob, "image/jpeg", uploadId); // Delete the old file at this slot (best-effort) if (prevUrl && prevUrl !== url) { window.lf.deleteImageByUrl(prevUrl).catch(() => {}); } console.log(`Uploaded ${file.name} → ${path} (id ${uploadId})`); setDraft((d) => { const imgs = [...(d.images || [])]; imgs[slot] = url; return { ...d, images: imgs.slice(0, 5) }; }); } catch (e) { console.error(e); setUploadErr(e && e.message ? e.message : "Upload failed"); } finally { setUploading(false); } }; const onFiles = async (files, slot = null) => { const arr = Array.from(files).slice(0, 5); if (slot !== null) { if (arr[0]) await uploadToSlot(arr[0], slot); return; } // Append to the next empty slots const imgs = [...(draft.images || [])]; let nextSlot = imgs.findIndex((u) => !u); if (nextSlot === -1) nextSlot = imgs.length; for (const f of arr) { if (nextSlot >= 5) break; await uploadToSlot(f, nextSlot); nextSlot++; } }; const removeImage = async (i) => { const url = (draft.images || [])[i]; if (url) window.lf.deleteImageByUrl(url).catch(() => {}); setDraft((d) => { const imgs = [...(d.images || [])]; imgs.splice(i, 1); return { ...d, images: imgs }; }); }; const save = () => { const shipping = draft.shipping === undefined || draft.shipping === null || draft.shipping === "" ? 160 : Math.max(0, Number(draft.shipping) || 0); onSave({ ...draft, price: Number(draft.price) || 0, year: Number(draft.year) || new Date().getFullYear(), shipping, }); }; return (