feat: add configurable hover jump navigator delay (#5178)

* fix: hover options

* feat: add configurable hover jump navigator delay

- Added `hover_jump_navigator_delay` to Verge config defaults, patch flow, and response payload for persistent app-wide settings.
- Made proxy navigator respect configurable delay via `DEFAULT_HOVER_DELAY` and new `hoverDelay` prop.
- Threaded stored delay through proxy list so hover scrolling uses Verge-configured value.
- Added "Hover Jump Navigator Delay" control in Layout settings with clamped numeric input, tooltip, and toggle-aware disabling.
- Localized new labels in English, Simplified Chinese, and Traditional Chinese.
- Extended frontend Verge config type to include delay field for type-safe access.

* docs: UPDATELOG.md

src/components/proxy/proxy-group-navigator.tsx

@@ -1,11 +1,15 @@
 import { Box, Button, Tooltip } from "@mui/material";
-import { useCallback, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 
 interface ProxyGroupNavigatorProps {
   proxyGroupNames: string[];
   onGroupLocation: (groupName: string) => void;
+  enableHoverJump?: boolean;
+  hoverDelay?: number;
 }
 
+export const DEFAULT_HOVER_DELAY = 280;
+
 // 提取代理组名的第一个字符
 const getGroupDisplayChar = (groupName: string): string => {
   if (!groupName) return "?";
@@ -18,28 +22,58 @@ const getGroupDisplayChar = (groupName: string): string => {
 export const ProxyGroupNavigator = ({
   proxyGroupNames,
   onGroupLocation,
+  enableHoverJump = true,
+  hoverDelay = DEFAULT_HOVER_DELAY,
 }: ProxyGroupNavigatorProps) => {
   const lastHoveredRef = useRef<string | null>(null);
+  const hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const hoverDelayMs = hoverDelay >= 0 ? hoverDelay : 0;
+
+  const clearHoverTimer = useCallback(() => {
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!enableHoverJump) {
+      clearHoverTimer();
+      lastHoveredRef.current = null;
+    }
+    return () => {
+      clearHoverTimer();
+    };
+  }, [clearHoverTimer, enableHoverJump]);
 
   const handleGroupClick = useCallback(
     (groupName: string) => {
+      clearHoverTimer();
+      lastHoveredRef.current = groupName;
       onGroupLocation(groupName);
     },
-    [onGroupLocation],
+    [clearHoverTimer, onGroupLocation],
   );
 
   const handleGroupHover = useCallback(
     (groupName: string) => {
+      if (!enableHoverJump) return;
       if (lastHoveredRef.current === groupName) return;
-      lastHoveredRef.current = groupName;
-      onGroupLocation(groupName);
+      clearHoverTimer();
+      hoverTimerRef.current = setTimeout(() => {
+        hoverTimerRef.current = null;
+        lastHoveredRef.current = groupName;
+        onGroupLocation(groupName);
+      }, hoverDelayMs);
     },
-    [onGroupLocation],
+    [clearHoverTimer, enableHoverJump, hoverDelayMs, onGroupLocation],
   );
 
   const handleButtonLeave = useCallback(() => {
+    clearHoverTimer();
     lastHoveredRef.current = null;
-  }, []);
+  }, [clearHoverTimer]);
 
   // 处理代理组数据，去重和排序
   const processedGroups = useMemo(() => {
@@ -84,6 +118,7 @@ export const ProxyGroupNavigator = ({
             onMouseEnter={() => handleGroupHover(name)}
             onFocus={() => handleGroupHover(name)}
             onMouseLeave={handleButtonLeave}
+            onBlur={handleButtonLeave}
             sx={{
               minWidth: 28,
               minHeight: 28,

src/components/proxy/proxy-groups.tsx

@@ -25,7 +25,10 @@ import { BaseEmpty } from "../base";
 import { ScrollTopButton } from "../layout/scroll-top-button";
 
 import { ProxyChain } from "./proxy-chain";
-import { ProxyGroupNavigator } from "./proxy-group-navigator";
+import {
+  ProxyGroupNavigator,
+  DEFAULT_HOVER_DELAY,
+} from "./proxy-group-navigator";
 import { ProxyRender } from "./proxy-render";
 import { useRenderList } from "./use-render-list";
 
@@ -515,10 +518,12 @@ export const ProxyGroups = (props: Props) => {
           anchorEl={ruleMenuAnchor}
           open={Boolean(ruleMenuAnchor)}
           onClose={handleGroupMenuClose}
-          PaperProps={{
-            sx: {
-              maxHeight: 300,
-              minWidth: 200,
+          slotProps={{
+            paper: {
+              sx: {
+                maxHeight: 300,
+                minWidth: 200,
+              },
             },
           }}
         >
@@ -569,6 +574,8 @@ export const ProxyGroups = (props: Props) => {
         <ProxyGroupNavigator
           proxyGroupNames={proxyGroupNames}
           onGroupLocation={handleGroupLocationByName}
+          enableHoverJump={verge?.enable_hover_jump_navigator ?? true}
+          hoverDelay={verge?.hover_jump_navigator_delay ?? DEFAULT_HOVER_DELAY}
         />
       )}