Repository: supabase/supabase
File: apps/studio/components/layouts/AppLayout/BranchDropdown.tsx (TypeScript)

Code before:

  const projectRef = projectDetails?.parent_project_ref || ref

  const {
    data: branches,
    isLoading,
    isError,
    isSuccess,
  } = useBranchesQuery({ projectRef }, { enabled: Boolean(projectDetails) })

  const isBranchingEnabled = projectDetails?.is_branch_enabled === true
  const selectedBranch = branches?.find((branch) => branch.project_ref === ref)

  const defaultMainBranch = {
    id: 'main',
    name: 'main',
    project_ref: projectRef ?? ref ?? '',
    is_default: true,
  } as unknown as Branch

  const mainBranch = branches?.find((branch) => branch.is_default)
  const [_scheduledForDeletionBranches, activeBranches] = partition(
    branches,
    (branch) => branch.deletion_scheduled_at !== undefined
  )
  const restOfBranches = activeBranches
    ?.filter((branch) => !branch.is_default)
    .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())

  const sortedBranches =
    branches && branches.length > 0
      ? mainBranch
        ? [mainBranch].concat(restOfBranches ?? [])
        : restOfBranches ?? []
      : [defaultMainBranch]
  const branchList = isBranchingEnabled ? sortedBranches ?? [] : [defaultMainBranch]

  const BRANCHING_GITHUB_DISCUSSION_LINK = 'https://github.com/orgs/supabase/discussions/18937'

  return (
    <>
      {isLoading && <ShimmeringLoader className="w-[90px]" />}

      {isError && (
        <div className="flex items-center space-x-2 text-amber-900">
          <AlertCircle size={16} strokeWidth={2} />
          <p className="text-sm">Failed to load branches</p>
        </div>
      )}

      {isSuccess && (

Review comment (suggestion):
We don't need partition here since we're not even using the results of the first array argument. Something better would be:


```suggestion
  const restOfBranches = branches.filter((branch) => branch.deletion_scheduled_at !== undefined))
```

Code after:

  const projectRef = projectDetails?.parent_project_ref || ref

  const {
    data: branches,
    isPending: isLoading,
    isError,
    isSuccess,
  } = useBranchesQuery({ projectRef }, { enabled: Boolean(projectDetails) })

  const isBranchingEnabled = projectDetails?.is_branch_enabled === true
  const selectedBranch = branches?.find((branch) => branch.project_ref === ref)

  const defaultMainBranch = {
    id: 'main',
    name: 'main',
    project_ref: projectRef ?? ref ?? '',
    is_default: true,
  } as unknown as Branch

  const mainBranch = branches?.find((branch) => branch.is_default)
  const restOfBranches = branches
    ?.filter((branch) => !branch.is_default)
    ?.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())

  const sortedBranches =
    branches && branches.length > 0
      ? mainBranch
        ? [mainBranch].concat(restOfBranches ?? [])
        : restOfBranches ?? []
      : [defaultMainBranch]
  const branchList = isBranchingEnabled ? sortedBranches ?? [] : [defaultMainBranch]

  const BRANCHING_GITHUB_DISCUSSION_LINK = 'https://github.com/orgs/supabase/discussions/18937'

  return (
    <>
      {isLoading && <ShimmeringLoader className="w-[90px]" />}

      {isError && (
        <div className="flex items-center space-x-2 text-amber-900">
          <AlertCircle size={16} strokeWidth={2} />
          <p className="text-sm">Failed to load branches</p>
        </div>
      )}

      {isSuccess && (
        <>
          <Link href={`/project/${ref}`} className="flex items-center gap-2 flex-shrink-0 ">
            <span className="text-sm text-foreground max-w-32 lg:max-w-none truncate">
              {isBranchingEnabled ? selectedBranch?.name : 'main'}