Support fuzzy match when picking repo [INS-1460] (#9504)

* tmp

* Fuzzy match for selecting branch

Author: yaoweiprc

packages/insomnia/src/ui/components/git-credentials/git-remote-branch-select.tsx

@@ -3,6 +3,7 @@ import { Button, ComboBox, Input, Label, ListBox, ListBoxItem, Popover } from 'r
 import * as reactUse from 'react-use';
 import { z } from 'zod/v4';
 
+import { fuzzyMatch } from '~/common/misc';
 import type { GitCredentials } from '~/models/git-repository';
 import { useGitRemoteBranchesActionFetcher } from '~/routes/git.remote-branches';
 
@@ -66,11 +67,14 @@ export const GitRemoteBranchSelect = ({
         className="w-full"
         defaultSelectedKey={remoteBranches[0]}
         isDisabled={isComboboxDisabled}
-        items={remoteBranches.map(branch => ({
+        defaultItems={remoteBranches.map(branch => ({
           id: branch,
           name: branch,
         }))}
         menuTrigger="focus"
+        defaultFilter={(branch: string, inputValue: string) =>
+          Boolean(fuzzyMatch(inputValue, branch, { splitSpace: true, loose: false })?.indexes)
+        }
       >
         <div className="flex w-full items-center gap-2">
           <div className="group flex h-(--line-height-xs) flex-1 items-center gap-2 rounded-xs border border-solid border-(--hl-sm) bg-(--color-bg) text-(--color-font) transition-colors focus:ring-1 focus:ring-(--hl-md) focus:outline-hidden">

packages/insomnia/src/ui/components/git-credentials/github-repository-select.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { Button, ComboBox, FieldError, Input, Label, ListBox, ListBoxItem, Popover } from 'react-aria-components';
 
+import { fuzzyMatch } from '~/common/misc';
+
 import { getAppWebsiteBaseURL } from '../../../common/constants';
 import { isGitHubAppUserToken } from '../github-app-config-link';
 import { Icon } from '../icon';
@@ -89,6 +91,9 @@ export const GitHubRepositorySelect = ({
             }))}
             onSelectionChange={key => setSelectedRepository(repositories.find(r => r.clone_url === key) || null)}
             menuTrigger="focus"
+            defaultFilter={(repoName: string, inputValue: string) =>
+              Boolean(fuzzyMatch(inputValue, repoName, { splitSpace: true, loose: false })?.indexes)
+            }
           >
             <div className="flex w-full items-center gap-2">
               <div className="group flex h-(--line-height-xs) flex-1 items-center gap-2 rounded-xs border border-solid border-(--hl-sm) bg-(--color-bg) text-(--color-font) transition-colors focus:ring-1 focus:ring-(--hl-md) focus:outline-hidden">
@@ -141,7 +146,8 @@ export const GitHubRepositorySelect = ({
                       {isDisabled && <Icon icon="lock" className="group-aria-disabled:opacity-30" />}
                       <span className="truncate group-aria-disabled:opacity-30">{item.name}</span>
                       {isDisabled && (
-                        <span className="hidden rounded border border-solid border-(--hl-xl) px-2 py-1 text-(--color-font) group-hover:inline-block">
+                        /* If you use hidden here, if the drop down is a long list and you scroll to the disabled item and hover on it, the scroll bar will scroll to the top. So we use invisible instead */
+                        <span className="invisible rounded border border-solid border-(--hl-xl) px-2 py-1 text-(--color-font) group-hover:visible">
                           Already connected to: {allConnectedRepoURIProjectNameMap[item.id]}
                         </span>
                       )}