feat: improve UX with modern skip/solve buttons, ID sorting, and URL-safe filenames

app/api/songs/route.ts

@@ -103,7 +103,19 @@ export async function POST(request: Request) {
         if (!title) title = 'Unknown Title';
         if (!artist) artist = 'Unknown Artist';
 
-        const filename = `${Date.now()}-${file.name.replace(/[^a-zA-Z0-9.]/g, '_')}`;
+        // Create URL-safe filename
+        const originalName = file.name.replace(/\.mp3$/i, '');
+        const sanitizedName = originalName
+            .replace(/[^a-zA-Z0-9]/g, '-') // Replace special chars with dash
+            .replace(/-+/g, '-') // Replace multiple dashes with single dash
+            .replace(/^-|-$/g, ''); // Remove leading/trailing dashes
+
+        // Warn if filename was changed
+        if (originalName !== sanitizedName) {
+            validationInfo.warnings.push(`Filename sanitized: "${originalName}" → "${sanitizedName}"`);
+        }
+
+        const filename = `${Date.now()}-${sanitizedName}.mp3`;
         const uploadDir = path.join(process.cwd(), 'public/uploads');
 
         await writeFile(path.join(uploadDir, filename), buffer);