feat: add greeting header and recently played row to home screen

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

index.html

@@ -140,7 +140,10 @@
 
       <!-- HOME -->
       <div class="page active" id="page-home">
-        <div class="section-header" style="margin-top:8px"><span class="section-title">Zufällig</span><span class="section-more" onclick="navigate('random')">Mehr</span></div>
+        <div id="home-greeting" class="home-greeting"></div>
+        <div class="section-header" style="margin-top:8px"><span class="section-title">Zuletzt gespielt</span></div>
+        <div class="scroll-row" id="home-recent"></div>
+        <div class="section-header"><span class="section-title">Zufällig</span><span class="section-more" onclick="navigate('random')">Mehr</span></div>
         <div class="scroll-row" id="home-random"></div>
         <div class="section-header"><span class="section-title">Neueste Alben</span><span class="section-more" onclick="navigate('albums')">Mehr</span></div>
         <div class="scroll-row" id="home-newest"></div>

src/views.js

@@ -92,6 +92,13 @@ export async function getArtistImage(artistId) {
 
 // ─── HOME ───
 export async function loadHomeData() {
+  const hour = new Date().getHours();
+  const greeting = hour < 12 ? 'Guten Morgen' : hour < 18 ? 'Guten Tag' : 'Guten Abend';
+  const name = S.cfg.user ? `, ${S.cfg.user}` : '';
+  const el = document.getElementById('home-greeting');
+  if (el) el.textContent = `${greeting}${name} 👋`;
+
+  loadAlbumRow('home-recent',   'getAlbumList2', '&type=recent&size=20');
   loadAlbumRow('home-random',   'getAlbumList2', '&type=random&size=20');
   loadAlbumRow('home-newest',   'getAlbumList2', '&type=newest&size=20');
   loadAlbumRow('home-frequent', 'getAlbumList2', '&type=frequent&size=20');

styles.css

@@ -79,6 +79,9 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
 .page-title em{color:var(--accent);font-style:normal}
 .page-title .blue{color:var(--blue)}
 
+/* ── HOME GREETING ── */
+.home-greeting{font-size:22px;font-weight:700;color:var(--text);padding:18px 0 6px;letter-spacing:-.3px}
+
 /* ── SECTION ── */
 .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;margin-top:24px}
 .section-title{font-size:16px;font-weight:700}