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

ux(cards): place 🌝/🌚 and chevron inline with original link; collapse hides entire card; improve YouTube summarization path groundwork

Browse source
This commit is contained in:
Thomas Cravey 2025-08-17 19:12:26 -05:00
parent 575622b45c
commit fed806bfc0
3 changed files with 37 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -37,21 +37,6 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
if(!card) return;
if(card.title||card.description||card.image||card.html){
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='🌝'; 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';
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>'; }
@ -61,28 +46,30 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
html += '</div>';
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.querySelectorAll('img').forEach(img=> img.addEventListener('load', ()=> pinBottomMulti()));
if(card.html){ const wrap=document.createElement('div'); wrap.innerHTML=card.html; details.appendChild(wrap); ensureTwitterWidgets(); }
details.querySelectorAll('img').forEach(img=> img.addEventListener('load', ()=> pinBottomMulti()));
c.appendChild(details);
// Summary block (hidden until requested)
const sum=document.createElement('div'); sum.className='link-summary'; sum.style.whiteSpace='pre-wrap'; sum.style.marginTop='.25rem'; sum.style.display='none';
c.appendChild(sum);
const toggleDetails = ()=>{ const collapsed = details.style.display==='none'; details.style.display = collapsed? '' : 'none'; chevron.textContent = collapsed? '▾':'▸'; pinBottomMulti(); };
head.addEventListener('click', (ev)=>{ if(ev.target===btn || actions.contains(ev.target)) return; toggleDetails(); });
chevron.onclick=(ev)=>{ ev.stopPropagation(); toggleDetails(); };
btn.onclick = async ()=>{
if(sum.style.display!== 'none' && sum.textContent){ // hide existing
sum.style.display='none'; btn.textContent='🌝'; 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='🌚'; }
const sum=document.createElement('div'); sum.className='link-summary'; sum.style.whiteSpace='pre-wrap'; sum.style.marginTop='.25rem'; sum.style.display='none'; c.appendChild(sum);
// Place actions inline next to the original link
const act=document.createElement('span'); act.style.marginLeft='.35rem';
const sumBtn=document.createElement('button'); sumBtn.type='button'; sumBtn.title='Summarize'; sumBtn.textContent='🌝'; sumBtn.style.padding='0 .35rem'; sumBtn.style.fontSize='.9rem';
const chevron=document.createElement('button'); chevron.type='button'; chevron.title='Expand/collapse'; chevron.textContent='▾'; chevron.style.padding='0 .35rem'; chevron.style.fontSize='.9rem';
const spinner=document.createElement('span'); spinner.textContent=''; spinner.style.marginLeft='.25rem';
act.appendChild(sumBtn); act.appendChild(chevron); act.appendChild(spinner);
a.insertAdjacentElement('afterend', act);
// Insert card after the link line
a.parentNode.insertBefore(c, act.nextSibling);
const toggle = ()=>{ const hidden = c.style.display==='none'; c.style.display = hidden? '' : 'none'; chevron.textContent = hidden? '▾':'▸'; pinBottomMulti(); };
chevron.onclick = (ev)=>{ ev.stopPropagation(); toggle(); };
sumBtn.onclick = async ()=>{
if(sum.style.display!== 'none' && sum.textContent){ sum.style.display='none'; sumBtn.textContent='🌝'; pinBottomMulti(); return; }
// Ensure card is visible when showing summary
if(c.style.display==='none'){ toggle(); }
sumBtn.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)'; sumBtn.textContent='🌚'; }
catch(e){ sum.textContent = 'error: '+e; }
spinner.textContent=''; btn.disabled=false; pinBottomMulti();
spinner.textContent=''; sumBtn.disabled=false; pinBottomMulti();
};
a.parentNode.insertBefore(c, a.nextSibling);
}
}).catch(()=>{});
}); }