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

This commit is contained in:
Hördle Bot
2025-11-21 21:44:16 +01:00
parent 3f544bf77c
commit 75a8a63b21
4 changed files with 69 additions and 17 deletions

View File

@@ -11,7 +11,7 @@ interface Song {
activations: number;
}
type SortField = 'title' | 'artist' | 'createdAt';
type SortField = 'id' | 'title' | 'artist' | 'createdAt';
type SortDirection = 'asc' | 'desc';
export default function AdminPage() {
@@ -210,8 +210,14 @@ export default function AdminPage() {
);
const sortedSongs = [...filteredSongs].sort((a, b) => {
const valA = a[sortField].toLowerCase();
const valB = b[sortField].toLowerCase();
// Handle numeric sorting for ID
if (sortField === 'id') {
return sortDirection === 'asc' ? a.id - b.id : b.id - a.id;
}
// String sorting for other fields
const valA = String(a[sortField]).toLowerCase();
const valB = String(b[sortField]).toLowerCase();
if (valA < valB) return sortDirection === 'asc' ? -1 : 1;
if (valA > valB) return sortDirection === 'asc' ? 1 : -1;
@@ -302,7 +308,12 @@ export default function AdminPage() {
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem' }}>
<thead>
<tr style={{ borderBottom: '2px solid #e5e7eb', textAlign: 'left' }}>
<th style={{ padding: '0.75rem' }}>ID</th>
<th
style={{ padding: '0.75rem', cursor: 'pointer', userSelect: 'none' }}
onClick={() => handleSort('id')}
>
ID {sortField === 'id' && (sortDirection === 'asc' ? '↑' : '↓')}
</th>
<th
style={{ padding: '0.75rem', cursor: 'pointer', userSelect: 'none' }}
onClick={() => handleSort('title')}