Merge pull request #66 from hubcio2115/i18n

apps/web/package.json

@@ -42,6 +42,7 @@
     "@total-typescript/ts-reset": "^0.5.1",
     "@uidotdev/usehooks": "^2.4.1",
     "@vercel/postgres": "^0.9.0",
+    "accept-language": "^3.0.20",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
@@ -50,6 +51,9 @@
     "drizzle-zod": "^0.5.1",
     "geist": "^1.3.1",
     "google-auth-library": "^9.14.0",
+    "i18next": "^23.15.1",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-resources-to-backend": "^1.2.1",
     "jiti": "^1.21.6",
     "ky": "^1.7.1",
     "lucide-react": "^0.412.0",
@@ -58,8 +62,10 @@
     "next-themes": "^0.3.0",
     "pg": "^8.12.0",
     "react": "18.3.1",
+    "react-cookie": "^7.2.0",
     "react-dom": "18.3.1",
     "react-hook-form": "^7.52.2",
+    "react-i18next": "^15.0.2",
     "tailwind-merge": "^2.5.1",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"

apps/web/src/app/dashboard/[name]/create-project/page.tsx → apps/web/src/app/[lang]/dashboard/[name]/create-project/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
+import type { SupportedLanguages } from "~/i18n/settings";
 import ProjectCreateForm from "~/components/create-project/project-create-form";
 import { useCreateProjectMutation } from "~/lib/mutations/useCreateProjectMutation";
 import type { InsertProject } from "~/lib/validators/project";
@@ -21,7 +22,7 @@ const defaultValues: InsertProject = {
 };
 
 interface CreateProjectPageProps {
-  params: { name: string };
+  params: { name: string; lang: SupportedLanguages };
 }
 
 export default function CreateProjectPage({ params }: CreateProjectPageProps) {
@@ -42,6 +43,7 @@ export default function CreateProjectPage({ params }: CreateProjectPageProps) {
         mutate={mutate}
         isPending={isPending}
         defaultValues={defaultValues}
+        lang={params.lang}
       />
     </div>
   );

apps/web/src/app/dashboard/[name]/layout.tsx → apps/web/src/app/[lang]/dashboard/[name]/layout.tsx

@@ -2,10 +2,12 @@ import { type PropsWithChildren } from "react";
 
 import Dashnav from "~/components/dashboard/dashnav";
 import Navbar from "~/components/navbar";
+import type { SupportedLanguages } from "~/i18n/settings";
 
 type DashboardLayoutProps = PropsWithChildren<{
   params: {
     name: string;
+    lang: SupportedLanguages;
   };
 }>;
 
@@ -16,9 +18,9 @@ export default async function DashboardLayout({
   return (
     <div className="flex min-h-screen flex-col gap-4">
       <div className="flex flex-col items-center justify-between border-b border-slate-200 bg-slate-100 p-2 pb-0">
-        <Navbar />
+        <Navbar lang={params.lang} />
 
-        <Dashnav orgName={params.name} />
+        <Dashnav orgName={params.name} lang={params.lang} />
       </div>
 
       {children}

apps/web/src/app/dashboard/[name]/overview/page.tsx → apps/web/src/app/[lang]/dashboard/[name]/overview/page.tsx

@@ -1,5 +1,6 @@
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
+import type { SupportedLanguages } from "~/i18n/settings";
 import ProjectGrid from "~/components/dashboard/project-grid";
 import ProjectsSkeleton from "~/components/dashboard/project-grid-skeleton";
 import ProjectPagination from "~/components/dashboard/project-pagination";
@@ -10,29 +11,47 @@ import { getOwnOrganizations } from "~/server/actions/organization";
 type DashboardOverviewProps = {
   params: {
     name: string;
+    lang: SupportedLanguages;
+  };
+  searchParams?: {
+    page?: string;
+    q?: string;
   };
 };
 
 export default async function DashboardOverviewPage({
-  params: { name },
+  params,
+  searchParams,
 }: DashboardOverviewProps) {
   const [organizations, err] = await getOwnOrganizations();
 
   if (err !== null) {
     throw err;
   }
 
-  const organization = organizations.find((org) => name === org.name);
+  const page = searchParams?.page;
+  const q = searchParams?.q;
+  console.log(page, q);
+  if ((page && isNaN(parseInt(page))) || q === undefined) {
+    const params = new URLSearchParams(searchParams);
+
+    if (!page || isNaN(parseInt(page))) params.set("page", "1");
+    if (q === undefined) params.set("q", "");
+
+    return redirect("?" + params.toString());
+  }
+
+  const organization = organizations.find((org) => params.name === org.name);
 
   return organization ? (
     <div className="mx-auto flex flex-col flex-1 items-center md:px-2 container pb-10 gap-8">
-      <SearchNavigation orgName={name} />
+      <SearchNavigation orgName={params.name} lang={params.lang} />
 
-      <ProjectPagination organizationName={name} />
+      <ProjectPagination lang={params.lang} organizationName={params.name} />
 
       <div className="grid grid-cols-1 gap-5 lg:grid-cols-2 lg:grid-rows-6 2xl:w-[1300px] 2xl:grid-cols-3 2xl:grid-rows-4 flex-1">
         <Suspense fallback={<ProjectsSkeleton />}>
-          <ProjectGrid organization={organization} />
+          <ProjectGrid lang={params.lang} organization={organization} />
         </Suspense>
       </div>
     </div>

apps/web/src/app/dashboard/[name]/project/[id]/page.tsx → apps/web/src/app/[lang]/dashboard/[name]/project/[id]/page.tsx

@@ -1,5 +1,6 @@
 import { redirect } from "next/navigation";
 import ProjectView from "~/components/dashboard/project-view";
+import type { SupportedLanguages } from "~/i18n/settings";
 import { getProjectById } from "~/server/actions/project";
 import {
   getChannel,
@@ -11,6 +12,7 @@ type ProjectPageProps = {
   params: {
     name: string;
     id: string;
+    lang: SupportedLanguages;
   };
 };
 
@@ -36,7 +38,10 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
   }
 
   const [[languages, languagesErr], [categories, categoriesErr]] =
-    await Promise.all([getYoutubeSupportedLanguages(), getYoutubeCategories()]);
+    await Promise.all([
+      getYoutubeSupportedLanguages(params.lang),
+      getYoutubeCategories(params.lang),
+    ]);
 
   if (languagesErr !== null || categoriesErr !== null) {
     throw new Error("Something went wrong on our end");
@@ -48,6 +53,7 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
       channel={channel}
       languages={languages}
       categories={categories}
+      lang={params.lang}
     />
   );
 }

apps/web/src/app/dashboard/[name]/settings/layout.tsx → apps/web/src/app/[lang]/dashboard/[name]/settings/layout.tsx

@@ -3,17 +3,21 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import type { PropsWithChildren } from "react";
+import { useTranslation } from "~/i18n/client";
+import type { SupportedLanguages } from "~/i18n/settings";
 
 import { cn } from "~/lib/utils";
 
 type SettingsProps = {
   params: {
     name: string;
+    lang: SupportedLanguages;
   };
 } & PropsWithChildren;
 
 export default function Settings({ params, children }: SettingsProps) {
   const pathname = usePathname();
+  const { t } = useTranslation(params.lang, "settings");
 
   return (
     <div className="mx-auto w-full flex-1 px-6 py-8 sm:p-12">
@@ -24,32 +28,33 @@ export default function Settings({ params, children }: SettingsProps) {
               <Link href={`/dashboard/${params.name}/settings`}>
                 <div
                   className={cn(
-                    "text-l border-transparent px-2 pb-2 capitalize last:border-r-0 lg:pb-0",
+                    "px-2 pb-2 capitalize border-b lg:border-b-0 lg:border-l lg:pb-0",
                     pathname.split("/").at(-1) === "settings"
-                      ? "cursor-default border-b border-b-fuchsia-900 text-fuchsia-900 lg:border-b-0 lg:border-l lg:border-l-fuchsia-900"
-                      : "border-slate-300 hover:border-b lg:hover:border-b-0 lg:hover:border-l",
+                      ? "cursor-default border-fuchsia-900 text-fuchsia-900"
+                      : "border-transparent hover:border-slate-300",
                   )}
                 >
-                  general
+                  {t("general.title")}
                 </div>
               </Link>
               <Link href={`/dashboard/${params.name}/settings/members`}>
                 <div
                   className={cn(
-                    "text-l border-transparent px-2 pb-2 capitalize last:border-r-0 lg:pb-0",
+                    "px-2 pb-2 capitalize border-b lg:border-b-0 lg:border-l lg:pb-0",
                     ["members", "invitations"].includes(
                       pathname.split("/").at(-1)!,
                     )
-                      ? "cursor-default border-b border-b-fuchsia-900 text-fuchsia-900 lg:border-b-0 lg:border-l lg:border-l-fuchsia-900"
-                      : "border-slate-300 hover:border-b lg:hover:border-b-0 lg:hover:border-l",
+                      ? "cursor-default border-fuchsia-900 text-fuchsia-900"
+                      : "border-transparent hover:border-slate-300",
                   )}
                 >
-                  members
+                  {t("members.title")}
                 </div>
               </Link>
             </div>
           </nav>
-          <div className="flex-1 lg:w-1">{children}</div>
+
+          {children}
         </div>
       </div>
     </div>