Internationalization (i18n) (#627)

* `feat: added internationalization lib, added english labels`
* `fixes from code review`
* `feat: add crowdin github actions`
* `fix: added support for i18n in testing. Fixed broken tests`
* `fix: missing translations`
* `removed unneded import`
* `more components updated with missing translations`
* `fixed lint issue`
* `Refactor: updated how translations are scoped, updated all references`
* `fixing broken tests`
* `feat: added language switcher, updated some translations`
* `fixed linting issues`
* `reverting vite config`
* `add english group id's to command palette`
* `updated PR template for i18n`

src/components/UI/Avatar.tsx

@@ -7,6 +7,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@components/UI/Tooltip.tsx";
+import { useTranslation } from "react-i18next";
 
 type RGBColor = {
   r: number;
@@ -73,6 +74,8 @@ export const Avatar = ({
   showFavorite = false,
   className,
 }: AvatarProps) => {
+  const { t } = useTranslation();
+
   const sizes = {
     sm: "size-10 text-xs font-light",
     lg: "size-16 text-lg",
@@ -82,7 +85,7 @@ export const Avatar = ({
   const bgColor = getColorFromText(safeText);
   const isLight = ColorUtils.isLight(bgColor);
   const textColor = isLight ? "#000000" : "#FFFFFF";
-  const initials = safeText?.slice(0, 4) ?? "UNK";
+  const initials = safeText?.slice(0, 4) ?? t("unknown.shortName");
 
   return (
     <div