refactor: pr dependent dropdowns, toast position on mobile.

Author: knightedcodemonkey

playwright/app.spec.ts

@@ -165,6 +165,17 @@ const connectByotWithSingleRepo = async (page: Page) => {
     })
   })
 
+  await page.route(
+    'https://api.github.com/repos/knightedcodemonkey/develop/branches**',
+    async route => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify([{ name: 'main' }, { name: 'release' }]),
+      })
+    },
+  )
+
   await page.locator('#github-token-input').fill('github_pat_fake_chat_1234567890')
   await page.locator('#github-token-add').click()
   await expect(page.locator('#status')).toHaveText('Loaded 1 writable repositories')
@@ -717,6 +728,82 @@ test('Open PR drawer confirms and submits component/styles filepaths', async ({
   )
 })
 
+test('Open PR drawer base dropdown updates from mocked repo branches', async ({
+  page,
+}) => {
+  const branchRequestUrls: string[] = []
+
+  await page.route('https://api.github.com/user/repos**', async route => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify([
+        {
+          id: 2,
+          owner: { login: 'knightedcodemonkey' },
+          name: 'develop',
+          full_name: 'knightedcodemonkey/develop',
+          default_branch: 'main',
+          permissions: { push: true },
+        },
+        {
+          id: 1,
+          owner: { login: 'knightedcodemonkey' },
+          name: 'css',
+          full_name: 'knightedcodemonkey/css',
+          default_branch: 'stable',
+          permissions: { push: true },
+        },
+      ]),
+    })
+  })
+
+  await page.route('https://api.github.com/repos/**/branches**', async route => {
+    const url = route.request().url()
+    branchRequestUrls.push(url)
+
+    const branchNames = url.includes('/repos/knightedcodemonkey/css/branches')
+      ? ['stable', 'release/1.x']
+      : ['main', 'develop-next']
+
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify(branchNames.map(name => ({ name }))),
+    })
+  })
+
+  await waitForAppReady(page, `${appEntryPath}?feature-ai=true`)
+
+  await page.locator('#github-token-input').fill('github_pat_fake_1234567890')
+  await page.locator('#github-token-add').click()
+  await expect(page.locator('#status')).toHaveText('Loaded 2 writable repositories')
+
+  await ensureOpenPrDrawerOpen(page)
+
+  const repoSelect = page.locator('#github-pr-repo-select')
+  const baseSelect = page.locator('#github-pr-base-branch')
+
+  await repoSelect.selectOption('knightedcodemonkey/develop')
+  await expect(baseSelect).toHaveValue('main')
+  await expect(baseSelect.locator('option')).toHaveText(['main', 'develop-next'])
+
+  await repoSelect.selectOption('knightedcodemonkey/css')
+  await expect(baseSelect).toHaveValue('stable')
+  await expect(baseSelect.locator('option')).toHaveText(['stable', 'release/1.x'])
+
+  expect(
+    branchRequestUrls.some(url =>
+      url.includes('https://api.github.com/repos/knightedcodemonkey/develop/branches'),
+    ),
+  ).toBe(true)
+  expect(
+    branchRequestUrls.some(url =>
+      url.includes('https://api.github.com/repos/knightedcodemonkey/css/branches'),
+    ),
+  ).toBe(true)
+})
+
 test('Open PR drawer validates unsafe filepaths', async ({ page }) => {
   await waitForAppReady(page, `${appEntryPath}?feature-ai=true`)
   await connectByotWithSingleRepo(page)

src/index.html

@@ -659,13 +659,13 @@ <h2>Open Pull Request</h2>
             for="github-pr-base-branch"
           >
             <span>Base</span>
-            <input
+            <select
               id="github-pr-base-branch"
-              type="text"
-              autocomplete="off"
-              spellcheck="false"
-              placeholder="main"
-            />
+              aria-label="Pull request base branch"
+              disabled
+            >
+              <option value="main" selected>main</option>
+            </select>
           </label>
 
           <label

src/modules/github-api.js

@@ -107,6 +107,14 @@ const normalizeRepo = repo => {
 
 const hasWritePermission = permissions => Boolean(permissions && permissions.push)
 
+const normalizeBranchName = branch => {
+  if (!branch || typeof branch !== 'object') {
+    return null
+  }
+
+  return typeof branch.name === 'string' && branch.name.trim() ? branch.name : null
+}
+
 const buildRequestHeaders = token => ({
   Accept: 'application/vnd.github+json',
   Authorization: `Bearer ${token}`,
@@ -363,6 +371,19 @@ const listReposPage = async ({ token, url, signal }) => {
   }
 }
 
+const listBranchesPage = async ({ token, url, signal }) => {
+  const { data, nextPageUrl } = await fetchJson({ token, url, signal })
+
+  if (!Array.isArray(data)) {
+    throw new Error('Unexpected response while loading repository branches from GitHub.')
+  }
+
+  return {
+    branches: data.map(normalizeBranchName).filter(Boolean),
+    nextPageUrl,
+  }
+}
+
 export const listWritableRepositories = async ({ token, signal }) => {
   if (typeof token !== 'string' || token.trim().length === 0) {
     throw new Error('A GitHub token is required to load repositories.')
@@ -394,6 +415,41 @@ export const listWritableRepositories = async ({ token, signal }) => {
   return writableRepos
 }
 
+export const listRepositoryBranches = async ({ token, owner, repo, signal }) => {
+  if (typeof token !== 'string' || token.trim().length === 0) {
+    throw new Error('A GitHub token is required to load branches.')
+  }
+
+  if (typeof owner !== 'string' || !owner || typeof repo !== 'string' || !repo) {
+    throw new Error('A valid repository owner/name is required to load branches.')
+  }
+
+  const branches = []
+  const dedupe = new Set()
+  let nextPageUrl = `${githubApiBaseUrl}/repos/${owner}/${repo}/branches?per_page=100`
+  let remainingPageBudget = 5
+
+  while (nextPageUrl && remainingPageBudget > 0) {
+    /* Branch pagination depends on the prior Link header response. */
+    // eslint-disable-next-line no-await-in-loop
+    const page = await listBranchesPage({ token, url: nextPageUrl, signal })
+    for (const name of page.branches) {
+      if (dedupe.has(name)) {
+        continue
+      }
+
+      dedupe.add(name)
+      branches.push(name)
+    }
+
+    nextPageUrl = page.nextPageUrl
+    remainingPageBudget -= 1
+  }
+
+  branches.sort((left, right) => left.localeCompare(right))
+  return branches
+}
+
 export const streamGitHubChatCompletion = async ({
   token,
   messages,