Team Todos

\n {loggedIn ? (\n \n ) : (\n \n Log in with Val Town\n \n )}\n

\n A shared list — everyone can see and check off todos. You can only delete your own.\n

\n\n

\n setText(e.target.value)}\n placeholder=\"What needs doing?\"\n autocomplete=\"off\"\n class=\"flex-1 border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n \n \n\n

\n toggle(todo)}\n class=\"w-4 h-4\"\n />\n \n {todo.text}\n \n \n @{todo.user}\n \n {todo.user === me && (\n remove(todo.id)}\n class=\"text-gray-400 hover:text-red-600\"\n aria-label={`Delete ${todo.text}`}\n >\n ✕\n \n )}\n \n ))}\n

\n\n {todos.length === 0 && (\n

Nothing here yet — add a todo above!

\n )}\n\n

\n View source\n

\n );\n}\n","label",[193,194,68],"frontend","components","pulls","branches",1,"forks","envVars",{"_203":26,"_205":26},"connections",{"_203":26,"_204":26},"count","unfilledCount","emptyCount",{"_36":253,"_13":193,"_66":225,"_46":-5,"_38":39,"_185":188,"_186":121,"_40":254,"_42":26,"_69":250,"_189":-5,"_71":24,"_191":-5,"_219":255,"_17":256},{"_36":248,"_13":194,"_66":184,"_46":225,"_38":39,"_185":43,"_186":121,"_40":249,"_42":26,"_69":250,"_189":-5,"_71":24,"_191":-5,"_219":251,"_17":252},{"_36":183,"_13":68,"_66":67,"_46":184,"_38":39,"_185":100,"_186":121,"_40":245,"_42":188,"_69":70,"_189":190,"_71":24,"_191":-5,"_219":246,"_17":247},{"_36":238,"_13":239,"_66":240,"_46":225,"_38":39,"_185":188,"_186":121,"_40":241,"_42":26,"_69":21,"_189":242,"_71":24,"_191":-5,"_219":243,"_17":244},{"_36":231,"_13":232,"_66":233,"_46":225,"_38":39,"_185":188,"_186":121,"_40":234,"_42":26,"_69":70,"_189":235,"_71":24,"_191":-5,"_219":236,"_17":237},{"_36":222,"_13":223,"_66":224,"_46":225,"_38":39,"_185":226,"_186":121,"_40":227,"_42":197,"_69":70,"_189":228,"_71":24,"_191":-5,"_219":229,"_17":230},{"_36":213,"_13":214,"_66":119,"_46":-5,"_38":39,"_185":147,"_186":121,"_40":215,"_42":216,"_69":217,"_189":218,"_71":24,"_191":-5,"_219":220,"_17":221},"e03afd2f-cccc-4b77-898f-b97ce2675d7f","main.ts",["D",1787168709094],12,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { getOAuthUserData, oauthMiddleware } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\n// Set up the todos table\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS todos (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user TEXT NOT NULL,\n text TEXT NOT NULL,\n done INTEGER DEFAULT 0,\n created_at TEXT DEFAULT (datetime('now'))\n)`);\n\nconst app = new Hono();\n\n// Gate the whole app behind \"Log in with Val Town\".\n// The /auth/* routes are handled by oauthMiddleware before reaching here,\n// so login/logout stay reachable. Everything else requires a session.\napp.use(async (c, next) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return c.redirect(\"/auth/login\");\n await next();\n});\n\n// Identify the current user via \"Log in with Val Town\" OAuth session\nasync function currentUser(c: { req: { raw: Request } }): Promise {\n const session = await getOAuthUserData(c.req.raw);\n return session?.user?.username ?? \"anonymous\";\n}\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ---- API endpoints ----\napp.get(\"/api/me\", async (c) => c.json({ user: await currentUser(c) }));\n\napp.get(\"/api/todos\", async (c) => {\n const result = await sqlite.execute({ sql: `SELECT * FROM todos ORDER BY id DESC LIMIT 100`, args: [] });\n return c.json(result.rows);\n});\n\napp.post(\"/api/todos\", async (c) => {\n const user = await currentUser(c);\n const { text } = await c.req.json();\n if (!text) return c.json({ error: \"text required\" }, 400);\n await sqlite.execute({ sql: `INSERT INTO todos (user, text) VALUES (?, ?)`, args: [user, text] });\n return c.json({ ok: true });\n});\n\napp.delete(\"/api/todos\", async (c) => {\n const user = await currentUser(c);\n const { id } = await c.req.json();\n await sqlite.execute({ sql: `DELETE FROM todos WHERE id = ? AND user = ?`, args: [id, user] });\n return c.json({ ok: true });\n});\n\napp.patch(\"/api/todos\", async (c) => {\n const user = await currentUser(c);\n const { id, done } = await c.req.json();\n await sqlite.execute({ sql: `UPDATE todos SET done = ? WHERE id = ? AND user = ?`, args: [done ? 1 : 0, id, user] });\n return c.json({ ok: true });\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// Wrapped in oauthMiddleware to add /auth/login, /auth/callback, /auth/logout\nexport default oauthMiddleware(app.fetch);\n","children",[],[214],"0c178dec-4137-4ab8-afda-70369d5b6969","root.tsx","01a01b8a-98de-71a9-9b1e-a6842e2760ae","01a01b8a-98dd-7649-bb37-029616a01d29",5,["D",1787168466501],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"\")}\n \n \n \n \n My Todos\n

History · App.tsx