feat: implement split button dropdown for install options

- Replace separate VS Code/Insiders buttons with single Install dropdown - Primary 'Install' button opens in VS Code, dropdown chevron reveals options - Dropdown shows 'VS Code' and 'VS Code Insiders' choices - Add CSS for split button styling with glassmorphism dropdown - Apply to modal and all list views (agents, prompts, instructions)
2026-02-20 18:35:14 +00:00 · 2026-01-29 09:33:49 +11:00
parent 1887d9ba56
commit 7e7b5c8610
8 changed files with 236 additions and 54 deletions
--- a/website/src/scripts/modal.ts
+++ b/website/src/scripts/modal.ts
@@ -37,6 +37,39 @@ export function setupModal(): void {
      showToast(success ? 'Copied to clipboard!' : 'Failed to copy', success ? 'success' : 'error');
    }
  });
+
+  // Setup install dropdown toggle
+  setupInstallDropdown('install-dropdown');
+}
+
+/**
+ * Setup install dropdown toggle functionality
+ */
+export function setupInstallDropdown(containerId: string): void {
+  const container = document.getElementById(containerId);
+  if (!container) return;
+
+  const toggle = container.querySelector('.install-btn-toggle');
+  
+  toggle?.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    container.classList.toggle('open');
+  });
+
+  // Close dropdown when clicking outside
+  document.addEventListener('click', (e) => {
+    if (!container.contains(e.target as Node)) {
+      container.classList.remove('open');
+    }
+  });
+
+  // Close dropdown when clicking a menu item
+  container.querySelectorAll('.install-dropdown-menu a').forEach(link => {
+    link.addEventListener('click', () => {
+      container.classList.remove('open');
+    });
+  });
 }

 /**
@@ -46,8 +79,10 @@ export async function openFileModal(filePath: string, type: string): Promise<voi
  const modal = document.getElementById('file-modal');
  const title = document.getElementById('modal-title');
  const contentEl = document.getElementById('modal-content')?.querySelector('code');
-  const installBtn = document.getElementById('install-btn') as HTMLAnchorElement | null;
-  const installInsidersBtn = document.getElementById('install-insiders-btn') as HTMLAnchorElement | null;
+  const installDropdown = document.getElementById('install-dropdown');
+  const installBtnMain = document.getElementById('install-btn-main') as HTMLAnchorElement | null;
+  const installVscode = document.getElementById('install-vscode') as HTMLAnchorElement | null;
+  const installInsiders = document.getElementById('install-insiders') as HTMLAnchorElement | null;

  if (!modal || !title || !contentEl) return;

@@ -59,22 +94,18 @@ export async function openFileModal(filePath: string, type: string): Promise<voi
  contentEl.textContent = 'Loading...';
  modal.classList.remove('hidden');

-  // Setup install buttons (VS Code and VS Code Insiders)
-  const installUrl = getVSCodeInstallUrl(type, filePath, false);
-  const installInsidersUrl = getVSCodeInstallUrl(type, filePath, true);
+  // Setup install dropdown
+  const vscodeUrl = getVSCodeInstallUrl(type, filePath, false);
+  const insidersUrl = getVSCodeInstallUrl(type, filePath, true);
  
-  if (installUrl && installBtn) {
-    installBtn.href = installUrl;
-    installBtn.style.display = 'inline-flex';
-  } else if (installBtn) {
-    installBtn.style.display = 'none';
-  }
-  
-  if (installInsidersUrl && installInsidersBtn) {
-    installInsidersBtn.href = installInsidersUrl;
-    installInsidersBtn.style.display = 'inline-flex';
-  } else if (installInsidersBtn) {
-    installInsidersBtn.style.display = 'none';
+  if (vscodeUrl && installDropdown) {
+    installDropdown.style.display = 'inline-flex';
+    installDropdown.classList.remove('open');
+    if (installBtnMain) installBtnMain.href = vscodeUrl;
+    if (installVscode) installVscode.href = vscodeUrl;
+    if (installInsiders) installInsiders.href = insidersUrl || '#';
+  } else if (installDropdown) {
+    installDropdown.style.display = 'none';
  }

  // Fetch and display content
@@ -93,9 +124,15 @@ export async function openFileModal(filePath: string, type: string): Promise<voi
 */
 export function closeModal(): void {
  const modal = document.getElementById('file-modal');
+  const installDropdown = document.getElementById('install-dropdown');
+  
  if (modal) {
    modal.classList.add('hidden');
  }
+  if (installDropdown) {
+    installDropdown.classList.remove('open');
+  }
+  
  currentFilePath = null;
  currentFileContent = null;
  currentFileType = null;
--- a/website/src/scripts/pages/agents.ts
+++ b/website/src/scripts/pages/agents.ts
@@ -3,7 +3,7 @@
 */
 import { createChoices, getChoicesValues, type Choices } from '../choices';
 import { FuzzySearch } from '../search';
-import { fetchData, debounce, escapeHtml, getGitHubUrl, getVSCodeInstallUrl } from '../utils';
+import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers } from '../utils';
 import { setupModal, openFileModal } from '../modal';

 interface Agent {
@@ -102,13 +102,7 @@ function renderItems(items: Agent[], query = ''): void {
        </div>
      </div>
      <div class="resource-actions">
-        <a href="${getVSCodeInstallUrl(resourceType, item.path, false)}" class="btn btn-primary btn-small" target="_blank" onclick="event.stopPropagation()" title="Install to VS Code">
-          <svg viewBox="0 0 100 100" width="14" height="14" fill="currentColor"><path d="M95.436 26.986L75.282 15.768a6.04 6.04 0 0 0-6.895.876L28.78 51.927 11.912 39.151a4.03 4.03 0 0 0-5.154.387l-5.36 4.878a4.03 4.03 0 0 0-.003 5.947l14.646 13.396-14.646 13.396a4.03 4.03 0 0 0 .003 5.947l5.36 4.878a4.03 4.03 0 0 0 5.154.387L28.78 74.59l39.607 35.283a6.04 6.04 0 0 0 6.895.876l20.154-11.218a6.04 6.04 0 0 0 3.127-5.288V32.274a6.04 6.04 0 0 0-3.127-5.288zM75.015 73.428L46.339 51.927l28.676-21.5z" transform="scale(0.16)"/></svg>
-          VS Code
-        </a>
-        <a href="${getVSCodeInstallUrl(resourceType, item.path, true)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()" title="Install to VS Code Insiders">
-          Insiders
-        </a>
+        ${getInstallDropdownHtml(resourceType, item.path, true)}
        <a href="${getGitHubUrl(item.path)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()">
          GitHub
        </a>
@@ -175,6 +169,7 @@ export async function initAgentsPage(): Promise<void> {
  });

  setupModal();
+  setupDropdownCloseHandlers();
 }

 // Auto-initialize when DOM is ready
--- a/website/src/scripts/pages/instructions.ts
+++ b/website/src/scripts/pages/instructions.ts
@@ -3,7 +3,7 @@
 */
 import { createChoices, getChoicesValues, type Choices } from '../choices';
 import { FuzzySearch } from '../search';
-import { fetchData, debounce, escapeHtml, getGitHubUrl, getVSCodeInstallUrl } from '../utils';
+import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers } from '../utils';
 import { setupModal, openFileModal } from '../modal';

 interface Instruction {
@@ -72,13 +72,7 @@ function renderItems(items: Instruction[], query = ''): void {
        </div>
      </div>
      <div class="resource-actions">
-        <a href="${getVSCodeInstallUrl('instructions', item.path, false)}" class="btn btn-primary btn-small" target="_blank" onclick="event.stopPropagation()" title="Install to VS Code">
-          <svg viewBox="0 0 100 100" width="14" height="14" fill="currentColor"><path d="M95.436 26.986L75.282 15.768a6.04 6.04 0 0 0-6.895.876L28.78 51.927 11.912 39.151a4.03 4.03 0 0 0-5.154.387l-5.36 4.878a4.03 4.03 0 0 0-.003 5.947l14.646 13.396-14.646 13.396a4.03 4.03 0 0 0 .003 5.947l5.36 4.878a4.03 4.03 0 0 0 5.154.387L28.78 74.59l39.607 35.283a6.04 6.04 0 0 0 6.895.876l20.154-11.218a6.04 6.04 0 0 0 3.127-5.288V32.274a6.04 6.04 0 0 0-3.127-5.288zM75.015 73.428L46.339 51.927l28.676-21.5z" transform="scale(0.16)"/></svg>
-          VS Code
-        </a>
-        <a href="${getVSCodeInstallUrl('instructions', item.path, true)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()" title="Install to VS Code Insiders">
-          Insiders
-        </a>
+        ${getInstallDropdownHtml('instructions', item.path, true)}
        <a href="${getGitHubUrl(item.path)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()">
          GitHub
        </a>
@@ -127,6 +121,7 @@ export async function initInstructionsPage(): Promise<void> {
  });
  
  setupModal();
+  setupDropdownCloseHandlers();
 }

 // Auto-initialize when DOM is ready
--- a/website/src/scripts/pages/prompts.ts
+++ b/website/src/scripts/pages/prompts.ts
@@ -3,7 +3,7 @@
 */
 import { createChoices, getChoicesValues, type Choices } from '../choices';
 import { FuzzySearch } from '../search';
-import { fetchData, debounce, escapeHtml, getGitHubUrl, getVSCodeInstallUrl } from '../utils';
+import { fetchData, debounce, escapeHtml, getGitHubUrl, getInstallDropdownHtml, setupDropdownCloseHandlers } from '../utils';
 import { setupModal, openFileModal } from '../modal';

 interface Prompt {
@@ -67,13 +67,7 @@ function renderItems(items: Prompt[], query = ''): void {
        </div>
      </div>
      <div class="resource-actions">
-        <a href="${getVSCodeInstallUrl(resourceType, item.path, false)}" class="btn btn-primary btn-small" target="_blank" onclick="event.stopPropagation()" title="Install to VS Code">
-          <svg viewBox="0 0 100 100" width="14" height="14" fill="currentColor"><path d="M95.436 26.986L75.282 15.768a6.04 6.04 0 0 0-6.895.876L28.78 51.927 11.912 39.151a4.03 4.03 0 0 0-5.154.387l-5.36 4.878a4.03 4.03 0 0 0-.003 5.947l14.646 13.396-14.646 13.396a4.03 4.03 0 0 0 .003 5.947l5.36 4.878a4.03 4.03 0 0 0 5.154.387L28.78 74.59l39.607 35.283a6.04 6.04 0 0 0 6.895.876l20.154-11.218a6.04 6.04 0 0 0 3.127-5.288V32.274a6.04 6.04 0 0 0-3.127-5.288zM75.015 73.428L46.339 51.927l28.676-21.5z" transform="scale(0.16)"/></svg>
-          VS Code
-        </a>
-        <a href="${getVSCodeInstallUrl(resourceType, item.path, true)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()" title="Install to VS Code Insiders">
-          Insiders
-        </a>
+        ${getInstallDropdownHtml(resourceType, item.path, true)}
        <a href="${getGitHubUrl(item.path)}" class="btn btn-secondary btn-small" target="_blank" onclick="event.stopPropagation()">
          GitHub
        </a>
@@ -122,6 +116,7 @@ export async function initPromptsPage(): Promise<void> {
  });
  
  setupModal();
+  setupDropdownCloseHandlers();
 }

 // Auto-initialize when DOM is ready
--- a/website/src/scripts/utils.ts
+++ b/website/src/scripts/utils.ts
@@ -205,3 +205,57 @@ export function getResourceIcon(type: string): string {
  };
  return icons[type] || '📄';
 }
+
+/**
+ * Generate HTML for install dropdown button
+ */
+export function getInstallDropdownHtml(type: string, filePath: string, small = false): string {
+  const vscodeUrl = getVSCodeInstallUrl(type, filePath, false);
+  const insidersUrl = getVSCodeInstallUrl(type, filePath, true);
+  
+  if (!vscodeUrl) return '';
+  
+  const sizeClass = small ? 'install-dropdown-small' : '';
+  const uniqueId = `install-${filePath.replace(/[^a-zA-Z0-9]/g, '-')}`;
+  
+  return `
+    <div class="install-dropdown ${sizeClass}" id="${uniqueId}" onclick="event.stopPropagation()">
+      <a href="${vscodeUrl}" class="btn btn-primary ${small ? 'btn-small' : ''} install-btn-main" target="_blank" rel="noopener">
+        <svg viewBox="0 0 16 16" width="${small ? 14 : 16}" height="${small ? 14 : 16}" fill="currentColor">
+          <path d="M7.47 10.78a.75.75 0 0 0 1.06 0l3.75-3.75a.75.75 0 0 0-1.06-1.06L8.75 8.44V1.75a.75.75 0 0 0-1.5 0v6.69L4.78 5.97a.75.75 0 0 0-1.06 1.06l3.75 3.75ZM3.75 13a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"/>
+        </svg>
+        Install
+      </a>
+      <button type="button" class="btn btn-primary ${small ? 'btn-small' : ''} install-btn-toggle" aria-label="Install options" onclick="event.preventDefault(); this.parentElement.classList.toggle('open');">
+        <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor">
+          <path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"/>
+        </svg>
+      </button>
+      <div class="install-dropdown-menu">
+        <a href="${vscodeUrl}" target="_blank" rel="noopener" onclick="this.closest('.install-dropdown').classList.remove('open')">
+          <svg viewBox="0 0 100 100" fill="currentColor"><path d="M95.436 26.986L75.282 15.768a6.04 6.04 0 0 0-6.895.876L28.78 51.927 11.912 39.151a4.03 4.03 0 0 0-5.154.387l-5.36 4.878a4.03 4.03 0 0 0-.003 5.947l14.646 13.396-14.646 13.396a4.03 4.03 0 0 0 .003 5.947l5.36 4.878a4.03 4.03 0 0 0 5.154.387L28.78 74.59l39.607 35.283a6.04 6.04 0 0 0 6.895.876l20.154-11.218a6.04 6.04 0 0 0 3.127-5.288V32.274a6.04 6.04 0 0 0-3.127-5.288zM75.015 73.428L46.339 51.927l28.676-21.5z" transform="scale(0.16)"/></svg>
+          VS Code
+        </a>
+        <a href="${insidersUrl}" target="_blank" rel="noopener" onclick="this.closest('.install-dropdown').classList.remove('open')">
+          <svg viewBox="0 0 100 100" fill="currentColor"><path d="M95.436 26.986L75.282 15.768a6.04 6.04 0 0 0-6.895.876L28.78 51.927 11.912 39.151a4.03 4.03 0 0 0-5.154.387l-5.36 4.878a4.03 4.03 0 0 0-.003 5.947l14.646 13.396-14.646 13.396a4.03 4.03 0 0 0 .003 5.947l5.36 4.878a4.03 4.03 0 0 0 5.154.387L28.78 74.59l39.607 35.283a6.04 6.04 0 0 0 6.895.876l20.154-11.218a6.04 6.04 0 0 0 3.127-5.288V32.274a6.04 6.04 0 0 0-3.127-5.288zM75.015 73.428L46.339 51.927l28.676-21.5z" transform="scale(0.16)"/></svg>
+          VS Code Insiders
+        </a>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Setup dropdown close handlers for dynamically created dropdowns
+ */
+export function setupDropdownCloseHandlers(): void {
+  document.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement;
+    // Close all open dropdowns if clicking outside
+    if (!target.closest('.install-dropdown')) {
+      document.querySelectorAll('.install-dropdown.open').forEach(dropdown => {
+        dropdown.classList.remove('open');
+      });
+    }
+  });
+}