[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","67f533df60ec8191aa6876b222c92bb9","versionInt","title","Canvas Inbox Zero","type","code/react","content","import { useEffect, useState, useRef } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Inbox, Trash2, Star, Folder, Trophy } from \"lucide-react\";\n\nconst BASE_TTL = 10;\n\nconst initialEmails = [\n { id: 1, subject: \"Meeting at 3PM\", type: \"urgent\" },\n { id: 2, subject: \"50% Off Sale!\", type: \"spam\" },\n { id: 3, subject: \"Project Update\", type: \"work\" },\n { id: 4, subject: \"Invitation to Event\", type: \"personal\" },\n { id: 5, subject: \"You've won a prize!\", type: \"spam\" },\n].map((email, index) => ({ ...email, ttl: BASE_TTL + index * 2 }));\n\nfunction getRandomEmail(id, queueLength = 0) {\n const subjects = [\n { subject: \"New Task Assigned\", type: \"work\" },\n { subject: \"Dinner Plans?\", type: \"personal\" },\n { subject: \"You’ve Been Selected!\", type: \"spam\" },\n { subject: \"Meeting Follow-Up\", type: \"work\" },\n { subject: \"Get Rich Quick Scheme\", type: \"spam\" },\n { subject: \"Birthday Invitation\", type: \"personal\" },\n { subject: \"Weekly Newsletter\", type: \"spam\" },\n { subject: \"Client Feedback\", type: \"work\" },\n { subject: \"Exclusive Offer\", type: \"spam\" },\n { subject: \"Critical System Failure\", type: \"urgent\" },\n { subject: \"Verify Account Activity\", type: \"urgent\" },\n { subject: \"Event RSVP Reminder\", type: \"personal\" },\n { subject: \"Personal Photo Album\", type: \"personal\" },\n { subject: \"Report Misconduct\", type: \"work\" },\n ];\n const random = subjects[Math.floor(Math.random() * subjects.length)];\n return {\n id,\n subject: random.subject,\n type: random.type,\n ttl: BASE_TTL + queueLength * 2,\n };\n}\n\nexport default function CanvasInboxZero() {\n const [inbox, setInbox] = useState(initialEmails);\n const [spam, setSpam] = useState([]);\n const [important, setImportant] = useState([]);\n const [folders, setFolders] = useState({ work: [], personal: [] });\n const [score, setScore] = useState(0);\n const [emailId, setEmailId] = useState(6);\n const [timer, setTimer] = useState(30);\n const [gameOver, setGameOver] = useState(false);\n const timeoutRef = useRef(null);\n\n useEffect(() => {\n if (timer > 0) {\n const interval = setInterval(() => setTimer((t) => t - 1), 1000);\n return () => clearInterval(interval);\n } else {\n setGameOver(true);\n }\n }, [timer]);\n\n const scheduleNextEmail = () => {\n const delay = Math.floor(Math.random() * 2000) + 3000;\n timeoutRef.current = setTimeout(() => {\n const newEmail = getRandomEmail(emailId, inbox.length);\n setInbox((prev) => [...prev, newEmail]);\n setEmailId((id) => id + 1);\n }, delay);\n };\n\n useEffect(() => {\n if (!gameOver) {\n scheduleNextEmail();\n return () => clearTimeout(timeoutRef.current);\n }\n }, [emailId, gameOver]);\n\n useEffect(() => {\n if (!gameOver) {\n const interval = setInterval(() => {\n setInbox((prev) => {\n const updated = prev.map((email, i) => ({\n ...email,\n ttl: email.ttl - 1,\n }));\n const expired = updated.filter((email) => email.ttl <= 0);\n if (expired.length > 0) {\n setScore((prevScore) => Math.max(prevScore - expired.length * 5, 0));\n }\n const filtered = updated.filter((email) => email.ttl > 0);\n if (prev.length > 0 && filtered.length === 0) {\n const newEmail = getRandomEmail(emailId);\n setEmailId((id) => id + 1);\n return [newEmail];\n }\n return filtered;\n });\n }, 1000);\n return () => clearInterval(interval);\n }\n }, [gameOver, emailId]);\n\n const handleAction = (email, action) => {\n const newInbox = inbox.filter((e) => e.id !== email.id);\n setInbox(() => {\n if (newInbox.length === 0) {\n const newEmail = getRandomEmail(emailId);\n setEmailId((id) => id + 1);\n return [newEmail];\n }\n return newInbox;\n });\n setScore((prev) => prev + 10);\n if (action === \"spam\") setSpam([...spam, email]);\n if (action === \"important\") setImportant([...important, email]);\n if (action === \"work\") setFolders({ ...folders, work: [...folders.work, email] });\n if (action === \"personal\") setFolders({ ...folders, personal: [...folders.personal, email] });\n };\n\n return (\n

Inbox Zero

\n ⏱ Time Left: {timer}s\n ⭐ Score: {score}\n

\n {gameOver ? (\n

\n \n

Time's Up!

Final Score: {score}

\n ) : (\n

\n {inbox.map((email) => (\n \n \n

{email.subject}

⏳ {email.ttl}s left

\n \n \n \n \n

\n \n \n ))}\n

\n )}\n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","17181423844425623434","traceTime",1776440064233]