From ae60f8c84235fd14dcccc11c4ad3a031d996d686 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 31 Oct 2024 20:54:33 +0200
Subject: [PATCH] client: Group color themes by dark/light

---
 .../options/appearance/code_block.js          | 14 +++---
 src/services/code_block_theme.ts              | 45 +++++++++++++++----
 2 files changed, 45 insertions(+), 14 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 021e4619d..b816ef0b2 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
@@ -84,13 +84,17 @@ export default class CodeBlockOptions extends OptionsWidget {
     }
 
     async optionsLoaded(options) {
-        const themes = await server.get("options/codeblock-themes");
+        const themeGroups = await server.get("options/codeblock-themes");
         this.$themeSelect.empty();
 
-        for (const theme of themes) {
-            this.$themeSelect.append($("<option>")
-                .attr("value", theme.val)
-                .text(theme.title));
+        for (const [ key, themes ] of Object.entries(themeGroups)) {
+            const $group = $("<optgroup>").attr("label", key);
+            for (const theme of themes) {
+                $group.append($("<option>")
+                    .attr("value", theme.val)
+                    .text(theme.title));
+            }
+            this.$themeSelect.append($group);
         }
         this.$themeSelect.val(options.codeBlockTheme);
         this.setCheckboxState(this.$wordWrap, options.codeBlockWordWrap);
diff --git a/src/services/code_block_theme.ts b/src/services/code_block_theme.ts
index e41537872..9b7e3951c 100644
--- a/src/services/code_block_theme.ts
+++ b/src/services/code_block_theme.ts
@@ -2,10 +2,27 @@ import fs from "fs";
 import themeNames from "./code_block_theme_names.json" assert { type: "json" }
 import { t } from "i18next";
 
+interface ColorTheme {
+    val: string;
+    title: string;
+}
+
 export function listSyntaxHighlightingThemes() {
     const path = "node_modules/@highlightjs/cdn-assets/styles";
-    const systemThemes = fs
-        .readdirSync(path)
+    const systemThemes = readThemesFromFileSystem(path);
+    const allThemes = [
+        {
+            val: "none",
+            title: t("code_block.theme_none")
+        },
+        ...systemThemes
+    ];
+
+    return groupThemesByLightOrDark(allThemes);
+}
+
+function readThemesFromFileSystem(path: string): ColorTheme[] {
+    return fs.readdirSync(path)
         .filter((el) => el.endsWith(".min.css"))
         .map((name) => {
             const nameWithoutExtension = name.replace(".min.css", "");            
@@ -20,11 +37,21 @@ export function listSyntaxHighlightingThemes() {
                 title: title
             };
         });
-    return [
-        {
-            val: "none",
-            title: t("code_block.theme_none")
-        },
-        ...systemThemes
-    ];
+}
+
+function groupThemesByLightOrDark(listOfThemes: ColorTheme[]) {
+    const result: Record<string, ColorTheme[]> = {
+        light: [],
+        dark: []
+    };
+
+    for (const theme of listOfThemes) {
+        if (theme.title.includes("Dark")) {
+            result.dark.push(theme);
+        } else {
+            result.light.push(theme);
+        }
+    }
+
+    return result;
 }
\ No newline at end of file