/* ratings.jsx — the daily "rate the platform" prompt + the owner/server-owner
Ratings tab (aggregate visualization, per-rating list with delete, and the
owner-only campaign config: cadence + who is asked).
The prompt is a gentle bottom-corner card, never a blocking modal. Who gets
asked and how often is set by the owner (GET/PATCH /api/rating-config); the
backend also de-dupes to one rating per cadence window. Results are scoped:
the owner sees everything; a server owner granted the ratings cap sees only
their own servers' ratings.
*/
const RATING_ROLE_LABEL = {
viewer: "Viewers", analyst: "Analysts", editor: "Editors",
admin: "Admins", server_owner: "Server owners", owner: "Owner",
};
// A precise, partially-fillable star meter (e.g. 4.3 → 4.3 gold stars).
function StarMeter({ value, size = 16, max = 5 }) {
const pct = Math.max(0, Math.min(100, (Number(value) / max) * 100));
const row = (fill) => (
{Array.from({ length: max }, (_, i) => (
{I("star", { size, fill: fill ? "currentColor" : "none" })}
))}
);
return (
{row(false)}
{row(true)}
);
}
// Interactive star picker used in the prompt.
function StarPicker({ value, onPick, size = 30 }) {
const [hover, setHover] = useState(0);
const shown = hover || value;
return (
setHover(0)}>
{[1, 2, 3, 4, 5].map(n => (
))}
);
}
// ── The prompt every targeted user sees (bottom-corner card) ─────────────────
const RATING_SNOOZE_KEY = (uid) => "rating:snooze:" + (uid || "anon");
function RatingPrompt({ userId, guildId, tab }) {
const [state, setState] = useState("hidden"); // hidden | show | done
const [question, setQuestion] = useState("How is your Sinux Signals experience?");
const [freqH, setFreqH] = useState(24);
const [score, setScore] = useState(0);
const [comment, setComment] = useState("");
const [busy, setBusy] = useState(false);
// Per-device snooze so a dismissal isn't re-nagged until the next window.
const snoozedUntil = () => {
try { return Number(JSON.parse(localStorage.getItem(RATING_SNOOZE_KEY(userId)) || "null")?.until) || 0; }
catch (_) { return 0; }
};
const snooze = (ms) => { try { localStorage.setItem(RATING_SNOOZE_KEY(userId), JSON.stringify({ until: Date.now() + ms })); } catch (_) {} };
useEffect(() => {
let alive = true;
if (snoozedUntil() > Date.now()) return; // still snoozed on this device
// Small delay so it doesn't fight the initial load.
const t = setTimeout(() => {
tapeFetch(apiBase() + "/api/rating/status")
.then(r => r.ok ? r.json() : null)
.then(j => {
if (!alive || !j || !j.due) return;
if (j.question) setQuestion(j.question);
if (j.frequency_hours) setFreqH(j.frequency_hours);
setState("show");
})
.catch(() => {});
}, 2500);
return () => { alive = false; clearTimeout(t); };
}, [userId]);
async function submit() {
if (busy || !score) return;
setBusy(true);
try {
await tapeSend(apiBase() + "/api/rating", {
method: "POST", headers: { "content-type": "application/json" },
body: JSON.stringify({
score, comment: comment.trim() || undefined, guild_id: guildId || undefined,
context: {
version: typeof APP_VERSION !== "undefined" ? APP_VERSION : "?",
tab: tab || "?",
viewport: `${window.innerWidth}×${window.innerHeight}`,
theme: document.documentElement.getAttribute("data-theme") || "?",
},
}),
});
// Don't ask again on this device until the next window elapses.
snooze(Math.max(1, freqH) * 3600e3);
setState("done");
setTimeout(() => setState("hidden"), 2600);
} catch (err) {
toast.error("Couldn't send — " + err.message);
} finally {
setBusy(false);
}
}
function later() {
snooze(Math.max(1, freqH) * 3600e3);
setState("hidden");
}
if (state === "hidden") return null;
return (