feat: add sort filter chips to albums and favorites views

index.html

@@ -193,6 +193,13 @@
       <!-- ALBUMS -->
       <div class="page" id="page-albums">
         <div class="page-header"><div class="page-title">Alben</div></div>
+        <div id="albums-sort-chips" class="sort-chips">
+          <button class="sort-chip active" data-sort="alphabeticalByName" onclick="loadAlbums('alphabeticalByName')">A–Z</button>
+          <button class="sort-chip" data-sort="alphabeticalByArtist" onclick="loadAlbums('alphabeticalByArtist')">Künstler</button>
+          <button class="sort-chip" data-sort="newest" onclick="loadAlbums('newest')">Neueste</button>
+          <button class="sort-chip" data-sort="recent" onclick="loadAlbums('recent')">Zuletzt gespielt</button>
+          <button class="sort-chip" data-sort="frequent" onclick="loadAlbums('frequent')">Meistgespielt</button>
+        </div>
         <div id="albums-grid" class="grid grid-4"></div>
       </div>
 
@@ -218,6 +225,13 @@
       <!-- STARRED -->
       <div class="page" id="page-starred">
         <div class="page-header"><div class="page-title">Favoriten ⭐</div></div>
+        <div id="starred-sort-chips" class="sort-chips">
+          <button class="sort-chip active" data-sort="newest" onclick="loadStarred('newest')">Neueste</button>
+          <button class="sort-chip" data-sort="oldest" onclick="loadStarred('oldest')">Älteste</button>
+          <button class="sort-chip" data-sort="az" onclick="loadStarred('az')">A–Z</button>
+          <button class="sort-chip" data-sort="artist" onclick="loadStarred('artist')">Künstler</button>
+          <button class="sort-chip" data-sort="plays" onclick="loadStarred('plays')">Meistgespielt</button>
+        </div>
         <div id="starred-songs" class="song-list"></div>
       </div>
 

src/main.js

@@ -15,7 +15,7 @@ import {
   navigate, _navGoBack, _navLoad, onLocalSearch, onMobileSearch,
   onGlobalSearch, s_goArtist, s_goAlbum, playerBarGoArtist, playerBarGoAlbum,
   searchSimilarArtist, searchAndPreview, loadItunesAlbum, expandArtistBio,
-  loadRandom,
+  loadAlbums, loadStarred, loadRandom,
 } from './views.js';
 import { loadSpotifyImporter, resolveSpotifyLink, clearSpotifyPreview, spotifyDlAll } from './spotify.js';
 import {
@@ -282,7 +282,7 @@ Object.assign(window, {
   openSettings, closeSettings, saveSettings, confirmDisconnect, checkBackend,
   openSidebar, closeSidebar, switchNavMode, showCtxMenu,
   // Views
-  loadRandom, loadSpotifyImporter, resolveSpotifyLink, clearSpotifyPreview, spotifyDlAll,
+  loadAlbums, loadStarred, loadRandom, loadSpotifyImporter, resolveSpotifyLink, clearSpotifyPreview, spotifyDlAll,
   executeSpotifyDownload,
   openPlModal, closePlModal, addSongsToPlaylist, createAndAddPlaylist, createPlaylistPrompt,
   showSongInfo, closeInfoModal,

src/views.js

@@ -154,11 +154,16 @@ export async function loadArtists() {
 }
 
 // ─── ALBUMS ───
-export async function loadAlbums() {
+let _albumSort = 'alphabeticalByName';
+
+export async function loadAlbums(type = _albumSort) {
+  _albumSort = type;
+  document.querySelectorAll('#albums-sort-chips .sort-chip').forEach(c =>
+    c.classList.toggle('active', c.dataset.sort === type));
   const g = document.getElementById('albums-grid');
   g.innerHTML = '<div class="spinner"></div>';
   try {
-    const r = await api('getAlbumList2', '&type=alphabeticalByName&size=500');
+    const r = await api('getAlbumList2', `&type=${type}&size=500`);
     g.innerHTML = '';
     (r.albumList2?.album || []).forEach(a => g.appendChild(makeAlbumCard(a)));
   } catch(e) { g.innerHTML = `<p style="color:var(--danger)">${e.message}</p>`; }
@@ -632,12 +637,22 @@ export async function quickPlayAlbum(a) {
 }
 
 // ─── STARRED / RANDOM ───
-export async function loadStarred() {
+let _starredSort = 'newest';
+
+export async function loadStarred(sort = _starredSort) {
+  _starredSort = sort;
+  document.querySelectorAll('#starred-sort-chips .sort-chip').forEach(c =>
+    c.classList.toggle('active', c.dataset.sort === sort));
   const el = document.getElementById('starred-songs');
   el.innerHTML = '<div class="spinner"></div>';
   try {
     const r = await api('getStarred2');
-    const songs = (r.starred2?.song || []).map(s => ({...s,_starred:true}));
+    let songs = (r.starred2?.song || []).map(s => ({...s, _starred: true}));
+    if      (sort === 'newest') songs.sort((a, b) => new Date(b.starred||0) - new Date(a.starred||0));
+    else if (sort === 'oldest') songs.sort((a, b) => new Date(a.starred||0) - new Date(b.starred||0));
+    else if (sort === 'az')     songs.sort((a, b) => (a.title||'').localeCompare(b.title||''));
+    else if (sort === 'artist') songs.sort((a, b) => (a.artist||'').localeCompare(b.artist||''));
+    else if (sort === 'plays')  songs.sort((a, b) => (b.playCount||0) - (a.playCount||0));
     el.innerHTML = '';
     if(!songs.length) { el.innerHTML = '<div class="empty-state"><div class="icon">⭐</div><p>Noch keine Favoriten</p></div>'; return; }
     songs.forEach((s,i) => el.appendChild(makeSongItem(s, i, songs)));

styles.css

@@ -713,6 +713,11 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
 .similar-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
 .similar-chip{padding:6px 12px;background:var(--surface);border:1px solid var(--border2);border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s}
 .similar-chip:hover{border-color:var(--accent);color:var(--accent)}
+.sort-chips{display:flex;flex-wrap:nowrap;gap:6px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
+.sort-chips::-webkit-scrollbar{display:none}
+.sort-chip{padding:6px 14px;background:var(--surface);border:1px solid var(--border2);border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;color:var(--text2);font-family:var(--font);transition:border-color .15s,color .15s,background .15s}
+.sort-chip:hover{border-color:var(--accent);color:var(--accent)}
+.sort-chip.active{background:var(--accent);border-color:var(--accent);color:#000}
 .topsong-item{display:grid;grid-template-columns:28px 44px 1fr auto;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;cursor:pointer;transition:background .15s}
 .topsong-item:hover{background:var(--surface)}
 .topsong-num{font-size:11px;color:var(--text3);font-family:var(--mono);text-align:center}