@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/story/views/story-list/batch-preview-dialog.tsx

@@ -247,7 +247,7 @@ export function BatchPreviewDialog({
 
   return (
     <Dialog open={open} onOpenChange={(v) => !busy && onOpenChange(v)}>
-      <DialogContent className="sm:max-w-260 -mt-50">
+      <DialogContent className="sm:max-w-[min(65rem,calc(100%-4rem))] max-w-[calc(100%-4rem)] flex max-h-[calc(100dvh-2rem)] [@media(min-height:64rem)]:-mt-50 flex-col overflow-hidden">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2 text-base">
             {isArchive ? (
@@ -363,7 +363,7 @@ export function BatchPreviewDialog({
             </div>
           </div>
 
-          <div className="h-[28vh] overflow-y-auto px-1">
+          <div className="h-80 min-h-24 shrink overflow-y-auto px-1">
             {filteredStories.length === 0 ? (
               <div className="flex flex-col items-center gap-2 py-12 text-center text-sm text-muted-foreground">
                 <X className="size-8 opacity-40" />
@@ -388,7 +388,7 @@ export function BatchPreviewDialog({
           </div>
         </div>
 
-        <DialogFooter className="flex items-center gap-3 justify-between">
+        <DialogFooter className="shrink-0 flex-row flex-wrap items-center gap-3 justify-between sm:justify-between">
           <div className="flex flex-1 items-center gap-2 min-w-0 ml-5">
             <div
               className="flex shrink-0 cursor-pointer items-center gap-1.5 text-sm transition-colors hover:text-primary"

package/src/components/story/views/story-list/batch-toolbar.tsx

@@ -15,9 +15,9 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { useState, type ReactElement } from "react";
-import { ArrowUp, ArrowDown, Archive, Trash2, BrushCleaning, CalendarCheck, CalendarPlus2, GitCompareArrows, Waypoints } from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
+import { useState, type ReactElement  } from "react";
+import { ArrowUp, ArrowDown, Archive, Trash2, CalendarCheck, CalendarPlus2, GitCompareArrows, Waypoints } from "lucide-react";
+import { BatchToolbarShell } from "@/components/shared-kit/list-kit/batch-toolbar-shell";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
@@ -88,40 +88,22 @@ export function BatchToolbar({
 
   if (selectedCount === 0) return null;
 
-  const checked =
-    allSelected || selectedCount === totalLoaded
-      ? true
-      : selectedCount > 0
-        ? "indeterminate"
-        : false;
-
   return (
     <>
-      <div className="flex h-10 shrink-0 items-center gap-2 border-t bg-background px-3">
-        <Checkbox
-          checked={checked === true}
-          indeterminate={checked === "indeterminate"}
-          onCheckedChange={onToggleAll}
-          aria-label={m.story_ai_selectAll()}
-        />
-        <span className="text-xs shrink-0 text-muted-foreground">{m.story_batchToolbar_selected({ count: selectedCount })}</span>
-        <Tooltip>
-          <TooltipTrigger render={<Button variant="ghost"
-              size="icon"
-              className="size-7 text-muted-foreground hover:text-foreground"
-              onClick={onClearSelection} />}>
-              <BrushCleaning className="size-4" />
-            </TooltipTrigger>
-          <TooltipContent side="top" className="text-xs">
-            {m.story_batchToolbar_clear()}
-          </TooltipContent>
-        </Tooltip>
-        <div className="mx-1 h-4 w-px bg-border" />
+      <BatchToolbarShell
+        selectedCount={selectedCount}
+        total={totalLoaded}
+        allSelected={allSelected}
+        onToggleAll={onToggleAll}
+        onClear={onClearSelection}
+        busy={busy}
+      >
+        <div className="flex shrink-0 items-center gap-2">
         {canMove && (
           <>
             <ToolbarIconButton label={m.story_batchToolbar_moveUp()} icon={ArrowUp} disabled={busy || !canMoveUp} onClick={onMoveUp} />
             <ToolbarIconButton label={m.story_batchToolbar_moveDown()} icon={ArrowDown} disabled={busy || !canMoveDown} onClick={onMoveDown} />
-            <div className="mx-1 h-4 w-px bg-border" />
+            <div className="mx-1 h-4 w-px shrink-0 bg-border" />
           </>
         )}
         <TransferStoryPopover
@@ -150,8 +132,9 @@ export function BatchToolbar({
         )}
         <ToolbarIconButton label={m.story_batchToolbar_archive()} icon={Archive} disabled={busy || !canArchive} onClick={() => setArchiveOpen(true)} />
         <ToolbarIconButton label={m.story_batchToolbar_delete()} icon={Trash2} disabled={busy} onClick={() => setDeleteOpen(true)} />
-        <div className="mx-1 h-4 w-px bg-border" />
-        <div className="flex min-w-0 items-center gap-0.5">
+        </div>
+        <div className="mx-1 h-4 w-px shrink-0 bg-border" />
+        <div className="flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto scrollbar-hide [&>*]:shrink-0">
           <StateEditor value="backlog" onChange={(v) => onBulkUpdate({ state: v })} variant="button" />
           <PriorityEditor value="none" onChange={(v) => onBulkUpdate({ priority: v })} variant="button" />
           <AssigneeEditor assignee={null} users={users} onChange={(v) => onBulkUpdate({ assigneeId: v })} variant="button" />
@@ -159,7 +142,7 @@ export function BatchToolbar({
           <DateEditor value={null} onChange={(v) => onBulkUpdate({ targetDate: v })} label={m.story_batchToolbar_dueDate()} icon={CalendarCheck} />
           <LabelsEditor labelIds={[]} labels={labels} onChange={(v) => onBulkUpdate({ labelIds: v })} variant="button" />
         </div>
-      </div>
+      </BatchToolbarShell>
 
       <BatchPreviewDialog
         mode="archive"

package/src/components/story/views/story-list/group.tsx

@@ -42,6 +42,8 @@ interface VirtualGroupHeaderProps {
   onToggle: (key: string) => void;
   onCreate?: () => void;
   sticky?: boolean;
+  /** 原位组头行使用：加号由行内独立的 sticky right-0 层渲染（钉可视右缘），此处不重复渲染 */
+  hideCreate?: boolean;
   selectState: GroupCheckState;
   onToggleSelect: () => void;
   showSelect: boolean;
@@ -49,7 +51,7 @@ interface VirtualGroupHeaderProps {
   showRoleLabel: boolean;
 }
 
-export const VirtualGroupHeader = memo(function VirtualGroupHeader({ node, depth, collapsed, collapseKey, onToggle, onCreate, sticky, selectState, onToggleSelect, showSelect, groupDimension, showRoleLabel }: VirtualGroupHeaderProps) {
+export const VirtualGroupHeader = memo(function VirtualGroupHeader({ node, depth, collapsed, collapseKey, onToggle, onCreate, sticky, hideCreate, selectState, onToggleSelect, showSelect, groupDimension, showRoleLabel }: VirtualGroupHeaderProps) {
   const textColor =
     node.color?.split(" ").find((c) => c.startsWith("text")) ?? "text-muted-foreground";
   const Icon = node.icon;
@@ -86,7 +88,7 @@ export const VirtualGroupHeader = memo(function VirtualGroupHeader({ node, depth
         )}
         <span className="text-xs text-muted-foreground">{node.totalCount ?? node.items.length}</span>
       </button>
-      {depth === 0 && onCreate && (
+      {depth === 0 && onCreate && !hideCreate && (
         <button
           type="button"
           onClick={(e) => { e.stopPropagation(); onCreate(); }}

package/src/components/story/views/story-list/index.tsx

@@ -15,8 +15,9 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { useCallback, useMemo, useRef, useState, type CSSProperties } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+import { Plus } from "lucide-react";
 import {
   createStoryFn,
   bulkArchiveStoriesFn,
@@ -29,15 +30,17 @@ import type { UserBrief } from "../../types";
 import type { StoryState, StoryPriority } from "../../constants";
 import type { DisplayOptions } from "../../display/types";
 import type { PagedGroupNode } from "../../display/use-paged-story-groups";
-import { BUTTON_ROW_HEIGHT, useFlatRows } from "../use-flat-rows";
+import { BUTTON_ROW_HEIGHT, useFlatRows } from "./use-flat-rows";
 import { VirtualGroupHeader, GroupTailRow } from "./group";
 import { StoryListRow } from "./row";
 import { BatchToolbar } from "./batch-toolbar";
+import { computeFrozenHeader, type FrozenHeader } from "@/components/shared-kit/list-kit/frozen-header";
 import { computeMove, canMove } from "./move";
 import { computeGroupCheckState, toggleGroupSelection } from "./group-select";
 import { GROUP_FIELD, toGroupFieldPatch, type GroupField, type StoryPatch } from "../../display/group-fields";
 import type { GroupKey } from "../../display/types";
 import { WavePhysicsLoader } from "@/components/shared-kit/loading/wave-physics-loader";
+import { useDeferredFlag } from "@/components/shared-kit/loading/use-deferred-flag";
 import { m } from "@/paraglide/messages.js";
 import { toastError } from "@/lib/toast-error";
 
@@ -65,6 +68,8 @@ interface StoryListProps {
 
 export function StoryList({ groups, isLoading = false, displayFilters, users, labels, projects, onRefresh, onPatchStory, onOpenStory, onCreate, onLoadMoreGroup, projectContext, projectId }: StoryListProps) {
   const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+  // 首载动画延迟显示（follow-up A）：真实等待超 400ms 才出现，快请求直接见数据/空态
+  const deferredLoading = useDeferredFlag(isLoading && groups.length === 0);
   const { groupBy, subGroupBy, properties } = displayFilters;
   const showRoleLabel =
     (groupBy === "assignee" && subGroupBy === "createdBy") ||
@@ -126,6 +131,30 @@ export function StoryList({ groups, isLoading = false, displayFilters, users, la
   }, [groupBy, subGroupBy, onRefresh, projectId]);
 
   const scrollRef = useRef<HTMLDivElement>(null);
+  // 冻结组头渲染在滚动容器外层（容器外天然不受横滚影响），位置固定（组头 top:0、
+  // 子组头 top:36），滚动时唯一变化的是「当前活跃组头索引」——仅在跨越分组边界时改变。
+  // 因此不存每帧变化的 scrollTop，只存派生结果，并用 ref 去重：组内连续滚动零 setState
+  // → 零整表重渲染，仅跨边界帧更新一次。
+  const [frozenHeader, setFrozenHeader] = useState<FrozenHeader | null>(null);
+  const frozenHeaderRef = useRef<FrozenHeader | null>(null);
+  const frozenRafRef = useRef<number | null>(null);
+  // 滚动层纵向滚动条占位宽：冻结层右缘对齐滚动层可视右缘（非卡片右缘），
+  // 否则冻结层加号比原位组头加号（sticky right-0 钉滚动条内侧）偏右一个滚动条宽。
+  // 滚动条随数据加载才出现/消失，window resize 感知不到，须观察滚动层自身尺寸
+  const [scrollbarW, setScrollbarW] = useState(0);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const measure = () => setScrollbarW(el.offsetWidth - el.clientWidth);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    window.addEventListener("resize", measure);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, []);
   const tailHeights = useRef<Record<string, number>>({});
   const setTailHeight = useCallback((key: string, h: number) => {
     tailHeights.current[key] = h;
@@ -348,6 +377,41 @@ await bulkUpdateStoriesFn({ data: { storyIds: [...selectedIds], patch } });
   const totalHeight = rowVirtualizer.getTotalSize();
   const remeasureRows = useCallback(() => rowVirtualizer.measure(), [rowVirtualizer]);
 
+  // 冻结组头派生：读取当前滚动位置算出活跃（主/子）组头，仅在结果变化时提交 state
+  const recomputeFrozenHeader = useCallback(() => {
+    frozenRafRef.current = null;
+    const el = scrollRef.current;
+    if (!el) return;
+    const next = computeFrozenHeader(
+      el.scrollTop,
+      rowVirtualizer.measurementsCache,
+      groupHeaderIndexes,
+      subGroupHeaderIndexes,
+      parentGroupOfSub,
+    );
+    const prev = frozenHeaderRef.current;
+    if (prev?.groupIdx === next?.groupIdx && prev?.subIdx === next?.subIdx) return;
+    frozenHeaderRef.current = next;
+    setFrozenHeader(next);
+  }, [rowVirtualizer, groupHeaderIndexes, subGroupHeaderIndexes, parentGroupOfSub]);
+
+  // rAF 节流：每帧最多重算一次（滚动事件可能一帧多次触发）
+  const handleScroll = useCallback(() => {
+    if (frozenRafRef.current != null) return;
+    frozenRafRef.current = requestAnimationFrame(recomputeFrozenHeader);
+  }, [recomputeFrozenHeader]);
+
+  // 挂载 / 行测量变化（totalHeight 随测量增长）时同步冻结组头，保留首屏未滚动即显示
+  useEffect(() => {
+    recomputeFrozenHeader();
+  }, [recomputeFrozenHeader, totalHeight]);
+
+  useEffect(() => {
+    return () => {
+      if (frozenRafRef.current != null) cancelAnimationFrame(frozenRafRef.current);
+    };
+  }, []);
+
   const renderVirtualRow = (virtualRow: (typeof virtualRows)[number]) => {
     const row = flatRows[virtualRow.index];
     if (!row) return null;
@@ -356,38 +420,49 @@ await bulkUpdateStoriesFn({ data: { storyIds: [...selectedIds], patch } });
       top: 0,
       left: 0,
       width: "100%",
+      minWidth: "44rem",
       transform: `translateY(${virtualRow.start}px)`,
     };
     if (row.kind === "header") {
-      const isActiveGroup = activeStickyRef.current.groupIdx === virtualRow.index;
-      const isActiveSub = activeStickyRef.current.subIdx === virtualRow.index;
-      const isSticky = isActiveGroup || isActiveSub;
-      const style: CSSProperties = isSticky
-        ? {
-            position: "sticky",
-            top: isActiveGroup ? 0 : HEADER_ROW_HEIGHT,
-            left: 0,
-            width: "100%",
-            height: HEADER_ROW_HEIGHT,
-            zIndex: isActiveGroup ? 10 : 9,
-          }
-        : { ...baseStyle, height: HEADER_ROW_HEIGHT };
+      // 组头行随内容流渲染（width 随内容 44rem）；当前活跃组头由滚动容器外的
+      // 冻结层覆盖渲染（见下方 frozen header）。内容层 sticky left-0：横滚时
+      // 钉在可视左缘；wrapper 同款实色垫底随横滚（纯色视觉不变），组头带全宽
+      // 同色。加号独立 sticky right-0 层：钉在可视右缘，与冻结层加号位置一致
+      // （VirtualGroupHeader 根是收缩容器，内嵌加号会紧跟计数而非贴右缘）。
+      const create = row.depth === 0 ? onCreateByKey.get(row.node.key) : undefined;
       return (
-        <div key={row.key} style={style} className="relative">
-          <VirtualGroupHeader
-            node={row.node}
-            depth={row.depth}
-            collapsed={row.isCollapsed}
-            collapseKey={row.key}
-            onCreate={onCreateByKey.get(row.node.key)}
-            onToggle={toggleCollapse}
-            sticky={isSticky}
-            selectState={computeGroupCheckState(groupStoryIds.get(row.key) ?? [], selectedIds)}
-            onToggleSelect={() => toggleGroup(row.key)}
-            showSelect={selectedIds.size > 0}
-            groupDimension={row.depth === 0 ? groupBy : subGroupBy}
-            showRoleLabel={showRoleLabel}
-          />
+        <div
+          key={row.key}
+          style={{ ...baseStyle, height: HEADER_ROW_HEIGHT }}
+          className={`flex ${row.depth === 0 ? "bg-[color-mix(in_oklch,var(--muted)_50%,var(--card)_50%)]" : "bg-[color-mix(in_oklch,var(--muted)_35%,var(--card)_65%)]"}`}
+        >
+          <div className="sticky left-0 h-full w-fit">
+            <VirtualGroupHeader
+              node={row.node}
+              depth={row.depth}
+              collapsed={row.isCollapsed}
+              collapseKey={row.key}
+              onCreate={create}
+              onToggle={toggleCollapse}
+              sticky
+              hideCreate
+              selectState={computeGroupCheckState(groupStoryIds.get(row.key) ?? [], selectedIds)}
+              onToggleSelect={() => toggleGroup(row.key)}
+              showSelect={selectedIds.size > 0}
+              groupDimension={row.depth === 0 ? groupBy : subGroupBy}
+              showRoleLabel={showRoleLabel}
+            />
+          </div>
+          {create && (
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); create(); }}
+              className="sticky right-1 ml-auto flex h-full w-9 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground"
+              aria-label={m.story_group_addTo({ label: row.node.label })}
+            >
+              <Plus className="size-4" />
+            </button>
+          )}
         </div>
       );
     }
@@ -438,24 +513,57 @@ await bulkUpdateStoriesFn({ data: { storyIds: [...selectedIds], patch } });
     return null;
   };
 
+  const renderFrozenHeader = (idx: number, top: number, depth: number, zIndex: number) => {
+    const row = flatRows[idx];
+    if (!row || row.kind !== "header") return null;
+    return (
+      <div
+        key={row.key}
+        className="absolute overflow-hidden"
+        style={{ top, left: 0, right: scrollbarW, zIndex, height: HEADER_ROW_HEIGHT }}
+      >
+        <VirtualGroupHeader
+          node={row.node}
+          depth={row.depth}
+          collapsed={row.isCollapsed}
+          collapseKey={row.key}
+          onCreate={onCreateByKey.get(row.node.key)}
+          onToggle={toggleCollapse}
+          sticky
+          selectState={computeGroupCheckState(groupStoryIds.get(row.key) ?? [], selectedIds)}
+          onToggleSelect={() => toggleGroup(row.key)}
+          showSelect={selectedIds.size > 0}
+          groupDimension={depth === 0 ? groupBy : subGroupBy}
+          showRoleLabel={showRoleLabel}
+        />
+      </div>
+    );
+  };
+
   return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden rounded-lg border bg-card">
-      <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto">
+    <div className="relative flex h-full min-h-0 flex-col overflow-hidden rounded-lg border bg-card">
+      <div ref={scrollRef} className="min-h-0 flex-1 overflow-auto" onScroll={handleScroll}>
         <div style={{ height: totalHeight, position: "relative" }}>
           {virtualRows.map((virtualRow) => renderVirtualRow(virtualRow))}
         </div>
-        {isLoading && groups.length === 0 && (
+        {isLoading && groups.length === 0 && deferredLoading && (
           <div className="flex flex-col items-center gap-3 py-12" aria-busy="true">
             <WavePhysicsLoader />
             <p className="text-sm text-muted-foreground">{m.story_group_loadingData()}</p>
           </div>
         )}
+      </div>
+      {frozenHeader && (
+        <>
+          {frozenHeader.subIdx != null && renderFrozenHeader(frozenHeader.subIdx, HEADER_ROW_HEIGHT, 1, 9)}
+          {renderFrozenHeader(frozenHeader.groupIdx, 0, 0, 10)}
+        </>
+      )}
         {!isLoading && groups.length === 0 && (
           <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
             {m.story_table_empty()}
           </div>
         )}
-      </div>
 <BatchToolbar
          selectedCount={selectedIds.size}
          totalLoaded={loadedStoryIds.length}

package/src/components/story/views/story-list/row.tsx

@@ -25,6 +25,7 @@ import type { StoryState, StoryPriority } from "../../constants";
 import type { DisplayProperty } from "../../display/types";
 import { PriorityEditor, StateEditor, AssigneeEditor, DateEditor, LabelsEditor } from "../../inline-editors";
 import { cn } from "@/lib/utils";
+import { EntityPresenceBadge } from "@/components/collab/entity-presence-badge";
 import type { StoryPatch } from "../../display/group-fields";
 import { m } from "@/paraglide/messages.js";
 import { toastError } from "@/lib/toast-error";
@@ -108,6 +109,9 @@ export const StoryListRow = memo(function StoryListRow({ story, group, indent, i
         <span className="min-w-0 flex-1 truncate font-medium">{story.name}</span>
       </button>
 
+      {/* 在看成员徽标（§7.1 行级 presence）：行 hover 渐显，无在看者不渲染 */}
+      <EntityPresenceBadge module="stories" route={`/stories/${story.id}`} />
+
       {properties.includes("priority") && (
         <PriorityEditor value={story.priority} onChange={setPriority} variant="button" />
       )}

package/src/components/story/views/{use-flat-rows.ts → story-list/use-flat-rows.ts}

@@ -16,8 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useMemo } from "react";
-import type { StoryListItem } from "../types";
-import type { GroupNode } from "../display/types";
+import type { StoryListItem } from "../../types";
+import type { GroupNode } from "../../display/types";
 
 /** 组尾「显示更多」/「添加需求」组合行高 */
 export const BUTTON_ROW_HEIGHT = 40;