Restore static/hot_multi.js from commit 0280ca5 (v1: 3 topics, no pagination)

static/hot_multi.js

@@ -1,6 +1,5 @@
 // === OVERRIDE: loadHotTopics loads from MULTIPLE hashtags ===
 // This file loaded AFTER app_v2.js, overrides the function
-// FIX v2: 5 topics, hiển thị ngày, nút tải thêm
 
 async function loadHotTopics(){
   const j=await fetch('/api/hot_topics').then(r=>r.json()).catch(()=>({topics:[]}));
@@ -10,77 +9,41 @@ async function loadHotTopics(){
     const topicText=t.topic||t.label.replace(/^#/,'');
     return`<button class="hot-chip" onclick="searchTopic('${topicText.replace(/'/g,"\\'")}')">${esc(t.label)}</button>`;
   }).join('');
-  // Load tin HOT = tổng hợp từ TOP 5 hashtag nóng nhất
+  // Load tin HOT = tổng hợp từ TOP 3 hashtag nóng nhất
   if(topics.length>=2){
-    loadMultiHashtag(topics.slice(0,7).map(t=>t.topic||t.label.replace(/^#/,'')));
+    loadMultiHashtag(topics.slice(0,3).map(t=>t.topic||t.label.replace(/^#/,'')));
   }else if(topics.length){
     searchTopic(topics[0].topic||topics[0].label.replace(/^#/,''));
   }
 }
 
-// Global state for pagination
-var _htMultiPage = 0;
-var _htMultiTopics = [];
-var _htMultiAll = [];
-
 async function loadMultiHashtag(topicList){
   const box=document.getElementById('hashtag-box');if(!box)return;
-  _htMultiTopics = topicList.slice(0,5); // Limit to 5 topics
-  _htMultiPage = 0;
-  _htMultiAll = [];
-  box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT tổng hợp <span style="font-size:10px;color:#888">(5 chủ đề nóng nhất)</span></h3><div class="hashtag-loading"><div class="hashtag-spinner"></div>Đang tổng hợp từ 5 chủ đề nóng nhất...</div></div>`;
-  _htMultiLoadPage(0, true);
-}
-
-async function _htMultiLoadPage(page, replace){
-  const box=document.getElementById('hashtag-box');if(!box)return;
+  box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT tổng hợp</h3><div class="hashtag-loading"><div class="hashtag-spinner"></div>Tổng hợp từ ${topicList.length} chủ đề nóng nhất...</div></div>`;
   try{
-    // Use the new aggregated endpoint with pagination
-    const r=await fetch(`/api/hashtag/multi?page=${page}&per_page=12`);
-    const j=await r.json();
-    if(!j.sources||!j.sources.length){
-      if(replace)box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT tổng hợp</h3><div style="color:#888;padding:8px">Đang cập nhật...</div></div>`;
-      return;
+    const results=await Promise.all(topicList.map(topic=>
+      fetch(`/api/hashtag/sources?topic=${encodeURIComponent(topic)}&page=0`).then(r=>r.json()).catch(()=>({sources:[]}))
+    ));
+    // Interleave from all topics
+    const all=[];const seen=new Set();
+    const mx=Math.max(...results.map(r=>(r.sources||[]).length));
+    for(let i=0;i<mx;i++){
+      for(let j=0;j<results.length;j++){
+        const src=(results[j].sources||[])[i];
+        if(src&&src.url&&!seen.has(src.url)){seen.add(src.url);src._topic=topicList[j];all.push(src);}
+      }
     }
-    if(replace) _htMultiAll = [];
-    _htMultiAll = _htMultiAll.concat(j.sources);
-    _htMultiPage = page;
-    
-    let h=`<div class="hashtag-sources"><h3>🔥 Tin HOT tổng hợp <span style="font-size:10px;color:#888">(${j.total} bài · ${j.topics.length} chủ đề)</span></h3><div id="ht-list">`;
-    _htMultiAll.forEach((s,i)=>{
-      const dateStr = s.date ? `<span style="font-size:9px;color:#777;margin-left:4px">${esc(s.date)}</span>` : '';
-      h+=`<div class="hashtag-src-item" onclick="readArticle('${esc(s.url)}')"><div class="hashtag-src-img" id="ht-img-m-${i}"></div><div class="hashtag-src-text"><div class="hashtag-src-title">${esc(s.title)}</div><div class="hashtag-src-via">${esc(s.via||'')}${dateStr} · <span style="color:#f0c040;font-size:9px">#${esc(s._topic||'')}</span></div></div></div>`;
+    if(!all.length){box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT</h3><div style="color:#888;padding:8px">Đang cập nhật...</div></div>`;return;}
+    let h=`<div class="hashtag-sources"><h3>🔥 Tin HOT tổng hợp <span style="font-size:10px;color:#888">(${all.length} bài · ${topicList.length} chủ đề)</span></h3><div id="ht-list">`;
+    all.slice(0,12).forEach((s,i)=>{
+      h+=`<div class="hashtag-src-item" onclick="readArticle('${esc(s.url)}')"><div class="hashtag-src-img" id="ht-img-${i}"></div><div class="hashtag-src-text"><div class="hashtag-src-title">${esc(s.title)}</div><div class="hashtag-src-via">${esc(s.via||'')} · <span style="color:#f0c040;font-size:9px">#${esc(s._topic||'')}</span></div></div></div>`;
     });
-    h+=`</div>`;
-    // Load more button
-    if(j.has_more){
-      h+=`<button class="hashtag-load-more" id="ht-load-more-btn" onclick="_htMultiLoadMore()">📥 Tải thêm (${j.total - _htMultiAll.length} bài còn lại)</button>`;
-    }else{
-      h+=`<div style="text-align:center;color:#555;font-size:10px;margin-top:8px">Đã hiển thị tất cả ${_htMultiAll.length} bài</div>`;
-    }
-    // Topic chips
-    h+=`<div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:8px">`;
-    j.topics.forEach(t=>{h+=`<button class="hot-chip" onclick="searchTopic('${t.replace(/'/g,"\\'")}')" style="font-size:10px">🔍 #${esc(t)}</button>`;});
+    h+=`</div><div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:8px">`;
+    topicList.forEach(t=>{h+=`<button class="hot-chip" onclick="searchTopic('${t.replace(/'/g,"\\'")}')" style="font-size:10px">🔍 #${esc(t)}</button>`;});
     h+=`</div></div>`;
     box.innerHTML=h;
     // Lazy load images
-    _htMultiAll.forEach((s,i)=>{
-      if(!s.url)return;
-      fetch('/api/article?url='+encodeURIComponent(s.url)).then(r=>r.json()).then(d=>{
-        if(d&&(d.og_image||d.img)){
-          const el=document.getElementById('ht-img-m-'+i);
-          if(el)el.innerHTML=`<img src="${esc(d.og_image||d.img)}" onerror="this.style.display='none'">`;
-        }
-      }).catch(()=>{});
-    });
-    _htMultiTopics = j.topics || _htMultiTopics;
-  }catch(e){
-    if(replace)box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT</h3><div style="color:#e74c3c;padding:8px">Lỗi tải tin: ${e.message}</div></div>`;
-  }
-}
-
-async function _htMultiLoadMore(){
-  const btn=document.getElementById('ht-load-more-btn');
-  if(btn){btn.disabled=true;btn.textContent='Đang tải...';}
-  await _htMultiLoadPage(_htMultiPage + 1, false);
+    all.slice(0,12).forEach((s,i)=>{if(!s.url)return;fetch('/api/article?url='+encodeURIComponent(s.url)).then(r=>r.json()).then(d=>{if(d&&(d.og_image||d.img)){const el=document.getElementById('ht-img-'+i);if(el)el.innerHTML=`<img src="${esc(d.og_image||d.img)}" onerror="this.style.display='none'">`;}}).catch(()=>{});});
+    _htTopic=topicList[0];
+  }catch(e){box.innerHTML=`<div class="hashtag-sources"><h3>🔥 Tin HOT</h3><div style="color:#e74c3c;padding:8px">Lỗi tải tin</div></div>`;}
 }