Val Collections • Dashboard

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_185":186,"_187":188},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":88,"_27":53,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":123,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",19,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","Dashboard.tsx","latestPath","fileId","b43d38e0-6835-11f1-8a55-1607ee4eb77e","name","fileType","script","content","// Dashboard.tsx\n// Server-rendered dashboard for Val Collections (Hybrid model).\n// All initial content (vals grid, collections sidebar, status) is rendered server-side\n// using data fetched via the Val Town SDK + private SQLite.\n// Client-side JS is minimal for now (will add interactivity later).\n\nexport interface DashboardProps {\n initialVals: any[];\n initialCollections: any[];\n activeCollection?: { id: string; name: string; count?: number } | null;\n valsToShow?: any[];\n valsToAdd?: any[];\n loadError?: string | null;\n meta?: any;\n}\n\nfunction escapeHtml(str: string): string {\n if (!str) return '';\n return str\n .replace(/&/g, '&')\n .replace(//g, '>')\n .replace(/\"/g, '"')\n .replace(/'/g, ''');\n}\n\nfunction cardHtml(v: any, activeCollection?: { id: string; name: string } | null): string {\n const isPublic = v.vis === 'Public';\n const badge = isPublic\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 actionButton = '';\n if (activeCollection) {\n const isMember = (v.collectionIds || []).includes(activeCollection.id);\n const action = isMember ? 'remove' : 'add';\n const btnText = isMember ? 'Remove' : '+ Add';\n const btnClass = isMember \n ? 'bg-rose-100 text-rose-700 hover:bg-rose-200' \n : 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200';\n actionButton = `\n `;\n }\n\n return `\n

\n $\"val\"$ \n

you

${escapeHtml(v.name)}

${escapeHtml(v.desc || ' ')}

\n ${colHint}\n

\n ${badge}\n

\n ${actionButton}\n \n

`;\n}\n\n\n\nexport default function Dashboard(props: DashboardProps) {\n const {\n initialVals = [],\n initialCollections = [],\n activeCollection = null,\n valsToShow = initialVals,\n valsToAdd = [],\n loadError = null,\n meta = {},\n } = props;\n\n const total = initialVals.length;\n const hasToken = meta.hasToken !== undefined ? meta.hasToken : true;\n\n // Server-rendered cards for the main view (filtered when a collection is active)\n const cardsHtml = valsToShow.map((v) => cardHtml(v, activeCollection)).join('');\n\n // Server-rendered \"add more\" section (only when viewing a specific collection)\n let addMoreHtml = '';\n if (activeCollection && valsToAdd.length > 0) {\n const addCards = valsToAdd.map((v) => cardHtml(v, activeCollection)).join('');\n addMoreHtml = `\n

Add more vals to ${escapeHtml(activeCollection.name)}

\n ${addCards}\n

`;\n }\n\n // Server-rendered collections sidebar as links (clicking filters the view to that collection)\n let navHtml = `\n \n All vals\n ${total}\n `;\n\n initialCollections.forEach((col: any) => {\n const isActive = activeCollection && activeCollection.id === col.id;\n const href = `/?c=${col.id}`;\n navHtml += `\n \n ${escapeHtml(col.name)}\n ${col.count || 0}\n `;\n });\n\n // Status bar text (server-rendered)\n let statusText = `API: ${total} vals | hasToken=${hasToken}`;\n if (activeCollection) {\n statusText += ` | Managing: ${escapeHtml(activeCollection.name)}`;\n }\n\n // Error content if any\n const errorHtml = loadError\n ? `

Error: ${escapeHtml(loadError)}

`\n : '';\n\n // Create collection form (server POST, no JS needed)\n const createForm = `\n `;\n\n const activeNote = activeCollection \n ? `

Managing collection “${escapeHtml(activeCollection.name)}”. Use the buttons on cards to add or remove vals.

`\n : '';\n\n const page = `\n\n\n \n \n Val Collections • Dashboard\n \n \n\n\n

Val Town

Collections

\n val.town\n

\n\n \n\n

\n \n

${statusText}

\n ${activeNote}\n

${activeCollection ? escapeHtml(activeCollection.name) : 'All vals'}

${valsToShow.length} shown${activeCollection ? ` (of ${total} total)` : ''} — server-rendered

\n\n

\n ${cardsHtml || '

No vals to display.

'}\n

\n\n ${addMoreHtml}\n\n

\n ${errorHtml}\n

\n\n \n

\n \n

\n ${navHtml}\n

\n ${createForm}\n

Click a collection above to filter the list to its members (easy to remove). The section below the list lets you add more.

\n\n

\n \n

Server-rendered list. Filtering UI coming with client-side.

\n\n

\n Fully server-rendered using the Val Town SDK + your private SQLite.
\n Click a collection in the sidebar to see only its members (with Remove buttons). Scroll down for an \"Add more vals\" section. Create new ones with the form above.\n

\n\n \n \n\n`;\n\n return page;\n}\n","// Dashboard.tsx\n// Now a React-powered client app (served via CDN UMD for zero-build in Val Town).\n// Server still does the heavy lifting for data via SDK + SQLite, but the UI is fully interactive in React.\n\nexport default function Dashboard() {\n // This returns the full HTML shell. The React app logic is in the script below.\n const page = `\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

\n\n \n\n`;\n\n return page;\n}\n","createdAt",["D",1781475024114],"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",{"_98":97,"_105":101},"org",{"_98":97,"_99":97,"_100":101,"_18":55,"_102":103,"_104":25},"branch",{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"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=1789614842&sig=b9073fde4b6787b4042f9fc3d851e9c6a03533baa110072a25348252b118fc52","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":180,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":181,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":182,"_82":183,"_84":184,"_86":25},"tree",[167,168,169],"files",[167,168,169],"counts",{"_155":156,"_157":158,"_159":61,"_160":161,"_162":163},"contents",[128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":151,"_32":28,"_30":31,"_134":-5,"_41":42,"_40":14,"_136":25,"_38":152,"_13":153,"_33":34,"_35":37,"_24":25,"_141":-5,"_27":154},{"_43":144,"_32":145,"_30":146,"_134":-5,"_41":42,"_40":147,"_136":25,"_38":148,"_13":61,"_33":34,"_35":149,"_24":25,"_141":-5,"_27":150},{"_43":131,"_32":132,"_30":133,"_134":-5,"_41":42,"_40":135,"_136":25,"_38":137,"_13":138,"_33":139,"_35":140,"_24":25,"_141":142,"_27":143},"5f81f4a6-1186-4faf-b0a7-aa55d21ad6ab","index.ts","65d798c6-6830-11f1-863a-1607ee4eb77e","parentId",18,"latest",["D",1781474754343],9,"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 - server renders using Dashboard with SDK data\n// Supports ?c=COLLECTION_ID to activate management buttons for that collection\napp.get(\"/\", async (c) => {\n await initDb();\n let initialVals: any[] = [];\n let initialCollections: any[] = [];\n let loadError: string | null = null;\n let meta: any = {};\n const activeCollectionId = c.req.query(\"c\") || null;\n try {\n initialVals = await getLiveVals();\n initialCollections = await getCollections();\n // enrich collections with counts\n const counts: Record = {};\n initialCollections.forEach((col: any) => {\n counts[col.id] = initialVals.filter((v: any) => (v.collectionIds || []).includes(col.id)).length;\n });\n initialCollections = initialCollections.map((col: any) => ({ ...col, count: counts[col.id] || 0 }));\n meta = { count: initialVals.length, hasToken: !!Deno.env.get(\"VAL_TOWN_API_KEY\") };\n } catch (e: any) {\n loadError = e?.message || String(e);\n console.error(\"Server-side data load error:\", loadError);\n }\n\n let activeCollection = null;\n if (activeCollectionId) {\n activeCollection = initialCollections.find((col: any) => col.id === activeCollectionId) || null;\n }\n\n // Prepare filtered views for better UX\n let valsToShow = initialVals;\n let valsToAdd = [];\n if (activeCollection) {\n valsToShow = initialVals.filter((v: any) => (v.collectionIds || []).includes(activeCollection.id));\n valsToAdd = initialVals.filter((v: any) => !(v.collectionIds || []).includes(activeCollection.id));\n }\n\n const html = Dashboard({\n initialVals,\n initialCollections,\n activeCollection,\n valsToShow,\n valsToAdd,\n loadError,\n meta,\n });\n return c.html(html);\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",[132],"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`;",[145],"4016aefc-5ddc-4259-9194-1a3b2a9a60d7",["D",1781475024114],5,[28],"pulls",0,"branches",1,"forks","envVars",{"_164":158,"_166":156},"connections",{"_164":156,"_165":156},"count","unfilledCount","emptyCount",{"_43":151,"_32":28,"_30":31,"_134":-5,"_41":42,"_40":14,"_136":25,"_38":177,"_13":153,"_33":34,"_35":37,"_24":25,"_141":-5,"_171":178,"_27":179},{"_43":144,"_32":145,"_30":146,"_134":-5,"_41":42,"_40":147,"_136":25,"_38":174,"_13":61,"_33":34,"_35":149,"_24":25,"_141":-5,"_171":175,"_27":176},{"_43":131,"_32":132,"_30":133,"_134":-5,"_41":42,"_40":135,"_136":25,"_38":170,"_13":138,"_33":139,"_35":140,"_24":25,"_141":142,"_171":172,"_27":173},["D",1781474754343],"children",[],[132],["D",1781472328003],[],[145],["D",1781475024114],[],[28],["D",1781468494407],["D",1789591905500],{"_98":97,"_105":101},{"_98":97,"_99":97,"_100":101,"_18":55,"_102":103,"_104":25},{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"ctx",{"_80":-5,"_125":218,"_219":220,"_221":222,"_223":25,"_224":25,"_225":25,"_226":123,"_227":-5,"_228":-7,"_229":-7,"_230":156,"_231":25,"_232":25,"_233":-5,"_234":25,"_235":25,"_236":25,"_237":-5},"ENV",{"_189":190,"_191":192,"_193":88,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217},"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 · v19