refactor(frontend): remove dead states, refs and unreachable branches

Drop state that can only hold its initial value (profiles page disabled
flag, traffic graph currentFPS), a write-only window controls ref with
its unconsumed imperative handle, a no-op appendData ref method, an
unreachable gradient branch, an invisible fadeIn shell, constant-true
subexpressions in the system info card, an empty click handler and a
pointless useMemo.

src/components/home/enhanced-canvas-traffic-graph.tsx

@@ -14,7 +14,6 @@ import { useTranslation } from 'react-i18next'
 
 import { useTrafficGraphDataEnhanced } from '@/hooks/use-traffic-monitor'
 import { useVerge } from '@/hooks/use-verge'
-import { debugLog } from '@/utils/debug'
 import parseTraffic from '@/utils/parse-traffic'
 import {
   formatTrafficHourMinute,
@@ -23,14 +22,7 @@ import {
   isSameTrafficData,
 } from '@/utils/traffic-sampler'
 
-interface ITrafficItem {
-  up: number
-  down: number
-  timestamp?: number
-}
-
 export interface EnhancedCanvasTrafficGraphRef {
-  appendData: (data: ITrafficItem) => void
   toggleStyle: () => void
 }
 
@@ -142,7 +134,6 @@ export const EnhancedCanvasTrafficGraph = memo(
       [],
     )
     const debounceTimeoutRef = useRef<number | null>(null)
-    const [currentFPS, setCurrentFPS] = useState(GRAPH_CONFIG.targetFPS)
 
     const colors = useMemo(
       () => ({
@@ -183,8 +174,6 @@ export const EnhancedCanvasTrafficGraph = memo(
       if (displayData.length === 0) {
         lastDataTimestampRef.current = 0
         dataStaleRef.current = false
-        // eslint-disable-next-line @eslint-react/set-state-in-effect
-        setCurrentFPS(GRAPH_CONFIG.targetFPS)
         return
       }
 
@@ -200,18 +189,11 @@ export const EnhancedCanvasTrafficGraph = memo(
       }
     }, [displayData])
 
-    const handleFocusStateChange = useCallback(
-      (focused: boolean) => {
-        isWindowFocusedRef.current = focused
+    const handleFocusStateChange = useCallback((focused: boolean) => {
+      isWindowFocusedRef.current = focused
 
-        if (focused || !pause_render_traffic_stats_on_blur) {
-          setCurrentFPS(GRAPH_CONFIG.targetFPS)
-        }
-
-        scheduleDrawGraphRef.current()
-      },
-      [pause_render_traffic_stats_on_blur],
-    )
+      scheduleDrawGraphRef.current()
+    }, [])
 
     useEffect(() => {
       if (typeof window === 'undefined' || typeof document === 'undefined') {
@@ -684,19 +666,13 @@ export const EnhancedCanvasTrafficGraph = memo(
           ctx.beginPath()
           ctx.moveTo(getX(0), getY(0))
 
-          if (chartStyle === 'bezier') {
-            for (let i = 1; i < data.length; i++) {
-              const currentX = getX(i)
-              const currentY = getY(i)
-              const nextIndex = Math.min(i + 1, lastIndex)
-              const controlX = (currentX + getX(nextIndex)) / 2
-              const controlY = (currentY + getY(nextIndex)) / 2
-              ctx.quadraticCurveTo(currentX, currentY, controlX, controlY)
-            }
-          } else {
-            for (let i = 1; i < data.length; i++) {
-              ctx.lineTo(getX(i), getY(i))
-            }
+          for (let i = 1; i < data.length; i++) {
+            const currentX = getX(i)
+            const currentY = getY(i)
+            const nextIndex = Math.min(i + 1, lastIndex)
+            const controlX = (currentX + getX(nextIndex)) / 2
+            const controlY = (currentY + getY(nextIndex)) / 2
+            ctx.quadraticCurveTo(currentX, currentY, controlX, controlY)
           }
 
           ctx.lineTo(getX(lastIndex), height - padding.bottom)
@@ -984,21 +960,7 @@ export const EnhancedCanvasTrafficGraph = memo(
       setChartStyle((prev) => (prev === 'bezier' ? 'line' : 'bezier'))
     }, [])
 
-    const appendData = useCallback((data: ITrafficItem) => {
-      debugLog(
-        '[EnhancedCanvasTrafficGraphV2] appendData called (using global data):',
-        data,
-      )
-    }, [])
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        appendData,
-        toggleStyle,
-      }),
-      [appendData, toggleStyle],
-    )
+    useImperativeHandle(ref, () => ({ toggleStyle }), [toggleStyle])
 
     const getTimeRangeText = useCallback(() => {
       return t('home.components.traffic.patterns.minutes', {
@@ -1142,7 +1104,7 @@ export const EnhancedCanvasTrafficGraph = memo(
             {t('home.components.traffic.diagnostics', {
               points: displayData.length,
               compressed: samplerStats.compressedBufferSize,
-              fps: currentFPS,
+              fps: GRAPH_CONFIG.targetFPS,
             })}
           </Box>
 

src/components/home/system-info-card.tsx

@@ -86,16 +86,11 @@ export const SystemInfoCard = () => {
   }, [verge, patchVerge])
 
   const handleRunningModeClick = useCallback(async () => {
-    if (isSidecarMode || (isAdminMode && isSidecarMode)) {
+    if (isSidecarMode) {
       await installServiceAndRestartCore()
       await mutateSystemState()
     }
-  }, [
-    isSidecarMode,
-    isAdminMode,
-    installServiceAndRestartCore,
-    mutateSystemState,
-  ])
+  }, [isSidecarMode, installServiceAndRestartCore, mutateSystemState])
 
   const onCheckUpdate = useLockFn(async () => {
     try {
@@ -122,18 +117,16 @@ export const SystemInfoCard = () => {
 
   const runningModeStyle = useMemo(
     () => ({
-      cursor:
-        isSidecarMode || (isAdminMode && isSidecarMode) ? 'pointer' : 'default',
-      textDecoration:
-        isSidecarMode || (isAdminMode && isSidecarMode) ? 'underline' : 'none',
+      cursor: isSidecarMode ? 'pointer' : 'default',
+      textDecoration: isSidecarMode ? 'underline' : 'none',
       display: 'flex',
       alignItems: 'center',
       gap: 0.5,
       '&:hover': {
-        opacity: isSidecarMode || (isAdminMode && isSidecarMode) ? 0.7 : 1,
+        opacity: isSidecarMode ? 0.7 : 1,
       },
     }),
-    [isSidecarMode, isAdminMode],
+    [isSidecarMode],
   )
 
   const getModeIcon = () => {

src/components/layout/layout-traffic.tsx

@@ -130,7 +130,6 @@ export const LayoutTraffic = () => {
                 cursor: 'auto',
               }}
               color={'disabled'}
-              onClick={async () => {}}
             >
               <MemoryRounded {...iconStyle} />
               <Typography {...valStyle}>{inuse}</Typography>

src/components/layout/window-controller.tsx

@@ -1,11 +1,6 @@
 import { Close, CropSquare, FilterNone, Minimize } from '@mui/icons-material'
 import { Box, IconButton } from '@mui/material'
-import {
-  forwardRef,
-  type PointerEvent,
-  useCallback,
-  useImperativeHandle,
-} from 'react'
+import { type PointerEvent, useCallback } from 'react'
 
 import { useWindowControls } from '@/hooks/use-window'
 import getSystem from '@/utils/get-system'
@@ -63,36 +58,9 @@ export const WindowResizeHandles = () => {
   )
 }
 
-export const WindowControls = forwardRef(function WindowControls(props, ref) {
+export const WindowControls = () => {
   const OS = getSystem()
-  const {
-    currentWindow,
-    maximized,
-    minimize,
-    close,
-    toggleFullscreen,
-    toggleMaximize,
-  } = useWindowControls()
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      currentWindow,
-      maximized,
-      minimize,
-      close,
-      toggleFullscreen,
-      toggleMaximize,
-    }),
-    [
-      currentWindow,
-      maximized,
-      minimize,
-      close,
-      toggleFullscreen,
-      toggleMaximize,
-    ],
-  )
+  const { maximized, minimize, close, toggleMaximize } = useWindowControls()
 
   // 通过前端对 tauri 窗口进行翻转全屏时会短暂地与系统图标重叠渲染。
   // 这可能是上游缺陷，保险起见跨平台以窗口的最大化翻转为准。
@@ -186,4 +154,4 @@ export const WindowControls = forwardRef(function WindowControls(props, ref) {
       )}
     </Box>
   )
-})
+}

src/hooks/use-icon-cache.ts

@@ -1,5 +1,4 @@
 import { convertFileSrc } from '@tauri-apps/api/core'
-import { useMemo } from 'react'
 
 import { downloadIconCache } from '@/services/cmds'
 import { useQuery } from '@/services/query-client'
@@ -23,9 +22,8 @@ export const useIconCache = ({
   const iconValue = icon?.trim() ?? ''
   const cacheKeyValue = cacheKey?.trim() ?? ''
 
-  const isEnabled = useMemo(() => {
-    return enabled && iconValue.startsWith('http') && cacheKeyValue !== ''
-  }, [enabled, iconValue, cacheKeyValue])
+  const isEnabled =
+    enabled && iconValue.startsWith('http') && cacheKeyValue !== ''
 
   const { data } = useQuery({
     queryKey: ['icon-cache', iconValue, cacheKeyValue],

src/pages/_layout.tsx

@@ -1,7 +1,7 @@
 import { Paper, ThemeProvider } from '@mui/material'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Outlet, useNavigate } from 'react-router'
 
@@ -46,7 +46,6 @@ const Layout = () => {
   const { switchLanguage } = useI18n()
   const navigate = useNavigate()
   const themeReady = useMemo(() => Boolean(theme), [theme])
-  const windowControlsRef = useRef<any>(null)
   const { decorated } = useWindowDecorations()
 
   const customTitlebar = useMemo(
@@ -57,7 +56,7 @@ const Layout = () => {
             className="the_titlebar-drag-region"
             data-tauri-drag-region="true"
           />
-          <WindowControls ref={windowControlsRef} />
+          <WindowControls />
         </div>
       ) : null,
     [decorated],
@@ -110,20 +109,6 @@ const Layout = () => {
       <NoticeManager position={verge?.notice_position} />
       <ServiceMigrationDialog />
       <SysproxyPrivilegeDialog />
-      <div
-        style={{
-          animation: 'fadeIn 0.5s',
-          WebkitAnimation: 'fadeIn 0.5s',
-        }}
-      />
-      <style>
-        {`
-            @keyframes fadeIn {
-              from { opacity: 0; }
-              to { opacity: 1; }
-            }
-          `}
-      </style>
       <Paper
         square
         elevation={0}

src/pages/profiles.tsx

@@ -83,7 +83,6 @@ const ProfilePage = () => {
   const { t } = useTranslation()
   const location = useLocation()
   const [url, setUrl] = useState('')
-  const [disabled, setDisabled] = useState(false)
   const [profileDndRevision, setProfileDndRevision] = useState(0)
   const [activatings, setActivatings] = useState<string[]>([])
   const [switchTarget, setSwitchTarget] = useState<string | null>(null)
@@ -257,7 +256,6 @@ const ProfilePage = () => {
         )
       }
     } finally {
-      setDisabled(false)
       setLoading(false)
     }
   }
@@ -824,7 +822,7 @@ const ProfilePage = () => {
             if (event.key !== 'Enter' || event.nativeEvent.isComposing) {
               return
             }
-            if (!url || disabled || loading) {
+            if (!url || loading) {
               return
             }
             event.preventDefault()
@@ -857,7 +855,7 @@ const ProfilePage = () => {
           }}
         />
         <Button
-          disabled={!url || disabled}
+          disabled={!url}
           loading={loading}
           variant="contained"
           size="small"