Pin a feed to the top of the feed list

subscriptions.pinned, per person, set by PATCH /api/feeds/{id} {pinned} and
returned as FeedRow.pinned. Kept out of Sub, which the scanner merges into its
policy; set_subscription names its columns, so saving a feed's settings leaves
the pin alone (tested).

Pinned feeds come first in the list, a pin before the name and a rule under the
block: a pinned folder with its feeds under it, a feed from inside one lifted out
of it. The pin button is on both the feed and the folder page.

Closes #33.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/feeds.ts

@@ -53,19 +53,25 @@ function renderFeeds(){
   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.
+  // Feeds from a subscribed OPML sit under it, so the group reads as one thing. Pinned feeds
+  // go first: a folder with its feeds under it, a feed from inside one lifted out of it.
   const byId=Object.fromEntries(shown.map(f=>[f.id,f]));
+  const inside=f=>shown.filter(c=>c.group===f.id&&!c.pinned);
+  const tops=shown.filter(f=>f.pinned||!(f.group&&byId[f.group]));
   const order=[];
-  for(const f of shown){
-    if(f.group && byId[f.group]) continue;   // drawn under its parent instead
+  for(const f of [...tops.filter(f=>f.pinned),...tops.filter(f=>!f.pinned)]){
     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 c of inside(f).sort(unreadFirst)) order.push([c,1]);
   }
+  // The rule under the pinned block goes under its last row: a pinned folder's last feed when
+  // it is open.
+  const lastTop=order.findIndex(([f,d])=>!d&&!f.pinned);
+  const lastPin=(lastTop<0?order.filter(([f])=>f.pinned):order.slice(0,lastTop)).pop()?.[0];
   for(const [f,depth] of order){
-    const kids=shown.filter(c=>c.group===f.id).length;
+    const kids=inside(f).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);
@@ -79,7 +85,8 @@ function renderFeeds(){
     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.className='feed'+(S.feed===f.id?' sel':'')+(depth?' child':'')+(kids?' group':'')+
+      (f.pinned&&!depth?' pinned':'')+(f===lastPin&&lastTop>=0?' lastpin':'');
     el.tabIndex=0; el.dataset.id=f.id;
     const open = !!(kids && (expanded.has(f.id) || q));
     el.innerHTML =
@@ -88,7 +95,7 @@ function renderFeeds(){
       (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>`+
+      `<div class="txt"><b>${f.pinned?`<span class="fpin" title="Pinned">${ICON.pinOn}</span>`:''}${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>':'')+