@allbluecn/web-app 0.9.5 → 0.10.0

package/src/routes/_nav/route.tsx

@@ -16,13 +16,14 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createFileRoute, Link, redirect, useLocation } from '@tanstack/react-router'
-import { I18nextProvider } from 'react-i18next'
-import { useTranslation } from 'react-i18next'
+import { isSaasEdition } from '@/lib/edition'
 import { useMemo } from 'react'
-import { createServerI18n } from '@/i18n/server'
+
+import { m } from '@/paraglide/messages.js'
 import { isDesktopServer } from '@/server/desktop-guest'
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty'
 import { Button } from '@/components/ui/button'
+import { GlobalErrorBoundary } from '@/components/error/global-error-boundary'
 import {
   ClipboardList,
   FileQuestionIcon,
@@ -98,7 +99,7 @@ function getSectionFromPath(pathname: string, t: any): { title: string; descript
   const segment = pathname.split('/').filter(Boolean)[0]
   const sectionKey = SECTION_KEYS[segment]
   if (!sectionKey) return null
-  const p = t(`notFoundPages.${sectionKey}`) as { title: string; description: string; backLabel: string }
+  const p = ((m as any)['notFoundPages_' + sectionKey] ?? { title: '', description: '', backLabel: '' }) as { title: string; description: string; backLabel: string }
   return { ...p, backTo: SECTION_BACK[sectionKey] || '/dashboard', section: sectionKey }
 }
 
@@ -113,18 +114,13 @@ const SECTION_BACK: Record<string, string> = {
 }
 
 function NavNotFound() {
-  const i18n = useMemo(() => createServerI18n('zh'), [])
   return (
-    <I18nextProvider i18n={i18n}>
       <NavNotFoundInner />
-    </I18nextProvider>
   )
 }
 
-function NavNotFoundInner() {
-  const { t } = useTranslation('common')
-  const { pathname } = useLocation()
-  const section = getSectionFromPath(pathname, t)
+function NavNotFoundInner() {const { pathname } = useLocation()
+  const section = getSectionFromPath(pathname, (k: string) => k)
 
   return (
     <div className="flex flex-1 items-center justify-center">
@@ -133,8 +129,8 @@ function NavNotFoundInner() {
           <EmptyMedia variant="icon">
             <FileQuestionIcon />
           </EmptyMedia>
-          <EmptyTitle>{section?.title ?? t('errorPage.notFound')}</EmptyTitle>
-          <EmptyDescription>{section?.description ?? t('errorPage.notFoundDesc')}</EmptyDescription>
+          <EmptyTitle>{section?.title ?? m.common_errorPage_notFound()}</EmptyTitle>
+          <EmptyDescription>{section?.description ?? m.common_errorPage_notFoundDesc()}</EmptyDescription>
         </EmptyHeader>
         <EmptyContent className="flex-row justify-center">
           {section && (
@@ -143,7 +139,7 @@ function NavNotFoundInner() {
             </Button>
           )}
           <Button asChild>
-            <Link to="/dashboard">{t('errorPage.goDashboard')}</Link>
+            <Link to="/dashboard">{m.common_errorPage_goDashboard()}</Link>
           </Button>
         </EmptyContent>
       </Empty>
@@ -153,8 +149,8 @@ function NavNotFoundInner() {
 
 export const Route = createFileRoute('/_nav')({
   beforeLoad: ({ context, location }) => {
-    if (!context.session?.user?.id) {
-      if (isDesktopServer()) return
+    if (isDesktopServer()) return
+    if (isSaasEdition && !context.session?.user?.id) {
       throw redirect({
         to: '/login',
         search: { redirect: location.pathname + location.searchStr },
@@ -162,4 +158,5 @@ export const Route = createFileRoute('/_nav')({
     }
   },
   notFoundComponent: NavNotFound,
+  errorComponent: GlobalErrorBoundary,
 })

package/src/routes/_nav/settings/-settings-tabs.tsx

@@ -16,73 +16,73 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { Link, useLocation } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
 import { User, Users, Bot, Palette, Settings, CreditCard, Plug, ShieldCheck, Bell, type LucideIcon } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { mergeSettingsGroups } from '@/components/plugin-slots/plugin-settings-tabs'
+import { m } from '@/paraglide/messages.js'
 
 type SettingsTab = {
-  labelKey: string
+  label: () => string
   path: string
   icon: LucideIcon
 }
 
 export type SettingsGroup = {
-  titleKey: string
+  title: () => string
   tabs: SettingsTab[]
 }
 
 const groups: SettingsGroup[] = [
   {
-    titleKey: 'tabs.general',
+    title: m.settings_tabs_general,
     tabs: [
-      { labelKey: 'tabs.generalSettings', path: '/settings/general', icon: Settings },
-      { labelKey: 'tabs.notifications', path: '/settings/notifications', icon: Bell },
+      { label: m.settings_tabs_generalSettings, path: '/settings/general', icon: Settings },
+      { label: m.settings_tabs_notifications, path: '/settings/notifications', icon: Bell },
     ],
   },
   {
-    titleKey: 'tabs.personalTeam',
+    title: m.settings_tabs_personalTeam,
     tabs: [
-      { labelKey: 'tabs.accountProfile', path: '/settings/account', icon: User },
-      { labelKey: 'tabs.teamMembers', path: '/settings/team', icon: Users },
-      { labelKey: 'tabs.dataPrivacy', path: '/settings/privacy', icon: ShieldCheck },
+      { label: m.settings_tabs_accountProfile, path: '/settings/account', icon: User },
+      { label: m.settings_tabs_teamMembers, path: '/settings/team', icon: Users },
+      { label: m.settings_tabs_dataPrivacy, path: '/settings/privacy', icon: ShieldCheck },
     ],
   },
   {
-    titleKey: 'tabs.ai',
+    title: m.settings_tabs_ai,
     tabs: [
-      { labelKey: 'tabs.aiAgents', path: '/settings/agents', icon: Bot },
-      { labelKey: 'tabs.aiProviders', path: '/settings/ai', icon: Bot },
+      { label: m.settings_tabs_aiAgents, path: '/settings/agents', icon: Bot },
+      { label: m.settings_tabs_aiProviders, path: '/settings/ai', icon: Bot },
     ],
   },
   {
-    titleKey: 'tabs.prdDesign',
-    tabs: [{ labelKey: 'tabs.uiDesign', path: '/settings/design', icon: Palette }],
+    title: m.settings_tabs_prdDesign,
+    tabs: [{ label: m.settings_tabs_uiDesign, path: '/settings/design', icon: Palette }],
   },
   {
-    titleKey: 'tabs.billing',
-    tabs: [{ labelKey: 'tabs.subscription', path: '/settings/billing', icon: CreditCard }],
+    title: m.settings_tabs_billing,
+    tabs: [{ label: m.settings_tabs_subscription, path: '/settings/billing', icon: CreditCard }],
   },
 ]
 
 const desktopGroups: SettingsGroup[] = [
   {
-    titleKey: 'tabs.desktop',
-    tabs: [{ labelKey: 'tabs.connectionMode', path: '/settings/connection', icon: Plug }],
+    title: m.settings_tabs_desktop,
+    tabs: [{ label: m.settings_tabs_connectionMode, path: '/settings/connection', icon: Plug }],
   },
 ]
 
 export function SettingsTabs() {
-  const { t } = useTranslation('settings')
   const location = useLocation()
   const isDesktop = import.meta.env.VITE_DEPLOY_TARGET === 'desktop'
+  const allGroups = isDesktop ? [...desktopGroups, ...groups] : groups
 
   return (
     <nav className="flex flex-col gap-4 space-y-2">
-      {mergeSettingsGroups(groups).map((group) => (
-        <div key={group.titleKey} className="flex flex-col gap-1">
+      {mergeSettingsGroups(allGroups).map((group) => (
+        <div key={group.title()} className="flex flex-col gap-1">
           <h2 className="px-3 text-xs font-medium tracking-wide text-muted-foreground uppercase">
-            {t(group.titleKey)}
+            {group.title()}
           </h2>
           {group.tabs.map((tab) => {
             const Icon = tab.icon
@@ -98,39 +98,12 @@ export function SettingsTabs() {
                 )}
               >
                 <Icon className="size-4" />
-                {t(tab.labelKey)}
+                {tab.label()}
               </Link>
             )
           })}
         </div>
       ))}
-
-      {isDesktop &&
-        desktopGroups.map((group) => (
-          <div key={group.titleKey} className="flex flex-col gap-1">
-            <h2 className="px-3 text-xs font-medium tracking-wide text-muted-foreground uppercase">
-              {t(group.titleKey)}
-            </h2>
-            {group.tabs.map((tab) => {
-              const Icon = tab.icon
-              return (
-                <Link
-                  key={tab.path}
-                  to={tab.path}
-                  className={cn(
-                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-primary',
-                    location.pathname === tab.path
-                      ? 'bg-muted text-primary'
-                      : 'text-muted-foreground',
-                  )}
-                >
-                  <Icon className="size-4" />
-                  {t(tab.labelKey)}
-                </Link>
-              )
-            })}
-          </div>
-        ))}
     </nav>
   )
 }

package/src/routes/_nav/settings/account/route.lazy.tsx

@@ -15,8 +15,7 @@
 // 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, useNavigate } from '@tanstack/react-router'
-import { useEffect } from 'react'
+import { createLazyFileRoute } from '@tanstack/react-router'
 import AccountClient from '@/components/settings/personal-team/account/account-client'
 
 export const Route = createLazyFileRoute('/_nav/settings/account')({
@@ -30,13 +29,6 @@ export const Route = createLazyFileRoute('/_nav/settings/account')({
 
 function AccountPage() {
   const ctx = Route.useRouteContext() as any
-  const navigate = useNavigate()
-
-  useEffect(() => {
-    if (ctx.error === 'unauthorized') {
-      navigate({ to: '/login' })
-    }
-  }, [ctx.error, navigate])
 
   if (ctx.error === 'unauthorized' || ctx.error === 'error') return null
 

package/src/routes/_nav/settings/ai/index/route.lazy.tsx

@@ -16,34 +16,33 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createLazyFileRoute } from "@tanstack/react-router"
-import { useTranslation } from "react-i18next"
 import { Bot } from "lucide-react"
 import { ProviderGrid } from "@/components/settings/ai/provider-grid"
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute("/_nav/settings/ai/")({
   component: AiProvidersPage,
 })
 
 function AiProvidersPage() {
-  const { t } = useTranslation('settings')
   return (
     <div className="space-y-6">
       <header className="space-y-2">
         <div className="flex items-center gap-2">
           <Bot className="size-5 text-primary" />
-          <h2 className="text-lg font-semibold">{t('ai.providers')}</h2>
+          <h2 className="text-lg font-semibold">{m.settings_ai_providers()}</h2>
         </div>
         <p className="text-sm text-muted-foreground">
-          {t('ai.providersDescription')}
+          {m.settings_ai_providersDescription()}
         </p>
       </header>
 
       <ProviderGrid />
 
       <section className="rounded-lg border bg-muted/30 p-4 text-xs text-muted-foreground space-y-1">
-        <p className="font-medium text-foreground">{t('ai.privacyNotice')}</p>
+        <p className="font-medium text-foreground">{m.settings_ai_privacyNotice()}</p>
         <p>
-          {t('ai.privacyNoticeDescription')}
+          {m.settings_ai_privacyNoticeDescription()}
         </p>
       </section>
     </div>

package/src/routes/_nav/settings/billing/route.lazy.tsx

@@ -17,26 +17,25 @@
 
 import { createLazyFileRoute, useSearch } from '@tanstack/react-router'
 import { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
 import { toast } from '@/components/ui/sonner'
 import { BillingPanel } from '@/components/billing/billing-panel'
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute('/_nav/settings/billing')({
   component: BillingPage,
 })
 
 function BillingPage() {
-  const { t } = useTranslation('settings')
   const loaderData = Route.useLoaderData()
   const search = useSearch({ from: '/_nav/settings/billing' })
 
   useEffect(() => {
     if (search?.checkout === 'success') {
-      toast.success(t('billing.subscriptionSuccess'))
+      toast.success(m.settings_billing_subscriptionSuccess())
     } else if (search?.checkout === 'cancel') {
-      toast.info(t('billing.paymentCancelled'))
+      toast.info(m.settings_billing_paymentCancelled())
     }
-  }, [search, t])
+  }, [search, ])
 
   return <BillingPanel subscription={loaderData.subscription} invoices={loaderData.invoices} />
 }

package/src/routes/_nav/settings/connection/route.lazy.tsx

@@ -1,11 +1,11 @@
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { useConnection, ModeSwitchDialog } from '@desktop/connection-manager'
 import type { ConnectionMode } from '@desktop/connection-manager'
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute('/_nav/settings/connection')({
   component: ConnectionSettingsPage,
@@ -18,34 +18,38 @@ const MODE_VARIANT: Record<ConnectionMode, 'default' | 'secondary' | 'outline'>
 }
 
 function ConnectionSettingsPage() {
-  const { t } = useTranslation('settings')
   const { config, switchMode } = useConnection()
   const [dialogOpen, setDialogOpen] = useState(false)
 
   const mode = config?.mode ?? 'local'
-  const modeLabel = t(`connection.${mode}`)
+  const MODE_LABELS: Record<string, () => string> = {
+    local: m.settings_connection_local,
+    cloud: m.settings_connection_cloud,
+    selfHosted: m.settings_connection_selfHosted,
+  }
+  const modeLabel = MODE_LABELS[mode]?.() ?? mode
 
   return (
     <div className="space-y-6 p-6">
       <div>
-        <h1 className="text-2xl font-bold">{t('connection.mode')}</h1>
-        <p className="text-muted-foreground mt-1">{t('connection.modeDescription')}</p>
+        <h1 className="text-2xl font-bold">{m.settings_connection_mode()}</h1>
+        <p className="text-muted-foreground mt-1">{m.settings_connection_modeDescription()}</p>
       </div>
 
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
-            {t('connection.currentMode')}
+            {m.settings_connection_currentMode()}
             <Badge variant={MODE_VARIANT[mode]}>{modeLabel}</Badge>
           </CardTitle>
           <CardDescription>
-            {mode === 'saas' && t('connection.cloudDescription')}
-            {mode === 'self-hosted' && t('connection.selfHostedDescription', { label: config?.label ?? config?.url })}
-            {mode === 'local' && t('connection.localDescription')}
+            {mode === 'saas' && m.settings_connection_cloudDescription()}
+            {mode === 'self-hosted' && m.settings_connection_selfHostedDescription({ label: (config?.label ?? config?.url) ?? "" })}
+            {mode === 'local' && m.settings_connection_localDescription()}
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <Button onClick={() => setDialogOpen(true)}>{t('connection.switchMode')}</Button>
+          <Button onClick={() => setDialogOpen(true)}>{m.settings_connection_switchMode()}</Button>
         </CardContent>
       </Card>
 

package/src/routes/_nav/settings/design/route.lazy.tsx

@@ -17,7 +17,6 @@
 
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { useMutation } from '@tanstack/react-query'
 import { Check, Copy, Eye, EyeOff, Loader2, RefreshCw, Trash2 } from 'lucide-react'
 import { toast } from '@/components/ui/sonner'
@@ -39,6 +38,7 @@ import {
   deleteSketchTokenFn,
   getDesignSettingsFn,
 } from '@/server/serverFns/design/settings'
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute('/_nav/settings/design')({
   component: DesignSettingsPage,
@@ -53,7 +53,6 @@ function maskToken(token: string): string {
 }
 
 function DesignSettingsPage() {
-  const { t } = useTranslation('settings')
   const ctx = Route.useRouteContext() as any
   const [token, setToken] = useState<string | null>(ctx.designSettings?.token ?? null)
   const [hasToken, setHasToken] = useState(ctx.designSettings?.hasToken ?? false)
@@ -72,32 +71,32 @@ function DesignSettingsPage() {
   const generateMutation = useMutation({
     mutationFn: () => generateSketchTokenFn({ data: {} }),
     onSuccess: (data) => {
-      toast.success(t('design.tokenGenerated'))
+      toast.success(m.settings_design_tokenGenerated())
       setToken(data.token)
       setHasToken(true)
       setShowToken(false)
       setCopied(false)
     },
-    onError: (err) => toast.error(err instanceof Error ? err.message : t('design.generateFailed')),
+    onError: (err) => toast.error(err instanceof Error ? err.message : m.settings_design_generateFailed()),
   })
 
   const deleteMutation = useMutation({
     mutationFn: () => deleteSketchTokenFn({ data: { clear: true } }),
     onSuccess: () => {
-      toast.success(t('design.tokenDeleted'))
+      toast.success(m.settings_design_tokenDeleted())
       setToken(null)
       setHasToken(false)
       setShowToken(false)
       setCopied(false)
     },
-    onError: (err) => toast.error(err instanceof Error ? err.message : t('design.deleteFailed')),
+    onError: (err) => toast.error(err instanceof Error ? err.message : m.settings_design_deleteFailed()),
   })
 
   const handleCopy = async () => {
     if (!token) return
     await navigator.clipboard.writeText(token)
     setCopied(true)
-    toast.success(t('design.copyTokenSuccess'))
+    toast.success(m.settings_design_copyTokenSuccess())
     setTimeout(() => setCopied(false), 2000)
   }
 
@@ -106,9 +105,9 @@ function DesignSettingsPage() {
   return (
     <div className="space-y-6">
       <div>
-        <h2 className="text-lg font-semibold">{t('design.title')}</h2>
+        <h2 className="text-lg font-semibold">{m.design_title()}</h2>
         <p className="text-sm text-muted-foreground">
-          {t('design.description')}
+          {m.design_description()}
         </p>
       </div>
 
@@ -125,7 +124,7 @@ function DesignSettingsPage() {
               size="icon"
               onClick={() => setShowToken((v) => !v)}
               className="shrink-0"
-              aria-label={showToken ? t('design.hideToken') : t('design.showToken')}
+              aria-label={showToken ? m.settings_design_hideToken() : m.settings_design_showToken()}
             >
               {showToken ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
             </Button>
@@ -133,14 +132,14 @@ function DesignSettingsPage() {
               variant="outline"
               onClick={handleCopy}
               className="shrink-0 gap-1.5"
-              aria-label={t('design.copyToken')}
+              aria-label={m.settings_design_copyToken()}
             >
               {copied ? <Check className="size-4 text-green-500" /> : <Copy className="size-4" />}
-              {t('design.copyToken')}
+              {m.settings_design_copyToken()}
             </Button>
           </div>
         ) : (
-          <p className="text-sm text-muted-foreground">{t('design.tokenNotGenerated')}</p>
+          <p className="text-sm text-muted-foreground">{m.settings_design_tokenNotGenerated()}</p>
         )}
 
         <div className="flex items-center gap-2">
@@ -150,7 +149,7 @@ function DesignSettingsPage() {
           >
             {generateMutation.isPending && <Loader2 className="mr-2 size-4 animate-spin" />}
             <RefreshCw className="mr-2 size-4" />
-            {hasToken ? t('design.regenerate') : t('design.generateToken')}
+            {hasToken ? m.settings_design_regenerate() : m.settings_design_generateToken()}
           </Button>
 
           {hasToken && (
@@ -158,23 +157,23 @@ function DesignSettingsPage() {
               <AlertDialogTrigger asChild>
                 <Button variant="ghost" size="sm" className="text-muted-foreground">
                   <Trash2 className="mr-1.5 size-3.5" />
-                  {t('design.delete')}
+                  {m.settings_design_delete()}
                 </Button>
               </AlertDialogTrigger>
               <AlertDialogContent>
                 <AlertDialogHeader>
-                  <AlertDialogTitle>{t('design.confirmDeleteToken')}</AlertDialogTitle>
+                  <AlertDialogTitle>{m.settings_design_confirmDeleteToken()}</AlertDialogTitle>
                   <AlertDialogDescription>
-                    {t('design.confirmDeleteTokenDescription')}
+                    {m.settings_design_confirmDeleteTokenDescription()}
                   </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
-                  <AlertDialogCancel>{t('design.cancel')}</AlertDialogCancel>
+                  <AlertDialogCancel>{m.settings_design_cancel()}</AlertDialogCancel>
                   <AlertDialogAction
                     onClick={() => deleteMutation.mutate()}
                     className="bg-destructive text-white hover:bg-destructive/90"
                   >
-                    {t('design.delete')}
+                    {m.settings_design_delete()}
                   </AlertDialogAction>
                 </AlertDialogFooter>
               </AlertDialogContent>
@@ -183,9 +182,9 @@ function DesignSettingsPage() {
         </div>
 
         <FieldDescription className="rounded-md border bg-muted/40 p-3 leading-relaxed">
-          <span className="block">{t('design.setupStep1')}</span>
-          <span className="block">{t('design.setupStep2')}</span>
-          <span className="block">{t('design.setupStep3')}</span>
+          <span className="block">{m.settings_design_setupStep1()}</span>
+          <span className="block">{m.settings_design_setupStep2()}</span>
+          <span className="block">{m.settings_design_setupStep3()}</span>
         </FieldDescription>
       </Field>
     </div>

package/src/routes/_nav/settings/general/route.lazy.tsx

@@ -17,7 +17,6 @@
 
 import { createLazyFileRoute } from '@tanstack/react-router'
 import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { Globe, Languages, Loader2 } from 'lucide-react'
 import { toast } from '@/components/ui/sonner'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
@@ -26,6 +25,7 @@ import { TimezoneSelect } from '@/components/shared-kit/timezone/timezone-select
 import { updateUserTimezoneFn } from '@/server/serverFns/user/settings'
 import { LanguageSelector } from '@/components/settings/language-selector'
 import type { Session } from '@/lib/auth/auth-client'
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute('/_nav/settings/general')({
   component: GeneralSettingsPage,
@@ -33,22 +33,21 @@ export const Route = createLazyFileRoute('/_nav/settings/general')({
 
 function GeneralSettingsPage() {
   const session = Route.useRouteContext({ select: (c) => c.session }) as Session | null
-  const { t } = useTranslation('settings')
   const [timezone, setTimezone] = useState(session?.user?.timezone ?? '')
   const [saving, setSaving] = useState(false)
 
   const handleSave = async () => {
     if (!timezone) {
-      toast.error(t('general.timezoneRequired'))
+      toast.error(m.settings_general_timezoneRequired())
       return
     }
     setSaving(true)
     try {
       await updateUserTimezoneFn({ data: { timezone } })
-      toast.success(t('general.timezoneUpdated'))
+      toast.success(m.settings_general_timezoneUpdated())
       window.dispatchEvent(new CustomEvent('timezone-updated'))
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : t('general.saveFailed'))
+      toast.error(err instanceof Error ? err.message : m.settings_general_saveFailed())
     } finally {
       setSaving(false)
     }
@@ -56,16 +55,16 @@ function GeneralSettingsPage() {
 
   return (
     <div className="space-y-6">
-      <h1 className="text-xl font-bold">{t('general.title')}</h1>
+      <h1 className="text-xl font-bold">{m.settings_general_title()}</h1>
 
       <Card>
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Globe className="size-5" />
-            {t('general.timezone')}
+            {m.settings_general_timezone()}
           </CardTitle>
           <CardDescription>
-            {t('general.timezoneDescription')}
+            {m.settings_general_timezoneDescription()}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
@@ -76,7 +75,7 @@ function GeneralSettingsPage() {
           />
           <Button onClick={handleSave} disabled={saving}>
             {saving ? <Loader2 className="size-4 animate-spin" /> : null}
-            {t('common:button.save')}
+            {m.common_button_save()}
           </Button>
         </CardContent>
       </Card>
@@ -85,10 +84,10 @@ function GeneralSettingsPage() {
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Languages className="size-5" />
-            {t('general.language')}
+            {m.settings_general_language()}
           </CardTitle>
           <CardDescription>
-            {t('general.languageDescription')}
+            {m.settings_general_languageDescription()}
           </CardDescription>
         </CardHeader>
         <CardContent>

package/src/routes/_nav/settings/notifications/route.lazy.tsx

@@ -16,21 +16,19 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { createLazyFileRoute } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
 import { SettingsNotifications } from '@/components/notifications/settings-notifications'
+import { m } from "@/paraglide/messages.js";
 
 export const Route = createLazyFileRoute('/_nav/settings/notifications')({
   component: NotificationsSettingsPage,
 })
 
 function NotificationsSettingsPage() {
-  const { t } = useTranslation('notifications')
-
   return (
     <div className="flex flex-col gap-6 p-6">
       <div>
-        <h2 className="text-lg font-semibold">{t('settings.title')}</h2>
-        <p className="text-sm text-muted-foreground">{t('settings.description')}</p>
+        <h2 className="text-lg font-semibold">{m.notifications_settings_title()}</h2>
+        <p className="text-sm text-muted-foreground">{m.notifications_settings_description()}</p>
       </div>
       <SettingsNotifications />
     </div>