feat: translate app to english (#340)

* feat(sidebar, attribute-input): add PL/EN translations

* fix(layout, sidebar): adjust padding and width for improved layout

* feat(auth, navigation): add PL/EN translations for auth; integrate language switch in navbar

* feat(homepage): add PL/EN translations for homepage

* chore: sort translation chapters alphabetically

* refactor: restructure superadmin panel and add PL/EN translations for dashboard

* fix: resolve problems after merge

* chore(format): fix prettier issues

* refactor: reuse block form and improve form error translations

* feat: add PL/EN translations for new email editor

* feat: add PL/EN translations to event registration form

* feat: add PL/EN translations for form validation messages and improve error handling in forms

* chore: remove unused type import from Auth layout

* feat: add PL/EN translations for attribute types

* refactor: improve type safety for ATTRIBUTE_TYPES translations

* feat: add PL/EN translations for email triggers and improve trigger type explanations

* refactor(tags): introduce MessageTags translations and improve email tag system

* refactor: localize app metadata and improve editor translations

* feat: add PL/EN translations for deletions, file validation and permissions

* refactor: refactor translateFormError and add action error translations

* fix(auth): remove max-width from form containers and update translations

* refactor: improve highlighted events translations

* refactor: add PL/EN translations for participant table elements

* test: fix tests after aria-label localization

* refactor: update translations for event-related messages and fix key casing

* refactor: improve email editor translations

* fix(auth): adjust layout width

* refactor: improve action error translations

* chore: resolve ESLint warnings

Author: moshenetsb

messages/en.json

@@ -1,6 +1,7 @@
 import { compareAsc, isBefore, isSameDay } from "date-fns";
 import { format as formatDate } from "date-fns/format";
 import { ArrowUpRight } from "lucide-react";
+import { useTranslations } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -33,6 +34,8 @@ function Event({
       ? "/assets/event-photo-placeholder.png"
       : `${PHOTO_URL}/${photoUrl}`;
 
+  const t = useTranslations("Homepage");
+
   // Helper to render date range using date-fns
   function renderDate() {
     const sameDay = isSameDay(startDate, endDate);
@@ -46,9 +49,13 @@ function Event({
     ) : (
       // Multi-day event: show start date on top, end date on bottom
       <>
-        <span>Od {formatDate(startDate, "dd.MM.yyyy")}</span>
+        <span>
+          {t("from")} {formatDate(startDate, "dd.MM.yyyy")}
+        </span>
         <br />
-        <span>do {formatDate(endDate, "dd.MM.yyyy")}</span>
+        <span>
+          {t("to")} {formatDate(endDate, "dd.MM.yyyy")}
+        </span>
       </>
     );
   }
@@ -58,19 +65,19 @@ function Event({
     const now = new Date();
     if (now < startDate) {
       return {
-        status: "Nadchodzące",
+        status: t("upcoming"),
         style:
           "rounded-full bg-[#88FC61] px-5 py-2 text-center font-extrabold whitespace-nowrap text-[#487115] dark:bg-[#88FC61]/20 dark:text-[#88FC61]",
       };
     } else if (now >= startDate && now <= endDate) {
       return {
-        status: "W trakcie",
+        status: t("ongoing"),
         style:
           "rounded-full bg-[#4473E1]/20 px-5 py-2 text-center font-extrabold whitespace-nowrap text-[#4473E1] dark:text-[#84a9ff]",
       };
     } else {
       return {
-        status: "Zakończone",
+        status: t("finished"),
         style:
           "rounded-full bg-gray-300 px-5 py-2 text-center font-extrabold whitespace-nowrap text-gray-600 dark:bg-gray-700/80 dark:text-gray-300",
       };
@@ -127,7 +134,7 @@ function Event({
                 className="border-input/20 flex w-full items-center justify-center rounded-full border bg-[#d6d6d6] text-black group-hover:bg-[#4473E1] group-hover:text-white group-hover:hover:bg-[#3458ae] lg:w-min"
               >
                 <Link href={`/${slug}`}>
-                  Sprawdź
+                  {t("viewDetails")}
                   <ArrowUpRight />
                 </Link>
               </Button>
@@ -148,6 +155,8 @@ function Event({
 }
 
 export function EventList({ events }: { events: EventType[] | undefined }) {
+  const t = useTranslations("Homepage");
+
   return (
     <section id="events" className="flex flex-col">
       <div className="border-input z-10 flex w-full flex-col divide-y-[1px] border-b bg-white dark:bg-[#101011]">
@@ -181,7 +190,7 @@ export function EventList({ events }: { events: EventType[] | undefined }) {
             ))
         ) : (
           <div className="flex h-64 w-full items-center justify-center text-gray-500 dark:text-gray-400">
-            <p className="text-xl">Brak wydarzeń w wybranym miesiącu</p>
+            <p className="text-xl">{t("noEventsInSelectedMonth")}</p>
           </div>
         )}
       </div>

messages/pl.json

@@ -12,6 +12,7 @@ import {
   startOfMonth,
 } from "date-fns";
 import { CircleAlert, Loader2 } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 
 import { EventList } from "@/app/(homepage)/sections/events/event-list";
@@ -62,6 +63,8 @@ async function fetchEvents(
 }
 
 export function Events() {
+  const t = useTranslations("Homepage");
+
   const [filters, setFilters] = useState<{ month: number; year: number }>({
     month: getMonth(new Date()),
     year: getYear(new Date()),
@@ -82,7 +85,7 @@ export function Events() {
     return (
       <div className="flex flex-row items-center gap-2 rounded-2xl bg-white px-6 py-4 text-black shadow-xl">
         <Loader2 className="animate-spin" />
-        Pobieranie wydarzeń...
+        {t("loadingEvents")}
       </div>
     );
   }
@@ -91,7 +94,7 @@ export function Events() {
     return (
       <div className="flex flex-row items-center gap-2 rounded-2xl bg-white px-6 py-4 text-black shadow-xl">
         <CircleAlert className="text-red-500" />
-        <p>O nie! Nie udało się pobrać wydarzeń: {error.message}</p>
+        <p>{t("failedToLoadEvents", { message: error.message })}</p>
       </div>
     );
   }

src/app/(homepage)/sections/events/event-list.tsx

@@ -3,6 +3,7 @@
 import { eachMonthOfInterval, getMonth, getYear } from "date-fns";
 import { ArrowLeftCircle, ArrowRightCircle } from "lucide-react";
 import { motion } from "motion/react";
+import { useLocale } from "next-intl";
 import { useLayoutEffect, useRef, useState } from "react";
 
 import { Button } from "@/components/ui/button";
@@ -75,6 +76,7 @@ export function Timeline({
   setFilters: ({ month, year }: { month: number; year: number }) => void;
 }) {
   const ref = useRef<HTMLDivElement>(null);
+  const locale = useLocale();
   const [width, setWidth] = useState(0);
 
   // Get the width of the timeline
@@ -159,7 +161,7 @@ export function Timeline({
           {monthYears.map(({ year, month }, index) => (
             <TimelineStep
               key={`${year.toString()}-${month.toString()}`}
-              month={new Date(year, month, 1).toLocaleString("pl", {
+              month={new Date(year, month, 1).toLocaleString(locale, {
                 month: "long",
               })}
               isFirst={index === 0}

src/app/(homepage)/sections/events/index.tsx

@@ -1,23 +1,26 @@
 import { ArrowRight, Heart } from "lucide-react";
+import { useTranslations } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
 import { FaFacebook, FaGithub, FaInstagram, FaLinkedin } from "react-icons/fa";
 
+import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
-import { buttonVariants } from "../../../components/ui/button";
-
 export function Footer() {
+  const t = useTranslations("Homepage");
   return (
     <footer className="z-10 flex w-full flex-col items-center bg-white dark:bg-[#101011]">
       <div className="container flex w-full flex-col items-center justify-between gap-16 px-8 pt-16 pb-8 sm:gap-32 sm:py-16 2xl:flex-row 2xl:items-center">
         <div className="flex w-full flex-col text-3xl font-medium 2xl:w-auto">
-          <p>Zostań na bieżąco z Eventownikiem Solvro</p>
+          <p>{t("stayUpdatedWithEventownik")}</p>
           <Link
             href="/newsletter-eventownik"
             className="flex flex-row items-center gap-2 text-[#6583C8] hover:underline"
           >
-            <span className="text-[#6583C8]">i zapisz się do newslettera.</span>
+            <span className="text-[#6583C8]">
+              {t("andSubscribeToNewsletter")}
+            </span>
             <ArrowRight size={32} />
           </Link>
           {/*
@@ -37,37 +40,37 @@ export function Footer() {
               target="_blank"
               rel="noopener noreferrer"
             >
-              Regulamin
+              {t("termsOfService")}
             </a>
             <a href="mailto:eventownik@pwr.edu.pl?subject=Zgłoszenie%20błędu">
-              Zgłoś błąd
+              {t("reportBug")}
             </a>
           </div>
           <div className="flex w-full flex-col items-center justify-between gap-8 sm:flex-row">
             <a
-              title="Koło Naukowe Solvro"
+              title={t("knSolvro")}
               href="https://solvro.pwr.edu.pl/"
               target="_blank"
               rel="noopener noreferrer"
             >
               <Image
                 src="/assets/logo/solvro_black.png"
-                alt="Logo Koła Naukowego Solvro"
+                alt={t("solvroLogoAlt")}
                 className="block dark:hidden"
                 width={200}
                 height={200}
               />
               <Image
                 src="/assets/logo/solvro_white.png"
-                alt="Logo Koła Naukowego Solvro"
+                alt={t("solvroLogoAlt")}
                 className="hidden dark:block"
                 width={200}
                 height={200}
               />
             </a>
             <div className="flex flex-row gap-6">
               <a
-                title="Repozytorium Eventownika na Githubie"
+                title={t("eventownikGithubRepo")}
                 href="https://github.com/Solvro/web-eventownik-v2"
                 target="_blank"
                 className={cn(
@@ -79,7 +82,7 @@ export function Footer() {
                 <FaGithub />
               </a>
               <a
-                title="Profil Koła Naukowego Solvro na Instagramie"
+                title={t("solvroInstagram")}
                 href="https://www.instagram.com/knsolvro/"
                 target="_blank"
                 className={cn(
@@ -91,7 +94,7 @@ export function Footer() {
                 <FaInstagram />
               </a>
               <a
-                title="Profil Koła Naukowego Solvro na Facebooku"
+                title={t("solvroFacebook")}
                 href="https://www.facebook.com/knsolvro"
                 target="_blank"
                 className={cn(
@@ -103,7 +106,7 @@ export function Footer() {
                 <FaFacebook />
               </a>
               <a
-                title="Profil Koła Naukowego Solvro na LinkedIn"
+                title={t("solvroLinkedIn")}
                 href="https://www.linkedin.com/company/knsolvro/"
                 target="_blank"
                 className={cn(
@@ -125,14 +128,14 @@ export function Footer() {
               <div className="container flex w-full flex-row items-center justify-center gap-8">
                 <Image
                   src="/logo_outline_light.png"
-                  alt="Eventownik logo"
+                  alt={t("eventownikLogo")}
                   width="1500"
                   height="1000"
                   className="block dark:hidden"
                 />
                 <Image
                   src="/logo_outline_dark.png"
-                  alt="Eventownik logo"
+                  alt={t("eventownikLogo")}
                   width="1500"
                   height="1000"
                   className="hidden dark:block"