@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/story/detail/story-detail-toolbar/children.tsx

@@ -16,6 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import * as React from "react";
+import { usePanelFrozenGroups } from "./use-panel-frozen-groups";
 import {
   Plus,
   ChevronDown,
@@ -50,6 +51,11 @@ import type { RelationsData, StoryListItem, UserBrief } from "../../types";
 import type { StoryPatch } from "../../display/group-fields";
 import { m } from "@/paraglide/messages.js";
 import { toastError } from "@/lib/toast-error";
+import {
+  useStoryPanelOpen,
+  useStoryPanelGroupCollapsed,
+  useStoryPanelFilters,
+} from "@/lib/hooks/use-story-panel-open";
 
 export interface StoryDetailChildrenButtonProps {
   onAction: (action: "create" | "select") => void;
@@ -80,10 +86,10 @@ export function StoryDetailChildrenButton({ onAction }: StoryDetailChildrenButto
               <ChevronDown className="size-3 text-muted-foreground" />
             </DropdownMenuTrigger>
           <DropdownMenuContent align="start" className="w-36">
-            <DropdownMenuItem onSelect={() => onAction("create")}>
+            <DropdownMenuItem onClick={() => onAction("create")}>
               <Plus className="mr-2 size-4" />{m.story_children_createChild()}
             </DropdownMenuItem>
-            <DropdownMenuItem onSelect={() => onAction("select")}>
+            <DropdownMenuItem onClick={() => onAction("select")}>
               <SquareDashedMousePointer className="mr-2 size-4" />{m.story_children_selectChild()}
             </DropdownMenuItem>
           </DropdownMenuContent>
@@ -100,10 +106,10 @@ function ChildrenActionDropdown({ onAction }: { onAction: (action: "create" | "s
           <Plus className="size-3.5" />
         </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-36">
-        <DropdownMenuItem onSelect={() => onAction("create")}>
+        <DropdownMenuItem onClick={() => onAction("create")}>
           <Plus className="mr-2 size-4" />{m.story_children_createChild()}
         </DropdownMenuItem>
-        <DropdownMenuItem onSelect={() => onAction("select")}>
+        <DropdownMenuItem onClick={() => onAction("select")}>
           <SquareDashedMousePointer className="mr-2 size-4" />{m.story_children_selectChild()}
         </DropdownMenuItem>
       </DropdownMenuContent>
@@ -123,10 +129,11 @@ export function StoryDetailChildrenPanel({
   onAction,
   onNavigateInPanel,
 }: StoryDetailChildrenPanelProps) {
+  const [panelOpen, setPanelOpen] = useStoryPanelOpen(storyId, "children");
   const childrenList = data.children as StoryListItem[];
   const [selectedIds, setSelectedIds] = React.useState<Set<string>>(() => new Set());
   const [busy, setBusy] = React.useState(false);
-  const [filters, setFilters] = React.useState<DisplayOptions>(() => ({
+  const [filters, setFilters] = useStoryPanelFilters<DisplayOptions>(storyId, "children", {
     groupBy: "none",
     subGroupBy: "none",
     orderBy: "created",
@@ -135,8 +142,8 @@ export function StoryDetailChildrenPanel({
     showEmptyGroups: false,
     showSubItems: false,
     pageSize: 100,
-  }));
-  const [collapsed, setCollapsed] = React.useState<Record<string, boolean>>({});
+  });
+  const [collapsed, setCollapsed] = useStoryPanelGroupCollapsed(storyId, "children");
 
   const groups = useGroupedStories({
     stories: childrenList,
@@ -151,6 +158,11 @@ export function StoryDetailChildrenPanel({
     [childrenList, selectedIds],
   );
 
+  // ── 冻结组头（复刻需求列表 StoryList 机制）：滚动容器 + 滚动容器外冻结层 ──
+  // 冻结组头（本文件是权威实现，依赖/测试用例/关联 BUG 三个详情面板共用同一 hook）
+  const { scrollRef, scrollbarW, frozenGroupKey, frozenSubGroupKey, registerHeader, onScroll } =
+    usePanelFrozenGroups();
+
   const canArchive = React.useMemo(
     () => selectedStories.some((s) => s.state === "done" || s.state === "cancelled"),
     [selectedStories],
@@ -296,6 +308,15 @@ export function StoryDetailChildrenPanel({
 
   const showSelect = selectedIds.size > 0;
 
+  const frozenGroup =
+    frozenGroupKey != null ? groups.find((x) => x.key === frozenGroupKey) : undefined;
+  const frozenSubGroup =
+    frozenGroupKey == null || frozenSubGroupKey == null
+      ? undefined
+      : groups
+          .find((g) => g.key === frozenGroupKey)
+          ?.subGroups?.find((x) => `${frozenGroupKey}/${x.key}` === frozenSubGroupKey);
+
   const toggleCollapse = (key: string) => {
     setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
   };
@@ -310,28 +331,29 @@ export function StoryDetailChildrenPanel({
 
   return (
     <>
-      <Collapsible defaultOpen>
-        <CollapsibleTrigger render={<div role="button"
+      <Collapsible open={panelOpen} onOpenChange={setPanelOpen}>
+        <CollapsibleTrigger nativeButton={false} render={<div role="button"
             tabIndex={0}
             onKeyDown={(e) => {
               if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
                 (e.currentTarget as HTMLDivElement).click();
               }
-            }} />} className="group flex w-full cursor-pointer select-none items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors">
+            }} />} className="group sticky top-0 z-20 flex w-full cursor-pointer select-none items-center gap-2 bg-[var(--detail-surface,var(--background))] pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors">
             <div className="flex items-center gap-1.5">
               <span>{m.story_children_childStories()}</span>
               <span className="inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
                 {childrenList.length}
               </span>
-              <ChevronDown className="size-3 text-muted-foreground transition-transform group-data-[state=open]:rotate-0 group-data-[state=closed]:-rotate-90" />
+              {/* Base UI Trigger 暴露 data-panel-open（非 Radix 的 data-state），折叠时 -rotate-90 转向右 */}
+              <ChevronDown className="size-3 text-muted-foreground transition-transform -rotate-90 group-data-[panel-open]:rotate-0" />
             </div>
             <div className="flex items-center gap-1 ml-auto" onClick={(e) => e.stopPropagation()}>
               <Popover>
                 <PopoverTrigger render={<Button variant="ghost" size="sm" className="size-7 p-0" />}>
                     <ChartNoAxesGantt className="size-3.5" />
                   </PopoverTrigger>
-                <PopoverContent align="end" className="w-75 p-0">
+                <PopoverContent align="end" className="w-75 p-0 duration-0 data-open:animate-none">
                   <div className="max-h-[60vh] overflow-y-auto">
                     <DisplayOptionsBody
                       filters={filters}
@@ -345,175 +367,233 @@ export function StoryDetailChildrenPanel({
               <ChildrenActionDropdown onAction={onAction} />
             </div>
           </CollapsibleTrigger>
-        <CollapsibleContent className="pb-2">
-          <div className="flex flex-col gap-0 border rounded-lg overflow-hidden">
-            {groups.map((group) => {
-              const isCollapsed = collapsed[group.key] ?? false;
-              const groupIds = group.items.map((s) => s.id);
-              const groupCheckState = computeGroupCheckState(groupIds);
-
-              return (
-                <React.Fragment key={group.key}>
-            <div style={{ height: 36 }}>
-              <VirtualGroupHeader
-                node={group}
-                depth={0}
-                collapsed={isCollapsed}
-                collapseKey={group.key}
-                onToggle={toggleCollapse}
-                selectState={groupCheckState}
-                onToggleSelect={() => toggleGroup(groupIds)}
-                showSelect={showSelect}
-                showRoleLabel={false}
-                groupDimension={filters.groupBy}
-              />
-            </div>
-            {!isCollapsed && (
-              <React.Fragment>
-                {group.subGroups && group.subGroups.length > 0 ? (
-                  group.subGroups.map((subGroup) => {
-                    const subCollapsed = collapsed[`${group.key}/${subGroup.key}`] ?? false;
-                    const subGroupIds = subGroup.items.map((s) => s.id);
-                    const subCheckState = computeGroupCheckState(subGroupIds);
-                    return (
-                      <React.Fragment key={subGroup.key}>
-                        <div style={{ height: 36 }}>
+        <CollapsibleContent className="pb-2" keepMounted>
+          {/* 完全复刻需求列表（StoryList）结构：双向滚动容器 + 滚动容器外的冻结组头层。
+              数据行 min-w 撑出横向滚动；冻结层 absolute 覆盖滚动层可视顶（与原位
+              活跃组头同位重叠渲染，视觉单份）、不随横滚（天然不透行直角）。
+              活跃组头由滚动位置派生（组头行 ref offsetTop 比对）。 */}
+          <div className="relative flex max-h-[60vh] flex-col overflow-clip rounded-lg border">
+            <div ref={scrollRef} className="relative min-h-0 flex-1 overflow-auto" onScroll={onScroll}>
+              <div className="min-w-[44rem]">
+                {groups.map((group) => {
+                  const isCollapsed = collapsed[group.key] ?? false;
+                  const groupIds = group.items.map((s) => s.id);
+                  const groupCheckState = computeGroupCheckState(groupIds);
+                  return (
+                    <React.Fragment key={group.key}>
+                      <div
+                        style={{ height: 36 }}
+                        className="bg-[color-mix(in_oklch,var(--muted)_50%,var(--card)_50%)]"
+                        ref={registerHeader(group.key, 0)}
+                      >
+                        {/* 内容层 sticky left-0：横滚时钉在可视左缘；wrapper 同款实色
+                            垫底随横滚（纯色视觉不变），组头带全宽同色 */}
+                        <div className="sticky left-0 h-full w-fit">
                           <VirtualGroupHeader
-                            node={subGroup}
-                            depth={1}
-                            collapsed={subCollapsed}
-                            collapseKey={`${group.key}/${subGroup.key}`}
+                            node={group}
+                            depth={0}
+                            collapsed={isCollapsed}
+                            collapseKey={group.key}
                             onToggle={toggleCollapse}
-                            selectState={subCheckState}
-                            onToggleSelect={() => toggleGroup(subGroupIds)}
+                            selectState={groupCheckState}
+                            onToggleSelect={() => toggleGroup(groupIds)}
                             showSelect={showSelect}
-                            showRoleLabel={filters.subGroupBy === "assignee" || filters.subGroupBy === "createdBy"}
-                            groupDimension={filters.subGroupBy}
+                            showRoleLabel={false}
+                            groupDimension={filters.groupBy}
+                            sticky
                           />
                         </div>
-                        {!subCollapsed &&
-                          subGroup.items.map((story) => (
-                            <StoryRefRow
-                              key={story.id}
-                              story={story}
-                              users={users ?? []}
-                              labels={labels ?? []}
-                              parentProjectId={projectId}
-                              projects={projects ?? []}
-                              selected={selectedIds.has(story.id)}
-                              properties={filters.properties}
-                              onToggle={toggleStory}
-                              onOpenStory={handleOpenStory}
-                              onRemove={handleRemoveChild}
-                              removeMenuLabel={m.story_children_removeChild()}
-                              onStoryRefresh={(storyId, patch) => {
-                                if (patch.deleted) {
-                                  onRefresh((prev) => ({
-                                    ...prev,
-                                    hierarchy: {
-                                      ...prev.hierarchy,
-                                      children: prev.hierarchy.children.filter((c) => c.id !== storyId),
-                                      hasChildren: prev.hierarchy.children.length > 1,
-                                    },
-                                  }));
-                                  if (selectedIds.has(storyId)) {
-                                    setSelectedIds((prev) => {
-                                      const next = new Set(prev);
-                                      next.delete(storyId);
-                                      return next;
-                                    });
+                      </div>
+                      {!isCollapsed && (
+                        <React.Fragment>
+                          {group.subGroups && group.subGroups.length > 0 ? (
+                            group.subGroups.map((subGroup) => {
+                              const subCollapsed = collapsed[`${group.key}/${subGroup.key}`] ?? false;
+                              const subGroupIds = subGroup.items.map((s) => s.id);
+                              const subCheckState = computeGroupCheckState(subGroupIds);
+                              return (
+                                <React.Fragment key={subGroup.key}>
+                                  <div
+                                    style={{ height: 36 }}
+                                    className="bg-[color-mix(in_oklch,var(--muted)_35%,var(--card)_65%)]"
+                                    ref={registerHeader(`${group.key}/${subGroup.key}`, 1)}
+                                  >
+                                    <div className="sticky left-0 h-full w-fit">
+                                      <VirtualGroupHeader
+                                        node={subGroup}
+                                        depth={1}
+                                        collapsed={subCollapsed}
+                                        collapseKey={`${group.key}/${subGroup.key}`}
+                                        onToggle={toggleCollapse}
+                                        selectState={subCheckState}
+                                        onToggleSelect={() => toggleGroup(subGroupIds)}
+                                        showSelect={showSelect}
+                                        showRoleLabel={filters.subGroupBy === "assignee" || filters.subGroupBy === "createdBy"}
+                                        groupDimension={filters.subGroupBy}
+                                        sticky
+                                      />
+                                    </div>
+                                  </div>
+                                  {!subCollapsed &&
+                                    subGroup.items.map((story) => (
+                                      <StoryRefRow
+                                        key={story.id}
+                                        story={story}
+                                        users={users ?? []}
+                                        labels={labels ?? []}
+                                        parentProjectId={projectId}
+                                        projects={projects ?? []}
+                                        selected={selectedIds.has(story.id)}
+                                        properties={filters.properties}
+                                        onToggle={toggleStory}
+                                        onOpenStory={handleOpenStory}
+                                        onRemove={handleRemoveChild}
+                                        removeMenuLabel={m.story_children_removeChild()}
+                                        onStoryRefresh={(storyId, patch) => {
+                                          if (patch.deleted) {
+                                            onRefresh((prev) => ({
+                                              ...prev,
+                                              hierarchy: {
+                                                ...prev.hierarchy,
+                                                children: prev.hierarchy.children.filter((c) => c.id !== storyId),
+                                                hasChildren: prev.hierarchy.children.length > 1,
+                                              },
+                                            }));
+                                            if (selectedIds.has(storyId)) {
+                                              setSelectedIds((prev) => {
+                                                const next = new Set(prev);
+                                                next.delete(storyId);
+                                                return next;
+                                              });
+                                            }
+                                          } else {
+                                            onRefresh((prev) => ({
+                                              ...prev,
+                                              hierarchy: {
+                                                ...prev.hierarchy,
+                                                children: prev.hierarchy.children.map((c) => c.id === storyId ? { ...c, ...patch } : c),
+                                              },
+                                            }));
+                                            refreshChildren();
+                                          }
+                                        }}
+                                      />
+                                    ))}
+                                </React.Fragment>
+                              );
+                            })
+                          ) : (
+                            group.items.map((story) => (
+                              <StoryRefRow
+                                key={story.id}
+                                story={story}
+                                users={users ?? []}
+                                labels={labels ?? []}
+                                parentProjectId={projectId}
+                                projects={projects ?? []}
+                                selected={selectedIds.has(story.id)}
+                                properties={filters.properties}
+                                onToggle={toggleStory}
+                                onOpenStory={handleOpenStory}
+                                onRemove={handleRemoveChild}
+                                removeMenuLabel={m.story_children_removeChild()}
+                                onStoryRefresh={(storyId, patch) => {
+                                  if (patch.deleted) {
+                                    onRefresh((prev) => ({
+                                      ...prev,
+                                      hierarchy: {
+                                        ...prev.hierarchy,
+                                        children: prev.hierarchy.children.filter((c) => c.id !== storyId),
+                                        hasChildren: prev.hierarchy.children.length > 1,
+                                      },
+                                    }));
+                                    if (selectedIds.has(storyId)) {
+                                      setSelectedIds((prev) => {
+                                        const next = new Set(prev);
+                                        next.delete(storyId);
+                                        return next;
+                                      });
+                                    }
+                                  } else {
+                                    onRefresh((prev) => ({
+                                      ...prev,
+                                      hierarchy: {
+                                        ...prev.hierarchy,
+                                        children: prev.hierarchy.children.map((c) => c.id === storyId ? { ...c, ...patch } : c),
+                                      },
+                                    }));
+                                    refreshChildren();
                                   }
-                                } else {
-                                  onRefresh((prev) => ({
-                                    ...prev,
-                                    hierarchy: {
-                                      ...prev.hierarchy,
-                                      children: prev.hierarchy.children.map((c) => c.id === storyId ? { ...c, ...patch } : c),
-                                    },
-                                  }));
-                                  refreshChildren();
-                                }
-                              }}
-                            />
-                          ))}
-                      </React.Fragment>
-                    );
-                  })
-                ) : (
-                  group.items.map((story) => (
-                    <StoryRefRow
-                      key={story.id}
-                      story={story}
-                      users={users ?? []}
-                      labels={labels ?? []}
-                      parentProjectId={projectId}
-                      projects={projects ?? []}
-                      selected={selectedIds.has(story.id)}
-                      properties={filters.properties}
-                      onToggle={toggleStory}
-                      onOpenStory={handleOpenStory}
-                      onRemove={handleRemoveChild}
-                      removeMenuLabel={m.story_children_removeChild()}
-                      onStoryRefresh={(storyId, patch) => {
-                        if (patch.deleted) {
-                          onRefresh((prev) => ({
-                            ...prev,
-                            hierarchy: {
-                              ...prev.hierarchy,
-                              children: prev.hierarchy.children.filter((c) => c.id !== storyId),
-                              hasChildren: prev.hierarchy.children.length > 1,
-                            },
-                          }));
-                          if (selectedIds.has(storyId)) {
-                            setSelectedIds((prev) => {
-                              const next = new Set(prev);
-                              next.delete(storyId);
-                              return next;
-                            });
-                          }
-                        } else {
-                          onRefresh((prev) => ({
-                            ...prev,
-                            hierarchy: {
-                              ...prev.hierarchy,
-                              children: prev.hierarchy.children.map((c) => c.id === storyId ? { ...c, ...patch } : c),
-                            },
-                          }));
-                          refreshChildren();
-                        }
-                      }}
-                    />
-                  ))
-                )}
-              </React.Fragment>
+                                }}
+                              />
+                            ))
+                          )}
+                        </React.Fragment>
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+              </div>
+            </div>
+            {/* 冻结组头层：absolute 覆盖滚动层可视顶（容器顶=滚动层可视顶），
+                与原位活跃组头同位重叠渲染，视觉单份；容器外不随横滚、页面纵滚
+                时随容器走（sticky 会相对页面滚动口吸附导致与滚动层脱钩错位） */}
+            {frozenGroup != null && (
+              <div className="absolute z-10 overflow-hidden" style={{ top: 0, left: 0, right: scrollbarW, height: 36 }}>
+                <VirtualGroupHeader
+                  node={frozenGroup}
+                  depth={0}
+                  collapsed={collapsed[frozenGroup.key] ?? false}
+                  collapseKey={frozenGroup.key}
+                  onToggle={toggleCollapse}
+                  selectState={computeGroupCheckState(frozenGroup.items.map((s) => s.id))}
+                  onToggleSelect={() => toggleGroup(frozenGroup.items.map((s) => s.id))}
+                  showSelect={showSelect}
+                  showRoleLabel={false}
+                  groupDimension={filters.groupBy}
+                  sticky
+                />
+              </div>
+            )}
+            {frozenGroup != null && frozenSubGroup != null && (
+              <div className="absolute z-10 overflow-hidden" style={{ top: 36, left: 0, right: scrollbarW, height: 36 }}>
+                <VirtualGroupHeader
+                  node={frozenSubGroup}
+                  depth={1}
+                  collapsed={collapsed[`${frozenGroup.key}/${frozenSubGroup.key}`] ?? false}
+                  collapseKey={`${frozenGroup.key}/${frozenSubGroup.key}`}
+                  onToggle={toggleCollapse}
+                  selectState={computeGroupCheckState(frozenSubGroup.items.map((s) => s.id))}
+                  onToggleSelect={() => toggleGroup(frozenSubGroup.items.map((s) => s.id))}
+                  showSelect={showSelect}
+                  showRoleLabel={filters.subGroupBy === "assignee" || filters.subGroupBy === "createdBy"}
+                  groupDimension={filters.subGroupBy}
+                  sticky
+                />
+              </div>
             )}
-                </React.Fragment>
-              );
-            })}
-            <span className="-ml-1">
-<BatchToolbar
-                 selectedCount={selectedIds.size}
-                 totalLoaded={childrenList.length}
-                 allSelected={allSelected}
-                 canArchive={canArchive}
-                 canMove={false}
-                 canMoveUp={false}
-                 canMoveDown={false}
-                 busy={busy}
-                 users={users ?? []}
-                 labels={labels ?? []}
-                 projects={projects ?? []}
-                 stories={selectedStories}
-                 onToggleAll={toggleAll}
-                 onMoveUp={() => {}}
-                 onMoveDown={() => {}}
-                 onArchive={handleBulkArchive}
-                 onDelete={handleBulkDelete}
-                 onBulkUpdate={handleBulkUpdate}
-                 onClearSelection={clearSelection}
-                 onTransfer={handleTransfer}
-               />
-            </span>
+            <BatchToolbar
+              selectedCount={selectedIds.size}
+              totalLoaded={childrenList.length}
+              allSelected={allSelected}
+              canArchive={canArchive}
+              canMove={false}
+              canMoveUp={false}
+              canMoveDown={false}
+              busy={busy}
+              users={users ?? []}
+              labels={labels ?? []}
+              projects={projects ?? []}
+              stories={selectedStories}
+              onToggleAll={toggleAll}
+              onMoveUp={() => {}}
+              onMoveDown={() => {}}
+              onArchive={handleBulkArchive}
+              onDelete={handleBulkDelete}
+              onBulkUpdate={handleBulkUpdate}
+              onClearSelection={clearSelection}
+              onTransfer={handleTransfer}
+            />
           </div>
         </CollapsibleContent>
       </Collapsible>