From 0b5deb4556cdd7f82dcd1ebe115057f9aa5b2e89 Mon Sep 17 00:00:00 2001
From: Adam Saleh <radam9@gmail.com>
Date: Tue, 25 Mar 2025 22:43:24 +0100
Subject: [PATCH] allow setting aceEditorTheme from profile settings

---
 .../components/settings/AceEditorTheme.vue    | 24 +++++++++++++++++++
 frontend/src/i18n/en.json                     |  1 +
 frontend/src/views/settings/Profile.vue       | 14 ++++++++++-
 3 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/settings/AceEditorTheme.vue

diff --git a/frontend/src/components/settings/AceEditorTheme.vue b/frontend/src/components/settings/AceEditorTheme.vue
new file mode 100644
index 00000000..09efe48b
--- /dev/null
+++ b/frontend/src/components/settings/AceEditorTheme.vue
@@ -0,0 +1,24 @@
+<template>
+  <select name="selectAceEditorTheme" v-on:change="change" :value="aceEditorTheme">
+    <option v-for="theme in themes" :value="theme.theme" :key="theme.theme">
+      {{ theme.name }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { type SelectHTMLAttributes } from "vue";
+import { themes } from "ace-builds/src-noconflict/ext-themelist";
+
+defineProps<{
+  aceEditorTheme: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:aceEditorTheme", val: string | null): void;
+}>();
+
+const change = (event: Event) => {
+  emit("update:aceEditorTheme", (event.target as SelectHTMLAttributes)?.value);
+};
+</script>
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 1360bbec..4d196d00 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -154,6 +154,7 @@
     "video": "Video"
   },
   "settings": {
+    "aceEditorTheme": "Ace editor theme",
     "admin": "Admin",
     "administrator": "Administrator",
     "allowCommands": "Execute commands",
diff --git a/frontend/src/views/settings/Profile.vue b/frontend/src/views/settings/Profile.vue
index c677092f..1b079473 100644
--- a/frontend/src/views/settings/Profile.vue
+++ b/frontend/src/views/settings/Profile.vue
@@ -24,6 +24,13 @@
             class="input input--block"
             v-model:locale="locale"
           ></languages>
+
+          <h3>{{ t("settings.aceEditorTheme") }}</h3>
+          <AceEditorTheme
+            class="input input--block"
+            v-model:aceEditorTheme="aceEditorTheme"
+            id="aceTheme"
+          ></AceEditorTheme>
         </div>
 
         <div class="card-action">
@@ -81,6 +88,7 @@
 import { useAuthStore } from "@/stores/auth";
 import { useLayoutStore } from "@/stores/layout";
 import { users as api } from "@/api";
+import AceEditorTheme from "@/components/settings/AceEditorTheme.vue";
 import Languages from "@/components/settings/Languages.vue";
 import { computed, inject, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
@@ -98,6 +106,7 @@ const hideDotfiles = ref<boolean>(false);
 const singleClick = ref<boolean>(false);
 const dateFormat = ref<boolean>(false);
 const locale = ref<string>("");
+const aceEditorTheme = ref<string>("");
 
 const passwordClass = computed(() => {
   const baseClass = "input input--block";
@@ -113,13 +122,14 @@ const passwordClass = computed(() => {
   return `${baseClass} input--red`;
 });
 
-onMounted(() => {
+onMounted(async () => {
   layoutStore.loading = true;
   if (authStore.user === null) return false;
   locale.value = authStore.user.locale;
   hideDotfiles.value = authStore.user.hideDotfiles;
   singleClick.value = authStore.user.singleClick;
   dateFormat.value = authStore.user.dateFormat;
+  aceEditorTheme.value = authStore.user.aceEditorTheme;
   layoutStore.loading = false;
   return true;
 });
@@ -163,6 +173,7 @@ const updateSettings = async (event: Event) => {
       hideDotfiles: hideDotfiles.value,
       singleClick: singleClick.value,
       dateFormat: dateFormat.value,
+      aceEditorTheme: aceEditorTheme.value,
     };
 
     await api.update(data, [
@@ -170,6 +181,7 @@ const updateSettings = async (event: Event) => {
       "hideDotfiles",
       "singleClick",
       "dateFormat",
+      "aceEditorTheme",
     ]);
     authStore.updateUser(data);
     $showSuccess(t("settings.settingsUpdated"));