✨ Add crowdin live-translate feature!

src/pages/_app.tsx

@@ -61,7 +61,7 @@ function App(
   const analyticsEnabled = pageProps.analyticsEnabled ?? true;
   // TODO: make mapping from our locales to moment locales
   const language = getLanguageByCode(pageProps.session?.user?.language ?? 'en');
-  require(`dayjs/locale/${language.locale}.js`);
+  if (language.locale !== 'cr') require(`dayjs/locale/${language.locale}.js`);
   dayjs.locale(language.locale);
 
   const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>(
@@ -101,12 +101,18 @@ function App(
   return (
     <>
       <CommonHead />
+      {pageProps.locale === 'cr' && (
+        <>
+          <Script type="text/javascript" src="//cdn.crowdin.com/jipt/jipt.js" />
+          <Script type="text/javascript">var _jipt = []; _jipt.push(['project', 'homarr']);</Script>
+        </>
+      )}
       {analyticsEnabled === true && (
         <Script
-        src="https://umami.homarr.dev/script.js"
-        data-website-id="f133f10c-30a7-4506-889c-3a803f328fa4"
-        strategy="lazyOnload"
-      />
+          src="https://umami.homarr.dev/script.js"
+          data-website-id="f133f10c-30a7-4506-889c-3a803f328fa4"
+          strategy="lazyOnload"
+        />
       )}
       <SessionProvider session={pageProps.session}>
         <ColorSchemeProvider {...pageProps}>

src/pages/user/preferences.tsx

@@ -71,7 +71,6 @@ const SettingsComponent = ({
   boardsData: RouterOutputs['boards']['all'];
 }) => {
   const languagesData = languages.map((language) => ({
-    image: 'https://img.icons8.com/clouds/256/000000/futurama-bender.png',
     label: language.originalName,
     description: language.translatedName,
     value: language.shortName,
@@ -199,8 +198,8 @@ const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
   ({ image, label, description, country, ...others }: ItemProps, ref) => (
     <div ref={ref} {...others}>
       <Group noWrap>
-        <span className={`fi fi-${country?.toLowerCase()}`}></span>
-
+        {country !== 'CROWDIN' && <span className={`fi fi-${country?.toLowerCase()}`}></span>}
+        {country === 'CROWDIN' && <img src={'https://support.crowdin.com/assets/logos/crowdin-dark-symbol.png'} alt={label} width={16} height={16} />}
         <div>
           <Text size="sm">{label}</Text>
           <Text size="xs" opacity={0.65}>