feat(webui): move channel list into navbar dropdown with checkmark; remove sidebar and footer; show short commit centered in navbar

internal/httpapi/static/app.css

@@ -1,10 +1,13 @@
 html, body { height: 100%; }
 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: flex; justify-content: space-between; 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 .commit { justify-self: center; font-size: .75rem; opacity: .75; }
+header.nav nav { justify-self: end; }
 main, article, .dash { margin-top: var(--headerH, 56px); margin-bottom: var(--footerH, 44px); }
 header.nav a.brand { text-decoration: none; font-weight: 600; }
 /* Dashboard-only grid layout */
-.dash { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
+.dash { display: grid; grid-template-columns: 1fr; gap: 0; }
 .dash aside.sidebar { border-right: 1px solid var(--muted-border-color); padding: .75rem; overflow-y: auto; }
 .dash aside.sidebar a { display:block; padding:.25rem .5rem; border-radius:.25rem; text-decoration:none; }
 .dash aside.sidebar a.active { background: var(--muted-color); color: var(--contrast); }

internal/httpapi/static/app.js

@@ -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){} }
-function renderChannels(){ const list=document.getElementById('chanlist'); if(!list) return; list.innerHTML=''; st.channels.forEach(c=>{ const a=document.createElement('a'); a.href='#'; a.textContent=c; a.onclick=(ev)=>{ev.preventDefault(); selectChannel(c)}; if(c===st.current) a.className='active'; list.appendChild(a); }); }
+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); }); }
 
 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}); }
@@ -75,7 +75,7 @@ async function summarize(){ const ch=document.getElementById('channel'); const w
 window.addEventListener('DOMContentLoaded', ()=>{
   if('scrollRestoration' in history){ history.scrollRestoration = 'manual'; }
   measureBars();
-  if(document.getElementById('chanlist')){ loadChannels(); }
+  loadChannels();
   if(document.getElementById('channel')){
     fetch('/api/channels').then(r=>r.json()).then(arr=>{ const sel=document.getElementById('channel'); arr.forEach(c=>{ const o=document.createElement('option'); o.value=c; o.textContent=c; sel.appendChild(o); }); }).catch(()=>{});
   }

internal/httpapi/templates.go

@@ -36,6 +36,11 @@ func (s *Server) render(w http.ResponseWriter, name string, data map[string]any)
 	}
 	data["Version"] = s.Version
 	data["Commit"] = s.Commit
+	if s.Commit != "" {
+		c := s.Commit
+		if len(c) > 12 { c = c[:12] }
+		data["CommitShort"] = c
+	}
 	base := strings.TrimSuffix(path.Base(name), path.Ext(name))
 	if base == "dashboard" {
 		data["Title"] = "sojuboy"

internal/httpapi/templates/dashboard.tmpl

@@ -1,9 +1,6 @@
 {{ define "dashboard" }}
-<main class="dash">
-  <aside class="sidebar">
-    <nav id="chanlist"></nav>
-  </aside>
-  <section class="chat">
+<main class="dash single">
+  <section class="chat" style="grid-column: 1 / -1">
     <div id="tail"></div>
   </section>
 </main>

internal/httpapi/templates/layout.tmpl

@@ -12,8 +12,15 @@
 <body>
   <header class="nav">
     <div><a class="brand" href="/">sojuboy</a></div>
+    <div class="commit">{{ .CommitShort }}</div>
     <nav>
       <ul>
+        <li class="chan">
+          <details role="list">
+            <summary aria-haspopup="listbox">Channel</summary>
+            <ul id="nav-chans" role="listbox"></ul>
+          </details>
+        </li>
         <li><a href="/summarizer">Summarizer</a></li>
         <li><a href="/logout">Logout</a></li>
       </ul>
@@ -24,7 +31,7 @@
   {{ else if eq .Content "summarizer" }}
     {{ template "summarizer" . }}
   {{ end }}
-  <footer><small>{{ .Version }} ({{ .Commit }})</small></footer>
+  
 </body>
 </html>
 {{ end }}