Enchance emoji menu

front/src/Components/EmoteMenu/EmoteMenu.svelte

@@ -4,6 +4,7 @@
     import { onDestroy, onMount } from "svelte";
     import { EmojiButton } from "@joeattardi/emoji-button";
     import { isMobile } from "../../Enum/EnvironmentVariable";
+    import LL from "../../i18n/i18n-svelte";
 
     let emojiContainer: HTMLElement;
     let picker: EmojiButton;
@@ -15,10 +16,31 @@
             rootElement: emojiContainer,
             styleProperties: {
                 "--font": "Press Start 2P",
+                "--text-color": "whitesmoke",
+                "--secondary-text-color": "whitesmoke",
+                "--category-button-color": "whitesmoke",
             },
             emojisPerRow: isMobile() ? 6 : 8,
             autoFocusSearch: false,
             style: "twemoji",
+            showPreview: false,
+            i18n: {
+                search: $LL.emoji.search(),
+                categories: {
+                    recents: $LL.emoji.categories.recents(),
+                    smileys: $LL.emoji.categories.smileys(),
+                    people: $LL.emoji.categories.people(),
+                    animals: $LL.emoji.categories.animals(),
+                    food: $LL.emoji.categories.food(),
+                    activities: $LL.emoji.categories.activities(),
+                    travel: $LL.emoji.categories.travel(),
+                    objects: $LL.emoji.categories.objects(),
+                    symbols: $LL.emoji.categories.symbols(),
+                    flags: $LL.emoji.categories.flags(),
+                    custom: $LL.emoji.categories.custom(),
+                },
+                notFound: $LL.emoji.notFound(),
+            },
         });
         //the timeout is here to prevent the menu from flashing
         setTimeout(() => picker.showPicker(emojiContainer), 100);

front/src/i18n/en-US/emoji.ts

@@ -0,0 +1,21 @@
+import type { BaseTranslation } from "../i18n-types";
+
+const emoji: BaseTranslation = {
+    search: "Search emojis...",
+    categories: {
+        recents: "Recent Emojis",
+        smileys: "Smileys & Emotion",
+        people: "People & Body",
+        animals: "Animals & Nature",
+        food: "Food & Drink",
+        activities: "Activities",
+        travel: "Travel & Places",
+        objects: "Objects",
+        symbols: "Symbols",
+        flags: "Flags",
+        custom: "Custom",
+    },
+    notFound: "No emojis found",
+};
+
+export default emoji;

front/src/i18n/en-US/index.ts

@@ -10,6 +10,7 @@ import login from "./login";
 import menu from "./menu";
 import report from "./report";
 import warning from "./warning";
+import emoji from "./emoji";
 
 const en_US: BaseTranslation = {
     language: "English",
@@ -25,6 +26,7 @@ const en_US: BaseTranslation = {
     menu,
     report,
     warning,
+    emoji,
 };
 
 export default en_US;

front/src/i18n/fr-FR/emoji.ts

@@ -0,0 +1,21 @@
+import type { Translation } from "../i18n-types";
+
+const emoji: NonNullable<Translation["emoji"]> = {
+    search: "Chercher un emoji...",
+    categories: {
+        recents: "Emojis récents",
+        smileys: "Smileys & emotions",
+        people: "Personne & corps",
+        animals: "Animaux & nature",
+        food: "Nourriture & boissons",
+        activities: "Activités",
+        travel: "Voyage & endroits",
+        objects: "Objets",
+        symbols: "Symbols",
+        flags: "Drapeaux",
+        custom: "Personalisés",
+    },
+    notFound: "Aucun emoji trouvé",
+};
+
+export default emoji;

front/src/i18n/fr-FR/index.ts

@@ -4,6 +4,7 @@ import audio from "./audio";
 import camera from "./camera";
 import chat from "./chat";
 import companion from "./companion";
+import emoji from "./emoji";
 import error from "./error";
 import follow from "./follow";
 import login from "./login";
@@ -27,6 +28,7 @@ const fr_FR: Translation = {
     menu,
     report,
     warning,
+    emoji,
 };
 
 export default fr_FR;