Merge dev, add translation

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: "native",
+            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/Components/LayoutManager/LayoutManager.svelte

@@ -6,7 +6,27 @@
         callback();
     }
 
-    function sanitize(html) {
+    function i18n(text: string | number | boolean | undefined): string {
+        if (typeof text === "string") {
+            if (text.trim().startsWith("{")) {
+                try {
+                    let textObject = JSON.parse(text);
+                    if (textObject[$locale]) {
+                        return textObject[$locale];
+                    } else if (Object.keys(textObject).length > 0) {
+                        // fallback to first value
+                        return textObject[Object.keys(textObject)[0]];
+                    }
+                } catch (err) {
+                    //
+                }
+            }
+            return text;
+        }
+        return "";
+    }
+
+    function sanitize(html : string | number | boolean | undefined): string {
       return HtmlUtils.sanitize(html);
     }
 </script>
@@ -14,7 +34,7 @@
 <div class="layout-manager-list">
     {#each $layoutManagerActionStore as action}
         <div class="nes-container is-dark {action.type}" on:click={() => onClick(action.callback)}>
-          <p>{@html sanitize(action.message)}</p>
+          <p>{@html sanitize(i18n(action.message))}</p>
         </div>
     {/each}
 </div>

front/src/Components/Menu/SettingsSubMenu.svelte

@@ -104,13 +104,13 @@
                 >
                 <option value={40}
                     >{isMobile()
-                        ? $LL.menu.settings.gameQuality.short.minimum()
-                        : $LL.menu.settings.gameQuality.long.minimum()}</option
+                        ? $LL.menu.settings.gameQuality.short.small()
+                        : $LL.menu.settings.gameQuality.long.small()}</option
                 >
                 <option value={20}
                     >{isMobile()
-                        ? $LL.menu.settings.gameQuality.short.small()
-                        : $LL.menu.settings.gameQuality.long.small()}</option
+                        ? $LL.menu.settings.gameQuality.short.minimum()
+                        : $LL.menu.settings.gameQuality.long.minimum()}</option
                 >
             </select>
         </div>
@@ -131,13 +131,13 @@
                 >
                 <option value={10}
                     >{isMobile()
-                        ? $LL.menu.settings.videoQuality.short.minimum()
-                        : $LL.menu.settings.videoQuality.long.minimum()}</option
+                        ? $LL.menu.settings.videoQuality.short.small()
+                        : $LL.menu.settings.videoQuality.long.small()}</option
                 >
                 <option value={5}
                     >{isMobile()
-                        ? $LL.menu.settings.videoQuality.short.small()
-                        : $LL.menu.settings.videoQuality.long.small()}</option
+                        ? $LL.menu.settings.videoQuality.short.minimum()
+                        : $LL.menu.settings.videoQuality.long.minimum()}</option
                 >
             </select>
         </div>