\n );\n }\n\n return (\n

{song.title}

\n {new Date(song.created_at).toLocaleDateString()}\n

\n {song.tag && {song.tag}}\n {!READ_ONLY && (\n <>\n \n \n \n )}\n

\n );\n}\n\nfunction App() {\n const [songs, setSongs] = React.useState([]);\n const [sortBy, setSortBy] = React.useState<\"date\" | \"title\">(\"date\");\n const [selectedTag, setSelectedTag] = React.useState(\"\");\n const [isLoading, setIsLoading] = React.useState(true);\n const [error, setError] = React.useState(\"\");\n\n const fetchSongs = async () => {\n try {\n const response = await fetch(\"/api/songs\");\n if (!response.ok) throw new Error(\"Failed to fetch songs\");\n const data = await response.json();\n setSongs(data);\n } catch (err) {\n setError(\"Failed to load songs\");\n } finally {\n setIsLoading(false);\n }\n };\n\n React.useEffect(() => {\n fetchSongs();\n }, []);\n\n const handleAdd = async (song: Omit) => {\n try {\n const response = await fetch(\"/api/songs\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(song),\n });\n if (!response.ok) throw new Error(\"Failed to add song\");\n fetchSongs();\n } catch (err) {\n setError(\"Failed to add song\");\n }\n };\n\n const handleEdit = async (song: Song) => {\n try {\n const response = await fetch(`/api/songs/${song.id}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(song),\n });\n if (!response.ok) throw new Error(\"Failed to update song\");\n fetchSongs();\n } catch (err) {\n setError(\"Failed to update song\");\n }\n };\n\n const handleDelete = async (id: string) => {\n try {\n const response = await fetch(`/api/songs/${id}`, {\n method: \"DELETE\",\n });\n if (!response.ok) throw new Error(\"Failed to delete song\");\n fetchSongs();\n } catch (err) {\n setError(\"Failed to delete song\");\n }\n };\n\n const tags = React.useMemo(() => {\n const tagSet = new Set(songs.map((s) => s.tag).filter(Boolean));\n return Array.from(tagSet);\n }, [songs]);\n\n const filteredAndSortedSongs = React.useMemo(() => {\n let filtered = selectedTag ? songs.filter((s) => s.tag === selectedTag) : songs;\n return [...filtered].sort((a, b) => {\n if (sortBy === \"date\") {\n return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();\n }\n return a.title.localeCompare(b.title);\n });\n }, [songs, sortBy, selectedTag]);\n\n if (isLoading) {\n return (\n

\n sync\n

\n );\n }\n\n return (\n

🎵 Music Player {READ_ONLY && \"(Read Only)\"}

\n {!READ_ONLY && }\n

\n setSortBy(\"date\")}\n >\n Sort by Date\n \n setSortBy(\"title\")}\n >\n Sort by Title\n \n

\n {tags.map(tag => (\n setSelectedTag(selectedTag === tag ? \"\" : tag)}\n >\n {tag}\n \n ))}\n

\n\n {error &&

{error}

}\n\n

\n {filteredAndSortedSongs.map(song => (\n \n ))}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(req: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const SCHEMA_VERSION = 1;\n const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n\n // Create tables if they don't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_songs_${SCHEMA_VERSION} (\n id TEXT PRIMARY KEY,\n title TEXT NOT NULL,\n url TEXT NOT NULL,\n position INTEGER NOT NULL DEFAULT 0,\n tag TEXT,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const url = new URL(req.url);\n\n // API endpoints\n if (url.pathname === \"/api/songs\") {\n if (req.method === \"GET\") {\n const result = await sqlite.execute(\n `SELECT * FROM ${KEY}_songs_${SCHEMA_VERSION} ORDER BY position, created_at DESC`,\n );\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (req.method === \"POST\") {\n const song = await req.json();\n const id = nanoid();\n await sqlite.execute(\n `INSERT INTO ${KEY}_songs_${SCHEMA_VERSION} (id, title, url, position, tag) VALUES (?, ?, ?, ?, ?)`,\n [id, song.title, song.url, song.position, song.tag],\n );\n return new Response(null, { status: 201 });\n }\n }\n\n if (url.pathname.startsWith(\"/api/songs/\")) {\n const id = url.pathname.split(\"/\").pop();\n\n if (req.method === \"PUT\") {\n const song = await req.json();\n await sqlite.execute(\n `UPDATE ${KEY}_songs_${SCHEMA_VERSION} SET title = ?, url = ?, position = ?, tag = ? WHERE id = ?`,\n [song.title, song.url, song.position, song.tag, id],\n );\n return new Response(null, { status: 200 });\n }\n\n if (req.method === \"DELETE\") {\n await sqlite.execute(`DELETE FROM ${KEY}_songs_${SCHEMA_VERSION} WHERE id = ?`, [id]);\n return new Response(null, { status: 200 });\n }\n }\n\n // HTML response\n return new Response(\n `\n \n \n \n Music Player\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\n:root {\n --primary: #7C3AED;\n --primary-light: #DDD6FE;\n --primary-dark: #5B21B6;\n --error: #EF4444;\n --success: #10B981;\n --background: #F9FAFB;\n --surface: #FFFFFF;\n --text: #1F2937;\n --text-secondary: #6B7280;\n --border: #E5E7EB;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background: var(--background);\n color: var(--text);\n line-height: 1.5;\n}\n\n.app-container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n}\n\nheader {\n margin-bottom: 2rem;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 1.5rem;\n color: var(--primary);\n}\n\n.add-song-form {\n background: var(--surface);\n padding: 1.5rem;\n border-radius: 0.75rem;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n margin-bottom: 2rem;\n}\n\n.form-row {\n display: flex;\n gap: 1rem;\n margin-bottom: 1rem;\n}\n\ninput {\n flex: 1;\n padding: 0.75rem;\n border: 1px solid var(--border);\n border-radius: 0.5rem;\n font-size: 1rem;\n}\n\ninput:focus {\n outline: none;\n border-color: var(--primary);\n box-shadow: 0 0 0 3px var(--primary-light);\n}\n\n.header-actions {\n display: flex;\n gap: 1rem;\n flex-wrap: wrap;\n}\n\n.sort-pills,\n.tag-pills {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n}\n\n.pill {\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 9999px;\n background: var(--surface);\n color: var(--text-secondary);\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.pill:hover {\n background: var(--primary-light);\n color: var(--primary);\n}\n\n.pill.active {\n background: var(--primary);\n color: white;\n}\n\n.songs-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 1.5rem;\n}\n\n.song-card {\n background: var(--surface);\n border-radius: 0.75rem;\n padding: 1.5rem;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.card-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 1rem;\n}\n\n.card-title h3 {\n margin: 0;\n font-size: 1.25rem;\n color: var(--text);\n}\n\n.card-title time {\n color: var(--text-secondary);\n font-size: 0.875rem;\n}\n\n.card-actions {\n display: flex;\n gap: 0.5rem;\n}\n\n.edit-btn,\n.remove-btn {\n padding: 0.5rem;\n border: none;\n border-radius: 0.375rem;\n background: transparent;\n color: var(--text-secondary);\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.edit-btn:hover {\n background: var(--primary-light);\n color: var(--primary);\n}\n\n.remove-btn:hover {\n background: #FEE2E2;\n color: var(--error);\n}\n\n.remove-btn.confirm {\n background: var(--error);\n color: white;\n}\n\n.audio-player {\n width: 100%;\n margin-top: 1rem;\n}\n\n.error {\n background: #FEE2E2;\n color: var(--error);\n padding: 1rem;\n border-radius: 0.5rem;\n margin-bottom: 1rem;\n}\n\n.loading {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n 100% { transform: rotate(360deg); }\n}\n\n.loading-spinner {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 200px;\n}\n\n.edit-form {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n@media (max-width: 640px) {\n .app-container {\n padding: 1rem;\n }\n \n .form-row {\n flex-direction: column;\n }\n \n .header-actions {\n flex-direction: column;\n }\n}\n`;","createdAt",["D",1740547165181],"version",9,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_130":131,"_132":133},"handle","all","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvbE1ScGJrMUNLT2dTVzRrVFVid0U5UUpTeCJ9","forkedVal",{"_113":136,"_130":131,"_99":137,"_118":138,"_139":-5},"adc89bb4-91bb-11ef-9b2c-de64eea55b61","jamz",16,"prDisabledHint","interval","slug","all/accurateRedMosquito","description","@jsxImportSource https://esm.sh/react","versions",[147,150,154,158,162,166,170,174,177,180],{"_118":119,"_148":-5,"_116":149,"_113":111},"prId",["D",1740547165181],{"_118":151,"_148":-5,"_116":152,"_113":153},8,["D",1740547153302],"376434b2-f401-11ef-b5bc-569c3dd06744",{"_118":155,"_148":-5,"_116":156,"_113":157},7,["D",1740546986685],"d4145d24-f400-11ef-808d-569c3dd06744",{"_118":159,"_148":-5,"_116":160,"_113":161},6,["D",1740546659710],"1130768a-f400-11ef-89d6-569c3dd06744",{"_118":163,"_148":-5,"_116":164,"_113":165},5,["D",1740546615053],"f691c770-f3ff-11ef-b12e-569c3dd06744",{"_118":167,"_148":-5,"_116":168,"_113":169},4,["D",1740546567368],"da25e968-f3ff-11ef-85d7-569c3dd06744",{"_118":171,"_148":-5,"_116":172,"_113":173},3,["D",1740546527563],"c26c05e6-f3ff-11ef-94d0-569c3dd06744",{"_118":91,"_148":-5,"_116":175,"_113":176},["D",1740546521615],"bedfac02-f3ff-11ef-9680-569c3dd06744",{"_118":125,"_148":-5,"_116":178,"_113":179},["D",1740546516242],"bbaca27e-f3ff-11ef-9635-569c3dd06744",{"_118":32,"_148":-5,"_116":181,"_113":182},["D",1740546308482],"3fd99cc4-f3ff-11ef-8726-569c3dd06744","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_94":190,"_191":192,"_95":193},"single","redirect","/v/all/accurateRedMosquito/versions",{"_113":179,"_114":194,"_118":125,"_116":195,"_196":100,"_101":102,"_108":109,"_130":131,"_11":97,"_197":-5,"_198":-5,"_199":-5,"_187":26,"_141":142},"/** @jsxImportSource https://esm.sh/react */\nconst READ_ONLY = true;\n\nimport { nanoid } from \"https://esm.sh/nanoid\";\nimport React from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\ninterface Song {\n id: string;\n title: string;\n url: string;\n position: number;\n tag?: string;\n created_at: string;\n}\n\nfunction AddSongForm({ onAdd }: { onAdd: (song: Omit) => void }) {\n const [url, setUrl] = React.useState(\"\");\n const [title, setTitle] = React.useState(\"\");\n const [tag, setTag] = React.useState(\"\");\n const [isLoading, setIsLoading] = React.useState(false);\n const [error, setError] = React.useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setIsLoading(true);\n setError(\"\");\n\n try {\n const audio = new Audio(url);\n await new Promise((resolve, reject) => {\n audio.onloadedmetadata = resolve;\n audio.onerror = () => reject(new Error(\"Invalid audio URL\"));\n });\n\n const urlObj = new URL(url);\n const filename = urlObj.pathname.split(\"/\").pop() || \"\";\n const cleanTitle = filename.replace(/\\.[^/.]+$/, \"\").replace(/[-_]/g, \" \");\n\n onAdd({\n url,\n title: title || cleanTitle || url,\n tag,\n position: 0,\n });\n setUrl(\"\");\n setTitle(\"\");\n setTag(\"\");\n } catch (err) {\n setError(\"Please enter a valid audio URL\");\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n \n );\n}\n\nfunction SongCard(\n { song, onDelete, onEdit }: { song: Song; onDelete: (id: string) => void; onEdit: (song: Song) => void },\n) {\n return (\n

{song.title}

\n {new Date(song.created_at).toLocaleDateString()}\n

\n {song.tag && {song.tag}}\n {!READ_ONLY && (\n <>\n \n \n \n )}\n

\n );\n}\n\nfunction App() {\n const [songs, setSongs] = React.useState([]);\n const [isLoading, setIsLoading] = React.useState(true);\n const [error, setError] = React.useState(\"\");\n\n React.useEffect(() => {\n fetch(\"/api/songs\")\n .then((res) => res.json())\n .then((data) => setSongs(data))\n .catch(() => setError(\"Failed to load songs\"))\n .finally(() => setIsLoading(false));\n }, []);\n\n return (\n

🎵 Music Player {READ_ONLY && \"(Read Only)\"}

\n {!READ_ONLY && (\n setSongs([...songs, { ...song, id: nanoid(), created_at: new Date().toISOString() }])}\n />\n )}\n

\n {error &&

{error}

}\n

\n {songs.map((song) => (\n setSongs(songs.filter((s) => s.id !== id))}\n onEdit={(editedSong) => setSongs(songs.map((s) => (s.id === editedSong.id ? editedSong : s)))}\n />\n ))}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nconst css = `\n:root {\n --primary: #6D28D9;\n --primary-light: #A78BFA;\n --background: #F3F4F6;\n --surface: #FFFFFF;\n --text: #1E293B;\n --text-secondary: #64748B;\n --border: #E2E8F0;\n --shadow: rgba(0, 0, 0, 0.1);\n}\n\nbody {\n font-family: 'Inter', sans-serif;\n background: var(--background);\n color: var(--text);\n line-height: 1.6;\n}\n\n.app-container {\n max-width: 900px;\n margin: 0 auto;\n padding: 2rem;\n}\n\nheader {\n text-align: center;\n margin-bottom: 2rem;\n}\n\nh1 {\n font-size: 2.25rem;\n font-weight: 600;\n color: var(--primary);\n}\n\n.add-song-form {\n background: var(--surface);\n padding: 1.5rem;\n border-radius: 12px;\n box-shadow: 0 4px 12px var(--shadow);\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\ninput {\n padding: 0.75rem;\n border: 1px solid var(--border);\n border-radius: 8px;\n font-size: 1rem;\n transition: all 0.2s ease;\n}\n\ninput:focus {\n outline: none;\n border-color: var(--primary);\n box-shadow: 0 0 0 3px var(--primary-light);\n}\n\nbutton {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 8px;\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\nbutton[type=\"submit\"] {\n background: var(--primary);\n color: white;\n font-weight: 600;\n}\n\n.songs-container {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n}\n\n.song-card {\n background: var(--surface);\n border-radius: 12px;\n padding: 1.5rem;\n box-shadow: 0 4px 10px var(--shadow);\n}\n\n.card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n}\n\n.pill {\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 9999px;\n background: var(--primary-light);\n color: white;\n font-weight: 500;\n cursor: pointer;\n}\n\n.audio-player {\n width: 100%;\n margin-top: 1rem;\n border-radius: 6px;\n}\n\n@media (max-width: 640px) {\n .app-container {\n padding: 1rem;\n }\n}\n`;\n\nexport default function server(req: Request): Response {\n return new Response(\n `

`,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}",["D",1740546516242],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

accurateRedMosquito

Version 1