@allbluecn/web-app 0.9.4 → 0.10.0

package/src/components/chat/ai-prompt-input/index.tsx

@@ -18,7 +18,6 @@
 "use client";
 
 import { useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Textarea } from "@/components/ui/textarea";
@@ -29,6 +28,8 @@ import { ModelSelect } from "./components/model-select";
 import { PageUserContextSelector } from "./components/page-user-context-selector";
 import { SlashSkillMenu } from "@/components/agents/slash-skill-menu";
 import type { KnowledgeBaseItem, PromptAction } from "./types";
+import { m } from "@/paraglide/messages.js";
+
 export { DEFAULT_ACTIONS } from "./types";
 export type { KnowledgeBaseItem, PromptAction };
 
@@ -49,6 +50,7 @@ export interface AIPromptInputProps {
   onModelChange?: (model: string) => void;
   externalContextBar?: boolean;
   headerRightSlot?: React.ReactNode;
+  headerMiddleSlot?: React.ReactNode;
   slashSkills?: boolean;
 }
 
@@ -69,6 +71,7 @@ export function AIPromptInput({
   onModelChange,
   externalContextBar = false,
   headerRightSlot,
+  headerMiddleSlot,
   slashSkills = false,
 }: AIPromptInputProps) {
   const [internalInput, setInternalInput] = useState("");
@@ -81,7 +84,6 @@ export function AIPromptInput({
   const [thinkingEnabled, setThinkingEnabled] = useState(false);
   const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
   const [selectedKbs, setSelectedKbs] = useState<string[]>([]);
-  const { t } = useTranslation('chat');
 
   const isControlled = externalInput !== undefined;
   const inputValue = isControlled ? externalInput : internalInput;
@@ -176,7 +178,7 @@ export function AIPromptInput({
       } else if (externalOnSend) {
         externalOnSend(inputValue.trim(), model || undefined);
       } else {
-        console.log(t('prompt.submitLabel'), {
+        console.log(m.chat_prompt_submitLabel(), {
           input: inputValue.trim(),
           model,
           agentMode,
@@ -226,17 +228,22 @@ export function AIPromptInput({
   return (
     <div className="flex w-full flex-col items-center gap-2">
       {externalContextBar && (
-        <div className="flex w-full items-center justify-between gap-2">
-          <div className="min-w-0 flex-1">{contextSelectorNode}</div>
+        <div className="flex w-full items-center gap-2">
+          <div className="min-w-0">{contextSelectorNode}</div>
+          {headerMiddleSlot && (
+            <div className="flex min-w-0 flex-1 items-center justify-center">
+              {headerMiddleSlot}
+            </div>
+          )}
           {headerRightSlot && (
-            <div className="shrink-0">{headerRightSlot}</div>
+            <div className="ml-auto shrink-0">{headerRightSlot}</div>
           )}
         </div>
       )}
       <Card className="w-full p-0 shadow-xs border">
         <CardContent className="p-0">
           <form
-            aria-label={t('prompt.inputLabel')}
+            aria-label={m.chat_prompt_inputLabel()}
             className="flex flex-col gap-3 "
             onSubmit={handleSubmit}
           >
@@ -264,7 +271,7 @@ export function AIPromptInput({
                         setSlashMenuOpen(false);
                       }
                     }}
-                    placeholder={placeholder ?? t('slashCommands.placeholder')}
+                    placeholder={placeholder ?? m.chat_slashCommands_placeholder()}
                     rows={4}
                     value={inputValue}
                   />
@@ -280,14 +287,14 @@ export function AIPromptInput({
                     handleSubmit();
                   }
                 }}
-                placeholder={placeholder ?? t('prompt.placeholder')}
+                placeholder={placeholder ?? m.chat_prompt_placeholder()}
                 rows={4}
                 value={inputValue}
               />
             )}
 
             <div className="px-4 pb-0 text-[11px] text-muted-foreground/60 leading-none -mt-1">
-              {t('prompt.enterHint')}
+              {m.chat_prompt_enterHint()}
             </div>
 
             <div className="flex w-full items-center justify-between gap-2 p-4">
@@ -333,7 +340,7 @@ export function AIPromptInput({
                 type="button"
               >
                 <Icon className="size-4" />
-                {t(action.label)}
+                {action.label()}
               </Button>
             );
           })}

package/src/components/chat/ai-prompt-input/types.ts

@@ -17,6 +17,7 @@
 
 import { Camera, FileUp, LayoutDashboard, Puzzle } from "lucide-react";
 import type React from "react";
+import { m } from "@/paraglide/messages.js";
 
 export interface KnowledgeBaseItem {
   id: string;
@@ -27,12 +28,12 @@ export interface KnowledgeBaseItem {
 export interface PromptAction {
   id: string;
   icon: React.ComponentType<{ className?: string }>;
-  label: string;
+  label: () => string;
 }
 
 export const DEFAULT_ACTIONS: PromptAction[] = [
-  { id: "clone-screenshot", icon: Camera, label: "promptActions.cloneScreenshot" },
-  { id: "import-figma", icon: Puzzle, label: "promptActions.importFigma" },
-  { id: "upload-project", icon: FileUp, label: "promptActions.uploadProject" },
-  { id: "landing-page", icon: LayoutDashboard, label: "promptActions.landingPage" },
+  { id: "clone-screenshot", icon: Camera, label: m.chat_promptActions_cloneScreenshot },
+  { id: "import-figma", icon: Puzzle, label: m.chat_promptActions_importFigma },
+  { id: "upload-project", icon: FileUp, label: m.chat_promptActions_uploadProject },
+  { id: "landing-page", icon: LayoutDashboard, label: m.chat_promptActions_landingPage },
 ];

package/src/components/chat/ai-thinking.tsx

@@ -18,10 +18,10 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { Card } from "@/components/ui/card";
 import { Spinner } from "@/components/ui/spinner";
+import { m } from "@/paraglide/messages.js";
 
 const SCROLL_CONFIG = {
   SPEED: 5,
@@ -113,18 +113,17 @@ interface ThinkingHeaderProps {
 }
 
 function ThinkingHeader({ timer }: ThinkingHeaderProps) {
-  const { t } = useTranslation('chat');
   return (
     <div className="flex items-center gap-2">
       <Spinner aria-hidden="true" className="size-4" />
       <span className="relative inline-block animate-pulse text-sm">
-        {t('thinking.title')}
+        {m.chat_thinking_title()}
       </span>
       <span
-        aria-label={t('thinking.elapsed', { seconds: timer })}
+        aria-label={m.chat_thinking_elapsed({ seconds: timer })}
         className="text-muted-foreground text-sm"
       >
-        {t('thinking.seconds', { count: timer })}
+        {m.chat_thinking_seconds({ count: timer })}
       </span>
     </div>
   );
@@ -158,10 +157,9 @@ interface ThinkingContentProps {
 }
 
 function ThinkingContent({ contentRef, content }: ThinkingContentProps) {
-  const { t } = useTranslation('chat');
   return (
     <div
-      aria-label={t('thinking.process')}
+      aria-label={m.chat_thinking_process()}
       aria-live="polite"
       className="h-full overflow-hidden p-4 text-secondary-foreground"
       ref={contentRef}
@@ -215,8 +213,7 @@ export default function AIThinking({
   const contentRef = useRef<HTMLDivElement>(null);
   const timer = useTimer();
   useAutoScroll(contentRef);
-  const { t } = useTranslation('chat');
-  const displayContent = content || t('thinking.placeholder');
+  const displayContent = content || m.chat_thinking_placeholder();
 
   return (
     <div className={cn("flex w-full flex-col gap-4", className)}>

package/src/components/chat/chat-thread-page.tsx

@@ -29,14 +29,13 @@ import { useSession } from '@/lib/auth/auth-client'
 import { AlertCircle } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Link } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
+import { m } from "@/paraglide/messages.js";
 
 type ChatThreadPageProps = {
   initialMessages?: UIMessage[]
 }
 
 export function ChatThreadPage({ initialMessages }: ChatThreadPageProps) {
-  const { t } = useTranslation('chat')
   const { threadId } = useParams({ from: '/_nav/chat/$threadId' })
   const { data: session } = useSession()
   const hasAiKey = session?.user?.hasAiKey
@@ -53,7 +52,7 @@ export function ChatThreadPage({ initialMessages }: ChatThreadPageProps) {
     threadId,
     initialMessages: initialMessages ?? [],
     connection: fetchServerSentEvents('/api/chat'),
-    body: { systemPrompts: [t('systemPrompt')], webSearchEnabled, model: selectedModel },
+    body: { systemPrompts: [m.chat_systemPrompt()], webSearchEnabled, model: selectedModel },
     onCustomEvent: (eventType, data) => {
       if (eventType === 'citations') {
         setLatestCitations(data as Citation[])
@@ -115,10 +114,10 @@ export function ChatThreadPage({ initialMessages }: ChatThreadPageProps) {
         <div className="shrink-0 mx-6 mt-3 flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950">
           <AlertCircle className="size-4 shrink-0 text-amber-600 dark:text-amber-400" />
           <p className="flex-1 text-xs text-amber-700 dark:text-amber-300">
-            {t('aiKeyRequired')}
+            {m.chat_aiKeyRequired()}
           </p>
             <Button asChild size="sm" variant="outline" className="shrink-0 h-7 text-xs">
-              <Link to="/settings/ai">{t('goToSettings')}</Link>
+              <Link to="/settings/ai">{m.chat_goToSettings()}</Link>
             </Button>
         </div>
       )}

package/src/components/chat/interrupt-approval.tsx

@@ -18,8 +18,8 @@
 import type { ToolCallPart } from "@tanstack/ai"
 import type { UseChatReturn } from "@tanstack/ai-react"
 import { AlertTriangle, Check, X } from "lucide-react"
-import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
+import { m } from "@/paraglide/messages.js";
 
 type ApprovalPart = {
   id: string
@@ -55,8 +55,6 @@ export function InterruptApproval({
   const pendingApprovals = messages.flatMap((msg) =>
     (msg.parts || []).filter(isApprovalPart),
   ) as ApprovalPart[]
-  const { t } = useTranslation('chat')
-
   if (pendingApprovals.length === 0) return null
 
   return (
@@ -78,14 +76,14 @@ export function InterruptApproval({
             <AlertTriangle className="size-5 shrink-0 mt-0.5 text-amber-600 dark:text-amber-400" />
             <div className="flex-1 min-w-0">
               <p className="font-medium text-amber-900 dark:text-amber-100">
-                {t('interrupt.title')}
+                {m.chat_interrupt_title()}
               </p>
               <p className="text-sm text-amber-700 dark:text-amber-300 mt-1">
-                {t('interrupt.descriptionStart')}{" "}
+                {m.chat_interrupt_descriptionStart()}{" "}
                 <code className="px-1 py-0.5 text-xs rounded bg-amber-200/50 dark:bg-amber-800/50">
                   {interrupt.name}
                 </code>{" "}
-                {t('interrupt.descriptionEnd')}
+                {m.chat_interrupt_descriptionEnd()}
               </p>
               {displayArgs && (
                 <pre className="mt-2 text-xs bg-white dark:bg-slate-900 p-2 rounded border border-amber-200 dark:border-amber-800 overflow-x-auto max-w-full">
@@ -100,7 +98,7 @@ export function InterruptApproval({
                   }
                 >
                   <Check className="size-4 mr-1" />
-                  {t('interrupt.approve')}
+                  {m.chat_interrupt_approve()}
                 </Button>
                 <Button
                   size="sm"
@@ -110,7 +108,7 @@ export function InterruptApproval({
                   }
                 >
                   <X className="size-4 mr-1" />
-                  {t('interrupt.reject')}
+                  {m.chat_interrupt_reject()}
                 </Button>
               </div>
             </div>

package/src/components/command/command-palette.tsx

@@ -13,13 +13,12 @@
 // 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/>.
+// along with this program. If nosee <https://www.gnu.org/licenses/>.
 
 import { useState, useSyncExternalStore } from "react"
 import { useTheme } from "next-themes"
 import { useHotkey, useHotkeySequences } from "@tanstack/react-hotkeys"
 import type { HotkeySequence } from "@tanstack/hotkeys"
-import { useTranslation } from "react-i18next"
 import {
   CommandMenu,
   CommandMenuContent,
@@ -58,6 +57,7 @@ import {
   LogOut,
 } from "lucide-react"
 import type { LucideIcon } from "lucide-react"
+import { m } from "@/paraglide/messages.js";
 
 const PALETTE_ICON_MAP: Record<string, LucideIcon> = {
   sparkles: Sparkles,
@@ -81,7 +81,6 @@ const PALETTE_ICON_MAP: Record<string, LucideIcon> = {
 }
 
 export function CommandPalette() {
-  const { t } = useTranslation("common")
   const { theme, setTheme } = useTheme()
   const [prdDialogOpen, setPrdDialogOpen] = useState(false)
 
@@ -131,10 +130,10 @@ export function CommandPalette() {
       >
         <CommandMenuContent className="w-205">
           <CommandMenuInput
-            placeholder={t("command.searchPlaceholder")}
+            placeholder={m.common_command_searchPlaceholder()}
           />
           <CommandMenuList maxHeight="500px">
-            <CommandPaletteList commands={commands} onRun={run} t={t} />
+            <CommandPaletteList commands={commands} onRun={run} />
           </CommandMenuList>
         </CommandMenuContent>
       </CommandMenu>
@@ -157,11 +156,9 @@ function resolveShortcut(shortcut: string[]): string {
 function CommandPaletteList({
   commands,
   onRun,
-  t,
 }: {
   commands: ResolvedCommand[]
   onRun: (cmd: ResolvedCommand) => void
-  t: (key: string) => string
 }) {
   const { value } = useCommandMenu()
 
@@ -182,7 +179,7 @@ function CommandPaletteList({
   const filteredAction = filterCommands(actionCommands)
 
   if (filteredNav.length === 0 && filteredAction.length === 0) {
-    return <CommandMenuEmpty>{t("command.empty")}</CommandMenuEmpty>
+    return <CommandMenuEmpty>{m.common_command_empty()}</CommandMenuEmpty>
   }
 
   let index = 0
@@ -206,12 +203,12 @@ function CommandPaletteList({
   return (
     <>
       {filteredNav.length > 0 && (
-        <CommandMenuGroup heading={t("command.groupNavigation")}>
+        <CommandMenuGroup heading={m.common_command_groupNavigation()}>
           {filteredNav.map(renderItem)}
         </CommandMenuGroup>
       )}
       {filteredAction.length > 0 && (
-        <CommandMenuGroup heading={t("command.groupAction")}>
+        <CommandMenuGroup heading={m.common_command_groupAction()}>
           {filteredAction.map(renderItem)}
         </CommandMenuGroup>
       )}

package/src/components/design/project-card.tsx

@@ -16,8 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { Link } from "@tanstack/react-router"
-import { useTranslation } from "react-i18next"
 import { Card, CardContent } from "@/components/ui/card"
+import { m } from "@/paraglide/messages.js";
 
 interface ProjectCardProps {
   project: {
@@ -33,7 +33,6 @@ interface ProjectCardProps {
 }
 
 export function ProjectCard({ project }: ProjectCardProps) {
-  const { t } = useTranslation('design')
   const firstArtboard = project.artboards[0]
   const thumbnailUrl = firstArtboard
     ? `/design-files/${project.id}/${firstArtboard.pngPath.split("/").slice(-2, -1)[0]}/preview.png`
@@ -55,7 +54,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
         <CardContent className="p-3">
           <h3 className="font-medium text-sm truncate">{project.name}</h3>
           <p className="text-xs text-muted-foreground mt-1">
-            {t('projectCard.artboardCount', { count: project._count.artboards, version: project.version })}
+            {m.design_projectCard_artboardCount({ count: project._count.artboards, version: project.version })}
           </p>
         </CardContent>
       </Card>

package/src/components/design/sketch/code-preview.tsx

@@ -16,12 +16,12 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from "react"
-import { useTranslation } from "react-i18next"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Button } from "@/components/ui/button"
 import { Copy, Check, Sparkles } from "lucide-react"
 import type { AnnotationLayer } from "@/server/design/sketch/annotation-parser"
 import { generateCode, type CodeFormat } from "@/server/design/sketch/code-generator"
+import { m } from "@/paraglide/messages.js";
 
 interface CodePreviewProps {
   layer: AnnotationLayer | null
@@ -34,14 +34,13 @@ const formats: { value: CodeFormat; label: string }[] = [
 ]
 
 export function CodePreview({ layer }: CodePreviewProps) {
-  const { t } = useTranslation('design')
   const [activeFormat, setActiveFormat] = useState<CodeFormat>("html")
   const [copied, setCopied] = useState(false)
 
   if (!layer) {
     return (
       <div className="p-4 text-sm text-muted-foreground">
-        {t('codePreview.selectLayer')}
+        {m.design_codePreview_selectLayer()}
       </div>
     )
   }
@@ -69,7 +68,7 @@ export function CodePreview({ layer }: CodePreviewProps) {
         <div className="flex items-center gap-1">
           <Button variant="ghost" size="sm" className="h-7 text-xs gap-1" onClick={handleCopy}>
             {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
-            {copied ? t('codePreview.copied') : t('codePreview.copy')}
+            {copied ? m.design_codePreview_copied() : m.design_codePreview_copy()}
           </Button>
         </div>
       </div>

package/src/components/design/sketch/export-panel.tsx

@@ -16,8 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { Download } from "lucide-react"
-import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
+import { m } from "@/paraglide/messages.js";
 
 interface ExportAsset {
   id: string
@@ -36,7 +36,6 @@ interface ExportPanelProps {
 }
 
 export function ExportPanel({ exports, projectId }: ExportPanelProps) {
-  const { t } = useTranslation('design')
   const grouped = exports.reduce<Record<string, ExportAsset[]>>((acc, exp) => {
     const key = exp.layerName
     if (!acc[key]) acc[key] = []
@@ -46,9 +45,9 @@ export function ExportPanel({ exports, projectId }: ExportPanelProps) {
 
   return (
     <div className="p-4 space-y-4">
-      <h3 className="text-sm font-medium">{t('exportPanel.title')}</h3>
+      <h3 className="text-sm font-medium">{m.design_exportPanel_title()}</h3>
       {Object.keys(grouped).length === 0 ? (
-        <p className="text-sm text-muted-foreground">{t('exportPanel.empty')}</p>
+        <p className="text-sm text-muted-foreground">{m.design_exportPanel_empty()}</p>
       ) : (
         Object.entries(grouped).map(([name, assets]) => (
           <div key={name} className="space-y-2">

package/src/components/design/sketch/property-panel.tsx

@@ -16,8 +16,8 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import type { AnnotationLayer } from "@/server/design/sketch/annotation-parser"
-import { useTranslation } from 'react-i18next'
 import { calculateSpacings } from "./spacing-calculator"
+import { m } from "@/paraglide/messages.js";
 
 interface PropertyPanelProps {
   layer: AnnotationLayer | null
@@ -25,11 +25,10 @@ interface PropertyPanelProps {
 }
 
 export function PropertyPanel({ layer, siblings }: PropertyPanelProps) {
-  const { t } = useTranslation('design')
   if (!layer) {
     return (
       <div className="p-4 text-sm text-muted-foreground">
-        {t('propertyPanel.clickLayer')}
+        {m.design_propertyPanel_clickLayer()}
       </div>
     )
   }
@@ -45,7 +44,7 @@ export function PropertyPanel({ layer, siblings }: PropertyPanelProps) {
         <p className="text-xs text-muted-foreground">{layer.type}</p>
       </div>
 
-      <Section title={t('propertyPanel.dimensions')}>
+      <Section title={m.design_propertyPanel_dimensions()}>
         <Row label="X" value={Math.round(f.x)} />
         <Row label="Y" value={Math.round(f.y)} />
         <Row label="W" value={Math.round(f.width)} />
@@ -53,16 +52,16 @@ export function PropertyPanel({ layer, siblings }: PropertyPanelProps) {
       </Section>
 
       {(spacings.top || spacings.bottom || spacings.left || spacings.right) && (
-        <Section title={t('propertyPanel.spacing')}>
-          {spacings.top && <Row label={t('propertyPanel.top')} value={`${spacings.top.distance}px → ${spacings.top.layer.name}`} />}
-          {spacings.bottom && <Row label={t('propertyPanel.bottom')} value={`${spacings.bottom.distance}px → ${spacings.bottom.layer.name}`} />}
-          {spacings.left && <Row label={t('propertyPanel.left')} value={`${spacings.left.distance}px → ${spacings.left.layer.name}`} />}
-          {spacings.right && <Row label={t('propertyPanel.right')} value={`${spacings.right.distance}px → ${spacings.right.layer.name}`} />}
+        <Section title={m.design_propertyPanel_spacing()}>
+          {spacings.top && <Row label={m.design_propertyPanel_top()} value={`${spacings.top.distance}px → ${spacings.top.layer.name}`} />}
+          {spacings.bottom && <Row label={m.design_propertyPanel_bottom()} value={`${spacings.bottom.distance}px → ${spacings.bottom.layer.name}`} />}
+          {spacings.left && <Row label={m.design_propertyPanel_left()} value={`${spacings.left.distance}px → ${spacings.left.layer.name}`} />}
+          {spacings.right && <Row label={m.design_propertyPanel_right()} value={`${spacings.right.distance}px → ${spacings.right.layer.name}`} />}
         </Section>
       )}
 
       {style?.fills && style.fills.length > 0 && (
-        <Section title={t('propertyPanel.fill')}>
+        <Section title={m.design_propertyPanel_fill()}>
           {style.fills.map((fill, i) => (
             <div key={i} className="flex items-center gap-2">
               <div className="size-4 rounded border" style={{ backgroundColor: fill.color.slice(0, 7) }} />
@@ -73,13 +72,13 @@ export function PropertyPanel({ layer, siblings }: PropertyPanelProps) {
       )}
 
       {style?.borders && style.borders.length > 0 && (
-        <Section title={t('propertyPanel.border')}>
+        <Section title={m.design_propertyPanel_border()}>
           {style.borders.map((b, i) => <Row key={i} label={`${b.thickness}px`} value={b.color} />)}
         </Section>
       )}
 
       {style?.shadows && style.shadows.length > 0 && (
-        <Section title={t('propertyPanel.shadow')}>
+        <Section title={m.design_propertyPanel_shadow()}>
           {style.shadows.map((s, i) => (
             <div key={i} className="text-xs font-mono">
               {s.x} {s.y} {s.blur} {s.color}
@@ -89,14 +88,14 @@ export function PropertyPanel({ layer, siblings }: PropertyPanelProps) {
       )}
 
       {style?.fontFamily && (
-        <Section title={t('propertyPanel.text')}>
-          <Row label={t('propertyPanel.fontFamily')} value={style.fontFamily} />
-          <Row label={t('propertyPanel.fontSize')} value={`${style.fontSize}px`} />
-          {style.textColor && <Row label={t('propertyPanel.textColor')} value={style.textColor} />}
+        <Section title={m.design_propertyPanel_text()}>
+          <Row label={m.design_propertyPanel_fontFamily()} value={style.fontFamily} />
+          <Row label={m.design_propertyPanel_fontSize()} value={`${style.fontSize}px`} />
+          {style.textColor && <Row label={m.design_propertyPanel_textColor()} value={style.textColor} />}
         </Section>
       )}
 
-      {style?.corners && <Section title={t('propertyPanel.cornerRadius')}><Row label="Radius" value={JSON.stringify(style.corners.radii)} /></Section>}
+      {style?.corners && <Section title={m.design_propertyPanel_cornerRadius()}><Row label="Radius" value={JSON.stringify(style.corners.radii)} /></Section>}
     </div>
   )
 }

package/src/components/error/global-error-boundary.tsx

@@ -0,0 +1,65 @@
+// 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 { Link, useLocation } from '@tanstack/react-router'
+import { useMemo } from 'react'
+import { LogIn, FileQuestionIcon } from 'lucide-react'
+import { isUnauthorizedError } from '@/lib/auth/anonymous-safe'
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty'
+import { Button } from '@/components/ui/button'
+import { m } from "@/paraglide/messages.js";
+
+export function GlobalErrorBoundary({ error, info }: { error: unknown; info?: { componentStack: string } }) {
+  return (
+      <GlobalErrorBoundaryInner error={error} info={info} />
+  )
+}
+
+function GlobalErrorBoundaryInner({ error, info }: { error: unknown; info?: { componentStack: string } }) {const { pathname, searchStr } = useLocation()
+  const unauthorized = isUnauthorizedError(error)
+  const target = unauthorized
+    ? { to: '/login' as const, search: { redirect: pathname + searchStr } }
+    : { to: '/' as const }
+  const targetLabel = unauthorized ? m.common_errorPage_goLogin() : m.common_errorPage_goHome()
+
+  return (
+    <div className="flex flex-1 items-center justify-center">
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            {unauthorized ? <LogIn /> : <FileQuestionIcon />}
+          </EmptyMedia>
+          <EmptyTitle>
+            {unauthorized ? m.common_errorPage_loginRequired() : m.common_errorPage_error()}
+          </EmptyTitle>
+          <EmptyDescription>
+            {unauthorized
+              ? m.common_errorPage_loginRequiredDesc()
+              : m.common_errorPage_errorDesc()}
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent className="flex-row justify-center">
+          <Button asChild>
+            <Link to={target.to} search={target.search as never}>
+              {targetLabel}
+            </Link>
+          </Button>
+        </EmptyContent>
+      </Empty>
+    </div>
+  )
+}

package/src/components/forms/app-array-field.tsx

@@ -18,9 +18,9 @@
 import { Plus, Trash2 } from "lucide-react"
 import type { AnyReactFormApi } from "@tanstack/react-form"
 import type { ReactNode } from "react"
-import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
 import { AppField } from "./app-field"
+import { m } from "@/paraglide/messages.js";
 
 export interface AppArrayFieldProps<TItem> {
   name: string
@@ -43,9 +43,8 @@ export function AppArrayField<TItem>({
   emptyText,
   pushValue,
 }: AppArrayFieldProps<TItem>) {
-  const { t } = useTranslation("common")
-  const displayAddLabel = addButtonLabel ?? t("form.add")
-  const displayEmptyText = emptyText ?? t("form.empty")
+  const displayAddLabel = addButtonLabel ?? m.common_form_add()
+  const displayEmptyText = emptyText ?? m.common_form_empty()
   return (
     <AppField
       name={name}