// store.jsx — Shared state for admin + public site.
//
// TWO MODES, picked automatically based on whether window.SUPABASE_CONFIG
// has both `url` and `anonKey` set:
//
// 1) localStorage-only (default if Supabase not configured)
// State lives in browser localStorage. Cross-tab sync via the native
// `storage` event. Cross-document iframe sync within the same origin.
// Per-browser — visitors see defaults from this file, not your edits.
//
// 2) Supabase-backed (when SUPABASE_CONFIG.url + anonKey are filled in)
// Source of truth is the `site_kv` table in your Supabase project.
// localStorage acts as a fast cache so first paint is instant; it gets
// hydrated on boot and on every Realtime push from the server.
// Admin writes go to Supabase first, then update the cache. Public
// visitors see admin's edits live (via Realtime postgres_changes).
//
// React-specific glue (useStoredState) lives at the bottom and is exposed
// on `window` so admin.jsx and app.jsx can import it without modules.
(function () {
const KEYS = {
DEALS: "xb.deals",
BRAND: "xb.brand",
PROFILE: "xb.profile",
SETTINGS: "xb.settings"
};
// Mapping from full localStorage key → short Supabase row key.
// Supabase rows live under "deals"/"brand"/"profile"/"settings"; the
// `xb.` prefix is local-only namespacing to avoid colliding with
// unrelated localStorage entries on the same origin.
const SHORT_KEY = {
[KEYS.DEALS]: "deals",
[KEYS.BRAND]: "brand",
[KEYS.PROFILE]: "profile",
[KEYS.SETTINGS]: "settings"
};
const FULL_KEY = Object.fromEntries(
Object.entries(SHORT_KEY).map(([full, short]) => [short, full])
);
const DEFAULT_BRAND = {
siteName: "XOOTICBONUS",
headline: "Best casino deals,",
headlineHighlight: "no fluff.",
subhead: "One top pick. A handful of solid backups. All verified, all exclusive codes.",
accent: "#22c55e",
motion: true,
liveFeed: true,
highlightIntensity: 1
};
const DEFAULT_PROFILE = {
name: "9XOOTICBONUX",
handle: "9xootic",
followers: "551",
bio: "I partner with online casinos to negotiate exclusive bonuses for my followers.",
telegram: "https://t.me/xooticbonus",
twitch: "https://twitch.tv/9xootic",
email: "hi@xooticbonus.com"
};
const DEFAULT_SETTINGS = {
show18: true,
showDisclaimer: true,
disclosure: "I earn a commission when you sign up through my codes — at no cost to you.",
title: "XOOTICBONUS — Hand-picked Casino Deals",
metaDesc: "Hand-picked, verified-weekly casino bonus codes. Exclusive deals, fast payouts.",
domain: "xooticbonus.com"
};
// ─── Supabase client (optional) ──────────────────────────────────────
const cfg = window.SUPABASE_CONFIG || {};
const sbAvailable = !!(cfg.url && cfg.anonKey && window.supabase && window.supabase.createClient);
const sb = sbAvailable
? window.supabase.createClient(cfg.url, cfg.anonKey, {
auth: { persistSession: true, autoRefreshToken: true }
})
: null;
// ─── Local cache (always used) ───────────────────────────────────────
function loadLocal(key, fallback) {
try {
const raw = localStorage.getItem(key);
if (!raw) return fallback;
const parsed = JSON.parse(raw);
// Merge non-array objects with defaults so newly added fields appear.
if (parsed && !Array.isArray(parsed) && typeof parsed === "object" && fallback && typeof fallback === "object") {
return { ...fallback, ...parsed };
}
return parsed;
} catch (e) {
return fallback;
}
}
function writeCache(key, value) {
try {
if (value == null) {
localStorage.removeItem(key);
} else {
localStorage.setItem(key, JSON.stringify(value));
}
} catch (e) { /* quota or disabled */ }
window.dispatchEvent(new CustomEvent("xb:storage", { detail: { key, value } }));
}
// ─── Subscribe (cross-doc + same-doc) ────────────────────────────────
function subscribe(key, fn) {
const onStorage = (e) => {
if (e.key !== key) return;
try { fn(e.newValue ? JSON.parse(e.newValue) : null); } catch (_) {}
};
const onLocal = (e) => {
if (!e.detail || e.detail.key !== key) return;
fn(e.detail.value);
};
window.addEventListener("storage", onStorage);
window.addEventListener("xb:storage", onLocal);
return () => {
window.removeEventListener("storage", onStorage);
window.removeEventListener("xb:storage", onLocal);
};
}
// ─── Save (cache + Supabase if enabled) ──────────────────────────────
// Save is fire-and-forget for Supabase; cache writes happen synchronously
// so the calling component re-renders immediately without waiting on the
// network. If Supabase write fails (offline, RLS), we keep the optimistic
// cache value and surface the error via console.
async function persistRemote(key, value) {
if (!sb) return { error: null };
const shortKey = SHORT_KEY[key];
if (!shortKey) return { error: null };
const { error } = await sb.from("site_kv").upsert({ key: shortKey, value });
if (error) {
console.warn("Supabase save failed for", shortKey, error);
// Surface to listening UI (admin shows a toast). Wrapped so a missing
// dispatchEvent (very old environments) doesn't break the save path.
try {
window.dispatchEvent(new CustomEvent("xb:save-error", {
detail: { key: shortKey, error }
}));
} catch (e) {}
}
return { error };
}
function save(key, value) {
writeCache(key, value);
persistRemote(key, value);
}
// ─── Hydrate from Supabase ───────────────────────────────────────────
// Pull all known rows on boot. Compare against cache and only fire change
// events when something actually differs, to avoid noisy re-renders.
// Returns { ok, error } so admin can render a "couldn't sync" banner
// when the user might be looking at stale localStorage cache.
async function hydrate() {
if (!sb) return { ok: true, error: null };
try {
const { data, error } = await sb
.from("site_kv")
.select("key, value")
.in("key", Object.values(SHORT_KEY));
if (error) {
console.warn("Supabase hydrate failed:", error);
return { ok: false, error };
}
data.forEach(row => {
const fullKey = FULL_KEY[row.key];
if (!fullKey) return;
try {
const existing = localStorage.getItem(fullKey);
const next = JSON.stringify(row.value);
if (existing !== next) writeCache(fullKey, row.value);
} catch (_) {}
});
return { ok: true, error: null };
} catch (e) {
console.warn("Supabase hydrate threw:", e);
return { ok: false, error: e };
}
}
// ─── Realtime push ───────────────────────────────────────────────────
// postgres_changes fires for INSERT / UPDATE / DELETE on site_kv. We
// mirror the change into local cache and notify subscribers.
function startRealtime() {
if (!sb) return;
sb.channel("site_kv_changes")
.on("postgres_changes",
{ event: "*", schema: "public", table: "site_kv" },
(payload) => {
const row = payload.new && payload.new.key ? payload.new : payload.old;
if (!row || !row.key) return;
const fullKey = FULL_KEY[row.key];
if (!fullKey) return;
if (payload.eventType === "DELETE") {
writeCache(fullKey, null);
} else {
writeCache(fullKey, row.value);
}
})
.subscribe();
}
// ─── Auth ────────────────────────────────────────────────────────────
// captchaToken is required when Supabase Attack Protection has hCaptcha
// enabled. Caller passes the one-time token from the hCaptcha widget.
async function signIn(email, password, captchaToken) {
if (!sb) return { data: null, error: new Error("Supabase not configured") };
const opts = { email, password };
if (captchaToken) opts.options = { captchaToken };
return sb.auth.signInWithPassword(opts);
}
async function signOut() {
if (!sb) return { error: null };
return sb.auth.signOut();
}
async function getSession() {
if (!sb) return { data: { session: null } };
return sb.auth.getSession();
}
function onAuthStateChange(cb) {
if (!sb) return () => {};
const { data } = sb.auth.onAuthStateChange(cb);
return () => data.subscription.unsubscribe();
}
function reset() {
Object.values(KEYS).forEach(k => localStorage.removeItem(k));
}
// ─── URL sanitisers ──────────────────────────────────────────────────
// Defense in depth: validate at save AND at render. Blocks:
// - javascript:, data: (other than safe image types), vbscript:, file:
// - protocol-relative URLs (//evil.com → resolves to https://evil.com
// in browser context, would otherwise sneak past the scheme check)
// - any unknown scheme
// Allows http(s), mailto, tel, and relative paths.
function safeUrl(value) {
if (value == null) return null;
const s = String(value).trim();
if (!s) return null;
if (s.startsWith("//")) return null; // protocol-relative
if (!/^[a-z][a-z0-9+.-]*:/i.test(s)) return s; // relative path
if (/^(https?|mailto|tel):/i.test(s)) return s;
return null;
}
// For ![]()
. Allows http(s), relative paths, and a strict whitelist of
// raster image data URIs. Rejects data:image/svg+xml — SVG can carry
// executable script via