feat(CommandMenu): add editor theme action to command menu

hatemhosny · hatemhosny · commit 88b67e332978 · 2025-03-27T06:31:17.000+02:00
diff --git a/src/livecodes/UI/command-menu-actions.ts b/src/livecodes/UI/command-menu-actions.ts
@@ -1,4 +1,4 @@
-import type { Config, INinjaAction, TemplateName } from '../models';
+import type { Config, INinjaAction, Screen, TemplateName } from '../models';
 import { appLanguages } from '../i18n/app-languages';
 import { languageIsEnabled, languages, processorIsEnabled, processors } from '../languages';
 import { isMac, predefinedValues, stringUnionToArray } from '../utils/utils';
@@ -12,6 +12,7 @@ export const getCommandMenuActions = ({
     loadStarterTemplate: (templateName: TemplateName) => Promise<void>;
     changeEditorSettings: (config: Partial<Config>) => void;
     changeLayout: (layout: Config['layout']) => void;
+    showScreen: (screen: Screen['screen'], options?: any) => Promise<void>;
   };
 }) => {
   const { getConfig, loadStarterTemplate, changeEditorSettings, changeLayout } = deps;
@@ -200,17 +201,6 @@ export const getCommandMenuActions = ({
         },
       ],
     },
-    {
-      id: 'editor theme',
-      title: window.deps.translateString('commandMenu.editorTheme', 'Editor theme'),
-      content: getContent('Editor theme'),
-      mdIcon: 'palette',
-      handler: () => {
-        UI.getEditorSettingsLink()?.click();
-        const themeSelector = document.querySelector('label[data-name="editorTheme"]');
-        themeSelector?.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      },
-    },
     {
       id: 'Select Language',
       title: window.deps.translateString('commandMenu.selectLanguage', 'Select Language'),
@@ -958,6 +948,17 @@ export const getCommandMenuActions = ({
             UI.getThemeColorContainer()?.querySelector('input')?.click();
           },
         },
+        {
+          id: 'editor theme',
+          title: window.deps.translateString('editorSettings.editorTheme', 'Editor Theme'),
+          content: getContent('Editor Theme'),
+          mdIcon: 'palette',
+          handler: () => {
+            deps.showScreen('editor-settings', {
+              scrollToSelector: ':has(+ label[data-name^="editorTheme"])',
+            });
+          },
+        },
       ],
     },
     {
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
@@ -2665,6 +2665,7 @@ const handleKeyboardShortcutsScreen = () => {
       loadStarterTemplate,
       changeEditorSettings,
       changeLayout: changeAndSaveLayout,
+      showScreen,
     },
   });
 
@@ -2738,6 +2739,7 @@ const handleCommandMenu = async () => {
         loadStarterTemplate,
         changeEditorSettings,
         changeLayout: changeAndSaveLayout,
+        showScreen,
       },
     });
     const authAction = authService?.isLoggedIn() ? logoutAction : loginAction;
diff --git a/src/livecodes/i18n/locales/ar/translation.lokalise.json b/src/livecodes/i18n/locales/ar/translation.lokalise.json
@@ -609,9 +609,6 @@
   "commandMenu.selectLanguage": {
     "translation": "اختر اللغة"
   },
-  "commandMenu.editorTheme": {
-    "translation": "تعيين سمة المحرر"
-  },
   "commandMenu.show.compiled": {
     "translation": "تبديل الكود المُترجم"
   },
diff --git a/src/livecodes/i18n/locales/de/translation.lokalise.json b/src/livecodes/i18n/locales/de/translation.lokalise.json
@@ -609,9 +609,6 @@
   "commandMenu.selectLanguage": {
     "translation": "Sprache auswählen"
   },
-  "commandMenu.editorTheme": {
-    "translation": "Editor-Theme"
-  },
   "commandMenu.show.compiled": {
     "translation": "Kompilierten Code umschalten"
   },
diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -812,10 +812,6 @@
     "notes": "",
     "translation": "Select Language"
   },
-  "commandMenu.editorTheme": {
-    "notes": "",
-    "translation": "Editor Theme"
-  },
   "commandMenu.show.compiled": {
     "notes": "",
     "translation": "Toggle Compiled Code"
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
@@ -311,7 +311,6 @@ const translation = {
     disableRecoverUnsaved: 'Disable Recover Unsaved',
     disableVim: 'Disable Vim Mode',
     enableAI: 'Enable AI Code Assistant',
-    editorTheme: 'Editor theme',
     enableAutoSave: 'Enable Auto Save',
     enableAutoUpdate: 'Enable Auto Update',
     enableEmacs: 'Enable Emacs Mode',
diff --git a/src/livecodes/i18n/locales/es/translation.lokalise.json b/src/livecodes/i18n/locales/es/translation.lokalise.json
@@ -609,9 +609,6 @@
   "commandMenu.selectLanguage": {
     "translation": "Seleccionar idioma"
   },
-  "commandMenu.editorTheme": {
-    "translation": "Tema del editor"
-  },
   "commandMenu.show.compiled": {
     "translation": "Alternar código compilado"
   },
diff --git a/src/livecodes/i18n/locales/fr/translation.lokalise.json b/src/livecodes/i18n/locales/fr/translation.lokalise.json
@@ -609,9 +609,6 @@
   "commandMenu.selectLanguage": {
     "translation": "Sélectionner la langue"
   },
-  "commandMenu.editorTheme": {
-    "translation": "Thème de l'éditeur"
-  },
   "commandMenu.show.compiled": {
     "translation": "Afficher le code compilé"
   },
diff --git a/src/livecodes/i18n/locales/hi/translation.lokalise.json b/src/livecodes/i18n/locales/hi/translation.lokalise.json
@@ -609,9 +609,6 @@
   "commandMenu.selectLanguage": {
     "translation": "भाषा चुने"
   },
-  "commandMenu.editorTheme": {
-    "translation": "एडिटर थीम"
-  },
   "commandMenu.show.compiled": {
     "translation": "संकलित कोड टॉगल करें"
   },
diff --git a/src/livecodes/i18n/locales/it/translation.lokalise.json b/src/livecodes/i18n/locales/it/translation.lokalise.json
@@ -609,9 +609,6 @@
   "commandMenu.selectLanguage": {
     "translation": "Selezionare la lingua"
   },
-  "commandMenu.editorTheme": {
-    "translation": "Tema dell'editor"
-  },
   "commandMenu.show.compiled": {
     "translation": "Alterna il codice compilato"
   },
diff --git a/src/livecodes/i18n/locales/ja/translation.lokalise.json b/src/livecodes/i18n/locales/ja/translation.lokalise.json
@@ -609,9 +609,6 @@
   "commandMenu.selectLanguage": {
     "translation": "言語選択"
   },
-  "commandMenu.editorTheme": {
-    "translation": "エディタテーマ"
-  },
   "commandMenu.show.compiled": {
     "translation": "コンパイル済みコードの切り替え"
   },
diff --git a/src/livecodes/i18n/locales/pt/translation.lokalise.json b/src/livecodes/i18n/locales/pt/translation.lokalise.json
@@ -609,9 +609,6 @@
   "commandMenu.selectLanguage": {
     "translation": "Selecionar idioma"
   },
-  "commandMenu.editorTheme": {
-    "translation": "Tema do editor"
-  },
   "commandMenu.show.compiled": {
     "translation": "Alternar código compilado"
   },
diff --git a/src/livecodes/i18n/locales/ru/translation.lokalise.json b/src/livecodes/i18n/locales/ru/translation.lokalise.json
@@ -609,9 +609,6 @@
   "commandMenu.selectLanguage": {
     "translation": "Выберите язык"
   },
-  "commandMenu.editorTheme": {
-    "translation": "Выберите тему редактора"
-  },
   "commandMenu.show.compiled": {
     "translation": "Переключить скомпилированный код"
   },
diff --git a/src/livecodes/i18n/locales/ur/translation.lokalise.json b/src/livecodes/i18n/locales/ur/translation.lokalise.json
@@ -609,9 +609,6 @@
   "commandMenu.selectLanguage": {
     "translation": "زبان منتخب کریں۔"
   },
-  "commandMenu.editorTheme": {
-    "translation": "ایڈیٹر تھیم منتخب کریں۔"
-  },
   "commandMenu.show.compiled": {
     "translation": "مرتب شدہ کوڈ کو ٹوگل کریں۔"
   },
diff --git a/src/livecodes/i18n/locales/zh-CN/translation.lokalise.json b/src/livecodes/i18n/locales/zh-CN/translation.lokalise.json
@@ -609,9 +609,6 @@
   "commandMenu.selectLanguage": {
     "translation": "选择语言"
   },
-  "commandMenu.editorTheme": {
-    "translation": "编辑器主题"
-  },
   "commandMenu.show.compiled": {
     "translation": "切换编译结果页面显示"
   },
