import React from "react"; import { callAI } from "call-ai"; import { useFireproof } from "use-fireproof"; import { ImgGen } from "use-vibes"; import { useViewer } from "use-vibes"; import { useVibe } from "use-vibes"; import SubmitClip from "./components/SubmitClip.jsx"; import ClipBoard from "./components/ClipBoard.jsx"; import JoinPanel from "./components/JoinPanel.jsx"; function weekKey(d = new Date()) { const dt = new Date(d); const day = (dt.getDay() + 6) % 7; dt.setDate(dt.getDate() - day); return `${dt.getFullYear()}-W${String(Math.ceil(((dt - new Date(dt.getFullYear(), 0, 1)) / 86400000 + 1) / 7)).padStart(2, "0")}`; } export default function App() { const { useLiveQuery, database } = useFireproof("screenshotDay"); const { can, ready, me } = useVibe("screenshotDay"); const { ViewerTag } = useViewer(); const week = weekKey(); const { docs: clips } = useLiveQuery("clipWeek", { key: week }); const { docs: votes } = useLiveQuery("type", { key: "vote" }); const { docs: members } = useLiveQuery("type", { key: "member" }); const isMember = ready && (can.create({ type: "clip", authorHandle: me?.userHandle, week }).ok || false); const canManage = ready && can.create({ type: "member", userHandle: me?.userHandle }).ok; const c = { page: "min-h-screen bg-[var(--background)] text-[var(--text-primary)] font-[var(--font-family)]", header: "sticky top-0 z-10 bg-[color-mix(in_srgb,var(--surface)_92%,transparent)] backdrop-blur border-b-[length:var(--border-width)] border-[var(--border)]", title: "text-2xl md:text-3xl tracking-wide", accentText: "text-[var(--primary)]", muted: "text-[var(--text-secondary)]", }; const voteCounts = {}; votes.forEach((v) => { if (v.week === week) voteCounts[v.clipId] = (voteCounts[v.clipId] || 0) + 1; }); const myVotes = new Set( votes.filter((v) => v.week === week && v.voterHandle === me?.userHandle).map((v) => v.clipId) ); const ranked = [...clips].sort( (a, b) => (voteCounts[b._id] || 0) - (voteCounts[a._id] || 0) || (b.createdAt || 0) - (a.createdAt || 0) ); const champ = ranked[0] && (voteCounts[ranked[0]._id] || 0) > 0 ? ranked[0] : null; return (

{champ && (

Current champion

{champ.caption}

{voteCounts[champ._id]} votes ·

)} {isMember ? ( ) : ready ? (

Join the board to drop your own clips and vote.

) : null}

); }