synq: add collapsible groups to version selector (#47)

## Motivation

After #44 fixed tag discovery, the version dropdown now lists all 49
patch
releases in a flat list, making it unusably long.

## Changes

- Group versions by minor release (e.g. "0.2.x") with collapsible
sections
- Clicking a group label navigates to the latest patch in that group
- Clicking the chevron expands to show individual patch versions
- Menu is now scrollable (max-height: 70vh)

Author: LalitMaganti

web/docs/static/style.css

@@ -317,7 +317,9 @@ header nav ul a:hover { color: var(--c-fg); }
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
-  min-width: 120px;
+  min-width: 140px;
+  max-height: 70vh;
+  overflow-y: auto;
   background: var(--c-surface);
   border: 1px solid var(--c-border);
   border-radius: var(--radius);
@@ -340,6 +342,34 @@ header nav ul a:hover { color: var(--c-fg); }
 .version-switcher__menu a:hover { color: var(--c-fg); background: var(--c-bg); }
 .version-switcher__menu a.active { color: var(--c-accent); font-weight: 500; }
 
+.version-switcher__group-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.35rem var(--sp-md);
+  font-size: var(--text-sm);
+  color: var(--c-muted);
+  cursor: pointer;
+  user-select: none;
+  border-top: 1px solid var(--c-border);
+  margin-top: var(--sp-xs);
+}
+
+.version-switcher__group-label:first-child { border-top: none; margin-top: 0; }
+.version-switcher__group-label:hover { color: var(--c-fg); background: var(--c-bg); }
+
+.version-switcher__group-label svg {
+  transition: transform 0.15s;
+}
+
+.version-switcher__group-label.expanded svg {
+  transform: rotate(180deg);
+}
+
+.version-switcher__group { display: none; }
+.version-switcher__group.expanded { display: block; }
+.version-switcher__group a { padding-left: calc(var(--sp-md) + 0.5rem); }
+
 /* Theme toggle */
 [data-theme="dark"]  .icon-sun  { display: block; }
 [data-theme="dark"]  .icon-moon { display: none; }

web/docs/templates/base.html

@@ -113,13 +113,59 @@
         .then(function(r) { return r.json(); })
         .then(function(versions) {
           menu.innerHTML = '';
+          // "main" and latest always shown directly
+          var topLevel = [];
+          var groups = {};
+          var groupOrder = [];
           versions.forEach(function(v) {
+            if (v.version === 'main' || v.label.indexOf('(latest)') !== -1) {
+              topLevel.push(v);
+              return;
+            }
+            // Group by major.minor (e.g. "0.2" from "v0.2.14")
+            var m = v.version.match(/^v?(\d+\.\d+)\./);
+            var key = m ? m[1] : 'other';
+            if (!groups[key]) { groups[key] = []; groupOrder.push(key); }
+            groups[key].push(v);
+          });
+          // Render top-level entries
+          topLevel.forEach(function(v) {
             var a = document.createElement('a');
             a.href = '/' + v.version + pagePath;
             a.textContent = v.label;
             if (v.version === current) a.classList.add('active');
             menu.appendChild(a);
           });
+          // Render collapsible groups
+          var chevron = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>';
+          groupOrder.forEach(function(key) {
+            var items = groups[key];
+            var hasActive = items.some(function(v) { return v.version === current; });
+            // Group label navigates to the latest (first) in the group
+            var lbl = document.createElement('a');
+            lbl.href = '/' + items[0].version + pagePath;
+            lbl.className = 'version-switcher__group-label' + (hasActive ? ' expanded' : '');
+            lbl.innerHTML = key + '.x ' + chevron;
+            // Chevron toggles expansion without navigating
+            var toggle = lbl.querySelector('svg');
+            toggle.addEventListener('click', function(e) {
+              e.preventDefault();
+              e.stopPropagation();
+              lbl.classList.toggle('expanded');
+              grp.classList.toggle('expanded');
+            });
+            var grp = document.createElement('div');
+            grp.className = 'version-switcher__group' + (hasActive ? ' expanded' : '');
+            items.forEach(function(v) {
+              var a = document.createElement('a');
+              a.href = '/' + v.version + pagePath;
+              a.textContent = v.label;
+              if (v.version === current) a.classList.add('active');
+              grp.appendChild(a);
+            });
+            menu.appendChild(lbl);
+            menu.appendChild(grp);
+          });
         })
         .catch(function() {});
     })();