feat: fold hierarchical tags with '/' in Versions tab

When any tag name contains a forward slash (as commonly seen in monorepo
setups, e.g. component/v1.0.0), the Versions tab now renders a collapsible
tree instead of a flat list. Tags are grouped by the prefix before the
first '/', and each group starts collapsed. Groups auto-expand when the
currently selected version lives inside them.

- Added CSS for .vtree-group-hdr, .vtree-item, .vtree-chevron, etc.
- Added _renderVerTree() to build the grouped HTML
- Added toggleTreeGroup() to expand/collapse a group
- Updated selectVersion() to use data-vidx attribute for highlight
  (works in both flat and tree modes)

Closes #31

Author: claude

dfetch_hub/site/index.html

@@ -290,6 +290,13 @@
     .vbadge-branch{background:#e8f4f8;color:#1a5276;border:1px solid #aed6f1}
     .vtable tbody tr{cursor:pointer}
     .vtable tbody tr.ver-selected td{background:rgba(0,113,188,.1)!important}
+    /* Hierarchical tag tree */
+    .vtree-group-hdr td{background:var(--bg)!important;cursor:pointer;font-size:.8rem;font-weight:700;padding:.45rem .85rem;color:var(--muted);user-select:none;border-bottom:1px solid var(--border)}
+    .vtree-group-hdr:hover td{background:var(--border)!important}
+    .vtree-chevron{display:inline-block;width:1rem;font-size:.7rem}
+    .vtree-prefix{color:var(--text)}
+    .vtree-count{margin-left:.35rem;font-size:.72rem;font-weight:400;color:var(--subtle)}
+    .vtree-item td:first-child{padding-left:1.8rem}
     /* Version pill */
     .action-card{margin-bottom:.65rem}
     .ver-pill{display:flex;align-items:center;gap:.4rem;margin-top:.45rem;padding:.3rem .7rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--rm)}
@@ -848,14 +855,15 @@
   allRefsCache=allRefs.slice(0,50);
   const firstTag=sortedTags.length?{name:sortedTags[0].name,kind:'tag'}:null;
   curVersion=firstTag||{name:c.default_branch||'main',kind:'branch'};
-  document.getElementById('vtbody').innerHTML=allRefsCache.length?allRefsCache.map((r,i)=>{
+  const hasHierTags=allRefsCache.some(r=>r.kind==='tag'&&r.name.includes('/'));
+  document.getElementById('vtbody').innerHTML=allRefsCache.length?(hasHierTags?_renderVerTree(allRefsCache):allRefsCache.map((r,i)=>{
     const sel=curVersion&&curVersion.name===r.name&&curVersion.kind===r.kind;
-    return `<tr class="${sel?'ver-selected':''}" onclick="selectVersion(${i})">
+    return `<tr class="${sel?'ver-selected':''}" data-vidx="${i}" onclick="selectVersion(${i})">
     <td class="vtag-name">${esc(r.name)}${i===0&&r.kind==='tag'?'<span class="vtag-latest">latest</span>':''}</td>
     <td><span class="vbadge vbadge-${r.kind}">${r.kind}</span></td>
     <td class="vsha">${r.commit_sha?r.commit_sha.slice(0,10):'—'}</td>
     <td style="font-size:.79rem;color:var(--subtle)">${r.date?r.date.slice(0,10):'—'}</td>
-  </tr>`;}).join(''):'<tr><td colspan="4" style="text-align:center;color:var(--subtle)">No version info</td></tr>';
+  </tr>`;}).join('')):'<tr><td colspan="4" style="text-align:center;color:var(--subtle)">No version info</td></tr>';
   // Snippet
   document.getElementById('dSnip').innerHTML=buildSnipHtml(c,curVersion);
   // Aside
@@ -884,7 +892,7 @@
   const r=allRefsCache[i];if(!r)return;
   curVersion={name:r.name,kind:r.kind};
   _replaceURL({pkg:curPkg,v:r.name,vk:r.kind});
-  document.querySelectorAll('#vtbody tr').forEach((tr,idx)=>tr.classList.toggle('ver-selected',idx===i));
+  document.querySelectorAll('#vtbody tr[data-vidx]').forEach(tr=>tr.classList.toggle('ver-selected',+tr.dataset.vidx===i));
   const c=curPkg?RAW[curPkg]:null;
   if(c)document.getElementById('dSnip').innerHTML=buildSnipHtml(c,curVersion);
   updSelVerInfo();
@@ -896,6 +904,42 @@
   document.getElementById('selVerKind').textContent=curVersion.kind;
   el.style.display='';
 }
+function _renderVerTree(refs){
+  // Group tags whose names contain '/' by their prefix (part before first /)
+  const groups=new Map();
+  refs.forEach((r,i)=>{
+    if(r.kind!=='tag'||!r.name.includes('/'))return;
+    const pfx=r.name.slice(0,r.name.indexOf('/'));
+    if(!groups.has(pfx))groups.set(pfx,[]);
+    groups.get(pfx).push(i);
+  });
+  let html='';
+  // Render grouped tags — collapsed by default, open if selected version is inside
+  groups.forEach((idxs,pfx)=>{
+    const open=idxs.some(i=>curVersion&&refs[i].name===curVersion.name&&refs[i].kind===curVersion.kind);
+    html+=`<tr class="vtree-group-hdr" onclick="toggleTreeGroup(this)"><td colspan="4"><span class="vtree-chevron">${open?'▾':'▸'}</span><span class="vtree-prefix">${esc(pfx)}/</span><span class="vtree-count">(${idxs.length})</span></td></tr>`;
+    idxs.forEach(i=>{
+      const r=refs[i];const sel=curVersion&&r.name===curVersion.name&&r.kind===curVersion.kind;
+      const isLatest=i===0;
+      html+=`<tr class="vtree-item${sel?' ver-selected':''}" data-vidx="${i}" onclick="selectVersion(${i})"${open?'':' style="display:none"'}><td class="vtag-name">${esc(r.name.slice(pfx.length+1))}${isLatest?'<span class="vtag-latest">latest</span>':''}</td><td><span class="vbadge vbadge-tag">tag</span></td><td class="vsha">${r.commit_sha?r.commit_sha.slice(0,10):'—'}</td><td style="font-size:.79rem;color:var(--subtle)">${r.date?r.date.slice(0,10):'—'}</td></tr>`;
+    });
+  });
+  // Render ungrouped tags and branches
+  refs.forEach((r,i)=>{
+    if(r.kind==='tag'&&r.name.includes('/'))return;
+    const sel=curVersion&&r.name===curVersion.name&&r.kind===curVersion.kind;
+    const isLatest=i===0&&r.kind==='tag';
+    html+=`<tr class="${sel?'ver-selected':''}" data-vidx="${i}" onclick="selectVersion(${i})"><td class="vtag-name">${esc(r.name)}${isLatest?'<span class="vtag-latest">latest</span>':''}</td><td><span class="vbadge vbadge-${r.kind}">${r.kind}</span></td><td class="vsha">${r.commit_sha?r.commit_sha.slice(0,10):'—'}</td><td style="font-size:.79rem;color:var(--subtle)">${r.date?r.date.slice(0,10):'—'}</td></tr>`;
+  });
+  return html||'<tr><td colspan="4" style="text-align:center;color:var(--subtle)">No version info</td></tr>';
+}
+function toggleTreeGroup(hdr){
+  const chevron=hdr.querySelector('.vtree-chevron');
+  const open=chevron&&chevron.textContent==='▾';
+  if(chevron)chevron.textContent=open?'▸':'▾';
+  let sib=hdr.nextElementSibling;
+  while(sib&&sib.classList.contains('vtree-item')){sib.style.display=open?'none':'';sib=sib.nextElementSibling;}
+}
 function switchTab(name){
   document.querySelectorAll('.tabbtn').forEach((b,i)=>{const ns=['readme','versions'];b.classList.toggle('active',ns[i]===name)});
   document.querySelectorAll('.tabcontent').forEach(el=>el.classList.remove('active'));