From a03a92d6027a3db1b2f264fd197ed892069fd21c Mon Sep 17 00:00:00 2001
From: FTCHD <144691102+FTCHD@users.noreply.github.com>
Date: Wed, 22 Apr 2026 03:41:13 +0300
Subject: [PATCH] searchable remotes

---
 src/pages/Settings/RemotesSection.tsx | 30 ++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/pages/Settings/RemotesSection.tsx b/src/pages/Settings/RemotesSection.tsx
index bae4c3f..47480cb 100644
--- a/src/pages/Settings/RemotesSection.tsx
+++ b/src/pages/Settings/RemotesSection.tsx
@@ -7,6 +7,7 @@ import {
     DropdownMenu,
     DropdownTrigger,
     Spinner,
+    Input,
 } from '@heroui/react'
 import { useMutation, useQueries, useQuery, useQueryClient } from '@tanstack/react-query'
 import { ask, message } from '@tauri-apps/plugin-dialog'
@@ -16,6 +17,7 @@ import {
     PencilIcon,
     PlusIcon,
     RefreshCcwIcon,
+    SearchIcon,
     SettingsIcon,
     Trash2Icon,
 } from 'lucide-react'
@@ -79,6 +81,18 @@ export default function RemotesSection() {
         [remotes, remoteConfigQueries]
     )
 
+    const [searchQuery, setSearchQuery] = useState('')
+
+    const filteredRemotes = useMemo(
+        () =>
+            searchQuery
+                ? sortedRemotes.filter((r) =>
+                      r.toLowerCase().includes(searchQuery.toLowerCase())
+                  )
+                : sortedRemotes,
+        [sortedRemotes, searchQuery]
+    )
+
     const [pickedRemote, setPickedRemote] = useState<string | null>(null)
 
     const [editingDrawerOpen, setEditingDrawerOpen] = useState(false)
@@ -220,7 +234,21 @@ export default function RemotesSection() {
 
             {!Placeholder && (
                 <div className="flex flex-col gap-2.5 px-4 pb-10">
-                    {sortedRemotes.map((remote) => (
+                    {sortedRemotes.length > 5 && (
+                        <Input
+                            placeholder="Search remotes..."
+                            value={searchQuery}
+                            onValueChange={setSearchQuery}
+                            startContent={<SearchIcon className="w-4 h-4 opacity-50" />}
+                            size="sm"
+                            variant="flat"
+                            isClearable={true}
+                            onClear={() => setSearchQuery('')}
+                            data-focus-visible="false"
+                            classNames={{ inputWrapper: 'bg-content2/60' }}
+                        />
+                    )}
+                    {filteredRemotes.map((remote) => (
                         <RemoteCard
                             key={remote}
                             remote={remote}