From a69d24b29c24ccb1785c89e1e55c303d9c5ea13a Mon Sep 17 00:00:00 2001
From: pompurin404 <pompurin404@mihomo.party>
Date: Tue, 4 Feb 2025 11:04:15 +0800
Subject: [PATCH] fix: profiles cannot click

---
 src/renderer/src/App.tsx                      |   8 +-
 .../src/components/profiles/profile-item.tsx  | 259 +++++++++---------
 .../src/components/proxies/proxy-item.tsx     | 167 ++++++-----
 src/renderer/src/pages/profiles.tsx           |   2 +-
 src/renderer/src/pages/proxies.tsx            | 215 +++++++--------
 5 files changed, 322 insertions(+), 329 deletions(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index de19b56..a2dc6ba 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -80,11 +80,13 @@ const App: React.FC = () => {
   const location = useLocation()
   const page = useRoutes(routes)
   const setTitlebar = (): void => {
-    if (!useWindowFrame && platform !== 'darwin') {
+    if (!useWindowFrame) {
       const options = { height: 48 } as TitleBarOverlayOptions
       try {
-        options.color = window.getComputedStyle(document.documentElement).backgroundColor
-        options.symbolColor = window.getComputedStyle(document.documentElement).color
+        if (platform !== 'darwin') {
+          options.color = window.getComputedStyle(document.documentElement).backgroundColor
+          options.symbolColor = window.getComputedStyle(document.documentElement).color
+        }
         setTitleBarOverlay(options)
       } catch (e) {
         // ignore
diff --git a/src/renderer/src/components/profiles/profile-item.tsx b/src/renderer/src/components/profiles/profile-item.tsx
index 73f9f07..f831521 100644
--- a/src/renderer/src/components/profiles/profile-item.tsx
+++ b/src/renderer/src/components/profiles/profile-item.tsx
@@ -30,7 +30,7 @@ interface Props {
   updateProfileItem: (item: IProfileItem) => Promise<void>
   removeProfileItem: (id: string) => Promise<void>
   mutateProfileConfig: () => void
-  onClick: () => Promise<void>
+  onPress: () => Promise<void>
 }
 
 interface MenuItem {
@@ -48,7 +48,7 @@ const ProfileItem: React.FC<Props> = (props) => {
     removeProfileItem,
     mutateProfileConfig,
     updateProfileItem,
-    onClick,
+    onPress,
     isCurrent
   } = props
   const extra = info?.extra
@@ -175,149 +175,146 @@ const ProfileItem: React.FC<Props> = (props) => {
       )}
       <Card
         fullWidth
+        isPressable
+        onPress={() => {
+          if (disableSelect) return
+          setSelecting(true)
+          onPress().finally(() => {
+            setSelecting(false)
+          })
+        }}
         className={`${isCurrent ? 'bg-primary' : ''} ${selecting ? 'blur-sm' : ''}`}
       >
-        <div 
-          className="w-full h-full cursor-pointer"
-          onClick={() => {
-            if (disableSelect) return
-            setSelecting(true)
-            onClick().finally(() => {
-              setSelecting(false)
-            })
-          }}
-        >
-          <div ref={setNodeRef} {...attributes} {...listeners} className="w-full h-full">
-            <CardBody className="pb-1">
-              <div className="flex justify-between h-[32px]">
-                <h3
-                  title={info?.name}
-                  className={`text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
-                >
-                  {info?.name}
-                </h3>
-                <div className="flex">
-                  {info.type === 'remote' && (
-                    <Tooltip placement="left" content={dayjs(info.updated).fromNow()}>
-                      <Button
-                        isIconOnly
-                        size="sm"
-                        variant="light"
+        <div ref={setNodeRef} {...attributes} {...listeners} className="w-full h-full">
+          <CardBody className="pb-1">
+            <div className="flex justify-between h-[32px]">
+              <h3
+                title={info?.name}
+                className={`text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
+              >
+                {info?.name}
+              </h3>
+              <div className="flex">
+                {info.type === 'remote' && (
+                  <Tooltip placement="left" content={dayjs(info.updated).fromNow()}>
+                    <Button
+                      isIconOnly
+                      size="sm"
+                      variant="light"
+                      color="default"
+                      disabled={updating}
+                      onPress={async () => {
+                        setUpdating(true)
+                        await addProfileItem(info)
+                        setUpdating(false)
+                      }}
+                    >
+                      <IoMdRefresh
                         color="default"
-                        disabled={updating}
-                        onPress={async () => {
-                          setUpdating(true)
-                          await addProfileItem(info)
-                          setUpdating(false)
-                        }}
-                      >
-                        <IoMdRefresh
-                          color="default"
-                          className={`${isCurrent ? 'text-primary-foreground' : 'text-foreground'} text-[24px] ${updating ? 'animate-spin' : ''}`}
-                        />
-                      </Button>
-                    </Tooltip>
-                  )}
+                        className={`${isCurrent ? 'text-primary-foreground' : 'text-foreground'} text-[24px] ${updating ? 'animate-spin' : ''}`}
+                      />
+                    </Button>
+                  </Tooltip>
+                )}
 
-                  <Dropdown>
-                    <DropdownTrigger>
-                      <Button isIconOnly size="sm" variant="light" color="default">
-                        <IoMdMore
-                          color="default"
-                          className={`text-[24px] ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
-                        />
-                      </Button>
-                    </DropdownTrigger>
-                    <DropdownMenu onAction={onMenuAction}>
-                      {menuItems.map((item) => (
-                        <DropdownItem
-                          showDivider={item.showDivider}
-                          key={item.key}
-                          color={item.color}
-                          className={item.className}
-                        >
-                          {item.label}
-                        </DropdownItem>
-                      ))}
-                    </DropdownMenu>
-                  </Dropdown>
-                </div>
+                <Dropdown>
+                  <DropdownTrigger>
+                    <Button isIconOnly size="sm" variant="light" color="default">
+                      <IoMdMore
+                        color="default"
+                        className={`text-[24px] ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
+                      />
+                    </Button>
+                  </DropdownTrigger>
+                  <DropdownMenu onAction={onMenuAction}>
+                    {menuItems.map((item) => (
+                      <DropdownItem
+                        showDivider={item.showDivider}
+                        key={item.key}
+                        color={item.color}
+                        className={item.className}
+                      >
+                        {item.label}
+                      </DropdownItem>
+                    ))}
+                  </DropdownMenu>
+                </Dropdown>
               </div>
-              {info.type === 'remote' && extra && (
-                <div
-                  className={`mt-2 flex justify-between ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
-                >
-                  <small>{`${calcTraffic(usage)}/${calcTraffic(total)}`}</small>
-                  {profileDisplayDate === 'expire' ? (
-                    <Button
-                      size="sm"
-                      variant="light"
-                      className={`h-[20px] p-1 m-0 ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
-                      onPress={async () => {
-                        await patchAppConfig({ profileDisplayDate: 'update' })
-                      }}
-                    >
-                      {extra.expire ? dayjs.unix(extra.expire).format('YYYY-MM-DD') : '长期有效'}
-                    </Button>
-                  ) : (
-                    <Button
-                      size="sm"
-                      variant="light"
-                      className={`h-[20px] p-1 m-0 ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
-                      onPress={async () => {
-                        await patchAppConfig({ profileDisplayDate: 'expire' })
-                      }}
-                    >
-                      {dayjs(info.updated).fromNow()}
-                    </Button>
-                  )}
-                </div>
-              )}
-            </CardBody>
-            <CardFooter className="pt-0">
-              {info.type === 'remote' && !extra && (
-                <div
-                  className={`w-full mt-2 flex justify-between ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
-                >
-                  <Chip
+            </div>
+            {info.type === 'remote' && extra && (
+              <div
+                className={`mt-2 flex justify-between ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
+              >
+                <small>{`${calcTraffic(usage)}/${calcTraffic(total)}`}</small>
+                {profileDisplayDate === 'expire' ? (
+                  <Button
                     size="sm"
-                    variant="bordered"
-                    className={`${isCurrent ? 'text-primary-foreground border-primary-foreground' : 'border-primary text-primary'}`}
+                    variant="light"
+                    className={`h-[20px] p-1 m-0 ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
+                    onPress={async () => {
+                      await patchAppConfig({ profileDisplayDate: 'update' })
+                    }}
                   >
+                    {extra.expire ? dayjs.unix(extra.expire).format('YYYY-MM-DD') : '长期有效'}
+                  </Button>
+                ) : (
+                  <Button
+                    size="sm"
+                    variant="light"
+                    className={`h-[20px] p-1 m-0 ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
+                    onPress={async () => {
+                      await patchAppConfig({ profileDisplayDate: 'expire' })
+                    }}
+                  >
+                    {dayjs(info.updated).fromNow()}
+                  </Button>
+                )}
+              </div>
+            )}
+          </CardBody>
+          <CardFooter className="pt-0">
+            {info.type === 'remote' && !extra && (
+              <div
+                className={`w-full mt-2 flex justify-between ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
+              >
+                <Chip
+                  size="sm"
+                  variant="bordered"
+                  className={`${isCurrent ? 'text-primary-foreground border-primary-foreground' : 'border-primary text-primary'}`}
+                >
                     {t('profiles.remote')}
-                  </Chip>
-                  <small>{dayjs(info.updated).fromNow()}</small>
-                </div>
-              )}
-              {info.type === 'local' && (
-                <div
-                  className={`mt-2 flex justify-between ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
+                </Chip>
+                <small>{dayjs(info.updated).fromNow()}</small>
+              </div>
+            )}
+            {info.type === 'local' && (
+              <div
+                className={`mt-2 flex justify-between ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
+              >
+                <Chip
+                  size="sm"
+                  variant="bordered"
+                  className={`${isCurrent ? 'text-primary-foreground border-primary-foreground' : 'border-primary text-primary'}`}
                 >
-                  <Chip
-                    size="sm"
-                    variant="bordered"
-                    className={`${isCurrent ? 'text-primary-foreground border-primary-foreground' : 'border-primary text-primary'}`}
-                  >
                     {t('profiles.local')}
-                  </Chip>
-                </div>
-              )}
-              {extra && (
-                <Progress
-                  className="w-full"
+                </Chip>
+              </div>
+            )}
+            {extra && (
+              <Progress
+                className="w-full"
                   aria-label={t('profiles.trafficUsage')}
-                  classNames={{
-                    indicator: isCurrent ? 'bg-primary-foreground' : 'bg-foreground'
-                  }}
-                  value={calcPercent(extra?.upload, extra?.download, extra?.total)}
-                />
-              )}
-            </CardFooter>
-          </div>
+                classNames={{
+                  indicator: isCurrent ? 'bg-primary-foreground' : 'bg-foreground'
+                }}
+                value={calcPercent(extra?.upload, extra?.download, extra?.total)}
+              />
+            )}
+          </CardFooter>
         </div>
       </Card>
     </div>
   )
 }
 
-export default ProfileItem
+export default ProfileItem
\ No newline at end of file
diff --git a/src/renderer/src/components/proxies/proxy-item.tsx b/src/renderer/src/components/proxies/proxy-item.tsx
index 627a7b5..ac6cd71 100644
--- a/src/renderer/src/components/proxies/proxy-item.tsx
+++ b/src/renderer/src/components/proxies/proxy-item.tsx
@@ -51,6 +51,8 @@ const ProxyItem: React.FC<Props> = (props) => {
 
   return (
     <Card
+      onPress={() => onSelect(group.name, proxy.name)}
+      isPressable
       fullWidth
       shadow="sm"
       className={`${
@@ -62,100 +64,95 @@ const ProxyItem: React.FC<Props> = (props) => {
       }`}
       radius="sm"
     >
-      <div
-        onClick={() => onSelect(group.name, proxy.name)}
-        className="cursor-pointer"
-      >
-        <CardBody className="p-1">
-          {proxyDisplayMode === 'full' ? (
-            <div className="flex flex-col gap-1">
-              <div className="flex justify-between items-center pl-1">
-                <div className="text-ellipsis overflow-hidden whitespace-nowrap" title={proxy.name}>
-                  {proxy.name}
-                </div>
-                {fixed && (
-                  <Button
-                    isIconOnly
-                    title={t('proxies.unpin')}
-                    color="danger"
-                    onPress={async () => {
-                      await mihomoUnfixedProxy(group.name)
-                      mutateProxies()
-                    }}
-                    variant="light"
-                    className="h-[20px] p-0 text-sm"
-                  >
-                    <FaMapPin className="text-md le" />
-                  </Button>
-                )}
+    <CardBody className="p-1">
+      {proxyDisplayMode === 'full' ? (
+          <div className="flex flex-col gap-1">
+            <div className="flex justify-between items-center pl-1">
+              <div className="text-ellipsis overflow-hidden whitespace-nowrap" title={proxy.name}>
+                {proxy.name}
               </div>
-              <div className="flex justify-between items-center pl-1">
-                <div className="flex gap-1 items-center">
-                  <div className="text-foreground-400 text-xs bg-default-100 px-1 rounded-md">
-                    {proxy.type}
-                  </div>
-                  {['tfo', 'udp', 'xudp', 'mptcp', 'smux'].map(protocol => 
-                    proxy[protocol as keyof IMihomoProxy] && (
-                      <div key={protocol} className="text-foreground-400 text-xs bg-default-100 px-1 rounded-md">
-                        {protocol}
-                      </div>
-                    )
-                  )}
-                </div>
+              {fixed && (
                 <Button
                   isIconOnly
-                  title={proxy.type}
-                  isLoading={loading}
-                  color={delayColor(delay)}
-                  onPress={onDelay}
-                  variant="light"
-                  className="h-full text-sm ml-auto -mt-0.5"
-                >
-                  {delayText(delay)}
-                </Button>
-              </div>
-            </div>
-          ) : (
-            <div className="flex justify-between items-center pl-1 p-1">
-              <div className="text-ellipsis overflow-hidden whitespace-nowrap">
-                <div className="flag-emoji inline" title={proxy.name}>
-                  {proxy.name}
-                </div>
-              </div>
-              <div className="flex justify-end">
-                {fixed && (
-                  <Button
-                    isIconOnly
                     title={t('proxies.unpin')}
-                    color="danger"
-                    onPress={async () => {
-                      await mihomoUnfixedProxy(group.name)
-                      mutateProxies()
-                    }}
-                    variant="light"
-                    className="h-[20px] p-0 text-sm"
-                  >
-                    <FaMapPin className="text-md le" />
-                  </Button>
-                )}
-                <Button
-                  isIconOnly
-                  title={proxy.type}
-                  isLoading={loading}
-                  color={delayColor(delay)}
-                  onPress={onDelay}
+                  color="danger"
+                  onPress={async () => {
+                    await mihomoUnfixedProxy(group.name)
+                    mutateProxies()
+                  }}
                   variant="light"
-                  className="h-full p-0 text-sm"
+                  className="h-[20px] p-0 text-sm"
                 >
-                  {delayText(delay)}
+                  <FaMapPin className="text-md le" />
                 </Button>
-              </div>
+              )}
             </div>
-          )}
-        </CardBody>
-      </div>
+            <div className="flex justify-between items-center pl-1">
+              <div className="flex gap-1 items-center">
+                <div className="text-foreground-400 text-xs bg-default-100 px-1 rounded-md">
+                  {proxy.type}
+                </div>
+                {['tfo', 'udp', 'xudp', 'mptcp', 'smux'].map(protocol => 
+                  proxy[protocol as keyof IMihomoProxy] && (
+                    <div key={protocol} className="text-foreground-400 text-xs bg-default-100 px-1 rounded-md">
+                      {protocol}
+                    </div>
+                  )
+                )}
+              </div>
+              <Button
+                isIconOnly
+                title={proxy.type}
+                isLoading={loading}
+                color={delayColor(delay)}
+                onPress={onDelay}
+                variant="light"
+                className="h-full text-sm ml-auto -mt-0.5"
+              >
+                {delayText(delay)}
+              </Button>
+            </div>
+          </div>
+        ) : (
+        <div className="flex justify-between items-center pl-1 p-1">
+          <div className="text-ellipsis overflow-hidden whitespace-nowrap">
+            <div className="flag-emoji inline" title={proxy.name}>
+              {proxy.name}
+            </div>
+          </div>
+          <div className="flex justify-end">
+            {fixed && (
+              <Button
+                isIconOnly
+                    title={t('proxies.unpin')}
+                color="danger"
+                onPress={async () => {
+                  await mihomoUnfixedProxy(group.name)
+                  mutateProxies()
+                }}
+                variant="light"
+                className="h-[20px] p-0 text-sm"
+              >
+                <FaMapPin className="text-md le" />
+              </Button>
+            )}
+            <Button
+              isIconOnly
+              title={proxy.type}
+              isLoading={loading}
+              color={delayColor(delay)}
+              onPress={onDelay}
+              variant="light"
+              className="h-full p-0 text-sm"
+            >
+              {delayText(delay)}
+            </Button>
+          </div>
+        </div>
+      )}
+      </CardBody>
     </Card>
   )
 }
 
-export default ProxyItem
+export default ProxyItem
\ No newline at end of file
diff --git a/src/renderer/src/pages/profiles.tsx b/src/renderer/src/pages/profiles.tsx
index 0e73f93..65a659e 100644
--- a/src/renderer/src/pages/profiles.tsx
+++ b/src/renderer/src/pages/profiles.tsx
@@ -395,7 +395,7 @@ const Profiles: React.FC = () => {
                 mutateProfileConfig={mutateProfileConfig}
                 updateProfileItem={updateProfileItem}
                 info={item}
-                onClick={async () => {
+                onPress={async () => {
                   await changeCurrentProfile(item.id)
                 }}
               />
diff --git a/src/renderer/src/pages/proxies.tsx b/src/renderer/src/pages/proxies.tsx
index ac2a5c2..a9ed965 100644
--- a/src/renderer/src/pages/proxies.tsx
+++ b/src/renderer/src/pages/proxies.tsx
@@ -329,121 +329,118 @@ const Proxies: React.FC = () => {
                   className={`w-full pt-2 ${index === groupCounts.length - 1 && !isOpen[index] ? 'pb-2' : ''} px-2`}
                 >
                   <Card
+                    isPressable
                     fullWidth
+                    onPress={() => {
+                      setIsOpen((prev) => {
+                        const newOpen = [...prev]
+                        newOpen[index] = !prev[index]
+                        return newOpen
+                      })
+                    }}
                   >
-                    <div
-                      onClick={(): void => {
-                        setIsOpen((prev) => {
-                          const newOpen = [...prev]
-                          newOpen[index] = !prev[index]
-                          return newOpen
-                        })
-                      }}
-                      className="cursor-pointer"
-                    >
-                      <CardBody className="w-full">
-                        <div className="flex justify-between">
-                          <div className="flex text-ellipsis overflow-hidden whitespace-nowrap">
-                            {groups[index].icon ? (
-                              <Avatar
-                                className="bg-transparent mr-2"
-                                size="sm"
-                                radius="sm"
-                                src={
-                                  groups[index].icon.startsWith('<svg')
-                                    ? `data:image/svg+xml;utf8,${groups[index].icon}`
-                                    : localStorage.getItem(groups[index].icon) || groups[index].icon
-                                }
-                              />
-                            ) : null}
-                            <div className="text-ellipsis overflow-hidden whitespace-nowrap">
-                              <div
-                                title={groups[index].name}
-                                className="inline flag-emoji h-[32px] text-md leading-[32px]"
-                              >
-                                {groups[index].name}
-                              </div>
-                              {proxyDisplayMode === 'full' && (
-                                <div
-                                  title={groups[index].type}
-                                  className="inline ml-2 text-sm text-foreground-500"
-                                >
-                                  {groups[index].type}
-                                </div>
-                              )}
-                              {proxyDisplayMode === 'full' && (
-                                <div className="inline flag-emoji ml-2 text-sm text-foreground-500">
-                                  {groups[index].now}
-                                </div>
-                              )}
+                    <CardBody className="w-full">
+                      <div className="flex justify-between">
+                        <div className="flex text-ellipsis overflow-hidden whitespace-nowrap">
+                          {groups[index].icon ? (
+                            <Avatar
+                              className="bg-transparent mr-2"
+                              size="sm"
+                              radius="sm"
+                              src={
+                                groups[index].icon.startsWith('<svg')
+                                  ? `data:image/svg+xml;utf8,${groups[index].icon}`
+                                  : localStorage.getItem(groups[index].icon) || groups[index].icon
+                              }
+                            />
+                          ) : null}
+                          <div className="text-ellipsis overflow-hidden whitespace-nowrap">
+                            <div
+                              title={groups[index].name}
+                              className="inline flag-emoji h-[32px] text-md leading-[32px]"
+                            >
+                              {groups[index].name}
                             </div>
-                          </div>
-                          <div className="flex">
                             {proxyDisplayMode === 'full' && (
-                              <Chip size="sm" className="my-1 mr-2">
-                                {groups[index].all.length}
-                              </Chip>
+                              <div
+                                title={groups[index].type}
+                                className="inline ml-2 text-sm text-foreground-500"
+                              >
+                                {groups[index].type}
+                              </div>
+                            )}
+                            {proxyDisplayMode === 'full' && (
+                              <div className="inline flag-emoji ml-2 text-sm text-foreground-500">
+                                {groups[index].now}
+                              </div>
                             )}
-                            <CollapseInput
-                              title={t('proxies.search.placeholder')}
-                              value={searchValue[index]}
-                              onValueChange={(v) => {
-                                setSearchValue((prev) => {
-                                  const newSearchValue = [...prev]
-                                  newSearchValue[index] = v
-                                  return newSearchValue
-                                })
-                              }}
-                            />
-                            <Button
-                              title={t('proxies.locate')}
-                              variant="light"
-                              size="sm"
-                              isIconOnly
-                              onPress={() => {
-                                if (!isOpen[index]) {
-                                  setIsOpen((prev) => {
-                                    const newOpen = [...prev]
-                                    newOpen[index] = true
-                                    return newOpen
-                                  })
-                                }
-                                let i = 0
-                                for (let j = 0; j < index; j++) {
-                                  i += groupCounts[j]
-                                }
-                                i += Math.floor(
-                                  allProxies[index].findIndex(
-                                    (proxy) => proxy.name === groups[index].now
-                                  ) / cols
-                                )
-                                virtuosoRef.current?.scrollToIndex({
-                                  index: Math.floor(i),
-                                  align: 'start'
-                                })
-                              }}
-                            >
-                              <FaLocationCrosshairs className="text-lg text-foreground-500" />
-                            </Button>
-                            <Button
-                              title={t('proxies.delay.test')}
-                              variant="light"
-                              isLoading={delaying[index]}
-                              size="sm"
-                              isIconOnly
-                              onPress={() => {
-                                onGroupDelay(index)
-                              }}
-                            >
-                              <MdOutlineSpeed className="text-lg text-foreground-500" />
-                            </Button>
-                            <IoIosArrowBack
-                              className={`transition duration-200 ml-2 h-[32px] text-lg text-foreground-500 ${isOpen[index] ? '-rotate-90' : ''}`}
-                            />
                           </div>
                         </div>
-                      </CardBody>
-                    </div>
+                        <div className="flex">
+                          {proxyDisplayMode === 'full' && (
+                            <Chip size="sm" className="my-1 mr-2">
+                              {groups[index].all.length}
+                            </Chip>
+                          )}
+                          <CollapseInput
+                              title={t('proxies.search.placeholder')}
+                            value={searchValue[index]}
+                            onValueChange={(v) => {
+                              setSearchValue((prev) => {
+                                const newSearchValue = [...prev]
+                                newSearchValue[index] = v
+                                return newSearchValue
+                              })
+                            }}
+                          />
+                          <Button
+                              title={t('proxies.locate')}
+                            variant="light"
+                            size="sm"
+                            isIconOnly
+                            onPress={() => {
+                              if (!isOpen[index]) {
+                                setIsOpen((prev) => {
+                                  const newOpen = [...prev]
+                                  newOpen[index] = true
+                                  return newOpen
+                                })
+                              }
+                              let i = 0
+                              for (let j = 0; j < index; j++) {
+                                i += groupCounts[j]
+                              }
+                              i += Math.floor(
+                                allProxies[index].findIndex(
+                                  (proxy) => proxy.name === groups[index].now
+                                ) / cols
+                              )
+                              virtuosoRef.current?.scrollToIndex({
+                                index: Math.floor(i),
+                                align: 'start'
+                              })
+                            }}
+                          >
+                            <FaLocationCrosshairs className="text-lg text-foreground-500" />
+                          </Button>
+                          <Button
+                              title={t('proxies.delay.test')}
+                            variant="light"
+                            isLoading={delaying[index]}
+                            size="sm"
+                            isIconOnly
+                            onPress={() => {
+                              onGroupDelay(index)
+                            }}
+                          >
+                            <MdOutlineSpeed className="text-lg text-foreground-500" />
+                          </Button>
+                          <IoIosArrowBack
+                            className={`transition duration-200 ml-2 h-[32px] text-lg text-foreground-500 ${isOpen[index] ? '-rotate-90' : ''}`}
+                          />
+                        </div>
+                      </div>
+                    </CardBody>
                   </Card>
                 </div>
               ) : (
@@ -494,4 +491,4 @@ const Proxies: React.FC = () => {
   )
 }
 
-export default Proxies
+export default Proxies
\ No newline at end of file