feat: sticky groups (#7195)

* feat(proxy): implement sticky virtual list and group tools

- Add new StickyVirtualList component for better performance with sticky headers
- Create ProxyGroupTools component for filtering, sorting and testing proxy groups
- Enhance proxy groups with improved scrolling and group toggle functionality
- Integrate search box with click event handling
- Remove redundant ProxyHead component usage

* style: remove unused import and update TypeScript types

* refactor: convert function component to forwardRef component to fix biome lint error

* feat(proxy): extract proxy chain UI to separate component

* refactor: remove custom throttle implementation and simplify dependencies

* feat(proxy): improve proxy groups UI and scrolling behavior

- Add initialOffset prop to StickyVirtualList for better scroll position restoration
- Refactor ProxyGroups component to separate chain and normal modes
- Implement scroll position persistence for both chain and normal modes
- Add sticky shadow effect for expanded proxy groups
- Remove unnecessary ScrollTopButton component
- Optimize scroll event handling with throttling
- Improve code organization with custom hooks and component separation

* docs(proxy-groups): Add TODO comment for initial render position issue

* feat(proxy): improve scroll position handling and UI display

* refactor(proxy): simplify scroll handling logic and remove unused code

* fix(sticky-virtual-list): remove duplicate styles and add padding

* refactor(proxy): rename scroll offset variables and functions for clarity

* refactor: remove unnecessary refs and simplify onClick handlers

* fix(proxy-groups): handle initial scroll position state

* feat(zed): add biome formatter configuration

* refactor(proxy): remove unused headState import and type annotations

* style(proxy): improve type imports and conditional rendering

* .

* feat(proxy): add ProxyHead component to render in global mode

* chore: ignore .zed directory

* docs: update changelog

src/components/proxy/proxy-render.tsx

@@ -20,15 +20,16 @@ import { useIconCache } from '@/hooks/use-icon-cache'
 import { useVerge } from '@/hooks/use-verge'
 import { useThemeMode } from '@/services/states'
 
+import { ProxyGroupTools } from './proxy-group-tools'
 import { ProxyHead } from './proxy-head'
 import { ProxyItem } from './proxy-item'
 import { ProxyItemMini } from './proxy-item-mini'
-import { HeadState } from './use-head-state'
+import type { HeadState } from './use-head-state'
 import type { IRenderItem } from './use-render-list'
 
 interface RenderProps {
   item: IRenderItem
-  indent: boolean
+  stickyed?: boolean
   isChainMode?: boolean
   onLocation: (group: IRenderItem['group']) => void
   onCheckAll: (groupName: string) => void
@@ -37,24 +38,26 @@ interface RenderProps {
     group: IRenderItem['group'],
     proxy: IRenderItem['proxy'] & { name: string },
   ) => void
+  onGroupToggle?: (group: IRenderItem['group']) => void
 }
 
 export const ProxyRender = memo(function ProxyRender(props: RenderProps) {
   const { t } = useTranslation()
   const {
-    indent,
     item,
+    stickyed = false,
     onLocation,
     onCheckAll,
     onHeadState,
     onChangeProxy,
+    onGroupToggle,
     isChainMode: _ = false,
   } = props
   const { type, group, headState, proxy, proxyCol } = item
   const { verge } = useVerge()
   const enable_group_icon = verge?.enable_group_icon ?? true
   const mode = useThemeMode()
-  const isDark = mode === 'light' ? false : true
+  const isDark = mode === 'dark'
   const itembackgroundcolor = isDark ? '#282A36' : '#ffffff'
   const iconCachePath = useIconCache({
     icon: group.icon,
@@ -72,101 +75,135 @@ export const ProxyRender = memo(function ProxyRender(props: RenderProps) {
       <ProxyItemMini
         key={`${item.key}-${proxyItem?.name ?? 'unknown'}`}
         group={group}
-        proxy={proxyItem!}
+        proxy={proxyItem}
         selected={group.now === proxyItem?.name}
         showType={showType}
-        onClick={() => onChangeProxy(group, proxyItem!)}
+        onClick={() => onChangeProxy(group, proxyItem)}
       />
     ))
   }, [type, proxyCol, item.key, group, showType, onChangeProxy])
 
   if (type === 0) {
     return (
-      <ListItemButton
-        dense
-        style={{
-          background: itembackgroundcolor,
-          height: '100%',
-          margin: '8px 8px',
-          borderRadius: '8px',
-        }}
-        onClick={() => onHeadState(group.name, { open: !headState?.open })}
-      >
-        {enable_group_icon &&
-          group.icon &&
-          group.icon.trim().startsWith('http') && (
+      <div style={{ padding: '4px 8px' }}>
+        <ListItemButton
+          dense
+          sx={{
+            boxShadow:
+              stickyed && headState?.open
+                ? '0 4px 8px rgba(0, 0, 0, 0.2) !important'
+                : undefined,
+          }}
+          style={{
+            background: itembackgroundcolor,
+            height: '100%',
+            borderRadius: '8px',
+          }}
+          onClick={() => {
+            if (headState?.open) {
+              onGroupToggle?.(group)
+            }
+            onHeadState?.(group.name, { open: !headState?.open })
+          }}
+        >
+          {enable_group_icon && group.icon?.trim().startsWith('http') && (
             <img
               src={iconCachePath === '' ? group.icon : iconCachePath}
+              alt="group icon"
               width="32px"
               style={{ marginRight: '12px', borderRadius: '6px' }}
             />
           )}
-        {enable_group_icon &&
-          group.icon &&
-          group.icon.trim().startsWith('data') && (
+          {enable_group_icon && group.icon?.trim().startsWith('data') && (
             <img
               src={group.icon}
+              alt="group icon"
               width="32px"
               style={{ marginRight: '12px', borderRadius: '6px' }}
             />
           )}
-        {enable_group_icon &&
-          group.icon &&
-          group.icon.trim().startsWith('<svg') && (
+          {enable_group_icon && group.icon?.trim().startsWith('<svg') && (
             <img
               src={`data:image/svg+xml;base64,${btoa(group.icon)}`}
+              alt="group icon"
               width="32px"
             />
           )}
-        <ListItemText
-          primary={<StyledPrimary>{group.name}</StyledPrimary>}
-          secondary={
-            <Box
-              sx={{
-                overflow: 'hidden',
-                display: 'flex',
-                alignItems: 'center',
-                pt: '2px',
-              }}
-            >
-              <Box component="span" sx={{ marginTop: '2px' }}>
-                <StyledTypeBox>{group.type}</StyledTypeBox>
-                <StyledSubtitle sx={{ color: 'text.secondary' }}>
-                  {group.now}
-                </StyledSubtitle>
+          <ListItemText
+            primary={<StyledPrimary>{group.name}</StyledPrimary>}
+            secondary={
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  pt: '2px',
+                  overflow: 'hidden',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                <Box
+                  component="span"
+                  sx={{
+                    marginTop: '2px',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  }}
+                >
+                  <StyledTypeBox>{group.type}</StyledTypeBox>
+                  <StyledSubtitle sx={{ color: 'text.secondary' }}>
+                    {group.now}
+                  </StyledSubtitle>
+                </Box>
               </Box>
-            </Box>
-          }
-          slotProps={{
-            secondary: {
-              component: 'div',
-              sx: { display: 'flex', alignItems: 'center', color: '#ccc' },
-            },
-          }}
-        />
-        <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          <Tooltip title={t('proxies.page.labels.proxyCount')} arrow>
-            <Chip
-              size="small"
-              label={`${group.all.length}`}
-              sx={{
-                mr: 1,
-                backgroundColor: (theme) =>
-                  alpha(theme.palette.primary.main, 0.1),
-                color: (theme) => theme.palette.primary.main,
-              }}
+            }
+            slotProps={{
+              secondary: {
+                component: 'div',
+                sx: { display: 'flex', alignItems: 'center', color: '#ccc' },
+              },
+            }}
+          />
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <ProxyGroupTools
+              url={group.testUrl}
+              groupName={group.name}
+              headState={headState!}
+              onLocation={() => onLocation(group)}
+              onCheckDelay={() => onCheckAll(group.name)}
+              onHeadState={(p) => onHeadState(group.name, p)}
             />
-          </Tooltip>
-          {headState?.open ? <ExpandLessRounded /> : <ExpandMoreRounded />}
-        </Box>
-      </ListItemButton>
+            <Tooltip title={t('proxies.page.labels.proxyCount')} arrow>
+              <div
+                style={{
+                  minWidth: '50px',
+                  display: 'flex',
+                  justifyContent: 'end',
+                  alignItems: 'center',
+                }}
+              >
+                <Chip
+                  size="small"
+                  label={`${group.all.length}`}
+                  sx={{
+                    mr: 1,
+                    backgroundColor: (theme) =>
+                      alpha(theme.palette.primary.main, 0.1),
+                    color: (theme) => theme.palette.primary.main,
+                  }}
+                />
+              </div>
+            </Tooltip>
+            {headState?.open ? <ExpandLessRounded /> : <ExpandMoreRounded />}
+          </Box>
+        </ListItemButton>
+      </div>
     )
   }
 
   if (type === 1) {
     return (
       <ProxyHead
-        sx={{ pl: 2, pr: 3, mt: indent ? 1 : 0.5, mb: 1 }}
+        sx={{ pl: 2, pr: 3, mt: 0.5, mb: 1 }}
         url={group.testUrl}
         groupName={group.name}
         headState={headState!}
@@ -214,10 +251,9 @@ export const ProxyRender = memo(function ProxyRender(props: RenderProps) {
         sx={{
           height: 56,
           display: 'grid',
+          my: 0.5,
           gap: 1,
-          pl: 2,
-          pr: 2,
-          pb: 1,
+          px: 2,
           gridTemplateColumns: `repeat(${item.col! || 2}, 1fr)`,
         }}
       >