refactor(web): extract group sidebar sortable list and optimize chunk splitting

Author: waterbang

web/src/components/SettingsModal.tsx

@@ -130,6 +130,7 @@ export function SettingsModal({
   const [imBusy, setImBusy] = useState(false);
   const imLoadSeq = useRef(0);
   const weixinAutoStartRef = useRef(false);
+  const contentScrollRef = useRef<HTMLDivElement | null>(null);
 
   // IM config drafts cache (per-platform local edits, not yet saved to server)
   const [imConfigDrafts, setImConfigDrafts] = useState<Partial<Record<IMPlatform, IMConfigDraft>>>({});
@@ -910,19 +911,6 @@ export function SettingsModal({
     }
   }, [globalTab, globalTabs, scope]);
 
-  // ============ Render ============
-
-  if (!isOpen) return null;
-
-  const scopeRootUrl = (() => {
-    if (!groupDoc || String(groupDoc.group_id || "") !== String(groupId || "")) return "";
-    const scopes = Array.isArray(groupDoc.scopes) ? groupDoc.scopes : [];
-    const activeKey = String(groupDoc.active_scope_key || "");
-    const active = scopes.find((s) => String(s?.scope_key || "") === activeKey && String(s?.url || "").trim());
-    const first = scopes.find((s) => String(s?.url || "").trim());
-    return String((active || first)?.url || "").trim();
-  })();
-
   const groupTabs: { id: GroupTabId; label: string }[] = [
     { id: "guidance", label: t("tabs.guidance") },
     { id: "automation", label: t("tabs.automation") },
@@ -940,6 +928,27 @@ export function SettingsModal({
     else setGlobalTab(tab as GlobalTabId);
   };
 
+  useEffect(() => {
+    const el = contentScrollRef.current;
+    if (!isOpen || !el) return;
+    requestAnimationFrame(() => {
+      el.scrollTo({ top: 0, behavior: "auto" });
+    });
+  }, [isOpen, scope, activeTab]);
+
+  // ============ Render ============
+
+  if (!isOpen) return null;
+
+  const scopeRootUrl = (() => {
+    if (!groupDoc || String(groupDoc.group_id || "") !== String(groupId || "")) return "";
+    const scopes = Array.isArray(groupDoc.scopes) ? groupDoc.scopes : [];
+    const activeKey = String(groupDoc.active_scope_key || "");
+    const active = scopes.find((s) => String(s?.scope_key || "") === activeKey && String(s?.url || "").trim());
+    const first = scopes.find((s) => String(s?.url || "").trim());
+    return String((active || first)?.url || "").trim();
+  })();
+
   return (
     <ModalFrame
       isDark={isDark}
@@ -964,7 +973,10 @@ export function SettingsModal({
         />
 
         {/* Main Content Area */}
-        <div className="min-h-0 flex-1 overflow-y-auto scrollbar-subtle flex flex-col [scrollbar-gutter:stable]">
+        <div
+          ref={contentScrollRef}
+          className="min-h-0 flex-1 overflow-y-auto scrollbar-subtle flex flex-col [scrollbar-gutter:stable]"
+        >
           <div className="p-5 pb-8 sm:p-8 sm:pb-10 space-y-6">
             {scope === "global" && !globalSettingsEnabled && !currentBrowserSignedIn ? (
               <div className={`rounded-xl border p-6 ${isDark ? "border-amber-700/40 bg-amber-900/10 text-amber-200" : "border-amber-200 bg-amber-50 text-amber-800"}`}>

web/src/components/app/AppShell.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties } from "react";
+import { useEffect, type CSSProperties } from "react";
 import { ErrorBoundary } from "../ErrorBoundary";
 import { TabBar } from "../TabBar";
 import { AppHeader } from "../layout/AppHeader";
@@ -153,6 +153,46 @@ export function AppShell({
     "--sidebar-width": `${sidebarCollapsed ? SIDEBAR_COLLAPSED_WIDTH : sidebarWidth}px`,
   } as CSSProperties;
 
+  useEffect(() => {
+    if (!selectedGroupId || runtimeActors.length === 0) return;
+    if (typeof window === "undefined") return;
+
+    const nav = navigator as Navigator & {
+      connection?: {
+        saveData?: boolean;
+        effectiveType?: string;
+      };
+    };
+    const connection = nav.connection;
+    if (connection?.saveData) return;
+    if (typeof connection?.effectiveType === "string" && /(^|-)2g$/.test(connection.effectiveType)) return;
+
+    let cancelled = false;
+    let timeoutId: ReturnType<typeof globalThis.setTimeout> | null = null;
+    let idleId: number | null = null;
+    const preloadActorTab = () => {
+      void import("../AgentTab").then(() => {
+        if (cancelled) return;
+      });
+    };
+
+    if ("requestIdleCallback" in window) {
+      idleId = window.requestIdleCallback(() => preloadActorTab(), { timeout: 1500 });
+    } else {
+      timeoutId = globalThis.setTimeout(() => preloadActorTab(), 600);
+    }
+
+    return () => {
+      cancelled = true;
+      if (idleId !== null && "cancelIdleCallback" in window) {
+        window.cancelIdleCallback(idleId);
+      }
+      if (timeoutId !== null) {
+        globalThis.clearTimeout(timeoutId);
+      }
+    };
+  }, [selectedGroupId, runtimeActors.length]);
+
   return (
     <div
       className="relative h-full min-h-0 transition-[grid-template-columns] duration-300 ease-out md:grid md:[grid-template-columns:var(--sidebar-width)_minmax(0,1fr)]"

web/src/components/layout/GroupSidebar.tsx

@@ -1,27 +1,16 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from 'react-i18next';
-import {
-  DndContext,
-  closestCenter,
-  KeyboardSensor,
-  PointerSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-  DragEndEvent,
-} from "@dnd-kit/core";
-import {
-  SortableContext,
-  sortableKeyboardCoordinates,
-  verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
 import { GroupMeta } from "../../types";
 import { classNames } from "../../utils/classNames";
 import { CloseIcon, FolderIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, PlusIcon } from "../Icons";
-import { SortableGroupItem } from "./SortableGroupItem";
+import { GroupSidebarItem } from "./GroupSidebarItem";
 import { SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH } from "../../stores/useUIStore";
 import { useBrandingStore } from "../../stores";
 
+const GroupSidebarSortableList = lazy(() =>
+  import("./GroupSidebarSortableList").then((module) => ({ default: module.GroupSidebarSortableList }))
+);
+
 export interface GroupSidebarProps {
   orderedGroups: GroupMeta[];
   archivedGroupIds: string[];
@@ -65,6 +54,7 @@ export function GroupSidebar({
   const branding = useBrandingStore((s) => s.branding);
   const dragStateRef = useRef<{ startX: number; startWidth: number } | null>(null);
   const [isResizing, setIsResizing] = useState(false);
+  const [sortableReady, setSortableReady] = useState(false);
   const archivedSet = useMemo(() => new Set(archivedGroupIds), [archivedGroupIds]);
   const workingGroups = useMemo(
     () => orderedGroups.filter((g) => !archivedSet.has(String(g.group_id || "").trim())),
@@ -91,37 +81,6 @@ export function GroupSidebar({
   const autoArchivedOpen = selectedArchived || (orderedGroups.length > 0 && workingGroups.length === 0 && archivedGroups.length > 0);
   const archivedPanelOpen = archivedOpen || autoArchivedOpen;
 
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 8,
-      },
-    }),
-    useSensor(TouchSensor, {
-      activationConstraint: {
-        delay: 200,
-        tolerance: 5,
-      },
-    }),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-
-  const handleDragEnd = useCallback(
-    (section: "working" | "archived", groups: GroupMeta[]) => (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (!over || active.id === over.id) return;
-      const ids = groups.map((g) => String(g.group_id || ""));
-      const oldIndex = ids.indexOf(String(active.id));
-      const newIndex = ids.indexOf(String(over.id));
-      if (oldIndex !== -1 && newIndex !== -1) {
-        onReorderSection(section, oldIndex, newIndex);
-      }
-    },
-    [onReorderSection]
-  );
-
   useEffect(() => {
     if (!isResizing) return undefined;
 
@@ -149,6 +108,37 @@ export function GroupSidebar({
     };
   }, [isResizing, onResizeWidth]);
 
+  useEffect(() => {
+    if (sortableReady) return;
+    if (typeof window === "undefined") return;
+    if (!window.matchMedia("(min-width: 768px)").matches) return;
+
+    let cancelled = false;
+    let timeoutId: ReturnType<typeof globalThis.setTimeout> | null = null;
+    let idleId: number | null = null;
+    const loadSortableList = () => {
+      void import("./GroupSidebarSortableList").then(() => {
+        if (!cancelled) setSortableReady(true);
+      });
+    };
+
+    if ("requestIdleCallback" in window) {
+      idleId = window.requestIdleCallback(() => loadSortableList(), { timeout: 1200 });
+    } else {
+      timeoutId = globalThis.setTimeout(() => loadSortableList(), 400);
+    }
+
+    return () => {
+      cancelled = true;
+      if (idleId !== null && "cancelIdleCallback" in window) {
+        window.cancelIdleCallback(idleId);
+      }
+      if (timeoutId !== null) {
+        globalThis.clearTimeout(timeoutId);
+      }
+    };
+  }, [sortableReady]);
+
   const handleResizeStart = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
     if (isCollapsed) return;
     event.preventDefault();
@@ -164,67 +154,96 @@ export function GroupSidebar({
 
   const renderGroupList = useCallback(
     (groups: GroupMeta[], section: "working" | "archived") => {
-      const sortableIds = groups.map((g) => String(g.group_id || ""));
       const isArchivedSection = section === "archived";
-      return (
-        <DndContext
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragEnd={handleDragEnd(section, groups)}
-        >
-          <SortableContext
-            items={sortableIds}
-            strategy={verticalListSortingStrategy}
-          >
-            <div className={classNames(
-              isCollapsed ? "flex flex-col items-center gap-2" : "space-y-1"
-            )}>
+      const menuActionLabel = isArchivedSection ? t("restoreGroup") : t("archiveGroup");
+      const handleMenuAction = (gid: string) => {
+        if (isArchivedSection) {
+          onRestoreGroup(gid);
+          return;
+        }
+        setArchivedOpen(true);
+        onArchiveGroup(gid);
+      };
+
+      if (!isCollapsed && !readOnly && sortableReady) {
+        return (
+          <Suspense fallback={
+            <div className="space-y-1">
               {groups.map((g) => {
                 const gid = String(g.group_id || "");
-                const active = gid === selectedGroupId;
                 return (
-                  <SortableGroupItem
+                  <GroupSidebarItem
                     key={gid}
                     group={g}
-                    isActive={active}
-                    isDark={isDark}
-                    isCollapsed={isCollapsed}
+                    isActive={gid === selectedGroupId}
+                    isCollapsed={false}
                     isArchived={isArchivedSection}
-                    dragDisabled={!!readOnly}
-                    menuActionLabel={isArchivedSection ? t("restoreGroup") : t("archiveGroup")}
+                    menuActionLabel={menuActionLabel}
                     menuAriaLabel={`${t("groupActions")} · ${g.title || gid}`}
-                    onMenuAction={
-                      isCollapsed
-                        ? undefined
-                        : isArchivedSection
-                          ? () => onRestoreGroup(gid)
-                          : () => {
-                              setArchivedOpen(true);
-                              onArchiveGroup(gid);
-                            }
-                    }
+                    onMenuAction={() => handleMenuAction(gid)}
                     onSelect={() => {
                       onSelectGroup(gid);
                       if (window.matchMedia("(max-width: 767px)").matches) onClose();
                     }}
-                    onWarm={active ? undefined : () => onWarmGroup?.(gid)}
+                    onWarm={gid === selectedGroupId ? undefined : () => onWarmGroup?.(gid)}
                   />
                 );
               })}
             </div>
-          </SortableContext>
-        </DndContext>
+          }>
+            <GroupSidebarSortableList
+              groups={groups}
+              section={section}
+              selectedGroupId={selectedGroupId}
+              isDark={isDark}
+              isCollapsed={false}
+              readOnly={readOnly}
+              menuActionLabel={menuActionLabel}
+              menuAriaLabel={t("groupActions")}
+              onMenuAction={handleMenuAction}
+              onReorderSection={onReorderSection}
+              onSelectGroup={onSelectGroup}
+              onWarmGroup={onWarmGroup}
+              onClose={onClose}
+            />
+          </Suspense>
+        );
+      }
+
+      return (
+        <div className={classNames(isCollapsed ? "flex flex-col items-center gap-2" : "space-y-1")}>
+          {groups.map((g) => {
+            const gid = String(g.group_id || "");
+            return (
+              <GroupSidebarItem
+                key={gid}
+                group={g}
+                isActive={gid === selectedGroupId}
+                isCollapsed={isCollapsed}
+                isArchived={isArchivedSection}
+                menuActionLabel={isCollapsed ? undefined : menuActionLabel}
+                menuAriaLabel={isCollapsed ? undefined : `${t("groupActions")} · ${g.title || gid}`}
+                onMenuAction={isCollapsed ? undefined : () => handleMenuAction(gid)}
+                onSelect={() => {
+                  onSelectGroup(gid);
+                  if (window.matchMedia("(max-width: 767px)").matches) onClose();
+                }}
+                onWarm={gid === selectedGroupId ? undefined : () => onWarmGroup?.(gid)}
+              />
+            );
+          })}
+        </div>
       );
     },
-    [handleDragEnd, isCollapsed, isDark, onArchiveGroup, onClose, onRestoreGroup, onSelectGroup, onWarmGroup, readOnly, selectedGroupId, sensors, t]
+    [isCollapsed, isDark, onArchiveGroup, onClose, onReorderSection, onRestoreGroup, onSelectGroup, onWarmGroup, readOnly, selectedGroupId, sortableReady, t]
   );
 
   return (
     <>
       <aside
         className={classNames(
-          "h-full flex flex-col glass-sidebar",
-          "fixed md:relative z-40",
+          "h-full min-h-0 flex flex-col glass-sidebar",
+          "fixed inset-y-0 left-0 md:relative md:inset-auto z-40",
           isResizing ? "transition-none" : "transition-[width,transform] duration-300 ease-out",
           isCollapsed ? "w-[60px]" : "w-[280px] md:w-[var(--sidebar-width)]",
           isOpen ? "translate-x-0" : "-translate-x-full",
@@ -335,7 +354,7 @@ export function GroupSidebar({
 
         {/* Group list */}
         <div className={classNames(
-          "flex-1 overflow-auto",
+          "min-h-0 flex-1 overflow-auto scrollbar-hide",
           isCollapsed ? "p-2" : "p-3"
         )}>
           {!isCollapsed && (