\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.pulls._index",{"_96":97,"_95":190,"_130":131,"_143":144,"_99":100,"_215":32,"_216":32,"_51":52,"_217":218},{"_99":100,"_96":97,"_101":102,"_103":-5,"_104":-5,"_105":106,"_107":67,"_108":109,"_110":111,"_112":26,"_113":111,"_114":115,"_116":191,"_118":119,"_120":26,"_121":32,"_122":32,"_123":32,"_124":125,"_126":32,"_127":32,"_128":-5,"_20":192,"_134":193,"_140":-7,"_141":142,"_143":144,"_145":194},["D",1740547165181],{"_130":131,"_132":133},{"_113":136,"_130":131,"_99":137,"_118":138,"_139":-5},[195,197,199,201,203,205,207,209,211,213],{"_118":119,"_148":-5,"_116":196,"_113":111},["D",1740547165181],{"_118":151,"_148":-5,"_116":198,"_113":153},["D",1740547153302],{"_118":155,"_148":-5,"_116":200,"_113":157},["D",1740546986685],{"_118":159,"_148":-5,"_116":202,"_113":161},["D",1740546659710],{"_118":163,"_148":-5,"_116":204,"_113":165},["D",1740546615053],{"_118":167,"_148":-5,"_116":206,"_113":169},["D",1740546567368],{"_118":171,"_148":-5,"_116":208,"_113":173},["D",1740546527563],{"_118":91,"_148":-5,"_116":210,"_113":176},["D",1740546521615],{"_118":125,"_148":-5,"_116":212,"_113":179},["D",1740546516242],{"_118":32,"_148":-5,"_116":214,"_113":182},["D",1740546308482],"page","count","prs",[],"routes/_app","actionData","errors"]