ipodderx-rs/web/src/feeds.ts

/* ---------------- feeds ---------------- */
async function loadFeeds(keepSel?: boolean){
  S.feeds = await api('/api/feeds');
  api('/api/settings').then(g=>{globalMax=g.max_new_per_check}).catch(()=>{});
  renderFeeds();
  // Land back where you were; a feed you no longer subscribe to, or a first visit, goes to
  // All Subscriptions rather than picking one alphabetically. Nothing to land on at all (a
  // brand new account) leaves S.feed alone, so the empty state's own message shows instead.
  if(!keepSel && S.feeds.length){
    const known = S.feed && (VIEWS[S.feed] || S.feeds.some(f=>f.id===S.feed));
    selectFeed(known ? S.feed : ':all');
  }
}
// An OPML can hold dozens of feeds; the ones with something new go first. sort is stable, so the
// server's alphabetical order still holds within each half.
const unreadFirst=(a,b)=>Number(b.unread>0)-Number(a.unread>0);
// The original's source list opened with these, above the feeds. They are places, not feeds:
// an id starting with ':' can never be a feed's, since feed ids are slugs.
const VIEWS={
  ':directory':{title:'Directory',icon:ICON.directory,url:'/api/directory',
    blurb:'Every feed anyone on this server subscribes to, A to Z. The feeds inside an OPML are listed one by one, not the OPML.'},
  ':popular':{title:'Popular',icon:ICON.popular,url:'/api/popular',
    blurb:'The ten feeds with the most subscribers here. The feeds inside an OPML count one by one, not the OPML.'},
  ':listening':{title:'Currently Listening',icon:ICON.audio,url:'/api/entries?filter=in_progress&limit=50',
    blurb:'Episodes you started and have not finished, across every feed you subscribe to. Pick one up where you left off.'},
  ':all':{title:'All Subscriptions',icon:ICON.all},
};
function renderFeeds(){
  const q=$('#feedFilter').value.trim().toLowerCase();
  const list=$('#feedlist'); const top=list.scrollTop;
  // Every row is replaced, so put the keyboard back on the row, or the triangle, it was on.
  const a=document.activeElement, was=a&&a.closest&&a.closest<HTMLElement>('#feedlist [data-id]');
  const back=was&&([was.dataset.id,a.classList.contains('chev')] as [string, boolean]);
  const done=()=>{
    list.scrollTop=top;
    const row=back&&list.querySelector(`[data-id="${CSS.escape(back[0])}"]`);
    if(row) (back[1]&&$('.chev',row)||row).focus();
  };
  list.innerHTML='';
  const unreadAll=S.feeds.reduce((n,f)=>n+(f.unread||0),0);
  const places=document.createElement('div');
  places.className='places';
  for(const [id,v] of Object.entries(VIEWS)){
    const el=document.createElement('div');
    el.className='place'+(S.feed===id?' sel':'');
    el.tabIndex=0; el.dataset.id=id;
    el.innerHTML=`<span class="ico">${v.icon}</span><b>${v.title}</b>`+(id===':all'
      ?`<span class="badge${unreadAll?'':' zero'}" title="${unreadAll} unread">${unreadAll>999?'999+':unreadAll}</span>`:'');
    el.onclick=()=>{ selectFeed(id); nav(false); };
    places.appendChild(el);
  }
  list.appendChild(places);
  const shown=S.feeds.filter(f=>!q||(f.title||f.id).toLowerCase().includes(q));
  if(!shown.length){ list.insertAdjacentHTML('beforeend','<p class="empty" style="padding:20px 8px">No feeds.</p>'); return done(); }

  // Feeds from a subscribed OPML sit under it, so the group reads as one thing.
  const byId=Object.fromEntries(shown.map(f=>[f.id,f]));
  const order=[];
  for(const f of shown){
    if(f.group && byId[f.group]) continue;   // drawn under its parent instead
    order.push([f,0]);
    // A subscription can hold dozens of feeds, so a folder starts closed. Searching
    // opens them all, or matches inside a closed folder would be invisible.
    if(expanded.has(f.id) || q)
      for(const c of shown.filter(c=>c.group===f.id).sort(unreadFirst)) order.push([c,1]);
  }
  for(const [f,depth] of order){
    const kids=shown.filter(c=>c.group===f.id).length;
    // A subscription holds no entries itself, so its counts are the sum of what is inside --
    // taken from every feed it holds, not just the ones a filter left showing.
    const mine=S.feeds.filter(c=>c.group===f.id);
    const sum=k=>mine.reduce((n,c)=>n+(c[k]||0),0);
    const [unread,eps,saved]=mine.length
      ? [sum('unread'),sum('entries'),sum('downloaded')]
      : [f.unread,f.entries,f.downloaded];
    // A group's own row has no error of its own worth mentioning if the OPML itself
    // reads fine; it is failing when any feed inside it is. The feed's own page says what
    // went wrong (failBannerHTML); the list only has to make it findable.
    const bad=c=>c.failing?.reason||c.last_error;
    const err=mine.length ? mine.map(bad).find(Boolean) : bad(f);
    const el=document.createElement('div');
    el.className='feed'+(S.feed===f.id?' sel':'')+(depth?' child':'')+(kids?' group':'');
    el.tabIndex=0; el.dataset.id=f.id;
    const open = !!(kids && (expanded.has(f.id) || q));
    el.innerHTML =
      // The error mark hangs in the margin where a folder's triangle does. A folder already has
      // its triangle there, so that turns red instead, and the feed inside shows the mark.
      (kids?`<button class="chev${err?' bad':''}" aria-expanded="${open}" title="${err?`A feed inside has a problem: ${esc(err)}`:'Show or hide the feeds inside'}" aria-label="Show or hide the feeds inside">${ICON.caret}</button>`
        :err?`<span class="ferr" role="img" title="${esc(err)}" aria-label="Error: ${esc(err)}">${ICON.alert}</span>`:'')+
      (mine.length?folderArt(f,mine):artHTML(f.image,f.title||f.id))+
      `<div class="txt"><b>${esc(f.title||f.id)}</b><small>`+
      `${mine.length?plural(mine.length,'feed'):plural(eps,'item')} · ${saved} downloaded`+
      `</small></div>`+
      (f.orphaned?'<span class="tag" title="No longer listed, kept because it has downloads">Gone</span>':'')+
      `<span class="badge${unread?'':' zero'}" title="${unread} unread">${unread>999?'999+':unread}</span>`;
    el.onclick=()=>{ selectFeed(f.id); nav(false); };
    if(kids) $('.chev',el).onclick=ev=>{ ev.stopPropagation(); toggleGroup(f.id); };
    list.appendChild(el);
  }
  done();
}
function selectFeed(id){
  S.feed=id; S.offset=0; S.sel=null; S.q=''; $('#epSearch').value='';
  try{ localStorage.setItem('ipx.feed',id); }catch{}
  renderFeeds(); renderFeed(); loadEntries();
}

/// A failing feed's error, in plain words with something to do about it, once `failing` is
/// set (it has been failing for a day and is a kind worth naming -- see `explain_failure` in
/// src/feed.rs). Anything else still shows the raw error, as before.
function failBannerHTML(f){
  if(f.failing) return `<div class="sub" style="color:var(--bad)">${esc(f.failing.reason)}
    <button type="button" class="btn tiny" data-ffail="unsub">Unsubscribe</button>${
    f.failing.new_url?` <button type="button" class="btn tiny" data-ffail="newurl">Use the new address</button>`:''}</div>`;
  if(f.last_error) return `<div class="sub" style="color:var(--bad)">${esc(f.last_error)}</div>`;
  return '';
}
function wireFailBanner(box,f){
  const un=$('[data-ffail="unsub"]',box); if(un) un.onclick=()=>removeFeed(f);
  const nu=$('[data-ffail="newurl"]',box); if(nu) nu.onclick=()=>settingsModal(f,f.failing.new_url);
}