@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/story/views/kanban-board.tsx

@@ -1,464 +0,0 @@
-// 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 { useRef, useState, type ReactNode } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import {
-  DragDropProvider,
-  DragOverlay,
-  useDroppable,
-  type DragEndEvent,
-} from "@dnd-kit/react";
-import { useServerFn } from "@tanstack/react-start";
-import { toast } from "@/components/ui/toast";
-import { updateStoryFn, reorderStoriesFn } from "@/server/serverFns/story";
-import type { StoryListItem, UserBrief } from "../types";
-import type { DisplayOptions, DisplayProperty, GroupNode } from "../display/types";
-import { GROUP_FIELD, toGroupFieldPatch } from "../display/group-fields";
-import { VIRTUALIZE_THRESHOLD } from "@/lib/perf";
-import { KanbanCard } from "./kanban-card";
-import { cn } from "@/lib/utils";
-import { InfiniteScrollSentinel } from "@/components/infinite-scroll-sentinel";
-import { m } from "@/paraglide/messages.js";
-import { toastError } from "@/lib/toast-error";
-
-interface KanbanBoardProps {
-  groups: GroupNode[];
-  displayFilters: DisplayOptions;
-  users: UserBrief[];
-  labels: { id: string; name: string; color: string }[];
-  onRefresh: () => void;
-  onOpenStory: (id: string) => void;
-  onLoadMore: () => void;
-  hasMore: boolean;
-}
-
-const KANBAN_CARD_HEIGHT = 96;
-const KANBAN_OVERSCAN = 6;
-
-function KanbanColumnList({
-  items,
-  columnId,
-  paused,
-  properties,
-  users,
-  labels,
-  onOpenStory,
-}: {
-  items: StoryListItem[];
-  columnId: string;
-  paused: boolean;
-  properties: DisplayProperty[];
-  users: UserBrief[];
-  labels: { id: string; name: string; color: string }[];
-  onOpenStory: (id: string) => void;
-}) {
-  const parentRef = useRef<HTMLDivElement>(null);
-  const virtualize = !paused && items.length > VIRTUALIZE_THRESHOLD;
-
-  const rowVirtualizer = useVirtualizer({
-    count: virtualize ? items.length : 0,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => KANBAN_CARD_HEIGHT,
-    overscan: KANBAN_OVERSCAN,
-  });
-
-  if (!virtualize) {
-    return (
-      <div ref={parentRef} className="min-h-0 flex-1 flex-col gap-2 overflow-y-auto pr-1">
-        <div className="flex flex-col gap-2">
-          {items.map((story, index) => (
-            <KanbanCard
-              key={story.id}
-              story={story}
-              columnId={columnId}
-              index={index}
-              properties={properties}
-              users={users}
-              labels={labels}
-              onOpenStory={onOpenStory}
-            />
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  const virtualItems = rowVirtualizer.getVirtualItems();
-  const totalHeight = rowVirtualizer.getTotalSize();
-  const paddingTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
-  const paddingBottom =
-    virtualItems.length > 0 ? totalHeight - virtualItems[virtualItems.length - 1].end : 0;
-
-  return (
-    <div ref={parentRef} className="min-h-0 flex-1 overflow-y-auto pr-1">
-      <div style={{ paddingTop, paddingBottom }} className="relative w-full">
-        {virtualItems.map((virtualRow) => {
-          const story = items[virtualRow.index];
-          return (
-            <div
-              key={story.id}
-              style={{
-                position: "absolute",
-                top: 0,
-                left: 0,
-                width: "100%",
-                transform: `translateY(${virtualRow.start}px)`,
-              }}
-            >
-              <KanbanCard
-                story={story}
-                columnId={columnId}
-                index={virtualRow.index}
-                properties={properties}
-                users={users}
-                labels={labels}
-                onOpenStory={onOpenStory}
-              />
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-function BoardColumn({
-  id,
-  label,
-  color,
-  count,
-  children,
-}: {
-  id: string;
-  label: string;
-  color?: string;
-  count: number;
-  children: ReactNode;
-}) {
-  const { ref, isDropTarget } = useDroppable({ id });
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "flex w-72 flex-col rounded-lg border bg-muted/30",
-        isDropTarget && "ring-2 ring-primary",
-      )}
-    >
-      <div className="flex shrink-0 items-center gap-2 px-3 py-2.5">
-        {color && <span className={cn("size-2 rounded-full", color.split(" ")[0])} />}
-        <span className="text-sm font-medium">{label}</span>
-        <span className="ml-auto text-xs text-muted-foreground">{count}</span>
-      </div>
-      <div className="flex min-h-0 flex-1 flex-col p-2">
-        {children}
-        {count === 0 && (
-          <div className="flex h-20 items-center justify-center text-xs text-muted-foreground">
-            {m.story_kanban_empty()}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function SwimlaneCell({
-  id,
-  label,
-  color,
-  count,
-  children,
-}: {
-  id: string;
-  label: string;
-  color?: string;
-  count: number;
-  children: ReactNode;
-}) {
-  const { ref, isDropTarget } = useDroppable({ id });
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "flex w-64 flex-col rounded-lg border bg-muted/30",
-        isDropTarget && "ring-2 ring-primary",
-      )}
-    >
-      <div className="flex shrink-0 items-center gap-2 px-3 py-2">
-        {color && <span className={cn("size-2 rounded-full", color.split(" ")[0])} />}
-        <span className="text-sm font-medium">{label}</span>
-        <span className="ml-auto text-xs text-muted-foreground">{count}</span>
-      </div>
-      <div className="flex min-h-0 flex-1 flex-col p-2">
-        {children}
-        {count === 0 && (
-          <div className="flex h-20 items-center justify-center text-xs text-muted-foreground">
-            {m.story_kanban_empty()}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function KanbanBoard({ groups, displayFilters, users, labels, onRefresh, onOpenStory, onLoadMore, hasMore }: KanbanBoardProps) {
-  const updateStory = useServerFn(updateStoryFn);
-  const reorderStories = useServerFn(reorderStoriesFn);
-  const [dragSource, setDragSource] = useState<StoryListItem | null>(null);
-
-  const { groupBy, subGroupBy, orderBy } = displayFilters;
-  const properties = displayFilters.properties;
-  const hasSubGroups = subGroupBy !== "none";
-
-  const dragDisabled =
-    orderBy !== "manual" ||
-    groupBy === "labels" ||
-    groupBy === "createdBy" ||
-    subGroupBy === "labels" ||
-    subGroupBy === "createdBy";
-
-  const findStory = (id: string): StoryListItem | undefined => {
-    for (const g of groups) {
-      const hit = g.items.find((s) => s.id === id);
-      if (hit) return hit;
-      for (const sg of g.subGroups ?? []) {
-        const subHit = sg.items.find((s) => s.id === id);
-        if (subHit) return subHit;
-      }
-    }
-    return undefined;
-  };
-
-  const findContainerForStory = (id: string): { group: GroupNode; sub: GroupNode | null } | null => {
-    for (const g of groups) {
-      if (g.items.some((s) => s.id === id)) return { group: g, sub: null };
-      for (const sg of g.subGroups ?? []) {
-        if (sg.items.some((s) => s.id === id)) return { group: g, sub: sg };
-      }
-    }
-    return null;
-  };
-
-  const findContainerByKey = (key: string): { group: GroupNode; sub: GroupNode | null } | null => {
-    if (hasSubGroups) {
-      const [parentKey, subKey] = key.split('_:');
-      for (const g of groups) {
-        if (g.key === parentKey) {
-          for (const sg of g.subGroups ?? []) {
-            if (sg.key === subKey) return { group: g, sub: sg };
-          }
-          return { group: g, sub: null };
-        }
-      }
-    } else {
-      for (const g of groups) {
-        if (g.key === key) return { group: g, sub: null };
-      }
-    }
-    return null;
-  };
-
-  const handleDragStart = (event: { operation: { source: { id: unknown } | null } }) => {
-    const sourceId = event.operation.source?.id;
-    if (sourceId == null) return;
-    setDragSource(findStory(String(sourceId)) ?? null);
-  };
-
-  const handleDragEnd = async (event: DragEndEvent) => {
-    if (dragDisabled) return;
-    if (event.canceled) return;
-    setDragSource(null);
-    const active = event.operation.source;
-    const over = event.operation.target;
-    if (!over) return;
-    const storyId = String(active?.id ?? "");
-    const story = findStory(storyId);
-    if (!story) return;
-
-    const overId = String(over.id);
-    const overStory = findStory(overId);
-    const src = findContainerForStory(story.id);
-    const dest = overStory ? findContainerForStory(overStory.id) : findContainerByKey(overId);
-    if (!src || !dest) return;
-
-    const destEff = dest.sub ?? dest.group;
-    const isReorder =
-      (src.sub !== null) === (dest.sub !== null) &&
-      (src.sub?.key ?? null) === (dest.sub?.key ?? null) &&
-      src.group.key === dest.group.key;
-
-    const base = destEff.items.filter((s) => s.id !== story.id);
-    const insertAt = overStory ? base.findIndex((s) => s.id === overStory.id) : base.length;
-    if (overStory && insertAt < 0) return;
-    base.splice(insertAt, 0, story);
-    const nextOrder = base.map((s, i) => ({ id: s.id, boardOrder: i }));
-
-    if (isReorder) {
-      try {
-        await reorderStories({ data: { items: nextOrder } });
-        onRefresh();
-      } catch (e) {
-        onRefresh();
-        toastError(e, m.story_kanban_orderFailed());
-      }
-      return;
-    }
-
-    const updates: Record<string, unknown> = {};
-    if (src.group.key !== dest.group.key) {
-      const field = GROUP_FIELD[groupBy];
-      if (!field) return;
-      Object.assign(updates, toGroupFieldPatch(field, dest.group.key));
-    }
-    if (hasSubGroups && src.sub && dest.sub && src.sub.key !== dest.sub.key) {
-      const field = GROUP_FIELD[subGroupBy];
-      if (field) Object.assign(updates, toGroupFieldPatch(field, dest.sub.key));
-    }
-    if (!Object.keys(updates).length) return;
-
-    try {
-      await updateStory({ data: { storyId: story.id, ...updates } });
-      await reorderStories({ data: { items: nextOrder } });
-      toast.success(m.story_kanban_groupUpdated());
-      onRefresh();
-    } catch (e) {
-      onRefresh();
-      toastError(e, m.story_kanban_moveFailed());
-    }
-  };
-
-  const containerId = (g: GroupNode, sg?: GroupNode): string =>
-    sg ? `${g.key}::${sg.key}` : g.key;
-
-  const paused = dragSource !== null;
-
-  if (hasSubGroups) {
-    return (
-      <DragDropProvider
-        sensors={dragDisabled ? [] : undefined}
-        onDragStart={handleDragStart}
-        onDragEnd={handleDragEnd}
-      >
-        <div className="flex h-full flex-col gap-2 overflow-y-auto pb-2">
-          {groups.map((g) => {
-            const Icon = g.icon;
-            const textColor =
-              g.color?.split(" ").find((c) => c.startsWith("text")) ?? "text-muted-foreground";
-            return (
-              <div key={g.key} className="grid min-h-0 grid-cols-[200px_1fr] gap-2 rounded-lg border bg-muted/20 p-2">
-                <div className="flex items-center gap-2 pt-1">
-                  {Icon && <Icon className={cn("size-4 shrink-0", textColor)} />}
-                  <span className="truncate text-sm font-medium">{g.label}</span>
-                  <span className="text-xs text-muted-foreground">{g.items.length}</span>
-                </div>
-                <div className="flex gap-2 overflow-x-auto pb-1">
-                  {(g.subGroups ?? []).length > 0 ? (
-                    g.subGroups!.map((sg) => {
-                      const cid = containerId(g, sg);
-                      return (
-                        <SwimlaneCell key={cid} id={cid} label={sg.label} color={sg.color} count={sg.items.length}>
-                          <KanbanColumnList
-                            items={sg.items}
-                            columnId={cid}
-                            paused={paused}
-                            properties={properties}
-                            users={users}
-                            labels={labels}
-                            onOpenStory={onOpenStory}
-                          />
-                        </SwimlaneCell>
-                      );
-                    })
-                  ) : (
-                    <SwimlaneCell id={g.key} label={g.label} color={g.color} count={g.items.length}>
-                      <KanbanColumnList
-                        items={g.items}
-                        columnId={g.key}
-                        paused={paused}
-                        properties={properties}
-                        users={users}
-                        labels={labels}
-                        onOpenStory={onOpenStory}
-                      />
-                    </SwimlaneCell>
-                  )}
-                </div>
-              </div>
-            );
-          })}
-          {groups.length === 0 && (
-            <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
-{m.story_kanban_noStories()}
-            </div>
-          )}
-          <InfiniteScrollSentinel loadedAllLabel={m.story_loadedAll()} onLoadMore={onLoadMore} hasMore={hasMore} />
-        </div>
-        <DragOverlay dropAnimation={null}>
-          {dragSource ? (
-            <div className="rounded-md border bg-card p-2.5 shadow-lg">
-              <div className="font-mono text-xs text-muted-foreground">{dragSource.identifier}</div>
-              <div className="mt-0.5 text-sm font-medium line-clamp-2">{dragSource.name}</div>
-            </div>
-          ) : null}
-        </DragOverlay>
-      </DragDropProvider>
-    );
-  }
-
-  return (
-    <DragDropProvider
-      sensors={dragDisabled ? [] : undefined}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-    >
-      <div className="flex h-full gap-3 overflow-x-auto pb-2">
-        {groups.map((g) => {
-          const cid = containerId(g);
-          return (
-            <BoardColumn key={cid} id={cid} label={g.label} color={g.color} count={g.items.length}>
-              <KanbanColumnList
-                items={g.items}
-                columnId={cid}
-                paused={paused}
-                properties={properties}
-                users={users}
-                labels={labels}
-                onOpenStory={onOpenStory}
-              />
-            </BoardColumn>
-          );
-        })}
-        {groups.length === 0 && (
-          <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-            {m.story_kanban_noStories()}
-          </div>
-        )}
-        <InfiniteScrollSentinel loadedAllLabel={m.story_loadedAll()} onLoadMore={onLoadMore} hasMore={hasMore} />
-      </div>
-      <DragOverlay dropAnimation={null}>
-        {dragSource ? (
-          <div className="rounded-md border bg-card p-2.5 shadow-lg">
-            <div className="font-mono text-xs text-muted-foreground">{dragSource.identifier}</div>
-            <div className="mt-0.5 text-sm font-medium line-clamp-2">{dragSource.name}</div>
-          </div>
-        ) : null}
-      </DragOverlay>
-    </DragDropProvider>
-  );
-}

package/src/components/story/views/kanban-card.tsx

@@ -1,100 +0,0 @@
-// 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 { memo } from "react";
-import { useSortable } from "@dnd-kit/react/sortable";
-import { GripVertical, CalendarCheck, CalendarPlus2 } from "lucide-react";
-import { UserAvatar } from "@/components/shared-kit";
-import { PRIORITY_LABEL } from "../constants";
-import { PriorityIcon } from "../priority-icon";
-import type { StoryListItem, UserBrief } from "../types";
-import type { DisplayProperty } from "../display/types";
-import { cn } from "@/lib/utils";
-
-interface KanbanCardProps {
-  story: StoryListItem;
-  columnId: string;
-  index: number;
-  properties: DisplayProperty[];
-  users: UserBrief[];
-  labels: { id: string; name: string; color: string }[];
-  onOpenStory: (id: string) => void;
-}
-
-export const KanbanCard = memo(function KanbanCard({ story, columnId, index, properties, users, labels, onOpenStory }: KanbanCardProps) {
-  const { handleRef, ref, isDragging } = useSortable({
-    id: story.id,
-    index,
-    group: columnId,
-    data: { columnId },
-  });
-
-  const overdue = !!(
-    story.targetDate &&
-    story.state !== "done" &&
-    new Date(story.targetDate.slice(0, 10)) < new Date(new Date().toISOString().slice(0, 10))
-  );
-
-  return (
-    <div
-      ref={ref}
-      className={cn("rounded-md border bg-card p-2.5 shadow-sm", isDragging && "opacity-50")}
-    >
-      <div ref={handleRef} className="cursor-grab text-muted-foreground">
-        <GripVertical className="size-3.5" />
-      </div>
-      <button type="button" onClick={() => onOpenStory(story.id)} className="block w-full text-left">
-        <div className="font-mono text-xs text-muted-foreground">{story.identifier}</div>
-        <div className="mt-0.5 text-sm font-medium line-clamp-2">{story.name}</div>
-      </button>
-      <div className="mt-2 flex flex-wrap items-center gap-2">
-        {properties.includes("priority") && (
-          <span className="flex items-center gap-1 text-xs text-muted-foreground">
-            <PriorityIcon priority={story.priority} />
-            {PRIORITY_LABEL[story.priority]?.() ?? story.priority}
-          </span>
-        )}
-        {properties.includes("assignee") && story.assignee && (
-          <UserAvatar name={story.assignee.username} size="sm" />
-        )}
-        {properties.includes("startDate") && story.startDate && (
-          <span className="flex items-center gap-1 text-xs text-muted-foreground">
-            <CalendarPlus2 className="size-3" />
-            {story.startDate.slice(5, 10)}
-          </span>
-        )}
-        {properties.includes("dueDate") && story.targetDate && (
-          <span className={cn("flex items-center gap-1 text-xs", overdue ? "text-red-600" : "text-muted-foreground")}>
-            <CalendarCheck className="size-3" />
-            {story.targetDate.slice(5, 10)}
-          </span>
-        )}
-        {properties.includes("labels") && story.labels.length > 0 && (
-          <div className="flex gap-0.5">
-            {story.labels.map((l) => (
-              <span
-                key={l.id}
-                className="inline-block size-2 rounded-full"
-                style={{ backgroundColor: l.color }}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-});