@allbluecn/web-app 0.9.5 → 0.10.0

package/src/routes/_login/reset-password/route.lazy.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createLazyFileRoute, useRouter, useSearch, Link } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
 import { useForm } from '@tanstack/react-form'
 import { toast } from '@/components/ui/sonner'
 import { RainbowButton } from '@/components/magicui/rainbow-button'
@@ -28,6 +27,7 @@ import { AuthBrandPanel } from '@/components/auth/auth-brand-panel'
 import { PasswordInput } from '@/components/auth/password-input'
 import { resetPasswordFn } from '@/server/serverFns/auth/reset-password'
 import { resetPasswordSchema } from '@/routes/_login/schemas/-auth'
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute('/_login/reset-password')({
   component: ResetPasswordPage,
@@ -35,13 +35,12 @@ export const Route = createLazyFileRoute('/_login/reset-password')({
 
 function ResetPasswordPage() {
   const router = useRouter()
-  const { t } = useTranslation('auth')
   const { token } = useSearch({ from: '/_login/reset-password' })
   const loginFeatures = [
-    { icon: Users, label: t('features.userResearch'), desc: t('features.userResearchDesc') },
-    { icon: BarChart3, label: t('features.dataAnalysis'), desc: t('features.dataAnalysisDesc') },
-    { icon: MessageSquare, label: t('features.teamCollaboration'), desc: t('features.teamCollaborationDesc') },
-    { icon: TrendingUp, label: t('features.roadmap'), desc: t('features.roadmapDesc') },
+    { icon: Users, label: m.auth_features_userResearch(), desc: m.auth_features_userResearchDesc() },
+    { icon: BarChart3, label: m.auth_features_dataAnalysis(), desc: m.auth_features_dataAnalysisDesc() },
+    { icon: MessageSquare, label: m.auth_features_teamCollaboration(), desc: m.auth_features_teamCollaborationDesc() },
+    { icon: TrendingUp, label: m.auth_features_roadmap(), desc: m.auth_features_roadmapDesc() },
   ]
 
   const form = useForm({
@@ -50,10 +49,10 @@ function ResetPasswordPage() {
     onSubmit: async ({ value }) => {
       try {
         await resetPasswordFn({ data: { ...value, token } })
-        toast.success(t('resetPassword.success'))
+        toast.success(m.auth_resetPassword_success())
         await router.navigate({ to: '/login' })
       } catch (err) {
-        toast.error(err instanceof Error ? err.message : t('resetPassword.failed'))
+        toast.error(err instanceof Error ? err.message : m.auth_resetPassword_failed())
       }
     },
   })
@@ -61,7 +60,7 @@ function ResetPasswordPage() {
   return (
     <AuthLayout>
       <AuthLayoutLeft>
-        <AuthHeader title={t('resetPassword.title')} subtitle={t('resetPassword.subtitle')} />
+        <AuthHeader title={m.auth_resetPassword_title()} subtitle={m.auth_resetPassword_subtitle()} />
         <form
           onSubmit={(e) => { e.preventDefault(); e.stopPropagation(); form.handleSubmit() }}
           className="space-y-6"
@@ -70,8 +69,8 @@ function ResetPasswordPage() {
             <AppField name="password" form={form}>
               {(field) => (
                 <PasswordInput
-                  label={t('resetPassword.newPasswordLabel')}
-                  placeholder={t('resetPassword.newPasswordPlaceholder')}
+                  label={m.auth_resetPassword_newPasswordLabel()}
+                  placeholder={m.auth_resetPassword_newPasswordPlaceholder()}
                   value={field.value}
                   onBlur={field.handleBlur}
                   onChange={(e) => field.handleChange(e.target.value)}
@@ -81,8 +80,8 @@ function ResetPasswordPage() {
             <AppField name="confirmPassword" form={form}>
               {(field) => (
                 <PasswordInput
-                  label={t('resetPassword.confirmPasswordLabel')}
-                  placeholder={t('resetPassword.confirmPasswordPlaceholder')}
+                  label={m.auth_resetPassword_confirmPasswordLabel()}
+                  placeholder={m.auth_resetPassword_confirmPasswordPlaceholder()}
                   value={field.value}
                   onBlur={field.handleBlur}
                   onChange={(e) => field.handleChange(e.target.value)}
@@ -94,20 +93,20 @@ function ResetPasswordPage() {
             selector={(state) => state.isSubmitting}
             children={(isSubmitting) => (
               <RainbowButton type="submit" className="w-full" disabled={isSubmitting}>
-                {isSubmitting ? t('resetPassword.submitting') : t('resetPassword.submit')}
+                {isSubmitting ? m.auth_resetPassword_submitting() : m.auth_resetPassword_submit()}
                 <ArrowRight className="ml-2 h-4 w-4" />
               </RainbowButton>
             )}
           />
         </form>
         <div className="text-center text-sm">
-          <Link to="/login" className="font-medium text-primary hover:underline">{t('resetPassword.goLogin')}</Link>
+          <Link to="/login" className="font-medium text-primary hover:underline">{m.auth_resetPassword_goLogin()}</Link>
         </div>
       </AuthLayoutLeft>
       <AuthLayoutRight>
         <AuthBrandPanel
-          title={t('resetPassword.title')}
-          subtitle={t('resetPassword.subtitle')}
+          title={m.auth_resetPassword_title()}
+          subtitle={m.auth_resetPassword_subtitle()}
           features={loginFeatures}
         />
       </AuthLayoutRight>

package/src/routes/_login/schemas/-auth.ts

@@ -16,35 +16,33 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { z } from "zod"
-import { getClientI18n } from "@/i18n/client"
-
-const t = (key: string) => getClientI18n().t(key)
+import { m } from '@/paraglide/messages.js'
 
 export const loginSchema = z.object({
-  email: z.string().email(t("form.invalidEmail")),
-  password: z.string().min(1, t("form.passwordNotEmpty")),
+  email: z.string().email(m.common_form_invalidEmail()),
+  password: z.string().min(1, m.common_form_passwordNotEmpty()),
   remember: z.boolean(),
 })
 
 export const registerSchema = z.object({
-  username: z.string().min(3, t("form.usernameMin3")).max(20),
-  email: z.string().email(t("form.invalidEmail")),
-  password: z.string().min(8, t("form.passwordMin8")),
+  username: z.string().min(3, m.common_form_usernameMin3()).max(20),
+  email: z.string().email(m.common_form_invalidEmail()),
+  password: z.string().min(8, m.common_form_passwordMin8()),
   confirmPassword: z.string(),
-  invitationCode: z.string().min(1, t("form.invitationCodeRequired")),
+  invitationCode: z.string().min(1, m.common_form_invitationCodeRequired()),
 }).refine((data) => data.password === data.confirmPassword, {
-  message: t("form.passwordMismatch"),
+  message: m.common_form_passwordMismatch(),
   path: ["confirmPassword"],
 })
 
 export const forgotPasswordSchema = z.object({
-  email: z.string().email(t("form.invalidEmail")),
+  email: z.string().email(m.common_form_invalidEmail()),
 })
 
 export const resetPasswordSchema = z.object({
-  password: z.string().min(8, t("form.passwordMin8")),
+  password: z.string().min(8, m.common_form_passwordMin8()),
   confirmPassword: z.string(),
 }).refine((d) => d.password === d.confirmPassword, {
-  message: t("form.passwordMismatch"),
+  message: m.common_form_passwordMismatch(),
   path: ["confirmPassword"],
 })

package/src/routes/_nav/acceptance-criteria/route.tsx

@@ -16,13 +16,12 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createFileRoute } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
 import { PlaceholderPage } from '@/components/shared-kit/pages/placeholder-page'
 import { CircleCheckBig } from 'lucide-react'
+import { m } from "@/paraglide/messages.js";
 
 function AcceptanceCriteriaPage() {
-  const { t } = useTranslation('common')
-  return <PlaceholderPage title={t('nav.acceptance')} icon={CircleCheckBig} />
+  return <PlaceholderPage title={m.common_nav_acceptance()} icon={CircleCheckBig} />
 }
 
 export const Route = createFileRoute('/_nav/acceptance-criteria')({ component: AcceptanceCriteriaPage })

package/src/routes/_nav/apps/anyhub/$id/route.tsx

@@ -16,13 +16,12 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createFileRoute } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
 import { PlaceholderPage } from '@/components/shared-kit/pages/placeholder-page'
 import { PackageOpen } from 'lucide-react'
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createFileRoute('/_nav/apps/anyhub/$id')({
   component: () => {
-    const { t } = useTranslation('apps')
-    return <PlaceholderPage title={t('detail.title')} icon={PackageOpen} />
+    return <PlaceholderPage title={m.apps_detail_title()} icon={PackageOpen} />
   },
 })

package/src/routes/_nav/chat/route.lazy.tsx

@@ -19,7 +19,6 @@ import { createLazyFileRoute, Link as RouterLink, useNavigate } from '@tanstack/
 import { useState, useCallback, useEffect, useRef } from 'react'
 import { useChat, fetchServerSentEvents } from '@tanstack/ai-react'
 import { useQuery } from '@tanstack/react-query'
-import { useTranslation } from 'react-i18next'
 import AIChatHistory from '@/components/chat/ai-chat-history'
 import type { Conversation } from '@/components/chat/ai-chat-history'
 import AIConversation from '@/components/chat/ai-conversation'
@@ -53,13 +52,13 @@ import {
   clearHandoffState,
   type HandoffConversation,
 } from '@/lib/chat-handoff'
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute('/_nav/chat')({
   component: ChatPage,
 })
 
 function ChatPage() {
-  const { t } = useTranslation('chat')
   const { data: session } = useSession()
   const hasAiKey = session?.user?.hasAiKey
   const navigate = useNavigate()
@@ -91,7 +90,7 @@ function ChatPage() {
     threadId: activeConversationId ?? undefined,
     connection: fetchServerSentEvents('/api/chat'),
     body: {
-      systemPrompts: [t('systemPrompt')],
+      systemPrompts: [m.chat_systemPrompt()],
       webSearchEnabled,
       model: effectiveModel,
       agentId: selectedAgentId,
@@ -305,17 +304,17 @@ function ChatPage() {
             onValueChange={handleAgentChange}
             agents={agents}
           />
-          <h2 className="truncate font-semibold">{activeConversation?.title ?? t('newConversation')}</h2>
+          <h2 className="truncate font-semibold">{activeConversation?.title ?? m.chat_newConversation()}</h2>
         </div>
 
         {!hasAiKey && (
           <div className="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">
-              <RouterLink to="/settings/ai">{t('goToSettings')}</RouterLink>
+              <RouterLink to="/settings/ai">{m.chat_goToSettings()}</RouterLink>
             </Button>
           </div>
         )}
@@ -410,15 +409,15 @@ function ChatPage() {
     <AlertDialog open={confirmSwitchOpen} onOpenChange={setConfirmSwitchOpen}>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>{t('agentSelector.switchConfirmTitle')}</AlertDialogTitle>
+          <AlertDialogTitle>{m.chat_agentSelector_switchConfirmTitle()}</AlertDialogTitle>
           <AlertDialogDescription>
-            {t('agentSelector.switchConfirmDesc')}
+            {m.chat_agentSelector_switchConfirmDesc()}
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel>{t('actions.cancel')}</AlertDialogCancel>
+          <AlertDialogCancel>{m.chat_actions_cancel()}</AlertDialogCancel>
           <AlertDialogAction onClick={handleConfirmSwitch}>
-            {t('agentSelector.switchConfirm')}
+            {m.chat_agentSelector_switchConfirm()}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>

package/src/routes/_nav/dashboard/-components/activity-feed.tsx

@@ -17,7 +17,7 @@
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { MessageSquare } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
+import { m } from "@/paraglide/messages.js";
 
 interface Activity {
   id: string
@@ -31,18 +31,17 @@ interface ActivityFeedProps {
 }
 
 export function ActivityFeed({ activities }: ActivityFeedProps) {
-  const { t } = useTranslation('dashboard')
   return (
     <Card className="border">
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <MessageSquare className="h-4 w-4" />
-          {t('activityFeed.title')}
+          {m.dashboard_activityFeed_title()}
         </CardTitle>
       </CardHeader>
       <CardContent>
         {activities.length === 0 ? (
-          <p className="text-sm text-muted-foreground">{t('activityFeed.empty')}</p>
+          <p className="text-sm text-muted-foreground">{m.dashboard_activityFeed_empty()}</p>
         ) : (
           <div className="space-y-4">
             {activities.map((activity) => (

package/src/routes/_nav/dashboard/-components/quick-actions.tsx

@@ -18,19 +18,18 @@
 import { Button } from '@/components/ui/button'
 import { Plus, Package2, MessageSquare } from 'lucide-react'
 import { Link } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
+import { m } from "@/paraglide/messages.js";
 
 interface QuickActionsProps {
   onCreatePRD?: () => void
 }
 
 export function QuickActions({ onCreatePRD }: QuickActionsProps) {
-  const { t } = useTranslation('dashboard')
   return (
     <div className="flex flex-wrap gap-2">
       <Button variant="outline" size="sm" onClick={onCreatePRD}>
         <Plus className="mr-1 h-4 w-4" />
-        {t('quickActions.newPRD')}
+        {m.dashboard_quickActions_newPRD()}
       </Button>
       <Link to="/apps/anyhub">
         <Button variant="outline" size="sm">
@@ -41,7 +40,7 @@ export function QuickActions({ onCreatePRD }: QuickActionsProps) {
       <Link to="/prd">
         <Button variant="outline" size="sm">
           <MessageSquare className="mr-1 h-4 w-4" />
-          {t('quickActions.viewComments')}
+          {m.dashboard_quickActions_viewComments()}
         </Button>
       </Link>
     </div>

package/src/routes/_nav/dashboard/-components/stats-grid.tsx

@@ -17,7 +17,7 @@
 
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { FileText, MessageSquare, CheckCircle2, Package2 } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
+import { m } from "@/paraglide/messages.js";
 
 interface StatsGridProps {
   prdCount: number
@@ -28,12 +28,11 @@ interface StatsGridProps {
 }
 
 export function StatsGrid({ prdCount, completedToday, unreadComments, installedApps, className }: StatsGridProps) {
-  const { t } = useTranslation('dashboard')
   const stats = [
-    { title: t('stats.prdTotal'), value: prdCount, icon: FileText, color: 'text-blue-500' },
-    { title: t('stats.completedToday'), value: completedToday, icon: CheckCircle2, color: 'text-green-500' },
-    { title: t('stats.unreadComments'), value: unreadComments, icon: MessageSquare, color: 'text-amber-500' },
-    { title: t('stats.anyHubInstalled'), value: installedApps, icon: Package2, color: 'text-purple-500' },
+    { title: m.dashboard_stats_prdTotal(), value: prdCount, icon: FileText, color: 'text-blue-500' },
+    { title: m.dashboard_stats_completedToday(), value: completedToday, icon: CheckCircle2, color: 'text-green-500' },
+    { title: m.dashboard_stats_unreadComments(), value: unreadComments, icon: MessageSquare, color: 'text-amber-500' },
+    { title: m.dashboard_stats_anyHubInstalled(), value: installedApps, icon: Package2, color: 'text-purple-500' },
   ]
 
   return (

package/src/routes/_nav/dashboard/route.lazy.tsx

@@ -18,7 +18,6 @@
 import { cn } from "@/lib/utils"
 import { ClientOnly, createLazyFileRoute } from '@tanstack/react-router'
 import { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { StatsGrid } from './-components/stats-grid'
 import { ActivityFeed } from './-components/activity-feed'
 import { QuickActions } from './-components/quick-actions'
@@ -29,6 +28,7 @@ import WebglLightRays from '@/components/react-bits/light-rays'
 import { AiChatPrompt } from '@/components/ai/ai-chat-prompt'
 import { ContributionGraphWithTooltip } from '@/components/shared-kit/data-viz/contribution-graph-tooltip'
 import { PluginWidgets } from '@/components/plugin-slots/plugin-widgets'
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute('/_nav/dashboard')({
   pendingComponent: () => (
@@ -40,7 +40,6 @@ export const Route = createLazyFileRoute('/_nav/dashboard')({
 })
 
 function DashboardPage() {
-  const { t } = useTranslation('dashboard')
   const { prds, activityData } = Route.useLoaderData()
   const context = Route.useRouteContext()
   const [isDark, setIsDark] = useState(
@@ -77,11 +76,11 @@ function DashboardPage() {
         />
 
         <Card className="border">
-          <CardHeader>
-            <CardTitle>{t('dashboard.activity')}</CardTitle>
-          </CardHeader>
           <CardContent>
-            <ContributionGraphWithTooltip data={activityData} />
+            <ContributionGraphWithTooltip
+              data={activityData}
+              title={m.dashboard_dashboard_activity()}
+            />
           </CardContent>
         </Card>
 
@@ -89,11 +88,11 @@ function DashboardPage() {
           <ActivityFeed activities={[]} />
           <Card className="border">
             <CardHeader>
-              <CardTitle>{t('dashboard.quickEntry')}</CardTitle>
+              <CardTitle>{m.dashboard_dashboard_quickEntry()}</CardTitle>
             </CardHeader>
             <CardContent>
               <p className="text-sm text-muted-foreground">
-                {t('dashboard.teamFeatureComing')}
+                {m.dashboard_dashboard_teamFeatureComing()}
               </p>
             </CardContent>
           </Card>

package/src/routes/_nav/design/$projectId/$artboardId/route.lazy.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createLazyFileRoute, Link } from "@tanstack/react-router"
-import { useTranslation } from "react-i18next"
 import { ArrowLeft } from "lucide-react"
 import { CanvasPreview } from "@/components/design/sketch/canvas-preview"
 import { LayerTree } from "@/components/design/sketch/layer-tree"
@@ -26,6 +25,7 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/componen
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { useState } from "react"
 import type { AnnotationLayer } from "@/server/design/sketch/annotation-parser"
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute("/_nav/design/$projectId/$artboardId")({
   pendingComponent: () => <div className="p-6">Loading...</div>,
@@ -37,9 +37,7 @@ function ArtboardDetailPage() {
   const [selectedLayer, setSelectedLayer] = useState<AnnotationLayer | null>(null)
   const [hoveredLayer, setHoveredLayer] = useState<AnnotationLayer | null>(null)
   const { projectId } = Route.useParams()
-  const { t } = useTranslation("design")
-
-  if (!artboard) return <div className="p-6">{t("detail.notFound")}</div>
+  if (!artboard) return <div className="p-6">{m.design_detail_notFound()}</div>
 
   return (
     <div className="h-full flex flex-col">
@@ -55,15 +53,15 @@ function ArtboardDetailPage() {
       <ResizablePanelGroup orientation="horizontal">
         <ResizablePanel defaultSize={20} minSize={15}>
           <div className="h-full border-r p-4 overflow-auto">
-            <h3 className="font-semibold mb-3 text-sm">{t("detail.layers")}</h3>
-            <p className="text-xs text-muted-foreground">{t("detail.layerCount", { count: artboard.layerCount })}</p>
+            <h3 className="font-semibold mb-3 text-sm">{m.design_detail_layers()}</h3>
+            <p className="text-xs text-muted-foreground">{m.design_detail_layerCount({ count: artboard.layerCount ?? 0 })}</p>
           </div>
         </ResizablePanel>
         <ResizableHandle />
         <ResizablePanel defaultSize={60} minSize={40}>
           <div className="h-full p-4 overflow-auto flex items-center justify-center bg-muted/30">
             <div className="text-center text-muted-foreground">
-              <p className="text-sm">{t("detail.preview")}</p>
+              <p className="text-sm">{m.design_detail_preview()}</p>
               <p className="text-xs mt-1">{artboard.pngPath}</p>
             </div>
           </div>
@@ -72,8 +70,8 @@ function ArtboardDetailPage() {
         <ResizablePanel defaultSize={20} minSize={15}>
           <Tabs defaultValue="exports" className="h-full">
             <TabsList className="w-full justify-start">
-              <TabsTrigger value="exports">{t("detail.export")}</TabsTrigger>
-              <TabsTrigger value="code">{t("detail.code")}</TabsTrigger>
+              <TabsTrigger value="exports">{m.design_detail_export()}</TabsTrigger>
+              <TabsTrigger value="code">{m.design_detail_code()}</TabsTrigger>
             </TabsList>
             <TabsContent value="exports" className="p-4 overflow-auto">
               <ExportPanel exports={artboard.exports} projectId={projectId} />

package/src/routes/_nav/design/$projectId/route.lazy.tsx

@@ -16,9 +16,9 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createLazyFileRoute, Link } from "@tanstack/react-router"
-import { useTranslation } from "react-i18next"
 import { ArrowLeft } from "lucide-react"
 import { ArtboardGrid } from "@/components/design/artboard-grid"
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute("/_nav/design/$projectId")({
   pendingComponent: () => <div className="p-6">Loading...</div>,
@@ -27,9 +27,7 @@ export const Route = createLazyFileRoute("/_nav/design/$projectId")({
 
 function ProjectDetailPage() {
   const { project } = Route.useLoaderData()
-  const { t } = useTranslation("design")
-
-  if (!project) return <div className="p-6">{t("projectNotFound")}</div>
+  if (!project) return <div className="p-6">{m.design_projectNotFound()}</div>
 
   return (
     <div className="p-6 space-y-6">
@@ -40,7 +38,7 @@ function ProjectDetailPage() {
         <div>
           <h1 className="text-xl font-semibold">{project.name}</h1>
           <p className="text-sm text-muted-foreground">
-            {t("project.artboardVersionInfo", { count: project.artboards.length, version: project.version })}
+            {m.design_project_artboardVersionInfo({ count: project.artboards.length, version: project.version })}
           </p>
         </div>
       </div>