@allbluecn/web-app 0.4.21 → 0.5.0

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

@@ -23,15 +23,9 @@ import {
   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,
@@ -42,27 +36,19 @@ import {
 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 { StoryRefRow } from "../../relations/story-ref-row";
+import type { DisplayOptions } from "../../display/types";
 import type { RelationsData, StoryListItem, UserBrief } from "../../types";
 import type { StoryPatch } from "../../display/group-fields";
 
@@ -135,233 +121,6 @@ function ChildrenActionDropdown({ onAction }: { onAction: (action: "create" | "s
   );
 }
 
-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,
@@ -560,33 +319,47 @@ export function StoryDetailChildrenPanel({
   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} />
+        <CollapsibleTrigger
+          asChild
+          className="group flex w-full cursor-pointer items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors"
+        >
+          <div
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                (e.currentTarget as HTMLDivElement).click();
+              }
+            }}
+          >
+            <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>
           </div>
         </CollapsibleTrigger>
         <CollapsibleContent className="pb-2">
@@ -637,7 +410,7 @@ export function StoryDetailChildrenPanel({
                         </div>
                         {!subCollapsed &&
                           subGroup.items.map((story) => (
-                            <ChildStoryRow
+                            <StoryRefRow
                               key={story.id}
                               story={story}
                               users={users ?? []}
@@ -648,7 +421,8 @@ export function StoryDetailChildrenPanel({
                               properties={filters.properties}
                               onToggle={toggleStory}
                               onOpenStory={handleOpenStory}
-                              onRemoveChild={handleRemoveChild}
+                              onRemove={handleRemoveChild}
+                              removeMenuLabel={t("children.removeChild")}
                               onStoryRefresh={(storyId, patch) => {
                                 if (patch.deleted) {
                                   onRefresh((prev) => ({
@@ -683,7 +457,7 @@ export function StoryDetailChildrenPanel({
                   })
                 ) : (
                   group.items.map((story) => (
-                    <ChildStoryRow
+                    <StoryRefRow
                       key={story.id}
                       story={story}
                       users={users ?? []}
@@ -694,7 +468,8 @@ export function StoryDetailChildrenPanel({
                       properties={filters.properties}
                       onToggle={toggleStory}
                       onOpenStory={handleOpenStory}
-                      onRemoveChild={handleRemoveChild}
+                      onRemove={handleRemoveChild}
+                      removeMenuLabel={t("children.removeChild")}
                       onStoryRefresh={(storyId, patch) => {
                         if (patch.deleted) {
                           onRefresh((prev) => ({

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

@@ -18,56 +18,24 @@
 import { Waypoints } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { DependencyPanel } from "../../relations/dependency-panel";
-import type { RelationsData } from "../../types";
 
 export function StoryDetailDependencies({
-  storyId,
-  data,
-  onRefresh,
+  onOpenAdd,
 }: {
-  storyId: string;
-  data: RelationsData;
-  onRefresh: (next: (prev: RelationsData) => RelationsData) => void;
+  onOpenAdd: () => void;
 }) {
   const { t } = useTranslation("story");
-  const count = data.dependencies.blocking.length + data.dependencies.blockedBy.length + data.dependencies.relatesTo.length;
 
   return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
-          title={t("relations.dependencyTitle")}
-        >
-          <Waypoints className="size-3.5 text-muted-foreground" />
-          {t("relations.dependency")}
-          {count > 0 && (
-            <span className="ml-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
-              {count}
-            </span>
-          )}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent align="start" className="w-[380px] p-4">
-        <div className="flex items-center justify-between mb-3">
-          <span className="text-sm font-semibold">{t("relations.dependency")}</span>
-          {count > 0 && <span className="text-xs text-muted-foreground">{t("relations.itemCount", { count })}</span>}
-        </div>
-        <DependencyPanel
-          storyId={storyId}
-          data={data.dependencies}
-          onUpdate={(updates) =>
-            onRefresh((prev) => ({
-              ...prev,
-              dependencies: { ...prev.dependencies, ...updates },
-            }))
-          }
-        />
-      </PopoverContent>
-    </Popover>
+    <Button
+      variant="ghost"
+      size="sm"
+      className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
+      onClick={onOpenAdd}
+      title={t("relations.dependencyTitle")}
+    >
+      <Waypoints className="size-3.5 text-muted-foreground" />
+      {t("relations.addDependency")}
+    </Button>
   );
-}
+}