feat: localization (#196)

* Started adding locale translations :)

* Added some more translations

* Working on translating even more pages

* More translations

* Added test default locale retrieval

* replace `intl.formatMessage` with custom `t` hook

* add more translations

* improve title syntax

* add more translations

* translate admin config page

* translated error messages

* add language selecter

* minor fixes

* improve language handling

* add upcoming languages

* add `crowdin.yml`

* run formatter

---------

Co-authored-by: Steve Tautonico <stautonico@gmail.com>

frontend/src/pages/account/shares.tsx

@@ -17,11 +17,13 @@ import moment from "moment";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { TbInfoCircle, TbLink, TbTrash } from "react-icons/tb";
+import { FormattedMessage } from "react-intl";
 import Meta from "../../components/Meta";
 import showShareInformationsModal from "../../components/account/showShareInformationsModal";
 import showShareLinkModal from "../../components/account/showShareLinkModal";
 import CenterLoader from "../../components/core/CenterLoader";
 import useConfig from "../../hooks/config.hook";
+import useTranslate from "../../hooks/useTranslate.hook";
 import shareService from "../../services/share.service";
 import { MyShare } from "../../types/share.type";
 import toast from "../../utils/toast.util";
@@ -30,6 +32,7 @@ const MyShares = () => {
   const modals = useModals();
   const clipboard = useClipboard();
   const config = useConfig();
+  const t = useTranslate();
 
   const [shares, setShares] = useState<MyShare[]>();
 
@@ -41,18 +44,22 @@ const MyShares = () => {
 
   return (
     <>
-      <Meta title="My shares" />
+      <Meta title={t("account.shares.title")} />
       <Title mb={30} order={3}>
-        My shares
+        <FormattedMessage id="account.shares.title" />
       </Title>
       {shares.length == 0 ? (
         <Center style={{ height: "70vh" }}>
           <Stack align="center" spacing={10}>
-            <Title order={3}>It's empty here 👀</Title>
-            <Text>You don't have any shares.</Text>
+            <Title order={3}>
+              <FormattedMessage id="account.shares.title.empty" />
+            </Title>
+            <Text>
+              <FormattedMessage id="account.shares.description.empty" />
+            </Text>
             <Space h={5} />
             <Button component={Link} href="/upload" variant="light">
-              Create one
+              <FormattedMessage id="account.shares.button.create" />
             </Button>
           </Stack>
         </Center>
@@ -61,13 +68,21 @@ const MyShares = () => {
           <Table>
             <thead>
               <tr>
-                <th>Name</th>
+                <th>
+                  <FormattedMessage id="account.shares.table.name" />
+                </th>
                 <MediaQuery smallerThan="md" styles={{ display: "none" }}>
-                  <th>Description</th>
+                  <th>
+                    <FormattedMessage id="account.shares.table.description" />
+                  </th>
                 </MediaQuery>
 
-                <th>Visitors</th>
-                <th>Expires at</th>
+                <th>
+                  <FormattedMessage id="account.shares.table.visitors" />
+                </th>
+                <th>
+                  <FormattedMessage id="account.shares.table.expiresAt" />
+                </th>
                 <th></th>
               </tr>
             </thead>
@@ -121,9 +136,7 @@ const MyShares = () => {
                                 share.id
                               }`
                             );
-                            toast.success(
-                              "The link was copied to your clipboard."
-                            );
+                            toast.success(t("common.notify.copied"));
                           } else {
                             showShareLinkModal(
                               modals,
@@ -141,16 +154,21 @@ const MyShares = () => {
                         size={25}
                         onClick={() => {
                           modals.openConfirmModal({
-                            title: `Delete share ${share.id}`,
+                            title: t("account.shares.modal.delete.title", {
+                              share: share.id,
+                            }),
                             children: (
                               <Text size="sm">
-                                Do you really want to delete this share?
+                                <FormattedMessage id="account.shares.modal.delete.description" />
                               </Text>
                             ),
                             confirmProps: {
                               color: "red",
                             },
-                            labels: { confirm: "Confirm", cancel: "Cancel" },
+                            labels: {
+                              confirm: t("common.button.delete"),
+                              cancel: t("common.button.cancel"),
+                            },
                             onConfirm: () => {
                               shareService.remove(share.id);
                               setShares(