Show what a feed says it is on its page in the Directory (#130)

A feed's page in the Directory (#128) had its cover, category and latest items, but not the
feed's own description, which Apple's show page leads with: iPX read every item's description
and threw the channel's away, and the feeds table had nowhere to keep it.

It is parsed now, RSS's <description>, or iTunes' summary when that is empty, or Atom's
subtitle, kept in feeds.description (kept when a later read has none, as title and image are),
and sent, sanitized, with the items from /api/directory/{id}, which is now an object, not a
list. The page shows it as plain text under the header, three lines of it, with More when there
is more. A description that only repeats the title is left out.

feeds.description is the first column added to a table that already exists. create_missing
looks for it with a SELECT and runs the ALTER only when it is missing, since it runs on every
open, the healthcheck's included, and an ALTER's lock is what made that time out before. The
same once-only step forgets every feed's ETag and Last-Modified: a feed is read whole only when
it has changed, so its description would otherwise wait for its next item.

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

web/src/dialogs.ts

@@ -138,7 +138,8 @@ function drawDirectory(box=$('#directory'), focus?: string){
         // Its category's page is one click away from here.
         show.category?`<button type="button" class="dlink" data-go="${esc(show.category)}">${esc(show.subcategory||show.category)}</button>`:''}
         <p class="sub">${n?`${n} ${n===1?'person here subscribes':'people here subscribe'}`:'Nobody here subscribes yet'}</p>
-        <div class="acts"><button class="btn ico primary" data-a="sub" title="Subscribe" aria-label="Subscribe">${ICON.plus}</button></div></div></div>`
+        <div class="acts"><button class="btn ico primary" data-a="sub" title="Subscribe" aria-label="Subscribe">${ICON.plus}</button></div></div></div>
+      <div class="about" id="dabout" hidden><p></p><button type="button" class="dlink" aria-expanded="false" hidden>More</button></div>`
       +sec(show.podcast?'Latest episodes':'Latest posts','<div class="latest" id="dshow"><p class="hint">Loading…</p></div>');
   }else if(q){
     // Names only: a category is a tap away, and "news" matching every News feed buried the
@@ -169,7 +170,7 @@ function drawDirectory(box=$('#directory'), focus?: string){
         pill('','All',inCat.length)+subs.map(s=>pill(s,s,inCat.filter(p=>p.subcategory===s).length)).join('')}</div>`:'')+grid);
   }
   box.innerHTML=html;
-  if(show){ $('.show [data-a="sub"]',box).onclick=()=>subscribeListed(show); fillShow($('#dshow',box),show); }
+  if(show){ $('.show [data-a="sub"]',box).onclick=()=>subscribeListed(show); fillShow(box,show); }
   const c=$('#dchart',box);
   if(c){ c.style.setProperty('--rows',String(Math.ceil(chart.length/2))); chart.forEach((p,i)=>c.appendChild(listedFeed(p,'rank',i+1))); }
   const t=$('#dtiles',box);
@@ -194,14 +195,29 @@ function drawDirectory(box=$('#directory'), focus?: string){
   if(focus) $(focus,box)?.focus();
 }
 
-/// A listed feed's latest items, on its page: each one's title, opening its post on the
-/// publisher's site where it has one, its first lines, and when and how long.
-async function fillShow(list,p){
-  let items;
-  try{ items=await api(`/api/directory/${encodeURIComponent(p.id)}`); }
+/// A listed feed's page, filled in: what it says it is, its first lines unless you ask for the
+/// rest, and its latest items, each one's title, opening its post on the publisher's site where
+/// it has one, its first lines, and when and how long.
+async function fillShow(box,p){
+  const list=$('#dshow',box), about=$('#dabout',box);
+  let got;
+  try{ got=await api(`/api/directory/${encodeURIComponent(p.id)}`); }
   catch(e){ list.innerHTML=`<p class="hint">${esc(e.message)}</p>`; return; }
   // Gone back, or on to another, while it loaded.
   if(dirShow!==p.id||!list.isConnected) return;
+  // Some feeds give their title again as their description, which says nothing new.
+  const said=plainText(got.description);
+  if(said&&said!==NAME(p)){
+    const text=$('p',about), more=$('button',about);
+    text.textContent=said; about.hidden=false;
+    // Only when there is more than the three lines shown.
+    more.hidden=text.scrollHeight<=text.clientHeight+1;
+    more.onclick=()=>{
+      const open=about.classList.toggle('open');
+      more.textContent=open?'Less':'More'; more.setAttribute('aria-expanded',String(open));
+    };
+  }
+  const items=got.items;
   list.innerHTML=items.length?items.map(e=>{
     const name=entryName(e), text=name.derived?'':plainText(e.description).slice(0,500);
     const when=[dateOf(e.published),e.duration&&clock(e.duration)].filter(Boolean);