fix: replace dropdown hack with hidden textbox+button for reliable category switching + TikTok navigation

app.py

@@ -746,11 +746,7 @@ footer,.built-with{display:none!important}
 .bdp-header h1{color:#fff;font-size:20px;margin:0;font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.4)}
 .bdp-header p{color:rgba(255,255,255,.6);font-size:11px;margin:2px 0 0}
 @media(min-width:768px){.bdp-header h1{font-size:26px}.bdp-header{padding:20px}}
-.controls-row{padding:0!important;background:#111!important;height:0!important;overflow:hidden!important;margin:0!important;opacity:0;pointer-events:none;position:absolute}
-.controls-row>div{background:#111!important;border:none!important}
-.controls-row label{color:#aaa!important;font-size:12px!important}
-.controls-row .wrap{border-color:#333!important;background:#1a1a1a!important}
-.controls-row input,.controls-row select,.controls-row button{color:#eee!important}
+#cat-input,#btn-switch-cat{display:none!important;height:0!important;overflow:hidden!important}
 .vslide-wrap{margin:8px;background:#1a1a1a;border-radius:12px;overflow:hidden;border:1px solid #2a2a2a}
 .vslide-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 6px}
 .vslide-label{color:#f0c040;font-size:15px;font-weight:700}
@@ -925,39 +921,16 @@ window.bdpSelectCat=function(catKey,hashSlug){
     document.querySelectorAll('.cat-icon-btn').forEach(function(b){
         b.classList.toggle('active',b.getAttribute('data-cat')===catKey);
     });
-    /* Trigger Gradio dropdown change */
-    window._bdpSetDropdown(catKey);
+    /* Trigger server-side category switch via hidden textbox+button */
+    window._bdpSetCat(catKey);
 };
 
-window._bdpSetDropdown=function(catKey){
-    var container=document.getElementById('cat-dropdown');
-    if(!container){
-        var all=document.querySelectorAll('.controls-row .wrap, .controls-row [data-testid]');
-        container=all.length?all[0].closest('[id]'):null;
-    }
-    if(!container) container=document.querySelector('.controls-row');
-    if(!container) return;
-    /* Gradio 4+ dropdown: find the input, set value, fire events */
-    var inp=container.querySelector('input');
-    if(!inp) return;
-    try{
-        var nativeSet=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,'value').set;
-        nativeSet.call(inp,catKey);
-    }catch(e){inp.value=catKey;}
-    inp.dispatchEvent(new Event('input',{bubbles:true}));
-    inp.dispatchEvent(new Event('change',{bubbles:true}));
-    /* Force open dropdown and click the matching option */
-    inp.focus();
-    inp.dispatchEvent(new KeyboardEvent('keydown',{key:'ArrowDown',bubbles:true}));
-    setTimeout(function(){
-        var opts=document.querySelectorAll('[role="option"], li.item');
-        for(var i=0;i<opts.length;i++){
-            if(opts[i].textContent.trim()===catKey||opts[i].innerText.trim()===catKey){
-                opts[i].click();
-                return;
-            }
-        }
-    },150);
+window._bdpSetCat=function(catKey){
+    var el=document.getElementById('cat-input');
+    if(el){var ta=el.querySelector('textarea')||el.querySelector('input');if(ta){ta.value=catKey;ta.dispatchEvent(new Event('input',{bubbles:true}));}}
+    var btn=document.getElementById('btn-switch-cat');
+    if(btn){var b=btn.querySelector('button');if(b)b.click();else btn.click();}
+    window.scrollTo({top:0,behavior:'smooth'});
 };
 
 function gc(a){try{return JSON.parse(localStorage.getItem('bdp_cmt_'+a))||[];}catch(e){return[];}}
@@ -990,8 +963,11 @@ window.bdpOpenTikTok=function(url,aid){
     document.querySelectorAll('.cat-icon-btn').forEach(function(b){
         b.classList.toggle('active',b.getAttribute('data-hash')==='video');
     });
-    /* Trigger Gradio dropdown to Video Tổng Hợp */
-    window._bdpSetDropdown('\U0001f3ac Video T\u1ed5ng H\u1ee3p');
+    /* Trigger server-side switch to Video category */
+    var el=document.getElementById('cat-input');
+    if(el){var ta=el.querySelector('textarea')||el.querySelector('input');if(ta){ta.value='\U0001f3ac Video T\u1ed5ng H\u1ee3p';ta.dispatchEvent(new Event('input',{bubbles:true}));}}
+    var btn=document.getElementById('btn-switch-cat');
+    if(btn){var b=btn.querySelector('button');if(b)b.click();else btn.click();}
     /* After content loads, scroll to the matching video in TikTok feed */
     var attempts=0;
     var finder=setInterval(function(){
@@ -1134,7 +1110,7 @@ if(hh&&hh.startsWith('#cat/')){
     var catMap={""" + ",".join(f"'{ci[2]}':'{esc(CAT_KEYS[i])}'" for i,ci in enumerate(CAT_ICONS)) + """};
     if(catMap[catSlug]){
         setTimeout(function(){
-            window._bdpSetDropdown(catMap[catSlug]);
+            window._bdpSetCat(catMap[catSlug]);
             document.querySelectorAll('.cat-icon-btn').forEach(function(b){
                 b.classList.toggle('active',b.getAttribute('data-hash')===catSlug);
             });
@@ -1159,26 +1135,29 @@ with gr.Blocks(title="Tin Tức Việt Nam",css=CSS,head=HEAD_META,js=JS_FUNC,th
     gr.HTML('<div class="bdp-header"><h1>📰 Tin Tức Việt Nam</h1><p>VnExpress · BongDaPlus · 24h · Thời sự · Thế giới · Kinh doanh · Công nghệ · Thể thao · Giải trí · Video</p></div>')
     gr.HTML(_build_cat_grid_html())
     article_url=gr.Textbox(value="",visible=False,elem_id="article-url-input")
-    with gr.Row(elem_classes=["controls-row"]):
-        cat=gr.Dropdown(choices=list(CATEGORIES.keys()),value="🏠 Trang Chủ (Nổi Bật)",label="Chuyên mục",scale=3,interactive=True,elem_id="cat-dropdown")
-        ref_btn=gr.Button("🔄 Làm mới",variant="primary",scale=1)
+    cat_input=gr.Textbox(value="",visible=False,elem_id="cat-input")
     back_btn=gr.Button("← Quay lại",variant="secondary",visible=False)
     news_list=gr.HTML()
     article_view=gr.HTML(visible=False)
     read_btn=gr.Button("Đọc",visible=False,elem_id="btn-read-article")
+    cat_btn=gr.Button("Cat",visible=False,elem_id="btn-switch-cat")
     def show_article(url):
         if not url or url=="#" or len(url)<10:
             return gr.update(visible=True),gr.update(visible=False),gr.update(visible=False),""
         return (gr.update(visible=False),gr.update(value=read_article(url),visible=True),gr.update(visible=True),"")
-    def show_list(c):
-        return (gr.update(value=fetch_news_list(c),visible=True),gr.update(visible=False),gr.update(visible=False))
+    def switch_cat(cat_key):
+        cat_key=cat_key.strip()
+        if not cat_key or cat_key not in CATEGORIES:
+            cat_key=list(CATEGORIES.keys())[0]
+        return (gr.update(value=fetch_news_list(cat_key),visible=True),gr.update(visible=False),gr.update(visible=False),"")
+    def show_list_home():
+        return (gr.update(value=fetch_news_list(list(CATEGORIES.keys())[0]),visible=True),gr.update(visible=False),gr.update(visible=False))
     read_btn.click(fn=show_article,inputs=[article_url],outputs=[news_list,article_view,back_btn,article_url])
-    back_btn.click(fn=show_list,inputs=[cat],outputs=[news_list,article_view,back_btn])
-    ref_btn.click(fn=show_list,inputs=[cat],outputs=[news_list,article_view,back_btn])
-    cat.change(fn=show_list,inputs=[cat],outputs=[news_list,article_view,back_btn])
+    cat_btn.click(fn=switch_cat,inputs=[cat_input],outputs=[news_list,article_view,back_btn,cat_input])
+    back_btn.click(fn=show_list_home,inputs=[],outputs=[news_list,article_view,back_btn])
     timer=gr.Timer(value=REFRESH_SECONDS,active=True)
-    timer.tick(fn=fetch_news_list,inputs=cat,outputs=news_list)
-    demo.load(fn=fetch_news_list,inputs=cat,outputs=news_list)
+    timer.tick(fn=lambda: fetch_news_list(list(CATEGORIES.keys())[0]),inputs=None,outputs=news_list)
+    demo.load(fn=lambda: fetch_news_list(list(CATEGORIES.keys())[0]),inputs=None,outputs=news_list)
 
 if __name__=="__main__":
     demo.launch(ssr_mode=False)