Something

frontend/app/components/layouts/Dropdown.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { onMounted, ref, watch } from 'vue';
 import { AddContextMenu, HideContextMenu } from '@/services/ContextMenu';
-const props = defineProps(['options', 'onselect', 'selected']);
+const props = defineProps(['options', 'onselect', 'selected', 'keyFunc']);
 const options = props.options;
 const selectCallback = props.onselect;
 const initialSelect = props.selected;
@@ -10,19 +10,23 @@ const dropdown = ref(null);
 const selected = ref(initialSelect);
 
 onMounted(() => {
+    if(props.keyFunc == undefined) props.keyFunc = (option) => option;
+    else selected.value = props.keyFunc(initialSelect);
+
     let context = [];
     if(props.selected == undefined) selected.value = "undefined";
     watch(() => props.selected, () => {
-        selected.value = props.selected;
+        selected.value = props.keyFunc(props.selected);
     });
-    options.forEach(name => {
+    options.forEach(obj => {
+        const name = props.keyFunc(obj);
         context.push({
             icon: selected.value == name ? 'icons/iconoir/regular/check.svg' : false,
             name,
             action: () => {
                 HideContextMenu();
                 selected.value = name;
-                if(selectCallback) selectCallback(name);
+                if(selectCallback) selectCallback(obj);
             }
         });
     });

frontend/app/components/partials/EditUserPartial.vue

@@ -55,12 +55,8 @@ function EditProfile(){
 }
 
 function EditSettings(){
-    ClearWindow({type: 'main_menu'});
-    CreateWindow('settings', {
-        id: 'settings',
-        type: 'settings',
-        title: 'settings.title',
-        back: () => { ClearWindow({type: 'settings'}); CreateWindow({type: 'main_menu'});  }
+    CreateChildWindow(GetFirstWindowId('main_menu'), 'settings', {
+        user: GetUser()
     });
 }
 

frontend/app/components/windows/MainMenuWindow.vue

@@ -17,7 +17,7 @@ let id = data.id;
 onMounted(() => {
     Top(wrapper);
     SetupHandle(id, handle);
-    SetSize(id, {width: 500, height: 460});
+    SetSize(id, {width: 580, height: 760});
     ResetPosition(id, "center");
 });
 </script>

frontend/app/components/windows/SettingsWindow.vue

@@ -13,6 +13,14 @@ const wrapper = ref(null);
 const props = defineProps(['data']);
 const data = props.data;
 
+const { locales, setLocale, locale } = useI18n();
+
+const changeLocale = (lang) => {
+    console.log(lang);
+    setLocale(lang.code);
+    SetUserSetting('lang', lang.code);
+}
+
 const id = data.id;
 
 const rows = ref([{id: "account-settings", value: "settings.tabs.account-settings"}]);
@@ -23,17 +31,10 @@ const langSelector = ref(null);
 const currentLanguage = ref("");
 */
 onBeforeMount(() => {
-    /*
-    let codes = {
-        "en-US": "English",
-        "es-ES": "Spanish",
-        "ca": "Catalan"
-    }
     GetUserSetting('lang').then(value => {
         currentLanguage.value = codes[value ?? 'en']
         console.log(currentLanguage.value)
     });
-    */
     if(GetUser().admin) rows.value.push({
         id: "site-administration",
         value: "settings.tabs.site-administration"
@@ -68,22 +69,8 @@ function OpenManageAccounts(){
     })
 }
 
-function OpenManagePlugins(){
-    ClearWindow('settings');
-    CreateWindow('plugin_management', {
-        type: 'plugin_management',
-        title: 'settings.site-administration.manage-plugins.title',
-        id: 'plugin-management',
-        back: () => {
-            ClearWindow('plugin-management')
-            CreateWindow('settings', {
-                id: 'settings',
-                type: 'settings',
-                title: 'settings.title',
-                back: () => { ClearWindow('settings'); CreateWindow('main_menu');  }
-            });
-        }
-    })
+const getLocaleName = (locale) => {
+    return locale.name;
 }
 
 </script>
@@ -98,17 +85,14 @@ function OpenManagePlugins(){
             <template #account-settings>
                 <div class="form-container">
                     <div class="form-element">
-                        <label>{{ $t('settings.account.language') }}</label>
-                        
+                        <label>{{ $t('settings.account-settings.language') }}</label>
+                        <Dropdown :options="locales" :keyFunc="getLocaleName" :onselect="changeLocale" :selected="locale"></Dropdown>
                     </div>
                 </div>
             </template>
             <template #site-administration>
                 <div class="form-element centered">
-                    <button v-on:click.prevent="OpenManageAccounts">{{ $t('settings.site-administration.manage-accounts-button') }}</button>
-                </div>
-                <div class="form-element centered">
-                    <button v-on:click.prevent="OpenManagePlugins">{{ $t('settings.site-administration.manage-plugins-button') }}</button>
+                    <button v-on:click.prevent="OpenManageAccounts">{{ $t('settings.site-administration.manage-accounts') }}</button>
                 </div>
             </template>
         </Tabs>