@allbluecn/web-app 0.9.5 → 0.10.2

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

@@ -15,128 +15,223 @@
 // 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 { createLazyFileRoute, Link } from "@tanstack/react-router";
-import { Settings, FolderKanban, Users, Plus, Box } from "lucide-react";
-import { useState } from "react";
+import { createLazyFileRoute, Link, useRouter } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
 import { useTheme } from "next-themes";
-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 { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
 import { CreateProjectDialog } from "@/components/project/create-project-dialog";
+import { EditWorkspaceDialog } from "@/components/workspace/edit-workspace-dialog";
+import { NameConfirmDialog } from "@/components/shared-kit/dialogs/name-confirm-dialog";
+import { DeleteWorkspaceOptions } from "@/components/workspace/delete-workspace-options";
+import {
+  deleteWorkspaceFn,
+  listWorkspaceMembersFn,
+  listWorkspacesFn,
+} from "@/server/serverFns/workspace";
+import { deleteProjectFn } from "@/server/serverFns/project";
+import { WorkspaceHeader } from "@/components/workspace/workspace-header";
+import { WorkspaceKbCard } from "@/components/workspace/workspace-kb-card";
+import { WorkspaceContributionCard } from "@/components/workspace/workspace-contribution-card";
+import { WorkspaceProjectList } from "@/components/workspace/workspace-project-list";
+import { WorkspaceActivityCard } from "@/components/workspace/workspace-activity-card";
+import { WorkspaceMembersManager } from "@/components/workspace/workspace-members-manager";
+import { m } from "@/paraglide/messages.js";
 
-type DetailData = ReturnType<typeof import("@/server/serverFns/workspace")["getWorkspaceDetailFn"]> extends Promise<infer T>
-  ? { workspace: T; projects: {
-      id: string;
-      name: string;
-      description: string | null;
-      icon: string;
-      updatedAt: Date;
-      _count: { members: number };
-    }[] }
-  : never;
+type DetailData = {
+  workspace: {
+    id: string;
+    name: string;
+    description: string | null;
+    icon: string;
+    ownerId: string;
+    _count: { projects: number };
+  };
+  projects: {
+    id: string;
+    name: string;
+    description: string | null;
+    icon: string;
+    updatedAt: Date;
+    _count: { members: number };
+  }[];
+  activities: {
+    id: string;
+    projectId: string;
+    userId: string;
+    action: string;
+    targetType: string | null;
+    targetId: string | null;
+    metadata: unknown;
+    createdAt: Date;
+    user?: { id: string; username: string; email: string; avatarConfig?: unknown; bgShape?: string | null; bgColor?: string | null };
+    project?: { id: string; name: string };
+  }[];
+  contributionData: { date: string; count: number; level: number }[];
+  members: {
+    id: string;
+    userId: string;
+    role: string;
+    status: string;
+    joinedAt: Date;
+    user?: { id: string; username: string; email: string; avatarConfig?: unknown; bgShape?: string | null; bgColor?: string | null };
+  }[];
+};
 
 function WorkspaceDetailPage() {
-  const { t } = useTranslation("workspace");
-  const { workspace, projects } = Route.useLoaderData() as DetailData;
-  const [createOpen, setCreateOpen] = useState(false);
+  const { workspace, projects, activities, contributionData, members } = Route.useLoaderData() as DetailData;
+  const [editOpen, setEditOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [projectEditOpen, setProjectEditOpen] = useState(false);
+  const [projectDeleteOpen, setProjectDeleteOpen] = useState(false);
+  const [selectedProject, setSelectedProject] = useState<{ id: string; name: string; icon: string; description: string | null } | null>(null);
+  const [deleteMode, setDeleteMode] = useState<"transfer" | "clear">("clear");
+  const [storyMode, setStoryMode] = useState<"transfer" | "clear">("transfer");
+  const [knowledgeBaseMode, setKnowledgeBaseMode] = useState<"delete" | "keep">("keep");
+  const [targetWorkspaceId, setTargetWorkspaceId] = useState("");
+  const [workspaceOptions, setWorkspaceOptions] = useState<{ id: string; name: string }[]>([]);
+  const router = useRouter();
   const { resolvedTheme } = useTheme();
   const glyphColor = resolvedTheme === "dark" ? "#6b7280" : "#9ca3af";
 
+  useEffect(() => {
+    if (!deleteOpen) return;
+    setDeleteMode("clear");
+    setStoryMode("transfer");
+    setKnowledgeBaseMode("keep");
+    setTargetWorkspaceId("");
+    listWorkspacesFn()
+      .then((list) => setWorkspaceOptions(list.map((ws) => ({ id: ws.id, name: ws.name }))))
+      .catch(() => setWorkspaceOptions([]));
+  }, [deleteOpen]);
+
+  const handleDeleteWorkspace = async () => {
+    if (workspace._count.projects > 0 && deleteMode === "transfer" && !targetWorkspaceId) {
+      throw new Error(m.workspace_list_transferTargetRequired());
+    }
+    await deleteWorkspaceFn({
+      data: {
+        workspaceId: workspace.id,
+        mode: deleteMode,
+        ...(deleteMode === "clear" ? { storyMode } : {}),
+        knowledgeBaseMode,
+        ...(deleteMode === "transfer" && targetWorkspaceId ? { targetWorkspaceId } : {}),
+      },
+    });
+    window.dispatchEvent(new CustomEvent("workspace-deleted"));
+    setDeleteOpen(false);
+    await router.invalidate();
+    await router.navigate({ to: "/workspaces" });
+  };
+
+  const handleEditProject = (proj: { id: string; name: string; icon: string; description: string | null }) => {
+    setSelectedProject(proj);
+    setProjectEditOpen(true);
+  };
+
+  const handleDeleteProject = async () => {
+    if (!selectedProject) return;
+    try {
+      await deleteProjectFn({ data: { projectId: selectedProject.id } });
+      window.dispatchEvent(new CustomEvent("project-deleted"));
+    } finally {
+      setProjectDeleteOpen(false);
+      setSelectedProject(null);
+    }
+  };
+
   return (
     <div className="relative h-full overflow-y-auto overflow-x-hidden">
       <div className="pointer-events-none absolute inset-x-0 top-0 h-72 overflow-hidden">
         <GlyphMatrix className="absolute inset-0 h-full w-full" color={glyphColor} fadeBottom={0.85} glyphs="01·•+*/\\<>=" />
       </div>
-      <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">
-            <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>
-            <Button variant="ghost" size="sm" asChild>
-              <Link to="/workspaces/$workspaceId/settings" params={{ workspaceId: workspace.id }}>
-                <Settings className="size-4" />
-              </Link>
-            </Button>
+      <div className="relative z-10 mx-auto max-w-2xl px-6 py-6">
+        <WorkspaceHeader
+          workspace={workspace}
+          onEdit={() => setEditOpen(true)}
+          onDelete={() => setDeleteOpen(true)}
+        />
+        <WorkspaceKbCard />
+        <div className="grid gap-6 lg:grid-cols-3">
+          <div className="lg:col-span-2 space-y-6">
+            <WorkspaceContributionCard data={contributionData} />
+            <WorkspaceProjectList
+              projects={projects}
+              workspaceId={workspace.id}
+              workspaceName={workspace.name}
+            />
           </div>
-          <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
-            {workspace.description || t("detail.noDescription")}
-          </p>
-          <div className="mt-4 flex items-center gap-6 text-sm text-muted-foreground">
-            <span className="flex items-center gap-1.5">
-              <FolderKanban className="size-4" />
-              {workspace._count.projects} {t("detail.projects")}
-            </span>
+          <div className="lg:col-span-1 flex flex-col gap-6">
+            <WorkspaceActivityCard activities={activities} workspaceId={workspace.id} />
+            <WorkspaceMembersManager
+              workspaceId={workspace.id}
+              workspaceOwnerId={workspace.ownerId}
+              members={members}
+              onMembersUpdated={() => window.dispatchEvent(new CustomEvent("workspace-members-updated"))}
+            />
           </div>
         </div>
-
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-medium">{t("detail.projects")}</h2>
-          <Button onClick={() => setCreateOpen(true)} size="sm">
-            <Plus className="size-4" />
-            {t("detail.createProject")}
-          </Button>
-        </div>
-
-        {projects.length === 0 ? (
-          <Card className="flex flex-col items-center justify-center gap-4 p-16 text-center mt-20">
-            <div className="flex size-14 items-center justify-center rounded-full bg-muted">
-              <Box className="size-7 text-muted-foreground" />
-            </div>
-            <div>
-              <h2 className="text-lg font-medium">{t("detail.emptyProjectsTitle")}</h2>
-              <p className="mt-1 text-sm text-muted-foreground">
-                {t("detail.emptyProjectsDescription")}
-              </p>
-            </div>
-          </Card>
-        ) : (
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 mt-4">
-            {projects.map((project) => (
-              <Card key={project.id} className="group relative p-5 transition-colors hover:bg-accent/40 border rounded-lg">
-                <Link
-                  to="/projects/$projectId"
-                  params={{ projectId: project.id }}
-                  className="absolute inset-0"
-                  aria-label={project.name}
-                />
-                <div className="flex items-start justify-between">
-                  <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
-                    <LucideIconByName name={project.icon} size={20} />
-                  </div>
-                </div>
-                <h3 className="mt-4 font-medium text-lg">{project.name}</h3>
-                <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
-                  {project.description || t("detail.noDescription")}
-                </p>
-                <div className="mt-4 flex items-center gap-4 text-xs text-muted-foreground">
-                  <span className="flex items-center gap-1">
-                    <Users className="size-3.5" />
-                    {project._count.members} {t("detail.members")}
-                  </span>
-                  <span className="flex items-center gap-1">
-                    <span>{new Intl.DateTimeFormat("zh-CN", { month: "short", day: "numeric" }).format(new Date(project.updatedAt))}</span>
-                  </span>
-                </div>
-              </Card>
-            ))}
-          </div>
-        )}
       </div>
 
-      <CreateProjectDialog
-        open={createOpen}
-        onOpenChange={setCreateOpen}
-        defaultWorkspaceId={workspace.id}
-        defaultWorkspaceName={workspace.name}
+      <EditWorkspaceDialog
+        open={editOpen}
+        onOpenChange={setEditOpen}
+        workspace={{ id: workspace.id, name: workspace.name, icon: workspace.icon, description: workspace.description ?? null }}
+        onSuccess={() => window.dispatchEvent(new CustomEvent("workspace-updated"))}
       />
+      <NameConfirmDialog
+        open={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        title={m.workspace_settings_deleteWorkspace()}
+        description={m.workspace_settings_confirmDeleteDescription({ name: workspace.name })}
+        confirmText={m.workspace_settings_confirmDelete()}
+        expectedName={workspace.name}
+        onConfirm={handleDeleteWorkspace}
+      >
+        <DeleteWorkspaceOptions
+          projectCount={workspace._count.projects}
+          deleteMode={deleteMode}
+          onDeleteModeChange={setDeleteMode}
+          storyMode={storyMode}
+          onStoryModeChange={setStoryMode}
+          knowledgeBaseMode={knowledgeBaseMode}
+          onKnowledgeBaseModeChange={setKnowledgeBaseMode}
+          targetWorkspaceId={targetWorkspaceId}
+          onTargetWorkspaceIdChange={setTargetWorkspaceId}
+          excludeWorkspaceId={workspace.id}
+          workspaceOptions={workspaceOptions}
+        />
+      </NameConfirmDialog>
+      {selectedProject && (
+        <>
+          <CreateProjectDialog
+            open={projectEditOpen}
+            onOpenChange={setProjectEditOpen}
+            editMode
+            defaultValues={{
+              id: selectedProject.id,
+              name: selectedProject.name,
+              icon: selectedProject.icon,
+              description: selectedProject.description ?? "",
+            }}
+            defaultWorkspaceId={workspace.id}
+            defaultWorkspaceName={workspace.name}
+            onSuccess={() => window.dispatchEvent(new CustomEvent("project-updated"))}
+          />
+          <NameConfirmDialog
+            open={projectDeleteOpen}
+            onOpenChange={setProjectDeleteOpen}
+            title={m.projects_settings_deleteProject()}
+            description={m.projects_settings_confirmDeleteDesc({ projectName: selectedProject.name })}
+            confirmText={m.projects_settings_confirmDelete()}
+            expectedName={selectedProject.name}
+            onConfirm={handleDeleteProject}
+          />
+        </>
+      )}
     </div>
   );
 }
 
 export const Route = createLazyFileRoute("/_nav/workspaces/$workspaceId")({
   component: WorkspaceDetailPage,
-});
+});

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

@@ -16,15 +16,24 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createFileRoute } from "@tanstack/react-router";
-import { getWorkspaceDetailFn, listWorkspaceProjectsFn } from "@/server/serverFns/workspace";
+import {
+  getWorkspaceDetailFn,
+  listWorkspaceProjectsFn,
+  listWorkspaceActivitiesFn,
+  getWorkspaceActivityDataFn,
+  listWorkspaceMembersFn,
+} from "@/server/serverFns/workspace";
 
 export const Route = createFileRoute("/_nav/workspaces/$workspaceId")({
   loader: async ({ params }) => {
-    const [workspace, projects] = await Promise.all([
+    const [workspace, projects, activities, contributionData, members] = await Promise.all([
       getWorkspaceDetailFn({ data: { workspaceId: params.workspaceId } }),
       listWorkspaceProjectsFn({ data: { workspaceId: params.workspaceId } }),
+      listWorkspaceActivitiesFn({ data: { workspaceId: params.workspaceId, take: 5 } }),
+      getWorkspaceActivityDataFn({ data: { workspaceId: params.workspaceId } }),
+      listWorkspaceMembersFn({ data: { workspaceId: params.workspaceId } }),
     ]);
-    return { workspace, projects };
+    return { workspace, projects, activities, contributionData, members };
   },
   pendingComponent: () => null,
 });

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

@@ -19,7 +19,6 @@ import { createLazyFileRoute, Link } from "@tanstack/react-router";
 import { useRouter } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 import { ArrowLeft, Loader2, Trash2 } from "lucide-react";
-import { useTranslation } from "react-i18next";
 import { toast } from "@/components/ui/sonner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -29,14 +28,15 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { LucideIconPicker } from "@/components/shared-kit/icons/lucide-icon-picker";
 
 import { NameConfirmDialog } from "@/components/shared-kit/dialogs/name-confirm-dialog";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { DeleteWorkspaceOptions } from "@/components/workspace/delete-workspace-options";
 import {
   updateWorkspaceFn,
   deleteWorkspaceFn,
+  listWorkspacesFn,
 } from "@/server/serverFns/workspace";
+import { m } from "@/paraglide/messages.js";
 
 function WorkspaceSettingsPage() {
-  const { t } = useTranslation("workspace");
   const router = useRouter();
   const { workspace } = Route.useLoaderData();
   const session = Route.useRouteContext({ select: (c) => c.session });
@@ -50,6 +50,22 @@ function WorkspaceSettingsPage() {
   const [saving, setSaving] = useState(false);
   const [deleteOpen, setDeleteOpen] = useState(false);
   const [deleteMode, setDeleteMode] = useState<"transfer" | "clear">("clear");
+  const [storyMode, setStoryMode] = useState<"transfer" | "clear">("transfer");
+  const [knowledgeBaseMode, setKnowledgeBaseMode] = useState<"delete" | "keep">("keep");
+  const [targetWorkspaceId, setTargetWorkspaceId] = useState("");
+  const [otherWorkspaces, setOtherWorkspaces] = useState<{ id: string; name: string }[]>([]);
+
+  useEffect(() => {
+    if (!deleteOpen) return;
+    setTargetWorkspaceId("");
+    listWorkspacesFn()
+      .then((list) =>
+        setOtherWorkspaces(
+          list.filter((ws) => ws.id !== workspace.id).map((ws) => ({ id: ws.id, name: ws.name })),
+        ),
+      )
+      .catch(() => setOtherWorkspaces([]));
+  }, [deleteOpen, workspace.id]);
 
   useEffect(() => {
     setIcon(workspace.icon);
@@ -59,7 +75,7 @@ function WorkspaceSettingsPage() {
 
   const handleSave = async () => {
     if (!name.trim()) {
-      toast.error(t("settings.nameRequired"));
+      toast.error(m.workspace_settings_nameRequired());
       return;
     }
     setSaving(true);
@@ -72,33 +88,38 @@ function WorkspaceSettingsPage() {
           description: description.trim() || null,
         },
       });
-      toast.success(t("settings.updateSuccess"));
+      toast.success(m.workspace_settings_updateSuccess());
       await router.invalidate();
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : t("settings.saveFailed"));
+      toast.error(err instanceof Error ? err.message : m.workspace_settings_saveFailed());
     } finally {
       setSaving(false);
     }
   };
 
   const handleDelete = async () => {
-    try {
-      const result = await deleteWorkspaceFn({
-        data: { workspaceId: workspace.id, mode: deleteMode },
-      });
-      if ((result as { needsChoice?: boolean }).needsChoice) return;
-      toast.success(t("settings.workspaceDeleted"));
-      await router.navigate({ to: "/workspaces" });
-    } catch (err) {
-      toast.error(err instanceof Error ? err.message : t("settings.deleteFailed"));
+    if (workspace._count.projects > 0 && deleteMode === "transfer" && !targetWorkspaceId) {
+      throw new Error(m.workspace_list_transferTargetRequired());
     }
+    const result = await deleteWorkspaceFn({
+      data: {
+        workspaceId: workspace.id,
+        mode: deleteMode,
+        ...(deleteMode === "clear" ? { storyMode } : {}),
+        knowledgeBaseMode,
+        ...(deleteMode === "transfer" && targetWorkspaceId ? { targetWorkspaceId } : {}),
+      },
+    });
+    if ((result as { needsChoice?: boolean }).needsChoice) return;
+    toast.success(m.workspace_settings_workspaceDeleted());
+    await router.navigate({ to: "/workspaces" });
   };
 
   const ROLE_BADGE: Record<string, { label: string; variant: "default" | "secondary" | "outline" }> = {
-    owner: { label: t("settings.roles.owner"), variant: "default" },
-    admin: { label: t("settings.roles.admin"), variant: "secondary" },
-    member: { label: t("settings.roles.member"), variant: "outline" },
-    viewer: { label: t("settings.roles.viewer"), variant: "outline" },
+    owner: { label: m.workspace_settings_roles_owner(), variant: "default" },
+    admin: { label: m.workspace_settings_roles_admin(), variant: "secondary" },
+    member: { label: m.workspace_settings_roles_member(), variant: "outline" },
+    viewer: { label: m.workspace_settings_roles_viewer(), variant: "outline" },
   };
 
   return (
@@ -108,25 +129,25 @@ function WorkspaceSettingsPage() {
           <Button variant="ghost" size="sm" asChild>
             <Link to="/workspaces/$workspaceId" params={{ workspaceId: workspace.id }}>
               <ArrowLeft className="size-4" />
-              {t("settings.back")}
+              {m.workspace_settings_back()}
             </Link>
           </Button>
         </div>
 
-        <h1 className="mb-6 text-2xl font-semibold">{t("settings.title")}</h1>
+        <h1 className="mb-6 text-2xl font-semibold">{m.workspace_settings_title()}</h1>
 
         {canEdit && (
           <Card className="mb-6">
             <CardHeader>
-              <CardTitle>{t("settings.basicInfo")}</CardTitle>
+              <CardTitle>{m.workspace_settings_basicInfo()}</CardTitle>
             </CardHeader>
             <CardContent className="space-y-5">
               <div className="flex items-center gap-3">
-                <Label>{t("settings.icon")}</Label>
+                <Label>{m.workspace_settings_icon()}</Label>
                 <LucideIconPicker value={icon} onChange={setIcon} />
               </div>
               <div className="grid gap-2">
-                <Label htmlFor="ws-name">{t("settings.nameLabel")}</Label>
+                <Label htmlFor="ws-name">{m.workspace_settings_nameLabel()}</Label>
                 <Input
                   id="ws-name"
                   value={name}
@@ -135,19 +156,19 @@ function WorkspaceSettingsPage() {
                 />
               </div>
               <div className="grid gap-2">
-                <Label htmlFor="ws-desc">{t("settings.descriptionLabel")}</Label>
+                <Label htmlFor="ws-desc">{m.workspace_settings_descriptionLabel()}</Label>
                 <Textarea
                   id="ws-desc"
                   value={description}
                   onChange={(e) => setDescription(e.target.value)}
                   maxLength={500}
                   rows={3}
-                  placeholder={t("settings.descriptionPlaceholder")}
+                  placeholder={m.workspace_settings_descriptionPlaceholder()}
                 />
               </div>
               <div className="flex justify-end">
                 <Button onClick={handleSave} disabled={saving}>
-                  {saving ? <Loader2 className="size-4 animate-spin" /> : t("settings.saveChanges")}
+                  {saving ? <Loader2 className="size-4 animate-spin" /> : m.workspace_settings_saveChanges()}
                 </Button>
               </div>
             </CardContent>
@@ -159,36 +180,38 @@ function WorkspaceSettingsPage() {
         {canDelete && (
           <Card className="border-destructive/40">
             <CardHeader>
-              <CardTitle className="text-destructive">{t("settings.dangerZone")}</CardTitle>
+              <CardTitle className="text-destructive">{m.workspace_settings_dangerZone()}</CardTitle>
             </CardHeader>
             <CardContent className="space-y-3">
               <p className="text-sm text-muted-foreground">
-                {t("settings.deleteDescription")}
+                {m.workspace_settings_deleteDescription()}
               </p>
               {workspace._count.projects > 0 ? (
                 <div className="space-y-3">
                   <p className="text-sm text-destructive">
-                    {t("settings.hasProjects", { count: workspace._count.projects })}
+                    {m.workspace_settings_hasProjects({ count: workspace._count.projects })}
                   </p>
                   <div className="flex gap-2">
                     <Button
                       variant="destructive"
                       onClick={() => {
                         setDeleteMode("clear");
+                        setStoryMode("transfer");
                         setDeleteOpen(true);
                       }}
                     >
-                      {t("settings.deleteClear")}
+                      {m.workspace_settings_deleteClear()}
                     </Button>
                     <Button
                       variant="outline"
                       className="text-destructive border-destructive/40"
                       onClick={() => {
-                        setDeleteMode("transfer");
-                        setDeleteOpen(true);
+                      setDeleteMode("transfer");
+                      setStoryMode("transfer");
+                      setDeleteOpen(true);
                       }}
                     >
-                      {t("settings.deleteTransfer")}
+                      {m.workspace_settings_deleteTransfer()}
                     </Button>
                   </div>
                 </div>
@@ -197,10 +220,11 @@ function WorkspaceSettingsPage() {
                   variant="destructive"
                   onClick={() => {
                     setDeleteMode("clear");
+                    setStoryMode("transfer");
                     setDeleteOpen(true);
                   }}
                 >
-                  {t("settings.deleteWorkspace")}
+                  {m.workspace_settings_deleteWorkspace()}
                 </Button>
               )}
             </CardContent>
@@ -211,35 +235,25 @@ function WorkspaceSettingsPage() {
       <NameConfirmDialog
         open={deleteOpen}
         onOpenChange={setDeleteOpen}
-        title={t("settings.deleteWorkspace")}
-        description={t("settings.confirmDeleteDescription", { name: workspace.name })}
-        confirmText={t("settings.confirmDelete")}
+        title={m.workspace_settings_deleteWorkspace()}
+        description={m.workspace_settings_confirmDeleteDescription({ name: workspace.name })}
+        confirmText={m.workspace_settings_confirmDelete()}
         expectedName={workspace.name}
         onConfirm={handleDelete}
       >
-        <div className="space-y-2">
-          <p className="text-sm text-muted-foreground">{t("settings.projectHandling")}</p>
-          <RadioGroup
-            value={deleteMode}
-            onValueChange={(v) => setDeleteMode(v as "transfer" | "clear")}
-            className="space-y-2"
-          >
-            <Label className="flex cursor-pointer items-start gap-2 rounded-md border p-3 font-normal">
-              <RadioGroupItem value="clear" className="mt-0.5" />
-              <span className="space-y-0.5">
-                <span className="text-sm font-medium text-destructive">{t("settings.clearProjects")}</span>
-                <span className="text-xs text-muted-foreground">{t("settings.clearProjectsDesc")}</span>
-              </span>
-            </Label>
-            <Label className="flex cursor-pointer items-start gap-2 rounded-md border p-3 font-normal">
-              <RadioGroupItem value="transfer" className="mt-0.5" />
-              <span className="space-y-0.5">
-                <span className="text-sm font-medium">{t("settings.transferProjects")}</span>
-                <span className="text-xs text-muted-foreground">{t("settings.transferProjectsDesc")}</span>
-              </span>
-            </Label>
-          </RadioGroup>
-        </div>
+        <DeleteWorkspaceOptions
+          projectCount={workspace._count.projects}
+          deleteMode={deleteMode}
+          onDeleteModeChange={setDeleteMode}
+          storyMode={storyMode}
+          onStoryModeChange={setStoryMode}
+          knowledgeBaseMode={knowledgeBaseMode}
+          onKnowledgeBaseModeChange={setKnowledgeBaseMode}
+          targetWorkspaceId={targetWorkspaceId}
+          onTargetWorkspaceIdChange={setTargetWorkspaceId}
+          excludeWorkspaceId={workspace.id}
+          workspaceOptions={otherWorkspaces}
+        />
       </NameConfirmDialog>
     </div>
   );