From bce2dce704451caaeb68dbcd5751b982bba649d5 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Thu, 11 Jun 2026 16:28:12 +0530 Subject: [PATCH 01/30] fetch all branches via pagination --- .../git/productionBranchFieldset.svelte | 30 ++++++++++++++----- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/src/lib/components/git/productionBranchFieldset.svelte b/src/lib/components/git/productionBranchFieldset.svelte index addd405576..5a15963d89 100644 --- a/src/lib/components/git/productionBranchFieldset.svelte +++ b/src/lib/components/git/productionBranchFieldset.svelte @@ -2,6 +2,7 @@ import { Button, InputText } from '$lib/elements/forms'; import { Fieldset, Input, Layout, Selector, Skeleton } from '@appwrite.io/pink-svelte'; import SelectRootModal from './selectRootModal.svelte'; + import { Query } from '@appwrite.io/console'; import { sdk } from '$lib/stores/sdk'; import { sortBranches } from '$lib/stores/vcs'; import { page } from '$app/state'; @@ -25,14 +26,29 @@ branch = repo.defaultBranch ?? 'main'; - const { branches } = await sdk - .forProject(page.params.region, page.params.project) - .vcs.listRepositoryBranches({ - installationId, - providerRepositoryId: repositoryId - }); + const allBranches = []; + let offset = 0; + const limit = 100; + + while (true) { + const { branches, total } = await sdk + .forProject(page.params.region, page.params.project) + .vcs.listRepositoryBranches({ + installationId, + providerRepositoryId: repositoryId, + queries: [Query.limit(limit), Query.offset(offset)] + }); + + allBranches.push(...branches); + + if (allBranches.length >= total || branches.length < limit) { + break; + } + + offset += limit; + } - return sortBranches(branches); + return sortBranches(allBranches); } From 80242cb89e4a07c444cc2ee3490e3beea9f0d868 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Thu, 11 Jun 2026 16:30:20 +0530 Subject: [PATCH 02/30] fetch all branches via pagination in all branch selectors --- .../(modals)/createGit.svelte | 24 ++++++--- .../domains/add-domain/+page.ts | 28 ++++++++--- .../settings/updateRepository.svelte | 49 +++++++++++++------ .../site-[site]/deployments/+page.svelte | 25 +++++++--- .../createGitDeploymentModal.svelte | 24 ++++++--- .../site-[site]/domains/add-domain/+page.ts | 28 ++++++++--- .../settings/updateRepository.svelte | 49 +++++++++++++------ 7 files changed, 163 insertions(+), 64 deletions(-) diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createGit.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createGit.svelte index 3c3569de37..c485286356 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createGit.svelte +++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/(modals)/createGit.svelte @@ -10,6 +10,7 @@ import { sdk } from '$lib/stores/sdk'; import { installation, repository, sortBranches } from '$lib/stores/vcs'; import { + Query, Runtime, VCSReferenceType, type Models, @@ -54,14 +55,23 @@ }); } selectedRepository = $repository?.id; - const branchList = await sdk - .forProject(page.params.region, page.params.project) - .vcs.listRepositoryBranches({ - installationId: $installation.$id, - providerRepositoryId: selectedRepository - }); + const allBranches = []; + let offset = 0; + const limit = 100; + while (true) { + const { branches, total } = await sdk + .forProject(page.params.region, page.params.project) + .vcs.listRepositoryBranches({ + installationId: $installation.$id, + providerRepositoryId: selectedRepository, + queries: [Query.limit(limit), Query.offset(offset)] + }); + allBranches.push(...branches); + if (allBranches.length >= total || branches.length < limit) break; + offset += limit; + } - const sorted = sortBranches(branchList.branches); + const sorted = sortBranches(allBranches); branch = sorted.find((b) => b.name === $func.providerBranch) ? $func.providerBranch diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.ts index a1f08feed6..0152f90b0c 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.ts +++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.ts @@ -26,12 +26,26 @@ export const load = async ({ parent, depends, params }) => { rules, domainsList, installations, - branches: - func?.installationId && func?.providerRepositoryId - ? await sdk.forProject(params.region, params.project).vcs.listRepositoryBranches({ - installationId: func.installationId, - providerRepositoryId: func.providerRepositoryId - }) - : undefined + branches: await (async () => { + if (!func?.installationId || !func?.providerRepositoryId) return undefined; + const allBranches = []; + let offset = 0; + const limit = 100; + let total = 0; + while (true) { + const { branches, total: t } = await sdk + .forProject(params.region, params.project) + .vcs.listRepositoryBranches({ + installationId: func.installationId, + providerRepositoryId: func.providerRepositoryId, + queries: [Query.limit(limit), Query.offset(offset)] + }); + total = t; + allBranches.push(...branches); + if (allBranches.length >= total || branches.length < limit) break; + offset += limit; + } + return { branches: allBranches, total }; + })() }; }; diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte index c9765a107f..0a8e455cbe 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte +++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte @@ -6,7 +6,7 @@ import { Button, Form, InputText } from '$lib/elements/forms'; import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; - import { Runtime, type Models, type ProjectKeyScopes } from '@appwrite.io/console'; + import { Query, Runtime, type Models, type ProjectKeyScopes } from '@appwrite.io/console'; import { onMount } from 'svelte'; import DisconnectRepo from './disconnectRepo.svelte'; import { installation, repository as repositoryStore, sortBranches } from '$lib/stores/vcs'; @@ -110,12 +110,24 @@ } } async function getBranches(installation: string, repo: string) { - branchesList = await sdk - .forProject(page.params.region, page.params.project) - .vcs.listRepositoryBranches({ - installationId: installation, - providerRepositoryId: repo - }); + const allBranches = []; + let offset = 0; + const limit = 100; + let total = 0; + while (true) { + const { branches, total: t } = await sdk + .forProject(page.params.region, page.params.project) + .vcs.listRepositoryBranches({ + installationId: installation, + providerRepositoryId: repo, + queries: [Query.limit(limit), Query.offset(offset)] + }); + total = t; + allBranches.push(...branches); + if (allBranches.length >= total || branches.length < limit) break; + offset += limit; + } + branchesList = { branches: allBranches, total }; branchesList.branches = sortBranches(branchesList.branches); selectedBranch = func?.providerBranch ?? branchesList.branches[0].name; @@ -133,13 +145,22 @@ async function connect(selectedInstallationId: string, selectedRepository: string) { let nextBranch = func?.providerBranch ?? 'main'; try { - const branchList = await sdk - .forProject(page.params.region, page.params.project) - .vcs.listRepositoryBranches({ - installationId: selectedInstallationId, - providerRepositoryId: selectedRepository - }); - const sorted = sortBranches(branchList.branches); + const allBranches = []; + let offset = 0; + const limit = 100; + while (true) { + const { branches, total } = await sdk + .forProject(page.params.region, page.params.project) + .vcs.listRepositoryBranches({ + installationId: selectedInstallationId, + providerRepositoryId: selectedRepository, + queries: [Query.limit(limit), Query.offset(offset)] + }); + allBranches.push(...branches); + if (allBranches.length >= total || branches.length < limit) break; + offset += limit; + } + const sorted = sortBranches(allBranches); nextBranch = sorted.find((branch) => branch.name === func?.providerBranch)?.name ?? sorted.find((branch) => branch.name === 'main' || branch.name === 'master')?.name ?? diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.svelte index fb7bcb49f9..74eab79add 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.svelte +++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.svelte @@ -2,7 +2,7 @@ import { PaginationWithLimit, EmptyFilter, Empty } from '$lib/components'; import { Button } from '$lib/elements/forms'; import { Container, ResponsiveContainerHeader } from '$lib/layout'; - import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console'; + import { Adapter, BuildRuntime, Framework, Query, type Models } from '@appwrite.io/console'; import { View } from '$lib/helpers/load'; import { ActionMenu, Alert, Icon, Layout, Popover } from '@appwrite.io/pink-svelte'; import Table from './table.svelte'; @@ -43,13 +43,22 @@ async function connect(selectedInstallationId: string, selectedRepository: string) { let nextBranch = data.site?.providerBranch ?? 'main'; try { - const branchList = await sdk - .forProject(page.params.region, page.params.project) - .vcs.listRepositoryBranches({ - installationId: selectedInstallationId, - providerRepositoryId: selectedRepository - }); - const sorted = sortBranches(branchList.branches); + const allBranches = []; + let offset = 0; + const limit = 100; + while (true) { + const { branches, total } = await sdk + .forProject(page.params.region, page.params.project) + .vcs.listRepositoryBranches({ + installationId: selectedInstallationId, + providerRepositoryId: selectedRepository, + queries: [Query.limit(limit), Query.offset(offset)] + }); + allBranches.push(...branches); + if (allBranches.length >= total || branches.length < limit) break; + offset += limit; + } + const sorted = sortBranches(allBranches); nextBranch = sorted.find((branch) => branch.name === data.site?.providerBranch)?.name ?? sorted.find((branch) => branch.name === 'main' || branch.name === 'master')?.name ?? diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte index 150b854ee5..f3202bc179 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte +++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/createGitDeploymentModal.svelte @@ -14,6 +14,7 @@ Adapter, BuildRuntime, Framework, + Query, VCSReferenceType, type Models } from '@appwrite.io/console'; @@ -55,14 +56,23 @@ }); } selectedRepository = $repository?.id; - const branchList = await sdk - .forProject(page.params.region, page.params.project) - .vcs.listRepositoryBranches({ - installationId: $installation.$id, - providerRepositoryId: selectedRepository - }); + const allBranches = []; + let offset = 0; + const limit = 100; + while (true) { + const { branches, total } = await sdk + .forProject(page.params.region, page.params.project) + .vcs.listRepositoryBranches({ + installationId: $installation.$id, + providerRepositoryId: selectedRepository, + queries: [Query.limit(limit), Query.offset(offset)] + }); + allBranches.push(...branches); + if (allBranches.length >= total || branches.length < limit) break; + offset += limit; + } - const sorted = sortBranches(branchList.branches); + const sorted = sortBranches(allBranches); branch = sorted.find((b) => b.name === site.providerBranch) ? site.providerBranch diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.ts index dfff015a1a..bcf5b24e9e 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.ts +++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.ts @@ -28,12 +28,26 @@ export const load = async ({ parent, depends, params }) => { rules, domainsList, installations, - branches: - site?.installationId && site?.providerRepositoryId - ? await sdk.forProject(params.region, params.project).vcs.listRepositoryBranches({ - installationId: site.installationId, - providerRepositoryId: site.providerRepositoryId - }) - : undefined + branches: await (async () => { + if (!site?.installationId || !site?.providerRepositoryId) return undefined; + const allBranches = []; + let offset = 0; + const limit = 100; + let total = 0; + while (true) { + const { branches, total: t } = await sdk + .forProject(params.region, params.project) + .vcs.listRepositoryBranches({ + installationId: site.installationId, + providerRepositoryId: site.providerRepositoryId, + queries: [Query.limit(limit), Query.offset(offset)] + }); + total = t; + allBranches.push(...branches); + if (allBranches.length >= total || branches.length < limit) break; + offset += limit; + } + return { branches: allBranches, total }; + })() }; }; diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte index ab640c480d..c5d497b3c2 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte +++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte @@ -6,7 +6,7 @@ import { Button, Form, InputText } from '$lib/elements/forms'; import { addNotification } from '$lib/stores/notifications'; import { sdk } from '$lib/stores/sdk'; - import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console'; + import { Adapter, BuildRuntime, Framework, Query, type Models } from '@appwrite.io/console'; import { onMount } from 'svelte'; import DisconnectRepo from './disconnectRepo.svelte'; import { installation, repository as repositoryStore, sortBranches } from '$lib/stores/vcs'; @@ -106,12 +106,24 @@ } async function getBranches(installation: string, repo: string) { - branchesList = await sdk - .forProject(page.params.region, page.params.project) - .vcs.listRepositoryBranches({ - installationId: installation, - providerRepositoryId: repo - }); + const allBranches = []; + let offset = 0; + const limit = 100; + let total = 0; + while (true) { + const { branches, total: t } = await sdk + .forProject(page.params.region, page.params.project) + .vcs.listRepositoryBranches({ + installationId: installation, + providerRepositoryId: repo, + queries: [Query.limit(limit), Query.offset(offset)] + }); + total = t; + allBranches.push(...branches); + if (allBranches.length >= total || branches.length < limit) break; + offset += limit; + } + branchesList = { branches: allBranches, total }; branchesList.branches = sortBranches(branchesList.branches); selectedBranch = site?.providerBranch ?? branchesList.branches[0].name; @@ -120,13 +132,22 @@ async function connect(selectedInstallationId: string, selectedRepository: string) { let nextBranch = site?.providerBranch ?? 'main'; try { - const branchList = await sdk - .forProject(page.params.region, page.params.project) - .vcs.listRepositoryBranches({ - installationId: selectedInstallationId, - providerRepositoryId: selectedRepository - }); - const sorted = sortBranches(branchList.branches); + const allBranches = []; + let offset = 0; + const limit = 100; + while (true) { + const { branches, total } = await sdk + .forProject(page.params.region, page.params.project) + .vcs.listRepositoryBranches({ + installationId: selectedInstallationId, + providerRepositoryId: selectedRepository, + queries: [Query.limit(limit), Query.offset(offset)] + }); + allBranches.push(...branches); + if (allBranches.length >= total || branches.length < limit) break; + offset += limit; + } + const sorted = sortBranches(allBranches); nextBranch = sorted.find((branch) => branch.name === site?.providerBranch)?.name ?? sorted.find((branch) => branch.name === 'main' || branch.name === 'master')?.name ?? From ae75d1468f87b6317cb5f1f59d2e53c6c5579478 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Thu, 11 Jun 2026 16:48:33 +0530 Subject: [PATCH 03/30] simplify branch fetch --- .../git/productionBranchFieldset.svelte | 30 +++++-------------- 1 file changed, 8 insertions(+), 22 deletions(-) diff --git a/src/lib/components/git/productionBranchFieldset.svelte b/src/lib/components/git/productionBranchFieldset.svelte index 5a15963d89..6785d64997 100644 --- a/src/lib/components/git/productionBranchFieldset.svelte +++ b/src/lib/components/git/productionBranchFieldset.svelte @@ -26,29 +26,15 @@ branch = repo.defaultBranch ?? 'main'; - const allBranches = []; - let offset = 0; - const limit = 100; - - while (true) { - const { branches, total } = await sdk - .forProject(page.params.region, page.params.project) - .vcs.listRepositoryBranches({ - installationId, - providerRepositoryId: repositoryId, - queries: [Query.limit(limit), Query.offset(offset)] - }); - - allBranches.push(...branches); - - if (allBranches.length >= total || branches.length < limit) { - break; - } - - offset += limit; - } + const { branches } = await sdk + .forProject(page.params.region, page.params.project) + .vcs.listRepositoryBranches({ + installationId, + providerRepositoryId: repositoryId, + queries: [Query.limit(1000)] + }); - return sortBranches(allBranches); + return sortBranches(branches); } From 81bf3b9e5d5edd8c12a7c331e24232ca45fd1c7d Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Thu, 11 Jun 2026 17:23:08 +0530 Subject: [PATCH 04/30] add custom branch selector with search and load more --- src/lib/components/git/branchSelector.svelte | 290 ++++++++++++++++++ src/lib/components/git/index.ts | 1 + .../git/productionBranchFieldset.svelte | 60 +--- 3 files changed, 301 insertions(+), 50 deletions(-) create mode 100644 src/lib/components/git/branchSelector.svelte diff --git a/src/lib/components/git/branchSelector.svelte b/src/lib/components/git/branchSelector.svelte new file mode 100644 index 0000000000..9bc00990bc --- /dev/null +++ b/src/lib/components/git/branchSelector.svelte @@ -0,0 +1,290 @@ + + +
{ + if (!e.currentTarget.contains(e.relatedTarget)) { + open = false; + searchQuery = ''; + searchResults = []; + } +}}> + + + {#if open} +
+
+ + + {#if searchQuery} + + {/if} +
+ +
    + {#if searching} +
  • Searching...
    • + {:else if displayBranches.length === 0} +
  • No branches found
    • + {:else} + {#each displayBranches as branch} +
  • select(branch)} + on:keydown={(e) => e.key === 'Enter' && select(branch)}> + {branch} +
    • + {/each} + {#if !searchQuery && hasMore} +
  • + +
    • + {/if} + {/if} +
+
+ {/if} +
+ + diff --git a/src/lib/components/git/index.ts b/src/lib/components/git/index.ts index a5cab5eed2..ddec8646be 100644 --- a/src/lib/components/git/index.ts +++ b/src/lib/components/git/index.ts @@ -7,5 +7,6 @@ export { default as DeploymentSource } from './deploymentSource.svelte'; export { default as DeploymentDomains } from './deploymentDomains.svelte'; export { default as ConnectBehaviour } from './connectBehaviour.svelte'; export { default as ProductionBranchFieldset } from './productionBranchFieldset.svelte'; +export { default as BranchSelector } from './branchSelector.svelte'; export { default as RepositoryCard } from './repositoryCard.svelte'; export { default as ConnectRepoModal } from './connectRepoModal.svelte'; diff --git a/src/lib/components/git/productionBranchFieldset.svelte b/src/lib/components/git/productionBranchFieldset.svelte index 6785d64997..fbd98f81e4 100644 --- a/src/lib/components/git/productionBranchFieldset.svelte +++ b/src/lib/components/git/productionBranchFieldset.svelte @@ -1,10 +1,9 @@
- {#await loadBranches()} + {#await loadDefaultBranch()} - - - - - - - - - - - - - + - {:then branches} - {@const options = - branches - ?.map((branch) => { - return { - value: branch.name, - label: branch.name - }; - }) - ?.sort((a, b) => { - return a.label > b.label ? 1 : -1; - }) ?? []} + {:then} - { - branch = event.detail.value; - }} - {options} /> + {installationId} + {repositoryId} + on:select={(e) => (branch = e.detail)} /> Date: Thu, 11 Jun 2026 17:27:53 +0530 Subject: [PATCH 05/30] replace ComboBox with BranchSelector in settings pages --- bun.lock | 4 ++-- package.json | 2 +- .../settings/updateRepository.svelte | 23 ++++--------------- .../settings/updateRepository.svelte | 23 ++++--------------- 4 files changed, 13 insertions(+), 39 deletions(-) diff --git a/bun.lock b/bun.lock index 283e22f525..cb48bc3826 100644 --- a/bun.lock +++ b/bun.lock @@ -6,7 +6,7 @@ "name": "@appwrite/console", "dependencies": { "@ai-sdk/svelte": "^1.1.24", - "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@5d0672f", + "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@82d2831", "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bfe7ce3", "@appwrite.io/pink-legacy": "^1.0.3", @@ -125,7 +125,7 @@ "@analytics/type-utils": ["@analytics/type-utils@0.6.4", "", {}, "sha512-Ou1gQxFakOWLcPnbFVsrPb8g1wLLUZYYJXDPjHkG07+5mustGs5yqACx42UAu4A6NszNN6Z5gGxhyH45zPWRxw=="], - "@appwrite.io/console": ["@appwrite.io/console@https://pkg.vc/-/@appwrite/@appwrite.io/console@5d0672f", { "dependencies": { "json-bigint": "1.0.0" } }], + "@appwrite.io/console": ["@appwrite.io/console@https://pkg.vc/-/@appwrite/@appwrite.io/console@82d2831", { "dependencies": { "json-bigint": "1.0.0" } }], "@appwrite.io/pink-icons": ["@appwrite.io/pink-icons@0.25.0", "", {}, "sha512-0O3i2oEuh5mWvjO80i+X6rbzrWLJ1m5wmv2/M3a1p2PyBJsFxN8xQMTEmTn3Wl/D26SsM7SpzbdW6gmfgoVU9Q=="], diff --git a/package.json b/package.json index 7e46c5ff27..03424e186d 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@ai-sdk/svelte": "^1.1.24", - "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@5d0672f", + "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@82d2831", "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bfe7ce3", "@appwrite.io/pink-legacy": "^1.0.3", diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte index 0a8e455cbe..cdbc013301 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte +++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte @@ -22,7 +22,7 @@ } from '@appwrite.io/pink-svelte'; import Card from '$lib/components/card.svelte'; import { IconGithub } from '@appwrite.io/pink-icons-svelte'; - import { ConnectGit, ConnectRepoModal, RepositoryCard } from '$lib/components/git'; + import { ConnectGit, ConnectRepoModal, RepositoryCard, BranchSelector } from '$lib/components/git'; import { isValueOfStringEnum } from '$lib/helpers/types'; import { page } from '$app/state'; import SelectRootModal from '$lib/components/git/selectRootModal.svelte'; @@ -244,24 +244,11 @@ (showDisconnect = true)} />
- { - selectedBranch = event.detail.value; - }} - name="branch" - options={branchesList?.branches?.map((branch) => { - return { - value: branch.name, - label: branch.name - }; - }) ?? []} /> + installationId={$installation?.$id} + repositoryId={repository?.id?.toString()} + on:select={(e) => (selectedBranch = e.detail)} /> - { - selectedBranch = event.detail.value; - }} - name="branch" - options={branchesList?.branches?.map((branch) => { - return { - value: branch.name, - label: branch.name - }; - }) ?? []} /> + installationId={$installation?.$id} + repositoryId={repository?.id?.toString()} + on:select={(e) => (selectedBranch = e.detail)} /> Date: Thu, 11 Jun 2026 17:31:01 +0530 Subject: [PATCH 06/30] redesign branch selector to match github style --- src/lib/components/git/branchSelector.svelte | 234 ++++++++++++------- 1 file changed, 144 insertions(+), 90 deletions(-) diff --git a/src/lib/components/git/branchSelector.svelte b/src/lib/components/git/branchSelector.svelte index 9bc00990bc..94d8d6def9 100644 --- a/src/lib/components/git/branchSelector.svelte +++ b/src/lib/components/git/branchSelector.svelte @@ -1,18 +1,16 @@ -
{ - if (!e.currentTarget.contains(e.relatedTarget)) { - open = false; - searchQuery = ''; - searchResults = []; - } -}}> + + + +
+ {#if label} + + {/if} {#if open} -
-
+
+
{#if searchQuery} - {/if}
-
    +
      {#if searching} -
    • Searching...
      • - {:else if displayBranches.length === 0} -
    • No branches found
      • +
    • Searching...
      • + {:else if displayBranches.length === 0 && searchQuery} +
    • No branches found
      • {:else} {#each displayBranches as branch} +
    • select(branch)} - on:keydown={(e) => e.key === 'Enter' && select(branch)}> + class:active={branch === value} + on:click={() => select(branch)}> {branch}
      • {/each} - {#if !searchQuery && hasMore} -
    • - -
      • + {#if !searchQuery && loading} +
    • Loading...
      • {/if} {/if}
    @@ -166,9 +190,18 @@ .branch-selector { position: relative; width: 100%; + display: flex; + flex-direction: column; + gap: var(--space-2); + } + + .label { + font-size: var(--font-size-s); + font-weight: 500; + color: var(--fgcolor-neutral-primary); } - .selector-trigger { + .trigger { display: flex; align-items: center; justify-content: space-between; @@ -178,20 +211,22 @@ border-radius: var(--border-radius-s); background: var(--bgcolor-neutral-default); cursor: pointer; - line-height: 140%; font-size: var(--font-size-s); color: var(--fgcolor-neutral-primary); + transition: border-color 0.15s ease; + line-height: 140%; } - .selector-trigger:hover:not(.open) { + .trigger:hover { border-color: var(--border-focus); } - .selector-trigger.open { + .trigger.open { outline: var(--border-width-l) solid var(--border-focus); + border-color: var(--border-focus); } - .selector-value { + .trigger-value { flex: 1; text-align: left; overflow: hidden; @@ -199,7 +234,11 @@ white-space: nowrap; } - .selector-dropdown { + .trigger-value.placeholder { + color: var(--fgcolor-neutral-tertiary); + } + + .dropdown { position: absolute; top: calc(100% + var(--space-2)); left: 0; @@ -208,19 +247,19 @@ background: var(--bgcolor-neutral-primary); border: var(--border-width-s) solid var(--border-neutral); border-radius: var(--border-radius-m); - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.03), 0px 4px 4px 0px rgba(0, 0, 0, 0.04); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); overflow: hidden; } - .selector-search { + .search-header { display: flex; align-items: center; gap: var(--space-3); - padding: var(--space-3) var(--space-4); + padding: var(--space-4) var(--space-5); border-bottom: var(--border-width-s) solid var(--border-neutral); } - .selector-search input { + .search-header input { flex: 1; border: none; background: transparent; @@ -229,62 +268,77 @@ outline: none; } - .selector-search input::placeholder { + .search-header input::placeholder { color: var(--fgcolor-neutral-tertiary); } - .selector-list { - max-height: 280px; - overflow-y: auto; - padding: var(--gap-xxs); + .clear-btn { display: flex; - flex-direction: column; - gap: var(--gap-xxxs); + align-items: center; + background: none; + border: none; + cursor: pointer; + padding: 0; + color: var(--fgcolor-neutral-tertiary); } - .selector-list li { - padding: var(--space-3) var(--space-5); - border-radius: var(--border-radius-s); - cursor: pointer; - font-size: var(--font-size-s); - color: var(--fgcolor-neutral-secondary); - user-select: none; + .clear-btn:hover { + color: var(--fgcolor-neutral-primary); } - .selector-list li:hover, - .selector-list li.selected { - background: var(--overlay-neutral-hover); + .branch-list { + max-height: 300px; + overflow-y: auto; + padding: var(--space-2) 0; + list-style: none; + margin: 0; } - .selector-state { - padding: var(--space-3) var(--space-5); - font-size: var(--font-size-s); - color: var(--fgcolor-neutral-tertiary); - cursor: default; + .branch-list::-webkit-scrollbar { + width: 4px; + } + + .branch-list::-webkit-scrollbar-track { + background: transparent; + margin-block: 6px; } - .selector-load-more { - padding: var(--space-2) var(--space-4); - text-align: center; + .branch-list::-webkit-scrollbar-thumb { + background: var(--border-neutral); + border-radius: 2px; } - .selector-load-more button { + .branch-list li { + padding: var(--space-2) var(--space-5); font-size: var(--font-size-s); - color: var(--fgcolor-interactive-primary); - background: none; - border: none; + color: var(--fgcolor-neutral-secondary); cursor: pointer; - padding: var(--space-2) var(--space-4); - border-radius: var(--border-radius-s); - width: 100%; + user-select: none; + border-radius: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .branch-list li:hover { + background: var(--overlay-neutral-hover); + color: var(--fgcolor-neutral-primary); } - .selector-load-more button:hover:not(:disabled) { + .branch-list li.active { background: var(--overlay-neutral-hover); + color: var(--fgcolor-neutral-primary); + font-weight: 500; + } + + .state-item { + padding: var(--space-3) var(--space-5) !important; + color: var(--fgcolor-neutral-tertiary) !important; + cursor: default !important; + font-size: var(--font-size-s); } - .selector-load-more button:disabled { - opacity: 0.5; - cursor: default; + .state-item:hover { + background: transparent !important; } From 586624f600c42362119fef10adc5dc4059a17315 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Thu, 11 Jun 2026 18:11:44 +0530 Subject: [PATCH 07/30] simplify branch selector, add search hint --- src/lib/components/git/branchSelector.svelte | 63 +++++++++----------- 1 file changed, 28 insertions(+), 35 deletions(-) diff --git a/src/lib/components/git/branchSelector.svelte b/src/lib/components/git/branchSelector.svelte index 94d8d6def9..288c7c3639 100644 --- a/src/lib/components/git/branchSelector.svelte +++ b/src/lib/components/git/branchSelector.svelte @@ -18,34 +18,23 @@ let searchQuery = ''; let branches: string[] = []; let searchResults: string[] = []; - let offset = 0; - let hasMore = true; let loading = false; let searching = false; let searchTimer: ReturnType; - let listEl: HTMLUListElement; let searchInput: HTMLInputElement; let containerEl: HTMLDivElement; - const LIMIT = 100; - async function loadBranches(reset = false) { - if (loading || (!hasMore && !reset)) return; + async function loadBranches() { + if (loading || branches.length > 0) return; loading = true; - if (reset) { - branches = []; - offset = 0; - hasMore = true; - } - const { branches: newBranches, total } = await sdk + const { branches: result } = await sdk .forProject(page.params.region, page.params.project) .vcs.listRepositoryBranches({ installationId, providerRepositoryId: repositoryId, - queries: [Query.limit(LIMIT), Query.offset(offset)] + queries: [Query.limit(100)] }); - branches = [...branches, ...newBranches.map((b) => b.name)]; - offset += newBranches.length; - hasMore = branches.length < total; + branches = result.map((b) => b.name); loading = false; } @@ -62,7 +51,7 @@ installationId, providerRepositoryId: repositoryId, search: query, - queries: [Query.limit(LIMIT)] + queries: [Query.limit(100)] }); searchResults = results.map((b) => b.name); searching = false; @@ -84,7 +73,7 @@ async function toggle() { open = !open; if (open) { - if (branches.length === 0) loadBranches(); + loadBranches(); await tick(); searchInput?.focus(); } else { @@ -93,14 +82,6 @@ } } - function onScroll() { - if (!listEl || searchQuery) return; - const { scrollTop, scrollHeight, clientHeight } = listEl; - if (scrollHeight - scrollTop - clientHeight < 80) { - loadBranches(); - } - } - function handleKeydown(e: KeyboardEvent) { if (e.key === 'Escape') { open = false; @@ -157,15 +138,15 @@ {/if}
-
    - {#if searching} +
      + {#if loading} +
    • Loading...
      • + {:else if searching}
    • Searching...
      • {:else if displayBranches.length === 0 && searchQuery}
    • No branches found
      • + {:else if displayBranches.length === 0} +
    • No branches available
      • {:else} {#each displayBranches as branch} @@ -177,8 +158,8 @@ {branch} {/each} - {#if !searchQuery && loading} -
    • Loading...
      • + {#if !searchQuery} +
    • Type to search all branches
      • {/if} {/if}
    @@ -314,7 +295,6 @@ color: var(--fgcolor-neutral-secondary); cursor: pointer; user-select: none; - border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -341,4 +321,17 @@ .state-item:hover { background: transparent !important; } + + .hint-item { + padding: var(--space-3) var(--space-5); + font-size: var(--font-size-xs); + color: var(--fgcolor-neutral-tertiary); + cursor: default; + border-top: var(--border-width-s) solid var(--border-neutral); + margin-top: var(--space-1); + } + + .hint-item:hover { + background: transparent !important; + } From 072523dab34ba4311ea39cd60900754fbbf4d58f Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Thu, 11 Jun 2026 18:14:58 +0530 Subject: [PATCH 08/30] match combobox style --- src/lib/components/git/branchSelector.svelte | 74 +++++++++----------- 1 file changed, 35 insertions(+), 39 deletions(-) diff --git a/src/lib/components/git/branchSelector.svelte b/src/lib/components/git/branchSelector.svelte index 288c7c3639..4e84e0d5eb 100644 --- a/src/lib/components/git/branchSelector.svelte +++ b/src/lib/components/git/branchSelector.svelte @@ -1,6 +1,6 @@ - { - value = e.detail; - dispatch('select', e.detail); - }} - on:input={(e) => handleSearch(e.detail)} /> + +
    + +
    + {#if $inputValue} + + ($inputValue = '')}> + + + {:else} + + {/if} +
    +
    + {#if $open} +
      + {#if loading} +
    • Loading...
      • + {:else if displayBranches.length === 0} +
    • No branches found
      • + {:else} + {#each displayBranches as branch} +
    • + {branch} +
      • + {/each} + {#if !$inputValue} +
    • Type to search all branches
      • + {/if} + {/if} +
    + {/if} +     + + From 093b81a48ccc9d9d07d440752ffa1de80761f2ad Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Thu, 11 Jun 2026 19:03:35 +0530 Subject: [PATCH 19/30] fix infinite loading loop --- src/lib/components/git/branchSelector.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/git/branchSelector.svelte b/src/lib/components/git/branchSelector.svelte index d7688769b6..9f0936c982 100644 --- a/src/lib/components/git/branchSelector.svelte +++ b/src/lib/components/git/branchSelector.svelte @@ -85,7 +85,7 @@ } } - $: if ($open && branches.length === 0) { + $: if ($open && branches.length === 0 && !loading) { loadBranches(); } From b475567f726fe122352fc5dc3a386092db5b8692 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Thu, 11 Jun 2026 19:05:39 +0530 Subject: [PATCH 20/30] fix infinite loading with loaded flag --- src/lib/components/git/branchSelector.svelte | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/lib/components/git/branchSelector.svelte b/src/lib/components/git/branchSelector.svelte index 9f0936c982..d1bd737d4c 100644 --- a/src/lib/components/git/branchSelector.svelte +++ b/src/lib/components/git/branchSelector.svelte @@ -20,6 +20,7 @@ let branches: string[] = []; let loading = false; + let loaded = false; let searchTimer: ReturnType; const { @@ -49,10 +50,11 @@ $: installationId, repositoryId, (() => { branches = []; + loaded = false; })(); async function loadBranches() { - if (loading || !installationId || !repositoryId) return; + if (loading || loaded || !installationId || !repositoryId) return; loading = true; try { const { branches: result } = await sdk @@ -63,6 +65,7 @@ queries: [Query.limit(100)] }); branches = result.map((b) => b.name); + loaded = true; } finally { loading = false; } @@ -85,7 +88,7 @@ } } - $: if ($open && branches.length === 0 && !loading) { + $: if ($open && !loaded && !loading) { loadBranches(); } From ea912e5392fa1bd6566c9397df214b8e52703676 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Thu, 11 Jun 2026 19:08:44 +0530 Subject: [PATCH 21/30] fix Input.Base not found error --- src/lib/components/git/branchSelector.svelte | 23 +++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/src/lib/components/git/branchSelector.svelte b/src/lib/components/git/branchSelector.svelte index d1bd737d4c..6c5bfd58ce 100644 --- a/src/lib/components/git/branchSelector.svelte +++ b/src/lib/components/git/branchSelector.svelte @@ -1,6 +1,6 @@ - +
    + {#if label} + + + {/if}
    {/if} - +
    From d0bbd5b08abfa63999483d2741f5fdc7c9acb19d Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Thu, 11 Jun 2026 19:13:25 +0530 Subject: [PATCH 23/30] keep dropdown inside container with position absolute --- src/lib/components/git/branchSelector.svelte | 69 ++++---------------- 1 file changed, 11 insertions(+), 58 deletions(-) diff --git a/src/lib/components/git/branchSelector.svelte b/src/lib/components/git/branchSelector.svelte index 8f36ec5f25..d577893454 100644 --- a/src/lib/components/git/branchSelector.svelte +++ b/src/lib/components/git/branchSelector.svelte @@ -89,11 +89,7 @@ async function toggle() { open = !open; if (open) { - portalTarget = inDialogGroup - ? document.querySelector('dialog[open]') - : inPopoverGroup - ? document.body - : null; + portalTarget = null; loadBranches(); await tick(); searchInput?.focus(); @@ -139,17 +135,9 @@ {value || placeholder} -
    -{#if open} - {#if portalTarget} - + {#if open} +
    - - {:else} -
    -
    -
    - - - {#if searchQuery} - - {/if} -
    -
      - {#if loading} -
    • Loading...
      • - {:else if searching} -
    • Searching...
      • - {:else if displayBranches.length === 0 && searchQuery} -
    • No branches found
      • - {:else if displayBranches.length === 0} -
    • No branches available
      • - {:else} - {#each displayBranches as branch} - -
    • select(branch)}> - {branch} -
      • - {/each} - {#if !searchQuery} -
    • Type to search all branches
      • - {/if} - {/if} -
    -
    {/if} -{/if} +
    diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte index 7b4fa13a6f..067f484a80 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte +++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte @@ -21,7 +21,12 @@ } from '@appwrite.io/pink-svelte'; import Card from '$lib/components/card.svelte'; import { IconGithub } from '@appwrite.io/pink-icons-svelte'; - import { ConnectGit, ConnectRepoModal, RepositoryCard, BranchSelector } from '$lib/components/git'; + import { + ConnectGit, + ConnectRepoModal, + RepositoryCard, + BranchSelector + } from '$lib/components/git'; import { isValueOfStringEnum } from '$lib/helpers/types'; import { page } from '$app/state'; import SelectRootModal from '$lib/components/git/selectRootModal.svelte'; diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte index b68dc597c1..58f4a0bbaa 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte +++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte @@ -21,7 +21,12 @@ } from '@appwrite.io/pink-svelte'; import Card from '$lib/components/card.svelte'; import { IconGithub } from '@appwrite.io/pink-icons-svelte'; - import { ConnectGit, ConnectRepoModal, RepositoryCard, BranchSelector } from '$lib/components/git'; + import { + ConnectGit, + ConnectRepoModal, + RepositoryCard, + BranchSelector + } from '$lib/components/git'; import { showConnectRepo } from './store'; import { page } from '$app/state'; import SelectRootModal from '$lib/components/git/selectRootModal.svelte'; From ba14c79c29464f559a3595105eda9589ab668163 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Thu, 11 Jun 2026 19:32:35 +0530 Subject: [PATCH 28/30] remove getBranches loop, use providerBranch directly --- .../settings/updateRepository.svelte | 27 +------------------ .../settings/updateRepository.svelte | 26 +----------------- 2 files changed, 2 insertions(+), 51 deletions(-) diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte index 067f484a80..2a9778ffab 100644 --- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte +++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/updateRepository.svelte @@ -34,7 +34,6 @@ export let func: Models.Function; export let installations: Models.InstallationList; - let branchesList: Models.BranchList; let selectedBranch = func?.providerBranch; let silentMode = func?.providerSilentMode ?? false; let selectedDir = func?.providerRootDirectory; @@ -113,32 +112,8 @@ trackError(error, Submit.FunctionUpdateConfiguration); } } - async function getBranches(installation: string, repo: string) { - const allBranches = []; - let offset = 0; - const limit = 100; - let total = 0; - while (true) { - const { branches, total: t } = await sdk - .forProject(page.params.region, page.params.project) - .vcs.listRepositoryBranches({ - installationId: installation, - providerRepositoryId: repo, - queries: [Query.limit(limit), Query.offset(offset)] - }); - total = t; - allBranches.push(...branches); - if (allBranches.length >= total || branches.length < limit) break; - offset += limit; - } - branchesList = { branches: allBranches, total }; - branchesList.branches = sortBranches(branchesList.branches); - - selectedBranch = func?.providerBranch ?? branchesList.branches[0].name; - } - $: if (func?.installationId && func?.providerRepositoryId) { - getBranches(func.installationId, func.providerRepositoryId); + selectedBranch = func?.providerBranch ?? 'main'; } $: isUpdateButtonEnabled = diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte index 58f4a0bbaa..e2f2f68aa6 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte +++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte @@ -34,7 +34,6 @@ export let site: Models.Site; export let installations: Models.InstallationList; - let branchesList: Models.BranchList; let selectedBranch = site?.providerBranch; let silentMode = site?.providerSilentMode ?? false; let selectedDir = site?.providerRootDirectory; @@ -109,29 +108,6 @@ } } - async function getBranches(installation: string, repo: string) { - const allBranches = []; - let offset = 0; - const limit = 100; - let total = 0; - while (true) { - const { branches, total: t } = await sdk - .forProject(page.params.region, page.params.project) - .vcs.listRepositoryBranches({ - installationId: installation, - providerRepositoryId: repo, - queries: [Query.limit(limit), Query.offset(offset)] - }); - total = t; - allBranches.push(...branches); - if (allBranches.length >= total || branches.length < limit) break; - offset += limit; - } - branchesList = { branches: allBranches, total }; - branchesList.branches = sortBranches(branchesList.branches); - - selectedBranch = site?.providerBranch ?? branchesList.branches[0].name; - } async function connect(selectedInstallationId: string, selectedRepository: string) { let nextBranch = site?.providerBranch ?? 'main'; @@ -188,7 +164,7 @@ } $: if (site?.installationId && site?.providerRepositoryId) { - getBranches(site.installationId, site.providerRepositoryId); + selectedBranch = site?.providerBranch ?? 'main'; } $: isUpdateButtonEnabled = From 922b6a10faf083facc97665a271b731b1a9ab605 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Thu, 11 Jun 2026 19:35:51 +0530 Subject: [PATCH 29/30] format --- .../sites/site-[site]/settings/updateRepository.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte index e2f2f68aa6..6326ce76da 100644 --- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte +++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/settings/updateRepository.svelte @@ -108,7 +108,6 @@ } } - async function connect(selectedInstallationId: string, selectedRepository: string) { let nextBranch = site?.providerBranch ?? 'main'; try { From 4bd372311a5b6bf97888d8b124b241b9d01dc79e Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Thu, 11 Jun 2026 19:54:07 +0530 Subject: [PATCH 30/30] fix portal class mismatch causing dropdown to close on search click --- src/lib/components/git/branchSelector.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/components/git/branchSelector.svelte b/src/lib/components/git/branchSelector.svelte index cc2210d8ee..228a0044c3 100644 --- a/src/lib/components/git/branchSelector.svelte +++ b/src/lib/components/git/branchSelector.svelte @@ -131,7 +131,7 @@ function handleOutsideClick(e: MouseEvent) { if (open && !containerEl.contains(e.target as Node)) { - const dropdown = document.querySelector('.branch-selector-dropdown'); + const dropdown = document.querySelector('.branch-selector-portal'); if (dropdown && dropdown.contains(e.target as Node)) return; open = false; searchQuery = ''; @@ -156,7 +156,7 @@ {#if open}