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

ux(cards): single chevron expand/collapse + Summarize ✨ toggle; header with favicon/domain

Browse source
This commit is contained in:
Thomas Cravey 2025-08-17 18:02:59 -05:00
parent 6b213f085e
commit 2680abcf1f
2 changed files with 36 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

6
internal/httpapi/static/app.css
View file

@ -19,3 +19,9 @@ footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; text-alig
@media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .dash aside.sidebar { display:none; } } @media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .dash aside.sidebar { display:none; } }
/* Summarizer output wrapping */ /* Summarizer output wrapping */
#out { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } #out { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
/* Cards */
.card { margin:.35rem 0; padding:.5rem; border:1px solid var(--muted-border-color); border-radius:.5rem; background: var(--pico-card-background-color, rgba(0,0,0,0.02)); }
.card .card-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; cursor:pointer; }
.card .card-actions { display:flex; align-items:center; gap:.4rem; }
.card .summary-title { font-weight:600; margin-top:.25rem; opacity:.85; }

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

@ -37,6 +37,21 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
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'; const c=document.createElement('div'); c.className='card';
// Header with favicon/domain + title (clickable), actions on the right
const head=document.createElement('div'); head.className='card-head';
const left=document.createElement('div'); left.style.display='flex'; left.style.alignItems='center'; left.style.gap='.5rem';
const u=new URL(a.href);
const fav=document.createElement('img'); fav.src='https://www.google.com/s2/favicons?domain='+u.hostname+'&sz=32'; fav.width=16; fav.height=16; fav.alt=''; fav.loading='lazy'; fav.referrerPolicy='no-referrer';
const title=document.createElement('a'); title.href=a.href; title.target='_blank'; title.rel='noopener'; title.textContent=card.title||u.hostname; title.style.fontWeight='600'; title.style.textDecoration='none';
left.appendChild(fav); left.appendChild(title);
const actions=document.createElement('div'); actions.className='card-actions';
const chevron=document.createElement('button'); chevron.type='button'; chevron.title='Expand/collapse'; chevron.textContent='▾'; chevron.style.padding='0 .4rem'; chevron.style.fontSize='.9rem';
const btn=document.createElement('button'); btn.type='button'; btn.title='Summarize this link'; btn.textContent='Summarize ✨'; btn.style.padding='0 .4rem'; btn.style.fontSize='.9rem';
const spinner=document.createElement('span'); spinner.textContent=''; spinner.style.marginLeft='.5rem';
actions.appendChild(btn); actions.appendChild(chevron); actions.appendChild(spinner);
head.appendChild(left); head.appendChild(actions);
c.appendChild(head);
// Body (details)
const details=document.createElement('div'); details.className='card-details'; const details=document.createElement('div'); details.className='card-details';
var html=''; 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>'; }
@ -44,29 +59,29 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
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;
details.appendChild(row); details.appendChild(row);
details.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; details.appendChild(wrap); ensureTwitterWidgets(); } if(card.html){ const wrap=document.createElement('div'); wrap.innerHTML=card.html; details.appendChild(wrap); ensureTwitterWidgets(); }
c.appendChild(details); c.appendChild(details);
// Controls // Summary block (hidden until requested)
const ctrl = document.createElement('div'); ctrl.style.marginTop='.25rem'; const sum=document.createElement('div'); sum.className='link-summary'; sum.style.whiteSpace='pre-wrap'; sum.style.marginTop='.25rem'; sum.style.display='none';
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'; c.appendChild(sum);
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 toggleDetails = ()=>{ const collapsed = details.style.display==='none'; details.style.display = collapsed? '' : 'none'; chevron.textContent = collapsed? '▾':'▸'; pinBottomMulti(); };
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'; head.addEventListener('click', (ev)=>{ if(ev.target===btn || actions.contains(ev.target)) return; toggleDetails(); });
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'; chevron.onclick=(ev)=>{ ev.stopPropagation(); toggleDetails(); };
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=''; sum.style.display=''; toggleSum.textContent='−'; if(sum.style.display!== 'none' && sum.textContent){ // hide existing
try{ const data = await api('/api/linksummary',{query:{url:a.href}}); sum.textContent = (data && data.summary) ? data.summary : '(no summary)'; } sum.style.display='none'; btn.textContent='Summarize ✨'; pinBottomMulti(); return;
}
btn.disabled=true; spinner.textContent='…'; sum.textContent=''; sum.style.display='';
try{ const data = await api('/api/linksummary',{query:{url:a.href}}); sum.textContent = (data && data.summary) ? data.summary : '(no summary)'; btn.textContent='Hide summary'; }
catch(e){ sum.textContent = 'error: '+e; } catch(e){ sum.textContent = 'error: '+e; }
spinner.textContent=''; btn.disabled=false; pinBottomMulti(); spinner.textContent=''; btn.disabled=false; pinBottomMulti();
}; };
ctrl.appendChild(btn); ctrl.appendChild(spinner); ctrl.appendChild(toggleCard); ctrl.appendChild(toggleSum);
c.appendChild(ctrl);
c.appendChild(sum);
a.parentNode.insertBefore(c, a.nextSibling); a.parentNode.insertBefore(c, a.nextSibling);
} }
}).catch(()=>{}); }).catch(()=>{});