feat: Add faceted search & trending strip to songs page + mobile nav toggle

- Add genre and uploader filters to /songs with persistent query params in pagination
- Implement site-wide "Trending" strip showing recently liked songs
- Introduce responsive hamburger nav for mobile with animated icon & ARIA support
- Refactor song row layout: move duration into separate `.song-duration` element
- Update CSS for mobile grid (2 columns), optimized song rows, and facet selects

public/css/app.css

@@ -122,6 +122,8 @@ a:hover { color: #fff; text-shadow: var(--glow-cyan); text-decoration: none; }
   -webkit-backdrop-filter: blur(6px);
   position: sticky; top: 0;
   z-index: 20;
+  /* Establishes containing block for the mobile nav dropdown */
+  overflow: visible;
 }
 .header-inner {
   display: flex; align-items: center; justify-content: space-between;
@@ -135,6 +137,30 @@ a:hover { color: #fff; text-shadow: var(--glow-cyan); text-decoration: none; }
 }
 .brand:hover { color: #fff; text-shadow: var(--glow-cyan); }
 .nav { display: flex; gap: 1.1rem; align-items: center; }
+
+/* Hamburger toggle — hidden on desktop, shown on mobile */
+.nav-toggle {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.4rem;
+  z-index: 21;
+}
+.nav-toggle-bar {
+  display: block;
+  width: 22px;
+  height: 2px;
+  background: var(--fg);
+  border-radius: 2px;
+  transition: transform .2s, opacity .15s;
+}
+.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
+.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
 .nav a {
   color: var(--muted);
   font-family: 'Orbitron', sans-serif;
@@ -400,7 +426,8 @@ button.linklike.danger:hover { color: #fff; text-shadow: 0 0 6px var(--danger);
 .song-main { flex: 1; min-width: 0; }
 .song-title { display: block; color: var(--fg); font-weight: 600; }
 .song-row:hover .song-title { color: var(--neon-cyan); text-shadow: var(--glow-cyan); }
-.song-meta { width: 60px; text-align: right; font-family: 'Orbitron', monospace; font-size: 0.75rem; color: var(--muted); }
+.song-subtitle { display: flex; align-items: center; gap: 0.4rem; }
+.song-duration { font-family: 'Orbitron', monospace; font-size: 0.75rem; flex-shrink: 0; }
 
 /* ── Now-playing highlight ── */
 @keyframes now-playing-pulse {
@@ -515,6 +542,49 @@ a.detail-creator-card:hover {
 }
 .appears-in-title { font-size: 0.85rem; font-weight: 600; }
 
+/* ---------- Recently liked strip (/songs page) ---------- */
+.liked-strip { margin-bottom: 1.75rem; }
+.liked-strip-heading {
+  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
+  color: var(--muted); margin: 0 0 0.65rem;
+}
+.liked-strip-scroll {
+  display: flex; gap: 0.75rem; overflow-x: auto;
+  padding-bottom: 0.4rem; scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+.liked-card {
+  flex: 0 0 auto; display: flex; align-items: center; gap: 0.55rem;
+  background: var(--bg-panel); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 0.4rem 0.65rem 0.4rem 0.4rem;
+  text-decoration: none; color: var(--fg);
+  min-width: 150px; max-width: 210px;
+  transition: border-color .15s, background .15s;
+}
+.liked-card:hover { border-color: var(--neon-cyan); background: var(--bg-inset); color: var(--fg); text-decoration: none; }
+.liked-card-cover {
+  width: 40px; height: 40px; border-radius: 4px; object-fit: cover; flex-shrink: 0;
+}
+.liked-card-cover--fallback {
+  display: flex; align-items: center; justify-content: center;
+  background: var(--bg-inset); font-size: 1.1rem;
+}
+.liked-card-info { min-width: 0; }
+.liked-card-title  { font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
+.liked-card-artist { font-size: 0.7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
+
+/* ---------- Search facets (/songs page) ---------- */
+.search-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
+.facet-row  { display: flex; gap: 0.6rem; margin-top: 0.5rem; flex-wrap: wrap; }
+.facet-select {
+  background: var(--bg-panel); color: var(--fg);
+  border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 0.35rem 0.65rem; font-size: 0.82rem; cursor: pointer;
+  transition: border-color .15s;
+}
+.facet-select:hover  { border-color: var(--muted); }
+.facet-select:focus  { outline: none; border-color: var(--neon-cyan); }
+
 /* ---------- Forms ---------- */
 .form-card {
   background: var(--bg-panel);
@@ -1805,6 +1875,65 @@ a.detail-creator-card:hover {
   .detail-creator-card { flex-direction: row; align-items: center; gap: 0.6rem; text-align: left; width: 100%; }
   .detail-creator-avatar { width: 48px; height: 48px; }
   .hero h1 { font-size: 1.6rem; }
+
+  /* ── Playlist card grid: 2 per row on mobile ── */
+  .grid { grid-template-columns: repeat(2, 1fr); }
+  .card-body { padding: 0.5rem 0.6rem; }
+  .card-title { font-size: 0.78rem; }
+  .card-creator { display: none; }
+
+  /* ── Mobile song row (Option A) ── */
+  .song-row {
+    display: grid;
+    grid-template-columns: 52px 1fr auto;
+    grid-template-areas:
+      "cover main   play"
+      "cover social play";
+    column-gap: 0.75rem;
+    row-gap: 0.2rem;
+    align-items: start;
+    padding: 0.65rem 0;
+  }
+  .song-row .song-cover  { grid-area: cover; align-self: center; width: 52px; height: 52px; }
+  .song-row .song-main   { grid-area: main;   align-self: center; }
+  .song-row .song-social { grid-area: social; align-self: center; }
+  .song-row .btn-play    { grid-area: play;   align-self: center; padding: 0.35rem 0.5rem; font-size: 0.72rem; }
+  .song-row .eq-bars     { display: none; }
+  .song-row .song-subtitle { justify-content: space-between; }
+
+  /* ── Mobile nav ── */
+  .nav-toggle { display: flex; }
+
+  .nav {
+    display: none;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: rgba(5, 6, 13, 0.97);
+    border-bottom: 1px solid var(--border-strong);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    padding: 0.5rem 1.25rem 1rem;
+    z-index: 19;
+  }
+  .nav.nav--open { display: flex; }
+
+  .nav a, .nav button.linklike {
+    padding: 0.75rem 0;
+    border-bottom: 1px solid var(--border);
+    font-size: 0.85rem;
+    width: 100%;
+    text-align: left;
+  }
+  .nav > *:last-child, .nav .inline-form:last-child a,
+  .nav .inline-form:last-child button { border-bottom: none; }
+  .nav .inline-form { width: 100%; }
+  .nav .btn-small { display: block; width: 100%; text-align: center; margin: 0.25rem 0; }
 }
 
 /* ---------- Reduced motion ---------- */

src/routes/public.js

@@ -47,25 +47,27 @@ router.get('/', (req, res) => {
 });
 
 router.get('/songs', (req, res) => {
-  const loggedIn = !!req.session.user;
+  const loggedIn   = !!req.session.user;
-  const userId = req.session.user?.id || null;
+  const userId     = req.session.user?.id || null;
-  const page = Math.max(1, Number(req.query.page) || 1);
+  const page       = Math.max(1, Number(req.query.page) || 1);
-  const pageSize = 25;
+  const pageSize   = 25;
-  const { rows, total } = songs.list({
+  const q          = req.query.q        || '';
-    q: req.query.q || '',
+  const genre      = req.query.genre    || '';
-    limit: pageSize,
+  const uploadedBy = req.query.uploader || '';
-    offset: (page - 1) * pageSize,
+
-    loggedIn,
+  const { rows, total } = songs.list({ q, genre, uploadedBy, limit: pageSize, offset: (page - 1) * pageSize, loggedIn });
-  });
   social.enrichSongs(rows, userId);
+
+  const genres    = songs.listGenres();
+  const uploaders = songs.listUploaders(loggedIn);
+
+  const recentlyLiked = social.getRecentlyLikedSongs(5, loggedIn).map(songs.toView);
+  social.enrichSongs(recentlyLiked, userId);
+
   res.render('public/songs', {
-    title: 'Songs',
+    title: 'Songs', songs: rows, q, genre, uploadedBy,
-    songs: rows,
+    page, pageSize, total, totalPages: Math.max(1, Math.ceil(total / pageSize)),
-    q: req.query.q || '',
+    genres, uploaders, recentlyLiked,
-    page,
-    pageSize,
-    total,
-    totalPages: Math.max(1, Math.ceil(total / pageSize)),
   });
 });
 

src/services/social.js

@@ -145,9 +145,30 @@ function getLikedPlaylists(userId, loggedIn = false) {
   return (loggedIn ? likedPlaylistsUserStmt : likedPlaylistsGuestStmt).all(userId);
 }
 
+// Site-wide recently liked songs (distinct songs, ordered by most recent like from any user).
+const recentlyLikedGuestStmt = db.prepare(`
+  SELECT s.* FROM songs s
+  WHERE s.visibility = 'public'
+    AND EXISTS (SELECT 1 FROM song_likes sl WHERE sl.song_id = s.id)
+  ORDER BY (SELECT MAX(sl2.created_at) FROM song_likes sl2 WHERE sl2.song_id = s.id) DESC
+  LIMIT ?
+`);
+const recentlyLikedUserStmt = db.prepare(`
+  SELECT s.* FROM songs s
+  WHERE s.visibility IN ('public', 'logged_in')
+    AND EXISTS (SELECT 1 FROM song_likes sl WHERE sl.song_id = s.id)
+  ORDER BY (SELECT MAX(sl2.created_at) FROM song_likes sl2 WHERE sl2.song_id = s.id) DESC
+  LIMIT ?
+`);
+
+function getRecentlyLikedSongs(n = 5, loggedIn = false) {
+  return (loggedIn ? recentlyLikedUserStmt : recentlyLikedGuestStmt).all(n);
+}
+
 module.exports = {
   toggleSongLike, toggleSongFavorite,
   togglePlaylistLike, togglePlaylistFavorite,
   enrichSongs, enrichPlaylists,
   getLikedSongs, getLikedPlaylists,
+  getRecentlyLikedSongs,
 };

src/services/songs.js

@@ -146,18 +146,31 @@ function findById(id) {
 }
 
 // loggedIn=true means the viewer is authenticated (sees public + logged_in).
-function list({ q, limit = 25, offset = 0, loggedIn = false }) {
+// Supports optional genre and uploadedBy filters for faceted browsing.
+function list({ q, genre, uploadedBy, limit = 25, offset = 0, loggedIn = false }) {
+  const vis = loggedIn
+    ? `visibility IN ('public', 'logged_in')`
+    : `visibility = 'public'`;
+  const conds = [vis];
+  const params = { limit, offset };
+
   if (q && q.trim()) {
-    const like = `%${q.trim()}%`;
+    conds.push(`(title LIKE @q OR artist LIKE @q OR album LIKE @q)`);
-    if (loggedIn) {
+    params.q = `%${q.trim()}%`;
-      return { rows: searchUserStmt.all({ q: like, limit, offset }).map(toView), total: countSearchUserStmt.get({ q: like }).c };
-    }
-    return { rows: searchGuestStmt.all({ q: like, limit, offset }).map(toView), total: countSearchGuestStmt.get({ q: like }).c };
   }
-  if (loggedIn) {
+  if (genre) {
-    return { rows: listUserStmt.all(limit, offset).map(toView), total: countUserStmt.get().c };
+    conds.push(`genre = @genre`);
+    params.genre = genre;
   }
-  return { rows: listGuestStmt.all(limit, offset).map(toView), total: countGuestStmt.get().c };
+  if (uploadedBy) {
+    conds.push(`uploaded_by = @uploadedBy`);
+    params.uploadedBy = Number(uploadedBy);
+  }
+
+  const where = `WHERE ${conds.join(' AND ')}`;
+  const rows  = db.prepare(`SELECT * FROM songs ${where} ORDER BY created_at DESC LIMIT @limit OFFSET @offset`).all(params);
+  const total = db.prepare(`SELECT COUNT(*) AS c FROM songs ${where}`).get(params).c;
+  return { rows: rows.map(toView), total };
 }
 
 function listAll() {
@@ -187,4 +200,14 @@ function listGenres() {
   return listGenresStmt.all().map(r => r.genre);
 }
 
-module.exports = { create, update, setCover, remove, findById, findBySlug, list, listAll, listByUser, listPublicByUser, listForManagement, recent, listGenres };
+function listUploaders(loggedIn = false) {
+  const vis = loggedIn ? `IN ('public', 'logged_in')` : `= 'public'`;
+  return db.prepare(`
+    SELECT DISTINCT u.id, u.display_name
+    FROM songs s JOIN users u ON u.id = s.uploaded_by
+    WHERE s.visibility ${vis} AND s.uploaded_by IS NOT NULL
+    ORDER BY u.display_name ASC
+  `).all();
+}
+
+module.exports = { create, update, setCover, remove, findById, findBySlug, toView, list, listAll, listByUser, listPublicByUser, listForManagement, recent, listGenres, listUploaders };

src/views/partials/header.ejs

@@ -1,7 +1,12 @@
 <header class="site-header">
   <div class="container header-inner">
     <a class="brand" href="/">🎵 <%= siteName %></a>
-    <nav class="nav">
+    <button class="nav-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="main-nav">
+      <span class="nav-toggle-bar"></span>
+      <span class="nav-toggle-bar"></span>
+      <span class="nav-toggle-bar"></span>
+    </button>
+    <nav class="nav" id="main-nav">
       <a href="/songs" class="<%= currentPath && currentPath.startsWith('/songs') ? 'active' : '' %>">Songs</a>
       <a href="/playlists" class="<%= currentPath && currentPath.startsWith('/playlists') ? 'active' : '' %>">Playlists</a>
       <a href="/profiles" class="<%= currentPath && currentPath.startsWith('/profiles') ? 'active' : '' %>">Profiles</a>
@@ -27,3 +32,23 @@
     </nav>
   </div>
 </header>
+<script>
+(function () {
+  var btn = document.querySelector('.nav-toggle');
+  var nav = document.getElementById('main-nav');
+  if (!btn || !nav) return;
+  btn.addEventListener('click', function () {
+    var open = nav.classList.toggle('nav--open');
+    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+    btn.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
+  });
+  // Close on any nav link click (covers SPA navigation)
+  nav.addEventListener('click', function (e) {
+    if (e.target.closest('a') || e.target.closest('button[type="submit"]')) {
+      nav.classList.remove('nav--open');
+      btn.setAttribute('aria-expanded', 'false');
+      btn.setAttribute('aria-label', 'Open menu');
+    }
+  });
+})();
+</script>

src/views/partials/song_list.ejs

@@ -10,10 +10,10 @@
         <a class="song-title" href="/songs/<%= s.slug %>"><%= s.title %></a>
         <% if (s.visibility === 'logged_in') { %><span class="badge badge-logged-in">Members</span><% } %>
         <% if (s.visibility === 'private') { %><span class="badge badge-private">Private</span><% } %>
-        <div class="muted small"><%= s.artist %><% if (s.album) { %> · <%= s.album %><% } %></div>
+        <div class="song-subtitle">
-      </div>
+          <span class="muted small"><%= s.artist %><% if (s.album) { %> · <%= s.album %><% } %></span>
-      <div class="song-meta muted small">
+          <% if (s.durationSeconds) { %><span class="song-duration muted small"><%= Math.floor(s.durationSeconds/60) %>:<%= String(s.durationSeconds % 60).padStart(2,'0') %></span><% } %>
-        <% if (s.durationSeconds) { %><%= Math.floor(s.durationSeconds/60) %>:<%= String(s.durationSeconds % 60).padStart(2,'0') %><% } %>
+        </div>
       </div>
       <span class="eq-bars" aria-hidden="true"><span></span><span></span><span></span></span>
       <div class="song-social">

src/views/public/songs.ejs

@@ -1,12 +1,55 @@
 <h1>Songs</h1>
 
+<% if (recentlyLiked && recentlyLiked.length > 0) { %>
+<section class="liked-strip">
+  <h2 class="liked-strip-heading">Trending</h2>
+  <div class="liked-strip-scroll">
+    <% recentlyLiked.forEach((s) => { %>
+      <a href="/songs/<%= s.slug %>" class="liked-card">
+        <% if (s.coverPath) { %>
+          <img src="/media/<%= s.coverPath %>" alt="" class="liked-card-cover">
+        <% } else { %>
+          <div class="liked-card-cover liked-card-cover--fallback">♪</div>
+        <% } %>
+        <span class="liked-card-info">
+          <span class="liked-card-title"><%= s.title %></span>
+          <span class="liked-card-artist"><%= s.artist %></span>
+        </span>
+      </a>
+    <% }) %>
+  </div>
+</section>
+<% } %>
+
 <form method="get" action="/songs" class="search-form">
-  <input type="search" name="q" value="<%= q %>" placeholder="Search title, artist, album…" />
+  <div class="search-row">
-  <button type="submit">Search</button>
+    <input type="search" name="q" value="<%= q %>" placeholder="Search title, artist, album…" />
-  <% if (q) { %><a href="/songs" class="muted small">clear</a><% } %>
+    <button type="submit">Search</button>
+    <% if (q || genre || uploadedBy) { %><a href="/songs" class="muted small">clear</a><% } %>
+  </div>
+  <% if (genres.length > 0 || uploaders.length > 0) { %>
+  <div class="facet-row">
+    <% if (genres.length > 0) { %>
+    <select name="genre" onchange="this.form.submit()" class="facet-select">
+      <option value="">All genres</option>
+      <% genres.forEach((g) => { %>
+        <option value="<%= g %>"<%= genre === g ? ' selected' : '' %>><%= g %></option>
+      <% }) %>
+    </select>
+    <% } %>
+    <% if (uploaders.length > 0) { %>
+    <select name="uploader" onchange="this.form.submit()" class="facet-select">
+      <option value="">All profiles</option>
+      <% uploaders.forEach((u) => { %>
+        <option value="<%= u.id %>"<%= uploadedBy == u.id ? ' selected' : '' %>><%= u.display_name %></option>
+      <% }) %>
+    </select>
+    <% } %>
+  </div>
+  <% } %>
 </form>
 
-<p class="muted small"><%= total %> song<%= total === 1 ? '' : 's' %><% if (q) { %> matching “<%= q %>”<% } %></p>
+<p class="muted small"><%= total %> song<%= total === 1 ? '' : 's' %><% if (q) { %> matching "<%= q %>"<% } %></p>
 
 <% if (songs.length === 0) { %>
   <p class="muted">No songs found.</p>
@@ -15,9 +58,17 @@
 <% } %>
 
 <% if (totalPages > 1) { %>
+  <%
+    const qs = [
+      q          ? 'q='        + encodeURIComponent(q)          : '',
+      genre      ? 'genre='    + encodeURIComponent(genre)      : '',
+      uploadedBy ? 'uploader=' + encodeURIComponent(uploadedBy) : '',
+    ].filter(Boolean).join('&');
+    const pref = qs ? qs + '&' : '';
+  %>
   <nav class="pagination">
-    <% if (page > 1) { %><a href="?<%= q ? 'q=' + encodeURIComponent(q) + '&' : '' %>page=<%= page - 1 %>">← Prev</a><% } %>
+    <% if (page > 1) { %><a href="?<%= pref %>page=<%= page - 1 %>">← Prev</a><% } %>
     <span class="muted">Page <%= page %> / <%= totalPages %></span>
-    <% if (page < totalPages) { %><a href="?<%= q ? 'q=' + encodeURIComponent(q) + '&' : '' %>page=<%= page + 1 %>">Next →</a><% } %>
+    <% if (page < totalPages) { %><a href="?<%= pref %>page=<%= page + 1 %>">Next →</a><% } %>
   </nav>
 <% } %>