tjcravey/sojuboy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): add collapse/expand buttons for link cards and summaries

Browse source
This commit is contained in:
Thomas Cravey 2025-08-17 16:26:29 -05:00
parent 962469bd76
commit 6b213f085e
1 changed files with 15 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

23
internal/httpapi/static/app.js
View file

@ -36,28 +36,35 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
fetch('/api/linkcard?url='+encodeURIComponent(a.href)).then(r=>r.json()).then(card=>{ fetch('/api/linkcard?url='+encodeURIComponent(a.href)).then(r=>r.json()).then(card=>{
if(!card) return; if(!card) return;
if(card.title||card.description||card.image||card.html){ if(card.title||card.description||card.image||card.html){
const c=document.createElement('div'); c.className='card'; var html=''; const c=document.createElement('div'); c.className='card';
const details=document.createElement('div'); details.className='card-details';
var html='';
if(card.image){ html += '<div><img src="'+card.image+'" alt="" style="max-width:160px;max-height:120px;object-fit:cover;border-radius:.25rem"></div>'; } if(card.image){ html += '<div><img src="'+card.image+'" alt="" style="max-width:160px;max-height:120px;object-fit:cover;border-radius:.25rem"></div>'; }
html += '<div style="flex:1;margin-left:.5rem">'; html += '<div style="flex:1;margin-left:.5rem">';
if(card.title){ html += '<div style="font-weight:600">'+escapeHtml(card.title)+'</div>'; } if(card.title){ html += '<div style="font-weight:600">'+escapeHtml(card.title)+'</div>'; }
if(card.description){ html += '<div style="opacity:.8">'+escapeHtml(card.description)+'</div>'; } if(card.description){ html += '<div style="opacity:.8">'+escapeHtml(card.description)+'</div>'; }
html += '</div>'; html += '</div>';
const row = document.createElement('div'); row.style.display='flex'; row.style.alignItems='flex-start'; row.style.gap='.5rem'; row.innerHTML = html; const row = document.createElement('div'); row.style.display='flex'; row.style.alignItems='flex-start'; row.style.gap='.5rem'; row.innerHTML = html;
c.appendChild(row); details.appendChild(row);
c.querySelectorAll('img').forEach(img=> img.addEventListener('load', ()=> pinBottomMulti())); details.querySelectorAll('img').forEach(img=> img.addEventListener('load', ()=> pinBottomMulti()));
if(card.html){ const wrap=document.createElement('div'); wrap.innerHTML=card.html; c.appendChild(wrap); ensureTwitterWidgets(); } if(card.html){ const wrap=document.createElement('div'); wrap.innerHTML=card.html; details.appendChild(wrap); ensureTwitterWidgets(); }
// Summary control row c.appendChild(details);
// Controls
const ctrl = document.createElement('div'); ctrl.style.marginTop='.25rem'; const ctrl = document.createElement('div'); ctrl.style.marginTop='.25rem';
const btn = document.createElement('button'); btn.type='button'; btn.title='Summarize this link'; btn.textContent='\u25B6'; btn.style.padding='0 .4rem'; btn.style.fontSize='.9rem'; const btn = document.createElement('button'); btn.type='button'; btn.title='Summarize this link'; btn.textContent='\u25B6'; btn.style.padding='0 .4rem'; btn.style.fontSize='.9rem';
const spinner = document.createElement('span'); spinner.textContent=''; spinner.style.marginLeft='.5rem'; const spinner = document.createElement('span'); spinner.textContent=''; spinner.style.marginLeft='.5rem';
const sum = document.createElement('div'); sum.className='link-summary'; sum.style.whiteSpace='pre-wrap'; sum.style.marginTop='.25rem'; const sum = document.createElement('div'); sum.className='link-summary'; sum.style.whiteSpace='pre-wrap'; sum.style.marginTop='.25rem';
const toggleCard = document.createElement('button'); toggleCard.type='button'; toggleCard.title='Collapse/expand card'; toggleCard.textContent='−'; toggleCard.style.padding='0 .4rem'; toggleCard.style.fontSize='.9rem'; toggleCard.style.marginLeft='.5rem';
const toggleSum = document.createElement('button'); toggleSum.type='button'; toggleSum.title='Collapse/expand summary'; toggleSum.textContent='−'; toggleSum.style.padding='0 .4rem'; toggleSum.style.fontSize='.9rem'; toggleSum.style.marginLeft='.25rem';
toggleCard.onclick = ()=>{ const hidden = details.style.display==='none'; details.style.display = hidden? '' : 'none'; toggleCard.textContent = hidden? '−' : '+'; pinBottomMulti(); };
toggleSum.onclick = ()=>{ const hidden = sum.style.display==='none'; sum.style.display = hidden? '' : 'none'; toggleSum.textContent = hidden? '−' : '+'; pinBottomMulti(); };
btn.onclick = async ()=>{ btn.onclick = async ()=>{
btn.disabled=true; spinner.textContent='…'; sum.textContent=''; btn.disabled=true; spinner.textContent='…'; sum.textContent=''; sum.style.display=''; toggleSum.textContent='−';
try{ const data = await api('/api/linksummary',{query:{url:a.href}}); sum.textContent = (data && data.summary) ? data.summary : '(no summary)'; } try{ const data = await api('/api/linksummary',{query:{url:a.href}}); sum.textContent = (data && data.summary) ? data.summary : '(no summary)'; }
catch(e){ sum.textContent = 'error: '+e; } catch(e){ sum.textContent = 'error: '+e; }
spinner.textContent=''; btn.disabled=false; spinner.textContent=''; btn.disabled=false; pinBottomMulti();
}; };
ctrl.appendChild(btn); ctrl.appendChild(spinner); ctrl.appendChild(btn); ctrl.appendChild(spinner); ctrl.appendChild(toggleCard); ctrl.appendChild(toggleSum);
c.appendChild(ctrl); c.appendChild(ctrl);
c.appendChild(sum); c.appendChild(sum);
a.parentNode.insertBefore(c, a.nextSibling); a.parentNode.insertBefore(c, a.nextSibling);