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

feat(webui): use brand as channel selector on dashboard; keep brand link on other pages; tone down commit text color/size

Browse source
This commit is contained in:
Thomas Cravey 2025-08-17 15:43:25 -05:00
parent 6e64969bb6
commit 71cf7a927f
3 changed files with 12 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@ html, body { height: 100%; }
body { padding: 0; min-height: 100vh; } body { padding: 0; min-height: 100vh; }
header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background-color: var(--pico-background-color, #fff); } header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background-color: var(--pico-background-color, #fff); }
header.nav .brand { justify-self: start; } header.nav .brand { justify-self: start; }
header.nav .commit { justify-self: center; font-size: .75rem; opacity: .75; } header.nav .commit { justify-self: center; font-size: .7rem; opacity: .55; }
header.nav nav { justify-self: end; } header.nav nav { justify-self: end; }
main, article, .dash { margin-top: var(--headerH, 56px); margin-bottom: var(--footerH, 44px); } main, article, .dash { margin-top: var(--headerH, 56px); margin-bottom: var(--footerH, 44px); }
header.nav a.brand { text-decoration: none; font-weight: 600; } header.nav a.brand { text-decoration: none; font-weight: 600; }

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

@ -63,7 +63,7 @@ function processLinks(scope){ const links = scope.querySelectorAll('a[href]:not(
}); } }); }
async function loadChannels(){ try{ const data = await api('/api/channels'); st.channels = data; renderChannels(); if(data.length>0){ selectChannel(data[0]); } } catch(e){} } async function loadChannels(){ try{ const data = await api('/api/channels'); st.channels = data; renderChannels(); if(data.length>0){ selectChannel(data[0]); } } catch(e){} }
function renderChannels(){ const list=document.getElementById('nav-chans'); if(!list) return; list.innerHTML=''; st.channels.forEach(c=>{ const li=document.createElement('li'); const a=document.createElement('a'); a.href='#'; a.textContent=c + (c===st.current? ' ✓':''); a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c);}; li.appendChild(a); list.appendChild(li); }); } function renderChannels(){ const list=document.getElementById('nav-chans') || document.getElementById('brand-chans')?.querySelector('ul'); if(!list) return; list.innerHTML=''; st.channels.forEach(c=>{ const li=document.createElement('li'); const a=document.createElement('a'); a.href='#'; a.textContent=c + (c===st.current? ' ✓':''); a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c);}; li.appendChild(a); list.appendChild(li); }); }
async function selectChannel(ch){ if(st.sse){ st.sse.close(); st.sse=null; } st.current=ch; renderChannels(); const el=document.getElementById('tail'); if(!el) return; el.textContent=''; const data = await api('/api/tail',{query:{channel:ch,limit:50}}); appendBatch(data); requestAnimationFrame(()=>{ snapBottom(); st.atBottom=true; }); st.earliest = data.length? data[0].time : null; startStream(); initScrollHandlers(); } async function selectChannel(ch){ if(st.sse){ st.sse.close(); st.sse=null; } st.current=ch; renderChannels(); const el=document.getElementById('tail'); if(!el) return; el.textContent=''; const data = await api('/api/tail',{query:{channel:ch,limit:50}}); appendBatch(data); requestAnimationFrame(()=>{ snapBottom(); st.atBottom=true; }); st.earliest = data.length? data[0].time : null; startStream(); initScrollHandlers(); }
function initScrollHandlers(){ const el=document.getElementById('tail'); if(!el) return; const onScroll = async ()=>{ const nearBottom = (window.innerHeight + window.pageYOffset + 16) >= document.documentElement.scrollHeight; st.atBottom = nearBottom; const nearTop = window.pageYOffset <= 4; if(nearTop && st.earliest){ try{ const older = await api('/api/history',{query:{channel:st.current,before:st.earliest,limit:50}}); if(older.length){ prependBatch(older); st.earliest = older[0].time; } } catch(e){} } }; window.removeEventListener('scroll', st._scrollHandler || (()=>{})); st._scrollHandler = onScroll; window.addEventListener('scroll', onScroll, {passive:true}); } function initScrollHandlers(){ const el=document.getElementById('tail'); if(!el) return; const onScroll = async ()=>{ const nearBottom = (window.innerHeight + window.pageYOffset + 16) >= document.documentElement.scrollHeight; st.atBottom = nearBottom; const nearTop = window.pageYOffset <= 4; if(nearTop && st.earliest){ try{ const older = await api('/api/history',{query:{channel:st.current,before:st.earliest,limit:50}}); if(older.length){ prependBatch(older); st.earliest = older[0].time; } } catch(e){} } }; window.removeEventListener('scroll', st._scrollHandler || (()=>{})); st._scrollHandler = onScroll; window.addEventListener('scroll', onScroll, {passive:true}); }

11
internal/httpapi/templates/layout.tmpl
View file

@ -11,7 +11,16 @@
</head> </head>
<body> <body>
<header class="nav"> <header class="nav">
<div><a class="brand" href="/">sojuboy</a></div> <div>
{{ if eq .Content "dashboard" }}
<details id="brand-chans" role="list">
<summary class="brand" aria-haspopup="listbox">sojuboy</summary>
<ul id="nav-chans" role="listbox"></ul>
</details>
{{ else }}
<a class="brand" href="/">sojuboy</a>
{{ end }}
</div>
<div class="commit">{{ .CommitShort }}</div> <div class="commit">{{ .CommitShort }}</div>
<nav> <nav>
<ul> <ul>