[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_223":224,"_225":226},"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",42,"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","client.ts","latestPath","fileId","b4361880-6835-11f1-a579-1607ee4eb77e","name","fileType","script","content","export const clientScript = `\n// client.js - React client app for Val Collections dashboard\n// Loaded via \n \n\n\n

Static Prototypes

Early design explorations for the Val Collections dashboard. All data is fake to protect privacy.

\n ← Back to Live Dashboard\n

\n\n

\n \n

\n \n \n \n

\n\n \n

Option 1: Lightweight Tags

Multi-label system. Filter by clicking tags. Vals can have multiple tags.

\n \n \n

FILTER BY TAGS

\n\n

\n\n \n

Option 4: Dashboard Sections

Presentational grouping. Sections like Pinned, Public, Automations, Tools.

\n\n

\n\n \n

Option 5: Hybrid (Collections + Filters)

Sidebar collections + quick filters. Clicking a collection filters the grid.

\n\n

\n \n

\n\n \n

COLLECTIONS

\n\n

QUICK FILTERS

\n\n

\n These prototypes use completely fake data. They were created during the initial exploration phase before the live React version.\n

\n\n \n\n`;\n","label",[135],"c83bc081-ffb7-4286-b588-7f5bd7132836","index.ts","65d798c6-6830-11f1-863a-1607ee4eb77e",41,["D",1781709299706],19,"http","import { Hono } from \"npm:hono\";\nimport ValTown from \"npm:@valtown/sdk\";\nimport sqlite from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport Dashboard from \"./Dashboard.tsx\";\nimport { clientScript as clientCode } from \"./client.ts\";\nimport { prototypesHtml } from \"./prototypes.ts\";\n\nconst app = new Hono();\n\n// Serve the client React code as /client.js (imported as string from its own .ts file, served with correct MIME type)\napp.get(\"/client.js\", (c) => {\n return c.text(clientCode, 200, { \"content-type\": \"application/javascript\" });\n});\n\n// Static design prototypes page (early explorations with completely fake data)\napp.get(\"/prototypes\", (c) => {\n return c.html(prototypesHtml);\n});\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 user_id TEXT NOT NULL,\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 user_id TEXT NOT NULL,\n val_id TEXT NOT NULL,\n collection_id TEXT NOT NULL,\n added_at INTEGER DEFAULT (unixepoch()),\n PRIMARY KEY (user_id, val_id, collection_id)\n )\n `);\n await sqlite.execute(`ALTER TABLE collections ADD COLUMN user_id TEXT`).catch(() => {});\n await sqlite.execute(`ALTER TABLE val_collections ADD COLUMN user_id TEXT`).catch(() => {});\n}\n\nasync function getCollections(userId: string) {\n const res = await sqlite.execute(\n `SELECT id, name FROM collections WHERE user_id = ? ORDER BY name`,\n [userId]\n );\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(userId: string, name: string) {\n const id = crypto.randomUUID();\n await sqlite.execute(\n `INSERT INTO collections (id, user_id, name) VALUES (?, ?, ?)`,\n [id, userId, name]\n );\n return { id, name };\n}\n\nasync function getValCollectionIds(userId: string, valId: string): Promise {\n const res = await sqlite.execute(\n `SELECT collection_id FROM val_collections WHERE user_id = ? AND val_id = ?`,\n [userId, valId]\n );\n return res.rows.map((r: any) => r.collection_id as string);\n}\n\nasync function addValToCollection(userId: string, valId: string, collectionId: string) {\n await sqlite.execute(\n `INSERT OR IGNORE INTO val_collections (user_id, val_id, collection_id)\n SELECT ?, ?, id FROM collections WHERE id = ? AND user_id = ?`,\n [userId, valId, collectionId, userId]\n );\n}\n\nasync function removeValFromCollection(userId: string, valId: string, collectionId: string) {\n await sqlite.execute(\n `DELETE FROM val_collections WHERE user_id = ? AND val_id = ? AND collection_id = ?`,\n [userId, 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(session: Awaited>) {\n if (!session?.user) throw new Error(\"Login required\");\n const vt = new ValTown({ bearerToken: session.accessToken });\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: ${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(session.user.id, v.id);\n }\n return mapped;\n}\n\n// --- Routes ---\n\nasync function requireSession(c: any) {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return null;\n return session;\n}\n\napp.get(\"/api/vals\", async (c) => {\n await initDb();\n const session = await requireSession(c);\n if (!session) return c.json({ error: \"Login required\" }, 401);\n try {\n const vals = await getLiveVals(session);\n return c.json({ vals, meta: { count: vals.length, user: session.user.username } });\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 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 const session = await requireSession(c);\n if (!session) return c.json({ error: \"Login required\" }, 401);\n try {\n const cols = await getCollections(session.user.id);\n const vals = await getLiveVals(session);\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 session = await requireSession(c);\n if (!session) return c.json({ error: \"Login required\" }, 401);\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(session.user.id, name);\n return c.json(created, 201);\n});\n\napp.post(\"/api/val-collections\", async (c) => {\n await initDb();\n const session = await requireSession(c);\n if (!session) return c.json({ error: \"Login required\" }, 401);\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(session.user.id, valId, collectionId);\n return c.json({ ok: true });\n});\n\napp.delete(\"/api/val-collections\", async (c) => {\n await initDb();\n const session = await requireSession(c);\n if (!session) return c.json({ error: \"Login required\" }, 401);\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(session.user.id, valId, collectionId);\n return c.json({ ok: true });\n});\n\napp.get(\"/auth/status\", async (c) => {\n const session = await requireSession(c);\n if (!session) return c.json({ authenticated: false }, 401);\n\n const vt = new ValTown({ bearerToken: session.accessToken });\n try {\n const vals = [];\n for await (const val of vt.me.vals.list({})) {\n vals.push({ id: val.id, name: val.name });\n break;\n }\n return c.json({\n authenticated: true,\n user: session.user.username,\n valsProbe: { ok: true, firstVal: vals[0] || null },\n });\n } catch (err: any) {\n return c.json({\n authenticated: true,\n user: session.user.username,\n valsProbe: {\n ok: false,\n message: err?.message || String(err),\n },\n }, 500);\n }\n});\n\napp.get(\"/auth/reset-client\", async (c) => {\n const redirectUri = `${new URL(c.req.url).origin}/auth/callback`;\n await blob.delete(`oauth_client:${redirectUri}`).catch(() => {});\n return c.json({ ok: true, reset: `oauth_client:${redirectUri}` });\n});\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(\"/\", async (c) => {\n const session = await requireSession(c);\n if (!session) return c.redirect(\"/auth/login\");\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 const session = await requireSession(c);\n if (!session) return c.text(\"Login required\", 401);\n try {\n const vals = await getLiveVals(session);\n const cols = await getCollections(session.user.id);\n return c.text(\n JSON.stringify(\n {\n user: session.user.username,\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\nconst handler = oauthMiddleware({\n scopes: [\"openid\", \"offline_access\", \"profile\", \"user_r\", \"project_rw\"],\n}, app.fetch);\n\nexport default function fetch(req: Request) {\n const url = new URL(req.url);\n if (url.pathname.startsWith(\"/auth/\")) {\n const cookie = req.headers.get(\"cookie\") || \"\";\n console.log(\"auth request\", {\n path: url.pathname,\n hasCode: url.searchParams.has(\"code\"),\n hasState: url.searchParams.has(\"state\"),\n hasSessionCookie: cookie.includes(\"vt_session=\"),\n secFetchDest: req.headers.get(\"sec-fetch-dest\"),\n });\n }\n return handler(req);\n}\n","valton-collections",[146],"9bf962e2-da84-4e7a-a2f3-baa5081645b9",["D",1781712188184],5,[28],"6d308fee-c996-4ebc-879c-140e221f870d","client.js","b01e7444-6840-11f1-9eb3-1607ee4eb77e",24,["D",1781476246656],"// 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",[160],"3606d803-0c18-4fc9-b810-1d0d6d34517d","README.md","67e9401a-68c1-11f1-a71b-1607ee4eb77e",36,["D",1781704279983],4,"# Val Collections Dashboard\n\nA personal, interactive dashboard for organizing your [Val Town](https://www.val.town) vals into collections. Built as a Val Town HTTP val with a React frontend.\n\n**Key idea**: Remix (fork) this val to get your own copy, then log in with Val Town. It sees only the logged-in user's vals (via `std/oauth` + the Val Town SDK) and stores collections under that user's ID in the val's private SQLite database.\n\n## Features\n- View all your vals (fetched live via `@valtown/sdk`)\n- Create named collections (persisted in your val's private SQLite)\n- Add / remove vals from collections\n- Click a collection in the sidebar to filter the main list to only the vals in that collection\n- \"Add more vals\" section appears when viewing a specific collection (lists vals not yet in it)\n- Optimistic UI updates for instant feedback (no full page reloads on add/remove)\n- Fully server-rendered initial HTML shell + client-side React for interactivity\n- Works with your real private data (no demo mode)\n\n## How to Use (Remix for Your Own Data)\n\n1. Find the original val on Val Town (search for `dashboard-collections` or visit the author's page).\n2. Click **Remix** (or \"Fork\"). This creates a copy under your username.\n3. Visit the remixed val's URL (it serves the dashboard at the root path).\n4. Log in with Val Town when prompted. The app will load *your* vals and let you create/manage collections scoped to your Val Town user ID.\n\nThat's it! Everything runs in your Val Town context, so:\n- Vals come from `me.vals.list()` using the logged-in user's OAuth access token.\n- Collections live in this val's SQLite, scoped by the logged-in user's Val Town user ID.\n- No copied API keys or owner-runtime fallback are used to list vals.\n\n### Creating a Collection\n- Use the form in the sidebar (under \"COLLECTIONS\").\n- Type a name and submit. The new collection appears immediately (optimistic) and is auto-selected.\n\n### Adding / Removing Vals\n- Click a collection in the sidebar → the grid filters to only its current members (with \"Remove\" buttons).\n- Below the filtered list you'll see an \"Add more vals\" section with the rest of your vals (each with a \"+ Add\" button).\n- Buttons use optimistic updates: the UI changes instantly, then syncs with your DB in the background.\n- Click \"All vals\" to clear the filter and see everything.\n\n### Tips\n- The sidebar always shows live counts.\n- Cards link to the actual val on Val Town.\n- Use `/debug` on the val for a raw dump of what the SDK returns (useful for troubleshooting).\n- All mutations go through simple JSON APIs (`/api/collections`, `/api/val-collections`) so the data layer is easy to inspect or extend.\n\n## Development / Customization\n\nThe val is a small multi-file project:\n\n- `index.ts` – Hono HTTP handler. Serves the HTML shell, the React client at `/client.js`, and all `/api/*` endpoints. Also owns SDK + SQLite logic.\n- `Dashboard.tsx` – Tiny HTML shell (CDNs + root div + script tag).\n- `client.ts` – Exports the full client React app as a string (served as `/client.js`). This is where the interactive UI lives (sidebar filtering, forms, optimistic updates, card rendering, etc.).\n\n### Local Workflow (with vt CLI)\n```bash\nvt clone /dashboard-collections # or the original\ncd dashboard-collections\n# edit files\nvt push\n```\n\n### Remix Notes\n- Every remix gets a fresh copy of the code + its own SQLite DB.\n- The Val Town SDK is called with the current OAuth session's access token, so it lists the logged-in user's vals.\n- Collection rows are filtered by OAuth user ID, so stale or copied rows from another user are not shown.\n- Feel free to customize the React UI in `client.ts`, add more API routes, improve the server rendering in the handler, etc.\n\n## Architecture (Brief)\n- **Backend**: Val Town + Hono + `std/oauth`. Vals loaded via the official SDK (`me.vals.list`) with the logged-in user's OAuth access token. Collections + membership live in `std/sqlite`, scoped by OAuth user ID.\n- **Frontend**: React 18 (loaded via UMD CDN for zero-build). Talks to the same val's `/api/*` routes. State is managed client-side with optimistic updates for add/remove/create.\n- **Why this works per-user**: OAuth provides the current user's access token and user ID. The SDK call uses that token, and SQLite queries filter by that user ID.\n\n## Static Prototypes\nEarly design explorations are available at `/prototypes` on the val. These use completely fake data (no real vals are exposed) and demonstrate the three main concepts we explored:\n\n- **Tags** (lightweight multi-label filtering)\n- **Sections** (presentational grouping)\n- **Hybrid** (sidebar collections + quick filters with filtering)\n\nThese were the original static HTML mocks before the live React version.\n\n## Status\nThis is an exploration / study project (originally based on a saved copy of the Val Town dashboard UI). It is **working** (you can create collections and move vals around with a reasonable React UX) but \"not perfect yet\" – some polish, edge cases, and possible additional features are still open.\n\nContributions / remixes / experiments welcome!\n\n## Links\n- Original Val Town: https://www.val.town\n- SDK docs: https://docs.val.town/reference/api/sdk/\n- SQLite in Val Town: search for `std/sqlite` in the platform\n\nMade with ❤️ for the Val Town community. Remix it and make it yours!\n",[167],"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",[175],"pulls","branches",1,"forks","envVars",{"_190":184,"_192":141},"connections",{"_190":141,"_191":141},"count","unfilledCount","emptyCount",{"_43":174,"_32":175,"_30":176,"_137":-5,"_41":42,"_40":177,"_139":123,"_38":215,"_13":179,"_33":34,"_35":180,"_24":25,"_143":-5,"_200":216,"_27":217},{"_43":166,"_32":167,"_30":168,"_137":-5,"_41":42,"_40":169,"_139":25,"_38":212,"_13":171,"_33":20,"_35":172,"_24":25,"_143":-5,"_200":213,"_27":214},{"_43":159,"_32":160,"_30":161,"_137":-5,"_41":42,"_40":162,"_139":123,"_38":209,"_13":141,"_33":34,"_35":164,"_24":25,"_143":-5,"_200":210,"_27":211},{"_43":155,"_32":28,"_30":31,"_137":-5,"_41":42,"_40":14,"_139":123,"_38":206,"_13":157,"_33":34,"_35":37,"_24":25,"_143":-5,"_200":207,"_27":208},{"_43":145,"_32":146,"_30":147,"_137":-5,"_41":42,"_40":148,"_139":25,"_38":203,"_13":150,"_33":151,"_35":152,"_24":25,"_143":153,"_200":204,"_27":205},{"_43":134,"_32":135,"_30":136,"_137":-5,"_41":42,"_40":138,"_139":123,"_38":199,"_13":141,"_33":34,"_35":142,"_24":25,"_143":-5,"_200":201,"_27":202},["D",1781531909110],"children",[],[135],["D",1781709299706],[],[146],["D",1781712188184],[],[28],["D",1781476246656],[],[160],["D",1781704279983],[],[167],["D",1781476246641],[],[175],["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":256,"_257":258,"_259":260,"_261":25,"_262":25,"_263":25,"_264":123,"_265":-5,"_266":-7,"_267":-7,"_268":141,"_269":25,"_270":25,"_271":-5,"_272":25,"_273":25,"_274":25,"_275":-5},"ENV",{"_227":228,"_229":230,"_231":88,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255},"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 · v42