Show featured stations in search tab empty state

static/js/app.js

@@ -831,6 +831,24 @@ const CURATED_LISTS = [
 function initCuratedLists() {
   const container = document.getElementById('curated-lists');
   if (!container) return;
+
+  if (INITIAL_FEATURED && INITIAL_FEATURED.length) {
+    const section = document.createElement('div');
+    section.className = 'curated-section';
+    section.innerHTML = `<div class="curated-label">&#9733; Featured</div>`;
+    const ul = document.createElement('ul');
+    ul.className = 'curated-stations';
+    INITIAL_FEATURED.forEach(s => {
+      const li = document.createElement('li');
+      li.innerHTML = `<button class="btn btn-sm" onclick="playStation('${escapeAttr(s.url)}', '${escapeAttr(s.name)}', null)">▶</button>
+                      <span class="curated-name">${escapeHtml(s.name)}</span>
+                      ${s.description ? `<span class="muted" style="font-size:0.78rem">${escapeHtml(s.description)}</span>` : ''}`;
+      ul.appendChild(li);
+    });
+    section.appendChild(ul);
+    container.appendChild(section);
+  }
+
   CURATED_LISTS.forEach(list => {
     const section = document.createElement('div');
     section.className = 'curated-section';

templates/radio/player.html

@@ -202,6 +202,7 @@
 <script>
   // Pass Django context into JS
   const INITIAL_SAVED = {{ saved_stations|safe }};
+  const INITIAL_FEATURED = {{ featured_stations|safe }};
   const IS_AUTHENTICATED = {{ user.is_authenticated|yesno:"true,false" }};
 </script>
 <script src="/static/js/app.js"></script>