@allbluecn/web-app 0.9.5 → 0.10.0

package/src/components/anyhub/anyhub-marketplace-view.tsx

@@ -1,3 +1,4 @@
+import { m } from '@/paraglide/messages.js'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -15,9 +16,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 { useEffect, useState } from "react"
-import { useTranslation } from "react-i18next"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
@@ -34,14 +33,12 @@ export function AnyHubMarketplaceView({
   compact,
   onInstallSuccess,
 }: AnyHubMarketplaceViewProps) {
-  const marketApps = useAnyHubStore((s) => s.marketApps)
-  const loading = useAnyHubStore((s) => s.loading)
+  const marketApps = useAnyHubStore((s: any) => s.marketApps)
+  const loading = useAnyHubStore((s: any) => s.loading)
   const fetchMarketplace = anyHubActions.fetchMarketplace
   const installApp = anyHubActions.installApp
   const [search, setSearch] = useState("")
   const [installing, setInstalling] = useState<string | null>(null)
-  const { t } = useTranslation("apps")
-
   useEffect(() => {
     fetchMarketplace()
   }, [fetchMarketplace])
@@ -51,16 +48,16 @@ export function AnyHubMarketplaceView({
     const result = await installApp("market", { marketplaceAppId })
     setInstalling(null)
     if (result) {
-      toast.success(t("anyhub.install-success", { name: result.displayName }))
+      toast.success(m['anyhub_install-success']({ name: result.displayName }))
       onInstallSuccess?.()
     } else {
-      toast.error(t("anyhub.install-failed"))
+      toast.error(m['anyhub_install-failed']())
     }
   }
 
   const filtered = search
     ? marketApps.filter(
-        (a) =>
+        (a: any) =>
           a.displayName.toLowerCase().includes(search.toLowerCase()) ||
           a.name.toLowerCase().includes(search.toLowerCase()),
       )
@@ -73,10 +70,10 @@ export function AnyHubMarketplaceView({
           <div className="relative flex-1">
             <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
             <Input
-              placeholder={t("anyhub.search-apps")}
+              placeholder={m['anyhub_search-apps']()}
               className="pl-9"
               value={search}
-              onChange={(e) => setSearch(e.target.value)}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
             />
           </div>
         </div>
@@ -85,24 +82,24 @@ export function AnyHubMarketplaceView({
       {compact && (
         <div className="mb-3">
           <Input
-            placeholder={t("anyhub.search-apps")}
+            placeholder={m['anyhub_search-apps']()}
             value={search}
-            onChange={(e) => setSearch(e.target.value)}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
           />
         </div>
       )}
 
       {loading ? (
         <div className="py-8 text-center text-sm text-muted-foreground">
-          {t("anyhub.loading")}
+          {m.anyhub_loading()}
         </div>
       ) : filtered.length === 0 ? (
         <div className="py-8 text-center text-sm text-muted-foreground">
-          {search ? t("anyhub.no-matching-apps") : t("anyhub.marketplace-empty")}
+          {search ? m['anyhub_no-matching-apps']() : m['anyhub_marketplace-empty']()}
         </div>
       ) : (
         <div className={`grid gap-3 ${compact ? "grid-cols-1" : "sm:grid-cols-2 lg:grid-cols-3"}`}>
-          {filtered.map((app) => (
+          {filtered.map((app: any) => (
             <div
               key={app.id}
               className="rounded-lg border p-4 transition-shadow hover:shadow-sm"
@@ -139,7 +136,7 @@ export function AnyHubMarketplaceView({
                   disabled={installing === app.id}
                 >
                   <Download className="mr-1 size-3.5" />
-                  {installing === app.id ? t("anyhub.installing") : t("anyhub.install")}
+                  {installing === app.id ? m.anyhub_installing() : m.anyhub_install()}
                 </Button>
               </div>
             </div>

package/src/components/anyhub/anyhub-permission-panel.tsx

@@ -1,3 +1,4 @@
+import { m } from '@/paraglide/messages.js'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -15,9 +16,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 { useEffect, useState } from "react"
-import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
 import { Switch } from "@/components/ui/switch"
 import { Separator } from "@/components/ui/separator"
@@ -45,11 +44,9 @@ export function AnyHubPermissionPanel({
 }: AnyHubPermissionPanelProps) {
   const [permissions, setPermissions] = useState<Permission[]>([])
   const [loading, setLoading] = useState(true)
-  const { t } = useTranslation("apps")
-
   useEffect(() => {
     getAnyHubPermissionsFn({ data: { id: appId } })
-      .then((data) => {
+      .then((data: any) => {
         setPermissions(data)
         setLoading(false)
       })
@@ -69,14 +66,14 @@ export function AnyHubPermissionPanel({
         data: { id: appId, capability: p.capability, granted: p.granted },
       })
     }
-    toast.success(t("anyhub.permissions-saved"))
+    toast.success(m['anyhub_permissions-saved']())
     onClose()
   }
 
   if (loading) {
     return (
       <div className="border-b p-4">
-        <p className="text-sm text-muted-foreground">{t("anyhub.loading")}</p>
+        <p className="text-sm text-muted-foreground">{m.anyhub_loading()}</p>
       </div>
     )
   }
@@ -84,19 +81,19 @@ export function AnyHubPermissionPanel({
   return (
     <div className="border-b">
       <div className="flex items-center justify-between px-4 py-2">
-        <span className="text-sm font-medium">{t("anyhub.app-permissions", { name: appName })}</span>
+        <span className="text-sm font-medium">{m['anyhub_app-permissions']({ name: appName })}</span>
         <Button variant="ghost" size="icon" className="size-7" onClick={onClose}>
           <X className="size-4" />
         </Button>
       </div>
       <div className="px-4 pb-4">
-        {CAPABILITY_GROUPS.map((group, gi) => (
+        {CAPABILITY_GROUPS.map((group: any, gi: number) => (
           <div key={group.id}>
             {gi > 0 && <Separator className="my-2" />}
             <p className="mb-1 text-xs font-medium text-muted-foreground">
               {group.label}
             </p>
-            {group.capabilities.map((cap) => {
+            {group.capabilities.map((cap: any) => {
               const perm = permissions.find((p) => p.capability === cap.id)
               return (
                 <div
@@ -117,7 +114,7 @@ export function AnyHubPermissionPanel({
       <div className="flex justify-end border-t px-4 py-2">
         <Button size="sm" onClick={handleSave}>
           <Save className="mr-1 size-3.5" />
-          {t("anyhub.save-permissions")}
+          {m['anyhub_save-permissions']()}
         </Button>
       </div>
     </div>

package/src/components/anyhub/anyhub-provider.tsx

@@ -15,7 +15,6 @@
 // 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 { useEffect, type ReactNode } from "react"
 import { useAnyHubStore, anyHubActions } from "@/lib/anyhub/anyhub-store"
 

package/src/components/anyhub/anyhub-top-nav.tsx

@@ -1,3 +1,4 @@
+import { m } from '@/paraglide/messages.js'
 // SPDX-License-Identifier: AGPL-3.0-or-later
 // AllBlue - 理想之海
 // Copyright (C) 2026 AllBlue Contributors
@@ -15,9 +16,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 { useRouter } from "@tanstack/react-router"
-import { useTranslation } from "react-i18next"
 import { Button } from "@/components/ui/button"
 import {
   Tooltip,
@@ -31,12 +30,10 @@ import { AnyHubPermissionPanel } from "./anyhub-permission-panel"
 
 export function AnyHubTopNav() {
   const router = useRouter()
-  const activeApp = useAnyHubStore((s) => s.activeApp)
-  const topNavCollapsed = useAnyHubStore((s) => s.topNavCollapsed)
+  const activeApp = useAnyHubStore((s: any) => s.activeApp)
+  const topNavCollapsed = useAnyHubStore((s: any) => s.topNavCollapsed)
   const setTopNavCollapsed = anyHubActions.setTopNavCollapsed
   const [showPermissions, setShowPermissions] = useState(false)
-  const { t } = useTranslation("apps")
-
   if (!activeApp) return null
 
   if (topNavCollapsed) {
@@ -86,7 +83,7 @@ export function AnyHubTopNav() {
               <Settings className="size-4" />
             </Button>
           </TooltipTrigger>
-          <TooltipContent>{t("anyhub.permissions")}</TooltipContent>
+          <TooltipContent>{m.anyhub_permissions()}</TooltipContent>
         </Tooltip>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -102,7 +99,7 @@ export function AnyHubTopNav() {
               <X className="size-4" />
             </Button>
           </TooltipTrigger>
-          <TooltipContent>{t("anyhub.close")}</TooltipContent>
+          <TooltipContent>{m.anyhub_close()}</TooltipContent>
         </Tooltip>
       </div>
       {showPermissions && (

package/src/components/auth/auth-header.tsx

@@ -15,7 +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 { Target } from 'lucide-react'
+import { LogoIcon } from '@/components/shared-kit/logos/logo-icon'
 
 interface AuthHeaderProps {
   title: string
@@ -27,7 +27,7 @@ export function AuthHeader({ title, subtitle, titleClassName }: AuthHeaderProps)
   return (
     <div className="space-y-2 text-center">
       <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-lg bg-primary">
-        <Target className="h-10 w-10 text-primary-foreground" />
+        <LogoIcon strokeWidth={50} className="h-10 w-10 text-primary-foreground" />
       </div>
       <h1 className={`text-3xl font-semibold ${titleClassName || ''}`}>{title}</h1>
       {subtitle && (

package/src/components/auth/icon-input.tsx

@@ -15,7 +15,6 @@
 // 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 { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import type { LucideIcon } from 'lucide-react'

package/src/components/auth/oauth-section.tsx

@@ -14,12 +14,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 { useTranslation } from 'react-i18next'
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 import type { AuthProvider } from '@/components/auth/auth-providers'
 import { signIn } from '@/lib/auth/auth-client'
+import { m } from "@/paraglide/messages.js";
 
 export type { AuthProvider as OAuthProvider }
 
@@ -31,8 +30,7 @@ interface OAuthSectionProps {
 }
 
 export function OAuthSection({ providers, separatorText, actionText, redirectTo }: OAuthSectionProps) {
-  const { t } = useTranslation('auth')
-  const resolvedAction = actionText ?? t('login.defaultAction')
+  const resolvedAction = actionText ?? m.auth_login_defaultAction()
   return (
     <div className="space-y-5">
       {providers.map((provider) => (
@@ -43,7 +41,7 @@ export function OAuthSection({ providers, separatorText, actionText, redirectTo
           onClick={() => signIn(provider.id, { redirectTo })}
         >
           {provider.icon}
-          {t('login.useProvider', { name: provider.name, action: resolvedAction })}
+          {m.auth_login_useProvider({ name: provider.name, action: resolvedAction })}
         </Button>
       ))}
 

package/src/components/auth/password-input.tsx

@@ -15,19 +15,17 @@
 // 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 { useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Lock } from 'lucide-react'
+import { m } from "@/paraglide/messages.js";
 
 interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
   label: string
 }
 
 export function PasswordInput({ label, id, className, ...props }: PasswordInputProps) {
-  const { t } = useTranslation('auth')
   const inputId = id || label.toLowerCase()
   const [isVisible, setIsVisible] = useState(false)
 
@@ -48,7 +46,7 @@ export function PasswordInput({ label, id, className, ...props }: PasswordInputP
           type="button"
           onClick={() => setIsVisible(!isVisible)}
           className="absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground outline-none transition-colors hover:text-foreground focus:z-10 focus:ring-[3px] focus:ring-ring/50"
-          aria-label={isVisible ? t('login.hidePassword') : t('login.showPassword')}
+          aria-label={isVisible ? m.auth_login_hidePassword() : m.auth_login_showPassword()}
         >
           {isVisible ? (
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">

package/src/components/auth/session-guard.tsx

@@ -15,7 +15,6 @@
 // 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 { useSession } from "@/lib/auth/auth-client";
 import { useRouter } from "@tanstack/react-router";
 import { useEffect, useRef } from "react";

package/src/components/auth/sso-section.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import { KeyRound } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { checkSsoDomainFn } from '@/server/serverFns/sso'
 import { useDebouncedCallback } from '@/lib/pacer'
+import { m } from "@/paraglide/messages.js";
 
 interface SsoSectionProps {
   email: string
@@ -15,7 +15,6 @@ interface SsoProviderResult {
 }
 
 export function SsoSection({ email }: SsoSectionProps) {
-  const { t } = useTranslation('auth')
   const [provider, setProvider] = useState<SsoProviderResult | null>(null)
 
   const checkDomain = useDebouncedCallback(async (value: string) => {
@@ -45,10 +44,10 @@ export function SsoSection({ email }: SsoSectionProps) {
 
   return (
     <div className="space-y-2">
-      <p className="text-sm text-muted-foreground">{t('login.ssoDetected')}</p>
+      <p className="text-sm text-muted-foreground">{m.auth_login_ssoDetected()}</p>
       <Button type="button" variant="outline" className="w-full" onClick={handleSsoLogin}>
         <KeyRound className="mr-2 size-4" />
-        {t('login.ssoLoginWith', { name: provider.name })}
+        {m.auth_login_ssoLoginWith({ name: provider.name })}
       </Button>
     </div>
   )

package/src/components/billing/__tests__/seats-manager.test.tsx

@@ -30,10 +30,6 @@ vi.mock('../subscription-provider', () => ({
   useSubscription: (...args: unknown[]) => mockUseSubscription(...args),
 }))
 
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: (k: string) => k }),
-}))
-
 vi.mock('@/lib/deploy-region', () => ({
   isChina: () => false,
 }))
@@ -82,8 +78,8 @@ describe('SeatsManager', () => {
         onRefresh={() => {}}
       />,
     )
-    expect(screen.getByText(/seatsUsage/)).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: /seatsAdd/ })).toBeInTheDocument()
+    expect(screen.getByText(/席位：/)).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /增加席位/ })).toBeInTheDocument()
   })
 
   it('free / 无订阅渲染升级 CTA 而非 stepper', () => {
@@ -96,8 +92,8 @@ describe('SeatsManager', () => {
       loading: false,
     })
     render(<SeatsManager subscription={null} onRefresh={() => {}} />)
-    expect(screen.getByText(/seatsUpgradeCta/)).toBeInTheDocument()
-    expect(screen.queryByRole('button', { name: /seatsAdd/ })).not.toBeInTheDocument()
+    expect(screen.getByText(/席位加购为 Pro/)).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /增加席位/ })).not.toBeInTheDocument()
   })
 
   it('enterprise 渲染无限席位文案', () => {
@@ -125,6 +121,6 @@ describe('SeatsManager', () => {
         onRefresh={() => {}}
       />,
     )
-    expect(screen.getByText(/seatsUnlimited/)).toBeInTheDocument()
+    expect(screen.getByText(/当前计划席位不限量/)).toBeInTheDocument()
   })
 })

package/src/components/billing/billing-panel.tsx

@@ -4,8 +4,8 @@ import { SubscriptionCard } from './subscription-card'
 import { SeatsManager } from './seats-manager'
 import { InvoiceHistory } from './invoice-history'
 import { redirectToCheckout, redirectToPortal } from './checkout-redirect'
-import { useTranslation } from 'react-i18next'
 import { isChina } from '@/lib/deploy-region'
+import { m } from "@/paraglide/messages.js";
 
 interface BillingPanelProps {
   subscription: {
@@ -35,7 +35,6 @@ export function BillingPanel({
   subscription,
   invoices,
 }: BillingPanelProps) {
-  const { t } = useTranslation('billing')
   const router = useRouter()
   const [currency, setCurrency] = useState<'usd' | 'cny'>('usd')
   const isCn = isChina()
@@ -43,7 +42,7 @@ export function BillingPanel({
   return (
     <div className="max-w-3xl mx-auto space-y-8">
       <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold">{t('title')}</h1>
+        <h1 className="text-2xl font-bold">{m.billing_title()}</h1>
         {!isCn && (
           <div className="inline-flex rounded-lg border border-border bg-background p-1">
             <button
@@ -83,7 +82,7 @@ export function BillingPanel({
             onClick={() => redirectToCheckout('pro', currency)}
             className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
           >
-            {t('upgradeToPro')}
+            {m.billing_upgradeToPro()}
           </button>
         )}
         {!isCn && subscription && subscription.planName !== 'free' && (
@@ -91,12 +90,12 @@ export function BillingPanel({
             onClick={redirectToPortal}
             className="px-4 py-2 border border-border rounded-lg hover:bg-muted transition-colors"
           >
-            {t('manageBilling')}
+            {m.billing_manageBilling()}
           </button>
         )}
         {isCn && (
           <span className="px-4 py-2 text-sm text-muted-foreground bg-muted rounded-lg border border-border">
-            {t('comingSoon')}
+            {m.billing_comingSoon()}
           </span>
         )}
       </div>

package/src/components/billing/checkout-redirect.ts

@@ -4,16 +4,14 @@ import {
 } from '@/server/serverFns/billing'
 import { toast } from '@/components/ui/sonner'
 import { isChina } from '@/lib/deploy-region'
-import { getClientI18n } from '@/i18n/client'
+import { m } from '@/paraglide/messages.js'
 
 export async function redirectToCheckout(
   planId: string,
   currency: 'usd' | 'cny',
 ): Promise<void> {
-  const i18n = getClientI18n()
-
   if (isChina()) {
-    toast.info(i18n.t('billing:comingSoon'))
+    toast.info(m.billing_comingSoon())
     return
   }
 
@@ -22,7 +20,7 @@ export async function redirectToCheckout(
     window.location.href = url
   } catch (error) {
     toast.error(
-      i18n.t('billing:checkoutCreateFailed', {
+      m.billing_checkoutCreateFailed({
         message: (error as Error).message,
       }),
     )
@@ -30,10 +28,8 @@ export async function redirectToCheckout(
 }
 
 export async function redirectToPortal(): Promise<void> {
-  const i18n = getClientI18n()
-
   if (isChina()) {
-    toast.info(i18n.t('billing:comingSoon'))
+    toast.info(m.billing_comingSoon())
     return
   }
 
@@ -42,9 +38,9 @@ export async function redirectToPortal(): Promise<void> {
     window.location.href = url
   } catch (error) {
     toast.error(
-      i18n.t('billing:portalOpenFailed', {
+      m.billing_portalOpenFailed({
         message: (error as Error).message,
       }),
     )
   }
-}
+}

package/src/components/billing/feature-gate.tsx

@@ -2,8 +2,8 @@ import { useState, type ReactElement } from 'react'
 import { useFeature } from './use-feature'
 import { UpgradePrompt } from './upgrade-prompt'
 import { LoginPromptDialog } from './login-prompt-dialog'
-import { useTranslation } from 'react-i18next'
 import { type FeatureKey } from '@allbluecn/kernel'
+import { m } from "@/paraglide/messages.js";
 
 interface FeatureGateProps {
   feature: FeatureKey
@@ -18,7 +18,6 @@ export function FeatureGate({
   fallback,
   children,
 }: FeatureGateProps): ReactElement {
-  const { t } = useTranslation('billing')
   const { enabled, loading, requiresLogin, unavailable } = useFeature(feature)
   const [loginOpen, setLoginOpen] = useState(false)
 
@@ -43,7 +42,7 @@ export function FeatureGate({
     return (
       <>
         <div className="flex flex-col items-center justify-center gap-3 p-6 text-center">
-          <p className="text-sm text-muted-foreground">{t('requiresLogin')}</p>
+          <p className="text-sm text-muted-foreground">{m.billing_requiresLogin()}</p>
           <UpgradePrompt feature={feature} />
         </div>
         <LoginPromptDialog open={loginOpen} onOpenChange={setLoginOpen} feature={feature} />

package/src/components/billing/invoice-history.tsx

@@ -1,5 +1,5 @@
 import { format } from 'date-fns'
-import { useTranslation } from 'react-i18next'
+import { m } from "@/paraglide/messages.js";
 
 interface InvoiceHistoryProps {
   invoices: Array<{
@@ -19,27 +19,25 @@ interface InvoiceHistoryProps {
 export function InvoiceHistory({
   invoices,
 }: InvoiceHistoryProps) {
-  const { t } = useTranslation('billing')
-
   if (invoices.length === 0) {
     return (
       <div className="text-center py-8 text-muted-foreground">
-        <p>{t('noInvoices')}</p>
+        <p>{m.billing_noInvoices()}</p>
       </div>
     )
   }
 
   return (
     <div className="space-y-4">
-      <h3 className="text-lg font-semibold">{t('invoiceHistory')}</h3>
+      <h3 className="text-lg font-semibold">{m.billing_invoiceHistory()}</h3>
       <div className="rounded-lg border border-border overflow-hidden">
         <table className="w-full text-sm">
           <thead>
             <tr className="bg-muted/50">
-              <th className="text-left px-4 py-2 font-medium">{t('date')}</th>
-              <th className="text-right px-4 py-2 font-medium">{t('amount')}</th>
-              <th className="text-center px-4 py-2 font-medium">{t('status')}</th>
-              <th className="text-right px-4 py-2 font-medium">{t('action')}</th>
+              <th className="text-left px-4 py-2 font-medium">{m.billing_date()}</th>
+              <th className="text-right px-4 py-2 font-medium">{m.billing_amount()}</th>
+              <th className="text-center px-4 py-2 font-medium">{m.billing_status()}</th>
+              <th className="text-right px-4 py-2 font-medium">{m.billing_action()}</th>
             </tr>
           </thead>
           <tbody>
@@ -60,7 +58,7 @@ export function InvoiceHistory({
                         : 'bg-yellow-100 text-yellow-700'
                     }`}
                   >
-                    {inv.status === 'paid' ? t('paid') : t('unpaid')}
+                    {inv.status === 'paid' ? m.billing_paid() : m.billing_unpaid()}
                   </span>
                 </td>
                 <td className="px-4 py-2 text-right">
@@ -71,7 +69,7 @@ export function InvoiceHistory({
                       rel="noopener noreferrer"
                       className="text-primary hover:underline"
                     >
-                      {t('view')}
+                      {m.billing_view()}
                     </a>
                   )}
                 </td>

package/src/components/billing/login-prompt-dialog.tsx

@@ -11,7 +11,7 @@ import { Button } from '@/components/ui/button'
 import { Loader2, LogIn } from 'lucide-react'
 import { toast } from 'sonner'
 import { openLoginUrl } from '@/server/remote-auth'
-import { useTranslation } from 'react-i18next'
+import { m } from "@/paraglide/messages.js";
 
 interface LoginPromptDialogProps {
   open: boolean
@@ -26,7 +26,6 @@ export function LoginPromptDialog({
   feature,
   onSuccess,
 }: LoginPromptDialogProps): ReactElement {
-  const { t } = useTranslation('billing')
   const [exchanging, setExchanging] = useState(false)
 
   useEffect(() => {
@@ -48,7 +47,7 @@ export function LoginPromptDialog({
     try {
       await openLoginUrl(`/login?desktop_redirect=true`)
     } catch (e) {
-      toast.error(t('openBrowserFailed', { message: e instanceof Error ? e.message : t('unknownError') }))
+      toast.error(m.billing_openBrowserFailed({ message: e instanceof Error ? e.message : m.billing_unknownError() }))
       setExchanging(false)
     }
   }
@@ -60,27 +59,27 @@ export function LoginPromptDialog({
           <DialogTitle className="flex items-center gap-2">
             <LogIn className="size-5" />
             {feature
-              ? t('loginToUnlockFeature', { feature })
-              : t('loginToUnlock', { feature: t('moreFeatures') })}
+              ? m.billing_loginToUnlockFeature({ feature })
+              : m.billing_loginToUnlock({ feature: m.billing_moreFeatures() })}
           </DialogTitle>
           <DialogDescription>
-            {t('loginDescription')}
+            {m.billing_loginDescription()}
           </DialogDescription>
         </DialogHeader>
         <div className="py-2 text-sm text-muted-foreground space-y-1">
-          <p>• {t('loginBenefit1')}</p>
-          <p>• {t('loginBenefit2')}</p>
-          <p>• {t('loginBenefit3')}</p>
+          <p>• {m.billing_loginBenefit1()}</p>
+          <p>• {m.billing_loginBenefit2()}</p>
+          <p>• {m.billing_loginBenefit3()}</p>
         </div>
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>{t('later')}</Button>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>{m.billing_later()}</Button>
           <Button onClick={handleLogin} disabled={exchanging}>
             {exchanging ? (
               <Loader2 className="size-4 animate-spin mr-2" />
             ) : (
               <LogIn className="size-4 mr-2" />
             )}
-            {t('goToLogin')}
+            {m.billing_goToLogin()}
           </Button>
         </DialogFooter>
       </DialogContent>