matthias/lemonspace_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement internationalization support across components

Browse Source 
- Integrated `next-intl` for toast messages and locale handling in various components, including `Providers`, `CanvasUserMenu`, and `CreditOverview`.
- Replaced hardcoded strings with translation keys to enhance localization capabilities.
- Updated `RootLayout` to dynamically set the language attribute based on the user's locale.
- Ensured consistent user feedback through localized toast messages in actions such as sign-out, canvas operations, and billing notifications.
This commit is contained in:
Matthias Meister
2026-04-01 18:16:52 +02:00
parent 6ce1d4a82e
commit 79d9092d43
44 changed files with 1385 additions and 507 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/dashboard/page.tsx
View File

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { useTheme } from "next-themes";
import { useMutation } from "convex/react";
import { useTranslations } from "next-intl";
import {
ChevronDown,
Coins,
@@ -29,12 +30,12 @@ import {
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { api } from "@/convex/_generated/api";
import type { Doc } from "@/convex/_generated/dataModel";
import { authClient } from "@/lib/auth-client";
import { CreditOverview } from "@/components/dashboard/credit-overview";
import { RecentTransactions } from "@/components/dashboard/recent-transactions";
import CanvasCard from "@/components/dashboard/canvas-card";
import { toast } from "@/lib/toast";
import { msg } from "@/lib/toast-messages";
import { useAuthQuery } from "@/hooks/use-auth-query";
@@ -51,6 +52,7 @@ function getInitials(nameOrEmail: string) {
}
export default function DashboardPage() {
const t = useTranslations('toasts');
const router = useRouter();
const welcomeToastSentRef = useRef(false);
const { theme = "system", setTheme } = useTheme();
@@ -82,11 +84,11 @@ export default function DashboardPage() {
if (typeof window !== "undefined" && sessionStorage.getItem(key)) return;
welcomeToastSentRef.current = true;
sessionStorage.setItem(key, "1");
toast.success(msg.auth.welcomeOnDashboard.title);
}, [session?.user]);
toast.success(t('auth.welcomeOnDashboard'));
}, [t, session?.user]);
const handleSignOut = async () => {
toast.info(msg.auth.signedOut.title);
toast.info(t('auth.signedOut'));
await authClient.signOut();
router.replace("/auth/sign-in");
router.refresh();
@@ -240,7 +242,7 @@ export default function DashboardPage() {
</div>
) : (
<div className="grid gap-3 sm:grid-cols-3">
{canvases.map((canvas) => (
{canvases.map((canvas: Doc<"canvases">) => (
<CanvasCard
key={canvas._id}
canvas={canvas}

7
app/layout.tsx
View File

@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils";
import { Providers } from "@/components/providers";
import { InitUser } from "@/components/init-user";
import { getAuthUser, getToken } from "@/lib/auth-server";
import { getLocale, getMessages } from "next-intl/server";
const manrope = Manrope({ subsets: ["latin"], variable: "--font-sans" });
@@ -20,6 +21,8 @@ export default async function RootLayout({
children: React.ReactNode;
}>) {
const initialToken = await getToken();
const locale = await getLocale();
const messages = await getMessages();
const user = await getAuthUser();
if (user) {
const id = user.userId ?? String(user._id);
@@ -33,7 +36,7 @@ export default async function RootLayout({
return (
<html
lang="de"
lang={locale}
suppressHydrationWarning
className={cn("h-full", "antialiased", "font-sans", manrope.variable)}
>
@@ -56,7 +59,7 @@ export default async function RootLayout({
></script>
</head>
<body className="min-h-full flex flex-col">
<Providers initialToken={initialToken}>
<Providers initialToken={initialToken} locale={locale} messages={messages}>
<InitUser />
{children}
</Providers>

5
app/page.tsx
View File

@@ -3,10 +3,11 @@
import { authClient } from "@/lib/auth-client";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { toast } from "@/lib/toast";
import { msg } from "@/lib/toast-messages";
export default function Home() {
const t = useTranslations('toasts');
const { data: session, isPending } = authClient.useSession();
const router = useRouter();
@@ -35,7 +36,7 @@ export default function Home() {
</Link>
<button
onClick={() => {
toast.info(msg.auth.signedOut.title);
toast.info(t('auth.signedOut'));
void authClient.signOut().then(() => router.refresh());
}}
className="rounded-lg border border-border px-6 py-3 text-sm hover:bg-accent"