@allbluecn/web-app 0.9.5 → 0.10.0

package/src/components/tiptap/ui-primitive/input-group/input-group.tsx

@@ -15,7 +15,6 @@
 // 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 * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 

package/src/components/tiptap/ui-primitive/label/label.tsx

@@ -15,7 +15,6 @@
 // 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 * as React from "react"
 import { cn } from "../../lib/utils.ts"
 

package/src/components/tiptap/ui-primitive/menu/menu-context.ts

@@ -15,7 +15,6 @@
 // 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 { createContext, useContext } from "react"
 import type { MenuContextValue } from "./menu-types.ts"
 

package/src/components/tiptap/ui-primitive/menu/menu-hooks.ts

@@ -15,7 +15,6 @@
 // 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 { useCallback, useEffect, useMemo } from "react"
 import * as Ariakit from "@ariakit/react"
 import type {

package/src/components/tiptap/ui-primitive/menu/menu-types.ts

@@ -15,7 +15,6 @@
 // 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 * as React from "react"
 import type * as Ariakit from "@ariakit/react"
 

package/src/components/tiptap/ui-primitive/menu/menu-utils.ts

@@ -15,7 +15,6 @@
 // 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 { Action } from "./menu-types.ts"
 
 /**

package/src/components/tiptap/ui-primitive/menu/menu.tsx

@@ -15,7 +15,6 @@
 // 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 * as Ariakit from "@ariakit/react"
 import { useCallback, useMemo, useRef, useState } from "react"
 

package/src/components/tiptap/ui-primitive/popover/popover.tsx

@@ -15,7 +15,6 @@
 // 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 * as PopoverPrimitive from "@radix-ui/react-popover"
 import { cn } from "../../lib/utils.ts"
 import "./popover.scss"

package/src/components/tiptap/ui-primitive/separator/separator.tsx

@@ -15,7 +15,6 @@
 // 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 "./separator.scss"
 import { cn } from "../../lib/utils.ts"
 

package/src/components/tiptap/ui-primitive/sidebar/sidebar.tsx

@@ -15,7 +15,6 @@
 // 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 React, {
   createContext,
   forwardRef,

package/src/components/tiptap/ui-primitive/spacer/spacer.tsx

@@ -15,7 +15,6 @@
 // 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/>.
 
-
 export type SpacerOrientation = "horizontal" | "vertical"
 
 export function Spacer({

package/src/components/tiptap/ui-primitive/textarea/textarea.tsx

@@ -15,7 +15,6 @@
 // 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 { cn } from "../../lib/utils.ts"
 import "./textarea.scss"
 

package/src/components/tiptap/ui-primitive/textarea-autosize/textarea-autosize.tsx

@@ -15,7 +15,6 @@
 // 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 type { TextareaAutosizeProps } from "react-textarea-autosize"
 import ReactTextareaAutosize from "react-textarea-autosize"

package/src/components/tiptap/ui-primitive/toolbar/toolbar.tsx

@@ -15,7 +15,6 @@
 // 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 { forwardRef, useCallback, useEffect, useRef, useState } from "react"
 import { Separator } from "../separator/index.tsx"
 import "./toolbar.scss"

package/src/components/tiptap/ui-primitive/tooltip/tooltip.tsx

@@ -15,7 +15,6 @@
 // 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 {
   cloneElement,
   createContext,

package/src/components/tiptap/ui-utils/floating-element/floating-element.tsx

@@ -15,7 +15,6 @@
 // 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 { HTMLAttributes } from "react"
 import {
   forwardRef,

package/src/components/tiptap/ui-utils/suggestion-menu/suggestion-menu.tsx

@@ -15,7 +15,6 @@
 // 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 { useCallback, useEffect, useRef, useState } from "react"
 import { flip, offset, shift, size } from "@floating-ui/react"
 import { PluginKey } from "@tiptap/pm/state"

package/src/components/ui/field.tsx

@@ -123,7 +123,7 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[[data-state=checked]]:border-primary/30 has-[[data-state=checked]]:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-[[data-state=checked]]:border-primary/20 dark:has-[[data-state=checked]]:bg-primary/10",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className
       )}

package/src/components/ui/radio-group.tsx

@@ -16,10 +16,9 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import * as React from "react"
+import { cn } from "cn"
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
 
-import { cn } from "@/lib/utils"
-
 function RadioGroup({
   className,
   ...props
@@ -41,7 +40,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-[state=checked]:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground group-has-[:focus-visible]/field-label:data-[state=checked]:border-primary dark:data-[state=checked]:bg-primary",
         className
       )}
       {...props}

package/src/components/ui/spinner.tsx

@@ -17,11 +17,11 @@
 
 import { cn } from "@/lib/utils"
 import { Loader2Icon } from "lucide-react"
-import { getClientI18n } from "@/i18n/client"
+import { m } from "@/paraglide/messages.js";
 
 function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
   return (
-    <Loader2Icon role="status" aria-label={getClientI18n().t('loading')} className={cn("size-4 animate-spin", className)} {...props} />
+    <Loader2Icon role="status" aria-label={m.common_loading()} className={cn("size-4 animate-spin", className)} {...props} />
   )
 }
 

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

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
 import { useForm } from "@tanstack/react-form";
 import { Link, useRouter } from "@tanstack/react-router";
 import { Button } from "@/components/ui/button";
@@ -31,6 +30,7 @@ import {
 import { LucideIconPicker } from "@/components/shared-kit/icons/lucide-icon-picker";
 import { createWorkspaceFn } from "@/server/serverFns/workspace";
 import { createWorkspaceSchema, type CreateWorkspaceValues } from "./schemas/create-workspace";
+import { m } from "@/paraglide/messages.js";
 
 interface CreateWorkspaceDialogProps {
   open: boolean;
@@ -43,7 +43,6 @@ export function CreateWorkspaceDialog({
   onOpenChange,
   onSuccess,
 }: CreateWorkspaceDialogProps) {
-  const { t } = useTranslation('workspace')
   const router = useRouter();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
@@ -60,7 +59,7 @@ export function CreateWorkspaceDialog({
 
   const handleSubmit = async () => {
     if (!form.state.values.name.trim()) {
-      setError(t('createWorkspace.nameRequired'));
+      setError(m.workspace_createWorkspace_nameRequired());
       return;
     }
     setLoading(true);
@@ -87,7 +86,7 @@ export function CreateWorkspaceDialog({
         setShowUpgrade(true);
         return;
       }
-      setError(err instanceof Error ? err.message : t('createWorkspace.createFailed'));
+      setError(err instanceof Error ? err.message : m.workspace_createWorkspace_createFailed());
     } finally {
       setLoading(false);
     }
@@ -106,21 +105,21 @@ export function CreateWorkspaceDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-260 -mt-50">
+      <DialogContent style={{ marginTop: '-8vh' }} className="sm:max-w-260 overflow-hidden">
         <DialogHeader>
-          <DialogTitle className="text-xl">{t('createWorkspace.title')}</DialogTitle>
+          <DialogTitle className="text-xl">{m.workspace_createWorkspace_title()}</DialogTitle>
         </DialogHeader>
 
         <div className="space-y-3 overflow-y-auto px-4 py-2 max-h-[60vh]">
           {showUpgrade ? (
             <div className="flex flex-col items-center gap-4 py-8 text-center">
-              <p className="text font-medium">{t('createWorkspace.upgradeTitle')}</p>
+              <p className="text font-medium">{m.workspace_createWorkspace_upgradeTitle()}</p>
               <p className="text-muted-foreground text-sm max-w-sm">
-                {t('createWorkspace.upgradeDescription')}
+                {m.workspace_createWorkspace_upgradeDescription()}
               </p>
               <Button asChild>
                 <Link to="/settings/billing" onClick={() => onOpenChange(false)}>
-                  {t('createWorkspace.upgradeAction')}
+                  {m.workspace_createWorkspace_upgradeAction()}
                 </Link>
               </Button>
             </div>
@@ -139,7 +138,7 @@ export function CreateWorkspaceDialog({
                     value={field.value ?? ""}
                     onChange={(e) => field.handleChange(e.target.value)}
                     onBlur={field.handleBlur}
-                    placeholder={t('createWorkspace.namePlaceholder')}
+                    placeholder={m.workspace_createWorkspace_namePlaceholder()}
                     maxLength={100}
                     className="h-10 flex-1"
                   />
@@ -152,7 +151,7 @@ export function CreateWorkspaceDialog({
                     value={field.value ?? ""}
                     onChange={(e) => field.handleChange(e.target.value)}
                     onBlur={field.handleBlur}
-                    placeholder={t('createWorkspace.descriptionPlaceholder')}
+                    placeholder={m.workspace_createWorkspace_descriptionPlaceholder()}
                     maxLength={500}
                     className="flex-1 min-h-0 resize-none bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
                   />
@@ -166,10 +165,10 @@ export function CreateWorkspaceDialog({
 
         <DialogFooter className="items-center gap-3">
           <Button variant="outline" onClick={() => handleOpenChange(false)}>
-            {t('createWorkspace.cancel')}
+            {m.workspace_createWorkspace_cancel()}
           </Button>
           <Button onClick={handleSubmit} disabled={loading}>
-            {loading ? t('createWorkspace.creating') : t('createWorkspace.create')}
+            {loading ? m.workspace_createWorkspace_creating() : m.workspace_createWorkspace_create()}
           </Button>
         </DialogFooter>
       </DialogContent>

package/src/components/workspace/delete-workspace-options.tsx

@@ -0,0 +1,177 @@
+// 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 {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+  FieldTitle,
+} from "@/components/ui/field";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { m } from "@/paraglide/messages.js";
+
+interface DeleteWorkspaceOptionsProps {
+  projectCount: number;
+  deleteMode: "transfer" | "clear";
+  onDeleteModeChange: (mode: "transfer" | "clear") => void;
+  storyMode: "transfer" | "clear";
+  onStoryModeChange: (mode: "transfer" | "clear") => void;
+  knowledgeBaseMode: "delete" | "keep";
+  onKnowledgeBaseModeChange: (mode: "delete" | "keep") => void;
+  targetWorkspaceId: string;
+  onTargetWorkspaceIdChange: (id: string) => void;
+  excludeWorkspaceId?: string;
+  workspaceOptions?: { id: string; name: string }[];
+}
+
+export function DeleteWorkspaceOptions({
+  projectCount,
+  deleteMode,
+  onDeleteModeChange,
+  storyMode,
+  onStoryModeChange,
+  knowledgeBaseMode,
+  onKnowledgeBaseModeChange,
+  targetWorkspaceId,
+  onTargetWorkspaceIdChange,
+  excludeWorkspaceId,
+  workspaceOptions = [],
+}: DeleteWorkspaceOptionsProps) {
+  const availableTargets = workspaceOptions.filter((ws) => ws.id !== excludeWorkspaceId);
+  return (
+    <div className="flex flex-col gap-4">
+      {projectCount > 0 && (
+        <div className="flex flex-col gap-2">
+          <p className="text-sm text-muted-foreground">{m.workspace_settings_projectHandling()}</p>
+          <RadioGroup
+            value={deleteMode}
+            onValueChange={(v) => onDeleteModeChange(v as "transfer" | "clear")}
+          >
+            <FieldLabel htmlFor="ws-delete-clear-projects">
+              <Field orientation="horizontal">
+                <FieldContent>
+                  <FieldTitle className="text-destructive">{m.workspace_settings_clearProjects()}</FieldTitle>
+                  <FieldDescription>{m.workspace_settings_clearProjectsDesc()}</FieldDescription>
+                </FieldContent>
+                <RadioGroupItem value="clear" id="ws-delete-clear-projects" />
+              </Field>
+            </FieldLabel>
+            <FieldLabel htmlFor="ws-delete-transfer-projects">
+              <Field orientation="horizontal">
+                <FieldContent>
+                  <FieldTitle>{m.workspace_settings_transferProjects()}</FieldTitle>
+                  <FieldDescription>{m.workspace_settings_transferProjectsDesc()}</FieldDescription>
+                </FieldContent>
+                <RadioGroupItem value="transfer" id="ws-delete-transfer-projects" />
+              </Field>
+            </FieldLabel>
+          </RadioGroup>
+          {deleteMode === "clear" && (
+            <div className="flex flex-col gap-2 pl-1">
+              <p className="text-xs text-muted-foreground">{m.workspace_settings_storyHandling()}</p>
+              <RadioGroup
+                value={storyMode}
+                onValueChange={(v) => onStoryModeChange(v as "transfer" | "clear")}
+              >
+                <FieldLabel htmlFor="ws-story-transfer">
+                  <Field orientation="horizontal">
+                    <FieldContent>
+                      <FieldTitle>{m.projects_settings_transfer()}</FieldTitle>
+                      <FieldDescription>{m.projects_settings_transferDesc()}</FieldDescription>
+                    </FieldContent>
+                    <RadioGroupItem value="transfer" id="ws-story-transfer" />
+                  </Field>
+                </FieldLabel>
+                <FieldLabel htmlFor="ws-story-clear">
+                  <Field orientation="horizontal">
+                    <FieldContent>
+                      <FieldTitle className="text-destructive">{m.projects_settings_clear()}</FieldTitle>
+                      <FieldDescription>{m.projects_settings_clearDesc()}</FieldDescription>
+                    </FieldContent>
+                    <RadioGroupItem value="clear" id="ws-story-clear" />
+                  </Field>
+                </FieldLabel>
+              </RadioGroup>
+            </div>
+          )}
+          {deleteMode === "transfer" && (
+            <div className="flex flex-col gap-1.5 pl-1">
+              <p className="text-xs text-muted-foreground">{m.workspace_settings_transferTarget()}</p>
+              {availableTargets.length === 0 ? (
+                <Select disabled>
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder={m.workspace_settings_noOtherWorkspaces()} />
+                  </SelectTrigger>
+                </Select>
+              ) : (
+                <Select value={targetWorkspaceId} onValueChange={onTargetWorkspaceIdChange}>
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder={m.workspace_settings_transferTargetPlaceholder()} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {availableTargets.map((ws) => (
+                      <SelectItem key={ws.id} value={ws.id}>
+                        {ws.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+      <div className="flex flex-col gap-2">
+        {/* <Separator /> */}
+        <p className="text-sm text-muted-foreground">{m.workspace_settings_knowledgeBaseHandling()}</p>
+        <RadioGroup
+          value={knowledgeBaseMode}
+          onValueChange={(v) => onKnowledgeBaseModeChange(v as "delete" | "keep")}
+        >
+          <FieldLabel htmlFor="ws-delete-keep-kb">
+            <Field orientation="horizontal">
+              <FieldContent>
+                <FieldTitle>{m.workspace_settings_keepKnowledgeBases()}</FieldTitle>
+                <FieldDescription>{m.workspace_settings_keepKnowledgeBasesDesc()}</FieldDescription>
+              </FieldContent>
+              <RadioGroupItem value="keep" id="ws-delete-keep-kb" />
+            </Field>
+          </FieldLabel>
+          <FieldLabel htmlFor="ws-delete-delete-kb">
+            <Field orientation="horizontal">
+              <FieldContent>
+                <FieldTitle className="text-destructive">{m.workspace_settings_deleteKnowledgeBases()}</FieldTitle>
+                <FieldDescription>{m.workspace_settings_deleteKnowledgeBasesDesc()}</FieldDescription>
+              </FieldContent>
+              <RadioGroupItem value="delete" id="ws-delete-delete-kb" />
+            </Field>
+          </FieldLabel>
+        </RadioGroup>
+      </div>
+      <Separator />
+    </div>
+  );
+}

package/src/components/workspace/edit-workspace-dialog.tsx

@@ -0,0 +1,153 @@
+// 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 { useForm } from "@tanstack/react-form";
+import { useRouter } from "@tanstack/react-router";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { LucideIconPicker } from "@/components/shared-kit/icons/lucide-icon-picker";
+import { updateWorkspaceFn } from "@/server/serverFns/workspace";
+import { createWorkspaceSchema, type CreateWorkspaceValues } from "./schemas/create-workspace";
+import { m } from "@/paraglide/messages.js";
+
+interface EditWorkspaceDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  workspace: { id: string; name: string; icon: string; description: string | null };
+  onSuccess?: () => void;
+}
+
+export function EditWorkspaceDialog({
+  open,
+  onOpenChange,
+  workspace,
+  onSuccess,
+}: EditWorkspaceDialogProps) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const form = useForm({
+    defaultValues: {
+      name: workspace.name,
+      description: workspace.description ?? "",
+      icon: workspace.icon,
+    },
+    validators: [{ run: createWorkspaceSchema as any, triggers: ['change'] }],
+  });
+
+  const handleSubmit = async () => {
+    if (!form.state.values.name.trim()) {
+      setError(m.workspace_createWorkspace_nameRequired());
+      return;
+    }
+    setLoading(true);
+    setError("");
+    try {
+      await updateWorkspaceFn({
+        data: {
+          workspaceId: workspace.id,
+          name: form.state.values.name.trim(),
+          icon: form.state.values.icon,
+          description: form.state.values.description.trim() || null,
+        },
+      });
+      onOpenChange(false);
+      onSuccess?.();
+      window.dispatchEvent(new CustomEvent("workspace-updated"));
+      await router.invalidate();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : m.workspace_createWorkspace_createFailed());
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    if (newOpen) {
+      form.setFieldValue("name", workspace.name);
+      form.setFieldValue("icon", workspace.icon);
+      form.setFieldValue("description", workspace.description ?? "");
+      setError("");
+    }
+    onOpenChange(newOpen);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-260 -mt-50">
+        <DialogHeader>
+          <DialogTitle className="text-xl">{m.workspace_settings_edit()}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-3 overflow-y-auto px-4 py-2 max-h-[60vh]">
+          <div className="flex gap-2">
+            <form.Field name="icon" children={(field) => (
+              <LucideIconPicker
+                value={field.value}
+                onChange={(v) => field.handleChange(v)}
+                modal
+              />
+            )} />
+            <form.Field name="name" children={(field) => (
+              <Input
+                value={field.value ?? ""}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+                placeholder={m.workspace_createWorkspace_namePlaceholder()}
+                maxLength={100}
+                className="h-10 flex-1"
+              />
+            )} />
+          </div>
+
+          <form.Field name="description" children={(field) => (
+            <div className="notion-full-width min-h-50 max-h-150 flex flex-col overflow-y-auto border rounded-md border-border">
+              <textarea
+                value={field.value ?? ""}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+                placeholder={m.workspace_createWorkspace_descriptionPlaceholder()}
+                maxLength={500}
+                className="flex-1 min-h-0 resize-none bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
+              />
+            </div>
+          )} />
+
+          {error && <p className="text-sm text-destructive break-words">{error}</p>}
+        </div>
+
+        <DialogFooter className="items-center gap-3">
+          <Button variant="outline" onClick={() => handleOpenChange(false)}>
+            {m.workspace_createWorkspace_cancel()}
+          </Button>
+          <Button onClick={handleSubmit} disabled={loading}>
+            {loading ? m.workspace_createWorkspace_creating() : m.common_button_save()}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/workspace/schemas/create-workspace.ts

@@ -16,10 +16,10 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { z } from "zod"
-import { getClientI18n } from "@/i18n/client"
+import { m } from "@/paraglide/messages.js";
 
 export const createWorkspaceSchema = z.object({
-  name: z.string().min(1, getClientI18n().t('createWorkspace.nameRequired', { ns: 'workspace' })),
+  name: z.string().min(1, m.workspace_createWorkspace_nameRequired()),
   description: z.string(),
   icon: z.string().default("folder"),
 })