feat(i18n): add optional Simplified Chinese interface and persistent language preferences

apps/web/next.config.ts

@@ -1,4 +1,5 @@
 import type { NextConfig } from "next";
+import createNextIntlPlugin from "next-intl/plugin";
 
 const nextConfig: NextConfig = {
   output: "standalone",
@@ -17,7 +18,11 @@ const nextConfig: NextConfig = {
   allowedDevOrigins: (() => {
     const fromUrl = (u: string | undefined) => {
       if (!u) return null;
-      try { return new URL(u).hostname; } catch { return null; }
+      try {
+        return new URL(u).hostname;
+      } catch {
+        return null;
+      }
     };
     const apex = (host: string) => {
       if (/^\d+\.\d+\.\d+\.\d+$/.test(host)) return host;
@@ -26,10 +31,16 @@ const nextConfig: NextConfig = {
     };
     // Dev-only cross-origin allowlist. Derive from the install env; never
     // hardcode our own domain so self-hosters don't carry `*.doable.me`.
-    const host = fromUrl(process.env.NEXT_PUBLIC_APP_URL)
-      || fromUrl(process.env.NEXT_PUBLIC_API_URL)
-      || "";
-    return [host, host ? `*.${apex(host)}` : "", "localhost", "127.0.0.1"].filter(Boolean);
+    const host =
+      fromUrl(process.env.NEXT_PUBLIC_APP_URL) ||
+      fromUrl(process.env.NEXT_PUBLIC_API_URL) ||
+      "";
+    return [
+      host,
+      host ? `*.${apex(host)}` : "",
+      "localhost",
+      "127.0.0.1",
+    ].filter(Boolean);
   })(),
   experimental: {
     serverActions: {
@@ -54,17 +65,21 @@ const nextConfig: NextConfig = {
   },
   async redirects() {
     return [
-      { source: '/settings/ai', destination: '/ai-settings', permanent: false },
-      { source: '/settings/usage', destination: '/usage', permanent: false },
-      { source: '/settings/billing', destination: '/billing', permanent: false },
+      { source: "/settings/ai", destination: "/ai-settings", permanent: false },
+      { source: "/settings/usage", destination: "/usage", permanent: false },
+      {
+        source: "/settings/billing",
+        destination: "/billing",
+        permanent: false,
+      },
     ];
   },
   async rewrites() {
     return [
       // Bare /favicon.ico requests (crawlers, browsers without <link rel="icon">)
       // are served by the dynamic icon.tsx route. Standalone build doesn't auto-alias
       // icon.tsx to /favicon.ico, so we wire it explicitly.
-      { source: '/favicon.ico', destination: '/icon' },
+      { source: "/favicon.ico", destination: "/icon" },
     ];
   },
   async headers() {
@@ -111,7 +126,13 @@ const nextConfig: NextConfig = {
     // allow="microphone; autoplay".
     const apiUrlRaw = process.env.NEXT_PUBLIC_API_URL || "";
     const previewOrigin = apiUrlRaw
-      ? (() => { try { return new URL(apiUrlRaw).origin; } catch { return ""; } })()
+      ? (() => {
+          try {
+            return new URL(apiUrlRaw).origin;
+          } catch {
+            return "";
+          }
+        })()
       : "";
     const micList = previewOrigin ? `(self "${previewOrigin}")` : "(self)";
     // BUG-016: CSP was applying `unsafe-eval` + `unsafe-inline` to every
@@ -206,5 +227,4 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default nextConfig;
-
+export default createNextIntlPlugin("./src/i18n/request.ts")(nextConfig);

apps/web/package.json

@@ -35,6 +35,7 @@
     "lucide-react": "^0.468.0",
     "monaco-editor": "^0.55.1",
     "next": "^16.2.0",
+    "next-intl": "4.14.8",
     "qrcode": "^1.5.4",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
@@ -48,8 +49,8 @@
     "@opennextjs/cloudflare": "^1.17.1",
     "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "^22.10.5",
-    "@types/react": "^19.2.0",
     "@types/qrcode": "^1.5.5",
+    "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",

apps/web/src/app/(auth)/error.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useUiText } from "@/i18n/use-ui-text";
 
 import { useEffect } from "react";
 import Link from "next/link";
@@ -10,26 +11,34 @@ export default function AuthError({
   error: Error & { digest?: string };
   reset: () => void;
 }) {
+  const ui = useUiText();
+
   useEffect(() => {
     console.error("Auth error:", error);
   }, [error]);
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-center bg-[#0a0a0a] px-4">
-      <h2 className="text-xl font-semibold text-white mb-2">Authentication Error</h2>
-      <p className="text-sm text-zinc-400 mb-6">{error.message || "Something went wrong."}</p>
+      <h2 className="text-xl font-semibold text-white mb-2">
+        {ui("Authentication Error")}
+      </h2>
+      <p className="text-sm text-zinc-400 mb-6">
+        {ui(error.message) || ui("Something went wrong.")}
+      </p>
       <div className="flex gap-3">
         <button
           onClick={reset}
           className="rounded-lg bg-zinc-800 px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-700 transition-colors"
         >
-          Try again
+          {" "}
+          {ui("Try again")}{" "}
         </button>
         <Link
           href="/login"
           className="rounded-lg bg-brand-600 px-4 py-2 text-sm text-white hover:bg-brand-500 transition-colors"
         >
-          Back to Login
+          {" "}
+          {ui("Back to Login")}{" "}
         </Link>
       </div>
     </div>

apps/web/src/app/(auth)/forgot-password/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useUiText } from "@/i18n/use-ui-text";
 
 import { useState, type FormEvent } from "react";
 import Link from "next/link";
@@ -10,6 +11,8 @@ import { ArrowLeft, Loader2, Mail } from "lucide-react";
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
 
 export default function ForgotPasswordPage() {
+  const ui = useUiText();
+
   const [email, setEmail] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -28,16 +31,18 @@ export default function ForgotPasswordPage() {
       });
 
       if (!res.ok) {
-        const body = await res.json().catch(() => ({ error: "Request failed" }));
-        throw new Error(body.error ?? "Request failed");
+        const body = await res
+          .json()
+          .catch(() => ({ error: "Request failed" }));
+        throw new Error(body.error ?? ui("Request failed"));
       }
 
       setIsSubmitted(true);
     } catch (err: unknown) {
       if (err instanceof Error) {
         setError(err.message);
       } else {
-        setError("Something went wrong. Please try again.");
+        setError(ui("Something went wrong. Please try again."));
       }
     } finally {
       setIsLoading(false);
@@ -51,14 +56,18 @@ export default function ForgotPasswordPage() {
           <Mail className="h-6 w-6 text-green-600 dark:text-green-400" />
         </div>
         <h2 className="mb-2 text-xl font-semibold text-[hsl(var(--foreground))]">
-          Check your email
+          {" "}
+          {ui("Check your email")}{" "}
         </h2>
         <p className="mb-6 text-sm text-[hsl(var(--muted-foreground))]">
-          If an account exists for <strong className="text-[hsl(var(--foreground))]">{email}</strong>,
-          we&apos;ve sent password reset instructions to your inbox.
+          {" "}
+          {ui("If an account exists for")}{" "}
+          <strong className="text-[hsl(var(--foreground))]">{email}</strong>
+          {ui(", we've sent password reset instructions to your inbox.")}{" "}
         </p>
         <p className="mb-6 text-xs text-[hsl(var(--muted-foreground))]">
-          Didn&apos;t receive the email? Check your spam folder or{" "}
+          {" "}
+          {ui("Didn't receive the email? Check your spam folder or")}{" "}
           <button
             type="button"
             onClick={() => {
@@ -67,15 +76,15 @@ export default function ForgotPasswordPage() {
             }}
             className="font-medium text-brand-700 hover:underline"
           >
-            try again
+            {" "}
+            {ui("try again")}{" "}
           </button>
         </p>
         <Link
           href="/login"
           className="inline-flex items-center gap-1.5 text-sm font-medium text-brand-700 hover:underline"
         >
-          <ArrowLeft className="h-4 w-4" />
-          Back to sign in
+          <ArrowLeft className="h-4 w-4" /> {ui("Back to sign in")}{" "}
         </Link>
       </div>
     );
@@ -88,10 +97,14 @@ export default function ForgotPasswordPage() {
           <Mail className="h-6 w-6 text-brand-700" />
         </div>
         <h2 className="text-xl font-semibold text-[hsl(var(--foreground))]">
-          Forgot your password?
+          {" "}
+          {ui("Forgot your password?")}{" "}
         </h2>
         <p className="mt-2 text-sm text-[hsl(var(--muted-foreground))]">
-          No worries. Enter your email and we&apos;ll send you reset instructions.
+          {" "}
+          {ui(
+            "No worries. Enter your email and we'll send you reset instructions.",
+          )}{" "}
         </p>
       </div>
 
@@ -105,16 +118,16 @@ export default function ForgotPasswordPage() {
             >
               <path d="M8 1a7 7 0 100 14A7 7 0 008 1zm-.75 4.75a.75.75 0 011.5 0v3a.75.75 0 01-1.5 0v-3zM8 11a1 1 0 110 2 1 1 0 010-2z" />
             </svg>
-            <span>{error}</span>
+            <span>{ui(error)}</span>
           </div>
         )}
 
         <div className="space-y-2">
-          <Label htmlFor="email">Email address</Label>
+          <Label htmlFor="email">{ui("Email address")}</Label>
           <Input
             id="email"
             type="email"
-            placeholder="you@example.com"
+            placeholder={ui("you@example.com")}
             autoComplete="email"
             required
             disabled={isLoading}
@@ -131,11 +144,11 @@ export default function ForgotPasswordPage() {
         >
           {isLoading ? (
             <>
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              Sending...
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />{" "}
+              {ui("Sending...")}{" "}
             </>
           ) : (
-            "Send reset instructions"
+            ui("Send reset instructions")
           )}
         </Button>
       </form>
@@ -145,8 +158,7 @@ export default function ForgotPasswordPage() {
           href="/login"
           className="inline-flex items-center gap-1.5 text-sm font-medium text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors"
         >
-          <ArrowLeft className="h-4 w-4" />
-          Back to sign in
+          <ArrowLeft className="h-4 w-4" /> {ui("Back to sign in")}{" "}
         </Link>
       </p>
     </>