@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/story/detail/story-detail-toolbar/related-test-cases.tsx

@@ -15,49 +15,334 @@
 // 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/>.
 
-// 需求详情「测试用例」关联区（任务 12 双向关联的 Story 侧）。复用 listTestCasesFn
-// 的 storyId 筛选拉关联用例，Collapsible 列表（标识符 + 标题 + 状态/优先级标签）行
-// 点击跳用例详情，头部条数即覆盖摘要（N 条用例，P1 只显条数）。
-// 任务 21：头部常驻「生成测试用例」入口（testcase 域 generate-dialog 反向引用——
-// 本文件本就横跨 story/testcase 两域：listTestCasesFn + filters 已是同向先例），
-// 零关联用例也渲染面板（生成入口正是空态时的主操作），仅列表区块按条数显隐。
-// 展示模式照 associated-attachments-panel 的 Collapsible 头部惯例。
-// 任务 23：需求变更过期提示条——getStoryStalenessFn 判定 story.updatedAt 晚于关联
-// 用例 max(createdAt) 时在用例列表顶部渲染警示条（amber 惯例同 plan-detail），CTA
-// 复用 GenerateTestCasesButton（presetStory + label 覆盖）直接开同一生成对话框——
-// 与头部入口是同组件双实例（各自 useFeature 门控 + 懒加载项目花名册），零状态提升。
+// 需求详情「测试用例」面板。样式与交互对齐子需求面板（story-detail-toolbar/children.tsx）：
+// Collapsible 头部（标题+计数徽章+chevron+右侧动作区）+ 分组列表（组头折叠+组级复选）
+// + 行复选多选 + 底部批量操作条（批量归档/删除/状态/优先级）。
+// 数据源：listTestCasesFn 按 storyId 拉取——AI 生成用例落库时即写 storyId
+// （generation.ts testCase.create，draft/approved 均带），手动关联用例同字段，
+// 两类天然同列表；deprecated（AI 评审拒绝留痕）前端过滤不显示。
+// 行复用 testcase 域 CaseRow（行内编辑 + 乐观 patch），分组为本地桶装
+// （children 的 useGroupedStories 绑 story 类型不可复用，口径照 GroupedList.groupKeyOf）。
 import * as React from "react";
-import { Link } from "@tanstack/react-router";
-import { AlertTriangle, ChevronDown, ListChecks } from "lucide-react";
+import { useNavigate } from "@tanstack/react-router";
+import {
+  ArrowDownNarrowWide,
+  ArrowUpWideNarrow,
+  BrushCleaning,
+  ChartNoAxesGantt,
+  Check,
+  ChevronDown,
+  Folder,
+  Plus,
+  Sparkles,
+  X,
+} from "lucide-react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { usePanelFrozenGroups } from "./use-panel-frozen-groups";
+import { ScrollHint } from "./scroll-hint";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { listTestCasesFn } from "@/server/serverFns/testcase/testcase-crud";
 import { getStoryStalenessFn } from "@/server/serverFns/testcase/stats";
+import {
+  bulkArchiveTestCasesFn,
+  bulkDeleteTestCasesFn,
+  bulkUpdateTestCasesFn,
+} from "@/server/serverFns/testcase/bulk";
+import { listFoldersFn } from "@/server/serverFns/testcase/testcase-folders";
 import type { TestCaseSummary } from "@/server/serverFns/testcase/types";
-import { GenerateTestCasesButton } from "@/components/testcase/ai/generate-dialog";
-import { priorityLabel, stateLabel } from "@/components/testcase/filters";
+import { CaseRow } from "@/components/testcase/list/case-row";
+import { priorityLabel, stateLabel, typeLabel } from "@/components/testcase/filters";
+import type { TestCaseType } from "@/server/serverFns/testcase/constants";
+import { TEST_CASE_TYPE_META } from "@/components/testcase/inline-editors/type-editor";
+import { TEST_CASE_TYPE_VALUES as TEST_CASE_TYPE_VALUES_ARR } from "@/server/serverFns/testcase/constants";
+import type { FolderNodeDto } from "@/components/testcase/folder-tree";
+import {
+  TEST_CASE_PRIORITY_VALUES,
+  TEST_CASE_STATE_VALUES,
+  type TestCasePriority,
+  type TestCaseState,
+} from "@/server/serverFns/testcase/constants";
+import { TEST_CASE_STATE_META } from "@/components/testcase/inline-editors/state-editor";
+import { TEST_CASE_PRIORITY_META } from "@/components/testcase/constants";
+import { extractTextColors } from "@/components/shared-kit/list-kit/level-badge";
+import { GenerateTestCasesDialog } from "@/components/testcase/ai/generate-dialog";
+import { SelectCasesDialog } from "@/components/testcase/detail/select-cases-dialog";
+import type { UserBrief } from "../../types";
 import { m } from "@/paraglide/messages.js";
+import { toast } from "@/components/ui/toast";
+import { toastError } from "@/lib/toast-error";
+import { cn } from "@/lib/utils";
+import {
+  useStoryPanelOpen,
+  useStoryPanelGroupCollapsed,
+  useStoryPanelFilters,
+} from "@/lib/hooks/use-story-panel-open";
 
-export function StoryDetailTestCases({ storyId, projectId }: { storyId: string; projectId: string | null }) {
+type StoryCasesGroupBy = "none" | "state" | "priority" | "folder" | "type";
+type StoryCasesSubGroupBy = "none" | "state" | "priority" | "folder" | "type" | "assignee";
+type StoryCasesOrderBy = "created" | "updated" | "priority" | "state";
+type OrderDir = "asc" | "desc";
+
+interface StoryCasesFilters {
+  groupBy: StoryCasesGroupBy;
+  subGroupBy: StoryCasesSubGroupBy;
+  orderBy: StoryCasesOrderBy;
+  orderDir: OrderDir;
+}
+
+const STORY_CASES_PRIORITY_RANK: Record<string, number> = Object.fromEntries(
+  TEST_CASE_PRIORITY_VALUES.map((p, i) => [p, i]),
+);
+const STORY_CASES_STATE_RANK: Record<string, number> = Object.fromEntries(
+  TEST_CASE_STATE_VALUES.map((s, i) => [s, i]),
+);
+
+function sortCases(
+  list: TestCaseSummary[],
+  orderBy: StoryCasesOrderBy,
+  dir: OrderDir,
+): TestCaseSummary[] {
+  const mul = dir === "asc" ? 1 : -1;
+  return [...list].sort((a, b) => {
+    let d = 0;
+    if (orderBy === "created") d = a.createdAt.localeCompare(b.createdAt);
+    else if (orderBy === "updated") d = a.updatedAt.localeCompare(b.updatedAt);
+    else if (orderBy === "priority")
+      d = (STORY_CASES_PRIORITY_RANK[a.priority] ?? 99) - (STORY_CASES_PRIORITY_RANK[b.priority] ?? 99);
+    else d = (STORY_CASES_STATE_RANK[a.state] ?? 99) - (STORY_CASES_STATE_RANK[b.state] ?? 99);
+    return d * mul;
+  });
+}
+
+function subKeyOf(subGroupBy: StoryCasesSubGroupBy, c: TestCaseSummary): string {
+  switch (subGroupBy) {
+    case "state":
+      return c.state;
+    case "priority":
+      return c.priority;
+    case "folder":
+      return c.folderId ?? "unassigned";
+    case "type":
+      return c.type;
+    case "assignee":
+      return c.assignee?.id ?? "unassigned";
+    default:
+      return "";
+  }
+}
+
+function subLabelOf(
+  subGroupBy: StoryCasesSubGroupBy,
+  key: string,
+  folders: FolderNodeDto[],
+  users: UserBrief[],
+): string {
+  switch (subGroupBy) {
+    case "state":
+      return stateLabel(key as TestCaseState);
+    case "priority":
+      return priorityLabel(key as TestCasePriority);
+    case "folder":
+      if (key === "unassigned") return m.testcase_folderTree_ungrouped();
+      return folders.find((f) => f.id === key)?.name ?? key;
+    case "type":
+      return typeLabel(key as TestCaseType);
+    case "assignee":
+      if (key === "unassigned") return m.testcase_storyCases_unassigned();
+      return users.find((u) => u.id === key)?.username ?? key;
+    default:
+      return "";
+  }
+}
+
+interface StoryCaseGroup {
+  key: string;
+  label: string;
+  items: TestCaseSummary[];
+  icon?: React.ReactNode;
+  /** 子分组桶（subGroupBy 开启且非当前分组维度时） */
+  subGroups?: { key: string; label: string; items: TestCaseSummary[] }[];
+}
+
+const REMOVE_MENU_FALLBACK = "移出";
+
+// 详情面板按 storyId 全量拉取关联用例：单页 take 取服务端上限（listTestCasesFn max=200），
+// 翻页上限为防御值（50 页 × 200 = 1 万条，远超单需求关联量级），防游标异常死循环
+const STORY_CASES_PAGE_SIZE = 200;
+const STORY_CASES_MAX_PAGES = 50;
+
+function groupIconOf(
+  groupBy: StoryCasesGroupBy,
+  key: string,
+): React.ReactNode {
+  // STATE_META.color 为完整徽章 token（含 bg-*）：icon-only 只取字色，
+  // 杜绝图标带无圆角底色块（任务 29 收编一期 Task 7 Ruling）
+  if (groupBy === "state" && key in TEST_CASE_STATE_META) {
+    const Icon = TEST_CASE_STATE_META[key as TestCaseState].icon;
+    return (
+      <Icon
+        className={cn("size-4 shrink-0", extractTextColors(TEST_CASE_STATE_META[key as TestCaseState].color))}
+      />
+    );
+  }
+  // 优先级图标/字色引 TEST_CASE_PRIORITY_META 单一来源（任务 29 收编一期 Task 8
+  // deferred 的本地 PRIORITY_ICON_COLOR + Flag 拷贝）
+  if (groupBy === "priority" && key in TEST_CASE_PRIORITY_META) {
+    const PriorityMetaIcon = TEST_CASE_PRIORITY_META[key as TestCasePriority].icon;
+    return <PriorityMetaIcon className={cn("size-4 shrink-0", TEST_CASE_PRIORITY_META[key as TestCasePriority].color)} />;
+  }
+  if (groupBy === "folder") {
+    return <Folder className="size-4 shrink-0 text-muted-foreground" />;
+  }
+  if (groupBy === "type" && key in TEST_CASE_TYPE_META) {
+    const Icon = TEST_CASE_TYPE_META[key as TestCaseType].icon;
+    return <Icon className="size-4 shrink-0 text-muted-foreground" />;
+  }
+  return undefined;
+}
+
+function groupKeyOf(groupBy: StoryCasesGroupBy, c: TestCaseSummary): string {
+  switch (groupBy) {
+    case "state":
+      return c.state;
+    case "priority":
+      return c.priority;
+    case "folder":
+      return c.folderId ?? "unassigned";
+    case "type":
+      return c.type;
+    default:
+      return "";
+  }
+}
+
+function groupLabelOf(groupBy: StoryCasesGroupBy, key: string, folders: FolderNodeDto[]): string {
+  switch (groupBy) {
+    case "state":
+      return stateLabel(key as TestCaseState);
+    case "priority":
+      return priorityLabel(key as TestCasePriority);
+    case "folder":
+      if (key === "unassigned") return m.testcase_folderTree_ungrouped();
+      return folders.find((f) => f.id === key)?.name ?? key;
+    case "type":
+      return typeLabel(key as TestCaseType);
+    default:
+      return key;
+  }
+}
+
+export function StoryDetailTestCases({
+  storyId,
+  projectId,
+  users,
+  refreshKey = 0,
+  storyUpdatedAt,
+  onOpenEntity,
+}: {
+  storyId: string;
+  projectId: string | null;
+  users?: UserBrief[];
+  /** 父级 bump（如关联弹窗提交成功）触发重拉 */
+  refreshKey?: number;
+  /** 需求最近更新时间：变化即重判 stale（编辑保存后即时刷新提示） */
+  storyUpdatedAt?: string | null;
+  /** peek 内叠加打开（传入时点击行在 peek 内打开，缺省整页跳转） */
+  onOpenEntity?: (entity: import("../../types").StoryEntityOverlay) => void;
+}) {
+  const [panelOpen, setPanelOpen] = useStoryPanelOpen(storyId, "testcases");
+  const navigate = useNavigate();
   const [cases, setCases] = React.useState<TestCaseSummary[] | null>(null);
+  const [folders, setFolders] = React.useState<FolderNodeDto[]>([]);
   const [stale, setStale] = React.useState(false);
+  const [selectedIds, setSelectedIds] = React.useState<Set<string>>(() => new Set());
+  const [busy, setBusy] = React.useState(false);
+  const [filters, setFilters] = useStoryPanelFilters<StoryCasesFilters>(storyId, "testcases", {
+    groupBy: "none",
+    subGroupBy: "none",
+    orderBy: "created",
+    orderDir: "asc",
+  });
+  const [collapsed, setCollapsed] = useStoryPanelGroupCollapsed(storyId, "testcases");
+  const [staleDialogOpen, setStaleDialogOpen] = React.useState(false);
+  // 面板头 + 按钮的关联弹窗开关；本地刷新计数（弹窗确认后重拉列表）
+  const [linkDialogOpen, setLinkDialogOpen] = React.useState(false);
+  const [localRefresh, setLocalRefresh] = React.useState(0);
+  // 用户点 X 关闭提示条后本挂载周期不再显示；stale 从无到有（重新过期）时重置
+  const [staleHintDismissed, setStaleHintDismissed] = React.useState(false);
+
+  const refresh = React.useCallback(() => {
+    if (!projectId) return;
+    let cancelled = false;
+    // 全量拉取（游标翻页）：单页 take 上限为服务端 max 200，一次请求会静默截断
+    // 关联超 50/200 条的用例（面板无「加载更多」），必须翻到 nextCursor 耗尽。
+    // 打开 peek 会突发大量 RPC（各面板/行内编辑器并发拉取），dev SSR 可能丢请求
+    // （Failed to fetch）——失败自动重试（指数退避），全部失败才放弃
+    (async () => {
+      const all: TestCaseSummary[] = [];
+      for (let attempt = 0; attempt < 3; attempt++) {
+        all.length = 0;
+        try {
+          let cursor: string | undefined;
+          for (let page = 0; page < STORY_CASES_MAX_PAGES; page++) {
+            const res: { items: TestCaseSummary[]; nextCursor: string | null } =
+              await listTestCasesFn({
+                data: {
+                  projectId,
+                  storyId,
+                  take: STORY_CASES_PAGE_SIZE,
+                  ...(cursor ? { cursor } : {}),
+                },
+              });
+            all.push(...res.items);
+            if (!res.nextCursor) break;
+            cursor = res.nextCursor;
+          }
+          break;
+        } catch {
+          if (attempt < 2) {
+            await new Promise((r) => setTimeout(r, 800 * (attempt + 1)));
+          }
+        }
+      }
+      if (cancelled) return;
+      // deprecated 是 AI 评审拒绝留痕（规格 §13 R3），不进详情面板
+      setCases(all.filter((c) => c.state !== "deprecated"));
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId, storyId]);
+
+  React.useEffect(() => {
+    const cleanup = refresh();
+    return cleanup;
+  }, [refresh, refreshKey, localRefresh]);
 
   React.useEffect(() => {
     if (!projectId) return;
     let cancelled = false;
-    listTestCasesFn({ data: { projectId, storyId, take: 50 } })
-      .then((res: { items: TestCaseSummary[] }) => {
-        if (!cancelled) setCases(res.items);
+    listFoldersFn({ data: { projectId } })
+      .then((res: { folders: FolderNodeDto[] }) => {
+        if (!cancelled) setFolders(res.folders);
       })
       .catch(() => {
-        if (!cancelled) setCases([]);
+        if (!cancelled) setFolders([]);
       });
     return () => {
       cancelled = true;
     };
-  }, [projectId, storyId]);
+  }, [projectId]);
 
-  // 过期检测（任务 23）：仅在确认有关联用例后查询（零用例无可过期对象，服务端
-  // 同口径恒 false）；cases 变化（如生成完成后刷新）时重判
+  // 过期检测（原行为保留）：仅在确认有关联用例后查询；cases 变化（生成完成/批量操作）时重判
   React.useEffect(() => {
     if (!projectId || !cases || cases.length === 0) return;
     let cancelled = false;
@@ -71,13 +356,300 @@ export function StoryDetailTestCases({ storyId, projectId }: { storyId: string;
     return () => {
       cancelled = true;
     };
-  }, [projectId, storyId, cases]);
+  }, [projectId, storyId, cases, storyUpdatedAt]);
+
+  React.useEffect(() => {
+    if (stale) setStaleHintDismissed(false);
+  }, [stale]);
+
+  const toggleCase = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const toggleGroup = (ids: string[]) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      const allChosen = ids.length > 0 && ids.every((id) => next.has(id));
+      for (const id of ids) {
+        if (allChosen) next.delete(id);
+        else next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const toggleAll = () => {
+    setSelectedIds((prev) => {
+      const all = cases ?? [];
+      return prev.size === all.length ? new Set() : new Set(all.map((c) => c.id));
+    });
+  };
+
+  const handleBulkArchive = async () => {
+    if (selectedIds.size === 0) return;
+    setBusy(true);
+    try {
+      const res = await bulkArchiveTestCasesFn({ data: { caseIds: [...selectedIds] } });
+      toast.success(m.testcase_storyCases_archivedToast({ count: res.archived }));
+      setSelectedIds(new Set());
+      refresh();
+    } catch (e) {
+      toastError(e, m.testcase_storyCases_batchFailed());
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleBulkDelete = async () => {
+    if (selectedIds.size === 0) return;
+    setBusy(true);
+    try {
+      const res = await bulkDeleteTestCasesFn({ data: { caseIds: [...selectedIds] } });
+      toast.success(m.testcase_storyCases_deletedToast({ count: res.deleted }));
+      setSelectedIds(new Set());
+      refresh();
+    } catch (e) {
+      toastError(e, m.testcase_storyCases_batchFailed());
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleBulkUpdate = async (patch: { state?: TestCaseState; priority?: TestCasePriority }) => {
+    if (selectedIds.size === 0) return;
+    setBusy(true);
+    try {
+      const res = await bulkUpdateTestCasesFn({ data: { caseIds: [...selectedIds], patch } });
+      toast.success(m.testcase_storyCases_updatedToast({ count: res.updated }));
+      refresh();
+    } catch (e) {
+      toastError(e, m.testcase_storyCases_batchFailed());
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const visibleCases = cases ?? [];
+  const groups: StoryCaseGroup[] = React.useMemo(() => {
+    const sorted = sortCases(visibleCases, filters.orderBy, filters.orderDir);
+    const bucketize = (list: TestCaseSummary[], dim: StoryCasesGroupBy | StoryCasesSubGroupBy) => {
+      const order: string[] = [];
+      const buckets = new Map<string, TestCaseSummary[]>();
+      for (const c of list) {
+        const k = dim === "none" ? "" : groupKeyOf(dim as StoryCasesGroupBy, c);
+        if (!buckets.has(k)) {
+          buckets.set(k, []);
+          order.push(k);
+        }
+        buckets.get(k)!.push(c);
+      }
+      return { order, buckets };
+    };
+    if (filters.groupBy === "none") {
+      // 不分组 → 单一「全部」组（表头照子需求 All：全选 + 折叠 + 计数）
+      const withSub = filters.subGroupBy !== "none";
+      const items = sorted;
+      const subGroups = withSub
+        ? (() => {
+            const { order, buckets } = bucketize(items, filters.subGroupBy);
+            return order.map((k) => ({
+              key: k,
+              label: subLabelOf(filters.subGroupBy, k, folders, users ?? []),
+              items: sortCases(buckets.get(k)!, filters.orderBy, filters.orderDir),
+            }));
+          })()
+        : undefined;
+      return [{ key: "all", label: m.story_group_all(), items, subGroups }];
+    }
+    const { order, buckets } = bucketize(sorted, filters.groupBy);
+    // 组头排序对齐子需求 sortGroupKeys：state/priority/type 按常量序，folder 保持首次出现序
+    const rankOf =
+      filters.groupBy === "state"
+        ? (k: string) => {
+            const i = TEST_CASE_STATE_VALUES.indexOf(k as TestCaseState);
+            return i < 0 ? 99 : i;
+          }
+        : filters.groupBy === "priority"
+          ? (k: string) => {
+              const i = TEST_CASE_PRIORITY_VALUES.indexOf(k as TestCasePriority);
+              return i < 0 ? 99 : i;
+            }
+          : filters.groupBy === "type"
+            ? (k: string) => {
+                const i = TEST_CASE_TYPE_VALUES_ARR.indexOf(k as (typeof TEST_CASE_TYPE_VALUES_ARR)[number]);
+                return i < 0 ? 99 : i;
+              }
+            : null;
+    const orderedKeys = rankOf ? [...order].sort((a, b) => rankOf(a) - rankOf(b)) : order;
+    return orderedKeys.map((k) => {
+      const items = buckets.get(k)!;
+      const useSub = filters.subGroupBy !== "none" && filters.subGroupBy !== filters.groupBy;
+      const subGroups = useSub
+        ? (() => {
+            const { order: so, buckets: sb } = bucketize(items, filters.subGroupBy);
+            return so.map((sk) => ({
+              key: sk,
+              label: subLabelOf(filters.subGroupBy, sk, folders, users ?? []),
+              items: sortCases(sb.get(sk)!, filters.orderBy, filters.orderDir),
+            }));
+          })()
+        : undefined;
+      return {
+        key: k,
+        label: groupLabelOf(filters.groupBy, k, folders),
+        items: useSub ? [] : items,
+        icon: groupIconOf(filters.groupBy, k),
+        subGroups,
+      };
+    });
+  }, [filters, visibleCases, folders, users]);
+
+  // 冻结组头（同构子需求列表 children.tsx）：滚动容器 + 滚动容器外冻结层。
+  // ⚠️ 必须在早退之前——cases 由空变非空的重渲染会改变 hook 数量（Rules of Hooks）
+  const { scrollRef, scrollbarW, frozenGroupKey, frozenSubGroupKey, registerHeader, onScroll } =
+    usePanelFrozenGroups();
+
+  if (!projectId || !cases || cases.length === 0) return null;
+
+  const allSelected = visibleCases.length > 0 && selectedIds.size === visibleCases.length;
+  const showSelect = selectedIds.size > 0;
+
+  const computeGroupCheckState = (ids: string[]): boolean | "indeterminate" => {
+    if (ids.length === 0) return false;
+    let count = 0;
+    for (const id of ids) if (selectedIds.has(id)) count++;
+    if (count === ids.length) return true;
+    return count > 0 ? "indeterminate" : false;
+  };
 
-  if (!projectId || !cases) return null;
+  const toggleCollapse = (key: string) => {
+    setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  // 主组全量条目 id：子分组开启时 items 为空数组（条目全在 subGroups 里），
+  // 原位与冻结层主组头必须用同一口径，否则子分组态主组复选框点了无反应
+  const groupItemIds = (g: (typeof groups)[number]): string[] =>
+    (g.subGroups && g.subGroups.length > 0 ? g.subGroups.flatMap((sg) => sg.items) : g.items).map(
+      (c) => c.id,
+    );
+
+  const frozenGroup =
+    frozenGroupKey != null ? groups.find((g) => g.key === frozenGroupKey) : undefined;
+  const frozenSubGroup =
+    frozenGroup == null || frozenSubGroupKey == null
+      ? undefined
+      : frozenGroup.subGroups?.find((sg) => `${frozenGroup.key}/${sg.key}` === frozenSubGroupKey);
+
+  // 组头渲染（原位与冻结层共用同一函数，保证实现一致）
+  const renderGroupHeaderEl = (
+    g: (typeof groups)[number],
+    isCollapsed: boolean,
+    checkState: boolean | "indeterminate",
+    onToggleSelect: () => void,
+  ) => (
+    <div className="flex h-full w-fit select-none items-center text-sm font-medium">
+      {showSelect && (
+        <Checkbox
+          checked={checkState === true}
+          indeterminate={checkState === "indeterminate"}
+          onCheckedChange={onToggleSelect}
+          className="ml-2 shrink-0"
+          aria-label={g.label}
+          onClick={(e) => e.stopPropagation()}
+        />
+      )}
+      <button
+        type="button"
+        className="flex h-full min-w-0 flex-1 select-none items-center gap-2 px-2 text-left hover:brightness-95"
+        onClick={() => toggleCollapse(g.key)}
+        aria-expanded={!isCollapsed}
+      >
+        {/* 图标与箭头成组（对齐 VirtualGroupHeader：icon size-4 + chevron） */}
+        <span className="flex items-center gap-1.5">
+          {g.icon}
+          <ChevronDown
+            className={`size-3 text-muted-foreground transition-transform ${isCollapsed ? "-rotate-90" : ""}`}
+          />
+        </span>
+        <span className="truncate">{g.label}</span>
+        <span className="shrink-0 text-xs text-muted-foreground">
+          {g.subGroups ? g.subGroups.length : g.items.length}
+        </span>
+      </button>
+    </div>
+  );
+  const renderSubHeaderEl = (
+    sg: { key: string; label: string; items: TestCaseSummary[] },
+    isCollapsed: boolean,
+    checkState: boolean | "indeterminate",
+    onToggleSelect: () => void,
+    collapseKey: string,
+  ) => (
+    <div className="flex h-full w-fit select-none items-center pl-6 text-xs font-medium text-muted-foreground">
+      {showSelect && (
+        <Checkbox
+          checked={checkState === true}
+          indeterminate={checkState === "indeterminate"}
+          onCheckedChange={onToggleSelect}
+          className="ml-1 shrink-0"
+          aria-label={sg.label}
+          onClick={(e) => e.stopPropagation()}
+        />
+      )}
+      <button
+        type="button"
+        className="flex h-full min-w-0 flex-1 items-center gap-2 px-2 text-left hover:brightness-95"
+        onClick={() => toggleCollapse(collapseKey)}
+        aria-expanded={!isCollapsed}
+      >
+        <ChevronDown
+          className={`size-3 text-muted-foreground transition-transform ${isCollapsed ? "-rotate-90" : ""}`}
+        />
+        <span className="truncate">{sg.label}</span>
+        <span className="shrink-0 text-xs text-muted-foreground">{sg.items.length}</span>
+      </button>
+    </div>
+  );
+
+  const handleRemoveCase = async (id: string) => {
+    try {
+      await bulkUpdateTestCasesFn({ data: { caseIds: [id], patch: { storyId: null } } });
+      toast.success(m.testcase_storyCases_removedToast());
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+      refresh();
+    } catch (e) {
+      toastError(e, m.testcase_storyCases_batchFailed());
+    }
+  };
+
+  const handleDeleteCase = async (id: string) => {
+    try {
+      await bulkDeleteTestCasesFn({ data: { caseIds: [id] } });
+      toast.success(m.testcase_storyCases_deletedToast({ count: 1 }));
+      setSelectedIds((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+      refresh();
+    } catch (e) {
+      toastError(e, m.testcase_storyCases_batchFailed());
+    }
+  };
 
   return (
-    <Collapsible defaultOpen data-testid="story-testcases-panel" className="px-6">
+    <Collapsible open={panelOpen} onOpenChange={setPanelOpen} data-testid="story-testcases-panel">
       <CollapsibleTrigger
+        nativeButton={false}
         render={
           <div
             role="button"
@@ -90,74 +662,425 @@ export function StoryDetailTestCases({ storyId, projectId }: { storyId: string;
             }}
           />
         }
-        className="group flex w-full cursor-pointer items-center gap-2 pb-3 pt-4 text-xs font-semibold transition-colors hover:text-foreground"
+        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 transition-colors hover:text-foreground"
       >
-        <div className="flex items-center gap-1.5">
-          <ListChecks className="size-3.5 text-muted-foreground" />
-          <span>{m.testcase_storyCases_title()}</span>
-          {cases.length > 0 && (
-            <span className="inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
-              {cases.length}
-            </span>
-          )}
-          <ChevronDown className="size-3 text-muted-foreground transition-transform group-data-[state=open]:rotate-0 group-data-[state=closed]:-rotate-90" />
+        <div className="flex min-w-0 shrink-0 items-center gap-1.5">
+          <span className="shrink-0 whitespace-nowrap">{m.testcase_storyCases_title()}</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">
+            {cases.length}
+          </span>
+          {/* 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>
-        <span className="ml-auto flex items-center gap-2 font-normal text-muted-foreground">
-          {cases.length > 0 && <span>{m.testcase_storyCases_summary({ count: cases.length })}</span>}
-          {/* stopPropagation：头部整行是折叠 trigger，按钮点击不切换折叠态 */}
-          <span onClick={(e) => e.stopPropagation()}>
-            <GenerateTestCasesButton
-              presetStory={{ id: storyId }}
-              projectId={projectId}
-              label={m.testcase_gen_entryButton()}
-              className="h-7 gap-1 px-2 text-xs"
+        <div className="ml-auto flex min-w-0 items-center gap-2" onClick={(e) => e.stopPropagation()}>
+          {/* stale（需求更新晚于用例）→ 常驻黄色提示条（带 X 关闭）显示在按钮左侧，无需 hover；
+              最窄宽度下提示文本自动横滚，避免挤掉标题和按钮 */}
+          {stale && !staleHintDismissed && (
+            <ScrollHint
+              dataTestId="story-testcases-stale-hint"
+              className="min-w-0 text-xs"
+              suffix={
+                <button
+                  type="button"
+                  aria-label={m.testcase_storyCases_dismissHint()}
+                  className="shrink-0 rounded-md p-0.5 text-amber-700 hover:bg-amber-500/20 dark:text-amber-400"
+                  onClick={() => setStaleHintDismissed(true)}
+                >
+                  <X className="size-3" />
+                </button>
+              }
+            >
+              {m.testcase_stats_staleMessage()}
+            </ScrollHint>
+          )}
+          {/* AI 生成测例按钮：常驻（非 stale 也可生成）；stale 时另有黄色提示条 */}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="size-7 p-0"
+            data-testid="story-testcases-ai-btn"
+            aria-label={m.testcase_storyCases_aiGenerate()}
+            onClick={() => setStaleDialogOpen(true)}
+          >
+            <Sparkles className="size-3.5" />
+          </Button>
+                      <StoryCasesDisplayPopover
+              filters={filters}
+              onChange={(patch) => setFilters((prev) => ({ ...prev, ...patch }))}
             />
-          </span>
-        </span>
+          {/* 关联测试用例（与工具栏 categories 同一弹窗） */}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="size-7 p-0"
+            data-testid="story-testcases-link-btn"
+            aria-label={m.testcase_caseLink_title()}
+            onClick={() => setLinkDialogOpen(true)}
+          >
+            <Plus className="size-3.5" />
+          </Button>
+        </div>
       </CollapsibleTrigger>
-      {cases.length > 0 && (
-        <CollapsibleContent className="pb-2">
-          {stale && (
-            <div
-              data-testid="story-testcases-stale"
-              className="mb-2 flex items-center gap-2 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-700 dark:text-amber-400"
-            >
-              <AlertTriangle className="size-3.5 shrink-0" />
-              <span className="min-w-0 flex-1">{m.testcase_stats_staleMessage()}</span>
-              {/* stopPropagation：提示条虽非 trigger 所在，惯用同头部入口防切换折叠态 */}
-              <span onClick={(e) => e.stopPropagation()}>
-                <GenerateTestCasesButton
-                  presetStory={{ id: storyId }}
-                  projectId={projectId}
-                  label={m.testcase_stats_staleAction()}
-                  className="h-6 gap-1 px-2 text-xs"
-                />
-              </span>
+      {/* keepMounted：closed 不卸载行（长列表重挂载是展开卡顿根因） */}
+      <CollapsibleContent className="pb-2" keepMounted>
+        {/* 同构子需求列表：容器框架（max-h 内滚）+ 滚动层外冻结组头层 + 批量条常驻容器底 */}
+        <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 = groupItemIds(group);
+              const checkState = computeGroupCheckState(groupIds);
+              const renderRow = (c: TestCaseSummary) => (
+                      <CaseRow
+                        key={c.id}
+                        caseItem={c}
+                        users={users ?? []}
+                        folders={folders}
+                        selected={false}
+                        onSelect={() => {}}
+                        identifierClassName="shrink-0"
+                        onOpen={(id) => {
+                          if (onOpenEntity) {
+                            const item = (cases ?? []).find((x) => x.id === id);
+                            if (item) {
+                              onOpenEntity({ kind: "case", item, folders });
+                              return;
+                            }
+                          }
+                          navigate({ to: "/test-cases/$caseId", params: { caseId: id } });
+                        }}
+                        checked={selectedIds.has(c.id)}
+                        onToggleSelect={toggleCase}
+                        onPatchCase={(id, patch) =>
+                          setCases((prev) =>
+                            (prev ?? []).map((row) => (row.id === id ? { ...row, ...patch } : row)),
+                          )
+                        }
+                        onRemove={(id) => void handleRemoveCase(id)}
+                        removeMenuLabel={m.testcase_storyCases_remove()}
+                        onDelete={(id) => void handleDeleteCase(id)}
+                        deleteMenuLabel={m.testcase_storyCases_batchDelete()}
+                      />
+              );
+              const renderSubHeader = (sg: { key: string; label: string; items: TestCaseSummary[] }) => {
+                const sgCollapsed = collapsed[`${group.key}/${sg.key}`] ?? false;
+                const sgIds = sg.items.map((c) => c.id);
+                const sgCheck = computeGroupCheckState(sgIds);
+                const header = renderSubHeaderEl(sg, sgCollapsed, sgCheck, () => toggleGroup(sgIds), `${group.key}/${sg.key}`);
+                return (
+                  <React.Fragment key={`${group.key}/${sg.key}`}>
+                    <div
+                      className="border-b border-border/40 bg-[color-mix(in_oklch,var(--muted)_30%,var(--card)_70%)]"
+                      style={{ height: 32 }}
+                      ref={registerHeader(`${group.key}/${sg.key}`, 1)}
+                    >
+                      <div className="sticky left-0 h-full w-fit">{header}</div>
+                    </div>
+                    {!sgCollapsed && sg.items.map(renderRow)}
+                  </React.Fragment>
+                );
+              };
+              const header = renderGroupHeaderEl(group, isCollapsed, checkState, () => toggleGroup(groupIds));
+              return (
+                <React.Fragment key={group.key || "all"}>
+                  <div
+                    className="border-b border-border/40 bg-[color-mix(in_oklch,var(--muted)_50%,var(--card)_50%)]"
+                    style={{ height: 36 }}
+                    ref={registerHeader(group.key, 0)}
+                  >
+                    {/* 内容层 sticky left-0：横滚钉可视左缘；wrapper 同款实色垫底随横滚（纯色视觉不变） */}
+                    <div className="sticky left-0 h-full w-fit">{header}</div>
+                  </div>
+                  {!isCollapsed &&
+                    (group.subGroups
+                      ? group.subGroups.map(renderSubHeader)
+                      : group.items.map(renderRow))}
+                </React.Fragment>
+              );
+            })}
+            </div>
+          </div>
+          {/* 冻结组头层：absolute 覆盖滚动层可视顶，与原位活跃组头同位重叠渲染（视觉单份） */}
+          {frozenGroup != null && (
+            <div className="absolute z-10 overflow-hidden border-b border-border/40 bg-[color-mix(in_oklch,var(--muted)_50%,var(--card)_50%)]" style={{ top: 0, left: 0, right: scrollbarW, height: 36 }}>
+              {renderGroupHeaderEl(
+                frozenGroup,
+                collapsed[frozenGroup.key] ?? false,
+                computeGroupCheckState(groupItemIds(frozenGroup)),
+                () => toggleGroup(groupItemIds(frozenGroup)),
+              )}
             </div>
           )}
-          <ul data-testid="story-testcases" className="flex flex-col overflow-hidden rounded-lg border">
-            {cases.map((c) => (
-              <li key={c.id}>
-                <Link
-                  to="/test-cases/$caseId"
-                  params={{ caseId: c.id }}
-                  data-testid={`story-testcase-${c.id}`}
-                  className="flex h-10 items-center gap-2 border-b border-border/40 px-3 text-sm transition-colors last:border-b-0 hover:bg-muted/40"
-                >
-                  <span className="w-24 shrink-0 font-mono text-xs text-muted-foreground">
-                    {c.identifier}
-                  </span>
-                  <span className="min-w-0 flex-1 truncate font-medium">{c.title}</span>
-                  <span className="shrink-0 text-xs text-muted-foreground">{stateLabel(c.state)}</span>
-                  <span className="shrink-0 text-xs font-medium text-muted-foreground">
-                    {priorityLabel(c.priority)}
+          {frozenGroup != null && frozenSubGroup != null && (
+            <div className="absolute z-10 overflow-hidden border-b border-border/40 bg-[color-mix(in_oklch,var(--muted)_30%,var(--card)_70%)]" style={{ top: 36, left: 0, right: scrollbarW, height: 32 }}>
+              {renderSubHeaderEl(
+                frozenSubGroup,
+                collapsed[frozenSubGroupKey ?? ""] ?? false,
+                computeGroupCheckState(frozenSubGroup.items.map((c) => c.id)),
+                () => toggleGroup(frozenSubGroup.items.map((c) => c.id)),
+                frozenSubGroupKey ?? "",
+              )}
+            </div>
+          )}
+          {selectedIds.size > 0 && (
+              <div
+                data-testid="story-testcases-batchbar"
+                className="sticky bottom-0 z-10 flex h-10 shrink-0 items-center gap-2 border-t bg-background px-3"
+              >
+                <div className="flex shrink-0 items-center gap-2">
+                  <Checkbox
+                    checked={allSelected}
+                    indeterminate={selectedIds.size > 0 && !allSelected}
+                    onCheckedChange={toggleAll}
+                    aria-label={m.testcase_storyCases_selectAll()}
+                    className="-ml-1"
+                  />
+                  <span className="shrink-0 text-sm text-muted-foreground">
+                    {m.story_batchToolbar_selected({ count: selectedIds.size })}
                   </span>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </CollapsibleContent>
-      )}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-7 text-muted-foreground hover:text-foreground"
+                    aria-label={m.story_batchToolbar_clear()}
+                    disabled={busy}
+                    onClick={() => setSelectedIds(new Set())}
+                  >
+                    <BrushCleaning className="size-4" />
+                  </Button>
+                </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" onClick={(e) => e.stopPropagation()}>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger
+                      render={
+                        <Button variant="ghost" size="sm" className="h-7 px-2 text-xs" disabled={busy} />
+                      }
+                    >
+                      {m.testcase_storyCases_setState()}
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      {TEST_CASE_STATE_VALUES.filter((s) => s !== "deprecated").map((s) => (
+                        <DropdownMenuItem key={s} onClick={() => void handleBulkUpdate({ state: s })}>
+                          {stateLabel(s)}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger
+                      render={
+                        <Button variant="ghost" size="sm" className="h-7 px-2 text-xs" disabled={busy} />
+                      }
+                    >
+                      {m.testcase_storyCases_setPriority()}
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      {TEST_CASE_PRIORITY_VALUES.map((p) => (
+                        <DropdownMenuItem key={p} onClick={() => void handleBulkUpdate({ priority: p })}>
+                          {priorityLabel(p)}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 px-2 text-xs"
+                    disabled={busy}
+                    onClick={() => void handleBulkArchive()}
+                  >
+                    {m.testcase_storyCases_batchArchive()}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 px-2 text-xs text-destructive hover:text-destructive"
+                    disabled={busy}
+                    onClick={() => void handleBulkDelete()}
+                  >
+                    {m.testcase_storyCases_batchDelete()}
+                  </Button>
+                </div>
+              </div>
+            )}
+        </div>
+      </CollapsibleContent>
+
+      {/* stale 图标按钮的生成入口：预选当前需求，完成后跳评审页 */}
+      <GenerateTestCasesDialog
+        open={staleDialogOpen}
+        onOpenChange={setStaleDialogOpen}
+        projects={[]}
+        presetStory={{ id: storyId }}
+        onCompleted={refresh}
+      />
+
+      {/* 面板头 + 按钮的关联测试用例入口：与工具栏 categories 同一弹窗，
+          确认后 diff 出关联/取消关联并刷新面板 */}
+      <SelectCasesDialog
+        open={linkDialogOpen}
+        onOpenChange={setLinkDialogOpen}
+        storyId={storyId}
+        projectId={projectId}
+        onLinked={() => setLocalRefresh((k) => k + 1)}
+      />
     </Collapsible>
   );
 }
+
+/** 筛选 POP（照子需求 DisplayOptionsBody：分组/子分组/排序三区，radio 圆点行）。
+ * open 状态内聚于此：开合只重渲染本组件，不重渲染面板长列表（卡顿根因）。 */
+function StoryCasesDisplayPopover({
+  filters,
+  onChange,
+}: {
+  filters: StoryCasesFilters;
+  onChange: (patch: Partial<StoryCasesFilters>) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const groupOptions: { value: StoryCasesGroupBy; label: string }[] = [
+    { value: "none", label: m.testcase_storyCases_group_none() },
+    { value: "state", label: m.testcase_storyCases_group_state() },
+    { value: "priority", label: m.testcase_storyCases_group_priority() },
+    { value: "folder", label: m.testcase_storyCases_group_folder() },
+    { value: "type", label: m.testcase_storyCases_group_type() },
+  ];
+  const subGroupOptions = groupOptions
+    .filter((o) => o.value !== filters.groupBy)
+    .map((o) => ({ value: o.value as StoryCasesSubGroupBy, label: o.label }));
+  const orderOptions: { value: StoryCasesOrderBy; label: string }[] = [
+    { value: "created", label: m.testcase_storyCases_order_created() },
+    { value: "updated", label: m.testcase_storyCases_order_updated() },
+    { value: "priority", label: m.testcase_storyCases_order_priority() },
+    { value: "state", label: m.testcase_storyCases_order_state() },
+  ];
+
+  const RadioRows = ({
+    value,
+    options,
+    disabled = false,
+    onSelect,
+  }: {
+    value: string;
+    options: { value: string; label: string }[];
+    disabled?: boolean;
+    onSelect: (v: string) => void;
+  }) => (
+    <div className="flex flex-col gap-0.5">
+      {options.map((o) => {
+        const selected = o.value === value;
+        return (
+          <button
+            key={o.value}
+            type="button"
+            disabled={disabled}
+            onClick={() => onSelect(o.value)}
+            className={cn(
+              "flex w-full items-center gap-2 rounded-sm px-1.5 py-1 text-left text-xs hover:bg-muted",
+              disabled && "cursor-not-allowed opacity-50",
+            )}
+          >
+            <span
+              className={cn(
+                "grid size-3.5 shrink-0 place-items-center rounded-full border",
+                selected ? "border-primary bg-primary text-primary-foreground" : "border-border",
+              )}
+            >
+              {selected && <Check className="size-2.5" strokeWidth={3} />}
+            </span>
+            <span className="text-foreground">{o.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+
+  const SectionHeader = ({ label }: { label: string }) => (
+    <div className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
+      <ChevronDown className="size-3" />
+      {label}
+    </div>
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="sm"
+            className="size-7 p-0"
+            aria-label={m.testcase_storyCases_display()}
+            data-testid="story-testcases-display"
+          />
+        }
+      >
+        <ChartNoAxesGantt className="size-3.5" />
+      </PopoverTrigger>
+      <PopoverContent className="w-75 p-0 duration-0 data-open:animate-none" align="start">
+        <div className="max-h-[60vh] overflow-y-auto">
+          <div data-section="groupBy" className="border-t px-3 py-2">
+            <SectionHeader label={m.testcase_storyCases_group()} />
+            <RadioRows
+              value={filters.groupBy}
+              options={groupOptions}
+              onSelect={(v) => onChange({ groupBy: v as StoryCasesGroupBy })}
+            />
+          </div>
+          <div data-section="subGroupBy" className="border-t px-3 py-2">
+            <SectionHeader label={m.testcase_storyCases_subGroup()} />
+            <RadioRows
+              value={filters.subGroupBy}
+              options={subGroupOptions}
+              disabled={filters.groupBy === "none"}
+              onSelect={(v) => onChange({ subGroupBy: v as StoryCasesSubGroupBy })}
+            />
+          </div>
+          <div data-section="orderBy" className="border-t px-3 py-2">
+            <div className="mb-1 flex items-center justify-between gap-1">
+              <div className="flex items-center gap-1 text-xs font-medium text-muted-foreground">
+                <ChevronDown className="size-3" />
+                {m.testcase_storyCases_order()}
+              </div>
+              <div className="flex items-center gap-0.5">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  aria-label={m.list_kit_display_asc()}
+                  className={cn(
+                    "size-6 rounded p-0 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
+                    filters.orderDir === "asc" && "bg-muted text-foreground",
+                  )}
+                  onClick={() => onChange({ orderDir: "asc" })}
+                >
+                  <ArrowDownNarrowWide className="size-3" />
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  aria-label={m.list_kit_display_desc()}
+                  className={cn(
+                    "size-6 rounded p-0 text-xs text-muted-foreground hover:bg-muted hover:text-foreground",
+                    filters.orderDir === "desc" && "bg-muted text-foreground",
+                  )}
+                  onClick={() => onChange({ orderDir: "desc" })}
+                >
+                  <ArrowUpWideNarrow className="size-3" />
+                </Button>
+              </div>
+            </div>
+            <RadioRows
+              value={filters.orderBy}
+              options={orderOptions}
+              onSelect={(v) => onChange({ orderBy: v as StoryCasesOrderBy })}
+            />
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}