$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","label",[164,65],"frontend","pulls","branches","forks","envVars",{"_172":26,"_174":26},"connections",{"_172":26,"_173":26},"count","unfilledCount","emptyCount",{"_33":209,"_13":164,"_63":155,"_43":-5,"_35":36,"_156":210,"_157":149,"_37":211,"_39":26,"_66":212,"_160":-5,"_67":24,"_162":-5,"_188":213,"_17":214},{"_33":201,"_13":202,"_63":203,"_43":155,"_35":36,"_156":204,"_157":149,"_37":205,"_39":159,"_66":21,"_160":206,"_67":24,"_162":-5,"_188":207,"_17":208},{"_33":154,"_13":65,"_63":64,"_43":155,"_35":36,"_156":73,"_157":149,"_37":198,"_39":159,"_66":21,"_160":161,"_67":24,"_162":-5,"_188":199,"_17":200},{"_33":191,"_13":192,"_63":193,"_43":155,"_35":36,"_156":118,"_157":149,"_37":194,"_39":159,"_66":21,"_160":195,"_67":24,"_162":-5,"_188":196,"_17":197},{"_33":180,"_13":181,"_63":182,"_43":-5,"_35":36,"_156":183,"_157":149,"_37":184,"_39":185,"_66":186,"_160":187,"_67":24,"_162":-5,"_188":189,"_17":190},"3210aec2-306f-11f1-bf55-42dde27851f2","main.ts","3c4de534-3066-11f1-8afc-42dde27851f2",8,["D",1775338956453],3,"http","import { Hono } from \"npm:hono@4\";\nimport { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\napp.onError((err) => Promise.reject(err));\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\nasync function getDb() {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n // Migrate: add new columns if they don't exist yet\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS wishlist_items (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n price REAL NOT NULL,\n store TEXT NOT NULL,\n store_color TEXT NOT NULL,\n link TEXT,\n note TEXT,\n status TEXT NOT NULL DEFAULT 'active',\n added_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n // Safe migrations for existing tables\n try { await sqlite.execute(\"ALTER TABLE wishlist_items ADD COLUMN link TEXT\"); } catch {}\n try { await sqlite.execute(\"ALTER TABLE wishlist_items ADD COLUMN note TEXT\"); } catch {}\n try { await sqlite.execute(\"ALTER TABLE wishlist_items ADD COLUMN status TEXT NOT NULL DEFAULT 'active'\"); } catch {}\n return sqlite;\n}\n\n// API: get all active wishlist items\napp.get(\"/api/items\", async (c) => {\n const sqlite = await getDb();\n\n const count = await sqlite.execute(\"SELECT COUNT(*) as cnt FROM wishlist_items WHERE status = 'active'\");\n if ((count.rows[0] as any).cnt === 0) {\n await sqlite.batch([\n { sql: \"INSERT INTO wishlist_items (name, price, store, store_color, link, note, added_at) VALUES (?, ?, ?, ?, ?, ?, ?)\", args: [\"Nike Air Max 90\", 130, \"Amazon\", \"#FF9900\", \"https://amazon.com\", \"Been eyeing these for months\", datetime(-3)] },\n { sql: \"INSERT INTO wishlist_items (name, price, store, store_color, link, note, added_at) VALUES (?, ?, ?, ?, ?, ?, ?)\", args: [\"Linen Throw Blanket\", 48, \"Pinterest\", \"#E60023\", null, \"For the living room refresh\", datetime(-7)] },\n { sql: \"INSERT INTO wishlist_items (name, price, store, store_color, link, note, added_at) VALUES (?, ?, ?, ?, ?, ?, ?)\", args: [\"Ergonomic Desk Chair\", 429, \"Amazon\", \"#FF9900\", \"https://amazon.com\", null, datetime(-12)] },\n { sql: \"INSERT INTO wishlist_items (name, price, store, store_color, link, note, added_at) VALUES (?, ?, ?, ?, ?, ?, ?)\", args: [\"Dyson Airwrap\", 599, \"Sephora\", \"#000000\", \"https://sephora.com\", \"Wait for a sale first\", datetime(-2)] },\n { sql: \"INSERT INTO wishlist_items (name, price, store, store_color, link, note, added_at) VALUES (?, ?, ?, ?, ?, ?, ?)\", args: [\"Monstera Plant\", 35, \"Pinterest\", \"#E60023\", null, null, datetime(-20)] },\n { sql: \"INSERT INTO wishlist_items (name, price, store, store_color, link, note, added_at) VALUES (?, ?, ?, ?, ?, ?, ?)\", args: [\"Sony WH-1000XM5\", 279, \"Best Buy\", \"#003087\", \"https://bestbuy.com\", \"Check if compatible with my setup\", datetime(-5)] },\n { sql: \"INSERT INTO wishlist_items (name, price, store, store_color, link, note, added_at) VALUES (?, ?, ?, ?, ?, ?, ?)\", args: [\"Ceramic Pour-Over Set\", 64, \"Pinterest\", \"#E60023\", null, null, datetime(-15)] },\n { sql: \"INSERT INTO wishlist_items (name, price, store, store_color, link, note, added_at) VALUES (?, ?, ?, ?, ?, ?, ?)\", args: [\"Vintage Leather Jacket\", 220, \"ASOS\", \"#2D2D2D\", \"https://asos.com\", \"Size medium, black only\", datetime(-9)] },\n ]);\n }\n\n const result = await sqlite.execute(\"SELECT * FROM wishlist_items WHERE status = 'active' ORDER BY added_at DESC\");\n return c.json(result.rows);\n});\n\n// API: get single item\napp.get(\"/api/items/:id\", async (c) => {\n const sqlite = await getDb();\n const id = c.req.param(\"id\");\n const result = await sqlite.execute({ sql: \"SELECT * FROM wishlist_items WHERE id = ?\", args: [id] });\n if (!result.rows[0]) return c.json({ error: \"Not found\" }, 404);\n return c.json(result.rows[0]);\n});\n\n// API: add item\napp.post(\"/api/items\", async (c) => {\n const sqlite = await getDb();\n const body = await c.req.json();\n const { name, price, store, store_color, link, note } = body;\n await sqlite.execute({\n sql: \"INSERT INTO wishlist_items (name, price, store, store_color, link, note, added_at) VALUES (?, ?, ?, ?, ?, ?, ?)\",\n args: [name, parseFloat(price), store, store_color || \"#6366f1\", link || null, note || null, new Date().toISOString()],\n });\n // Return updated total for confirmation message\n const totals = await sqlite.execute(\"SELECT COUNT(*) as cnt, SUM(price) as total FROM wishlist_items WHERE status = 'active'\");\n return c.json({ ok: true, ...(totals.rows[0] as any) });\n});\n\n// API: update item status (bought / removed)\napp.patch(\"/api/items/:id\", async (c) => {\n const sqlite = await getDb();\n const id = c.req.param(\"id\");\n const { status } = await c.req.json();\n await sqlite.execute({ sql: \"UPDATE wishlist_items SET status = ? WHERE id = ?\", args: [status, id] });\n return c.json({ ok: true });\n});\n\n// API: delete item\napp.delete(\"/api/items/:id\", async (c) => {\n const sqlite = await getDb();\n const id = c.req.param(\"id\");\n await sqlite.execute({ sql: \"DELETE FROM wishlist_items WHERE id = ?\", args: [id] });\n return c.json({ ok: true });\n});\n\napp.get(\"/\", (c) => serveFile(\"/frontend/index.html\", import.meta.url));\n\nfunction datetime(daysAgo: number): string {\n const d = new Date();\n d.setDate(d.getDate() + daysAgo);\n return d.toISOString();\n}\n\nexport default app.fetch;\n","children",[],[181],"7126481a-306f-11f1-9f5e-42dde27851f2","style.css","3f3f1fc2-3068-11f1-b0e9-42dde27851f2",["D",1775339062288],"/* ── Reset & Base ── */\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --bg: #0d0d0f;\n --surface: #18181b;\n --surface2: #222228;\n --border: #2e2e38;\n --accent: #a78bfa;\n --accent2: #818cf8;\n --text: #f4f4f5;\n --muted: #71717a;\n --danger: #f87171;\n --green: #4ade80;\n --radius: 16px;\n --fab-size: 60px;\n}\n\nhtml, body {\n background: var(--bg);\n color: var(--text);\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n min-height: 100vh;\n -webkit-font-smoothing: antialiased;\n}\n\n#app {\n max-width: 430px;\n margin: 0 auto;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n\n/* ── Header ── */\n.header {\n padding: 16px 20px 0;\n position: sticky;\n top: 0;\n background: var(--bg);\n z-index: 10;\n}\n\n.header-top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.logo {\n font-size: 15px;\n font-weight: 700;\n letter-spacing: -0.3px;\n color: var(--accent);\n}\n\n.source-link {\n font-size: 11px;\n color: var(--muted);\n text-decoration: none;\n opacity: 0.6;\n transition: opacity 0.2s;\n}\n.source-link:hover { opacity: 1; }\n\n/* ── Total Section ── */\n.total-section {\n padding: 28px 20px 20px;\n text-align: center;\n}\n\n.total-label {\n font-size: 13px;\n color: var(--muted);\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 6px;\n}\n\n.total-amount {\n font-size: 56px;\n font-weight: 800;\n letter-spacing: -3px;\n line-height: 1;\n background: linear-gradient(135deg, #a78bfa, #818cf8, #c4b5fd);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n margin-bottom: 6px;\n}\n\n.total-sub {\n font-size: 14px;\n color: var(--muted);\n margin-bottom: 14px;\n}\n\n.total-note {\n display: inline-block;\n font-size: 12px;\n color: var(--danger);\n background: rgba(248, 113, 113, 0.08);\n border: 1px solid rgba(248, 113, 113, 0.2);\n padding: 6px 14px;\n border-radius: 999px;\n}\n\n/* ── Filter Bar ── */\n.filter-bar {\n display: flex;\n gap: 8px;\n padding: 4px 20px 16px;\n overflow-x: auto;\n scrollbar-width: none;\n}\n.filter-bar::-webkit-scrollbar { display: none; }\n\n.filter-btn {\n flex-shrink: 0;\n background: var(--surface);\n border: 1px solid var(--border);\n color: var(--muted);\n font-size: 13px;\n font-weight: 500;\n padding: 7px 16px;\n border-radius: 999px;\n cursor: pointer;\n transition: all 0.18s;\n}\n.filter-btn:hover { border-color: var(--accent); color: var(--text); }\n.filter-btn.active {\n background: var(--accent);\n border-color: var(--accent);\n color: #0d0d0f;\n font-weight: 700;\n}\n\n/* ── Item List ── */\n.item-list {\n flex: 1;\n padding: 0 16px 120px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n/* ── Item Card ── */\n.item-card {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 16px;\n display: flex;\n align-items: center;\n gap: 14px;\n position: relative;\n transition: border-color 0.18s, transform 0.15s;\n animation: slideIn 0.25s ease both;\n}\n.item-card:hover {\n border-color: var(--border);\n transform: translateY(-1px);\n}\n\n@keyframes slideIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.store-icon {\n width: 42px;\n height: 42px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 15px;\n font-weight: 800;\n color: #fff;\n flex-shrink: 0;\n letter-spacing: -0.5px;\n}\n\n.item-info {\n flex: 1;\n min-width: 0;\n}\n\n.item-name {\n font-size: 15px;\n font-weight: 700;\n color: var(--text);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 3px;\n}\n\n.item-meta {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.item-store {\n font-size: 12px;\n color: var(--muted);\n}\n\n.item-days {\n font-size: 12px;\n color: var(--muted);\n background: var(--surface2);\n padding: 2px 8px;\n border-radius: 999px;\n}\n\n.item-price {\n font-size: 17px;\n font-weight: 800;\n color: var(--text);\n letter-spacing: -0.5px;\n}\n\n.item-delete {\n position: absolute;\n top: 8px;\n right: 10px;\n background: none;\n border: none;\n color: var(--border);\n font-size: 14px;\n cursor: pointer;\n padding: 4px 6px;\n border-radius: 6px;\n transition: color 0.15s, background 0.15s;\n line-height: 1;\n}\n.item-delete:hover { color: var(--danger); background: rgba(248,113,113,0.08); }\n\n/* ── Loading ── */\n.loading {\n display: flex;\n justify-content: center;\n padding: 48px;\n}\n.spinner {\n width: 28px;\n height: 28px;\n border: 2px solid var(--border);\n border-top-color: var(--accent);\n border-radius: 50%;\n animation: spin 0.7s linear infinite;\n}\n@keyframes spin { to { transform: rotate(360deg); } }\n\n.empty-state {\n text-align: center;\n padding: 64px 20px;\n color: var(--muted);\n}\n.empty-icon { font-size: 48px; margin-bottom: 12px; }\n.empty-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 6px; }\n\n/* ── FAB ── */\n.fab {\n position: fixed;\n bottom: calc(72px + 20px);\n right: calc(50% - 215px + 20px);\n width: var(--fab-size);\n height: var(--fab-size);\n border-radius: 50%;\n background: var(--accent);\n color: #0d0d0f;\n font-size: 28px;\n font-weight: 300;\n border: none;\n cursor: pointer;\n box-shadow: 0 4px 24px rgba(167,139,250,0.4);\n transition: transform 0.15s, box-shadow 0.15s;\n z-index: 50;\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n}\n.fab:hover { transform: scale(1.08); box-shadow: 0 6px 32px rgba(167,139,250,0.55); }\n.fab:active { transform: scale(0.96); }\n\n@media (max-width: 430px) {\n .fab { right: 20px; }\n}\n\n/* ── Bottom Nav ── */\n.bottom-nav {\n position: fixed;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 100%;\n max-width: 430px;\n background: rgba(18,18,21,0.92);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border-top: 1px solid var(--border);\n display: flex;\n z-index: 40;\n}\n\n.nav-btn {\n flex: 1;\n background: none;\n border: none;\n color: var(--muted);\n font-size: 11px;\n font-weight: 600;\n padding: 10px 0 14px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 3px;\n transition: color 0.15s;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n.nav-btn.active { color: var(--accent); }\n.nav-icon { font-size: 20px; }\n.anti-btn:hover { color: var(--danger); }\n\n/* ── Modal ── */\n.modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.7);\n backdrop-filter: blur(4px);\n z-index: 100;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s;\n}\n.modal-overlay.open {\n opacity: 1;\n pointer-events: auto;\n}\n\n.modal {\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: 24px 24px 0 0;\n width: 100%;\n max-width: 430px;\n padding: 24px 24px 40px;\n transform: translateY(24px);\n transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);\n}\n.modal-overlay.open .modal { transform: translateY(0); }\n\n.modal-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 24px;\n}\n.modal-header h2 { font-size: 20px; font-weight: 800; }\n.modal-close {\n background: var(--surface2);\n border: none;\n color: var(--muted);\n width: 32px;\n height: 32px;\n border-radius: 50%;\n font-size: 14px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: color 0.15s;\n}\n.modal-close:hover { color: var(--text); }\n\n/* ── Form ── */\n.form-group {\n margin-bottom: 18px;\n}\n.form-group label {\n display: block;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.8px;\n color: var(--muted);\n margin-bottom: 8px;\n}\n.form-group input {\n width: 100%;\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: 12px;\n color: var(--text);\n font-size: 15px;\n padding: 13px 14px;\n outline: none;\n transition: border-color 0.15s;\n}\n.form-group input:focus { border-color: var(--accent); }\n.form-group input::placeholder { color: var(--muted); }\n\n.color-presets {\n display: flex;\n gap: 10px;\n}\n.color-dot {\n width: 34px;\n height: 34px;\n border-radius: 50%;\n border: 3px solid transparent;\n cursor: pointer;\n transition: border-color 0.15s, transform 0.15s;\n}\n.color-dot:hover { transform: scale(1.1); }\n.color-dot.selected { border-color: #fff; }\n\n.submit-btn {\n width: 100%;\n background: var(--accent);\n color: #0d0d0f;\n border: none;\n border-radius: 14px;\n font-size: 16px;\n font-weight: 800;\n padding: 16px;\n cursor: pointer;\n margin-top: 6px;\n transition: opacity 0.15s, transform 0.12s;\n}\n.submit-btn:hover { opacity: 0.9; }\n.submit-btn:active { transform: scale(0.98); }\n\n/* ── Anti-wishlist ── */\n.anti-content { padding: 4px 0; }\n.anti-desc { font-size: 14px; color: var(--muted); margin-bottom: 16px; }\n.anti-questions {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 14px;\n margin-bottom: 24px;\n}\n.anti-questions li {\n font-size: 15px;\n color: var(--text);\n padding: 14px 16px;\n background: var(--surface2);\n border-radius: 12px;\n border-left: 3px solid var(--accent);\n}\n.anti-rule {\n background: rgba(167,139,250,0.08);\n border: 1px solid rgba(167,139,250,0.2);\n border-radius: 12px;\n padding: 16px;\n font-size: 14px;\n line-height: 1.5;\n color: var(--text);\n}\n\n/* ── Form enhancements ── */\n.req { color: var(--accent); }\n.opt { color: var(--muted); font-weight: 400; font-size: 11px; text-transform: none; letter-spacing: 0; }\n\n.form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n}\n\n.form-group textarea {\n width: 100%;\n background: var(--surface2);\n border: 1px solid var(--border);\n border-radius: 12px;\n color: var(--text);\n font-size: 15px;\n font-family: inherit;\n padding: 13px 14px;\n outline: none;\n resize: none;\n transition: border-color 0.15s;\n line-height: 1.5;\n}\n.form-group textarea:focus { border-color: var(--accent); }\n.form-group textarea::placeholder { color: var(--muted); }\n\n/* ── Add confirmation ── */\n.add-confirm {\n display: none;\n text-align: center;\n padding: 16px 0 8px;\n}\n.confirm-icon {\n width: 56px;\n height: 56px;\n background: rgba(74,222,128,0.12);\n border: 2px solid var(--green);\n border-radius: 50%;\n font-size: 22px;\n color: var(--green);\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 16px;\n}\n.confirm-msg {\n font-size: 18px;\n font-weight: 800;\n color: var(--text);\n margin-bottom: 6px;\n}\n.confirm-sub {\n font-size: 14px;\n color: var(--muted);\n margin-bottom: 24px;\n}\n\n/* ── Detail overlay (full-screen slide-up) ── */\n.detail-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.6);\n backdrop-filter: blur(4px);\n z-index: 200;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s;\n}\n.detail-overlay.open {\n opacity: 1;\n pointer-events: auto;\n}\n\n.detail-panel {\n background: var(--bg);\n border: 1px solid var(--border);\n border-radius: 24px 24px 0 0;\n width: 100%;\n max-width: 430px;\n max-height: 92vh;\n overflow-y: auto;\n padding: 0 0 40px;\n transform: translateY(32px);\n transition: transform 0.28s cubic-bezier(0.34,1.4,0.64,1);\n scrollbar-width: none;\n}\n.detail-panel::-webkit-scrollbar { display: none; }\n.detail-overlay.open .detail-panel { transform: translateY(0); }\n\n/* Detail header bar */\n.detail-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 20px 0;\n position: sticky;\n top: 0;\n background: var(--bg);\n z-index: 2;\n padding-bottom: 12px;\n border-bottom: 1px solid var(--border);\n}\n.detail-back {\n background: var(--surface);\n border: 1px solid var(--border);\n color: var(--text);\n font-size: 14px;\n font-weight: 600;\n padding: 8px 14px;\n border-radius: 999px;\n cursor: pointer;\n transition: border-color 0.15s;\n}\n.detail-back:hover { border-color: var(--accent); }\n\n.detail-store-badge {\n font-size: 12px;\n font-weight: 700;\n padding: 5px 12px;\n border-radius: 999px;\n letter-spacing: 0.3px;\n}\n\n/* Detail hero */\n.detail-hero {\n display: flex;\n gap: 16px;\n padding: 20px 20px 16px;\n align-items: flex-start;\n}\n.detail-icon {\n width: 56px;\n height: 56px;\n border-radius: 16px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n font-weight: 800;\n color: #fff;\n letter-spacing: -0.5px;\n}\n.detail-info { flex: 1; min-width: 0; }\n.detail-name {\n font-size: 20px;\n font-weight: 800;\n line-height: 1.25;\n margin-bottom: 6px;\n color: var(--text);\n}\n.detail-price {\n font-size: 26px;\n font-weight: 800;\n letter-spacing: -1px;\n background: linear-gradient(135deg, #a78bfa, #818cf8);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n margin-bottom: 8px;\n}\n.detail-meta-row {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n}\n.detail-store {\n font-size: 13px;\n color: var(--muted);\n}\n.detail-days {\n font-size: 12px;\n color: var(--muted);\n background: var(--surface2);\n padding: 2px 9px;\n border-radius: 999px;\n}\n.detail-link {\n display: inline-block;\n font-size: 13px;\n font-weight: 600;\n color: var(--accent);\n text-decoration: none;\n}\n.detail-link:hover { text-decoration: underline; }\n\n/* Sections */\n.detail-section {\n margin: 0 16px 16px;\n background: var(--surface);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 16px;\n}\n.detail-section-label {\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--muted);\n margin-bottom: 14px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n.ai-badge {\n background: linear-gradient(135deg, #a78bfa, #818cf8);\n color: #0d0d0f;\n font-size: 10px;\n font-weight: 800;\n padding: 2px 7px;\n border-radius: 999px;\n}\n\n/* AI rows */\n.ai-notes { display: flex; flex-direction: column; gap: 10px; }\n.ai-row {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n font-size: 14px;\n color: var(--text);\n line-height: 1.4;\n}\n.ai-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }\n.ai-verdict {\n margin-top: 6px;\n font-size: 13px;\n font-style: italic;\n color: var(--accent);\n padding: 10px 12px;\n background: rgba(167,139,250,0.07);\n border-radius: 10px;\n border-left: 3px solid var(--accent);\n}\n\n/* User note */\n.detail-note {\n font-size: 14px;\n color: var(--text);\n line-height: 1.6;\n}\n\n/* Detail actions */\n.detail-actions {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n padding: 4px 16px 0;\n}\n.action-btn {\n padding: 16px;\n border-radius: 14px;\n border: none;\n font-size: 15px;\n font-weight: 700;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n transition: opacity 0.15s, transform 0.12s;\n}\n.action-btn:active { transform: scale(0.97); }\n.action-remove {\n background: rgba(248,113,113,0.1);\n color: var(--danger);\n border: 1px solid rgba(248,113,113,0.25);\n}\n.action-remove:hover { background: rgba(248,113,113,0.18); }\n.action-bought {\n background: rgba(74,222,128,0.1);\n color: var(--green);\n border: 1px solid rgba(74,222,128,0.25);\n}\n.action-bought:hover { background: rgba(74,222,128,0.18); }\n.action-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n\n/* Make item cards feel tappable */\n.item-card { cursor: pointer; }\n.item-card:active { transform: scale(0.98); }\n",[],[164,192],["D",1775338988000],[],[164,65],"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",[],[164,202],"19e6d652-3068-11f1-b91b-42dde27851f2",4,["D",1775335909442],"directory",[176,177,178],[164],["D",1775335108150],["D",1789511441255],{"_11":12,"_131":70},{"_11":12,"_127":-5,"_69":70,"_30":68,"_128":129,"_130":24},{"_39":118,"_13":16,"_33":36,"_119":81,"_120":-5,"_121":-5,"_122":-5,"_123":-5,"_124":-5,"_125":14,"_126":12},"ctx",{"_53":-5,"_151":253,"_254":255,"_256":257,"_258":24,"_259":24,"_260":24,"_261":149,"_262":-5,"_263":-7,"_264":-7,"_265":26,"_266":24,"_267":24,"_268":-5,"_269":24,"_270":24,"_271":24,"_272":-5},"ENV",{"_224":225,"_226":227,"_228":16,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252},"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

History · index.html