@allbluecn/web-app 0.5.1 → 0.6.1

package/src/routes/_nav/projects/$projectId/iterations/$iterationId/route.lazy.tsx

@@ -0,0 +1,289 @@
+// 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 { useState } from "react";
+import { createLazyFileRoute, Link, useLoaderData, useRouter } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { CalendarRange, MoreVertical, Pencil, Trash2, Archive, ArchiveX, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { IterationStatusBadge } from "@/components/iteration/iteration-status-badge";
+import { IterationProgressBar } from "@/components/iteration/iteration-progress-bar";
+import { BurndownChart } from "@/components/iteration/burndown-chart";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { StorySelectDialog } from "@/components/story/inline-editors/story-select-dialog";
+import { listIterationStoriesFn, archiveIterationsFn, deleteIterationsFn, transferUnfinishedFn, getIterationBurndownFn, listIterationsFn, addStoriesToIterationFn } from "@/server/serverFns/iteration";
+import { listProjectsBriefFn } from "@/server/serverFns/project";
+import { toast } from "@/components/ui/sonner";
+import { useQuery } from "@tanstack/react-query";
+import type { IterationSummary } from "@/server/serverFns/iteration/schemas";
+import type { StoryState } from "@/components/story/constants";
+
+interface IterationStoryRow {
+  id: string;
+  identifier: string;
+  name: string;
+  state: StoryState;
+  priority: string;
+  assignee?: { id: string; username: string; email: string; avatarConfig?: any; bgShape?: string; bgColor?: string } | null;
+}
+
+export const Route = createLazyFileRoute("/_nav/projects/$projectId/iterations/$iterationId")({
+  component: IterationDetailPage,
+});
+
+function IterationDetailPage() {
+  const { t } = useTranslation("iterations");
+  const { iteration, stories } = useLoaderData({ from: "/_nav/projects/$projectId/iterations/$iterationId" }) as {
+    iteration: IterationSummary;
+    stories: { items: IterationStoryRow[] };
+  };
+  const projectId = Route.useParams().projectId;
+  const iterationId = Route.useParams().iterationId;
+  const today = new Date().toISOString().slice(0, 10);
+  const remainingDays = Math.round((Date.parse(iteration.endDate) - Date.parse(today)) / 86400000);
+  const isCompleted = iteration.status === "completed";
+  const isOverdue = remainingDays < 0;
+  const [transferOpen, setTransferOpen] = useState(false);
+  const [addStoryOpen, setAddStoryOpen] = useState(false);
+  const router = useRouter();
+
+  const { data: burndown, isLoading: burndownLoading } = useQuery({
+    queryKey: ["iteration-burndown", iterationId],
+    queryFn: () => getIterationBurndownFn({ data: { iterationId } }),
+    enabled: iteration.storyCount > 0,
+  });
+
+  async function handleRemoveStory(storyId: string) {
+    await import("@/server/serverFns/iteration/iteration-stories").then((m) => m.removeStoryFromIterationFn({ data: { storyId } }));
+    toast.success(t("actions.removeStory"));
+  }
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="mx-auto max-w-4xl px-6 py-6">
+        {/* Header */}
+        <div className="mb-6 flex items-start justify-between">
+          <div>
+            <Link to="/projects/$projectId/iterations" params={{ projectId }} className="text-sm text-muted-foreground hover:text-foreground">
+              ← {t("title")}
+            </Link>
+            <div className="mt-2 flex items-center gap-3">
+              <h1 className="text-2xl font-semibold">{iteration.name}</h1>
+              <IterationStatusBadge status={iteration.status} />
+            </div>
+            <p className="mt-1 text-sm text-muted-foreground">
+              {iteration.startDate} ~ {iteration.endDate}
+              {iteration.status === "active" && !isOverdue && (
+                <span className="ml-2">({t("progress.remainingDays", { days: remainingDays })})</span>
+              )}
+              {isOverdue && (
+                <span className="ml-2 text-red-500">{t("progress.overdueDays", { days: Math.abs(remainingDays) })}</span>
+              )}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" disabled={isCompleted}>
+              <Pencil className="mr-1 size-4" />
+              {t("actions.edit")}
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <MoreVertical className="size-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => void (async () => {
+                  await archiveIterationsFn({ data: { id: iterationId, archived: !iteration.archived } });
+                  toast.success(iteration.archived ? t("actions.unarchive") : t("actions.archive"));
+                })()}>
+                  {iteration.archived ? <ArchiveX className="mr-2 size-4" /> : <Archive className="mr-2 size-4" />}
+                  {iteration.archived ? t("actions.unarchive") : t("actions.archive")}
+                </DropdownMenuItem>
+                <DropdownMenuItem className="text-destructive" onClick={() => document.getElementById(`delete-iter-${iterationId}`)?.click()}>
+                  <Trash2 className="mr-2 size-4" />
+                  {t("actions.delete")}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button variant="destructive" size="sm" id={`delete-iter-${iterationId}`} className="hidden">Delete</Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>{t("actions.delete")}</AlertDialogTitle>
+                  <AlertDialogDescription>{t("errors.deleteConfirm")}</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>{t("actions.cancel")}</AlertDialogCancel>
+                  <AlertDialogAction
+                    onClick={async () => {
+                      await deleteIterationsFn({ data: { id: iterationId } });
+                      toast.success(t("actions.delete"));
+                      void router.navigate({ to: "/projects/$projectId/iterations", params: { projectId } });
+                    }}
+                  >
+                    {t("actions.delete")}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+            {isCompleted && (
+              <Button variant="outline" size="sm" onClick={() => setTransferOpen(true)}>
+                {t("actions.transfer")}
+              </Button>
+            )}
+            {!isCompleted && (
+              <Button variant="outline" size="sm" onClick={() => setAddStoryOpen(true)}>
+                <Plus className="mr-1 size-4" />
+                {t("actions.addStories")}
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Stats + Burndown */}
+        {iteration.storyCount > 0 && (
+          <div className="mb-6 space-y-4">
+            <div className="rounded-lg border bg-card p-4">
+              <IterationProgressBar stateCounts={iteration.stateCounts} />
+            </div>
+            <div className="rounded-lg border bg-card p-4">
+              {burndownLoading ? (
+                <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">加载中...</div>
+              ) : burndown ? (
+                <BurndownChart data={burndown} />
+              ) : null}
+            </div>
+          </div>
+        )}
+
+        {/* Stories list */}
+        <div className="space-y-2">
+          {stories.items.length === 0 ? (
+            <p className="py-8 text-center text-sm text-muted-foreground">{t("empty.description")}</p>
+          ) : (
+            stories.items.map((story) => (
+              <div key={story.id} className="flex items-center gap-3 rounded-lg border bg-card px-4 py-3">
+                <span className="font-mono text-xs text-muted-foreground">{story.identifier}</span>
+                <Link to="/stories/$storyId" params={{ storyId: story.id }} className="flex-1 text-sm font-medium hover:underline">
+                  {story.name}
+                </Link>
+                <span className="text-xs text-muted-foreground">{story.state}</span>
+                <Button variant="ghost" size="sm" className="ml-auto text-muted-foreground" onClick={() => void handleRemoveStory(story.id)}>
+                  {t("actions.removeStory")}
+                </Button>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Transfer dialog */}
+      <TransferDialog open={transferOpen} onOpenChange={setTransferOpen} iterationId={iterationId} projectId={projectId} onSaved={() => void router.invalidate()} />
+      <AddStoriesDialog open={addStoryOpen} onOpenChange={setAddStoryOpen} iterationId={iterationId} projectId={projectId} onAdded={() => void router.invalidate()} />
+    </div>
+  );
+}
+
+function TransferDialog({ open, onOpenChange, iterationId, projectId, onSaved }: { open: boolean; onOpenChange: (v: boolean) => void; iterationId: string; projectId: string; onSaved?: () => void }) {
+  const { t } = useTranslation("iterations");
+  const [targetId, setTargetId] = useState("");
+  const [loading, setLoading] = useState(false);
+  const { data } = useQuery({
+    queryKey: ["iterations-list", projectId],
+    queryFn: () => listIterationsFn({ data: { projectId, includeArchived: false } }),
+    enabled: open,
+  });
+  const targets = (data?.items ?? []).filter((i: IterationSummary) => i.status !== "completed");
+
+  async function handleTransfer() {
+    if (!targetId) return;
+    setLoading(true);
+    try {
+      const r = await transferUnfinishedFn({ data: { iterationId, targetIterationId: targetId } });
+      toast.success(t("transfer.success", { count: r.count }));
+      onSaved?.();
+      onOpenChange(false);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "转移失败");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("transfer.title")}</DialogTitle>
+        </DialogHeader>
+        <p className="text-sm text-muted-foreground">{t("transfer.description")}</p>
+        <div className="space-y-2 py-4">
+          <label className="text-sm font-medium">{t("transfer.target")}</label>
+          <select
+            className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors"
+            value={targetId}
+            onChange={(e) => setTargetId(e.target.value)}
+          >
+            <option value="">{t("transfer.noTarget") ?? "请选择目标迭代"}</option>
+            {targets.map((i: IterationSummary) => (
+              <option key={i.id} value={i.id}>{i.name} ({i.startDate} ~ {i.endDate})</option>
+            ))}
+          </select>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>{t("actions.cancel")}</Button>
+          <Button onClick={() => void handleTransfer()} disabled={!targetId || loading}>{loading ? "转移中..." : t("actions.transfer")}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function AddStoriesDialog({ open, onOpenChange, iterationId, projectId, onAdded }: { open: boolean; onOpenChange: (v: boolean) => void; iterationId: string; projectId: string; onAdded?: () => void }) {
+  const { t } = useTranslation("iterations");
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const { data: projects } = useQuery({
+    queryKey: ["projects-brief"],
+    queryFn: () => listProjectsBriefFn(),
+  });
+
+  async function handleSelected(ids: string | string[]) {
+    const storyIds = Array.isArray(ids) ? ids : [ids];
+    if (!storyIds.length) return;
+    await addStoriesToIterationFn({ data: { iterationId, storyIds } });
+    toast.success(t("actions.addStories"));
+    onAdded?.();
+    onOpenChange(false);
+  }
+
+  return (
+    <StorySelectDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      storyId=""
+      projects={projects ?? []}
+      mode="iteration"
+      title={t("actions.addStories")}
+      onSelected={handleSelected}
+    />
+  );
+}

package/src/routes/_nav/projects/$projectId/iterations/$iterationId/route.tsx

@@ -0,0 +1,27 @@
+// 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 { createFileRoute, notFound } from "@tanstack/react-router";
+import { getIterationFn, listIterationStoriesFn } from "@/server/serverFns/iteration";
+
+export const Route = createFileRoute("/_nav/projects/$projectId/iterations/$iterationId")({
+  loader: async ({ params }) => {
+    const iteration = await getIterationFn({ data: { id: params.iterationId } });
+    const stories = await listIterationStoriesFn({ data: { iterationId: params.iterationId } });
+    return { iteration, stories };
+  },
+});

package/src/routes/_nav/projects/$projectId/iterations/index.lazy.tsx

@@ -0,0 +1,111 @@
+// 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 { useState } from "react";
+import { createLazyFileRoute, Link, useLoaderData, useRouter } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { CalendarRange, Plus, Settings } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { PlaceholderPage } from "@/components/shared/placeholder-page";
+import { IterationCard } from "@/components/iteration/iteration-card";
+import { CreateIterationDialog } from "@/components/iteration/create-iteration-dialog";
+import { AutoScheduleDialog } from "@/components/iteration/auto-schedule-dialog";
+import { listIterationsFn } from "@/server/serverFns/iteration";
+import type { IterationSummary } from "@/server/serverFns/iteration/schemas";
+
+export const Route = createLazyFileRoute("/_nav/projects/$projectId/iterations/")({
+  component: IterationsPage,
+});
+
+function IterationsPage() {
+  const { t } = useTranslation("iterations");
+  const router = useRouter();
+  const { items } = useLoaderData({ from: "/_nav/projects/$projectId/iterations/" });
+  const projectId = Route.useParams().projectId;
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [scheduleOpen, setScheduleOpen] = useState(false);
+
+  const active = items.filter((i) => i.status === "active").sort((a, b) => a.startDate.localeCompare(b.startDate));
+  const upcoming = items.filter((i) => i.status === "upcoming").sort((a, b) => a.startDate.localeCompare(b.startDate));
+  const completed = items.filter((i) => i.status === "completed").sort((a, b) => b.startDate.localeCompare(a.startDate)).slice(0, 8);
+
+  const groups = [
+    { title: t("group.active"), items: active },
+    { title: t("group.upcoming"), items: upcoming },
+    { title: t("group.completed"), items: completed },
+  ].filter((g) => g.items.length > 0);
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="mx-auto max-w-4xl px-6 py-6">
+        <div className="mb-6 flex items-center justify-between">
+          <Link
+            to="/projects/$projectId"
+            params={{ projectId }}
+            className="text-sm text-muted-foreground hover:text-foreground"
+          >
+            ← {t("title")}
+          </Link>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" onClick={() => setScheduleOpen(true)}>
+              <Settings className="mr-1 size-4" />
+              {t("actions.autoSchedule")}
+            </Button>
+            <Button size="sm" onClick={() => setDialogOpen(true)}>
+              <Plus className="mr-1 size-4" />
+              {t("actions.create")}
+            </Button>
+          </div>
+        </div>
+
+        {groups.length === 0 ? (
+          <PlaceholderPage
+            title={t("empty.title")}
+            description={t("empty.description")}
+            icon={CalendarRange}
+          />
+        ) : (
+          <div className="space-y-8">
+            {groups.map((group) => (
+              <div key={group.title}>
+                <h2 className="mb-3 text-sm font-semibold text-muted-foreground">{group.title}</h2>
+                <div className="grid gap-3 sm:grid-cols-2">
+                  {group.items.map((item) => (
+                    <IterationCard key={item.id} item={item} projectId={projectId} />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <CreateIterationDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        projectId={projectId}
+        onSaved={() => void router.invalidate()}
+      />
+      <AutoScheduleDialog
+        open={scheduleOpen}
+        onOpenChange={setScheduleOpen}
+        projectId={projectId}
+        onSaved={() => void router.invalidate()}
+      />
+    </div>
+  );
+}

package/src/routes/_nav/projects/$projectId/iterations/index.tsx

@@ -0,0 +1,24 @@
+// 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 { createFileRoute } from "@tanstack/react-router";
+import { listIterationsFn } from "@/server/serverFns/iteration";
+
+export const Route = createFileRoute("/_nav/projects/$projectId/iterations/")({
+  loader: async ({ params }) =>
+    listIterationsFn({ data: { projectId: params.projectId, includeArchived: false } }),
+});

package/src/routes/_nav/projects/$projectId/route.tsx

@@ -21,16 +21,18 @@ import {
   listProjectMembersFn,
   listProjectActivitiesFn,
 } from "@/server/serverFns/project";
+import { getModuleOverviewFn } from "@/server/serverFns/project/module-overview";
 
 export const Route = createFileRoute("/_nav/projects/$projectId")({
   loader: async ({ params }) => {
-    const [project, members, activities] = await Promise.all([
+    const [project, members, activities, moduleOverview] = await Promise.all([
       getProjectDetailFn({ data: { projectId: params.projectId } }),
       listProjectMembersFn({ data: { projectId: params.projectId } }),
       listProjectActivitiesFn({
         data: { projectId: params.projectId, take: 15 },
       }),
+      getModuleOverviewFn({ data: { projectId: params.projectId } }),
     ]);
-    return { project, members, activities };
+    return { project, members, activities, moduleOverview };
   },
 });

package/src/routes/_nav/projects/$projectId/settings/route.lazy.tsx

@@ -28,8 +28,8 @@ import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Badge } from "@/components/ui/badge";
-import { IconPicker } from "@/components/shared/icon-picker";
-import { PROJECT_ICONS } from "@/components/shared/icon-packs/project";
+import { LucideIconPicker } from "@/components/shared/lucide-icon-picker";
+
 import { NameConfirmDialog } from "@/components/shared/name-confirm-dialog";
 import { ProjectMemberManager } from "@/components/project/project-member-manager";
 import { extractDisplayId, validateDisplayId } from "@/lib/project-display-id";
@@ -149,9 +149,9 @@ function ProjectSettingsPage() {
               <CardTitle>{t('settings.basicInfo')}</CardTitle>
             </CardHeader>
             <CardContent className="space-y-5">
-              <div className="flex flex-col gap-3">
+              <div className="flex items-center gap-3">
                 <Label>{t('settings.projectIcon')}</Label>
-                <IconPicker icons={PROJECT_ICONS} value={icon} onChange={setIcon} />
+                <LucideIconPicker value={icon} onChange={setIcon} />
               </div>
               <div className="grid gap-2">
                 <Label htmlFor="project-name">{t('settings.projectName')}</Label>

package/src/routes/_nav/stories/$storyId/route.lazy.tsx

@@ -23,7 +23,7 @@ import { StoryDetailBody } from "@/components/story/detail/story-detail-body";
 import { StoryPanelHeader } from "@/components/story/story-panel-header";
 
 function StoryDetailPage() {
-  const { story, users, comments, activities, neighbors, projects, labels, stories, relationsData } = Route.useLoaderData();
+  const { story, users, comments, activities, neighbors, projects, labels, stories, relationsData, iterations } = Route.useLoaderData();
   const currentUserId = Route.useRouteContext().session?.user?.id;
   const [storyState, setStoryState] = useState<StoryDetail>(story);
   const [activitiesState, setActivitiesState] = useState<ActivityItem[]>(activities);
@@ -49,6 +49,7 @@ function StoryDetailPage() {
       labels={labels}
       stories={stories}
       relationsData={relationsState}
+      iterations={iterations}
       onStoryUpdate={(s) => setStoryState(s)}
       onAppendActivities={(items) => setActivitiesState((prev) => [...items, ...prev])}
       onRelationsUpdate={(next) => setRelationsState(typeof next === "function" ? next(relationsState) : next)}
@@ -68,6 +69,7 @@ function StoryDetailContent({
   labels,
   stories,
   relationsData,
+  iterations,
   onStoryUpdate,
   onAppendActivities,
   onRelationsUpdate,
@@ -82,6 +84,7 @@ function StoryDetailContent({
   labels: { id: string; name: string; color: string }[];
   stories: { id: string; identifier: string; name: string; state: StoryState }[];
   relationsData: RelationsData;
+  iterations: import("@/server/serverFns/iteration/schemas").IterationSummary[];
   onStoryUpdate: (s: StoryDetail) => void;
   onAppendActivities: (items: ActivityItem[]) => void;
   onRelationsUpdate: (next: RelationsData | ((prev: RelationsData) => RelationsData)) => void;
@@ -123,6 +126,7 @@ function StoryDetailContent({
         stories={stories}
         projects={projects}
         relationsData={relationsData}
+        iterations={iterations}
         onRelationsUpdate={onRelationsUpdate}
         onStoryUpdate={onStoryUpdate}
         onAppendActivities={onAppendActivities}

package/src/routes/_nav/stories/$storyId/route.tsx

@@ -33,6 +33,7 @@ import {
   getLinkedDocsFn,
 } from "@/server/serverFns/story";
 import { listProjectsBriefFn } from "@/server/serverFns/project";
+import { listIterationsFn } from "@/server/serverFns/iteration";
 import type { RelationsData, StoryListItem } from "@/components/story/types";
 
 function StoryDetailSkeleton() {
@@ -98,6 +99,7 @@ export const Route = createFileRoute("/_nav/stories/$storyId")({
       attachments,
       prds,
       docs,
+      iterationsResult,
     ] = await Promise.all([
       listUsersBriefFn({ data: story.projectId ? { projectId: story.projectId } : undefined }),
       listCommentsFn({ data: { storyId: params.storyId } }),
@@ -112,6 +114,7 @@ export const Route = createFileRoute("/_nav/stories/$storyId")({
       getAttachmentsFn({ data: { storyId: params.storyId } }),
       getLinkedPrdsFn({ data: { storyId: params.storyId } }),
       getLinkedDocsFn({ data: { storyId: params.storyId } }),
+      story.projectId ? listIterationsFn({ data: { projectId: story.projectId, includeArchived: false } }) : Promise.resolve({ items: [] }),
     ]);
 
     const relationsData: RelationsData = {
@@ -136,6 +139,7 @@ export const Route = createFileRoute("/_nav/stories/$storyId")({
       labels,
       stories: storiesResult.items,
       relationsData,
+      iterations: iterationsResult.items,
     };
   },
   pendingComponent: StoryDetailSkeleton,

package/src/routes/_nav/workspaces/$workspaceId/route.lazy.tsx

@@ -23,7 +23,7 @@ import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { GlyphMatrix } from "@/components/magicui/glyph-matrix";
-import { ProjectIconDisplay } from "@/components/project/project-icon";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
 import { CreateProjectDialog } from "@/components/project/create-project-dialog";
 
 type DetailData = ReturnType<typeof import("@/server/serverFns/workspace")["getWorkspaceDetailFn"]> extends Promise<infer T>
@@ -52,7 +52,7 @@ function WorkspaceDetailPage() {
       <div className="relative z-10 mx-auto max-w-6xl px-6 py-6">
         <div className="flex flex-col items-center text-center py-10 mb-8">
           <div className="flex size-16 items-center justify-center rounded-xl bg-primary/10 mb-4">
-            <ProjectIconDisplay name={workspace.icon} size={32} className="text-primary" />
+            <LucideIconByName name={workspace.icon} size={32} className="text-primary" />
           </div>
           <div className="flex items-center justify-center gap-3">
             <h1 className="text-2xl font-semibold">{workspace.name}</h1>
@@ -105,7 +105,7 @@ function WorkspaceDetailPage() {
                 />
                 <div className="flex items-start justify-between">
                   <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
-                    <ProjectIconDisplay name={project.icon} size={20} />
+                    <LucideIconByName name={project.icon} size={20} />
                   </div>
                 </div>
                 <h3 className="mt-4 font-medium text-lg">{project.name}</h3>

package/src/routes/_nav/workspaces/$workspaceId/settings/route.lazy.tsx

@@ -26,8 +26,8 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { IconPicker } from "@/components/shared/icon-picker";
-import { PROJECT_ICONS } from "@/components/shared/icon-packs/project";
+import { LucideIconPicker } from "@/components/shared/lucide-icon-picker";
+
 import { NameConfirmDialog } from "@/components/shared/name-confirm-dialog";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
@@ -121,9 +121,9 @@ function WorkspaceSettingsPage() {
               <CardTitle>{t("settings.basicInfo")}</CardTitle>
             </CardHeader>
             <CardContent className="space-y-5">
-              <div className="flex flex-col gap-3">
+              <div className="flex items-center gap-3">
                 <Label>{t("settings.icon")}</Label>
-                <IconPicker icons={PROJECT_ICONS} value={icon} onChange={setIcon} />
+                <LucideIconPicker value={icon} onChange={setIcon} />
               </div>
               <div className="grid gap-2">
                 <Label htmlFor="ws-name">{t("settings.nameLabel")}</Label>

package/src/routes/_nav/workspaces/index.lazy.tsx

@@ -23,7 +23,7 @@ import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { GlyphMatrix } from "@/components/magicui/glyph-matrix";
-import { ProjectIconDisplay } from "@/components/project/project-icon";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
 import { CreateWorkspaceDialog } from "@/components/workspace/create-workspace-dialog";
 
 type WorkspaceList = ReturnType<typeof import("@/server/serverFns/workspace")["listWorkspacesFn"]> extends Promise<infer T> ? T : never;
@@ -43,7 +43,7 @@ function WorkspacesIndexPage() {
       <div className="relative z-10 mx-auto max-w-6xl px-6 py-6">
         <div className="relative mb-10 mt-2 flex flex-col items-center py-10 text-center">
           <div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 mb-4">
-            <ProjectIconDisplay name="folder-kanban" size={28} className="text-primary" />
+            <LucideIconByName name="folder-kanban" size={28} className="text-primary" />
           </div>
           <h1 className="text-2xl font-semibold">{t("list.title")}</h1>
           <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
@@ -77,7 +77,7 @@ function WorkspacesIndexPage() {
                 <div className="flex-1">
                   <div className="flex items-start justify-between">
                     <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
-                      <ProjectIconDisplay name={workspace.icon} size={20} />
+                      <LucideIconByName name={workspace.icon} size={20} />
                     </div>
                   </div>
                   <h3 className="mt-4 font-medium text-lg">{workspace.name}</h3>