Upload index.html

index.html

@@ -122,12 +122,6 @@
   .jtv-b{margin-left:auto; background:rgba(255,255,255,.18); color:#fff; border:0; border-radius:8px; padding:5px 10px; font:inherit; font-size:12px;}
   .jtv-epg{margin-top:6px; max-height:38vh; overflow:auto; border-top:1px solid rgba(255,255,255,.2); padding-top:6px;}
   .jtv-epg div{padding:3px 0;} .jtv-epg span{display:inline-block; min-width:48px; opacity:.7;}
-  .jtv-logo{position:absolute; right:12px; bottom:56px; width:64px; max-height:40px; object-fit:contain; opacity:.75; z-index:4; pointer-events:none; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));}
-  .jtv-ad{position:absolute; left:12px; bottom:56px; z-index:6; background:#ffc53d; color:#1b1230; font-weight:900; font-size:11px; letter-spacing:1px; padding:3px 9px; border-radius:6px; display:none;}
-  .jtv-ad.on{display:block;}
-  .jtv-ad i{font-style:normal; font-weight:700; opacity:.8; margin-left:6px;}
-  .jtv-epg .now{color:#ffc53d; font-weight:700;}
-  .jtv-epg .k{font-size:10px; opacity:.6; margin-left:6px;}
   .rank-num{position:absolute; left:6px; bottom:0; font-size:58px; font-weight:900; line-height:1; letter-spacing:-3px; color:transparent;
     -webkit-text-stroke:2px rgba(255,255,255,.92); text-shadow:0 4px 14px rgba(0,0,0,.65); pointer-events:none; z-index:2;}
   .poster-art:has(.rank-num)::after{content:''; position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(transparent,rgba(0,0,0,.7)); pointer-events:none;}
@@ -1221,6 +1215,13 @@
   /* Nafasi ya kusogeza (scroll) ili kipengele chenye focus kisifichwe na topbar / nav */
   .poster,.cw-card,.tab-chip,.settings-row,.dq-item,.tr-ep,.cast-item{scroll-margin:110px 3vw 110px 3vw;}
 </style>
+<style>
+  .tr-filter{margin:0 0 10px;}
+  .tr-filter .tabs{padding:10px 16px 4px;}
+  .tr-filter .tr-dj-row{padding-top:4px;}
+  .tr-filter .tr-dj-row .tab-chip{font-size:12px; padding:6px 12px;}
+  .tr-filter-note{padding:4px 16px 6px; font-size:12px; color:var(--muted);}
+</style>
 </head>
 <body>
 <div id="gate">
@@ -1491,7 +1492,17 @@ const PIXTVMAX_KEY = SUPABASE_ANON_KEY;
 const TRAILER_BASE = JM_CONFIG.CONTENT_URL + '/functions/v1/movie-trailer';
 const TRAILER_KEY = SUPABASE_ANON_KEY;
 
-// Chanzo kimoja cha Zilizotafsiriwa: movie-translated-all (inaunganisha old + n2 + absalom)
+// Zilizotafsiriwa: chanzo kimoja (movie-translated-all) — n2-, ab-, abm- ids
+const TR_DJ_NOISE = /\b(movies?|filamu|zote|zilizotafsiriwa|zilizotafsiri|imetafsiriwa|iliyotafsiriwa|tafsiriwa|kiswahili|swahili|kwa|mpya|kali|translated|new|all|series|full|single|singo|action|cartoon|katuni|season|seasons|(?:19|20)\d{2})\b/gi;
+function normDj(raw) { // jina safi la DJ (bila maneno ya ziada na bila tofauti za herufi kubwa/ndogo)
+  const s = String(raw || '').replace(/\(.*?\)|\[.*?\]/g, ' ').replace(TR_DJ_NOISE, ' ').replace(/[|_\-\u2013\u2014:,.]+/g, ' ').replace(/\s+/g, ' ').trim();
+  if (!s || /^dj$/i.test(s)) return '';
+  const name = s.split(' ').map(w => /^dj$/i.test(w) ? 'DJ' : w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(' ');
+  return TR_DJ_ALIAS[name.toLowerCase()] || name;
+}
+// Majina tofauti ya DJ mmoja (andika kwa herufi ndogo upande wa kushoto)
+const TR_DJ_ALIAS = { 'dj blaki': 'DJ Black', 'blaki': 'DJ Black', 'black': 'DJ Black' };
+// Model iliyofunzwa (train.py -> HF Model). Ikikosekana, app inafanya kazi kama kawaida (Trending = mpya zaidi).
 const TRANSLATED_ALL = JM_CONFIG.CONTENT_URL + '/functions/v1/movie-translated-all';
 const TR_MODEL_URL = 'https://huggingface.co/jaynesmaxtv/translated-recommender/resolve/main/model.json';
 let trModelP = null;
@@ -1500,14 +1511,6 @@ function loadTrModel() {
   return trModelP;
 }
 // Rails za mlalo: Trending Now (Top 10, kwa model au mpya zaidi) -> New Releases -> kila DJ (DJ Mack kwanza) -> Series -> More to Watch
-const TR_DJ_NOISE = /\b(movies?|filamu|zote|zilizotafsiriwa|zilizotafsiri|imetafsiriwa|iliyotafsiriwa|tafsiriwa|kiswahili|swahili|kwa|mpya|kali|translated|new|all|series|full)\b/gi;
-
-function normDj(raw) { // jina safi la DJ (bila maneno ya ziada na bila tofauti za herufi kubwa/ndogo)
-  const s = String(raw || '').replace(/\(.*?\)|\[.*?\]/g, ' ').replace(TR_DJ_NOISE, ' ').replace(/[|_\-\u2013\u2014:,.]+/g, ' ').replace(/\s+/g, ' ').trim();
-  if (!s || /^dj$/i.test(s)) return '';
-  return s.split(' ').map(w => /^dj$/i.test(w) ? 'DJ' : w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(' ');
-}
-
 function buildTranslatedSections(items, model) {
   const pop = (model && model.popularity) || {}, sections = [], covered = new Set();
   const hot = items.filter(it => pop[it.id] > 0).sort((a, b) => pop[b.id] - pop[a.id]);
@@ -1559,41 +1562,13 @@ async function rpc(op, args = {}) {
 }
 
 // ── Share: kiungo cha moja kwa moja kwenye video (#/watch/ID) ──
-// ── Kushiriki na picha: bango (poster) au nembo ya chaneli inaambatanishwa ──
-async function shareImageFile(src){
-  if (!src) return null;
-  try {
-    const r = await fetch(src, { mode: 'cors' });
-    if (!r.ok) return null;
-    const b = await r.blob();
-    if (!b.type || !b.type.startsWith('image/')) return null;
-    const ext = (b.type.split('/')[1] || 'jpg').replace('jpeg', 'jpg').replace('svg+xml', 'svg');
-    return new File([b], 'jaynesmax-' + Date.now() + '.' + ext, { type: b.type });
-  } catch (_) { return null; }
-}
-
-async function shareWithPoster(d, url, text){
-  const poster = d.poster || d.logo || null;
-  if (navigator.share) {
-    const file = await shareImageFile(poster);
-    const withFile = { title: text, text, url };
-    if (file && navigator.canShare && navigator.canShare({ files: [file] })) withFile.files = [file];
-    try { await navigator.share(withFile); return; }
-    catch (e) { if (e && e.name === 'AbortError') return; }
-    // Kama kushiriki na picha kumeshindikana, jaribu kushiriki kiungo na maelezo tu
-    try { await navigator.share({ title: text, text, url }); } catch (_) {}
-    return;
-  }
-  const clip = text + '\n' + url + (poster ? '\nPicha: ' + poster : '');
-  try { await navigator.clipboard.writeText(clip); showToast(t('link_copied')); }
-  catch (_) { prompt('Nakili kiungo:', clip); }
-}
-
 async function shareTitle(d, se, ep){
   const base = location.origin + location.pathname.replace(/index\.html$/i, '');
   const url = base + '#/watch/' + d.id + (se != null && ep != null ? '?se=' + se + '&ep=' + ep : '');
   const text = d.title + ' — JAYNES MAX';
-  return shareWithPoster(d, url, text);
+  if (navigator.share) { try { await navigator.share({ title: text, text, url }); } catch (_) {} return; }
+  try { await navigator.clipboard.writeText(url); showToast(t('link_copied')); }
+  catch (_) { prompt('Nakili kiungo:', url); }
 }
 
 // ── Watchlist (localStorage) ──
@@ -2910,6 +2885,13 @@ const I18N_EXTRA10 = {
   fr: { jtv_next: 'Ensuite', jtv_schedule: 'Programme', jtv_down: 'JaynesTV est indisponible', tr_trending: 'Tendances actuelles', tr_new: 'Nouveautés', tr_more: 'À découvrir' }
 };
 Object.keys(I18N_EXTRA10).forEach(l => { I18N[l] = Object.assign(I18N[l] || {}, I18N_EXTRA10[l]); });
+const I18N_EXTRA_TRF = {
+  sw: { trf_all: 'Zote', trf_new: 'Mpya', trf_trend_movie: 'Movie Zinazovuma', trf_trend_series: 'Series Zinazovuma', trf_movie: 'Movie', trf_series: 'Series', trf_dj: 'Kwa DJ', trf_no_trend: 'Bado hakuna takwimu za kutosha za zinazovuma, tunaonyesha mpya zaidi kwanza.' },
+  en: { trf_all: 'All', trf_new: 'New Releases', trf_trend_movie: 'Trending Movies', trf_trend_series: 'Trending Series', trf_movie: 'Movies', trf_series: 'Series', trf_dj: 'By DJ', trf_no_trend: 'Not enough viewing data yet, showing newest first.' },
+  ar: { trf_all: 'الكل', trf_new: 'الجديد', trf_trend_movie: 'أفلام رائجة', trf_trend_series: 'مسلسلات رائجة', trf_movie: 'أفلام', trf_series: 'مسلسلات', trf_dj: 'حسب DJ', trf_no_trend: 'لا توجد بيانات مشاهدة كافية بعد، نعرض الأحدث أولاً.' },
+  fr: { trf_all: 'Tout', trf_new: 'Nouveautés', trf_trend_movie: 'Films tendance', trf_trend_series: 'Séries tendance', trf_movie: 'Films', trf_series: 'Séries', trf_dj: 'Par DJ', trf_no_trend: "Pas encore assez de données, les plus récents d'abord." }
+};
+Object.keys(I18N_EXTRA_TRF).forEach(l => { I18N[l] = Object.assign(I18N[l] || {}, I18N_EXTRA_TRF[l]); });
 function T(k, v) { return t(k, v); }
 // Maandishi yaliyoandikwa kwenye HTML kupitia data-i18n / data-i18n-ph / data-i18n-title
 function applyI18nAttrs() {
@@ -3630,71 +3612,40 @@ function jtvNow(s, nowMs) { // kipindi cha sasa + vinavyofuata, kwa saa: kila mt
 }
 async function openJaynesTV() {
   openPlayerShell('JaynesTV');
-  let s = await jtvSchedule(true);
+  const s = await jtvSchedule(true);
   if (!s) return statusMsg('<span style="color:#ffb4ab">' + esc(T('jtv_down')) + '</span>');
   stage.style.position = 'relative';
-  stage.innerHTML = '<video id="vid" controls autoplay playsinline></video><div class="jtv-bar" id="jtvBar"></div>' +
-    '<div class="jtv-ad" id="jtvAd">TANGAZO<i></i></div>' + (s.logo ? '<img class="jtv-logo" id="jtvLogo" alt="" src="' + esc(s.logo) + '">' : '');
-  const v = document.getElementById('vid'), bar = document.getElementById('jtvBar'), adEl = document.getElementById('jtvAd');
-  const logoEl = document.getElementById('jtvLogo'); if (logoEl) logoEl.onerror = () => logoEl.remove();
+  stage.innerHTML = '<video id="vid" controls autoplay playsinline></video><div class="jtv-bar" id="jtvBar"></div>';
+  const v = document.getElementById('vid'), bar = document.getElementById('jtvBar');
   attachPlayerEnhancements(v); ensureSound(v);
-  const bad = new Set(); let cur = null, epg = false, hideT = null, last = null, liveOn = false, hls = null;
+  const bad = new Set(); let cur = null, epg = false, hideT = null, last = null;
   const hhmm = ms => new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-  const kindOf = it => (it && it.kind) || 'program';
   const show = (ms) => { bar.classList.remove('hide'); clearTimeout(hideT); if (ms) hideT = setTimeout(() => { if (!epg) bar.classList.add('hide'); }, ms); };
-  const nextProgram = n => (n.upcoming.find(u => kindOf(u.item) === 'program') || n.upcoming[0]);
-  const stopHls = () => { if (hls) { try { hls.destroy(); } catch (_) {} hls = null; } };
-  const playSrc = (url, off) => {   // MP4 au HLS (.m3u8) — live ya studio ni HLS
-    stopHls();
-    const isHls = /\.m3u8(\?|$)/i.test(url);
-    if (isHls && !v.canPlayType('application/vnd.apple.mpegurl') && window.Hls && Hls.isSupported()) {
-      hls = new Hls(); hls.loadSource(url); hls.attachMedia(v);
-    } else v.src = isHls ? url : url + '#t=' + Math.floor(off || 0);
-    v.addEventListener('loadedmetadata', () => { if (!isHls && Math.abs(v.currentTime - off) > 3) v.currentTime = off; const p = v.play(); if (p && p.catch) p.catch(() => {}); }, { once: true });
-  };
   const draw = (n, it) => {
-    if (liveOn) {
-      bar.innerHTML = '<div class="jtv-row"><span class="jtv-live">● LIVE</span><b>' + esc(s.live.title || 'Matangazo ya moja kwa moja') + '</b>' +
-        '<span class="jtv-m">Studio</span></div>';
-      adEl.classList.remove('on'); return;
-    }
-    const k = kindOf(it), nx = nextProgram(n);
-    adEl.classList.toggle('on', k === 'ad');
-    if (k === 'ad') adEl.querySelector('i').textContent = Math.max(0, Math.ceil(n.left)) + 's';
-    const nowTitle = k === 'program' ? it.title : (nx.item.title);   // wakati wa tangazo/kitambulisho: "inaanza punde"
-    bar.innerHTML = '<div class="jtv-row"><span class="jtv-live">● LIVE</span><b>' + (k === 'program' ? '' : 'Punde: ') + esc(nowTitle) + '</b>' +
-      (k === 'program' && it.dj ? '<span class="jtv-m">' + esc(it.dj) + '</span>' : '') +
+    const nx = n.upcoming[0];
+    bar.innerHTML = '<div class="jtv-row"><span class="jtv-live">● LIVE</span><b>' + esc(it.title) + '</b>' + (it.dj ? '<span class="jtv-m">' + esc(it.dj) + '</span>' : '') +
       '<button class="jtv-b" data-j="epg">' + esc(T('jtv_schedule')) + '</button></div>' +
-      (k === 'program' ? '<div class="jtv-m">Sasa hivi · ' + T('jtv_next') + ': ' + esc(nx.item.title) + ' · ' + hhmm(nx.at) + '</div>' : '') +
-      (epg ? '<div class="jtv-epg">' +
-        (k === 'program' ? '<div class="now"><span>' + hhmm(Date.now() - (it.dur - n.left) * 1000) + '</span> ' + esc(it.title) + '<span class="k">SASA</span></div>' : '') +
-        n.upcoming.filter(u => kindOf(u.item) === 'program').map(u => '<div><span>' + hhmm(u.at) + '</span> ' + esc(u.item.title) + '</div>').join('') + '</div>' : '');
+      '<div class="jtv-m">' + esc(T('jtv_next')) + ': ' + esc(nx.item.title) + ' · ' + hhmm(nx.at) + '</div>' +
+      (epg ? '<div class="jtv-epg">' + n.upcoming.map(u => '<div><span>' + hhmm(u.at) + '</span> ' + esc(u.item.title) + '</div>').join('') + '</div>' : '');
   };
   const sync = () => {
-    const liveUrl = s.live && s.live.active && s.live.url;
-    if (liveUrl) {   // studio iko hewani: hamia live yenyewe
-      if (!liveOn || cur !== liveUrl) { liveOn = true; cur = liveUrl; playSrc(liveUrl, 0); show(8000); }
-      draw(null, null); return;
-    }
-    if (liveOn) { liveOn = false; cur = null; }   // live imeisha: rudi kwenye ratiba
     const n = jtvNow(s, Date.now()), isBad = bad.has(n.idx);
     const it = isBad ? n.upcoming[0].item : n.item, off = isBad ? 0 : n.offset;   // video mbovu: cheza inayofuata kutoka mwanzo
     if (cur !== it.url) {
-      cur = it.url; playSrc(it.url, off);
-      if (kindOf(it) === 'program') show(8000); else bar.classList.add('hide');
+      cur = it.url; v.src = it.url + '#t=' + Math.floor(off);
+      v.addEventListener('loadedmetadata', () => { if (Math.abs(v.currentTime - off) > 3) v.currentTime = off; const p = v.play(); if (p && p.catch) p.catch(() => {}); }, { once: true });
+      show(8000);
     } else if (!isBad && v.readyState > 1 && Math.abs(v.currentTime - off) > 4) v.currentTime = off;   // rudi kwenye 'live'
     last = n; draw(n, it);
   };
-  const refresh = async () => { const ns = await jtvSchedule(true); if (ns) { s = ns; sync(); } };   // kuangalia live/ratiba mpya
-  bar.onclick = (e) => { if (e.target.closest('[data-j="epg"]') && last) { epg = !epg; draw(last, bad.has(last.idx) ? last.upcoming[0].item : last.item); show(epg ? 0 : 6000); } };
+  bar.onclick = (e) => { if (e.target.closest('[data-j="epg"]')) { epg = !epg; draw(last, last.item); show(epg ? 0 : 6000); } };
   v.addEventListener('ended', sync);
   v.addEventListener('play', sync);
-  v.addEventListener('seeked', () => { if (!liveOn && last && Math.abs(v.currentTime - last.offset) > 6) sync(); });
-  v.addEventListener('error', () => { if (liveOn) { s = Object.assign({}, s, { live: { active: false } }); cur = null; sync(); } else if (last) { bad.add(last.idx); sync(); } });
+  v.addEventListener('seeked', () => { if (last && Math.abs(v.currentTime - last.offset) > 6) sync(); });
+  v.addEventListener('error', () => { if (last) { bad.add(last.idx); sync(); } });
   v.addEventListener('click', () => show(6000));
-  const timer = setInterval(sync, 15000), tick = setInterval(() => { if (last && !liveOn && adEl.classList.contains('on')) draw(jtvNow(s, Date.now()), jtvNow(s, Date.now()).item); }, 1000);
-  const liveTimer = setInterval(refresh, 60000);
-  window.__jtvStop = () => { clearInterval(timer); clearInterval(tick); clearInterval(liveTimer); clearTimeout(hideT); stopHls(); };
+  const timer = setInterval(sync, 15000);
+  window.__jtvStop = () => { clearInterval(timer); clearTimeout(hideT); };
   sync();
 }
 
@@ -3762,11 +3713,12 @@ async function loadLive() {
 }
 
 // ── ZILIZOTAFSIRIWA (movies/series za DJ — mradi tofauti) ──
-async function fetchTranslatedList() { // movie-translated-all: orodha moja iliyounganishwa
+async function fetchTranslatedList() {
   const card = (m, idPrefix) => ({
     id: idPrefix + m.id, kind: 'translated', title: m.title,
     poster: m.thumb_url || m.poster_url || null, imgFallbackOn: true,
     subtitle: normDj(m.dj) || (m.category === 'series' ? 'Series' : 'Movie'), isSeries: m.category === 'series',
+    added: m.created_at || m.updated_at || '',
   });
   const r = await fetch(TRANSLATED_ALL, { headers: { apikey: SUPABASE_ANON_KEY } });
   if (!r.ok) throw new Error(T('err_generic') + ' ' + r.status);
@@ -3775,12 +3727,78 @@ async function fetchTranslatedList() { // movie-translated-all: orodha moja iliy
   return (d.movies || []).map(m => card(m, ''));
 }
 
+// ── KUPANGA ZILIZOTAFSIRIWA: Zote / Mpya / Movie Zinazovuma / Series Zinazovuma / Movie / Series / Kwa DJ ──
+let trCache = null; // { items, model } -- kubadilisha kichujio hakupakui upya
+let trFilter = 'all', trDj = '';
+try { trFilter = sessionStorage.getItem('jm_tr_filter') || 'all'; trDj = sessionStorage.getItem('jm_tr_dj') || ''; } catch (_) {}
+const TR_FILTERS = ['all', 'new', 'trend_movie', 'trend_series', 'movie', 'series', 'dj'];
+function trDjGroups(items) { // DJ Mack kwanza, kisha DJ mwenye kazi nyingi zaidi
+  const g = {};
+  items.forEach(it => {
+    const dj = String(it.subtitle || '').trim();
+    if (!dj || dj === 'Series' || dj === 'Movie') return;
+    (g[dj.toLowerCase()] = g[dj.toLowerCase()] || { name: dj, list: [] }).list.push(it);
+  });
+  return Object.values(g).sort((a, b) => (/mack/i.test(b.name) - /mack/i.test(a.name)) || b.list.length - a.list.length || a.name.localeCompare(b.name));
+}
+function trByNewest(list) { // mpya -> zamani kwa tarehe ya kuongezwa; zisizo na tarehe zinabaki kwa mpangilio wa seva
+  return list.map((it, i) => [it, i])
+    .sort((a, b) => (Date.parse(b[0].added) || 0) - (Date.parse(a[0].added) || 0) || a[1] - b[1]).map(x => x[0]);
+}
+function trTrending(list, model) { // kwa uchezaji halisi (model); zikipungua, zinaongezwa mpya zaidi bila namba
+  const pop = (model && model.popularity) || {};
+  const hot = list.filter(it => pop[it.id] > 0).sort((a, b) => pop[b.id] - pop[a.id]);
+  const ranked = hot.slice(0, 30).map((it, i) => ({ ...it, rank: i < 10 ? i + 1 : undefined }));
+  if (ranked.length < 10) {
+    const have = new Set(ranked.map(it => it.id));
+    trByNewest(list).forEach(it => { if (ranked.length < 30 && !have.has(it.id)) ranked.push(it); });
+  }
+  return { items: ranked, fallback: hot.length === 0 };
+}
+function renderTranslatedView() {
+  if (!trCache) return;
+  const { items, model } = trCache;
+  const movies = items.filter(it => !it.isSeries), series = items.filter(it => it.isSeries);
+  const groups = trDjGroups(items);
+  if (!TR_FILTERS.includes(trFilter)) trFilter = 'all';
+  if (trFilter === 'dj' && !groups.some(g => g.name === trDj)) trDj = groups[0] ? groups[0].name : '';
+  let sections, grid = true, note = '';
+  if (trFilter === 'new') sections = [{ title: t('tr_new'), items: trByNewest(items) }];
+  else if (trFilter === 'trend_movie' || trFilter === 'trend_series') {
+    const r = trTrending(trFilter === 'trend_movie' ? movies : series, model);
+    if (r.fallback) note = t('trf_no_trend');
+    sections = [{ title: t('trf_' + trFilter), items: r.items }];
+  }
+  else if (trFilter === 'movie') sections = [{ title: t('trf_movie'), items: trByNewest(movies) }];
+  else if (trFilter === 'series') sections = [{ title: t('trf_series'), items: trByNewest(series) }];
+  else if (trFilter === 'dj') {
+    const g = groups.find(x => x.name === trDj);
+    sections = g ? [{ title: g.name, items: trByNewest(g.list).map(it => ({ ...it, subtitle: it.isSeries ? 'Series' : '' })) }] : [];
+  }
+  else { sections = buildTranslatedSections(items, model); grid = false; }
+  renderRails(sections, grid);
+  const bar = document.createElement('div');
+  bar.className = 'tr-filter';
+  bar.innerHTML = `<div class="tabs">${TR_FILTERS.map(f => `<div class="tab-chip${f === trFilter ? ' active' : ''}" data-trf="${f}">${esc(t('trf_' + f))}</div>`).join('')}</div>` +
+    (trFilter === 'dj' && groups.length ? `<div class="tabs tr-dj-row">${groups.map(g => `<div class="tab-chip${g.name === trDj ? ' active' : ''}" data-trdj="${esc(g.name)}">${esc(g.name)} · ${g.list.length}</div>`).join('')}</div>` : '') +
+    (note ? `<div class="tr-filter-note">${esc(note)}</div>` : '');
+  bar.onclick = (e) => {
+    const c = e.target.closest('.tab-chip'); if (!c) return;
+    if (c.dataset.trf) trFilter = c.dataset.trf; else if (c.dataset.trdj != null) trDj = c.dataset.trdj; else return;
+    try { sessionStorage.setItem('jm_tr_filter', trFilter); sessionStorage.setItem('jm_tr_dj', trDj); } catch (_) {}
+    renderTranslatedView();
+  };
+  railsEl.insertBefore(bar, railsEl.firstChild);
+  bar.querySelectorAll('.tab-chip.active').forEach(c => { const row = c.parentElement; row.scrollLeft = c.offsetLeft - (row.clientWidth - c.offsetWidth) / 2; });
+}
+
 async function loadTranslated() {
   heroWrap.innerHTML = ''; tabsEl.style.display = 'none';
   renderSkeletonRails(2);
   try {
     const [items, model] = await Promise.all([fetchTranslatedList(), loadTrModel()]);
-    renderRails(buildTranslatedSections(items, model), false);
+    trCache = { items, model };
+    renderTranslatedView();
   } catch (e) {
     railsEl.innerHTML = '';
     railsEl.appendChild(stateBox(t('err_failed', { e: esc(e.message || t('err_generic')) }), true, loadTranslated));
@@ -4104,7 +4122,9 @@ async function shareTranslatedTitle(d) {
   const base = location.origin + location.pathname.replace(/index\.html$/i, '');
   const shareUrl = base + '#/translated/' + d.id;
   const text = d.title + ' — JAYNES MAX (' + T('nav_translated') + ')';
-  return shareWithPoster(d, shareUrl, text);
+  if (navigator.share) { try { await navigator.share({ title: text, text, url: shareUrl }); } catch (_) {} return; }
+  try { await navigator.clipboard.writeText(shareUrl); showToast(t('link_copied')); }
+  catch (_) { prompt('Nakili kiungo:', shareUrl); }
 }
 
 // ── MICHEZO (fawa-live) ──