🐛 Fix compilation issues

package.json

@@ -50,7 +50,6 @@
     "axios": "^0.27.2",
     "consola": "^2.15.3",
     "cookies-next": "^2.1.1",
-    "country-flag-icons": "^1.5.5",
     "dayjs": "^1.11.5",
     "dockerode": "^3.3.2",
     "embla-carousel-react": "^7.0.0",

src/components/AppShelf/AddAppShelfItem.tsx

@@ -210,7 +210,6 @@ export function AddAppShelfItemForm(props: AddAppShelfItemFormProps) {
               }),
             });
           } else {
-            console.log(newForm);
             setConfig({
               ...config,
               services: [...config.services, newForm],

src/components/AppShelf/AppShelfMenu.tsx

@@ -23,7 +23,13 @@ export default function AppShelfMenu(props: any) {
         onClose={() => setOpened(false)}
         title={t('modal.title')}
       >
-        <AddAppShelfItemForm setOpened={setOpened} {...service} message={t('modal.buttons.save')} />
+        <AddAppShelfItemForm
+          config={config}
+          setConfig={setConfig}
+          setOpened={setOpened}
+          {...service}
+          message={t('modal.buttons.save')}
+        />
       </Modal>
       <Menu
         withinPortal

src/components/Settings/LanguageSwitch.tsx

@@ -1,12 +1,11 @@
 import { Group, Select, Stack, Text } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
-import getUnicodeFlagIcon from 'country-flag-icons/unicode';
 
 import { forwardRef, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import { getCookie, setCookie } from 'cookies-next';
-import { getLanguageByCode, Language } from '../../languages/language';
+import { getLanguageByCode, Language } from '../../tools/language';
 
 export default function LanguageSwitch() {
   const { t, i18n } = useTranslation('settings/general/internationalization');
@@ -21,7 +20,7 @@ export default function LanguageSwitch() {
     ? locales.map((localeItem) => ({
         value: localeItem,
         label: getLanguageByCode(localeItem).originalName,
-        icon: getUnicodeFlagIcon(localeItem),
+        icon: getLanguageByCode(localeItem).emoji,
         language: getLanguageByCode(localeItem),
       }))
     : [];
@@ -59,7 +58,7 @@ export default function LanguageSwitch() {
   return (
     <Stack>
       <Select
-        icon={<Text>{getUnicodeFlagIcon(getLanguageByCode(selectedLanguage).shortName)}</Text>}
+        icon={<Text>{getLanguageByCode(selectedLanguage).emoji}</Text>}
         label={t('label')}
         data={data}
         itemComponent={SelectItem}
@@ -69,7 +68,7 @@ export default function LanguageSwitch() {
         defaultValue={locale}
         searchable
         filter={(value, item) => {
-          const selectItems = item as unknown as { value: string, language: Language };
+          const selectItems = item as unknown as { value: string; language: Language };
           return (
             selectItems.language.originalName.trim().includes(value.trim()) ||
             selectItems.language.translatedName.trim().includes(value.trim())
@@ -97,7 +96,7 @@ const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
   ({ language, image, ...others }: ItemProps, ref) => (
     <div ref={ref} {...others}>
       <Group noWrap>
-        <Text>{getUnicodeFlagIcon(language.shortName)}</Text>
+        <Text>{language.emoji}</Text>
 
         <div>
           <Text size="sm">

src/modules/docker/DockerTable.tsx

@@ -6,14 +6,11 @@ import {
   createStyles,
   ScrollArea,
   TextInput,
-  Modal,
 } from '@mantine/core';
 import { IconSearch } from '@tabler/icons';
 import Dockerode from 'dockerode';
 import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
-import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
-import { tryMatchService } from '../../tools/addToHomarr';
 import ContainerState from './ContainerState';
 
 const useStyles = createStyles((theme) => ({

src/tools/language.ts

@@ -2,64 +2,76 @@ export class Language {
   shortName: string;
   originalName: string;
   translatedName: string;
+  emoji: string;
 
-  constructor(shortName: string, originalName: string, translatedName: string) {
+  constructor(shortName: string, originalName: string, translatedName: string, emoji: string) {
     this.shortName = shortName;
     this.originalName = originalName;
     this.translatedName = translatedName;
+    this.emoji = emoji;
   }
 }
 
-const languages: Language[] = [
+export const languages: Language[] = [
   {
     shortName: 'de',
     originalName: 'Deutsch',
     translatedName: 'German',
+    emoji: '🇩🇪',
   },
   {
     shortName: 'en',
     originalName: 'English',
     translatedName: 'English',
+    emoji: '🇬🇧',
   },
   {
     shortName: 'es',
     originalName: 'Español',
     translatedName: 'Spanish',
+    emoji: '🇪🇸',
   },
   {
     shortName: 'fr',
     originalName: 'Français',
     translatedName: 'French',
+    emoji: '🇫🇷',
   },
   {
     shortName: 'it',
     originalName: 'Italiano',
     translatedName: 'Italian',
+    emoji: '🇮🇹',
   },
   {
     shortName: 'ja',
     originalName: '日本語',
     translatedName: 'Japanese',
+    emoji: '🇯🇵',
   },
   {
     shortName: 'nl',
     originalName: 'Nederlands',
     translatedName: 'Dutch',
+    emoji: '🇳🇱',
   },
   {
     shortName: 'ru',
     originalName: 'Русский',
     translatedName: 'Russian',
+    emoji: '🇷🇺',
   },
   {
     shortName: 'sv',
     originalName: 'Svenska',
     translatedName: 'Swedish',
+    emoji: '🇸🇪',
   },
   {
     shortName: 'zh',
     originalName: '中文',
     translatedName: 'Chinese',
+    emoji: '🇨🇳',
   },
 ];
 

yarn.lock

@@ -3195,13 +3195,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"country-flag-icons@npm:^1.5.5":
-  version: 1.5.5
-  resolution: "country-flag-icons@npm:1.5.5"
-  checksum: 367f38330a7f0f94836c7859575e1ae75655a04e2104ba060de75827d82bd84413fd7752c9166efa93123eb0d1dd1db1658ef22683511dcfa1c16f2caffe892d
-  languageName: node
-  linkType: hard
-
 "cpu-features@npm:~0.0.4":
   version: 0.0.4
   resolution: "cpu-features@npm:0.0.4"
@@ -4820,7 +4813,6 @@ __metadata:
     axios: ^0.27.2
     consola: ^2.15.3
     cookies-next: ^2.1.1
-    country-flag-icons: ^1.5.5
     dayjs: ^1.11.5
     dockerode: ^3.3.2
     embla-carousel-react: ^7.0.0