Feature/i18n next intl UI

app/(auth)/sign-in/collaborator/page.tsx

@@ -1,19 +1,21 @@
 import { InviteSignIn } from "@/components/invite-sign-in";
 import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
+import { getTranslations } from "next-intl/server";
 
 export default async function Page({
   searchParams,
 }: {
   searchParams: Promise<{ token?: string }>;
 }) {
+  const t = await getTranslations("InviteSignIn");
   const { token } = await searchParams;
 
   if (!token?.trim()) {
     return (
       <Empty className="absolute inset-0 border-0 rounded-none">
         <EmptyHeader>
-          <EmptyTitle>Invite unavailable</EmptyTitle>
-          <EmptyDescription>This invitation link is invalid.</EmptyDescription>
+          <EmptyTitle>{t("unavailableTitle")}</EmptyTitle>
+          <EmptyDescription>{t("unavailableLinkDesc")}</EmptyDescription>
         </EmptyHeader>
       </Empty>
     );

app/(main)/loading.tsx

@@ -1,5 +1,12 @@
 import { Loader } from "@/components/loader";
+import { getTranslations } from "next-intl/server";
 
-export default function Loading() {
-  return <Loader className="absolute inset-0 text-muted-foreground text-sm bg-background rounded-md">Loading</Loader>;
+export default async function Loading() {
+  const t = await getTranslations("Loading");
+
+  return (
+    <Loader className="absolute inset-0 text-muted-foreground text-sm bg-background rounded-md">
+      {t("text")}
+    </Loader>
+  );
 }

app/(main)/main-root-layout.tsx

@@ -1,6 +1,7 @@
 import { User } from "@/components/user";
 import { AdminButton } from "@/components/admin-button";
 import { About } from "@/components/about";
+import { LanguageSwitcher } from "@/components/language-switcher";
 
 export function MainRootLayout({
   children,
@@ -13,6 +14,7 @@ export function MainRootLayout({
 				<div className="flex items-center gap-2 px-2 py-2 lg:px-4 lg:py-3">
 					<About/>
           <div className="ml-auto flex items-center gap-2">
+						<LanguageSwitcher />
             <AdminButton />
 					  <User align="end" />
           </div>

app/(main)/page.tsx

@@ -7,6 +7,7 @@ import { RepoSelect } from "@/components/repo/repo-select";
 import { RepoTemplates } from "@/components/repo/repo-templates";
 import { RepoLatest } from "@/components/repo/repo-latest";
 import { DocumentTitle } from "@/components/document-title";
+import { useTranslations } from "next-intl";
 import { hasGithubIdentity } from "@/lib/authz-shared";
 import {
   Empty,
@@ -22,6 +23,7 @@ export default function Page() {
   const [defaultAccount, setDefaultAccount] = useState<any>(null);
   const [hasRecentVisits, setHasRecentVisits] = useState(false);
   const { user } = useUser();
+  const t = useTranslations("HomePage");
   const isGithubUser = hasGithubIdentity(user);
 
   useEffect(() => {
@@ -33,21 +35,21 @@ export default function Page() {
 
   return (
     <MainRootLayout>
-      <DocumentTitle title="Projects" />
+      <DocumentTitle title={t("title")} />
       <div className="max-w-screen-sm mx-auto p-4 md:p-6 space-y-8">
         {user.accounts.length > 0 ? (
           <div className="min-h-[calc(100vh-12rem)] flex flex-col justify-center space-y-8">
             {hasRecentVisits && (
               <div className="space-y-4">
                 <h2 className="text-lg font-medium tracking-tight">
-                  Recently visited
+                  {t("recent")}
                 </h2>
                 <RepoLatest />
               </div>
             )}
             <div className="space-y-4">
               <h2 className="text-lg font-medium tracking-tight">
-                Open a project
+                {t("open")}
               </h2>
               <RepoSelect
                 onAccountSelect={(account) => setDefaultAccount(account)}
@@ -56,7 +58,7 @@ export default function Page() {
             {isGithubUser && (
               <div className="space-y-4">
                 <h2 className="text-lg font-medium tracking-tight">
-                  Create from a template
+                  {t("template")}
                 </h2>
                 <RepoTemplates defaultAccount={defaultAccount} />
               </div>
@@ -65,10 +67,9 @@ export default function Page() {
         ) : isGithubUser ? (
           <Empty className="absolute inset-0 border-0 rounded-none">
             <EmptyHeader>
-              <EmptyTitle>Install the GitHub App</EmptyTitle>
+              <EmptyTitle>{t("installTitle")}</EmptyTitle>
               <EmptyDescription>
-                Install the GitHub App on at least one account before you can
-                open or create projects.
+                {t("installDesc")}
               </EmptyDescription>
             </EmptyHeader>
             <EmptyContent>
@@ -85,18 +86,16 @@ export default function Page() {
                     <title>GitHub</title>
                     <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
                   </svg>
-                  Install GitHub App
+                  {t("installCta")}
               </Link>
             </EmptyContent>
           </Empty>
         ) : (
           <Empty className="absolute inset-0 border-0 rounded-none">
             <EmptyHeader>
-              <EmptyTitle>No repositories yet</EmptyTitle>
+              <EmptyTitle>{t("noneTitle")}</EmptyTitle>
               <EmptyDescription>
-                You need an invitation to a repository before you can
-                collaborate. Ask a repository owner or organization admin to
-                invite you.
+                {t("noneDesc")}
               </EmptyDescription>
             </EmptyHeader>
           </Empty>

app/(main)/settings/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { headers } from "next/headers";
+import { getTranslations } from "next-intl/server";
 import { and, eq } from "drizzle-orm";
 import { auth } from "@/lib/auth";
 import { db } from "@/db";
@@ -21,6 +22,7 @@ import { ArrowLeft } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 export default async function Page() {
+  const t = await getTranslations("SettingsPage");
   const session = await auth.api.getSession({
     headers: await headers(),
   });
@@ -39,7 +41,7 @@ export default async function Page() {
 
   return (
     <MainRootLayout>
-      <DocumentTitle title="Settings" />
+      <DocumentTitle title={t("title")} />
       <div className="max-w-screen-sm mx-auto p-4 md:p-6 space-y-6">
         <Link
           className={cn(
@@ -49,11 +51,11 @@ export default async function Page() {
           href="/"
         >
           <ArrowLeft />
-          Go home
+          {t("back")}
         </Link>
         <header className="flex items-center mb-6">
           <h1 className="font-semibold tracking-tight text-lg md:text-2xl">
-            Settings
+            {t("title")}
           </h1>
         </header>
         <div className="flex flex-col relative flex-1 space-y-6">
@@ -65,9 +67,11 @@ export default async function Page() {
 
           <Card>
             <CardHeader>
-              <CardTitle>Authentication</CardTitle>
+              <CardTitle>
+                {t("authTitle")}
+              </CardTitle>
               <CardDescription>
-                Your sign-in methods and linked identity providers.
+                {t("authDesc")}
               </CardDescription>
             </CardHeader>
             <CardContent>
@@ -84,10 +88,10 @@ export default async function Page() {
             <Card>
               <CardHeader>
                 <CardTitle className="text-base md:text-lg">
-                  Installations
+                  {t("instTitle")}
                 </CardTitle>
                 <CardDescription>
-                  Manage the accounts the Github application is installed on.
+                  {t("instDesc")}
                 </CardDescription>
               </CardHeader>
               <CardContent>

app/error.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { buttonVariants } from "@/components/ui/button";
 import { GithubAuthExpired } from "@/components/github-auth-expired";
 import { isGithubAuthError } from "@/lib/github-auth";
+import { useTranslations } from "next-intl";
 import {
   Empty,
   EmptyContent,
@@ -20,6 +21,8 @@ export default function Error({
   error: Error & { digest?: string };
   reset: () => void;
 }) {
+  const t = useTranslations("ErrorPage");
+
   useEffect(() => {
     console.error(error);
   }, [error]);
@@ -31,21 +34,21 @@ export default function Error({
   return (
     <Empty className="absolute inset-0 border-0 rounded-none">
       <EmptyHeader>
-        <EmptyTitle>Something went wrong</EmptyTitle>
+        <EmptyTitle>{t("title")}</EmptyTitle>
         <EmptyDescription>{error.message}</EmptyDescription>
       </EmptyHeader>
       <EmptyContent className="flex-row justify-center gap-2">
         <Link
           className={buttonVariants({ variant: "default" })}
           href="/"
         >
-          Go home
+          {t("goHome")}
         </Link>
         <button
           className={buttonVariants({ variant: "outline" })}
           onClick={reset}
         >
-          Try again
+          {t("tryAgain")}
         </button>
       </EmptyContent>
     </Empty>

app/layout.tsx

@@ -1,5 +1,7 @@
 import { Toaster } from "@/components/ui/sonner"
 import { Providers } from "@/components/providers";
+import { NextIntlClientProvider } from "next-intl";
+import { getLocale } from "next-intl/server";
 import type { Metadata } from "next";
 import { Inter, JetBrains_Mono } from "next/font/google";
 import { getBaseUrl } from "@/lib/base-url";
@@ -57,18 +59,22 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {  
+	const locale = await getLocale();
+
 	return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang={locale} suppressHydrationWarning>
       <body
         className={cn(
           "min-h-screen bg-background font-sans antialiased",
           inter.variable,
           jetbrainsMono.variable,
         )}
       >
-        <Providers user={null}>
-          {children}
-        </Providers>
+        <NextIntlClientProvider>
+          <Providers user={null}>
+            {children}
+          </Providers>
+        </NextIntlClientProvider>
         <Toaster/>
       </body>
     </html>

app/not-found.tsx

@@ -1,17 +1,20 @@
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
 import Link from "next/link";
 import { buttonVariants } from "@/components/ui/button";
+import { getTranslations } from "next-intl/server";
+
+export default async function NotFound() {
+  const t = await getTranslations("NotFoundPage");
 
-export default function NotFound() {
   return (
     <Empty className="absolute inset-0 border-0 rounded-none">
       <EmptyHeader>
-        <EmptyTitle>Page not found</EmptyTitle>
-        <EmptyDescription>The page or resource you requested could not be found.</EmptyDescription>
+        <EmptyTitle>{t("title")}</EmptyTitle>
+        <EmptyDescription>{t("desc")}</EmptyDescription>
       </EmptyHeader>
       <EmptyContent>
         <Link className={buttonVariants({ variant: "default" })} href="/">
-          Go home
+          {t("goHome")}
         </Link>
       </EmptyContent>
     </Empty>

components/about.tsx

@@ -3,6 +3,7 @@
 import type { ReactNode } from "react";
 import { useEffect, useMemo, useState } from "react";
 import { ArrowUpRight } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import {
@@ -31,6 +32,7 @@ const version =
 const UPDATE_DOCS_URL = "https://pagescms.org/docs";
 
 export function About() {
+  const t = useTranslations("AboutDialog");
   const [open, setOpen] = useState(false);
   const [latestVersion, setLatestVersion] = useState<string | null>(null);
 
@@ -84,11 +86,11 @@ export function About() {
                     <path d="M0 4.8C0 2.14903 2.14903 0 4.8 0H12.0118C13.2848 0 14.5057 0.505713 15.4059 1.40589L22.5941 8.59411C23.4943 9.49429 24 10.7152 24 11.9882V19.2C24 21.851 21.851 24 19.2 24H4.8C2.14903 24 0 21.851 0 19.2V4.8Z"></path>
                   </svg>
                 </span>
-                <span className="sr-only">About Pages CMS</span>
+                <span className="sr-only">{t("title")}</span>
               </Button>
             </DialogTrigger>
           </TooltipTrigger>
-          <TooltipContent>About Pages CMS</TooltipContent>
+          <TooltipContent>{t("title")}</TooltipContent>
         </Tooltip>
       </TooltipProvider>
       <DialogContent className="w-[20rem] max-w-[calc(100vw-2rem)]">
@@ -106,15 +108,14 @@ export function About() {
           <DialogTitle className="text-base font-semibold">
             Pages CMS
           </DialogTitle>
-          <DialogDescription>
-            Open source CMS for static sites. Edit directly on GitHub with a
-            clean interface.
+          <DialogDescription className="text-center">
+            {t("desc")}
           </DialogDescription>
         </DialogHeader>
 
         <div className="rounded-lg border">
           <Row
-            label="Version"
+            label={t("version")}
             value={
               <div className="flex items-center gap-2">
                 <span className="text-sm">{version}</span>
@@ -129,7 +130,7 @@ export function About() {
                       variant="secondary"
                       className="bg-primary/10 font-medium text-primary"
                     >
-                      Update to {latestVersion}
+                      {t("updateTo")} {latestVersion}
                       <ArrowUpRight className="ml-1 size-3" />
                     </Badge>
                   </a>
@@ -138,23 +139,23 @@ export function About() {
             }
           />
           <Row
-            label="Website"
+            label={t("website")}
             value={
               <ExternalLink href="https://pagescms.org">
                 pagescms.org
               </ExternalLink>
             }
           />
           <Row
-            label="Docs"
+            label={t("docs")}
             value={
               <ExternalLink href="https://pagescms.org/docs">
                 pagescms.org/docs
               </ExternalLink>
             }
           />
           <Row
-            label="GitHub"
+            label={t("github")}
             value={
               <ExternalLink href="https://github.com/pagescms/pagescms">
                 pagescms/pagescms