// IndieVertical — shared UI: icons, header, footer, cards, filter bar, sidebar, gates, role bar.
const IvLogoMark = ({ size = 24 }) => (
);
const IvLock = () => (
);
const IvSearch = () => (
);
// ---------- header ----------
function IvHeader() {
const { state, api } = useStore();
const route = useRoute();
const role = state.role;
const loggedIn = role !== "visitor";
const user = role === "dev" ? IV_USERS.dev : IV_USERS.scout;
const unread = ivUnreadCount(state, role);
const on = (p) => (route.page === p ? "on" : "");
return (
);
}
// ---------- footer ----------
function IvFooter() {
return (
);
}
// ---------- game card ----------
function IvGameCard({ g, variant, maxBadges }) {
const badges = [];
if (g.status) badges.push({g.status} );
if (g.deal) badges.push({g.deal} );
if (g.demo) badges.push(Demo available );
else if (g.open) badges.push(Open to conversations );
return (
{g.name}
{g.hook}
{(g.genres || []).join(" · ")}
{badges.slice(0, maxBadges || 3)}
);
}
// ---------- game row (list layout for browse + promoted) ----------
const IvStar = () => (
);
function IvGameRow({ g, variant, flags }) {
const badges = [];
if (g.status) badges.push({g.status} );
if (g.deal) badges.push({g.deal} );
if (g.demo) badges.push(Demo available );
if (g.open) badges.push(Open to conversations );
return (
{g.name}
{flags && g.editorsPick &&
{g.hook}
{(g.genres || []).join(" · ")}
{g.platforms && g.platforms.length > 0 ? " · " + g.platforms.join(", ") : ""}
{badges}
{g.studio && {g.studio} }
{g.location && {g.location} }
{g.targetRelease && Target: {g.targetRelease} }
);
}
// ---------- dropdown ----------
function IvDrop({ label, value, options, onChange, allLabel }) {
const [open, setOpen] = React.useState(false);
const ref = React.useRef(null);
const triggerRef = React.useRef(null);
React.useEffect(() => {
if (!open) return;
const close = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
const onKey = (e) => { if (e.key === "Escape") { setOpen(false); if (triggerRef.current) triggerRef.current.focus(); } };
document.addEventListener("mousedown", close);
document.addEventListener("keydown", onKey);
return () => { document.removeEventListener("mousedown", close); document.removeEventListener("keydown", onKey); };
}, [open]);
const set = value != null && value !== "";
return (
setOpen(!open)}>
{set ? label + ": " + value : label} ▼
{open && (
{ onChange(null); setOpen(false); }}>
{allLabel || "All"}
{options.map((o) => (
{ onChange(o); setOpen(false); }}>
{o}
))}
)}
);
}
// ---------- filter bar (live) ----------
const IV_EMPTY_FILTERS = { q: "", genre: null, platform: null, status: null, deal: null, demo: false, open: false };
function ivCountFilters(f) {
let n = 0;
if (f.q.trim()) n++;
["genre", "platform", "status", "deal"].forEach((k) => { if (f[k]) n++; });
if (f.demo) n++;
if (f.open) n++;
return n;
}
function ivApplyFilters(games, f) {
const q = f.q.trim().toLowerCase();
return games.filter((g) => {
if (q) {
const hay = (g.name + " " + g.hook + " " + (g.genres || []).join(" ") + " " + (g.studio || "")).toLowerCase();
if (!hay.includes(q)) return false;
}
if (f.genre && !(g.genres || []).includes(f.genre)) return false;
if (f.platform && !(g.platforms || []).includes(f.platform)) return false;
if (f.status && g.status !== f.status) return false;
if (f.deal && g.deal !== f.deal) return false;
if (f.demo && !g.demo) return false;
if (f.open && !(g.open || g.demo)) return false;
return true;
});
}
function IvFilterBar({ filters, setFilters }) {
const f = filters;
const set = (patch) => setFilters({ ...f, ...patch });
const active = ivCountFilters(f);
return (
set({ genre: v })} allLabel="All genres" />
set({ platform: v })} allLabel="All platforms" />
set({ status: v })} allLabel="Any status" />
set({ deal: v })} allLabel="Any deal type" />
set({ demo: !f.demo })}>
{f.demo ? "✓ " : ""}Demo Available
set({ open: !f.open })}>
{f.open ? "✓ " : ""}Open to Conversations
{active > 0 && (
setFilters({ ...IV_EMPTY_FILTERS })}>
Clear Filters
)}
);
}
// ---------- sidebar ----------
function IvSidebar({ items }) {
return (
);
}
// ---------- gated field ----------
function IvGate({ title, value, role }) {
if (role === "scout") {
return (
{value}
Shared with publisher accounts only — please keep it that way.
);
}
return (
);
}
// ---------- visibility toggle (interactive) ----------
function IvVisToggle({ gated, onChange }) {
return (
onChange(false)}>Public
onChange(true)}>Publisher accounts only
{gated
? "Only accounts that signed up as a publisher or scout can see this. People who are not logged in cannot."
: "Anyone visiting the site can see this, even people who are not logged in."}
);
}
// ---------- empty state ----------
function IvEmptyState({ heading, body, button, onClick, href, reassure, children }) {
return (
{heading}
{body &&
{body}
}
{children}
{button && (
href
?
{button}
:
{button}
)}
{reassure &&
{reassure} }
);
}
// ---------- role switcher (demo chrome) ----------
function IvRoleBar() {
const { state, api } = useStore();
const r = state.role;
const pick = (role) => {
if (role === r) return;
api.setRole(role);
if (role === "visitor" && (location.hash.includes("dashboard") || location.hash.includes("inbox"))) ivGo("#/");
};
return (
View as
pick("visitor")}>Visitor
pick("dev")}>Developer
pick("scout")}>Scout
api.resetDemo()}>↺
);
}
Object.assign(window, {
IvLock, IvSearch, IvHeader, IvFooter, IvGameCard, IvGameRow, IvDrop, IvFilterBar,
IV_EMPTY_FILTERS, ivCountFilters, ivApplyFilters,
IvSidebar, IvGate, IvVisToggle, IvEmptyState, IvRoleBar,
});