@allbluecn/web-app 0.3.0

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

@@ -0,0 +1,762 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// 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 * as React from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import {
+  Plus,
+  ChevronDown,
+  GitBranch,
+  SquareDashedMousePointer,
+  MoreHorizontal,
+  Archive,
+  Trash2,
+  CalendarCheck,
+  CalendarPlus2,
+  ChartNoAxesGantt,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { useServerFn } from "@tanstack/react-start";
+import { toast } from "sonner";
+import {
+  updateStoryFn,
+  archiveStoryFn,
+  unarchiveStoryFn,
+  deleteStoryFn,
+  removeChildFn,
+  bulkArchiveStoriesFn,
+  bulkDeleteStoriesFn,
+  bulkUpdateStoriesFn,
+} from "@/server/serverFns/story";
+import { PriorityEditor, StateEditor, AssigneeEditor, DateEditor, LabelsEditor } from "../../inline-editors";
+import { NameConfirmDialog } from "@/components/shared/name-confirm-dialog";
+import { cn } from "@/lib/utils";
+import { ProjectIconDisplay } from "@/components/project/project-icon";
+import { BatchToolbar } from "../../views/story-list/batch-toolbar";
+import { useGroupedStories } from "../../display/use-grouped-stories";
+import { VirtualGroupHeader } from "../../views/story-list/group";
+import { DisplayOptionsBody } from "../../display/display-dropdown";
+import type { DisplayOptions, DisplayProperty } from "../../display/types";
+import type { RelationsData, StoryListItem, UserBrief } from "../../types";
+import type { StoryPatch } from "../../display/group-fields";
+
+export interface StoryDetailChildrenButtonProps {
+  onAction: (action: "create" | "select") => void;
+}
+
+export interface StoryDetailChildrenPanelProps {
+  storyId: string;
+  projectId: string | null;
+  data: RelationsData["hierarchy"];
+  onRefresh: (next: (prev: RelationsData) => RelationsData) => void;
+  refreshChildren: () => void;
+  users?: UserBrief[];
+  projects?: { id: string; name: string; icon: string; displayId: string | null }[];
+  labels?: { id: string; name: string; color: string }[];
+  onAction: (action: "create" | "select") => void;
+}
+
+export function StoryDetailChildrenButton({ onAction }: StoryDetailChildrenButtonProps) {
+  const { t } = useTranslation("story");
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
+            >
+              <GitBranch className="size-3.5 text-muted-foreground" />
+              {t("children.addChild")}
+              <ChevronDown className="size-3 text-muted-foreground" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-36">
+            <DropdownMenuItem onSelect={() => onAction("create")}>
+              <Plus className="mr-2 size-4" />{t("children.createChild")}
+            </DropdownMenuItem>
+            <DropdownMenuItem onSelect={() => onAction("select")}>
+              <SquareDashedMousePointer className="mr-2 size-4" />{t("children.selectChild")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </TooltipTrigger>
+      <TooltipContent side="top">{t("children.childStories")}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+function ChildrenActionDropdown({ onAction }: { onAction: (action: "create" | "select") => void }) {
+  const { t } = useTranslation("story");
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="size-7 p-0">
+          <Plus className="size-3.5" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-36">
+        <DropdownMenuItem onSelect={() => onAction("create")}>
+          <Plus className="mr-2 size-4" />{t("children.createChild")}
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => onAction("select")}>
+          <SquareDashedMousePointer className="mr-2 size-4" />{t("children.selectChild")}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function ChildStoryRow({
+  story,
+  users,
+  labels,
+  parentProjectId,
+  projects,
+  selected,
+  properties,
+  onToggle,
+  onOpenStory,
+  onStoryRefresh,
+  onRemoveChild,
+}: {
+  story: StoryListItem;
+  users: UserBrief[];
+  labels: { id: string; name: string; color: string }[];
+  parentProjectId: string | null;
+  projects: { id: string; name: string; icon: string; displayId: string | null }[];
+  selected: boolean;
+  properties: DisplayProperty[];
+  onToggle: (id: string) => void;
+  onOpenStory: (id: string) => void;
+  onStoryRefresh: (storyId: string, patch: Record<string, any>) => void;
+  onRemoveChild: (storyId: string) => void;
+}) {
+  const { t } = useTranslation("story");
+  const [storyState, setStoryState] = React.useState(story);
+  React.useEffect(() => {
+    setStoryState(story);
+  }, [story]);
+  const updateStory = useServerFn(updateStoryFn);
+  const archiveStory = useServerFn(archiveStoryFn);
+  const unarchiveStory = useServerFn(unarchiveStoryFn);
+  const deleteStory = useServerFn(deleteStoryFn);
+  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
+
+  const crossProject = storyState.projectId !== parentProjectId;
+  const storyProjectInfo = projects.find((p) => p.id === storyState.projectId) ?? null;
+
+  const updateField = async (patch: Record<string, any>) => {
+    const updated = { ...storyState, ...patch };
+    setStoryState(updated);
+    try {
+      await updateStory({ data: { storyId: story.id, ...patch } });
+      onStoryRefresh(story.id, patch);
+    } catch (e) {
+      setStoryState(story);
+      toast.error((e as Error)?.message || t("children.updateFailed"));
+    }
+  };
+
+  const currentLabelIds = storyState.labels.map((l) => l.id);
+  const overdue = !!(
+    storyState.targetDate &&
+    storyState.state !== "done" &&
+    new Date(storyState.targetDate.slice(0, 10)) < new Date(new Date().toISOString().slice(0, 10))
+  );
+
+  const canArchiveSingle = storyState.state === "done" || storyState.state === "cancelled";
+
+  const handleArchive = async () => {
+    if (!canArchiveSingle) {
+      toast.error(t("children.archiveOnlyDone"));
+      return;
+    }
+    try {
+      await archiveStory({ data: { storyId: story.id } });
+      onStoryRefresh(story.id, { archived: true, archivedAt: new Date().toISOString() });
+      toast.success(t("children.archived"));
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.archiveFailed"));
+    }
+  };
+
+  const handleUnarchive = async () => {
+    try {
+      await unarchiveStory({ data: { storyId: story.id } });
+      onStoryRefresh(story.id, { archived: false, archivedAt: null });
+      toast.success(t("children.unarchived"));
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.unarchiveFailed"));
+    }
+  };
+
+  const handleDelete = async () => {
+    try {
+      await deleteStory({ data: { storyId: story.id } });
+      onStoryRefresh(story.id, { deleted: true });
+      toast.success(t("children.deleted"));
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.deleteFailed"));
+    }
+  };
+
+  const showArchived = !storyState.archived;
+
+  return (
+    <div
+      className={`group flex items-center gap-1.5 px-2 py-1.5 text-sm transition-colors ${selected ? "bg-muted/20" : "bg-card hover:bg-accent/40"} border-b border-border/40`}
+    >
+      <Checkbox
+        checked={selected}
+        onCheckedChange={() => onToggle(story.id)}
+        aria-label={t("children.selectStory", { name: story.name })}
+        className={cn(
+          "shrink-0 transition-opacity",
+          selected ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+        )}
+      />
+      <button
+        type="button"
+        onClick={() => onOpenStory(storyState.id)}
+        className="flex h-8 min-w-0 flex-1 items-center gap-2 text-left"
+      >
+        {crossProject && storyProjectInfo ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span
+                className="shrink-0"
+                style={{ color: "oklch(80.517% 0.20237 152.675 / 0.909)" }}
+              >
+                <ProjectIconDisplay name={storyProjectInfo.icon} size={14} />
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="top" sideOffset={6} className="flex flex-col items-start gap-0.5 text-xs">
+              <span className="opacity-80">{t("children.crossProject")}</span>
+              <span className="font-medium">{storyProjectInfo.name}</span>
+            </TooltipContent>
+          </Tooltip>
+        ) : storyProjectInfo ? (
+          <ProjectIconDisplay
+            name={storyProjectInfo.icon}
+            size={14}
+            className="shrink-0 text-muted-foreground"
+          />
+        ) : null}
+        {crossProject && storyProjectInfo ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span
+                className="font-mono text-xs shrink-0"
+                style={{ color: "oklch(80.517% 0.20237 152.675 / 0.909)" }}
+              >
+                {storyState.identifier}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="top" sideOffset={6} className="flex flex-col items-start gap-0.5 text-xs">
+              <span className="opacity-80">{t("children.crossProject")}</span>
+              <span className="font-medium">{storyProjectInfo.name}</span>
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          <span className="font-mono text-xs text-muted-foreground shrink-0">{storyState.identifier}</span>
+        )}
+        <span className="min-w-0 flex-1 truncate font-medium">{storyState.name}</span>
+      </button>
+      {properties.includes("priority") && (
+        <PriorityEditor value={storyState.priority} onChange={(v) => updateField({ priority: v })} variant="button" />
+      )}
+      {properties.includes("state") && (
+        <StateEditor value={storyState.state} onChange={(v) => updateField({ state: v })} variant="button" />
+      )}
+      {properties.includes("assignee") && (
+        <AssigneeEditor assignee={storyState.assignee} users={users} onChange={(v) => updateField({ assigneeId: v })} variant="button" />
+      )}
+      {properties.includes("startDate") && (
+<DateEditor value={storyState.startDate} onChange={(v) => updateField({ startDate: v })} label={t("children.startDate")} icon={CalendarPlus2} />
+        )}
+        {properties.includes("dueDate") && (
+        <DateEditor value={storyState.targetDate} onChange={(v) => updateField({ targetDate: v })} label={t("children.dueDate")} icon={CalendarCheck} overdue={overdue} />
+      )}
+      {properties.includes("labels") && (
+        <LabelsEditor labelIds={currentLabelIds} labels={labels} onChange={(v) => updateField({ labelIds: v })} variant="button" />
+      )}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className="size-7 p-0 ml-auto border border-border/60 rounded hover:bg-muted">
+            <MoreHorizontal className="size-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-40" sideOffset={4}>
+          <DropdownMenuItem onClick={() => onRemoveChild(story.id)}>
+            <GitBranch className="mr-2 size-4" />
+            {t("children.removeChild")}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          {showArchived ? (
+            <>
+              {canArchiveSingle && (
+                <>
+                  <DropdownMenuItem onClick={handleArchive}>
+                    <Archive className="mr-2 size-4" />
+                    {t("children.archive")}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                </>
+              )}
+              <DropdownMenuItem
+                onClick={() => setDeleteDialogOpen(true)}
+                className="text-destructive focus:text-destructive"
+              >
+                <Trash2 className="mr-2 size-4" />
+                {t("children.delete")}
+              </DropdownMenuItem>
+            </>
+          ) : (
+            <DropdownMenuItem onClick={handleUnarchive}>
+              <Archive className="mr-2 size-4" />
+              {t("children.unarchive")}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <NameConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        title={t("children.deleteTitle")}
+        description={t("children.deleteDescription")}
+        confirmText={t("children.delete")}
+        expectedName={storyState.identifier ?? storyState.id ?? ""}
+        onConfirm={handleDelete}
+      />
+    </div>
+  );
+}
+
+export function StoryDetailChildrenPanel({
+  storyId,
+  projectId,
+  data,
+  onRefresh,
+  refreshChildren,
+  users,
+  projects,
+  labels,
+  onAction,
+}: StoryDetailChildrenPanelProps) {
+  const { t } = useTranslation("story");
+  const navigate = useNavigate();
+  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>(() => ({
+    groupBy: "none",
+    subGroupBy: "none",
+    orderBy: "created",
+    orderDir: "desc",
+    properties: ["id", "priority", "state", "assignee", "startDate", "dueDate", "labels"],
+    showEmptyGroups: false,
+    showSubItems: false,
+    pageSize: 100,
+  }));
+  const [collapsed, setCollapsed] = React.useState<Record<string, boolean>>({});
+
+  const groups = useGroupedStories({
+    stories: childrenList,
+    filters,
+    users: users ?? [],
+    labels: labels ?? [],
+    projects: projects ?? [],
+  });
+
+  const selectedStories = React.useMemo(
+    () => childrenList.filter((s) => selectedIds.has(s.id)),
+    [childrenList, selectedIds],
+  );
+
+  const canArchive = React.useMemo(
+    () => selectedStories.some((s) => s.state === "done" || s.state === "cancelled"),
+    [selectedStories],
+  );
+
+  if (childrenList.length === 0) {
+    return null;
+  }
+
+  const updateFilters = (patch: Partial<DisplayOptions>) => {
+    setFilters((prev) => ({ ...prev, ...patch }));
+  };
+
+  const handleOpenStory = (id: string) => {
+    navigate({ to: "/stories/$storyId", params: { storyId: id } });
+  };
+
+  const handleRemoveChild = async (childId: string) => {
+    try {
+      await removeChildFn({ data: { childId } });
+      toast.success(t("children.removedChild"));
+      onRefresh((prev) => ({
+        ...prev,
+        hierarchy: {
+          ...prev.hierarchy,
+          children: prev.hierarchy.children.filter((c) => c.id !== childId),
+          hasChildren: prev.hierarchy.children.length > 1,
+        },
+      }));
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.removeChildFailed"));
+    }
+  };
+
+  const toggleStory = (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));
+      if (allChosen) {
+        for (const id of ids) next.delete(id);
+      } else {
+        for (const id of ids) next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const toggleAll = () => {
+    setSelectedIds((prev) => {
+      const allChosen = childrenList.every((s) => prev.has(s.id));
+      return allChosen ? new Set() : new Set(childrenList.map((s) => s.id));
+    });
+  };
+
+  const allSelected = childrenList.length > 0 && selectedIds.size === childrenList.length;
+
+  const clearSelection = () => setSelectedIds(new Set());
+
+  const handleBulkArchive = async (storyIds?: string[]) => {
+    const ids = storyIds ?? [...selectedIds];
+    if (ids.length === 0) return;
+    setBusy(true);
+    try {
+      const res = await bulkArchiveStoriesFn({ data: { storyIds: ids } });
+      toast.success(
+        res.skipped > 0
+          ? t("children.bulkArchivedSkipped", { archived: res.archived, skipped: res.skipped })
+          : t("children.bulkArchived", { count: res.archived }),
+      );
+      setSelectedIds(new Set());
+      refreshChildren();
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.archiveFailed"));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleBulkDelete = async (storyIds?: string[]) => {
+    const ids = storyIds ?? [...selectedIds];
+    if (ids.length === 0) return;
+    setBusy(true);
+    try {
+      const res = await bulkDeleteStoriesFn({ data: { storyIds: ids } });
+      toast.success(t("children.bulkDeleted", { count: res.deleted }));
+      setSelectedIds(new Set());
+      refreshChildren();
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.deleteFailed"));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleBulkUpdate = async (patch: StoryPatch) => {
+    if (selectedIds.size === 0) return;
+    setBusy(true);
+    try {
+      await bulkUpdateStoriesFn({ data: { storyIds: [...selectedIds], patch } });
+      setSelectedIds(new Set());
+      toast.success(t("children.bulkUpdated"));
+      refreshChildren();
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.bulkUpdateFailed"));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleTransfer = (updatedStories?: Array<{ id: string; identifier: string; projectId: string; parentId: string | null }>) => {
+    if (!updatedStories?.length) return;
+    const updatedMap = new Map<string, { identifier: string; projectId: string }>();
+    for (const s of updatedStories) {
+      updatedMap.set(s.id, { identifier: s.identifier, projectId: s.projectId });
+    }
+    onRefresh((prev) => ({
+      ...prev,
+      hierarchy: {
+        ...prev.hierarchy,
+        children: prev.hierarchy.children.map((c) => {
+          const updated = updatedMap.get(c.id);
+          if (updated) {
+            return { ...c, identifier: updated.identifier, projectId: updated.projectId };
+          }
+          return c;
+        }),
+      },
+    }));
+    setSelectedIds(new Set());
+  };
+
+  const showSelect = selectedIds.size > 0;
+
+  const toggleCollapse = (key: string) => {
+    setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  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;
+  };
+
+  return (
+    <>
+      <Collapsible defaultOpen>
+        <CollapsibleTrigger className="group flex w-full items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors">
+          <div className="flex items-center gap-1.5">
+            <span>{t("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" />
+          </div>
+          <div className="flex items-center gap-1 ml-auto" onClick={(e) => e.stopPropagation()}>
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="ghost" size="sm" className="size-7 p-0">
+                  <ChartNoAxesGantt className="size-3.5" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent align="end" className="w-75 p-0">
+                <div className="max-h-[60vh] overflow-y-auto">
+                  <DisplayOptionsBody
+                    filters={filters}
+                    onChange={updateFilters}
+                    layout="list"
+                    showSubItems={false}
+                  />
+                </div>
+              </PopoverContent>
+            </Popover>
+            <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 }}>
+                          <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}
+                          />
+                        </div>
+                        {!subCollapsed &&
+                          subGroup.items.map((story) => (
+                            <ChildStoryRow
+                              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}
+                              onRemoveChild={handleRemoveChild}
+                              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),
+                                    },
+                                  }));
+                                }
+                              }}
+                            />
+                          ))}
+                      </React.Fragment>
+                    );
+                  })
+                ) : (
+                  group.items.map((story) => (
+                    <ChildStoryRow
+                      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}
+                      onRemoveChild={handleRemoveChild}
+                      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),
+                            },
+                          }));
+                        }
+                      }}
+                    />
+                  ))
+                )}
+              </React.Fragment>
+            )}
+                </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>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </>
+  );
+}