wip: better version selector

src/components/Header.astro

@@ -18,16 +18,22 @@ const { version } = Astro.props;
   <div
     class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"
   >
-    <!-- Logo / Title -->
-    <a
-      href="#hero"
-      class="header-title flex items-center gap-3 no-underline
-             hover:text-[var(--color-accent)] transition-colors"
-    >
-      <span class="font-display font-bold text-lg tracking-tight">
-        Git Common-Flow
-      </span>
-    </a>
+    <!-- Logo / Title + Version -->
+    <div class="flex items-center gap-3">
+      <a
+        href="#hero"
+        class="header-title flex items-center gap-3 no-underline
+               hover:text-[var(--color-accent)] transition-colors"
+      >
+        <span class="font-display font-bold text-lg tracking-tight">
+          Git Common-Flow
+        </span>
+      </a>
+      <VersionSelector
+        currentVersion={version}
+        versions={Array.from(config.versions)}
+      />
+    </div>
 
     <!-- Desktop Navigation -->
     <nav class="hidden md:flex items-center gap-1">
@@ -36,13 +42,8 @@ const { version } = Astro.props;
       <a href="#faq" class="btn btn-ghost text-sm">FAQ</a>
     </nav>
 
-    <!-- Right side: Version, Theme, GitHub -->
+    <!-- Right side: Theme, GitHub -->
     <div class="flex items-center gap-3">
-      <VersionSelector
-        currentVersion={version}
-        versions={Array.from(config.versions)}
-      />
-
       <ThemeToggle />
 
       <a

src/components/VersionSelector.astro

@@ -7,57 +7,101 @@ interface Props {
 const { currentVersion, versions } = Astro.props;
 ---
 
-<div class="version-selector relative">
-  <select
-    data-version-select
-    class="appearance-none bg-transparent border border-[var(--color-border)]
-           dark:border-[var(--color-dark-border)] rounded-lg px-3 py-1.5
-           pr-8 text-sm font-mono cursor-pointer
-           text-[var(--color-text-secondary)]
-           dark:text-[var(--color-dark-text-secondary)]
-           hover:border-[var(--color-accent)]
-           focus:border-[var(--color-accent)]
-           focus:outline-none transition-colors"
+<div class="version-selector relative" data-version-selector>
+  <!-- Trigger button -->
+  <button
+    type="button"
+    class="version-trigger"
+    data-version-trigger
+    aria-haspopup="listbox"
+    aria-expanded="false"
+  >
+    <span class="font-mono">v{currentVersion}</span>
+    <svg
+      class="arrow-icon"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M19 9l-7 7-7-7"></path>
+    </svg>
+  </button>
+
+  <!-- Dropdown menu -->
+  <div
+    class="version-dropdown"
+    data-version-dropdown
+    role="listbox"
+    aria-label="Select version"
   >
     {
       versions.map((v) => (
-        <option value={v} selected={v === currentVersion}>
+        <a
+          href={`/spec/${v}`}
+          class:list={["version-option", { active: v === currentVersion }]}
+          role="option"
+          aria-selected={v === currentVersion}
+        >
           v{v}
-        </option>
+        </a>
       ))
     }
-  </select>
-  <!-- Dropdown arrow -->
-  <svg
-    class="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none
-           text-[var(--color-text-muted)] dark:text-[var(--color-dark-text-muted)]"
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      d="M19 9l-7 7-7-7"></path>
-  </svg>
+  </div>
 </div>
 
 <script>
   function initVersionSelectors() {
-    const selects = document.querySelectorAll(
-      "[data-version-select]"
-    ) as NodeListOf<HTMLSelectElement>;
+    const selectors = document.querySelectorAll("[data-version-selector]");
 
-    selects.forEach((select) => {
-      // Avoid adding duplicate listeners
-      if (select.dataset.initialized) return;
-      select.dataset.initialized = "true";
+    selectors.forEach((selector) => {
+      if ((selector as HTMLElement).dataset.initialized) return;
+      (selector as HTMLElement).dataset.initialized = "true";
 
-      select.addEventListener("change", (e) => {
-        const target = e.target as HTMLSelectElement;
-        const version = target.value;
-        window.location.href = `/spec/${version}`;
+      const trigger = selector.querySelector(
+        "[data-version-trigger]"
+      ) as HTMLButtonElement;
+      const dropdown = selector.querySelector(
+        "[data-version-dropdown]"
+      ) as HTMLElement;
+
+      if (!trigger || !dropdown) return;
+
+      // Toggle dropdown
+      trigger.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const isOpen = dropdown.classList.contains("open");
+
+        // Close all other dropdowns first
+        document.querySelectorAll("[data-version-dropdown].open").forEach((d) => {
+          d.classList.remove("open");
+          d.previousElementSibling?.setAttribute("aria-expanded", "false");
+        });
+
+        if (!isOpen) {
+          dropdown.classList.add("open");
+          trigger.setAttribute("aria-expanded", "true");
+        }
+      });
+
+      // Close on click outside
+      document.addEventListener("click", (e) => {
+        if (!selector.contains(e.target as Node)) {
+          dropdown.classList.remove("open");
+          trigger.setAttribute("aria-expanded", "false");
+        }
+      });
+
+      // Close on escape
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && dropdown.classList.contains("open")) {
+          dropdown.classList.remove("open");
+          trigger.setAttribute("aria-expanded", "false");
+          trigger.focus();
+        }
       });
     });
   }
@@ -70,13 +114,111 @@ const { currentVersion, versions } = Astro.props;
 </script>
 
 <style>
-  select option {
-    background-color: var(--color-bg-primary);
+  .version-selector {
+    position: relative;
+  }
+
+  .version-trigger {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.625rem;
+    font-size: 0.8125rem;
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+    background-color: transparent;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    transition: all 150ms ease;
+  }
+
+  :global(.dark) .version-trigger {
+    border-color: var(--color-dark-border);
+    color: var(--color-dark-text-secondary);
+  }
+
+  .version-trigger:hover {
+    border-color: var(--color-accent);
     color: var(--color-text-primary);
   }
 
-  :global(.dark) select option {
-    background-color: var(--color-dark-bg-primary);
+  :global(.dark) .version-trigger:hover {
     color: var(--color-dark-text-primary);
   }
+
+  .arrow-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+    transition: transform 150ms ease;
+  }
+
+  .version-trigger[aria-expanded="true"] .arrow-icon {
+    transform: rotate(180deg);
+  }
+
+  .version-dropdown {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    left: 0;
+    min-width: 100%;
+    padding: 0.375rem;
+    background-color: var(--color-bg-primary);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    box-shadow: var(--shadow-lg);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px);
+    transition:
+      opacity 150ms ease,
+      transform 150ms ease,
+      visibility 150ms ease;
+    z-index: 100;
+  }
+
+  :global(.dark) .version-dropdown {
+    background-color: var(--color-dark-bg-secondary);
+    border-color: var(--color-dark-border);
+  }
+
+  .version-dropdown.open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  .version-option {
+    display: block;
+    padding: 0.5rem 0.75rem;
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    color: var(--color-text-secondary);
+    text-decoration: none;
+    border-radius: 4px;
+    transition: all 150ms ease;
+  }
+
+  :global(.dark) .version-option {
+    color: var(--color-dark-text-secondary);
+  }
+
+  .version-option:hover {
+    background-color: var(--color-bg-secondary);
+    color: var(--color-text-primary);
+  }
+
+  :global(.dark) .version-option:hover {
+    background-color: var(--color-dark-bg-code);
+    color: var(--color-dark-text-primary);
+  }
+
+  .version-option.active {
+    background-color: var(--color-accent-muted);
+    color: var(--color-accent);
+  }
+
+  :global(.dark) .version-option.active {
+    background-color: var(--color-dark-accent-muted);
+    color: var(--color-accent-light);
+  }
 </style>