From a690155d7e60873bf6ff0165dd4d9f7fe8d1ea45 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 31 Oct 2024 21:17:40 +0200
Subject: [PATCH] client: Improve group for no theme

---
 .../options/appearance/code_block.js            | 13 ++++++++++---
 src/services/code_block_theme.ts                | 17 +++++++++--------
 translations/en/server.json                     |  2 +-
 translations/ro/server.json                     |  2 +-
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/options/appearance/code_block.js b/src/public/app/widgets/type_widgets/options/appearance/code_block.js
index b816ef0b2..75c49e411 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/code_block.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/code_block.js
@@ -88,11 +88,18 @@ export default class CodeBlockOptions extends OptionsWidget {
         this.$themeSelect.empty();
 
         for (const [ key, themes ] of Object.entries(themeGroups)) {
-            const $group = $("<optgroup>").attr("label", key);
+            const $group = (key ? $("<optgroup>").attr("label", key) : null);
+
             for (const theme of themes) {
-                $group.append($("<option>")
+                const option = $("<option>")
                     .attr("value", theme.val)
-                    .text(theme.title));
+                    .text(theme.title);
+
+                if ($group) {
+                    $group.append(option);
+                } else {
+                    this.$themeSelect.append(option);
+                }
             }
             this.$themeSelect.append($group);
         }
diff --git a/src/services/code_block_theme.ts b/src/services/code_block_theme.ts
index 27f746d33..f861a8b11 100644
--- a/src/services/code_block_theme.ts
+++ b/src/services/code_block_theme.ts
@@ -10,15 +10,16 @@ interface ColorTheme {
 export function listSyntaxHighlightingThemes() {
     const path = "node_modules/@highlightjs/cdn-assets/styles";
     const systemThemes = readThemesFromFileSystem(path);
-    const allThemes = [
-        {
-            val: "none",
-            title: t("code_block.theme_none")
-        },
-        ...systemThemes
-    ];
 
-    return groupThemesByLightOrDark(allThemes);
+    return {
+        "": [
+            {
+                val: "none",
+                title: t("code_block.theme_none")
+            }
+        ],
+        ...groupThemesByLightOrDark(systemThemes)
+    }
 }
 
 function readThemesFromFileSystem(path: string): ColorTheme[] {
diff --git a/translations/en/server.json b/translations/en/server.json
index 3cf55e8f9..5eb23c40f 100644
--- a/translations/en/server.json
+++ b/translations/en/server.json
@@ -185,7 +185,7 @@
     "search_prefix": "Search:"
   },
   "code_block": {
-    "theme_none": "None",
+    "theme_none": "No syntax highlighting",
     "theme_group_light": "Light themes",
     "theme_group_dark": "Dark themes"
   }
diff --git a/translations/ro/server.json b/translations/ro/server.json
index cad3bb9a3..3ba7b127b 100644
--- a/translations/ro/server.json
+++ b/translations/ro/server.json
@@ -185,7 +185,7 @@
     "search_prefix": "Căutare:"
   },
   "code_block": {
-    "theme_none": "Niciuna",
+    "theme_none": "Fără evidențiere de sintaxă",
     "theme_group_dark": "Teme întunecate",
     "theme_group_light": "Teme luminoase"
   }