[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_260":261,"_262":263},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_195":-5,"_20":196,"_22":197,"_198":199,"_200":201,"_26":202,"_24":203,"_204":-5,"_205":-5,"_206":65,"_207":208,"_209":59,"_210":-5,"_211":-5,"_212":213},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","seetyboy0707","name","artist-music-earn","branchName","main","version","path","README.md","project",{"_33":137,"_13":14,"_44":138,"_139":-5,"_140":65,"_141":142,"_143":142,"_144":145,"_146":-5,"_147":148,"_149":56,"_150":59,"_151":-5,"_152":-5,"_153":42,"_154":155,"_156":157,"_158":159,"_160":161,"_162":-5,"_163":164,"_165":164,"_166":167,"_168":167,"_169":167,"_170":164,"_171":164,"_172":173,"_174":175,"_176":177,"_178":65},"tree",[50,51,52,53],"file",{"_33":34,"_35":36,"_37":38,"_13":19,"_39":40,"_41":24,"_17":42,"_43":-5,"_44":45,"_46":47,"_48":-5,"_18":49},"contents",[],"upstream","pull","ahead","behind","envVars","id","40ec05f8-8219-4c56-bf2d-d405f42148ff","branchId","a80d385e-82dc-400f-9953-f549de99067d","fileId","01a026a0-60e1-776d-ae32-33b161e0c861","content","# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"root.tsx\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n root.tsx ← HTML shell (stamps immutable asset URLs)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n","fileType",0,"parentId","createdAt",["D",1787354439816],"branchVersion",1,"label",[19],{"_33":79,"_13":80,"_37":81,"_43":-5,"_35":36,"_46":47,"_58":59,"_44":82,"_17":42,"_41":83,"_39":-5,"_64":65,"_48":-5,"_66":84,"_18":85},{"_33":72,"_13":73,"_37":74,"_43":-5,"_35":36,"_46":47,"_58":59,"_44":75,"_17":42,"_41":24,"_39":76,"_64":65,"_48":-5,"_66":77,"_18":78},{"_33":34,"_13":19,"_37":38,"_43":-5,"_35":36,"_46":47,"_58":59,"_44":69,"_17":42,"_41":24,"_39":40,"_64":65,"_48":-5,"_66":70,"_18":71},{"_33":54,"_13":55,"_37":56,"_43":-5,"_35":36,"_46":57,"_58":59,"_44":60,"_17":61,"_41":62,"_39":63,"_64":65,"_48":-5,"_66":67,"_18":68},"40a14248-f411-4d08-a7f8-02d80f8bdaf4","index.ts","01a026a0-60e1-776d-ae32-36fd7444e775",47,"latest",true,["D",1787356160866],23,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { getOAuthUserData, oauthMiddleware } from \"https://esm.town/v/std/oauth/middleware.ts\";\n\nconst app = new Hono();\n\nasync function initDb() {\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS songs (\n id INTEGER PRIMARY KEY AUTOINCREMENT, artist TEXT NOT NULL, title TEXT NOT NULL,\n genre TEXT NOT NULL, audio_url TEXT NOT NULL, cover_url TEXT, streams INTEGER NOT NULL DEFAULT 0,\n earnings INTEGER NOT NULL DEFAULT 0, created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n )`);\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS artists (\n username TEXT PRIMARY KEY, display_name TEXT, bio TEXT DEFAULT '', avatar_url TEXT DEFAULT '',\n verified INTEGER NOT NULL DEFAULT 0, followers INTEGER NOT NULL DEFAULT 0, created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n )`);\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS likes (\n username TEXT NOT NULL, song_id INTEGER NOT NULL, created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,\n UNIQUE(username,song_id)\n )`);\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS follows (\n follower TEXT NOT NULL, artist TEXT NOT NULL, created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,\n UNIQUE(follower,artist)\n )`);\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS withdrawals (\n id INTEGER PRIMARY KEY AUTOINCREMENT, artist TEXT NOT NULL, amount INTEGER NOT NULL,\n bank_name TEXT, account_number TEXT, status TEXT NOT NULL DEFAULT 'pending', created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n )`);\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS subscriptions (\n id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT NOT NULL UNIQUE, plan TEXT NOT NULL DEFAULT 'free',\n status TEXT NOT NULL DEFAULT 'active', started_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n )`);\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS payment_requests (\n id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT NOT NULL, amount INTEGER NOT NULL,\n reference TEXT NOT NULL, proof_url TEXT, status TEXT NOT NULL DEFAULT 'pending',\n created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP, reviewed_at TEXT\n )`);\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ad_events (\n id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT, placement TEXT NOT NULL, created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n )`);\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS stream_sessions (\n token TEXT PRIMARY KEY, song_id INTEGER NOT NULL, username TEXT, started_at INTEGER NOT NULL,\n completed INTEGER NOT NULL DEFAULT 0, ip_hash TEXT\n )`);\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS reports (\n id INTEGER PRIMARY KEY AUTOINCREMENT, reporter TEXT, song_id INTEGER, reason TEXT NOT NULL,\n details TEXT DEFAULT '', status TEXT NOT NULL DEFAULT 'pending', created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n )`);\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS playlists (\n id INTEGER PRIMARY KEY AUTOINCREMENT, username TEXT NOT NULL, name TEXT NOT NULL,\n created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP, UNIQUE(username,name)\n )`);\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS playlist_songs (\n playlist_id INTEGER NOT NULL, song_id INTEGER NOT NULL, created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,\n UNIQUE(playlist_id,song_id)\n )`);\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS recent_plays (\n username TEXT NOT NULL, song_id INTEGER NOT NULL, played_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n )`);\n const count = await sqlite.execute(\"SELECT COUNT(*) AS count FROM songs\");\n if (Number(count.rows?.[0]?.count ?? 0) === 0) {\n await sqlite.execute({sql:\"INSERT INTO songs (artist,title,genre,audio_url,cover_url) VALUES (?,?,?,?,?)\",args:[\"SEETY BOY\",\"O'CLOCK\",\"Afrobeats\",\"https://cdn.pixabay.com/download/audio/2022/03/15/audio_c8c8a7341a.mp3?filename=afrobeat-hip-hop-112011.mp3\",\"\"]});\n }\n}\nawait initDb();\n\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.get(\"/api/songs\", async (c) => {\n const q = c.req.query(\"q\") ?? \"\";\n const result = await sqlite.execute({sql:\"SELECT * FROM songs WHERE title LIKE ? OR artist LIKE ? OR genre LIKE ? ORDER BY created_at DESC\",args:[`%${q}%`,`%${q}%`,`%${q}%`]});\n return c.json(result.rows);\n});\n\napp.get(\"/api/trending\", async (c) => {\n const r=await sqlite.execute(\"SELECT * FROM songs ORDER BY streams DESC, created_at DESC LIMIT 20\"); return c.json(r.rows);\n});\n\napp.get(\"/api/new-releases\", async (c) => {\n const r=await sqlite.execute(\"SELECT * FROM songs ORDER BY created_at DESC LIMIT 20\"); return c.json(r.rows);\n});\n\napp.get(\"/api/playlists\", async (c) => {\n const session=await getOAuthUserData(c.req.raw); if(!session?.user) return c.json({error:\"Login required\"},401);\n const username=session.user.username??\"User\";\n const r=await sqlite.execute({sql:\"SELECT p.*,COUNT(ps.song_id) AS song_count FROM playlists p LEFT JOIN playlist_songs ps ON ps.playlist_id=p.id WHERE p.username=? GROUP BY p.id ORDER BY p.created_at DESC\",args:[username]}); return c.json(r.rows);\n});\n\napp.post(\"/api/playlists\", async (c) => {\n const session=await getOAuthUserData(c.req.raw); if(!session?.user) return c.json({error:\"Login required\"},401);\n const name=String((await c.req.json()).name??\"\").trim(); if(!name) return c.json({error:\"Playlist name is required\"},400);\n const username=session.user.username??\"User\"; await sqlite.execute({sql:\"INSERT OR IGNORE INTO playlists (username,name) VALUES (?,?)\",args:[username,name]});\n const r=await sqlite.execute({sql:\"SELECT * FROM playlists WHERE username=? AND name=?\",args:[username,name]}); return c.json({ok:true,playlist:r.rows?.[0]});\n});\n\napp.post(\"/api/playlists/:id/songs\", async (c) => {\n const session=await getOAuthUserData(c.req.raw); if(!session?.user) return c.json({error:\"Login required\"},401);\n const id=Number(c.req.param(\"id\")), songId=Number((await c.req.json()).songId); const username=session.user.username??\"User\";\n const p=await sqlite.execute({sql:\"SELECT id FROM playlists WHERE id=? AND username=?\",args:[id,username]}); if(!p.rows?.length) return c.json({error:\"Playlist not found\"},404);\n await sqlite.execute({sql:\"INSERT OR IGNORE INTO playlist_songs (playlist_id,song_id) VALUES (?,?)\",args:[id,songId]}); return c.json({ok:true});\n});\n\napp.get(\"/api/recently-played\", async (c) => {\n const session=await getOAuthUserData(c.req.raw); if(!session?.user) return c.json([]);\n const r=await sqlite.execute({sql:\"SELECT s.*,MAX(rp.played_at) AS last_played FROM recent_plays rp JOIN songs s ON s.id=rp.song_id WHERE rp.username=? GROUP BY s.id ORDER BY last_played DESC LIMIT 20\",args:[session.user.username??\"User\"]}); return c.json(r.rows);\n});\n\napp.post(\"/api/recently-played/:id\", async (c) => {\n const session=await getOAuthUserData(c.req.raw); if(!session?.user) return c.json({error:\"Login required\"},401);\n await sqlite.execute({sql:\"INSERT INTO recent_plays (username,song_id) VALUES (?,?)\",args:[session.user.username??\"User\",Number(c.req.param(\"id\"))]}); return c.json({ok:true});\n});\n\napp.post(\"/api/stream/start/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n if (!Number.isInteger(id)) return c.json({error:\"Invalid song\"},400);\n const song = await sqlite.execute({sql:\"SELECT id FROM songs WHERE id=?\",args:[id]});\n if (!song.rows?.length) return c.json({error:\"Song not found\"},404);\n const session = await getOAuthUserData(c.req.raw);\n const username = session?.user?.username ?? null;\n const token = crypto.randomUUID();\n await sqlite.execute({sql:\"INSERT INTO stream_sessions (token,song_id,username,started_at) VALUES (?,?,?,?)\",args:[token,id,username,Date.now()]});\n return c.json({ok:true,token,minimumSeconds:30});\n});\n\napp.post(\"/api/stream/complete\", async (c) => {\n const body = await c.req.json(); const token=String(body.token??\"\");\n const r=await sqlite.execute({sql:\"SELECT * FROM stream_sessions WHERE token=?\",args:[token]}); const s=r.rows?.[0];\n if (!s || Number(s.completed)===1) return c.json({error:\"Invalid or already completed stream\"},400);\n if (Date.now()-Number(s.started_at)<30000) return c.json({error:\"Keep listening for at least 30 seconds\"},400);\n await sqlite.execute({sql:\"UPDATE stream_sessions SET completed=1 WHERE token=?\",args:[token]});\n await sqlite.execute({sql:\"UPDATE songs SET streams=streams+1, earnings=earnings+10 WHERE id=?\",args:[s.song_id]});\n return c.json({ok:true,rate:10});\n});\n\napp.post(\"/api/stream/:id\", async (c) => c.json({error:\"Use stream start and complete\"},410));\n\napp.post(\"/api/reports\", async (c) => {\n const session=await getOAuthUserData(c.req.raw); const body=await c.req.json(); const songId=Number(body.songId);\n if (!Number.isInteger(songId) || !String(body.reason??\"\").trim()) return c.json({error:\"Song and reason are required\"},400);\n await sqlite.execute({sql:\"INSERT INTO reports (reporter,song_id,reason,details) VALUES (?,?,?,?)\",args:[session?.user?.username??null,songId,String(body.reason).trim(),String(body.details??\"\").trim()]});\n return c.json({ok:true,message:\"Report submitted for review\"});\n});\n\napp.get(\"/terms\", (c) => c.html(`

MELORY Terms of Use

Users must only upload music and artwork they have the right to distribute. Fraudulent streams, fake payments, copyright infringement and abuse are prohibited. MELORY may remove content or suspend accounts that violate these rules.

Artist earnings

Only verified streams and approved revenue sources may qualify for royalties. Rates may change based on actual platform revenue and the published royalty policy.

Payments

Manual subscription payments require administrative verification. Submitting false payment evidence is prohibited.

`));\napp.get(\"/privacy\", (c) => c.html(`

MELORY Privacy

MELORY may store account, music, stream, payment and moderation data needed to operate the service. Payment references and withdrawal details are used for verification and payout administration.

We use reasonable measures to protect stored information and retain records only as needed for platform operations, fraud prevention and legal obligations.

`));\n\napp.post(\"/api/upload\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return c.json({error:\"Login required\"},401);\n const form = await c.req.formData();\n const file = form.get(\"audio\");\n if (!(file instanceof File)) return c.json({error:\"MP3 file is required\"},400);\n if (file.type !== \"audio/mpeg\" && !file.name.toLowerCase().endsWith(\".mp3\")) return c.json({error:\"Only MP3 files are allowed\"},400);\n if (file.size > 10 * 1024 * 1024) return c.json({error:\"MP3 must be 10MB or smaller\"},400);\n const safeName = file.name.replace(/[^a-zA-Z0-9._-]/g,\"_\");\n const key = `audio/${crypto.randomUUID()}-${safeName}`;\n await blob.set(key, file);\n const cover = form.get(\"cover\");\n let coverUrl = \"\";\n if (cover instanceof File) {\n if (![\"image/jpeg\",\"image/png\",\"image/webp\"].includes(cover.type)) return c.json({error:\"Cover must be JPG, PNG or WebP\"},400);\n if (cover.size > 5 * 1024 * 1024) return c.json({error:\"Cover art must be 5MB or smaller\"},400);\n const coverName = cover.name.replace(/[^a-zA-Z0-9._-]/g,\"_\");\n const coverKey = `covers/${crypto.randomUUID()}-${coverName}`;\n await blob.set(coverKey, cover);\n coverUrl = `/api/cover/${encodeURIComponent(coverKey)}`;\n }\n return c.json({ok:true,audioUrl:`/api/audio/${encodeURIComponent(key)}`,coverUrl});\n});\n\napp.get(\"/api/cover/:key{.+}\", async (c) => {\n const key = decodeURIComponent(c.req.param(\"key\"));\n if (!key.startsWith(\"covers/\")) return c.json({error:\"Not found\"},404);\n try { const stored = await blob.get(key); return new Response(stored.body,{headers:{\"Content-Type\":stored.contentType || \"image/jpeg\",\"Cache-Control\":\"public, max-age=31536000, immutable\"}}); }\n catch { return c.json({error:\"Cover not found\"},404); }\n});\n\napp.get(\"/api/audio/:key{.+}\", async (c) => {\n const key = decodeURIComponent(c.req.param(\"key\"));\n if (!key.startsWith(\"audio/\")) return c.json({error:\"Not found\"},404);\n try {\n const stored = await blob.get(key);\n return new Response(stored.body,{headers:{\"Content-Type\":\"audio/mpeg\",\"Cache-Control\":\"public, max-age=31536000, immutable\"}});\n } catch { return c.json({error:\"Audio not found\"},404); }\n});\n\napp.post(\"/api/songs\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return c.json({error:\"Login required\"},401);\n const body = await c.req.json();\n const title = String(body.title ?? \"\").trim();\n const genre = String(body.genre ?? \"Afrobeats\").trim();\n const audioUrl = String(body.audioUrl ?? \"\").trim();\n const coverUrl = String(body.coverUrl ?? \"\").trim();\n if (!title || !audioUrl) return c.json({error:\"Title and uploaded audio are required\"},400);\n await sqlite.execute({sql:\"INSERT INTO songs (artist,title,genre,audio_url,cover_url) VALUES (?,?,?,?,?)\",args:[session.user.username ?? \"Artist\",title,genre,audioUrl,coverUrl]});\n return c.json({ok:true});\n});\n\napp.get(\"/api/monetization\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n const username = session?.user?.username ?? null;\n let plan = \"free\";\n if (username) {\n const r = await sqlite.execute({sql:\"SELECT plan,status FROM subscriptions WHERE username=?\",args:[username]});\n plan = String(r.rows?.[0]?.plan ?? \"free\");\n }\n return c.json({adsEnabled: plan !== \"premium\", subscription:{plan,price:1500,currency:\"NGN\",interval:\"month\"},royaltyPoolPercent:50});\n});\n\napp.post(\"/api/ad-event\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n const body = await c.req.json().catch(()=>({}));\n await sqlite.execute({sql:\"INSERT INTO ad_events (username,placement) VALUES (?,?)\",args:[session?.user?.username ?? null,String(body.placement ?? \"unknown\")]});\n return c.json({ok:true});\n});\n\napp.post(\"/api/subscribe\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return c.json({error:\"Login required\"},401);\n const username = session.user.username ?? \"Artist\";\n const body = await c.req.json();\n const reference = String(body.reference ?? \"\").trim();\n const proofUrl = String(body.proofUrl ?? \"\").trim();\n if (!reference) return c.json({error:\"Transfer reference is required\"},400);\n await sqlite.execute({sql:\"INSERT INTO payment_requests (username,amount,reference,proof_url) VALUES (?,?,?,?)\",args:[username,1500,reference,proofUrl]});\n return c.json({ok:true,status:\"pending\",message:\"Payment submitted for admin approval.\"});\n});\n\napp.get(\"/api/admin/withdrawals\", async (c) => {\n const session = await getOAuthUserData(c.req.raw); if (session?.user?.username !== \"seetyboy0707\") return c.json({error:\"Admin only\"},403);\n const r=await sqlite.execute(\"SELECT * FROM withdrawals ORDER BY created_at DESC\"); return c.json(r.rows);\n});\n\napp.post(\"/api/admin/withdrawals/:id\", async (c) => {\n const session = await getOAuthUserData(c.req.raw); if (session?.user?.username !== \"seetyboy0707\") return c.json({error:\"Admin only\"},403);\n const id=Number(c.req.param(\"id\")); const body=await c.req.json(); const status=body.status===\"paid\"?\"paid\":body.status===\"rejected\"?\"rejected\":\"pending\";\n await sqlite.execute({sql:\"UPDATE withdrawals SET status=? WHERE id=?\",args:[status,id]}); return c.json({ok:true,status});\n});\n\napp.get(\"/api/admin/reports\", async (c) => {\n const session=await getOAuthUserData(c.req.raw); if(session?.user?.username!==\"seetyboy0707\") return c.json({error:\"Admin only\"},403);\n const r=await sqlite.execute(\"SELECT r.*,s.title,s.artist FROM reports r LEFT JOIN songs s ON s.id=r.song_id ORDER BY r.created_at DESC\"); return c.json(r.rows);\n});\n\napp.post(\"/api/admin/reports/:id\", async (c) => {\n const session=await getOAuthUserData(c.req.raw); if(session?.user?.username!==\"seetyboy0707\") return c.json({error:\"Admin only\"},403);\n const id=Number(c.req.param(\"id\")); const body=await c.req.json(); const status=[\"pending\",\"reviewed\",\"removed\",\"dismissed\"].includes(body.status)?body.status:\"reviewed\";\n await sqlite.execute({sql:\"UPDATE reports SET status=? WHERE id=?\",args:[status,id]}); return c.json({ok:true,status});\n});\n\napp.get(\"/api/admin/payments\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n const admin = session?.user?.username;\n if (admin !== \"seetyboy0707\") return c.json({error:\"Admin only\"},403);\n const r = await sqlite.execute(\"SELECT * FROM payment_requests ORDER BY created_at DESC\");\n return c.json(r.rows);\n});\n\napp.post(\"/api/admin/payments/:id\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (session?.user?.username !== \"seetyboy0707\") return c.json({error:\"Admin only\"},403);\n const id = Number(c.req.param(\"id\"));\n const body = await c.req.json();\n const status = body.status === \"approved\" ? \"approved\" : \"rejected\";\n const r = await sqlite.execute({sql:\"SELECT username FROM payment_requests WHERE id=?\",args:[id]});\n const username = r.rows?.[0]?.username;\n if (!username) return c.json({error:\"Payment not found\"},404);\n await sqlite.execute({sql:\"UPDATE payment_requests SET status=?,reviewed_at=CURRENT_TIMESTAMP WHERE id=?\",args:[status,id]});\n if (status === \"approved\") await sqlite.execute({sql:\"INSERT INTO subscriptions (username,plan,status) VALUES (?,'premium','active') ON CONFLICT(username) DO UPDATE SET plan='premium',status='active',started_at=CURRENT_TIMESTAMP\",args:[username]});\n return c.json({ok:true,status});\n});\n\napp.get(\"/api/artist/:username\", async (c) => {\n const username = decodeURIComponent(c.req.param(\"username\"));\n const r = await sqlite.execute({sql:\"SELECT * FROM artists WHERE username=?\",args:[username]});\n const songs = await sqlite.execute({sql:\"SELECT * FROM songs WHERE artist=? ORDER BY created_at DESC\",args:[username]});\n const followers = await sqlite.execute({sql:\"SELECT COUNT(*) AS count FROM follows WHERE artist=?\",args:[username]});\n return c.json({artist:r.rows?.[0] ?? {username,display_name:username,bio:\"\",verified:0},songs:songs.rows,followers:Number(followers.rows?.[0]?.count ?? 0)});\n});\n\napp.post(\"/api/artist/profile\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return c.json({error:\"Login required\"},401);\n const username = session.user.username ?? \"Artist\"; const body = await c.req.json();\n await sqlite.execute({sql:\"INSERT INTO artists (username,display_name,bio,avatar_url) VALUES (?,?,?,?) ON CONFLICT(username) DO UPDATE SET display_name=?,bio=?,avatar_url=?\",args:[username,String(body.displayName??username),String(body.bio??\"\"),String(body.avatarUrl??\"\"),String(body.displayName??username),String(body.bio??\"\"),String(body.avatarUrl??\"\")]});\n return c.json({ok:true});\n});\n\napp.post(\"/api/songs/:id/like\", async (c) => {\n const session = await getOAuthUserData(c.req.raw); if (!session?.user) return c.json({error:\"Login required\"},401);\n const username=session.user.username??\"User\"; const id=Number(c.req.param(\"id\"));\n const existing=await sqlite.execute({sql:\"SELECT 1 FROM likes WHERE username=? AND song_id=?\",args:[username,id]});\n if (existing.rows?.length) await sqlite.execute({sql:\"DELETE FROM likes WHERE username=? AND song_id=?\",args:[username,id]}); else await sqlite.execute({sql:\"INSERT INTO likes (username,song_id) VALUES (?,?)\",args:[username,id]});\n const count=await sqlite.execute({sql:\"SELECT COUNT(*) AS count FROM likes WHERE song_id=?\",args:[id]}); return c.json({ok:true,liked:!existing.rows?.length,likes:Number(count.rows?.[0]?.count??0)});\n});\n\napp.post(\"/api/artists/:username/follow\", async (c) => {\n const session = await getOAuthUserData(c.req.raw); if (!session?.user) return c.json({error:\"Login required\"},401);\n const follower=session.user.username??\"User\", artist=decodeURIComponent(c.req.param(\"username\"));\n const existing=await sqlite.execute({sql:\"SELECT 1 FROM follows WHERE follower=? AND artist=?\",args:[follower,artist]});\n if (existing.rows?.length) { await sqlite.execute({sql:\"DELETE FROM follows WHERE follower=? AND artist=?\",args:[follower,artist]}); } else { await sqlite.execute({sql:\"INSERT INTO follows (follower,artist) VALUES (?,?)\",args:[follower,artist]}); }\n const count=await sqlite.execute({sql:\"SELECT COUNT(*) AS count FROM follows WHERE artist=?\",args:[artist]}); return c.json({ok:true,following:!existing.rows?.length,followers:Number(count.rows?.[0]?.count??0)});\n});\n\napp.get(\"/api/me\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return c.json({loggedIn:false});\n const artist = session.user.username ?? \"Artist\";\n const result = await sqlite.execute({sql:\"SELECT COALESCE(SUM(streams),0) AS streams, COALESCE(SUM(earnings),0) AS earnings, COUNT(*) AS songs FROM songs WHERE artist=?\",args:[artist]});\n const withdrawals = await sqlite.execute({sql:\"SELECT * FROM withdrawals WHERE artist=? ORDER BY created_at DESC\",args:[artist]});\n return c.json({loggedIn:true,user:session.user,stats:result.rows?.[0],withdrawals:withdrawals.rows});\n});\n\napp.post(\"/api/withdraw\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return c.json({error:\"Login required\"},401);\n const body = await c.req.json();\n const amount = Number(body.amount);\n if (!Number.isFinite(amount) || amount < 1000) return c.json({error:\"Minimum withdrawal is ₦1,000\"},400);\n await sqlite.execute({sql:\"INSERT INTO withdrawals (artist,amount,bank_name,account_number) VALUES (?,?,?,?)\",args:[session.user.username ?? \"Artist\",Math.floor(amount),String(body.bankName ?? \"\"),String(body.accountNumber ?? \"\")]});\n return c.json({ok:true});\n});\n\napp.onError((err) => Promise.reject(err));\nexport default oauthMiddleware(app.fetch);\n","deleted",false,"children",[],[55],["D",1787354439816],[],[19],"0a85a88e-c712-467d-87ca-e08ad5702665","CHANGELOG.md","01a026a0-60e1-776d-ae32-2f1b5fb7acdc",["D",1787354439816],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @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(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n