\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",1729742073227],"version",16,"currentUserHasLiked","likeCount","forkCount",1,"referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_130":131,"_132":133},"handle","all","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvbE1ScGJrMUNLT2dTVzRrVFVid0U5UUpTeCJ9","forkedVal","interval","slug","all/jamz","description","@jsxImportSource https://esm.sh/react","versions",[142,145,149,153,157,162,166,170,174,178,182,186,190,194,198,201,204],{"_118":119,"_143":-5,"_116":144,"_113":111},"prId",["D",1729742073227],{"_118":146,"_143":-5,"_116":147,"_113":148},15,["D",1729742049632],"9fb8a334-91bb-11ef-9e27-de64eea55b61",{"_118":150,"_143":-5,"_116":151,"_113":152},14,["D",1729741924585],"552fbb22-91bb-11ef-b701-de64eea55b61",{"_118":154,"_143":-5,"_116":155,"_113":156},13,["D",1729741917784],"5121f446-91bb-11ef-ae8e-de64eea55b61",{"_118":158,"_143":159,"_116":160,"_113":161},12,"48a26242-91bb-11ef-9422-de64eea55b61",["D",1729741907966],"4b480768-91bb-11ef-9ee6-de64eea55b61",{"_118":163,"_143":-5,"_116":164,"_113":165},11,["D",1729741539284],"6f874a4a-91ba-11ef-bb15-de64eea55b61",{"_118":167,"_143":-5,"_116":168,"_113":169},10,["D",1729741471387],"470f6e3a-91ba-11ef-b92e-de64eea55b61",{"_118":171,"_143":-5,"_116":172,"_113":173},9,["D",1729741445040],"375add08-91ba-11ef-9c6a-de64eea55b61",{"_118":175,"_143":-5,"_116":176,"_113":177},8,["D",1729740959540],"15f97ae4-91b9-11ef-8c59-de64eea55b61",{"_118":179,"_143":-5,"_116":180,"_113":181},7,["D",1729740951056],"10ead688-91b9-11ef-bbca-de64eea55b61",{"_118":183,"_143":-5,"_116":184,"_113":185},6,["D",1729740924565],"0120c1fe-91b9-11ef-ae88-de64eea55b61",{"_118":187,"_143":-5,"_116":188,"_113":189},5,["D",1729740857777],"d951b598-91b8-11ef-a5bd-de64eea55b61",{"_118":191,"_143":-5,"_116":192,"_113":193},4,["D",1729740857728],"d94a41c8-91b8-11ef-99e2-de64eea55b61",{"_118":195,"_143":-5,"_116":196,"_113":197},3,["D",1729739318996],"44226aa6-91b5-11ef-8a19-de64eea55b61",{"_118":91,"_143":-5,"_116":199,"_113":200},["D",1729739171562],"ec41b634-91b4-11ef-af10-de64eea55b61",{"_118":123,"_143":-5,"_116":202,"_113":203},["D",1729739138181],"d85c2f28-91b4-11ef-9d91-de64eea55b61",{"_118":32,"_143":-5,"_116":205,"_113":206},["D",1729739077711],"b4512976-91b4-11ef-ab70-de64eea55b61","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.forks",{"_214":215,"_261":123,"_262":137,"_263":32,"_95":264},"forksList",[216],{"_101":217,"_218":219},"3fd61f5e-f3ff-11ef-8726-569c3dd06744","initialData",{"_99":220,"_96":97,"_101":217,"_103":-5,"_104":-5,"_105":106,"_107":67,"_108":109,"_110":221,"_112":26,"_113":221,"_114":222,"_116":223,"_118":171,"_120":26,"_121":32,"_124":32,"_125":123,"_126":32,"_122":32,"_127":32,"_128":-5,"_20":224,"_134":225,"_135":-7,"_138":139,"_227":-5,"_136":228,"_140":229},"accurateRedMosquito","3e77f900-f401-11ef-b5bc-569c3dd06744","/** @jsxImportSource https://esm.sh/react */\n// Set to true to disable all editing functionality\nconst READ_ONLY = false;\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\n .replace(/\\.[^/.]+$/, \"\")\n .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 }: {\n song: Song;\n onDelete: (id: string) => void;\n onEdit: (song: Song) => void;\n },\n) {\n const [isEditing, setIsEditing] = React.useState(false);\n const [editUrl, setEditUrl] = React.useState(song.url);\n const [editTitle, setEditTitle] = React.useState(song.title);\n const [editTag, setEditTag] = React.useState(song.tag || \"\");\n const [isDeleting, setIsDeleting] = React.useState(false);\n const [isLoading, setIsLoading] = React.useState(false);\n\n const handleDelete = () => {\n if (isDeleting) {\n onDelete(song.id);\n } else {\n setIsDeleting(true);\n setTimeout(() => setIsDeleting(false), 2000);\n }\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setIsLoading(true);\n try {\n await onEdit({ ...song, url: editUrl, title: editTitle, tag: editTag });\n setIsEditing(false);\n } catch (err) {\n console.error(err);\n } finally {\n setIsLoading(false);\n }\n };\n\n if (isEditing) {\n return (\n

\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 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