Val Collections • Dashboard

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_195":196,"_197":198},"routes/_app.x.$handle.$name",{"_96":95,"_31":43,"_104":86,"_26":51,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":121,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":-5,"_55":24,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":24},"version",24,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":33,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","client.js","latestPath","fileId","b01e7444-6840-11f1-9eb3-1607ee4eb77e","name","fileType","script","content","// client.js - React client app for Val Collections dashboard\n// Served as static JS from the val. Uses React UMD globals.\n\nconst { useState, useEffect } = React;\n\nfunction App() {\n const [vals, setVals] = useState([]);\n const [collections, setCollections] = useState([]);\n const [activeCollectionId, setActiveCollectionId] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n const [error, setError] = useState(null);\n const [newCollectionName, setNewCollectionName] = useState('');\n const [isCreating, setIsCreating] = useState(false);\n const [pending, setPending] = useState(new Set());\n\n async function loadData() {\n setIsLoading(true);\n setError(null);\n try {\n const [valsRes, colsRes] = await Promise.all([\n fetch('/api/vals'),\n fetch('/api/collections')\n ]);\n if (!valsRes.ok || !colsRes.ok) throw new Error('Failed to load data');\n const valsData = await valsRes.json();\n const colsData = await colsRes.json();\n setVals(valsData.vals || []);\n setCollections(colsData.collections || []);\n } catch (e) {\n setError(e.message || 'Failed to load your vals. Check /debug for raw data.');\n } finally {\n setIsLoading(false);\n }\n }\n\n useEffect(() => {\n loadData();\n }, []);\n\n const activeCollection = collections.find(c => c.id === activeCollectionId) || null;\n\n const filteredVals = activeCollectionId\n ? vals.filter(v => (v.collectionIds || []).includes(activeCollectionId))\n : vals;\n\n const valsToAdd = activeCollectionId\n ? vals.filter(v => !(v.collectionIds || []).includes(activeCollectionId))\n : [];\n\n async function createCollection(e) {\n e.preventDefault();\n if (!newCollectionName.trim()) return;\n setIsCreating(true);\n try {\n const res = await fetch('/api/collections', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ name: newCollectionName.trim() })\n });\n if (!res.ok) throw new Error('Create failed');\n const created = await res.json();\n setNewCollectionName('');\n // Optimistic add\n setCollections(prev => [...prev, { ...created, count: 0 }]);\n setActiveCollectionId(created.id);\n } catch (e) {\n alert('Failed to create collection: ' + e.message);\n } finally {\n setIsCreating(false);\n }\n }\n\n async function addToCollection(valId, collectionId) {\n const key = `${valId}-${collectionId}-add`;\n if (pending.has(key)) return;\n setPending(p => new Set(p).add(key));\n\n // Optimistic\n const prevVals = vals;\n const prevCollections = collections;\n setVals(prev => prev.map(v => {\n if (v.id === valId) {\n const newCols = [...(v.collectionIds || [])];\n if (!newCols.includes(collectionId)) newCols.push(collectionId);\n return { ...v, collectionIds: newCols };\n }\n return v;\n }));\n setCollections(prev => prev.map(c => {\n if (c.id === collectionId) {\n return { ...c, count: (c.count || 0) + 1 };\n }\n return c;\n }));\n\n try {\n const res = await fetch('/api/val-collections', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ valId, collectionId })\n });\n if (!res.ok) throw new Error('Add failed');\n // Optimistic success, no full refetch\n } catch (e) {\n setVals(prevVals);\n setCollections(prevCollections);\n alert('Failed to add: ' + e.message);\n } finally {\n setPending(p => {\n const next = new Set(p);\n next.delete(key);\n return next;\n });\n }\n }\n\n async function removeFromCollection(valId, collectionId) {\n const key = `${valId}-${collectionId}-remove`;\n if (pending.has(key)) return;\n setPending(p => new Set(p).add(key));\n\n // Optimistic\n const prevVals = vals;\n const prevCollections = collections;\n setVals(prev => prev.map(v => {\n if (v.id === valId) {\n return { ...v, collectionIds: (v.collectionIds || []).filter(id => id !== collectionId) };\n }\n return v;\n }));\n setCollections(prev => prev.map(c => {\n if (c.id === collectionId) {\n return { ...c, count: Math.max(0, (c.count || 0) - 1) };\n }\n return c;\n }));\n\n try {\n const res = await fetch('/api/val-collections', {\n method: 'DELETE',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ valId, collectionId })\n });\n if (!res.ok) throw new Error('Remove failed');\n } catch (e) {\n setVals(prevVals);\n setCollections(prevCollections);\n alert('Failed to remove: ' + e.message);\n } finally {\n setPending(p => {\n const next = new Set(p);\n next.delete(key);\n return next;\n });\n }\n }\n\n function selectCollection(id) {\n setActiveCollectionId(id === activeCollectionId ? null : id);\n }\n\n if (isLoading) {\n return React.createElement('div', { className: 'p-8 text-center text-zinc-500' }, 'Loading your vals...');\n }\n\n if (error) {\n return React.createElement('div', { className: 'p-8' }, \n React.createElement('div', { className: 'bg-red-100 text-red-800 p-4 rounded' }, error)\n );\n }\n\n const sidebarItems = [\n React.createElement('div', {\n key: 'all',\n onClick: () => selectCollection(null),\n className: 'nav-item ' + (!activeCollectionId ? 'active' : '')\n }, \n React.createElement('span', null, 'All vals'),\n React.createElement('span', { className: 'count' }, vals.length)\n ),\n ...collections.map(col => \n React.createElement('div', {\n key: col.id,\n onClick: () => selectCollection(col.id),\n className: 'nav-item ' + (activeCollectionId === col.id ? 'active' : '')\n }, \n React.createElement('span', null, col.name),\n React.createElement('span', { className: 'count' }, col.count || 0)\n )\n )\n ];\n\n const mainTitle = activeCollection ? activeCollection.name : 'All vals';\n\n const renderCard = (v) => {\n const isPublic = v.vis === 'Public';\n const badge = React.createElement('span', {\n className: isPublic \n ? 'inline-flex items-center justify-center font-semibold text-[11px] h-5 min-w-[56px] rounded-full px-2 text-emerald-800 bg-emerald-100 saturate-50'\n : 'inline-flex items-center justify-center font-semibold text-[11px] h-5 min-w-[56px] rounded-full px-2 text-rose-800 bg-rose-50'\n }, isPublic ? 'Public' : 'Private');\n\n const colHint = (v.collectionIds && v.collectionIds.length > 0)\n ? React.createElement('div', { className: 'text-[10px] text-emerald-700/70 mt-px truncate' }, \n v.collectionIds.length + ' collection' + (v.collectionIds.length > 1 ? 's' : '')\n )\n : null;\n\n const isAddPending = pending.has(`${v.id}-${activeCollectionId}-add`);\n const isRemovePending = pending.has(`${v.id}-${activeCollectionId}-remove`);\n\n const actionArea = activeCollectionId \n ? ( (v.collectionIds || []).includes(activeCollectionId)\n ? React.createElement('button', {\n onClick: (e) => { e.stopPropagation(); removeFromCollection(v.id, activeCollectionId); },\n disabled: isRemovePending,\n className: 'absolute bottom-1.5 right-9 text-[10px] px-1.5 py-px rounded bg-rose-100 text-rose-700 hover:bg-rose-200 disabled:opacity-50'\n }, isRemovePending ? '...' : 'Remove')\n : React.createElement('button', {\n onClick: (e) => { e.stopPropagation(); addToCollection(v.id, activeCollectionId); },\n disabled: isAddPending,\n className: 'absolute bottom-1.5 right-9 text-[10px] px-1.5 py-px rounded bg-emerald-100 text-emerald-700 hover:bg-emerald-200 disabled:opacity-50'\n }, isAddPending ? '...' : '+ Add')\n )\n : null;\n\n return React.createElement('div', {\n key: v.id,\n className: 'val-card relative h-20 rounded-lg flex items-center gap-3 border border-transparent hover:border-blue-300 hover:shadow-sm bg-white'\n },\n React.createElement('div', { className: 'size-20 shrink-0 flex items-center justify-center' },\n React.createElement('img', { \n src: 'https://www.val.town/favicon.svg?dot=true', \n alt: 'val', \n className: 'shrink-0 aspect-square object-cover size-12 min-w-12 rounded-md' \n })\n ),\n React.createElement('div', { className: 'grow py-3.5 pr-2 min-w-0' },\n React.createElement('div', { className: 'text-xs/5 truncate text-zinc-500' }, 'you'),\n React.createElement('a', { \n href: 'https://www.val.town/x/' + encodeURIComponent(v.name), \n target: '_blank',\n className: 'truncate text-base/5 font-bold -mt-[2px] hover:underline'\n }, v.name),\n React.createElement('div', { className: 'text-xs/5 truncate text-zinc-600' }, v.desc || '\\u00A0'),\n colHint\n ),\n React.createElement('div', { className: 'absolute top-2 right-2 flex items-center gap-1' }, badge),\n actionArea\n );\n };\n\n return React.createElement('div', { className: 'grid gap-8 lg:grid-cols-[1fr_240px] p-4 @2xl:p-6' },\n React.createElement('div', null,\n React.createElement('div', { className: 'flex items-center justify-between mb-3' },\n React.createElement('div', null,\n React.createElement('div', { className: 'text-xl font-semibold tracking-tighter' }, mainTitle),\n React.createElement('div', { className: 'text-xs text-zinc-500' }, \n filteredVals.length + ' shown' + (activeCollectionId ? ' (filtered)' : '')\n )\n ),\n activeCollectionId && React.createElement('button', {\n onClick: () => setActiveCollectionId(null),\n className: 'text-xs px-3 py-1 rounded-md border hover:bg-zinc-50'\n }, 'Clear filter')\n ),\n\n React.createElement('div', { className: 'grid md:grid-cols-2 gap-4' },\n filteredVals.length > 0 \n ? filteredVals.map(renderCard)\n : React.createElement('div', { className: 'text-sm text-zinc-500 p-4 col-span-2' }, 'No vals in this view.')\n ),\n\n activeCollection && valsToAdd.length > 0 && React.createElement('div', { className: 'mt-8' },\n React.createElement('div', { className: 'text-sm font-semibold mb-2 text-zinc-600' }, \n 'Add more vals to ' + activeCollection.name\n ),\n React.createElement('div', { className: 'grid md:grid-cols-2 gap-4' },\n valsToAdd.map(renderCard)\n )\n )\n ),\n\n React.createElement('div', { className: 'lg:border-l lg:pl-6 pt-1 text-sm' },\n React.createElement('div', null,\n React.createElement('div', { className: 'sidebar-heading' }, 'COLLECTIONS'),\n React.createElement('div', { className: 'space-y-0.5' }, sidebarItems),\n \n React.createElement('div', { className: 'mt-3 pt-3 border-t' },\n React.createElement('form', { \n onSubmit: createCollection,\n className: 'flex gap-1'\n },\n React.createElement('input', {\n type: 'text',\n value: newCollectionName,\n onChange: (e) => setNewCollectionName(e.target.value),\n placeholder: 'New collection name',\n className: 'flex-1 text-xs border rounded px-2 py-1',\n disabled: isCreating\n }),\n React.createElement('button', {\n type: 'submit',\n disabled: isCreating || !newCollectionName.trim(),\n className: 'text-xs px-3 py-1 border rounded hover:bg-zinc-50 disabled:opacity-50'\n }, isCreating ? '...' : 'Create')\n )\n )\n ),\n\n React.createElement('div', { className: 'mt-6' },\n React.createElement('div', { className: 'sidebar-heading' }, 'TIPS'),\n React.createElement('div', { className: 'text-[11px] text-zinc-500 leading-snug' },\n 'Click collections to filter. Add/Remove buttons appear in context. Optimistic updates for snappy feel.'\n )\n )\n )\n );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(React.createElement(App));\n","createdAt",["D",1781476246656],"branchVersion","branchId","6fff2bea-0f51-421d-9da1-44c78781fd3f","id","d86312ad-c8d2-4bd1-8d63-6e855917a197","dashboard-collections",["D",1781468494407],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","f4bbf016-9695-4c5a-a450-16ea687f5ce9","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",2,"orgId","320a2e78-168c-40d7-8c03-3f5809852127","tursoName","d86312adc8d24bd18d636e855917a197","tursoHostname","d86312adc8d24bd18d636e855917a197-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789591905500],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":95,"_98":99,"_18":53,"_100":101,"_102":24},"branch",{"_13":85,"_31":86,"_41":40,"_87":42,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":43,"_94":95},"isOwned",44,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","IshStahelin","handle","displayName","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/5d28a860-21fd-48d3-76db-9e82b9f09b00/square512?exp=1789614977&sig=b05541f0c565372bb34a1e85640cd0b54f50902595d0e09d460be36fa1329fe1","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_41":42,"_31":43,"_36":190,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":-5,"_55":24,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":63,"_64":65,"_66":191,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":192,"_80":193,"_82":194,"_84":24},"tree",[173,174,175,176],"files",[173,174,175,176],"counts",{"_162":152,"_163":164,"_165":59,"_166":167,"_168":169},"contents",[126,127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_41":154,"_31":155,"_29":156,"_133":-5,"_39":40,"_38":157,"_135":121,"_36":158,"_13":159,"_32":33,"_34":160,"_23":24,"_140":-5,"_26":161},{"_41":150,"_31":27,"_29":30,"_133":-5,"_39":40,"_38":14,"_135":121,"_36":151,"_13":152,"_32":33,"_34":35,"_23":24,"_140":-5,"_26":153},{"_41":143,"_31":144,"_29":145,"_133":-5,"_39":40,"_38":146,"_135":24,"_36":147,"_13":59,"_32":33,"_34":148,"_23":24,"_140":-5,"_26":149},{"_41":130,"_31":131,"_29":132,"_133":-5,"_39":40,"_38":134,"_135":24,"_36":136,"_13":137,"_32":138,"_34":139,"_23":24,"_140":141,"_26":142},"4893a79e-3114-40ad-b462-88ae5a76a8a6","index.ts","65d798c6-6830-11f1-863a-1607ee4eb77e","parentId",20,"latest",["D",1781475024433],10,"http","import { Hono } from \"npm:hono\";\nimport ValTown from \"npm:@valtown/sdk\";\nimport sqlite from \"https://esm.town/v/std/sqlite/main.ts\";\nimport Dashboard from \"./Dashboard.tsx\";\n\nconst app = new Hono();\n\n// --- DB helpers (user-private) ---\nasync function initDb() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS collections (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n created_at INTEGER DEFAULT (unixepoch())\n )\n `);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS val_collections (\n val_id TEXT NOT NULL,\n collection_id TEXT NOT NULL,\n added_at INTEGER DEFAULT (unixepoch()),\n PRIMARY KEY (val_id, collection_id)\n )\n `);\n}\n\nasync function getCollections() {\n const res = await sqlite.execute(`SELECT id, name FROM collections ORDER BY name`);\n const cols = res.rows.map((r: any) => ({ id: r.id, name: r.name }));\n // Note: counts are computed in the caller or Dashboard for simplicity here\n return cols;\n}\n\nasync function createCollection(name: string) {\n const id = crypto.randomUUID();\n await sqlite.execute(\n `INSERT INTO collections (id, name) VALUES (?, ?)`,\n [id, name]\n );\n return { id, name };\n}\n\nasync function getValCollectionIds(valId: string): Promise {\n const res = await sqlite.execute(\n `SELECT collection_id FROM val_collections WHERE val_id = ?`,\n [valId]\n );\n return res.rows.map((r: any) => r.collection_id as string);\n}\n\nasync function addValToCollection(valId: string, collectionId: string) {\n await sqlite.execute(\n `INSERT OR IGNORE INTO val_collections (val_id, collection_id) VALUES (?, ?)`,\n [valId, collectionId]\n );\n}\n\nasync function removeValFromCollection(valId: string, collectionId: string) {\n await sqlite.execute(\n `DELETE FROM val_collections WHERE val_id = ? AND collection_id = ?`,\n [valId, collectionId]\n );\n}\n\n// --- API data mapping (live vals) ---\nfunction mapVal(raw: any) {\n return {\n id: raw.id,\n name: raw.name,\n desc: raw.description || \"\",\n vis: (raw.privacy || raw.visibility || \"private\").toLowerCase() === \"public\" ? \"Public\" : \"Private\",\n bigImage: false,\n };\n}\n\nasync function getLiveVals() {\n const apiKey = Deno.env.get(\"VAL_TOWN_API_KEY\");\n const vt = new ValTown(apiKey ? { bearerToken: apiKey } : {});\n let rawVals: any[] = [];\n try {\n for await (const val of vt.me.vals.list({})) {\n rawVals.push(val);\n if (rawVals.length >= 500) break;\n }\n } catch (err: any) {\n console.error(\"Failed to fetch vals via SDK:\", err?.message || err);\n throw new Error(`SDK list failed (hasToken=${!!apiKey}): ${err?.message || String(err)}`);\n }\n\n const mapped = rawVals.map(mapVal);\n for (const v of mapped) {\n (v as any).collectionIds = await getValCollectionIds(v.id);\n }\n return mapped;\n}\n\n// --- Routes ---\n\napp.get(\"/api/vals\", async (c) => {\n await initDb();\n const apiKey = Deno.env.get(\"VAL_TOWN_API_KEY\");\n const hasToken = !!apiKey;\n try {\n const vals = await getLiveVals();\n return c.json({ vals, meta: { count: vals.length, hasToken } });\n } catch (err: any) {\n console.error(\"Error in /api/vals:\", err);\n return c.json({\n error: \"Failed to load vals\",\n message: err?.message || String(err),\n hasToken,\n stack: err?.stack?.split(\"\\n\").slice(0, 8).join(\"\\n\")\n }, 500);\n }\n});\n\napp.get(\"/api/collections\", async (c) => {\n await initDb();\n try {\n const cols = await getCollections();\n const vals = await getLiveVals();\n const counts: Record = {};\n for (const col of cols) {\n counts[col.id] = vals.filter((v: any) => (v.collectionIds || []).includes(col.id)).length;\n }\n return c.json({ collections: cols.map((col) => ({ ...col, count: counts[col.id] || 0 })) });\n } catch (err: any) {\n console.error(\"Error in /api/collections:\", err);\n return c.json({ collections: [], error: err?.message || String(err) });\n }\n});\n\napp.post(\"/api/collections\", async (c) => {\n await initDb();\n const body = await c.req.json().catch(() => ({}));\n const name = (body.name || \"\").trim();\n if (!name) return c.json({ error: \"name required\" }, 400);\n const created = await createCollection(name);\n return c.json(created, 201);\n});\n\napp.post(\"/api/val-collections\", async (c) => {\n await initDb();\n const body = await c.req.json().catch(() => ({}));\n const { valId, collectionId } = body;\n if (!valId || !collectionId) return c.json({ error: \"valId and collectionId required\" }, 400);\n await addValToCollection(valId, collectionId);\n return c.json({ ok: true });\n});\n\napp.delete(\"/api/val-collections\", async (c) => {\n await initDb();\n const body = await c.req.json().catch(() => ({}));\n const { valId, collectionId } = body;\n if (!valId || !collectionId) return c.json({ error: \"valId and collectionId required\" }, 400);\n await removeValFromCollection(valId, collectionId);\n return c.json({ ok: true });\n});\n\n// Handle creating a collection (form POST)\napp.post(\"/create-collection\", async (c) => {\n await initDb();\n const body = await c.req.parseBody();\n const name = (body.name as string || \"\").trim();\n if (!name) {\n return c.redirect(\"/\");\n }\n const created = await createCollection(name);\n return c.redirect(`/?c=${created.id}`);\n});\n\n// Handle add/remove val from a collection (form POSTs)\napp.post(\"/manage-collection\", async (c) => {\n await initDb();\n const body = await c.req.parseBody();\n const valId = body.valId as string;\n const collectionId = body.collectionId as string;\n const action = body.action as string; // 'add' or 'remove'\n const returnC = (body.c as string) || \"\";\n if (!valId || !collectionId || (action !== \"add\" && action !== \"remove\")) {\n return c.redirect(\"/\");\n }\n if (action === \"add\") {\n await addValToCollection(valId, collectionId);\n } else {\n await removeValFromCollection(valId, collectionId);\n }\n const redirectUrl = returnC ? `/?c=${returnC}` : \"/\";\n return c.redirect(redirectUrl);\n});\n\n// Main page - serves the React client app shell.\n// The React app (in Dashboard.tsx) fetches data client-side from the /api/* endpoints\n// and handles all interactivity (filter by collection, create, add/remove).\napp.get(\"/\", (c) => {\n return c.html(Dashboard());\n});\n\n// Debug: plain text dump of the raw SDK response + collections\n// Visit /debug to validate that the Val Town SDK integration is returning your vals.\napp.get(\"/debug\", async (c) => {\n await initDb();\n try {\n const vals = await getLiveVals();\n const cols = await getCollections();\n const hasToken = !!Deno.env.get(\"VAL_TOWN_API_KEY\");\n return c.text(\n JSON.stringify(\n {\n hasToken,\n valCount: vals.length,\n vals, // full raw list from the SDK\n collections: cols,\n },\n null,\n 2\n ),\n 200,\n { \"content-type\": \"text/plain; charset=utf-8\" }\n );\n } catch (e: any) {\n return c.text(\"Error loading data via SDK: \" + (e?.message || String(e)), 500, { \"content-type\": \"text/plain; charset=utf-8\" });\n }\n});\n\n// Fallback\napp.all(\"*\", (c) => c.text(\"Not found\", 404));\n\nexport default app.fetch;\n","label","valton-collections",[131],"ff2cf0a2-d225-48f2-b452-bce3d28603f6","client.ts","b4361880-6835-11f1-a579-1607ee4eb77e",12,["D",1781472328003],"// client.ts\n// Client-side interactivity for the Val Collections dashboard.\n// This runs in the browser. It consumes server-injected window.INITIAL_* data\n// for the first render (no extra fetch needed for initial load).\n// Mutations still use the /api endpoints.\n\nexport const clientScript = `\n let ALL_VALS = [];\n let COLLECTIONS = [];\n let currentCollection = \"All vals\";\n let activeQuickFilters = [];\n\n const QUICK_FILTERS = [\n { label: \"Public only\", key: \"public\" },\n { label: \"Private only\", key: \"private\" },\n { label: \"Has description\", key: \"has-desc\" }\n ];\n\n async function fetchVals() {\n if (window.INITIAL_VALS) {\n ALL_VALS = window.INITIAL_VALS;\n window.LAST_API_META = { count: ALL_VALS.length, hasToken: true };\n delete window.INITIAL_VALS;\n return;\n }\n const res = await fetch(\"/api/vals\");\n const data = await res.json();\n if (data.error) {\n throw new Error(data.message || data.error);\n }\n ALL_VALS = data.vals || [];\n window.LAST_API_META = data.meta || { count: ALL_VALS.length };\n }\n\n async function fetchCollections() {\n if (window.INITIAL_COLLECTIONS) {\n COLLECTIONS = window.INITIAL_COLLECTIONS;\n delete window.INITIAL_COLLECTIONS;\n return;\n }\n const res = await fetch(\"/api/collections\");\n const data = await res.json();\n if (data.error) {\n console.warn(\"Collections load warning:\", data.error);\n }\n COLLECTIONS = data.collections || [];\n }\n\n function createCard(v) {\n const badge = v.vis === \"Public\"\n ? 'Public'\n : 'Private';\n\n const colHint = (v.collectionIds && v.collectionIds.length)\n ? '

' + v.collectionIds.length + ' collection' + (v.collectionIds.length > 1 ? 's' : '') + '

'\n : '';\n\n let membershipBtn = '';\n if (currentCollection !== \"All vals\") {\n const col = (window.CURRENT_COLLECTIONS || []).find(c => c.name === currentCollection);\n const isMember = col && (v.collectionIds || []).includes(col.id);\n if (isMember) {\n membershipBtn = '';\n } else {\n membershipBtn = '';\n }\n }\n\n return '

'\n + '

$\"val\"$

'\n + '

you

'\n + '

' + v.name + '

'\n + '

' + (v.desc || ' ') + '

'\n + colHint\n + '

'\n + '

' + badge + '

'\n + membershipBtn\n + ''\n + '

';\n }\n\n function renderGrid() {\n const filtered = getFiltered();\n const container = document.getElementById(\"val-grid\");\n container.innerHTML = filtered.map(createCard).join(\"\");\n\n // Attach listeners for membership buttons (data attrs to avoid quote issues)\n container.querySelectorAll('button[data-val-id]').forEach(btn => {\n btn.addEventListener('click', (e) => {\n e.stopImmediatePropagation();\n const vid = btn.getAttribute('data-val-id');\n const add = btn.getAttribute('data-action') === 'add';\n toggleValInActiveCollection(vid, add);\n });\n });\n }\n\n function renderCollectionsNav() {\n const container = document.getElementById(\"collections-nav\");\n let html = '';\n\n const allCount = ALL_VALS.length;\n const allActive = currentCollection === \"All vals\";\n html += '

'\n + 'All vals' + allCount + '

';\n\n COLLECTIONS.forEach(col => {\n const active = currentCollection === col.name;\n html += '

'\n + '' + col.name + '' + (col.count || 0) + '

';\n });\n\n container.innerHTML = html;\n\n // Attach listeners (avoids any quote issues with collection names in inline onclick)\n container.querySelectorAll('[data-collection]').forEach(el => {\n el.addEventListener('click', () => {\n selectCollection(el.getAttribute('data-collection'));\n });\n });\n }\n\n function renderQuickFilters() {\n const container = document.getElementById(\"quick-filters\");\n let html = '';\n QUICK_FILTERS.forEach(f => {\n const active = activeQuickFilters.includes(f.key);\n html += '';\n });\n container.innerHTML = html;\n }\n\n function updateActiveHeader() {\n const titleEl = document.getElementById(\"active-title\");\n const subEl = document.getElementById(\"active-subtitle\");\n const clearEl = document.getElementById(\"clear-btn\");\n const filtered = getFiltered();\n\n if (currentCollection === \"All vals\" && activeQuickFilters.length === 0) {\n titleEl.textContent = \"All vals\";\n subEl.textContent = ALL_VALS.length + \" total\";\n clearEl.classList.add(\"hidden\");\n } else {\n let parts = [];\n if (currentCollection !== \"All vals\") parts.push(currentCollection);\n activeQuickFilters.forEach(k => {\n const f = QUICK_FILTERS.find(q => q.key === k);\n if (f) parts.push(f.label.toLowerCase());\n });\n titleEl.textContent = parts.join(\" + \");\n subEl.textContent = filtered.length + \" val\" + (filtered.length === 1 ? \"\" : \"s\");\n clearEl.classList.remove(\"hidden\");\n }\n }\n\n function getFiltered() {\n let result = ALL_VALS;\n\n if (currentCollection !== \"All vals\") {\n const col = COLLECTIONS.find(c => c.name === currentCollection);\n if (col) {\n result = result.filter(v => (v.collectionIds || []).includes(col.id));\n }\n }\n\n activeQuickFilters.forEach(f => {\n if (f === \"public\") result = result.filter(v => v.vis === \"Public\");\n if (f === \"private\") result = result.filter(v => v.vis === \"Private\");\n if (f === \"has-desc\") result = result.filter(v => v.desc && v.desc.trim().length > 0);\n });\n return result;\n }\n\n function renderAll() {\n window.CURRENT_COLLECTIONS = COLLECTIONS;\n renderGrid();\n renderCollectionsNav();\n renderQuickFilters();\n updateActiveHeader();\n if (typeof updateStatusBar === \"function\") updateStatusBar(null);\n }\n\n function updateStatusBar(loadError) {\n const bar = document.getElementById(\"status-bar\");\n if (!bar) return;\n const meta = window.LAST_API_META || {};\n let text = 'API: ' + ALL_VALS.length + ' vals';\n if (meta.hasToken !== undefined) text += ' | hasToken=' + meta.hasToken;\n if (loadError) {\n text += ' | ERROR: ' + loadError;\n bar.style.background = '#fee2e2';\n bar.style.color = '#991b1b';\n }\n bar.textContent = text;\n }\n\n function selectCollection(name) {\n currentCollection = name;\n renderAll();\n }\n\n function toggleQuickFilter(key) {\n if (activeQuickFilters.includes(key)) {\n activeQuickFilters = activeQuickFilters.filter(k => k !== key);\n } else {\n activeQuickFilters.push(key);\n }\n renderAll();\n }\n\n function clearSelection() {\n currentCollection = \"All vals\";\n activeQuickFilters = [];\n renderAll();\n }\n\n async function createCollection() {\n const name = prompt(\"Collection name:\");\n if (!name || !name.trim()) return;\n await fetch(\"/api/collections\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name: name.trim() })\n });\n await fetchCollections();\n renderAll();\n }\n\n async function toggleValInActiveCollection(valId, add) {\n const col = COLLECTIONS.find(c => c.name === currentCollection);\n if (!col) return;\n const endpoint = add ? \"/api/val-collections\" : \"/api/val-collections\";\n const method = add ? \"POST\" : \"DELETE\";\n await fetch(endpoint, {\n method,\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ valId, collectionId: col.id })\n });\n await fetchVals();\n await fetchCollections();\n renderAll();\n }\n\n function showErrorBanner(msg) {\n const area = document.getElementById(\"error-area\");\n const banner = document.createElement(\"div\");\n banner.className = \"bg-red-100 border border-red-300 text-red-800 px-4 py-2 text-sm rounded mb-4\";\n banner.innerHTML = 'Error: ' + msg;\n if (area) {\n area.innerHTML = \"\";\n area.appendChild(banner);\n } else {\n const main = document.getElementById(\"main-col\") || document.body;\n main.prepend(banner);\n }\n }\n\n async function initClient() {\n let loadError = window.INITIAL_LOAD_ERROR || null;\n if (window.INITIAL_LOAD_ERROR) delete window.INITIAL_LOAD_ERROR;\n\n try {\n await Promise.all([fetchVals(), fetchCollections()]);\n } catch (e) {\n loadError = e?.message || String(e);\n ALL_VALS = [];\n COLLECTIONS = [];\n }\n renderAll();\n updateStatusBar(loadError);\n\n if (loadError) {\n showErrorBanner(\"Failed to load your vals from the API: \" + loadError + \n \". Check the browser console and the val's logs (vt tail or the Val Town UI) for the full stack.\");\n }\n\n const sub = document.getElementById(\"active-subtitle\");\n if (sub) sub.onclick = clearSelection;\n }\n\n async function init() {\n await initClient();\n }\n\n // Execute immediately since the script is at the end of the body (DOM ready)\n // and the data scripts have already run. onload can be unreliable in some load scenarios.\n init();\n`;",[144],"6d308fee-c996-4ebc-879c-140e221f870d",["D",1781476246656],0,[27],"074e384d-7ba7-4b77-b18a-370c96a91b95","Dashboard.tsx","b43d38e0-6835-11f1-8a55-1607ee4eb77e",23,["D",1781476246641],8,"// Dashboard.tsx\n// Simple HTML shell for the React client app.\n// The real UI is in client.js (served at /client.js) which uses React UMD.\n\nexport default function Dashboard() {\n return `\n\n\n \n \n Val Collections • Dashboard\n \n \n \n \n\n\n

Val Town

Collections

\n val.town\n

\n\n \n\n

Loading React app...

\n\n \n\n`;\n}\n",[155],"pulls","branches",1,"forks","envVars",{"_170":164,"_172":152},"connections",{"_170":152,"_171":152},"count","unfilledCount","emptyCount",{"_41":154,"_31":155,"_29":156,"_133":-5,"_39":40,"_38":157,"_135":121,"_36":187,"_13":159,"_32":33,"_34":160,"_23":24,"_140":-5,"_178":188,"_26":189},{"_41":150,"_31":27,"_29":30,"_133":-5,"_39":40,"_38":14,"_135":121,"_36":184,"_13":152,"_32":33,"_34":35,"_23":24,"_140":-5,"_178":185,"_26":186},{"_41":143,"_31":144,"_29":145,"_133":-5,"_39":40,"_38":146,"_135":24,"_36":181,"_13":59,"_32":33,"_34":148,"_23":24,"_140":-5,"_178":182,"_26":183},{"_41":130,"_31":131,"_29":132,"_133":-5,"_39":40,"_38":134,"_135":24,"_36":177,"_13":137,"_32":138,"_34":139,"_23":24,"_140":141,"_178":179,"_26":180},["D",1781475024433],"children",[],[131],["D",1781472328003],[],[144],["D",1781476246656],[],[27],["D",1781476246641],[],[155],["D",1781468494407],["D",1789591905500],{"_96":95,"_103":99},{"_96":95,"_97":95,"_98":99,"_18":53,"_100":101,"_102":24},{"_13":85,"_31":86,"_41":40,"_87":42,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":43,"_94":95},"ctx",{"_78":-5,"_123":228,"_229":230,"_231":232,"_233":24,"_234":24,"_235":24,"_236":121,"_237":-5,"_238":-7,"_239":-7,"_240":152,"_241":24,"_242":24,"_243":-5,"_244":24,"_245":24,"_246":24,"_247":-5},"ENV",{"_199":200,"_201":202,"_203":86,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","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"]

Diff · v24