add translations

apps/website/src/@types/resources.d.ts

@@ -24,6 +24,138 @@ interface Resources {
           "supportBtn": "Get support",
           "backBtn": "Go back"
         }
+      },
+      "dashboard": {
+        "servers": {
+          "suggestedTopics": {
+            "quickSetup": {
+              "title": "Quick-setup",
+              "description": "Quickly create the most common counters in a few clicks. No imagination or brain required!",
+              "label": "Hassle free!"
+            },
+            "createFromScratch": {
+              "title": "Create from scratch",
+              "description": "Learn how to create your first custom counter in a few minutes",
+              "label": "Be unique!"
+            },
+            "advancedCounters": {
+              "title": "Advanced counters",
+              "description": "Get the most out of your counters, tailored to your needs",
+              "label": "Like a pro"
+            },
+            "queryHistoricalStatistics": {
+              "title": "Query historical statistics",
+              "description": "See how your counters and other common stats have evolved over time",
+              "label": "Coming Soon™"
+            },
+            "title": "Welcome back!",
+            "subTitle": "Here are some suggestions for you"
+          },
+          "inviteBotPage": {
+            "title": "Let's set up the bot!",
+            "subtitle": "Add Member counter to {{serverName}} and enjoy realtime counters.",
+            "addToServer": "Add to {{serverName}}",
+            "noPermission": "You don't have enough permissions to add the bot. Please ask an administrator or someone with Manage Server permission to add this bot.",
+            "useOrShareLink": "Use or share this link to add the bot",
+            "linkCopied": "The link has been copied to your clipboard",
+            "copyLink": "Copy invite link"
+          },
+          "inviteBotBanner": {
+            "message": "It looks like the Member Counter Bot isn't in this server. Would you like to <LinkURL>add it</LinkURL>?",
+            "closeBtn": "Close"
+          },
+          "forbiddenPage": {
+            "message": "You don't have permission to manage this server.\nAsk an admin at {guildName} to give you Administrator or Manage Guild permissions.",
+            "title": "Permission Denied"
+          },
+          "blockedBanner": {
+            "text": "This server has been blocked for violating our <LinkTerms>Terms of Service</LinkTerms> or <LinkPolicy>Acceptable Use Policy</LinkPolicy>.<br />Reason given: {{reason}}<br />If you think this is a mistake, please contact our <SupportLink>support team</SupportLink>.",
+            "termsOfService": "Terms of Service",
+            "acceptableUsePolicy": "Acceptable Use Policy",
+            "noReasonGiven": "No reason given",
+            "supportTeam": "support team"
+          }
+        }
+      },
+      "account": {
+        "deleteButton": {
+          "deleteAccountBtn": "Delete account",
+          "confirmTitle": "Are you absolutely sure?",
+          "confirmDescription": "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
+          "closeBtn": "Close"
+        },
+        "userBadges": {
+          "donor": "You donated to support the development and maintenance of Member Counter",
+          "premium": "You are a premium user",
+          "betaTester": "You participated in a beta program",
+          "translator": "You helped to translate the bot",
+          "contributor": "You implemented a feature or fixed a bug",
+          "bigBrain": "You suggested an idea and it was implemented",
+          "bugCatcher": "You found and reported a bug",
+          "patPat": "You found a secret",
+          "foldingAtHome": "You contributed a WU in folding@home"
+        },
+        "page": {
+          "avatarAlt": "{{username}}'s avatar",
+          "logoutButton": "Logout"
+        }
+      },
+      "admin": {
+        "guilds": {
+          "loadGuildInput": {
+            "placeholder": "Paste server ID",
+            "loadButton": "Load server"
+          }
+        },
+        "users": {
+          "delete": {
+            "button": "Delete account",
+            "dialogTitle": "Are you absolutely sure?",
+            "dialogDescription": "This action cannot be undone.",
+            "closeButton": "Close"
+          },
+          "manage": {
+            "permissions": {
+              "title": "Permissions",
+              "seeUsers": "See Users",
+              "manageUsers": "Manage Users",
+              "seeGuilds": "See Servers",
+              "manageGuilds": "Manage Servers"
+            },
+            "badges": {
+              "title": "Badges",
+              "donor": "Donor",
+              "premium": "Premium",
+              "betaTester": "Beta Tester",
+              "translator": "Translator",
+              "contributor": "Contributor",
+              "bigBrain": "Big Brain",
+              "bugCatcher": "Bug Catcher",
+              "patPat": "Pat Pat",
+              "foldingAtHome": "Folding@Home"
+            },
+            "transferAccount": "Transfer account",
+            "pasteUserId": "Paste user ID",
+            "saved": "Saved",
+            "save": "Save"
+          },
+          "loadUser": "Load user",
+          "recentUsers": "Recent users",
+          "userNotRegistered": "This user isn't registered."
+        }
+      }
+    },
+    "common": {
+      "unknownServer": "Unknown server",
+      "unknownUser": "Unknown user {{id}}",
+      "channelLabels": {
+        "textChannel": "Text channel",
+        "category": "Category",
+        "voiceChannel": "Voice channel",
+        "announcementChannel": "Announcement channel",
+        "stageChannel": "Stage channel",
+        "forumChannel": "Forum channel",
+        "mediaChannel": "Media channel"
       }
     }
   }

apps/website/src/app/account/DeleteButton.tsx

@@ -2,6 +2,7 @@
 
 import { useRouter } from "next/navigation";
 import { TrashIcon } from "lucide-react";
+import { Trans } from "react-i18next";
 
 import { Button } from "@mc/ui/button";
 import {
@@ -40,27 +41,29 @@ export function DeleteButton() {
           variant={"destructive"}
           icon={TrashIcon}
         >
-          Delete account
+          <Trans i18nKey="pages.account.deleteButton.deleteAccountBtn" />
         </Button>
       </DialogTrigger>
-      {/* // Thank you shad for providing me exactly the text I wanted in your dialog example lol */}
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Are you absolutely sure?</DialogTitle>
+          <DialogTitle>
+            <Trans i18nKey="pages.account.deleteButton.confirmTitle" />
+          </DialogTitle>
           <DialogDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
+            <Trans i18nKey="pages.account.deleteButton.confirmDescription" />
           </DialogDescription>
           <DialogFooter className="sm:justify-between">
             <Button
               icon={TrashIcon}
               variant="destructive"
               onClick={deleteAccount}
             >
-              Delete account
+              <Trans i18nKey="pages.account.deleteButton.deleteAccountBtn" />
             </Button>
             <DialogClose asChild>
-              <Button variant="secondary">Close</Button>
+              <Button variant="secondary">
+                <Trans i18nKey="pages.account.deleteButton.closeBtn" />
+              </Button>
             </DialogClose>
           </DialogFooter>
         </DialogHeader>

apps/website/src/app/account/DisplayUserBadges.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import type { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
+
 import { BitField } from "@mc/common/BitField";
 import {
   UserBadges,
@@ -13,23 +16,25 @@ import {
   TooltipTrigger,
 } from "@mc/ui/tooltip";
 
-const UserBadgesDescription: Record<(typeof UserBadges)[number], string> = {
-  Donor:
-    "You donated to support the development and maintenance of Member Counter",
-  Premium: "You are a premium user",
-  BetaTester: "You participated in a beta program",
-  Translator: "You helped to translate the bot",
-  Contributor: "You implemented a feature or fixed a bug",
-  BigBrain: "You suggested an idea and it was implemented",
-  BugCatcher: "You found and reported a bug",
-  PatPat: "You found a secret",
-  FoldingAtHome: "You contributed a WU in folding@home",
-} as const;
+const getUserBadgesDescription = (t: TFunction) => ({
+  Donor: t("pages.account.userBadges.donor"),
+  Premium: t("pages.account.userBadges.premium"),
+  BetaTester: t("pages.account.userBadges.betaTester"),
+  Translator: t("pages.account.userBadges.translator"),
+  Contributor: t("pages.account.userBadges.contributor"),
+  BigBrain: t("pages.account.userBadges.bigBrain"),
+  BugCatcher: t("pages.account.userBadges.bugCatcher"),
+  PatPat: t("pages.account.userBadges.patPat"),
+  FoldingAtHome: t("pages.account.userBadges.foldingAtHome"),
+});
 
 export function DisplayUserBadges({ badges: unparsed }: { badges: bigint }) {
+  const { t } = useTranslation();
+
   if (unparsed === 0n) return;
 
   const badges = new BitField(unparsed);
+  const userBadgesDescription = getUserBadgesDescription(t);
 
   const badgesToDisplay: {
     badge: (typeof UserBadges)[number];
@@ -39,7 +44,7 @@ export function DisplayUserBadges({ badges: unparsed }: { badges: bigint }) {
     (badge) => ({
       badge,
       emoji: UserBadgesEmoji[badge],
-      description: UserBadgesDescription[badge],
+      description: userBadgesDescription[badge],
     }),
   );
 

apps/website/src/app/account/page.tsx

@@ -4,6 +4,7 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { LogOutIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 import { Button } from "@mc/ui/button";
 import { Skeleton } from "@mc/ui/skeleton";
@@ -15,6 +16,7 @@ import { DeleteButton } from "./DeleteButton";
 import { DisplayUserBadges } from "./DisplayUserBadges";
 
 export default function Page() {
+  const { t } = useTranslation();
   const isAuthenticated = api.session.isAuthenticated.useQuery();
   if (isAuthenticated.data === false) redirect(Routes.Login);
 
@@ -35,11 +37,13 @@ export default function Page() {
           {discordUser.isSuccess ? (
             <img
               src={discordUser.data.avatar}
-              alt={`${discordUser.data.username}'s avatar`}
+              alt={t("pages.account.page.avatarAlt", {
+                username: discordUser.data.username,
+              })}
               className="background-forground h-[128px] w-[128px] rounded-full text-transparent"
             />
           ) : (
-            <Skeleton className="h-[128px] w-[128px] rounded-full"></Skeleton>
+            <Skeleton className="h-[128px] w-[128px] rounded-full" />
           )}
           <div className="i flex flex-col justify-center gap-3">
             {discordUser.isSuccess ? (
@@ -61,7 +65,7 @@ export default function Page() {
               <DeleteButton />
               <Link href={Routes.LogOut}>
                 <Button className="grow" size={"sm"} icon={LogOutIcon}>
-                  Logout
+                  {t("pages.account.page.logoutButton")}
                 </Button>
               </Link>
             </div>

apps/website/src/app/admin/guilds/LoadGuildInput.tsx

@@ -1,12 +1,16 @@
+"use client";
+
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { useTranslation } from "react-i18next";
 
 import { Button } from "@mc/ui/button";
 import { Input } from "@mc/ui/input";
 
 import { Routes } from "~/other/routes";
 
 export const LoadGuildInput = () => {
+  const { t } = useTranslation();
   const router = useRouter();
   const [guildId, setGuildId] = useState("");
 
@@ -21,14 +25,14 @@ export const LoadGuildInput = () => {
         value={guildId}
         onChange={(e) => setGuildId(e.target.value)}
         onKeyDown={(e) => e.key === "Enter" && loadGuild(guildId)}
-        placeholder="Paste server ID"
+        placeholder={t("pages.admin.guilds.loadGuildInput.placeholder")}
       />
       <Button
         variant={"secondary"}
         onClick={() => loadGuild(guildId)}
         disabled={!guildId}
       >
-        Load server
+        {t("pages.admin.guilds.loadGuildInput.loadButton")}
       </Button>
     </div>
   );

apps/website/src/app/admin/users/DisplayUser.tsx

@@ -1,3 +1,7 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+
 /* eslint-disable @next/next/no-img-element */
 export const DisplayUser = ({
   id,
@@ -9,24 +13,30 @@ export const DisplayUser = ({
   username?: string;
   discriminator?: string;
   avatar?: string;
-}) => (
-  <div className="flex flex-row items-center gap-2">
-    {avatar && username && discriminator ? (
-      <>
-        <img
-          src={avatar}
-          alt={`${username}'s avatar`}
-          className="h-8 w-8 rounded-full"
-        />
-        <div>
-          {username}
-          {discriminator !== "0" && (
-            <span className="text-muted-foreground">#{discriminator}</span>
-          )}
-        </div>
-      </>
-    ) : (
-      <span className="text-muted-foreground">Uknown user {id}</span>
-    )}
-  </div>
-);
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-row items-center gap-2">
+      {avatar && username && discriminator ? (
+        <>
+          <img
+            src={avatar}
+            alt={`${username}'s avatar`}
+            className="h-8 w-8 rounded-full"
+          />
+          <div>
+            {username}
+            {discriminator !== "0" && (
+              <span className="text-muted-foreground">#{discriminator}</span>
+            )}
+          </div>
+        </>
+      ) : (
+        <span className="text-muted-foreground">
+          {t("common.unknownUser", { id })}
+        </span>
+      )}
+    </div>
+  );
+};