Val Collections • Dashboard

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_184":185,"_186":187},"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",14,"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 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): 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 // No per-card buttons yet (client interactivity later). Just the display card matching original design.\n return `\n

\n $\"val\"$ \n

you

${escapeHtml(v.name)}

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

\n ${colHint}\n

\n ${badge}\n

\n \n

`;\n}\n\nfunction collectionsNavHtml(collections: any[], totalVals: number): string {\n let html = '';\n\n // All vals (default, selected)\n html += `\n

\n All vals\n ${totalVals}\n

`;\n\n collections.forEach(col => {\n html += `\n

\n ${escapeHtml(col.name)}\n ${col.count || 0}\n

`;\n });\n\n return html;\n}\n\nexport default function Dashboard(props: DashboardProps) {\n const {\n initialVals = [],\n initialCollections = [],\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 (all vals for initial view)\n const cardsHtml = initialVals.map(cardHtml).join('');\n\n // Server-rendered collections list\n const navHtml = collectionsNavHtml(initialCollections, total);\n\n // Status bar text (server-rendered)\n const statusText = `API: ${total} vals | hasToken=${hasToken}`;\n\n // Error content if any\n const errorHtml = loadError\n ? `

Error: ${escapeHtml(loadError)}

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

Val Town

Collections

\n + New collection (client-side coming soon)\n val.town\n

\n\n \n\n

\n \n

${statusText}

All vals

${total} total (server-rendered)

\n\n

\n ${cardsHtml || '

No vals to display.

'}\n

\n\n

\n ${errorHtml}\n

\n\n \n

\n \n

\n ${navHtml}\n

+ New collection (client interactivity coming soon)

\n\n

\n \n

Public only / Private only / Has description (client-side later)

\n\n

\n This page is fully server-rendered using the Val Town SDK for your vals + your private SQLite for collections.
\n Client-side interactivity (filtering, add/remove from collections, new collections) will be added next.\n

\n\n \n \n\n`;\n\n return page;\n}\n","// 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 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 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 (always all vals; active collection only affects the action buttons)\n const cardsHtml = initialVals.map((v) => cardHtml(v, activeCollection)).join('');\n\n // Server-rendered collections sidebar as links (click to activate management for 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 ${createForm}\n val.town\n

\n\n \n\n

\n \n

${statusText}

\n ${activeNote}\n

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

${total} total (server-rendered)

\n\n

\n ${cardsHtml || '

No vals to display.

'}\n

\n\n

\n ${errorHtml}\n

\n\n \n

\n \n

\n ${navHtml}\n

Click a collection above to activate add/remove buttons on the cards.

\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 Use the sidebar to pick a collection, then use the small buttons on cards to move vals in/out. Create new collections with the form in the header.\n

\n\n \n \n\n`;\n\n return page;\n}\n","createdAt",["D",1781473930338],"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=1789615007&sig=324ce253eecbce8f431255014f06d8c8f8ff0ed207e2361b0b6ed9c2850b57d7","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":179,"_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":180,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":181,"_82":182,"_84":183,"_86":25},"tree",[166,167,168],"files",[166,167,168],"counts",{"_154":155,"_156":157,"_158":61,"_159":160,"_161":162},"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":61,"_33":34,"_35":37,"_24":25,"_141":-5,"_27":153},{"_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},"4587cd98-d846-4ccd-97fa-bf72a17bec18","index.ts","65d798c6-6830-11f1-863a-1607ee4eb77e","parentId",8,"latest",["D",1781471528892],7,"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// Main page - server renders using TSX Dashboard with SDK data\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 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 const html = Dashboard({\n initialVals,\n initialCollections,\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],"3a4c0a0c-fde9-4dcf-b925-18a50d867f94",["D",1781473930338],[28],"pulls",0,"branches",1,"forks","envVars",{"_163":157,"_165":155},"connections",{"_163":155,"_164":155},"count","unfilledCount","emptyCount",{"_43":151,"_32":28,"_30":31,"_134":-5,"_41":42,"_40":14,"_136":25,"_38":176,"_13":61,"_33":34,"_35":37,"_24":25,"_141":-5,"_170":177,"_27":178},{"_43":144,"_32":145,"_30":146,"_134":-5,"_41":42,"_40":147,"_136":25,"_38":173,"_13":61,"_33":34,"_35":149,"_24":25,"_141":-5,"_170":174,"_27":175},{"_43":131,"_32":132,"_30":133,"_134":-5,"_41":42,"_40":135,"_136":25,"_38":169,"_13":138,"_33":139,"_35":140,"_24":25,"_141":142,"_170":171,"_27":172},["D",1781471528892],"children",[],[132],["D",1781472328003],[],[145],["D",1781473930338],[],[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":217,"_218":219,"_220":221,"_222":25,"_223":25,"_224":25,"_225":123,"_226":-5,"_227":-7,"_228":-7,"_229":155,"_230":25,"_231":25,"_232":-5,"_233":25,"_234":25,"_235":25,"_236":-5},"ENV",{"_188":189,"_190":191,"_192":88,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216},"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 · v14