Show custom touch layout's author name in toast message

src/index.ts

@@ -220,6 +220,7 @@ function main() {
     getPref(PrefKey.AUDIO_ENABLE_VOLUME_CONTROL) && patchAudioContext();
     getPref(PrefKey.BLOCK_TRACKING) && patchMeControl();
 
+    STATES.hasTouchSupport && TouchController.updateCustomList();
     overridePreloadState();
 
     VibrationManager.initialSetup();

src/modules/mkb/mkb-handler.ts

@@ -393,7 +393,7 @@ export class MkbHandler {
                 }),
                 CE('div', {},
                     CE('p', {}, t('mkb-click-to-activate')),
-                    CE('p', {}, t<any>('press-key-to-toggle-mkb')({key: 'F8'})),
+                    CE('p', {}, t('press-key-to-toggle-mkb', {key: 'F8'})),
                 ),
             );
 

src/modules/touch-controller.ts

@@ -1,5 +1,5 @@
 import { STATES } from "@utils/global";
-import { CE } from "@utils/html";
+import { CE, escapeHtml } from "@utils/html";
 import { Toast } from "@utils/toast";
 import { BxEvent } from "@utils/bx-event";
 import { BX_FLAGS } from "@utils/bx-flags";
@@ -168,7 +168,17 @@ export class TouchController {
         }
 
         // Show a toast with layout's name
-        layoutChanged && Toast.show(t('touch-control-layout'), layout.name);
+        let msg: string;
+        let html = false;
+        if (layout.author) {
+            const author = `<b>${escapeHtml(layout.author)}</b>`;
+            msg = t('touch-control-layout-by', {name: author});
+            html = true;
+        } else {
+            msg = t('touch-control-layout');
+        }
+
+        layoutChanged && Toast.show(msg, layout.name, {html: html});
 
         window.setTimeout(() => {
             window.BX_EXPOSED.touch_layout_manager.changeLayoutForScope({

src/modules/ui/ui.ts

@@ -217,7 +217,14 @@ function setupQuickSettingsBar() {
                                     for (const key in data.layouts) {
                                         const layout = data.layouts[key];
 
-                                        const $option = CE('option', {value: key}, layout.name);
+                                        let name;
+                                        if (layout.author) {
+                                            name = `${layout.name} (${layout.author})`;
+                                        } else {
+                                            name = layout.name;
+                                        }
+
+                                        const $option = CE('option', {value: key}, name);
                                         $fragment.appendChild($option);
                                     }
 

src/utils/html.ts

@@ -96,5 +96,13 @@ export const createButton = <T=HTMLButtonElement>(options: BxButton): T => {
     return $btn as T;
 }
 
+export function escapeHtml(html: string): string {
+    const text = document.createTextNode(html);
+    const $span = document.createElement('span');
+    $span.appendChild(text);
+
+    return $span.innerHTML;
+}
+
 export const CTN = document.createTextNode.bind(document);
 window.BX_CE = createElement;

src/utils/preload-state.ts

@@ -29,12 +29,11 @@ export function overridePreloadState() {
 
             // Add list of games with custom layouts to the official list
             if (STATES.hasTouchSupport) {
-                TouchController.updateCustomList();
-                let customList = TouchController.getCustomList();
-
                 try {
                     const sigls = state.xcloud.sigls;
                     if (GamePassCloudGallery.TOUCH in sigls) {
+                        let customList = TouchController.getCustomList();
+
                         const allGames = sigls[GamePassCloudGallery.ALL].data.products;
 
                         // Remove non-cloud games from the list

src/utils/toast.ts

@@ -2,6 +2,7 @@ import { CE } from "@utils/html";
 
 type ToastOptions = {
     instant?: boolean;
+    html?: boolean;
 }
 
 export class Toast {
@@ -40,9 +41,13 @@ export class Toast {
         Toast.#timeout = window.setTimeout(Toast.#hide, Toast.#DURATION);
 
         // Get values from item
-        const [msg, status, _] = Toast.#stack.shift()!;
+        const [msg, status, options] = Toast.#stack.shift()!;
 
-        Toast.#$msg.textContent = msg;
+        if (options.html) {
+            Toast.#$msg.innerHTML = msg;
+        } else {
+            Toast.#$msg.textContent = msg;
+        }
 
         if (status) {
             Toast.#$status.classList.remove('bx-gone');

src/utils/translation.ts

@@ -2755,21 +2755,21 @@ const Texts = {
         "特殊游戏按钮样式",
     ],
     "tc-default-opacity": [
-        ,
+        "Standard Deckkraft",
         ,
         "Default opacity",
+        "Opacidad por defecto",
         ,
         ,
+        "既定の透過度",
         ,
-        ,
+        "Domyślna przezroczystość",
-        ,
+        "Opacidade padrão",
-        ,
+        "Прозрачность по умолчанию",
-        ,
+        "Varsayılan opaklık",
-        ,
+        "Непрозорість за замовчуванням",
-        ,
-        ,
         "Độ mờ mặc định",
-        ,
+        "默认不透明度",
     ],
     "tc-muted-colors": [
         "Matte Farben",
@@ -2890,6 +2890,23 @@ const Texts = {
         "Bố cục điều khiển cảm ứng",
         "触摸控制布局",
     ],
+    "touch-control-layout-by": [
+        (e: any) => `Touch-Steuerungslayout von ${e.name}`,
+        ,
+        (e: any) => `Touch control layout by ${e.name}`,
+        ,
+        ,
+        ,
+        (e: any) => `タッチ操作レイアウト作成者: ${e.name}`,
+        ,
+        (e: any) => `Układ sterowania dotykowego stworzony przez ${e.name}`,
+        ,
+        ,
+        (e: any) => `${e.name} kişisinin dokunmatik kontrolcü tuş şeması`,
+        (e: any) => `Розташування сенсорного керування від ${e.name}`,
+        (e: any) => `Bố cục điều khiển cảm ứng tạo bởi ${e.name}`,
+        ,
+    ],
     "touch-controller": [
         "Touch-Controller",
         "Kontrol sentuhan",