@allbluecn/web-app 0.9.5 → 0.10.2

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

@@ -15,26 +15,106 @@
 // 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 { FolderKanban, Plus, Calendar } from "lucide-react";
-import { useState } from "react";
+import { createLazyFileRoute, Link, useRouter } from "@tanstack/react-router";
+import { FolderKanban, Plus, Calendar, MoreVertical, Pin, PinOff, Pencil, Trash2 } from "lucide-react";
+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 {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Separator } from "@/components/ui/separator";
 import { GlyphMatrix } from "@/components/magicui/glyph-matrix";
 import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
 import { CreateWorkspaceDialog } from "@/components/workspace/create-workspace-dialog";
+import { DeleteWorkspaceOptions } from "@/components/workspace/delete-workspace-options";
+import { EditWorkspaceDialog } from "@/components/workspace/edit-workspace-dialog";
+import { NameConfirmDialog } from "@/components/shared-kit/dialogs/name-confirm-dialog";
+import { toggleWorkspacePinFn, deleteWorkspaceFn } from "@/server/serverFns/workspace";
+import { toast } from "@/components/ui/sonner";
+import { m } from "@/paraglide/messages.js";
+import workspaceEmptyIllustration from "@/assets/illustrations/empty-states/workspace-empty.svg?url";
 
 type WorkspaceList = ReturnType<typeof import("@/server/serverFns/workspace")["listWorkspacesFn"]> extends Promise<infer T> ? T : never;
 
 function WorkspacesIndexPage() {
-  const { t } = useTranslation("workspace");
   const workspaces = Route.useLoaderData() as WorkspaceList;
   const [createOpen, setCreateOpen] = useState(false);
+  const [editOpen, setEditOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+  const [selectedWorkspace, setSelectedWorkspace] = useState<{ id: string; name: string; icon: string; description: string | null; projectCount: number } | 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<string>("");
+  const [pinState, setPinState] = useState<Record<string, boolean>>({});
+  const router = useRouter();
   const { resolvedTheme } = useTheme();
   const glyphColor = resolvedTheme === "dark" ? "#6b7280" : "#9ca3af";
 
+  useEffect(() => {
+    const onPinChanged = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (detail?.workspaceId) {
+        setPinState((prev) => ({ ...prev, [detail.workspaceId]: detail.pinned }));
+      }
+    };
+    window.addEventListener("workspace-pinned", onPinChanged);
+    return () => window.removeEventListener("workspace-pinned", onPinChanged);
+  }, []);
+
+  const handleTogglePin = async (workspaceId: string, pinned: boolean) => {
+    setPinState((prev) => ({ ...prev, [workspaceId]: pinned }));
+    try {
+      await toggleWorkspacePinFn({ data: { workspaceId, pinned } });
+      window.dispatchEvent(new CustomEvent("workspace-pinned", { detail: { workspaceId, pinned } }));
+    } catch {
+      setPinState((prev) => ({ ...prev, [workspaceId]: !pinned }));
+    }
+  };
+
+  const handleEdit = (ws: { id: string; name: string; icon: string; description: string | null; projectCount: number }) => {
+    setSelectedWorkspace(ws);
+    setEditOpen(true);
+  };
+
+  const handleDelete = async () => {
+    if (!selectedWorkspace) return;
+    if (selectedWorkspace.projectCount > 0 && deleteMode === "transfer" && !targetWorkspaceId) {
+      throw new Error(m.workspace_list_transferTargetRequired());
+    }
+    try {
+      const result = await deleteWorkspaceFn({
+        data: {
+          workspaceId: selectedWorkspace.id,
+          mode: deleteMode,
+          ...(deleteMode === "clear" ? { storyMode } : {}),
+          knowledgeBaseMode,
+          ...(deleteMode === "transfer" && targetWorkspaceId ? { targetWorkspaceId } : {}),
+        },
+      });
+      setDeleteOpen(false);
+      if ((result as { needsChoice?: boolean }).needsChoice) {
+        toast.info(m.workspace_list_deleteHasProjects());
+        router.navigate({
+          to: "/workspaces/$workspaceId/settings",
+          params: { workspaceId: selectedWorkspace.id },
+        });
+        return;
+      }
+      setSelectedWorkspace(null);
+      await router.invalidate();
+    } catch (err) {
+      setDeleteOpen(false);
+      setSelectedWorkspace(null);
+      toast.error(err instanceof Error ? err.message : m.workspace_settings_deleteFailed());
+    }
+  };
+
   return (
     <div className="relative h-full overflow-y-auto overflow-x-hidden">
       <div className="pointer-events-none absolute inset-x-0 top-0 h-100 overflow-hidden">
@@ -45,28 +125,33 @@ function WorkspacesIndexPage() {
           <div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 mb-4">
             <LucideIconByName name="folder-kanban" size={28} className="text-primary" />
           </div>
-          <h1 className="text-2xl font-semibold">{t("list.title")}</h1>
+          <h1 className="text-2xl font-semibold">{m.workspace_list_title()}</h1>
           <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
-            {t("list.subtitle")}
+            {m.workspace_list_subtitle()}
           </p>
           <Button onClick={() => setCreateOpen(true)} className="mt-6">
             <Plus className="size-4" />
-            {t("list.create")}
+            {m.workspace_list_create()}
           </Button>
         </div>
 
         {workspaces.length === 0 ? (
           <Card className="flex flex-col items-center justify-center gap-4 p-16 text-center">
+            <div className="w-32 h-32 shrink-0 dark:brightness-0 dark:invert">
+              <img src={workspaceEmptyIllustration} alt="" aria-hidden="true" className="w-full h-full object-contain" />
+            </div>
             <div>
-              <h2 className="text-lg font-medium">{t("list.emptyTitle")}</h2>
+              <h2 className="text-lg font-medium">{m.workspace_list_emptyTitle()}</h2>
               <p className="mt-1 text-sm text-muted-foreground">
-                {t("list.emptyDescription")}
+                {m.workspace_list_emptyDescription()}
               </p>
             </div>
           </Card>
         ) : (
           <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 mt-20">
-            {workspaces.map((workspace) => (
+            {workspaces.map((workspace) => {
+              const isPinned = pinState[workspace.id] ?? workspace.pinnedToSidebar;
+              return (
               <Card key={workspace.id} className="group relative p-5 transition-colors hover:bg-accent/40 border rounded-lg">
                 <Link
                   to="/workspaces/$workspaceId"
@@ -82,26 +167,115 @@ function WorkspacesIndexPage() {
                   </div>
                   <h3 className="mt-4 font-medium text-lg">{workspace.name}</h3>
                   <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
-                    {workspace.description || t("list.noDescription")}
+                    {workspace.description || m.workspace_list_noDescription()}
                   </p>
                 </div>
-                <div className="mt-4 flex items-center gap-4 text-xs text-muted-foreground">
-                  <span className="flex items-center gap-1">
-                    <FolderKanban className="size-3.5" />
-                    {workspace._count.projects} {t("list.projects")}
-                  </span>
-                  <span className="flex items-center gap-1">
-                    <Calendar className="size-3.5" />
-                    {new Intl.DateTimeFormat("zh-CN", { month: "short", day: "numeric" }).format(new Date(workspace.updatedAt))}
-                  </span>
+                <div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
+                  <div className="flex items-center gap-4">
+                    <span className="flex items-center gap-1">
+                      <FolderKanban className="size-3.5" />
+                      {workspace._count.projects} {m.workspace_list_projects()}
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Calendar className="size-3.5" />
+                      {new Intl.DateTimeFormat("zh-CN", { month: "short", day: "numeric" }).format(new Date(workspace.updatedAt))}
+                    </span>
+                  </div>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger
+                      asChild
+                      className="relative z-10 rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+                      onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                    >
+                      <button aria-label={m.workspace_card_more()}>
+                        <MoreVertical className="size-4" />
+                      </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="min-w-40" onClick={(e) => e.stopPropagation()}>
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleEdit({ id: workspace.id, name: workspace.name, icon: workspace.icon, description: workspace.description ?? null, projectCount: workspace._count.projects });
+                        }}
+                      >
+                        <Pencil className="mr-2 size-4" />
+                        {m.workspace_card_edit()}
+                      </DropdownMenuItem>
+                      
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleTogglePin(workspace.id, !isPinned);
+                        }}
+                      >
+                        {isPinned ? (
+                          <PinOff className="mr-2 size-4" />
+                        ) : (
+                          <Pin className="mr-2 size-4" />
+                        )}
+                        {isPinned ? m.workspace_card_unpin() : m.workspace_card_pin()}
+                      </DropdownMenuItem>
+                      <Separator className="my-1"/>
+                      <DropdownMenuItem
+                        className="text-destructive focus:text-destructive"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setSelectedWorkspace({ id: workspace.id, name: workspace.name, icon: workspace.icon, description: workspace.description ?? null, projectCount: workspace._count.projects });
+                          setDeleteMode("clear");
+                          setStoryMode("transfer");
+                          setKnowledgeBaseMode("keep");
+                          setTargetWorkspaceId("");
+                          setDeleteOpen(true);
+                        }}
+                      >
+                        <Trash2 className="mr-2 size-4" />
+                        {m.workspace_card_delete()}
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </div>
               </Card>
-            ))}
+              );
+            })}
           </div>
         )}
       </div>
 
       <CreateWorkspaceDialog open={createOpen} onOpenChange={setCreateOpen} />
+      {selectedWorkspace && (
+        <>
+          <EditWorkspaceDialog
+            open={editOpen}
+            onOpenChange={setEditOpen}
+            workspace={selectedWorkspace}
+            onSuccess={() => window.dispatchEvent(new CustomEvent("workspace-updated"))}
+          />
+          <NameConfirmDialog
+            open={deleteOpen}
+            onOpenChange={setDeleteOpen}
+            title={m.workspace_settings_deleteWorkspace()}
+            description={m.workspace_settings_confirmDeleteDescription({ name: selectedWorkspace.name })}
+            confirmText={m.workspace_settings_confirmDelete()}
+            expectedName={selectedWorkspace.name}
+            titleClassName="text-xl"
+            onConfirm={handleDelete}
+          >
+            <DeleteWorkspaceOptions
+              projectCount={selectedWorkspace.projectCount}
+              deleteMode={deleteMode}
+              onDeleteModeChange={setDeleteMode}
+              storyMode={storyMode}
+              onStoryModeChange={setStoryMode}
+              knowledgeBaseMode={knowledgeBaseMode}
+              onKnowledgeBaseModeChange={setKnowledgeBaseMode}
+              targetWorkspaceId={targetWorkspaceId}
+              onTargetWorkspaceIdChange={setTargetWorkspaceId}
+              excludeWorkspaceId={selectedWorkspace.id}
+              workspaceOptions={workspaces.map((ws) => ({ id: ws.id, name: ws.name }))}
+            />
+          </NameConfirmDialog>
+        </>
+      )}
     </div>
   );
 }

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

@@ -16,7 +16,9 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { Outlet, createFileRoute } from "@tanstack/react-router";
+import { requireSessionPage } from '@/lib/auth/page-gate'
 
 export const Route = createFileRoute("/_nav/workspaces")({
+  beforeLoad: requireSessionPage,
   component: () => <Outlet />,
 });

package/src/routes/_public/index/route.tsx

@@ -15,10 +15,14 @@
 // 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 { createFileRoute, redirect } from '@tanstack/react-router'
+import { isSaasEdition } from '@/lib/edition'
 import AgencyHeroSection from '@/components/shadcn-space/blocks/hero-01'
 
 export const Route = createFileRoute('/_public/')({
+  beforeLoad: () => {
+    if (!isSaasEdition) throw redirect({ to: '/dashboard' })
+  },
   component: IndexPage,
 })
 

package/src/routes/invite/$token/route.lazy.tsx

@@ -18,7 +18,6 @@
 import { createLazyFileRoute, Link, useNavigate } from '@tanstack/react-router'
 import { useState, useEffect } from 'react'
 import { useMutation } from '@tanstack/react-query'
-import { useTranslation } from 'react-i18next'
 import { toast } from '@/components/ui/sonner'
 import { RainbowButton } from '@/components/magicui/rainbow-button'
 import { UserAvatar } from '@/components/shared-kit'
@@ -29,6 +28,7 @@ import { Card, CardContent } from '@/components/ui/card'
 import { ArrowRight, CheckCircle2, Info, Loader2, Mail, UserCircle } from 'lucide-react'
 import { useDebouncedCallback } from '@/lib/pacer'
 import { acceptTeamInvitationFn, applyTeamInvitationFn, checkInviteEmailRegisteredFn } from '@/server/serverFns/team'
+import { m } from "@/paraglide/messages.js";
 
 const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
 
@@ -41,7 +41,6 @@ type EmailCheckState = 'idle' | 'checking' | 'registered' | 'unregistered'
 function InvitePage() {
   const { token, inv } = Route.useRouteContext()
   const navigate = useNavigate()
-  const { t } = useTranslation('invite')
   const ctx = Route.useRouteContext() as any
   const session = ctx?.session
   const isLoggedIn = !!session?.user?.id
@@ -92,15 +91,15 @@ function InvitePage() {
             <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
               <Info className="size-8 text-destructive" />
             </div>
-            <h1 className="text-2xl font-semibold">{t('expiredOrInvalid')}</h1>
-            <p className="text-sm text-muted-foreground">{t('expiredOrInvalidDesc')}</p>
+            <h1 className="text-2xl font-semibold">{m.invite_expiredOrInvalid()}</h1>
+            <p className="text-sm text-muted-foreground">{m.invite_expiredOrInvalidDesc()}</p>
             <Link to="/login" className="mt-4 inline-block text-sm text-primary hover:underline">
-              {t('goToLogin')}
+              {m.invite_goToLogin()}
             </Link>
           </div>
         </AuthLayoutLeft>
         <AuthLayoutRight>
-          <AuthBrandPanel footer={<p className="text-sm text-muted-foreground">{t('brandFooter')}</p>} title={t('brandTitle')} />
+          <AuthBrandPanel footer={<p className="text-sm text-muted-foreground">{m.invite_brandFooter()}</p>} title={m.invite_brandTitle()} />
         </AuthLayoutRight>
       </AuthLayout>
     )
@@ -114,21 +113,21 @@ function InvitePage() {
             <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
               <Loader2 className="size-8 animate-spin text-primary" />
             </div>
-            <h1 className="text-2xl font-semibold">{t('awaitingApproval')}</h1>
-            <p className="text-sm text-muted-foreground">{t('awaitingApprovalDesc')}</p>
+            <h1 className="text-2xl font-semibold">{m.invite_awaitingApproval()}</h1>
+            <p className="text-sm text-muted-foreground">{m.invite_awaitingApprovalDesc()}</p>
             <div className="space-y-2">
               <Link
                 to="/login"
                 search={{ redirect: `/invite/${token}` }}
                 className="block w-full rounded-lg border border-primary/20 bg-primary/5 px-4 py-2 text-sm text-primary font-medium hover:bg-primary/10 transition-colors"
               >
-                {t('loginNow')}
+                {m.invite_loginNow()}
               </Link>
             </div>
           </div>
         </AuthLayoutLeft>
         <AuthLayoutRight>
-          <AuthBrandPanel footer={<p className="text-sm text-muted-foreground">{t('brandFooter')}</p>} title={t('brandTitle')} />
+          <AuthBrandPanel footer={<p className="text-sm text-muted-foreground">{m.invite_brandFooter()}</p>} title={m.invite_brandTitle()} />
         </AuthLayoutRight>
       </AuthLayout>
     )
@@ -136,22 +135,22 @@ function InvitePage() {
 
   const owner = inv.owner
   const features = [
-    { icon: Mail, label: t('featureCollaboration'), desc: t('featureCollaborationDesc') },
-    { icon: UserCircle, label: t('featureTeam'), desc: t('featureTeamDesc') },
+    { icon: Mail, label: m.invite_featureCollaboration(), desc: m.invite_featureCollaborationDesc() },
+    { icon: UserCircle, label: m.invite_featureTeam(), desc: m.invite_featureTeamDesc() },
   ]
 
   const awaitingBlock = (
     <div className="space-y-3">
       <div className="flex items-center gap-2 rounded-lg border border-primary/20 bg-primary/5 p-3">
         <Loader2 className="size-4 animate-spin text-primary shrink-0" />
-        <p className="text-sm text-primary font-medium">{t('awaitingApproval')}</p>
+        <p className="text-sm text-primary font-medium">{m.invite_awaitingApproval()}</p>
       </div>
-      <p className="text-center text-xs text-muted-foreground">{t('awaitingApprovalDesc')}</p>
+      <p className="text-center text-xs text-muted-foreground">{m.invite_awaitingApprovalDesc()}</p>
       <Link
         to="/dashboard"
         className="flex w-full items-center justify-center gap-2 rounded-lg border py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
       >
-        {t('goToDashboard')}
+        {m.invite_goToDashboard()}
         <ArrowRight className="size-4" />
       </Link>
     </div>
@@ -173,8 +172,8 @@ function InvitePage() {
             <p className="text-2xl font-bold tracking-tight">{owner.username}</p>
             <p className="text-sm font-medium text-primary">
               {inv.channel === 'link'
-                ? t('inviteYou', { owner: owner.email })
-                : t('seatMessage', { seat: inv.selectedRole === 'member' ? t('seatMember') : t('seatViewer') })}
+                ? m.invite_inviteYou({ owner: owner.email })
+                : m.invite_seatMessage({ seat: inv.selectedRole === 'member' ? m.invite_seatMember() : m.invite_seatViewer() })}
             </p>
           </div>
         </div>
@@ -209,14 +208,14 @@ function InvitePage() {
               <div className="space-y-3">
                 <div className="flex items-center gap-2 rounded-lg border border-green-500/30 bg-green-500/10 p-3">
                   <CheckCircle2 className="size-4 text-green-500 shrink-0" />
-                  <p className="text-sm font-medium text-green-600">{t('alreadyJoined')}</p>
+                  <p className="text-sm font-medium text-green-600">{m.invite_alreadyJoined()}</p>
                 </div>
-                <p className="text-center text-xs text-muted-foreground">{t('alreadyJoinedDesc')}</p>
+                <p className="text-center text-xs text-muted-foreground">{m.invite_alreadyJoinedDesc()}</p>
                 <Link
                   to="/dashboard"
                   className="flex w-full items-center justify-center gap-2 rounded-lg border py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
                 >
-                  {t('goToDashboard')}
+                  {m.invite_goToDashboard()}
                 </Link>
               </div>
             ) : (
@@ -229,17 +228,17 @@ function InvitePage() {
                   {acceptMutation.isPending ? (
                     <>
                       <Loader2 className="mr-2 size-4 animate-spin" />
-                      {t('joining')}
+                      {m.invite_joining()}
                     </>
                   ) : (
                     <>
-                      {inv.channel === 'email' ? t('acceptJoin') : t('requestToJoin')}
+                      {inv.channel === 'email' ? m.invite_acceptJoin() : m.invite_requestToJoin()}
                       <ArrowRight className="ml-2 size-4" />
                     </>
                   )}
                 </RainbowButton>
                 {inv.channel === 'link' && (
-                  <p className="text-center text-xs text-muted-foreground">{t('linkApprovalNote')}</p>
+                  <p className="text-center text-xs text-muted-foreground">{m.invite_linkApprovalNote()}</p>
                 )}
               </>
             )}
@@ -248,7 +247,7 @@ function InvitePage() {
           <div className="space-y-4">
             <IconInput
               icon={Mail}
-              label={t('emailLabel')}
+              label={m.invite_emailLabel()}
               onChange={(e) => setEmailInput(e.target.value)}
               placeholder="name@example.com"
               type="email"
@@ -261,13 +260,13 @@ function InvitePage() {
                 <div className="flex items-center gap-2 rounded-lg border border-primary/20 bg-primary/5 p-3">
                   <CheckCircle2 className="size-4 text-primary shrink-0" />
                   <div className="min-w-0">
-                    <p className="text-sm font-medium text-primary">{t('appliedHint')}</p>
-                    <p className="text-xs text-muted-foreground">{t('appliedHintLogin')}</p>
+                    <p className="text-sm font-medium text-primary">{m.invite_appliedHint()}</p>
+                    <p className="text-xs text-muted-foreground">{m.invite_appliedHintLogin()}</p>
                   </div>
                 </div>
                 <Link to="/login" search={{ redirect: `/invite/${token}` }} className="block">
                   <RainbowButton className="w-full">
-                    {t('loginNow')}
+                    {m.invite_loginNow()}
                     <ArrowRight className="ml-2 size-4" />
                   </RainbowButton>
                 </Link>
@@ -281,10 +280,10 @@ function InvitePage() {
                     navigate({ to: '/register', search: { invite: token, email } })
                   }}
                 >
-                  {t('registerNow')}
+                  {m.invite_registerNow()}
                   <ArrowRight className="ml-2 size-4" />
                 </RainbowButton>
-                <p className="text-center text-xs text-muted-foreground">{t('emailUnregisteredHint')}</p>
+                <p className="text-center text-xs text-muted-foreground">{m.invite_emailUnregisteredHint()}</p>
               </>
             ) : (
               <>
@@ -294,7 +293,7 @@ function InvitePage() {
                   onClick={() => {
                     const email = (emailPrefilled ? inv!.email ?? '' : emailInput).trim()
                     if (!EMAIL_RE.test(email)) {
-                      toast.error(t('invalidEmail'))
+                      toast.error(m.invite_invalidEmail())
                       return
                     }
                     applyMutation.mutate(email.toLowerCase())
@@ -303,25 +302,25 @@ function InvitePage() {
                   {applyMutation.isPending || emailCheck === 'checking' ? (
                     <>
                       <Loader2 className="mr-2 size-4 animate-spin" />
-                      {t('checking')}
+                      {m.invite_checking()}
                     </>
                   ) : (
                     <>
-                      {t('applyToJoin')}
+                      {m.invite_applyToJoin()}
                       <ArrowRight className="ml-2 size-4" />
                     </>
                   )}
                 </RainbowButton>
                 <p className="text-center text-xs text-muted-foreground">
-                  {emailCheck === 'registered' ? t('emailRegisteredHint') : t('notRegisteredNote')}
+                  {emailCheck === 'registered' ? m.invite_emailRegisteredHint() : m.invite_notRegisteredNote()}
                 </p>
               </>
             )}
 
             <div className="text-center text-sm">
-              {t('alreadyHaveAccount')}{' '}
+              {m.invite_alreadyHaveAccount()}{' '}
               <Link to="/login" className="font-medium text-primary hover:underline">
-                {t('login')}
+                {m.invite_login()}
               </Link>
             </div>
           </div>
@@ -330,8 +329,8 @@ function InvitePage() {
       <AuthLayoutRight>
         <AuthBrandPanel
           features={features}
-          footer={<p className="text-sm text-muted-foreground">{t('brandFooter')}</p>}
-          title={t('brandTitle')}
+          footer={<p className="text-sm text-muted-foreground">{m.invite_brandFooter()}</p>}
+          title={m.invite_brandTitle()}
         />
       </AuthLayoutRight>
     </AuthLayout>

package/src/routes/share/$versionId/route.lazy.tsx

@@ -16,11 +16,9 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createLazyFileRoute } from '@tanstack/react-router'
-import { I18nextProvider } from 'react-i18next'
-import { useTranslation } from 'react-i18next'
 import { useMemo } from 'react'
-import { createServerI18n } from '@/i18n/server'
 import { ShareClient } from '@/components/share/prd/version-share-client'
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute('/share/$versionId')({
   pendingComponent: () => (
@@ -33,21 +31,16 @@ export const Route = createLazyFileRoute('/share/$versionId')({
 })
 
 function ShareVersionNotFound() {
-  const i18n = useMemo(() => createServerI18n('zh'), [])
   return (
-    <I18nextProvider i18n={i18n}>
       <ShareVersionNotFoundInner />
-    </I18nextProvider>
   )
 }
 
-function ShareVersionNotFoundInner() {
-  const { t } = useTranslation('common')
-  return (
+function ShareVersionNotFoundInner() {return (
     <div className="flex h-screen items-center justify-center">
       <div className="text-center">
-        <h1 className="text-2xl font-bold text-muted-foreground">{t('share.notFoundTitle')}</h1>
-        <p className="mt-2 text-sm text-muted-foreground">{t('share.notFoundDescription')}</p>
+        <h1 className="text-2xl font-bold text-muted-foreground">{m.common_share_notFoundTitle()}</h1>
+        <p className="mt-2 text-sm text-muted-foreground">{m.common_share_notFoundDescription()}</p>
       </div>
     </div>
   )

package/src/routes/share/compliance/$id/route.lazy.tsx

@@ -17,7 +17,6 @@
 
 import { useState, Suspense } from 'react'
 import { createLazyFileRoute } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
 import { KnowledgeDocEditor } from '@/components/knowledge/editor/knowledge-doc-editor'
 import { COMPLIANCE_FIELDS } from '@/components/knowledge-public/legal-compliance-editor'
 import type { PropertyValues } from '@/components/knowledge/doc-properties'
@@ -27,21 +26,20 @@ import { Star, Share2 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { toggleFavoriteFn } from '@/server/serverFns/knowledge-public/favorite'
 import { toast } from '@/components/ui/sonner'
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute('/share/compliance/$id')({ component: PublicCompliancePage })
 
 function PublicCompliancePage() {
   const data = Route.useRouteContext()
   const [favorited, setFavorited] = useState(false)
-  const { t } = useTranslation('common')
-
   const handleFavorite = async () => {
     try {
       const r = await toggleFavoriteFn({ data: { entityType: 'compliance', entityId: data.id } })
       setFavorited(r.favorited)
-      toast.success(r.favorited ? t('share.favoriteAdded') : t('share.favoriteRemoved'))
+      toast.success(r.favorited ? m.common_share_favoriteAdded() : m.common_share_favoriteRemoved())
     } catch {
-      toast.error(t('share.loginRequired'))
+      toast.error(m.common_share_loginRequired())
     }
   }
 
@@ -81,18 +79,18 @@ function PublicCompliancePage() {
               <>
                 <Button variant="ghost" size="sm" onClick={handleFavorite} className="gap-1.5">
                   <Star className={cn('h-4 w-4', favorited && 'fill-amber-400 text-amber-400')} />
-                  {favorited ? t('share.favorited') : t('share.favorite')}
+                  {favorited ? m.common_share_favorited() : m.common_share_favorite()}
                 </Button>
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button variant="ghost" size="icon" onClick={() => {
                       navigator.clipboard.writeText(window.location.href)
-                      toast.success(t('share.linkCopied'))
+                      toast.success(m.common_share_linkCopied())
                     }}>
                       <Share2 className="h-4 w-4" />
                     </Button>
                   </TooltipTrigger>
-                  <TooltipContent>{t('share.copyLink')}</TooltipContent>
+                  <TooltipContent>{m.common_share_copyLink()}</TooltipContent>
                 </Tooltip>
               </>
             }