@allbluecn/web-app 0.9.4 → 0.10.0

package/src/plugins/core/prd/components/prd-editor-layout.tsx

@@ -15,12 +15,11 @@
 // 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, { useState, useRef, useCallback, useEffect, useMemo } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { useStore } from "@tanstack/react-store"
 import { cn } from "@/lib/utils";
-import { prdCanvasStore, setCanvasElements, setCanvasSelectedElementId, updateCanvasElement, deleteCanvasElement } from "@/lib/stores/prd-canvas-store"
+import { prdCanvasStore, setCanvasElements, setCanvasSelectedElementId, updateCanvasElement, deleteCanvasElement, type PrdCanvasState } from "@/lib/stores/prd-canvas-store"
 import { NavFloatButton } from "@/components/shared-kit/navigation/nav-float-button";
 import { PRDLeftSidebar } from "./prd-left-sidebar";
 import { PRDPrototypePanel } from "./prd-prototype-panel";
@@ -46,7 +45,6 @@ interface PRDEditorLayoutProps {
 }
 
 export function PRDEditorLayout({ prd: initialPrd }: PRDEditorLayoutProps) {
-  const { t } = useTranslation("prd");
   const containerRef = useRef<HTMLDivElement>(null);
   const contentAreaRef = useRef<HTMLDivElement>(null);
   const editorRef = useRef<Editor | null>(null);
@@ -54,8 +52,8 @@ export function PRDEditorLayout({ prd: initialPrd }: PRDEditorLayoutProps) {
   const [leftPanelOpen, setLeftPanelOpen] = useState(true);
   const [activePageId, setActivePageId] = useState<string | null>(null);
 
-  const elements = useStore(prdCanvasStore, (s) => s.elements)
-  const selectedComponentId = useStore(prdCanvasStore, (s) => s.selectedElementId)
+  const elements = useStore(prdCanvasStore, (s: PrdCanvasState) => s.elements)
+  const selectedComponentId = useStore(prdCanvasStore, (s: PrdCanvasState) => s.selectedElementId)
 
   const setElements = useCallback((value: React.SetStateAction<CanvasElement[]>) => {
     setCanvasElements(value)
@@ -283,7 +281,7 @@ export function PRDEditorLayout({ prd: initialPrd }: PRDEditorLayoutProps) {
     }).run();
   }, []);
 
-  const selectedElement = elements.find((e) => e.id === selectedComponentId) ?? null;
+  const selectedElement = elements.find((e: CanvasElement) => e.id === selectedComponentId) ?? null;
 
   const updateElement = useCallback((id: string, patch: Partial<CanvasElement>) => {
     if (isPreviewing) return;
@@ -313,12 +311,12 @@ export function PRDEditorLayout({ prd: initialPrd }: PRDEditorLayoutProps) {
       await updatePrdFn({ data: { id: prd.id, name } });
       setPrd((prev) => ({ ...prev, name }));
       window.dispatchEvent(new CustomEvent("prd-updated"));
-      toast.success(t("editor.nameUpdated"));
+      toast.success(m.editor_nameUpdated());
     } catch (err) {
       console.error("Update PRD name failed:", err);
-      toast.error(t("editor.nameUpdateFailed"));
+      toast.error(m.editor_nameUpdateFailed());
     }
-  }, [prd.id, t]);
+  }, [prd.id, ]);
 
   useHotkey("Mod+S", saveAll, {
     enabled: !pageFullscreen && !windowFullscreen,
@@ -393,12 +391,12 @@ export function PRDEditorLayout({ prd: initialPrd }: PRDEditorLayoutProps) {
             <div className="flex-1 min-w-0 relative">
               {isPreviewing && elements.length === 0 && (
                 <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/80">
-                  <p className="text-sm text-muted-foreground">{t("editor.noCanvasInVersion")}</p>
+                  <p className="text-sm text-muted-foreground">{m.editor_noCanvasInVersion()}</p>
                 </div>
               )}
               {isPreviewing && (
                 <div className="absolute top-14 right-4 z-20 text-[10px] text-muted-foreground bg-muted/80 px-1.5 py-0.5 rounded pointer-events-none">
-                  {t("editor.versionPreview")}
+                  {m.editor_versionPreview()}
                 </div>
               )}
               <PRDPrototypePanel
@@ -415,7 +413,7 @@ export function PRDEditorLayout({ prd: initialPrd }: PRDEditorLayoutProps) {
             <div className="relative shrink-0">
               {isPreviewing && !docContent.html && !docContent.markdown && (
                 <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/80">
-                  <p className="text-sm text-muted-foreground">{t("editor.noDocInVersion")}</p>
+                  <p className="text-sm text-muted-foreground">{m.editor_noDocInVersion()}</p>
                 </div>
               )}
               <PRDDocPanel

package/src/plugins/core/prd/components/prd-filter-bar.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import React, { useState, useEffect, useRef } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { cn } from "@/lib/utils";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
@@ -29,7 +29,6 @@ export function FilterBar({
   tagFilter: string;
   onTagFilterChange: (tag: string) => void;
 }) {
-  const { t } = useTranslation("prd");
   const [page, setPage] = useState(0);
   const containerRef = useRef<HTMLDivElement>(null);
   const [visibleCount, setVisibleCount] = useState(5);
@@ -64,7 +63,7 @@ export function FilterBar({
           tagFilter === "all" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted"
         )}
       >
-        {t("filterBar.all")}
+        {m.filterBar_all()}
       </button>
       <div ref={containerRef} className="flex-1 flex items-center gap-1 overflow-hidden">
         {visibleTags.map((tag) => (

package/src/plugins/core/prd/components/prd-left-sidebar.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import React, { useState, useEffect, useMemo } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { cn } from "@/lib/utils";
 import { Input } from "@/components/ui/input";
 import {
@@ -58,7 +58,7 @@ import { FilterBar } from "./prd-filter-bar";
 import { PRDAgentPanel } from "./prd-agent-panel";
 import { CanvasElement } from "@allbluecn/kernel";
 import { listComponentsFn } from "@/plugins/core/prd/serverFns/components";
-import { BUILTIN_COMPONENTS, ICON_COMPONENTS, ICON_LUCIDE_MAP } from "./prototype";
+import { BUILTIN_COMPONENTS, ICON_COMPONENTS, ICON_LUCIDE_MAP, type PrototypeComponentConfig } from "./prototype";
 
 interface PRDLeftSidebarProps {
   prdId: string;
@@ -95,7 +95,7 @@ interface ComponentItem {
   defaultHeight?: number;
 }
 
-const BUILTIN_ITEMS: ComponentItem[] = BUILTIN_COMPONENTS.map((c) => ({
+const BUILTIN_ITEMS: ComponentItem[] = BUILTIN_COMPONENTS.map((c: PrototypeComponentConfig) => ({
   id: `builtin_${c.type}`,
   name: c.name,
   description: null,
@@ -142,10 +142,10 @@ const ICON_ITEMS: ComponentItem[] = ICON_COMPONENTS.map((c) => ({
 const ALL_BUILTIN_ITEMS: ComponentItem[] = [...ICON_ITEMS, ...BUILTIN_ITEMS];
 
 const CATEGORIES = [
-  { key: "icons", labelKey: "prototype.categoryIcon", icon: <Smile className="size-3.5" /> },
-  { key: "basic", labelKey: "prototype.categoryBasic", icon: <Box className="size-3.5" /> },
-  { key: "content", labelKey: "prototype.categoryContent", icon: <LayoutTemplate className="size-3.5" /> },
-  { key: "template", labelKey: "prototype.categoryTemplate", icon: <FileCode className="size-3.5" /> },
+  { key: "icons", label: m.prd_prototype_categoryIcon, icon: <Smile className="size-3.5" /> },
+  { key: "basic", label: m.prd_prototype_categoryBasic, icon: <Box className="size-3.5" /> },
+  { key: "content", label: m.prd_prototype_categoryContent, icon: <LayoutTemplate className="size-3.5" /> },
+  { key: "template", label: m.prd_prototype_categoryTemplate, icon: <FileCode className="size-3.5" /> },
 ];
 
 // 图标组件的 lucide 组件映射（icon-smile → Smile 等），供列表视图图标缩略图使用
@@ -164,7 +164,6 @@ const COMPONENT_ICONS: Record<string, React.ComponentType<{ className?: string }
 };
 
 export function PRDLeftSidebar({ prdId, open, onToggle, activePageId, onPageSelect, canvasElements = [], onOutlineSelect, onElementsChange, aiModel, onAiModelChange }: PRDLeftSidebarProps) {
-  const { t } = useTranslation("prd");
   const [activeTab, setActiveTab] = useState<"page" | "outline">("page");
   const [componentTab, setComponentTab] = useState<"library" | "agent">("library");
 
@@ -184,7 +183,7 @@ export function PRDLeftSidebar({ prdId, open, onToggle, activePageId, onPageSele
   useEffect(() => {
     let cancelled = false;
     listComponentsFn({ data: {} })
-      .then((comps) => {
+      .then((comps: Awaited<ReturnType<typeof listComponentsFn>>) => {
         if (!cancelled) {
           // 按 prototypeKey 去重：内置（图标+基础）优先，DB 组件排除与内置同 key 的；
           // DB 组件自身也按 prototypeKey 去重（防 admin 重复添加）
@@ -192,7 +191,7 @@ export function PRDLeftSidebar({ prdId, open, onToggle, activePageId, onPageSele
             ALL_BUILTIN_ITEMS.map((c) => c.prototypeKey).filter(Boolean),
           );
           // Prisma Component.createdAt 是 Date，本地 ComponentItem.createdAt 是 string，统一转换
-          const mappedComps: ComponentItem[] = comps.map((c) => ({
+          const mappedComps: ComponentItem[] = comps.map((c: Awaited<ReturnType<typeof listComponentsFn>>[number]) => ({
             id: c.id,
             name: c.name,
             description: c.description,
@@ -260,7 +259,7 @@ export function PRDLeftSidebar({ prdId, open, onToggle, activePageId, onPageSele
 
   const groups = useMemo(
     () =>
-      CATEGORIES.map((cat) => [cat.key, cat.labelKey, grouped[cat.key] || []] as [string, string, ComponentItem[]]).filter(
+      CATEGORIES.map((cat) => [cat.key, cat.label(), grouped[cat.key] || []] as [string, string, ComponentItem[]]).filter(
         ([, , items]) => !search || items.length > 0
       ),
     [grouped, search]
@@ -279,7 +278,7 @@ export function PRDLeftSidebar({ prdId, open, onToggle, activePageId, onPageSele
                   activeTab === "page" ? "text-foreground border-b-2 border-primary" : "text-muted-foreground hover:text-foreground"
                 )}
               >
-                <FileText className="size-3.5" /> {t("sidebar.tabPage")}
+                <FileText className="size-3.5" /> {m.sidebar_tabPage()}
               </button>
               <button
                 onClick={() => setActiveTab("outline")}
@@ -288,7 +287,7 @@ export function PRDLeftSidebar({ prdId, open, onToggle, activePageId, onPageSele
                   activeTab === "outline" ? "text-foreground border-b-2 border-primary" : "text-muted-foreground hover:text-foreground"
                 )}
               >
-                <Layers className="size-3.5" /> {t("sidebar.tabOutline")}
+                <Layers className="size-3.5" /> {m.sidebar_tabOutline()}
               </button>
 
             </div>
@@ -316,7 +315,7 @@ export function PRDLeftSidebar({ prdId, open, onToggle, activePageId, onPageSele
                         componentTab === "library" ? "text-foreground border-b-2 border-primary" : "text-muted-foreground hover:text-foreground",
                       )}
                     >
-                      <Package className="size-3.5" /> {t("sidebar.tabLibrary")}
+                      <Package className="size-3.5" /> {m.sidebar_tabLibrary()}
                     </button>
                     <button
                       onClick={() => setComponentTab("agent")}
@@ -325,7 +324,7 @@ export function PRDLeftSidebar({ prdId, open, onToggle, activePageId, onPageSele
                         componentTab === "agent" ? "text-foreground border-b-2 border-primary" : "text-muted-foreground hover:text-foreground",
                       )}
                     >
-                      <Sparkles className="size-3.5" /> {t("sidebar.tabAgent")}
+                      <Sparkles className="size-3.5" /> {m.sidebar_tabAgent()}
                     </button>
                   </div>
 
@@ -343,7 +342,7 @@ export function PRDLeftSidebar({ prdId, open, onToggle, activePageId, onPageSele
                       <div className="flex items-center gap-1 mt-2">
                         <div className="relative flex-1">
                           <Search className="absolute left-2 top-1/2 -translate-y-1/2 size-3 text-muted-foreground/40" />
-                          <Input placeholder={t("sidebar.searchComponents")} className="h-6 pl-6 pr-2 text-xs md:text-xs placeholder:text-xs placeholder:text-muted-foreground/30" value={search} onChange={(e) => setSearch(e.target.value)} />
+                          <Input placeholder={m.sidebar_searchComponents()} className="h-6 pl-6 pr-2 text-xs md:text-xs placeholder:text-xs placeholder:text-muted-foreground/30" value={search} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)} />
                         </div>
                         <Tooltip>
                           <TooltipTrigger asChild>
@@ -355,7 +354,7 @@ export function PRDLeftSidebar({ prdId, open, onToggle, activePageId, onPageSele
                             </button>
                           </TooltipTrigger>
                           <TooltipContent>
-                            <p>{viewMode === "list" ? t("sidebar.gridView") : t("sidebar.listView")}</p>
+                            <p>{viewMode === "list" ? m.sidebar_gridView() : m.sidebar_listView()}</p>
                           </TooltipContent>
                         </Tooltip>
                       </div>
@@ -368,14 +367,14 @@ export function PRDLeftSidebar({ prdId, open, onToggle, activePageId, onPageSele
                           {[1, 2, 3].map((i) => <div key={i} className="h-6 rounded bg-muted/50 animate-pulse" />)}
                         </div>
                       ) : groups.length === 0 ? (
-                        <p className="text-xs text-muted-foreground text-center py-4">{search ? t("sidebar.noMatch") : t("sidebar.noComponents")}</p>
+                        <p className="text-xs text-muted-foreground text-center py-4">{search ? m.sidebar_noMatch() : m.sidebar_noComponents()}</p>
                       ) : (
-                        groups.map(([category, labelKey, items]) => (
+                        groups.map(([category, label, items]) => (
                           <div key={category}>
                             <div className="flex items-center gap-1 px-2 py-1.5 bg-muted/20 rounded-t-md border-b border-border/40 cursor-pointer" onClick={() => setCatOpen((p) => ({ ...p, [category]: !p[category] }))}>
                               <ChevronDown className={cn("size-3 text-muted-foreground/60 transition-transform", catOpen[category] ? "rotate-0" : "-rotate-90")} />
                               <span className="text-muted-foreground shrink-0">{CATEGORIES.find((c) => c.key === category)?.icon}</span>
-                              <span className="text-xs font-semibold text-foreground/90 flex-1">{t(labelKey)}</span>
+                              <span className="text-xs font-semibold text-foreground/90 flex-1">{label}</span>
                               <span className="text-[10px] text-muted-foreground/60">{items.length}</span>
                             </div>
                             {catOpen[category] && (

package/src/plugins/core/prd/components/prd-navigation.tsx

@@ -15,9 +15,8 @@
 // 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, { useState, useRef, useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
@@ -79,7 +78,6 @@ export function PRDNavigation({
   onWindowFullscreen,
   onDelete,
 }: PRDNavigationProps) {
-  const { t } = useTranslation(["prd", "common"]);
   const [shareOpen, setShareOpen] = useState(false);
   const [editingName, setEditingName] = useState(false);
   const [nameValue, setNameValue] = useState(prd.name);
@@ -162,7 +160,7 @@ export function PRDNavigation({
                 onClick={handleStartEdit}
                 className="flex items-center gap-1.5 text-foreground hover:text-foreground/80 transition-colors group"
                 disabled={!onNameChange}
-                aria-label={t("navigation.editName")}
+                aria-label={m.navigation_editName()}
               >
                 <span className="text-sm font-medium truncate max-w-50">{prd.name}</span>
                 {onNameChange && (
@@ -216,26 +214,26 @@ export function PRDNavigation({
          {onVersion && (
            <Button variant="ghost" size="sm" className="h-8 gap-1.5" onClick={onVersion}>
              <History className="size-3.5" />
-             <span className="hidden sm:inline">{t("navigation.version")}</span>
+             <span className="hidden sm:inline">{m.navigation_version()}</span>
            </Button>
          )}
 
         {onSave && (
           <Button variant="ghost" size="sm" className="h-8 gap-1.5" onClick={onSave}>
             <Save className="size-3.5" />
-            <span className="hidden sm:inline">{t("common:button.save")}</span>
+            <span className="hidden sm:inline">{m.common_button_save()}</span>
           </Button>
         )}
 
         <Button variant="ghost" size="sm" className="h-8 gap-1.5" onClick={() => setShareOpen(true)}>
           <Share2 className="size-3.5" />
-          <span className="hidden sm:inline">{t("navigation.share")}</span>
+          <span className="hidden sm:inline">{m.navigation_share()}</span>
         </Button>
 
         <Dialog open={shareOpen} onOpenChange={setShareOpen}>
           <DialogContent className="sm:max-w-3xl">
             <DialogHeader>
-              <DialogTitle>{t("navigation.sharePrd")}</DialogTitle>
+              <DialogTitle>{m.navigation_sharePrd()}</DialogTitle>
             </DialogHeader>
             <PRDSharePanel prdId={prd.id} onClose={() => setShareOpen(false)} />
           </DialogContent>
@@ -251,13 +249,13 @@ export function PRDNavigation({
             {onExport && (
               <DropdownMenuItem onClick={onExport}>
                 <Download className="size-4 mr-2" />
-                {t("navigation.export")}
+                {m.navigation_export()}
               </DropdownMenuItem>
             )}
             {onSettings && (
               <DropdownMenuItem onClick={onSettings}>
                 <SettingsIcon className="size-4 mr-2" />
-                {t("navigation.prdSettings")}
+                {m.navigation_prdSettings()}
               </DropdownMenuItem>
             )}
             <DropdownMenuSeparator />
@@ -266,7 +264,7 @@ export function PRDNavigation({
               className="text-destructive focus:text-destructive"
             >
               <Trash2 className="size-4 mr-2" />
-              {t("navigation.deletePrd")}
+              {m.navigation_deletePrd()}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -276,9 +274,9 @@ export function PRDNavigation({
     <NameConfirmDialog
       open={deleteConfirmOpen}
       onOpenChange={setDeleteConfirmOpen}
-      title={t("navigation.deletePrd")}
-      description={t("navigation.deletePrdDesc")}
-      confirmText={t("navigation.confirmDelete")}
+      title={m.navigation_deletePrd()}
+      description={m.navigation_deletePrdDesc()}
+      confirmText={m.navigation_confirmDelete()}
       expectedName={prd.name}
       onConfirm={handleDelete}
     />

package/src/plugins/core/prd/components/prd-outline-tab.tsx

@@ -16,14 +16,13 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import React, { useMemo } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { LayoutTemplate, Box } from "lucide-react";
 import { buildOutline } from "@/lib/outline-utils";
 import { OutlineNode } from "@allbluecn/kernel";
 import { CanvasElement } from "@allbluecn/kernel";
 
 export function OutlineTab({ elements, onSelect }: { elements: CanvasElement[]; onSelect?: (elementId: string) => void }) {
-  const { t } = useTranslation("prd");
   const tree = useMemo(() => buildOutline(elements), [elements]);
 
   const renderNode = (node: OutlineNode, depth: number = 0) => (
@@ -48,10 +47,10 @@ export function OutlineTab({ elements, onSelect }: { elements: CanvasElement[];
 
   return (
     <div className="flex flex-col h-full">
-      <div className="shrink-0 px-3 py-2 text-xs text-muted-foreground border-b">{t("outline.pageStructure")}</div>
+      <div className="shrink-0 px-3 py-2 text-xs text-muted-foreground border-b">{m.outline_pageStructure()}</div>
       <div className="flex-1 overflow-y-auto py-1">
         {tree.length === 0 ? (
-          <div className="px-3 py-4 text-xs text-muted-foreground text-center">{t("outline.empty")}</div>
+          <div className="px-3 py-4 text-xs text-muted-foreground text-center">{m.outline_empty()}</div>
         ) : (
           tree.map(node => renderNode(node))
         )}

package/src/plugins/core/prd/components/prd-prototype-panel.tsx

@@ -15,9 +15,8 @@
 // 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, { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { cn } from "@/lib/utils";
 import { Monitor, Smartphone, Tablet } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -39,7 +38,6 @@ interface PRDPrototypePanelProps {
 }
 
 export function PRDPrototypePanel({ className, elements: externalElements, onElementsChange, onComponentSelect, autoSaveTime, saving, onAnnotate }: PRDPrototypePanelProps) {
-  const { t } = useTranslation("prd");
   const [device, setDevice] = useState<DeviceType>("desktop");
   const [internalElements, setInternalElements] = useState<CanvasElement[]>([]);
 
@@ -50,7 +48,7 @@ export function PRDPrototypePanel({ className, elements: externalElements, onEle
     registerComponents([...ICON_COMPONENTS, ...BUILTIN_COMPONENTS, ...LOCAL_IMPORTED_COMPONENTS]);
 
     listComponentsFn({ data: { type: "prototype" } })
-      .then((dbComponents) => {
+      .then((dbComponents: Awaited<ReturnType<typeof listComponentsFn>>) => {
         for (const dbc of dbComponents) {
           if (!dbc.prototypeKey) continue;
           if (getComponent(dbc.prototypeKey)) continue;
@@ -71,7 +69,7 @@ export function PRDPrototypePanel({ className, elements: externalElements, onEle
       .catch(console.error);
 
     return () => {
-      BUILTIN_COMPONENTS.forEach((c) => unregisterComponent(c.type));
+      BUILTIN_COMPONENTS.forEach((c: { type: string }) => unregisterComponent(c.type));
     };
   }, []);
 
@@ -79,9 +77,9 @@ export function PRDPrototypePanel({ className, elements: externalElements, onEle
     <div className={cn("flex flex-col h-full", className)}>
       <div className="shrink-0 flex items-center justify-between gap-1 px-3 h-10 border-b border-l -ml-px bg-muted/5">
         <div className="flex items-center gap-2">
-          <span className="text-xs font-medium text-muted-foreground">{t("prototypePanel.title")}</span>
+          <span className="text-xs font-medium text-muted-foreground">{m.prototypePanel_title()}</span>
           {saving ? (
-            <span className="text-[10px] text-muted-foreground/40">{t("prototypePanel.saving")}</span>
+            <span className="text-[10px] text-muted-foreground/40">{m.prototypePanel_saving()}</span>
           ) : autoSaveTime ? (
             <span className="text-[10px] text-muted-foreground/40">{autoSaveTime}</span>
           ) : null}
@@ -97,7 +95,7 @@ export function PRDPrototypePanel({ className, elements: externalElements, onEle
               </button>
             </TooltipTrigger>
             <TooltipContent>
-              <p>{t("prototypePanel.desktop")}</p>
+              <p>{m.prototypePanel_desktop()}</p>
             </TooltipContent>
           </Tooltip>
           <Tooltip>
@@ -110,7 +108,7 @@ export function PRDPrototypePanel({ className, elements: externalElements, onEle
               </button>
             </TooltipTrigger>
             <TooltipContent>
-              <p>{t("prototypePanel.tablet")}</p>
+              <p>{m.prototypePanel_tablet()}</p>
             </TooltipContent>
           </Tooltip>
           <Tooltip>
@@ -123,7 +121,7 @@ export function PRDPrototypePanel({ className, elements: externalElements, onEle
               </button>
             </TooltipTrigger>
             <TooltipContent>
-              <p>{t("prototypePanel.mobile")}</p>
+              <p>{m.prototypePanel_mobile()}</p>
             </TooltipContent>
           </Tooltip>
         </div>

package/src/plugins/core/prd/components/prd-right-sidebar.tsx

@@ -15,9 +15,8 @@
 // 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, { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Pin, PinOff, X } from "lucide-react";
@@ -48,13 +47,12 @@ interface PRDRightSidebarProps {
 type SidebarState = "collapsed" | "expanded" | "pinned";
 
 const TABS = [
-  { key: "editor", labelKey: "rightSidebar.tabEditor" },
-  { key: "version", labelKey: "rightSidebar.tabVersion" },
-  { key: "comment-review", labelKey: "rightSidebar.tabComment" },
+  { key: "editor", label: m.rightSidebar_tabEditor },
+  { key: "version", label: m.rightSidebar_tabVersion },
+  { key: "comment-review", label: m.rightSidebar_tabComment },
 ] as const;
 
 export function PRDRightSidebar({ prdId, selectedComponentId, onClose, activePageId, element, onElementChange, onDeleteElement }: PRDRightSidebarProps) {
-  const { t } = useTranslation("prd");
   const [state, setState] = useState<SidebarState>("collapsed");
   const [activeTab, setActiveTab] = useState<string>("editor");
   const [isHydrated, setIsHydrated] = useState(false);
@@ -133,7 +131,7 @@ export function PRDRightSidebar({ prdId, selectedComponentId, onClose, activePag
                       : "text-muted-foreground hover:text-foreground"
                   )}
                 >
-                  {t(tab.labelKey)}
+                  {tab.label()}
                 </button>
               ))}
             </div>
@@ -145,7 +143,7 @@ export function PRDRightSidebar({ prdId, selectedComponentId, onClose, activePag
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  <p>{isPinned ? t("rightSidebar.unpin") : t("rightSidebar.pin")}</p>
+                  <p>{isPinned ? m.rightSidebar_unpin() : m.rightSidebar_pin()}</p>
                 </TooltipContent>
               </Tooltip>
               <Tooltip>
@@ -155,7 +153,7 @@ export function PRDRightSidebar({ prdId, selectedComponentId, onClose, activePag
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  <p>{t("rightSidebar.collapse")}</p>
+                  <p>{m.rightSidebar_collapse()}</p>
                 </TooltipContent>
               </Tooltip>
             </div>
@@ -172,7 +170,7 @@ export function PRDRightSidebar({ prdId, selectedComponentId, onClose, activePag
                 {activePageId ? (
                   <PageVersionPanel prdId={prdId} pageId={activePageId} />
                 ) : (
-                  <div className="p-3 text-sm text-muted-foreground text-center py-8">{t("rightSidebar.selectPageHint")}</div>
+                  <div className="p-3 text-sm text-muted-foreground text-center py-8">{m.rightSidebar_selectPageHint()}</div>
                 )}
               </div>
             ) : (
@@ -194,11 +192,11 @@ export function PRDRightSidebar({ prdId, selectedComponentId, onClose, activePag
                       : "text-muted-foreground hover:text-foreground hover:bg-muted/30"
                   )}
                 >
-                  {t(tab.labelKey).split("").join("\n")}
+                  {tab.label().split("").join("\n")}
                 </button>
               </TooltipTrigger>
               <TooltipContent>
-                <p>{t(tab.labelKey)}</p>
+                <p>{tab.label()}</p>
               </TooltipContent>
             </Tooltip>
           ))}

package/src/plugins/core/prd/components/prd-share-panel/components/single-version-share-card.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { cn } from "@/lib/utils";
-import { useTranslation } from "react-i18next";
+import { m } from '@/paraglide/messages.js'
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
@@ -68,14 +68,13 @@ export function SingleVersionShareCard({
   onExpiryUpdate,
   onToggle,
 }: SingleVersionShareCardProps) {
-  const { t } = useTranslation("prd");
   return (
     <div className={cn("border rounded-lg p-4 space-y-3", !share.enabled && "opacity-50")}>
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
           <span className="text-sm font-medium bg-muted px-2 py-0.5 rounded">{share.versionLabel}</span>
           {share.hasPassword && (
-            <span className="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">{t("sharePanel.passwordEnabled")}</span>
+            <span className="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">{m.sharePanel_passwordEnabled()}</span>
           )}
         </div>
         <div className="flex items-center gap-2">
@@ -86,7 +85,7 @@ export function SingleVersionShareCard({
               </Button>
             </TooltipTrigger>
             <TooltipContent>
-              <p className="text-xs">{t("sharePanel.copyShareLink")}</p>
+              <p className="text-xs">{m.sharePanel_copyShareLink()}</p>
             </TooltipContent>
           </Tooltip>
           <Tooltip>
@@ -101,14 +100,14 @@ export function SingleVersionShareCard({
               </Button>
             </TooltipTrigger>
             <TooltipContent>
-              <p className="text-xs">{t("sharePanel.deleteShareLink")}</p>
+              <p className="text-xs">{m.sharePanel_deleteShareLink()}</p>
             </TooltipContent>
           </Tooltip>
         </div>
       </div>
 
       <div className="space-y-1">
-        <span className="text-xs text-muted-foreground">{t("sharePanel.shareLink")}:</span>
+        <span className="text-xs text-muted-foreground">{m.sharePanel_shareLink()}:</span>
         <div className="flex items-center gap-2">
           <Input value={share.link} readOnly className="h-8 text-xs flex-1 font-mono max-w-full" />
         </div>
@@ -117,7 +116,7 @@ export function SingleVersionShareCard({
       <div className="grid grid-cols-2 gap-3">
         <div className="space-y-1">
           <div className="flex items-center justify-between">
-            <span className="text-xs text-muted-foreground">{t("sharePanel.enablePassword")}:
+            <span className="text-xs text-muted-foreground">{m.sharePanel_enablePassword()}:
               <Switch
                 checked={share.hasPassword}
                 onCheckedChange={(v) => onPasswordToggle(share.id, v)}
@@ -139,14 +138,14 @@ export function SingleVersionShareCard({
                   variant="outline"
                   size="sm"
                   className="h-8 w-8 p-0"
-                  onClick={() => { navigator.clipboard.writeText(share.password); toast.success(t("sharePanel.passwordCopied")); }}
+                  onClick={() => { navigator.clipboard.writeText(share.password); toast.success(m.sharePanel_passwordCopied()); }}
                   disabled={!share.hasPassword}
                 >
                   <Copy className="size-3" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>
-                <p className="text-xs">{t("sharePanel.copyPassword")}</p>
+                <p className="text-xs">{m.sharePanel_copyPassword()}</p>
               </TooltipContent>
             </Tooltip>
             <Tooltip>
@@ -162,7 +161,7 @@ export function SingleVersionShareCard({
                 </Button>
               </TooltipTrigger>
               <TooltipContent>
-                <p className="text-xs">{t("sharePanel.generateRandomPassword")}</p>
+                <p className="text-xs">{m.sharePanel_generateRandomPassword()}</p>
               </TooltipContent>
             </Tooltip>
           </div>
@@ -170,23 +169,23 @@ export function SingleVersionShareCard({
 
         <div className="grid grid-cols-2 gap-4">
           <div className="space-y-1">
-            <span className="text-xs text-muted-foreground">{t("sharePanel.expiry")}:</span>
+            <span className="text-xs text-muted-foreground">{m.sharePanel_expiry()}:</span>
             <Select
               value={getExpiryDaysValue(share.expiresAt)}
               onValueChange={(v) => onExpiryUpdate(share.id, v)}
             >
               <SelectTrigger className="h-8 text-xs">
-                <SelectValue placeholder={t("sharePanel.selectExpiry")} />
+                <SelectValue placeholder={m.sharePanel_selectExpiry()} />
               </SelectTrigger>
               <SelectContent>
                 {EXPIRY_OPTIONS.map((opt) => (
-                  <SelectItem key={opt.value} value={opt.value}>{t(opt.labelKey)}</SelectItem>
+                  <SelectItem key={opt.value} value={opt.value}>{opt.label()}</SelectItem>
                 ))}
               </SelectContent>
             </Select>
           </div>
           <div className="space-y-1">
-            <span className="text-xs text-muted-foreground">{t("sharePanel.enableSingleShare")}</span>
+            <span className="text-xs text-muted-foreground">{m.sharePanel_enableSingleShare()}</span>
             <div className="flex justify-start mt-2">
               <Switch
                 checked={share.enabled}