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/hooks/usePreferences.ts

@@ -1,30 +0,0 @@
-const defaultPreferences = [
-  {
-    key: "colorScheme",
-    value: "system",
-  },
-];
-
-const get = (key: string) => {
-  if (typeof window !== "undefined") {
-    const preferences = JSON.parse(localStorage.getItem("preferences") ?? "{}");
-    return (
-      preferences[key] ??
-      defaultPreferences.find((p) => p.key == key)?.value ??
-      null
-    );
-  }
-};
-
-const set = (key: string, value: string) => {
-  if (typeof window !== "undefined") {
-    const preferences = JSON.parse(localStorage.getItem("preferences") ?? "{}");
-    preferences[key] = value;
-    localStorage.setItem("preferences", JSON.stringify(preferences));
-  }
-};
-const usePreferences = () => {
-  return { get, set };
-};
-
-export default usePreferences;

frontend/src/hooks/useTranslate.hook.ts

@@ -0,0 +1,39 @@
+import { getCookie } from "cookies-next";
+import { createIntl, createIntlCache, useIntl } from "react-intl";
+import i18nUtil from "../utils/i18n.util";
+
+const useTranslate = () => {
+  const intl = useIntl();
+  return (
+    id: string,
+    values?: Parameters<typeof intl.formatMessage>[1],
+    opts?: Parameters<typeof intl.formatMessage>[2]
+  ) => {
+    return intl.formatMessage({ id }, values, opts) as string;
+  };
+};
+
+const cache = createIntlCache();
+
+export const translateOutsideContext = () => {
+  const locale =
+    getCookie("language")?.toString() ?? navigator.language.split("-")[0];
+
+  const intl = createIntl(
+    {
+      locale,
+      messages: i18nUtil.getLocaleByCode(locale)?.messages,
+      defaultLocale: "en",
+    },
+    cache
+  );
+  return (
+    id: string,
+    values?: Parameters<typeof intl.formatMessage>[1],
+    opts?: Parameters<typeof intl.formatMessage>[2]
+  ) => {
+    return intl.formatMessage({ id }, values, opts) as string;
+  };
+};
+
+export default useTranslate;