import React, { useState, useEffect } from "react" import { callAI } from "call-ai" import { ImgVibes } from "img-vibes" import { useFireproof } from "use-fireproof" export default function App() { const [photoUrl, setPhotoUrl] = useState(null) const [suggestLoading, setSuggestLoading] = useState(false) const [submitLoading, setSubmitLoading] = useState(false) const { useLiveQuery, useDocument, database } = useFireproof("outfit-squad-db") const { doc, merge, submit } = useDocument({ type: "outfit_check", destination: "", createdAt: Date.now(), _files: {} }) const { docs: checks } = useLiveQuery("type", { key: "outfit_check", descending: true }) const { docs: votes } = useLiveQuery("type", { key: "vote" }) const calculateVerdict = (checkId) => { const checkVotes = votes.filter(v => v.checkId === checkId) const up = checkVotes.filter(v => v.val === 1).length const down = checkVotes.filter(v => v.val === -1).length return { up, down, total: up + down } } const activeChecks = checks.filter(c => (nowTick - c.createdAt) < 600000) const archiveChecks = checks.filter(c => (nowTick - c.createdAt) >= 600000) // Live timer tick for active checks const [nowTick, setNowTick] = useState(Date.now()) useEffect(() => { const id = setInterval(() => setNowTick(Date.now()), 1000) return () => clearInterval(id) }, []) // HANDLER STUBS const handleUploadClick = async (e) => { e.preventDefault(); if (!doc._files?.photo || !doc.destination) return; setSubmitLoading(true) try { await submit() setPhotoUrl(null) } finally { setSubmitLoading(false) } } const handleVote = async (checkId, val) => { await database.put({ type: "vote", checkId, val, createdAt: Date.now() }) } const generateSuggestion = async (e) => { e.preventDefault(); setSuggestLoading(true) try { const response = await callAI("Suggest a fun, specific occasion to wear an outfit for (like 'Indie Rock Concert', 'Third Hinge Date', 'Sunday Farmers Market'). Just one.", { schema: { properties: { suggestion: { type: "string" } } } }) const data = JSON.parse(response) if (data.suggestion) merge({ destination: data.suggestion.toUpperCase() }) } finally { setSuggestLoading(false) } } // CLASSNAMES (Layout only) const c = { page: "relative max-w-[920px] mx-auto p-12 min-h-screen z-10 flex flex-col gap-12", nav: "flex justify-between items-center p-4 rounded border-[3px] border-[var(--border)] shadow-block bg-white", navLogo: "flex gap-2 items-center font-bold text-sm tracking-widest", navLinks: "flex gap-4", navLink: "px-4 py-2 font-bold text-xs rounded border-[3px] border-[var(--border)] shadow-block-sm hover-lift active-slam bg-[var(--yellow)]", hero: "p-8 rounded relative overflow-hidden flex flex-col items-center text-center border-[3px] border-[var(--border)] shadow-block bg-white", heroTitle: "text-5xl font-bold tracking-tight mb-4", heroAccentBar: "absolute top-0 left-0 w-full h-[6px] flex", uploadGrid: "grid grid-cols-1 md:grid-cols-2 gap-8", card: "p-6 rounded flex flex-col gap-4 border-[3px] border-[var(--border)] bg-white shadow-block", inputWrapper: "flex flex-col gap-2", label: "text-[0.65rem] uppercase tracking-widest font-bold text-[var(--muted)]", input: "p-3 rounded border-[3px] border-[var(--border)] font-mono text-sm w-full focus:outline-none focus:-translate-y-[2px] focus:-translate-x-[2px] focus:shadow-block hover-lift transition-all", fileInput: "p-6 rounded border-[3px] border-[var(--border)] border-dashed flex flex-col items-center justify-center cursor-pointer min-h-[120px] bg-[var(--bg)] hover:bg-[var(--yellow)] transition-colors active-slam", btnContainer: "flex gap-4 mt-2", btnPrimary: "flex-1 py-3 px-6 rounded font-bold text-[0.8rem] tracking-wider uppercase text-center bg-[var(--red)] text-white border-[3px] border-[var(--border)] shadow-block hover-lift active-slam transition-all cursor-pointer", btnSecondary: "flex-1 py-3 px-6 rounded font-bold text-[0.8rem] tracking-wider uppercase text-center", btnGhost: "py-3 px-6 rounded font-bold text-[0.8rem] tracking-wider uppercase", btnAi: "ml-2 p-1 rounded text-[0.65rem] font-bold border-[3px] border-[var(--border)] bg-[var(--yellow)] shadow-block-sm hover-lift active-slam transition-all cursor-pointer", activeCheck: "p-6 rounded border-[3px] border-[var(--border)] bg-white shadow-block-lg flex flex-col md:flex-row gap-6 items-start", checkImgContainer: "w-full md:w-1/2 aspect-[3/4] rounded overflow-hidden border-[3px] border-[var(--border)] bg-[var(--bg)]", checkInfo: "w-full md:w-1/2 flex flex-col gap-6", checkTitle: "text-2xl font-bold uppercase", checkMeta: "font-mono text-sm", voteGrid: "flex gap-4 w-full", btnVoteUp: "flex-1 py-6 rounded font-bold text-xl border-[3px] border-[var(--border)] bg-[var(--green)] shadow-block hover-lift active-slam cursor-pointer transition-all", btnVoteDown: "flex-1 py-6 rounded font-bold text-xl border-[3px] border-[var(--border)] bg-[var(--red)] text-white shadow-block hover-lift active-slam cursor-pointer transition-all", archiveSection: "flex flex-col gap-6", archiveHeader: "text-sm uppercase tracking-widest font-bold border-b-[3px] border-[var(--border)] pb-2 text-[var(--muted)]", archiveGrid: "grid grid-cols-2 md:grid-cols-4 gap-4", archiveCard: "p-3 rounded border-[3px] border-[var(--border)] bg-white shadow-block flex flex-col gap-2 hover-lift transition-all cursor-pointer", archiveImg: "w-full aspect-square rounded border-[3px] border-[var(--border)] bg-[var(--bg)] object-cover mb-2", archiveVerdict: "text-center font-bold text-xs py-1 rounded border-[3px] border-[var(--border)] shadow-block-sm bg-[var(--yellow)]" } return ( <> {/* AMBIENT BACKGROUND DECORATIONS */}

{/* NAV */}

OUTFIT CHECK

{/* HERO */}

SQUAD VERDICT

Upload your fit. Declare destination. Get exactly 10 minutes of brutal honesty.

{/* UPLOAD FORM */}

1. SECURE IMAGE {photoUrl ? ( Preview

) : ( <> TAP TO BROWSE JPG, PNG ACCEPTED )} { const f = e.target.files?.[0]; if (f) { merge({ _files: { photo: f } }) setPhotoUrl(URL.createObjectURL(f)) } }} />

2. DESTINATION PROTOCOL merge({ destination: e.target.value })} />

{/* ACTIVE CHECK */} {activeChecks.map(check => { const limits = calculateVerdict(check._id) const timeSeconds = Math.max(0, Math.floor((600000 - (nowTick - check.createdAt)) / 1000)) const m = Math.floor(timeSeconds / 60) const s = timeSeconds % 60 return (

{check._files?.photo?.url ? ( Outfit

) : (

LOADING FILE...

)}

TARGET SCENARIO

{check.destination}

TIME REMAINING: {m}:{s < 10 ? '0':''}{s}

CURRENT TALLY: GO({limits.up}) - NO({limits.down})

CAST VOTE

) })} {/* ARCHIVE */}

DATABASE / PAST VERDICTS ({archiveChecks.length})

{archiveChecks.map(check => { const limits = calculateVerdict(check._id) const won = limits.up - limits.down const btnColor = won > 0 ? 'bg-[var(--green)]' : won < 0 ? 'bg-[var(--red)] text-white' : 'bg-[var(--yellow)]' const lbl = won > 0 ? 'GO' : won < 0 ? 'NO' : 'DRAW' return (

{check._files?.photo?.url ? ( Archive

) : (

)}

{check.destination}

{lbl} ({limits.up}-{limits.down})

) })}

) }

SQUAD VERDICT SQUAD VERDICT

{check.destination}

DATABASE / PAST VERDICTS ({archiveChecks.length})

SQUAD VERDICT

SQUAD VERDICTSQUAD VERDICT

DATABASE / PAST VERDICTS (0)

SQUAD VERDICT