@allbluecn/web-app 0.3.0

package/src/components/project/create-project-dialog.tsx

@@ -0,0 +1,258 @@
+// 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 { useTranslation } from "react-i18next";
+import { useQuery } from "@tanstack/react-query";
+import { useForm } from "@tanstack/react-form";
+import { useRouter } from "@tanstack/react-router";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { IconPicker } from "@/components/shared/icon-picker";
+import { PROJECT_ICONS } from "@/components/shared/icon-packs/project";
+import { extractDisplayId, validateDisplayId } from "@/lib/project-display-id";
+import { checkDisplayIdAvailableFn, createProjectFn } from "@/server/serverFns/project";
+import { listWorkspacesBriefFn } from "@/server/serverFns/workspace";
+import { createProjectSchema, type CreateProjectValues } from "./schemas/create-project";
+
+interface CreateProjectDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess?: () => void;
+  defaultWorkspaceId?: string;
+  defaultWorkspaceName?: string;
+}
+
+export function CreateProjectDialog({
+  open,
+  onOpenChange,
+  onSuccess,
+  defaultWorkspaceId,
+  defaultWorkspaceName,
+}: CreateProjectDialogProps) {
+  const { t } = useTranslation("projects");
+  const router = useRouter();
+  const [displayIdEdited, setDisplayIdEdited] = useState(false);
+  const [displayIdError, setDisplayIdError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const { data: workspaces = [] } = useQuery({
+    queryKey: ["workspaces-brief"],
+    queryFn: () => listWorkspacesBriefFn(),
+    enabled: open && !defaultWorkspaceId,
+  });
+
+  const form = useForm({
+    defaultValues: {
+      name: "",
+      description: "",
+      icon: "folder-kanban",
+      displayId: "",
+      workspaceId: defaultWorkspaceId ?? "",
+    },
+    validators: [{ run: createProjectSchema as any, triggers: ['change'] }],
+  });
+
+  const handleNameChange = (value: string) => {
+    form.setFieldValue("name", value);
+    if (!displayIdEdited) {
+      form.setFieldValue("displayId", extractDisplayId(value));
+      setDisplayIdError("");
+    }
+  };
+
+  const handleDisplayIdChange = (value: string) => {
+    const upper = value.toUpperCase();
+    form.setFieldValue("displayId", upper);
+    setDisplayIdEdited(true);
+    setDisplayIdError(validateDisplayId(upper) ?? "");
+  };
+
+  const handleSubmit = async () => {
+    if (!form.state.values.name.trim()) {
+      setError(t("project.create.nameRequired"));
+      return;
+    }
+    const idError = validateDisplayId(form.state.values.displayId);
+    if (idError) {
+      setError(idError);
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+       const project = await createProjectFn({
+         data: {
+           icon: form.state.values.icon,
+           name: form.state.values.name.trim(),
+           description: form.state.values.description.trim(),
+           displayId: form.state.values.displayId.toUpperCase(),
+           workspaceId: form.state.values.workspaceId,
+         },
+       });
+      onOpenChange(false);
+      onSuccess?.();
+      window.dispatchEvent(new CustomEvent("project-created"));
+      await router.navigate({ to: "/projects/$projectId", params: { projectId: project.id } });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t("project.create.failed"));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    if (newOpen) {
+      form.setFieldValue("icon", "folder-kanban");
+      form.setFieldValue("name", "");
+      form.setFieldValue("description", "");
+      form.setFieldValue("displayId", "");
+      form.setFieldValue("workspaceId", defaultWorkspaceId ?? "");
+      setDisplayIdEdited(false);
+      setDisplayIdError("");
+      setError("");
+    }
+    onOpenChange(newOpen);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-200">
+        <DialogHeader className="p-4">
+          <DialogTitle>{t("project.create.title")}</DialogTitle>
+          <DialogDescription>{t("project.create.description")}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 p-4">
+          <div className="flex flex-col gap-3 mb-20">
+            <form.Field name="icon" children={(field) => (
+              <IconPicker
+                icons={PROJECT_ICONS}
+                value={field.value ?? "folder-kanban"}
+                onChange={(v) => field.handleChange(v)}
+              />
+            )} />
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <label className="text-sm font-medium ml-2">{t("project.create.nameLabel")} *</label>
+            <form.Field name="name" children={(field) => (
+              <Input
+                value={field.value ?? ""}
+                onChange={(e) => handleNameChange(e.target.value)}
+                onBlur={field.handleBlur}
+                placeholder={t("project.create.namePlaceholder")}
+                maxLength={100}
+              />
+            )} />
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <label className="text-sm font-medium ml-2">{t("project.create.idLabel")} *</label>
+            <form.Field name="displayId" children={(field) => (
+              <Input
+                value={field.value ?? ""}
+                onChange={(e) => handleDisplayIdChange(e.target.value)}
+                onBlur={async () => {
+                  field.handleBlur();
+if (!field.value || validateDisplayId(field.value)) return;
+                  const res = await checkDisplayIdAvailableFn({ data: { displayId: field.value } });
+                  setDisplayIdError(res.available ? "" : res.reason ?? t("project.create.idUnavailable"));
+                }}
+                placeholder={t("project.create.idPlaceholder")}
+                maxLength={10}
+                className={displayIdError ? "border-destructive" : ""}
+              />
+            )} />
+            {displayIdError && (
+              <span className="ml-2 text-xs text-destructive">{displayIdError}</span>
+            )}
+          </div>
+
+          <div className="flex flex-col gap-3">
+            <label className="text-sm font-medium ml-2">{t("project.create.workspaceLabel")} *</label>
+            {defaultWorkspaceId ? (
+              <span className="ml-2 px-3 py-2 rounded-md bg-muted border text-sm">
+                {defaultWorkspaceName ?? t("project.create.workspaceSelected")}
+              </span>
+            ) : (
+              <form.Field name="workspaceId" children={(field) => (
+                <Select
+                  value={field.value ?? ""}
+                  onValueChange={(v) => field.handleChange(v)}
+                >
+                  <SelectTrigger className="ml-2">
+                    <SelectValue placeholder={t("project.create.workspacePlaceholder")} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {workspaces.map((ws) => (
+                      <SelectItem key={ws.id} value={ws.id}>
+                        {ws.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )} />
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium ml-2">{t("project.create.introLabel")}</label>
+            <form.Field name="description" children={(field) => (
+              <Textarea
+                value={field.value ?? ""}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+                placeholder={t("project.create.introPlaceholder")}
+                maxLength={500}
+                rows={3}
+              />
+            )} />
+          </div>
+
+          {error && <p className="text-sm text-destructive break-words">{error}</p>}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => handleOpenChange(false)}>
+            {t("button.cancel")}
+          </Button>
+          <Button onClick={handleSubmit} disabled={loading}>
+            {loading ? t("project.create.creating") : t("button.create")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/project/invite-member-dialog.tsx

@@ -0,0 +1,229 @@
+// 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, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useForm } from "@tanstack/react-form";
+import { Loader2 } from "lucide-react";
+import { toast } from '@/components/ui/sonner';
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { addProjectMemberFromTeamFn } from "@/server/serverFns/project";
+import { listTeamUsersFn } from "@/server/serverFns/team";
+import type { ProjectRole } from "@/types/project";
+import { UserAvatar } from "@allbluecn/ui";
+
+interface AssignMemberDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectId: string;
+  onSuccess?: () => void;
+}
+
+interface TeamMember {
+  id: string;
+  username: string;
+  email: string;
+  avatarConfig: string | null;
+  bgShape: string | null;
+  bgColor: string | null;
+  seatType: 'owner' | 'member' | 'guest';
+}
+
+const ROLE_OPTIONS: { value: Exclude<ProjectRole, "owner">; labelKey: string; descKey: string }[] = [
+  { value: "admin", labelKey: "project.invite.adminLabel", descKey: "project.invite.adminDesc" },
+  { value: "member", labelKey: "project.invite.memberLabel", descKey: "project.invite.memberDesc" },
+  { value: "viewer", labelKey: "project.invite.viewerLabel", descKey: "project.invite.viewerDesc" },
+];
+
+export function InviteMemberDialog({
+  open,
+  onOpenChange,
+  projectId,
+  onSuccess,
+}: AssignMemberDialogProps) {
+  const { t } = useTranslation("projects");
+  const [loading, setLoading] = useState(false);
+  const [members, setMembers] = useState<TeamMember[]>([]);
+  const [loadingMembers, setLoadingMembers] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  useEffect(() => {
+    if (open) {
+      setLoadingMembers(true);
+      listTeamUsersFn().then((data) => {
+        setMembers(data as TeamMember[]);
+        setLoadingMembers(false);
+      }).catch(() => setLoadingMembers(false));
+    }
+  }, [open]);
+
+  const form = useForm({
+    defaultValues: {
+      userId: "",
+      role: "member" as Exclude<ProjectRole, "owner">,
+    },
+  });
+
+  const filteredMembers = members.filter((m) =>
+    m.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    m.email?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleSubmit = async () => {
+    const selectedUserId = form.state.values.userId;
+    if (!selectedUserId) {
+      toast.error(t("project.invite.selectMember"));
+      return;
+    }
+    setLoading(true);
+    try {
+      await addProjectMemberFromTeamFn({
+        data: {
+          projectId,
+          userId: selectedUserId,
+          role: form.state.values.role,
+        },
+      });
+      toast.success(t("project.invite.added"));
+      form.setFieldValue("userId", "");
+      form.setFieldValue("role", "member");
+      onOpenChange(false);
+      onSuccess?.();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : t("project.invite.inviteFailed"));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(v) => {
+        if (!v) {
+          form.setFieldValue("userId", "");
+          form.setFieldValue("role", "member");
+          setSearchQuery("");
+        }
+        onOpenChange(v);
+      }}
+    >
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("project.invite.title")}</DialogTitle>
+          <DialogDescription>{t("project.invite.description")}</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-2">
+          <div className="grid gap-2">
+            <Label>{t("project.invite.selectMember")}</Label>
+            <Input
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder={t("project.invite.searchMember")}
+            />
+            <div className="max-h-48 overflow-y-auto border rounded-md">
+              {loadingMembers ? (
+                <div className="flex items-center justify-center py-6">
+                  <Loader2 className="size-4 animate-spin" />
+                </div>
+              ) : filteredMembers.length === 0 ? (
+                <div className="py-6 text-center text-sm text-muted-foreground">
+                  {t("project.invite.noMembers")}
+                </div>
+              ) : (
+                filteredMembers.map((member) => (
+                  <label
+                    key={member.id}
+                    className="flex items-center gap-3 px-3 py-2 hover:bg-accent cursor-pointer"
+                  >
+                    <input
+                      type="radio"
+                      name="member"
+                      value={member.id}
+                      checked={form.state.values.userId === member.id}
+                      onChange={(e) => form.setFieldValue("userId", e.target.value)}
+                      className="accent-primary"
+                    />
+                    <UserAvatar
+                      name={member.username}
+                      avatarConfig={member.avatarConfig as any}
+                      bgShape={member.bgShape as any}
+                      bgColor={member.bgColor}
+                      imageUrl={undefined}
+                      size="sm"
+                    />
+                    <span className="text-sm font-medium">{member.username}</span>
+                    <span className="text-xs text-muted-foreground ml-auto">
+                      {member.seatType === 'owner' ? t('project.invite.owner') :
+                       member.seatType === 'guest' ? t('project.invite.guest') :
+                       t('project.invite.member')}
+                    </span>
+                  </label>
+                ))
+              )}
+            </div>
+          </div>
+          <div className="grid gap-2">
+            <Label>{t("project.invite.roleLabel")}</Label>
+            <form.Field name="role" children={(field) => (
+              <Select
+                value={field.value ?? "member"}
+                onValueChange={(v) => field.handleChange(v as Exclude<ProjectRole, "owner">)}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {ROLE_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {t(opt.labelKey)} · {t(opt.descKey)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )} />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t("button.cancel")}
+          </Button>
+          <Button onClick={handleSubmit} disabled={loading}>
+            {loading ? <Loader2 className="size-4 animate-spin" /> : t("project.invite.sendInvite")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/project/project-activity-list.tsx

@@ -0,0 +1,114 @@
+// 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 { useTranslation } from "react-i18next"
+import { getClientI18n } from "@/lib/i18n/client"
+import { UserAvatar } from "@allbluecn/ui";
+import type { AvatarConfig, ShapeType } from "@allbluecn/shared";
+import { cn } from "@/lib/utils";
+import { formatDate } from "@/lib/datetime";
+import { useTimezone } from "@/providers/timezone-provider";
+import type { ProjectActivity } from "@/types/project";
+
+const ACTION_TEXT: Record<string, string> = {
+  created: "project.activity.created",
+  updated: "project.activity.updated",
+  deleted: "project.activity.deleted",
+  member_invited: "project.activity.memberInvited",
+  member_joined: "project.activity.memberJoined",
+  member_removed: "project.activity.memberRemoved",
+  role_changed: "project.activity.roleChanged",
+  module_viewed: "project.activity.moduleViewed",
+};
+
+function relativeTime(date: Date, timezone: string): string {
+  const diff = Date.now() - new Date(date).getTime();
+  const minutes = Math.floor(diff / 60000);
+  const i18n = getClientI18n()
+  if (minutes < 1) return i18n.t("project.activity.justNow");
+  if (minutes < 60) return i18n.t("project.activity.minutesAgo", { count: minutes });
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return i18n.t("project.activity.hoursAgo", { count: hours });
+  const days = Math.floor(hours / 24);
+  if (days < 30) return i18n.t("project.activity.daysAgo", { count: days });
+  return formatDate(date, timezone, getClientI18n().t('projects:project.activity.dateFormat'));
+}
+
+interface ProjectActivityListProps {
+  activities: ProjectActivity[];
+  className?: string;
+}
+
+export function ProjectActivityList({
+  activities,
+  className,
+}: ProjectActivityListProps) {
+  const timezone = useTimezone();
+  const { t } = useTranslation("projects");
+
+  if (activities.length === 0) {
+    return (
+      <div className="rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground">
+        {t("project.activity.noRecords")}
+      </div>
+    );
+  }
+
+  return (
+    <ol className={cn("space-y-1", className)}>
+      {activities.map((activity, idx) => {
+        const isLast = idx === activities.length - 1;
+        const actionKey = ACTION_TEXT[activity.action] ?? activity.action;
+        const actionText = t(actionKey, { defaultValue: actionKey });
+        const meta = activity.metadata;
+        const invitedName =
+          meta && typeof meta === "object" && !Array.isArray(meta) && "username" in meta
+            ? (meta as { username: unknown }).username
+            : null;
+        return (
+          <li key={activity.id} className="relative flex gap-3 pb-4">
+            {!isLast && (
+              <span
+                className="absolute top-9 left-4 h-[calc(100%-1.5rem)] w-px bg-border"
+                aria-hidden
+              />
+            )}
+            <UserAvatar
+              name={activity.user?.username}
+              avatarConfig={activity.user?.avatarConfig as AvatarConfig | undefined}
+              bgShape={activity.user?.bgShape as ShapeType | undefined}
+              bgColor={activity.user?.bgColor ?? undefined}
+              size="md"
+            />
+            <div className="flex min-w-0 flex-1 flex-col gap-0.5 pt-1">
+              <p className="text-sm leading-snug">
+                <span className="font-medium">{activity.user?.username ?? t("project.activity.unknownUser")}</span>
+                <span className="text-muted-foreground"> {actionText}</span>
+                {typeof invitedName === "string" && (
+                  <span className="text-muted-foreground"> · {invitedName}</span>
+                )}
+              </p>
+              <span className="text-xs text-muted-foreground">
+                {relativeTime(activity.createdAt, timezone)}
+              </span>
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/src/components/project/project-animated-icon.tsx

@@ -0,0 +1,73 @@
+// 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 type { ComponentType } from "react";
+import { FolderKanbanIcon } from "@/components/animated-icons/folder-kanban";
+import { BriefcaseBusinessIcon } from "@/components/animated-icons/briefcase-business";
+import { RocketIcon } from "@/components/animated-icons/rocket";
+import { FlaskIcon } from "@/components/animated-icons/flask";
+import { TerminalIcon } from "@/components/animated-icons/terminal";
+import { ContrastIcon } from "@/components/animated-icons/contrast";
+import { MessageSquareIcon } from "@/components/animated-icons/message-square";
+import { GraduationCapIcon } from "@/components/animated-icons/graduation-cap";
+import { HeartPulseIcon } from "@/components/animated-icons/heart-pulse";
+import { CartIcon } from "@/components/animated-icons/cart";
+import { LayersIcon } from "@/components/animated-icons/layers";
+import { UsersIcon } from "@/components/animated-icons/users";
+import { EarthIcon } from "@/components/animated-icons/earth";
+import { SparklesIcon } from "@/components/animated-icons/sparkles";
+import { CompassIcon } from "@/components/animated-icons/compass";
+import { ShieldCheckIcon } from "@/components/animated-icons/shield-check";
+import { cn } from "@/lib/utils";
+
+type AnimatedIconComp = ComponentType<{ size?: number; className?: string }>;
+
+// 项目动画图标映射（value 与 PROJECT_ICONS 一一对应）
+// 仅用于项目详情页顶部展示，其他位置用 ProjectIconDisplay（静态）
+const ANIMATED_MAP: Record<string, AnimatedIconComp> = {
+  "folder-kanban": FolderKanbanIcon,
+  "briefcase-business": BriefcaseBusinessIcon,
+  rocket: RocketIcon,
+  flask: FlaskIcon,
+  terminal: TerminalIcon,
+  contrast: ContrastIcon,
+  "message-square": MessageSquareIcon,
+  "graduation-cap": GraduationCapIcon,
+  "heart-pulse": HeartPulseIcon,
+  cart: CartIcon,
+  layers: LayersIcon,
+  users: UsersIcon,
+  earth: EarthIcon,
+  sparkles: SparklesIcon,
+  compass: CompassIcon,
+  "shield-check": ShieldCheckIcon,
+};
+
+interface ProjectAnimatedIconProps {
+  name?: string;
+  size?: number;
+  className?: string;
+}
+
+export function ProjectAnimatedIcon({
+  name,
+  size = 24,
+  className,
+}: ProjectAnimatedIconProps) {
+  const Icon = ANIMATED_MAP[name ?? ""] ?? FolderKanbanIcon;
+  return <Icon size={size} className={cn(className)} />;
+}