@zaclinley/dsh-mailharbor 0.21.0 → 0.22.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.22.0
+
+### Minor Changes
+
+- 696333f: Virtualized conversation list.
+
+  - The grouped list renders only the visible window (plus a 600px overscan)
+    once there are more than 30 groups, using cumulative height estimates and
+    top/bottom spacers.
+  - Scrolling near the bottom loads the next 40 messages automatically while
+    preserving the scroll position; the manual 加载更多 button remains.
+  - Expanded conversations are measured into the virtual height so they do not
+    overlap the following groups.
+
 ## 0.21.0
 
 ### Minor Changes

package/lib/client.js

@@ -2758,6 +2758,10 @@ function MailPanel() {
   const [selectedKeys, setSelectedKeys] = (0, import_react9.useState)([]);
   const searchRef = (0, import_react9.useRef)(null);
   const threadCache = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
+  const rowsRef = (0, import_react9.useRef)(null);
+  const autoLoadRef = (0, import_react9.useRef)(0);
+  const [listScroll, setListScroll] = (0, import_react9.useState)(0);
+  const [listViewport, setListViewport] = (0, import_react9.useState)(800);
   const [projectOptions, setProjectOptions] = (0, import_react9.useState)([]);
   const [targetProject, setTargetProject] = (0, import_react9.useState)("");
   const [extraction, setExtraction] = (0, import_react9.useState)(null);
@@ -3144,6 +3148,10 @@ ${projectPicker.subject}`,
     setAiInfo(null);
     setSearch("");
   }, [accountScope, source]);
+  (0, import_react9.useEffect)(() => {
+    if (rowsRef.current !== null) rowsRef.current.scrollTop = 0;
+    setListScroll(0);
+  }, [accountScope, mailbox, search, unreadOnly, fromFilter, sinceFilter, beforeFilter, attachmentOnly]);
   (0, import_react9.useEffect)(() => {
     if (selected === null) {
       setThreadItems([]);
@@ -3686,6 +3694,28 @@ ${projectPicker.subject}`,
   };
   const isSent = isSentFolder(mailbox);
   const groups = groupMessages(items);
+  const virtualEnabled = !selectMode && !showingDrafts && groups.length > 30;
+  const offsets = [];
+  let virtualTotal = 0;
+  for (const group of groups) {
+    offsets.push(virtualTotal);
+    const expanded = expandedGroups.includes(group.key);
+    virtualTotal += 64 + (expanded ? Math.max(0, group.items.length - 1) * 64 : 0);
+  }
+  let virtualStart = 0;
+  let virtualEnd = groups.length;
+  if (virtualEnabled) {
+    const top = Math.max(0, listScroll - 600);
+    const bottom = listScroll + listViewport + 600;
+    virtualStart = 0;
+    while (virtualStart < groups.length && (offsets[virtualStart] ?? 0) < top) virtualStart += 1;
+    virtualEnd = virtualStart;
+    while (virtualEnd < groups.length && (offsets[virtualEnd] ?? 0) < bottom) virtualEnd += 1;
+    virtualStart = Math.max(0, virtualStart - 3);
+    virtualEnd = Math.min(groups.length, virtualEnd + 3);
+  }
+  const topSpacer = virtualEnabled ? offsets[virtualStart] ?? 0 : 0;
+  const bottomSpacer = virtualEnabled ? virtualTotal - (offsets[virtualEnd] ?? virtualTotal) : 0;
   const renderMessage = (item, meta = {}) => {
     const sent = isSent && item.to.length > 0;
     const first = sent ? item.to[0] : item.from;
@@ -3758,6 +3788,21 @@ ${projectPicker.subject}`,
       item.snippet === "" ? null : (0, import_react9.createElement)("span", { className: "snippet" }, highlight(item.snippet, aiInfo?.keywords[0] ?? search))
     );
   };
+  const renderGroup = (group) => {
+    const latest = group.items[0];
+    if (latest === void 0) return null;
+    const expanded = expandedGroups.includes(group.key);
+    return (0, import_react9.createElement)(
+      "div",
+      { className: "mailharbor-thread", key: group.key },
+      renderMessage(latest, {
+        groupCount: group.items.length,
+        groupKey: group.key,
+        expanded
+      }),
+      expanded ? group.items.slice(1).map((item) => renderMessage(item, { compact: true })) : null
+    );
+  };
   return (0, import_react9.createElement)(
     "div",
     { className: narrow ? "mailharbor mailharbor-narrow" : "mailharbor" },
@@ -4283,7 +4328,20 @@ ${projectPicker.subject}`,
         ) : null,
         (0, import_react9.createElement)(
           "div",
-          { className: "mailharbor-rows" },
+          {
+            className: "mailharbor-rows",
+            ref: rowsRef,
+            onScroll: (event) => {
+              const target = event.currentTarget;
+              setListScroll(target.scrollTop);
+              setListViewport(target.clientHeight);
+              const now = Date.now();
+              if (now - autoLoadRef.current > 800 && target.scrollTop + target.clientHeight > target.scrollHeight - 220 && page.total > items.length && !loading && aiInfo === null) {
+                autoLoadRef.current = now;
+                setLimit((current) => current + 40);
+              }
+            }
+          },
           loading && items.length === 0 && drafts.length === 0 ? (0, import_react9.createElement)("div", { className: "mailharbor-empty" }, "\u6B63\u5728\u8BFB\u53D6\u2026") : showingDrafts ? drafts.length === 0 ? (0, import_react9.createElement)(
             "div",
             { className: "mailharbor-empty" },
@@ -4376,21 +4434,17 @@ ${projectPicker.subject}`,
               },
               "\u6E05\u9664\u641C\u7D22"
             ) : null
-          ) : selectMode ? items.map((item) => renderMessage(item)) : groups.map((group) => {
-            const latest = group.items[0];
-            if (latest === void 0) return null;
-            const expanded = expandedGroups.includes(group.key);
-            return (0, import_react9.createElement)(
-              "div",
-              { className: "mailharbor-thread", key: group.key },
-              renderMessage(latest, {
-                groupCount: group.items.length,
-                groupKey: group.key,
-                expanded
-              }),
-              expanded ? group.items.slice(1).map((item) => renderMessage(item, { compact: true })) : null
-            );
-          })
+          ) : selectMode ? items.map((item) => renderMessage(item)) : virtualEnabled ? [
+            (0, import_react9.createElement)("div", {
+              key: "virtual-top",
+              style: { height: `${String(topSpacer)}px` }
+            }),
+            ...groups.slice(virtualStart, virtualEnd).map(renderGroup),
+            (0, import_react9.createElement)("div", {
+              key: "virtual-bottom",
+              style: { height: `${String(bottomSpacer)}px` }
+            })
+          ] : groups.map(renderGroup)
         ),
         !showingDrafts && items.length > 0 ? (0, import_react9.createElement)(
           "div",
@@ -6314,7 +6368,7 @@ function TaskEditor({
 }
 
 // src/client/index.tsx
-var VERSION = "0.21.0";
+var VERSION = "0.22.0";
 var inject = ["slots"];
 var PANEL_ID = "mailharbor";
 var TASKS_PANEL_ID = "mailharbor-tasks";