$0

across 0 items

⚠️ that's real money you haven't spent yet

\n\n \n

\n \n \n \n \n

\n\n \n

\n\n \n \n\n \n \n

\n\n \n \n\n \n

\n \n

\n\n \n

\n \n \n

\n View original →\n

\n\n \n

\n ✦ AI Quick take\n

\n ⭐\n \n

\n 🧵\n \n

\n 💰\n \n

\n\n \n

Your note

\n\n \n

\n \n \n

\n\n \n \n\n \n\n\n",[],[136,169],"5e7b6ace-306f-11f1-8598-42dde27851f2","app.js","4d050f86-3068-11f1-94a6-42dde27851f2",10,["D",1775339030961],"// ── State ──\nlet allItems = [];\nlet activeFilter = \"all\";\nlet selectedColor = \"#6366f1\";\nlet activeItemId = null;\n\n// ── DOM refs ──\nconst itemList = document.getElementById(\"itemList\");\nconst totalAmount = document.getElementById(\"totalAmount\");\nconst totalSub = document.getElementById(\"totalSub\");\nconst fabBtn = document.getElementById(\"fabBtn\");\nconst modalOverlay = document.getElementById(\"modalOverlay\");\nconst modalClose = document.getElementById(\"modalClose\");\nconst antiOverlay = document.getElementById(\"antiOverlay\");\nconst antiClose = document.getElementById(\"antiClose\");\nconst antiBtn = document.getElementById(\"antiWishlistBtn\");\nconst addForm = document.getElementById(\"addForm\");\nconst addConfirm = document.getElementById(\"addConfirm\");\nconst confirmMsg = document.getElementById(\"confirmMsg\");\nconst confirmSub = document.getElementById(\"confirmSub\");\nconst confirmDone = document.getElementById(\"confirmDone\");\nconst filterBtns = document.querySelectorAll(\".filter-btn\");\nconst detailOverlay = document.getElementById(\"detailOverlay\");\nconst detailBack = document.getElementById(\"detailBack\");\nconst actionRemove = document.getElementById(\"actionRemove\");\nconst actionBought = document.getElementById(\"actionBought\");\n\n// ── Init ──\nloadItems();\n\n// ── Load items from API ──\nasync function loadItems() {\n try {\n const res = await fetch(\"/api/items\");\n allItems = await res.json();\n render();\n } catch (e) {\n itemList.innerHTML = `

⚠️

Failed to load

`;\n }\n}\n\n// ── Render home list ──\nfunction render() {\n const filtered = activeFilter === \"all\"\n ? allItems\n : activeFilter === \"other\"\n ? allItems.filter(i => ![\"Amazon\", \"Pinterest\"].includes(i.store))\n : allItems.filter(i => i.store === activeFilter);\n\n const total = allItems.reduce((sum, i) => sum + Number(i.price), 0);\n totalAmount.textContent = formatMoney(total);\n totalSub.textContent = `across ${allItems.length} item${allItems.length !== 1 ? \"s\" : \"\"}`;\n\n if (filtered.length === 0) {\n itemList.innerHTML = `\n

🗂️

No items here

Tap + to add something

`;\n return;\n }\n\n itemList.innerHTML = filtered.map((item, idx) => `\n

${storeInitial(item.store)}

${escHtml(item.name)}

\n ${escHtml(item.store)}\n ${daysAgo(item.added_at)}\n

\n ${formatMoney(item.price)}\n \n

\n `).join(\"\");\n\n // Tap card → open detail\n document.querySelectorAll(\".item-card\").forEach(card => {\n card.addEventListener(\"click\", (e) => {\n if (e.target.closest(\".item-delete\")) return; // don't open detail when deleting\n openDetail(card.dataset.id);\n });\n });\n\n // Delete button\n document.querySelectorAll(\".item-delete\").forEach(btn => {\n btn.addEventListener(\"click\", async (e) => {\n e.stopPropagation();\n const id = btn.dataset.id;\n btn.closest(\".item-card\").style.opacity = \"0.35\";\n await fetch(`/api/items/${id}`, { method: \"DELETE\" });\n allItems = allItems.filter(i => String(i.id) !== String(id));\n render();\n });\n });\n}\n\n// ── Filter buttons ──\nfilterBtns.forEach(btn => {\n btn.addEventListener(\"click\", () => {\n filterBtns.forEach(b => b.classList.remove(\"active\"));\n btn.classList.add(\"active\");\n activeFilter = btn.dataset.filter;\n render();\n });\n});\n\n// ── FAB / Add Modal ──\nfabBtn.addEventListener(\"click\", () => {\n addForm.style.display = \"\";\n addConfirm.style.display = \"none\";\n openModal(modalOverlay);\n});\nmodalClose.addEventListener(\"click\", () => { closeModal(modalOverlay); resetAddForm(); });\nmodalOverlay.addEventListener(\"click\", e => { if (e.target === modalOverlay) { closeModal(modalOverlay); resetAddForm(); } });\nconfirmDone.addEventListener(\"click\", () => { closeModal(modalOverlay); resetAddForm(); });\n\n// ── Anti-wishlist Modal ──\nantiBtn.addEventListener(\"click\", () => openModal(antiOverlay));\nantiClose.addEventListener(\"click\", () => closeModal(antiOverlay));\nantiOverlay.addEventListener(\"click\", e => { if (e.target === antiOverlay) closeModal(antiOverlay); });\n\nfunction openModal(el) { el.classList.add(\"open\"); }\nfunction closeModal(el) { el.classList.remove(\"open\"); }\n\nfunction resetAddForm() {\n addForm.reset();\n addForm.style.display = \"\";\n addConfirm.style.display = \"none\";\n selectedColor = \"#6366f1\";\n document.querySelectorAll(\".color-dot\").forEach(d => d.classList.remove(\"selected\"));\n const def = document.querySelector('.color-dot[data-color=\"#6366f1\"]');\n if (def) def.classList.add(\"selected\");\n}\n\n// ── Color picker ──\ndocument.querySelectorAll(\".color-dot\").forEach(dot => {\n dot.addEventListener(\"click\", () => {\n document.querySelectorAll(\".color-dot\").forEach(d => d.classList.remove(\"selected\"));\n dot.classList.add(\"selected\");\n selectedColor = dot.dataset.color;\n });\n});\n\n// ── Add form submit ──\naddForm.addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n const name = document.getElementById(\"inputName\").value.trim();\n const price = document.getElementById(\"inputPrice\").value;\n const store = document.getElementById(\"inputStore\").value.trim();\n const link = document.getElementById(\"inputLink\").value.trim();\n const note = document.getElementById(\"inputNote\").value.trim();\n if (!name || !price || !store) return;\n\n const btn = document.getElementById(\"addSubmitBtn\");\n btn.textContent = \"Adding…\";\n btn.disabled = true;\n\n try {\n const res = await fetch(\"/api/items\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name, price, store, store_color: selectedColor, link, note }),\n });\n const data = await res.json();\n\n // Show confirmation\n addForm.style.display = \"none\";\n confirmMsg.textContent = `\"${name}\" added.`;\n confirmSub.textContent = `Your wishlist: ${formatMoney(data.total)} across ${data.cnt} item${data.cnt !== 1 ? \"s\" : \"\"}`;\n addConfirm.style.display = \"\";\n\n await loadItems();\n } finally {\n btn.textContent = \"Add to wishlist\";\n btn.disabled = false;\n }\n});\n\n// ── Item Detail ──\nasync function openDetail(id) {\n activeItemId = id;\n const item = allItems.find(i => String(i.id) === String(id));\n if (!item) return;\n\n // Populate header\n document.getElementById(\"detailIcon\").style.background = item.store_color;\n document.getElementById(\"detailIcon\").textContent = storeInitial(item.store);\n document.getElementById(\"detailStoreBadge\").textContent = item.store;\n document.getElementById(\"detailStoreBadge\").style.background = item.store_color + \"22\";\n document.getElementById(\"detailStoreBadge\").style.color = item.store_color;\n document.getElementById(\"detailName\").textContent = item.name;\n document.getElementById(\"detailPrice\").textContent = formatMoney(item.price);\n document.getElementById(\"detailStore\").textContent = item.store;\n document.getElementById(\"detailDays\").textContent = daysAgo(item.added_at);\n\n // Link\n const linkEl = document.getElementById(\"detailLink\");\n if (item.link) {\n linkEl.href = item.link;\n linkEl.style.display = \"\";\n } else {\n linkEl.style.display = \"none\";\n }\n\n // Mock AI notes (3 variations based on item id)\n const notes = mockAiNotes(item);\n document.getElementById(\"aiRating\").innerHTML = `${notes.rating} (${notes.reviewCount} reviews)`;\n document.getElementById(\"aiQuality\").textContent = notes.quality;\n document.getElementById(\"aiPrice\").textContent = notes.priceContext;\n document.getElementById(\"aiVerdict\").textContent = `\"${notes.verdict}\"`;\n\n // User note\n const noteSection = document.getElementById(\"noteSection\");\n const noteEl = document.getElementById(\"detailNote\");\n if (item.note) {\n noteEl.textContent = item.note;\n noteSection.style.display = \"\";\n } else {\n noteSection.style.display = \"none\";\n }\n\n // Open panel\n detailOverlay.classList.add(\"open\");\n}\n\ndetailBack.addEventListener(\"click\", () => {\n detailOverlay.classList.remove(\"open\");\n activeItemId = null;\n});\n\ndetailOverlay.addEventListener(\"click\", (e) => {\n if (e.target === detailOverlay) {\n detailOverlay.classList.remove(\"open\");\n activeItemId = null;\n }\n});\n\n// Remove → move to anti-wishlist status\nactionRemove.addEventListener(\"click\", async () => {\n if (!activeItemId) return;\n actionRemove.disabled = true;\n actionRemove.textContent = \"Removing…\";\n await fetch(`/api/items/${activeItemId}`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ status: \"removed\" }),\n });\n allItems = allItems.filter(i => String(i.id) !== String(activeItemId));\n detailOverlay.classList.remove(\"open\");\n activeItemId = null;\n actionRemove.disabled = false;\n actionRemove.innerHTML = \"🗑️ Remove\";\n render();\n});\n\n// Bought it → log as purchased\nactionBought.addEventListener(\"click\", async () => {\n if (!activeItemId) return;\n actionBought.disabled = true;\n actionBought.textContent = \"Marking…\";\n await fetch(`/api/items/${activeItemId}`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ status: \"bought\" }),\n });\n allItems = allItems.filter(i => String(i.id) !== String(activeItemId));\n detailOverlay.classList.remove(\"open\");\n activeItemId = null;\n actionBought.disabled = false;\n actionBought.innerHTML = \"✓ Bought it\";\n render();\n});\n\n// ── Mock AI Notes (3 variations) ──\nfunction mockAiNotes(item) {\n const sets = [\n {\n rating: \"★ 4.5\",\n reviewCount: \"1,203\",\n quality: \"High build quality, durable materials noted across reviews\",\n priceContext: `Similar items range $${Math.round(item.price * 0.7)}–$${Math.round(item.price * 1.4)}`,\n verdict: \"Reviewers say it's worth every penny\",\n },\n {\n rating: \"★ 4.2\",\n reviewCount: \"847\",\n quality: \"Solid construction, a few fit/sizing complaints\",\n priceContext: `Fair price — average for this category is $${Math.round(item.price * 1.1)}`,\n verdict: \"Most buyers would purchase again\",\n },\n {\n rating: \"★ 3.8\",\n reviewCount: \"412\",\n quality: \"Mixed reviews on longevity, looks better in person\",\n priceContext: `On the higher end — comparable options start at $${Math.round(item.price * 0.6)}`,\n verdict: \"Good if you catch it on sale\",\n },\n ];\n return sets[Number(item.id) % 3];\n}\n\n// ── Helpers ──\nfunction formatMoney(val) {\n const n = Number(val);\n return \"$\" + n.toLocaleString(\"en-US\", { minimumFractionDigits: 0, maximumFractionDigits: 0 });\n}\n\nfunction daysAgo(dateStr) {\n const diff = Date.now() - new Date(dateStr).getTime();\n const days = Math.floor(diff / 86400000);\n if (days === 0) return \"today\";\n if (days === 1) return \"1 day ago\";\n return `${days} days ago`;\n}\n\nfunction storeInitial(store) {\n return store.slice(0, 2).toUpperCase();\n}\n\nfunction escHtml(str) {\n return String(str).replace(/&/g,\"&\").replace(//g,\">\").replace(/\"/g,\""\");\n}\n",[],[136,177],["D",1775335909442],[153,154,155],[136],["D",1775335108150],["D",1789511441255],{"_11":12,"_89":85},{"_11":12,"_83":-5,"_84":85,"_45":46,"_86":87,"_88":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_78":-5,"_79":-5,"_80":-5,"_81":14,"_82":12},"ctx",{"_71":-5,"_112":225,"_226":227,"_228":229,"_230":38,"_231":38,"_232":38,"_233":110,"_234":-5,"_235":-7,"_236":-7,"_237":52,"_238":38,"_239":38,"_240":-5,"_241":38,"_242":38,"_243":38,"_244":-5},"ENV",{"_196":197,"_198":199,"_200":26,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

$0

Add to wishlist

🔥 Anti-Wishlist

Branches1

Branches
1