Big update

frontend/app/components/parts/site_options/LanguageSelector.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 const dropdownVisible = ref(false);
 
@@ -26,29 +25,24 @@ onUnmounted(() => {
 
 
 // i18n
-const { locale } = useI18n()
+const { locales, setLocale, locale } = useI18n()
 
-const setLocale = (lang) => {
-  locale.value = lang
+const changeLocale = (lang) => {
+  setLocale(lang.code);
   dropdownVisible.value = false
 }
 </script>
 
 <template>
 <div class="menu-container" ref="menuContainer">
-  <button class="menu-button" @click="toggleDropdown">Language </button>
+  <button class="menu-button" @click="toggleDropdown">{{ $t("site_options.language_selector.dropdown") }} </button>
 
   <div class="dropdown" v-show="dropdownVisible">
     <div class="section">
-        <div class="menu-item" @click="setLocale('en')">
-            🇬🇧 English
-        </div>
-        <div class="menu-item" @click="setLocale('es')">
-            🇪🇸 Spanish
-        </div>
-        <div class="menu-item" @click="setLocale('ca')">
-            🇦🇩 Catalan
-        </div>
+      <div :class="{'menu-item': true, 'active': locale === loc.code}"
+       v-for="loc in locales" @click="changeLocale(loc)">
+        {{ $t('locales.' + loc.code) }}
+      </div>
     </div>
   </div>
 </div>
@@ -64,6 +58,10 @@ const setLocale = (lang) => {
   border-radius: 6px;
   cursor: pointer;
   margin-right: 15px;
+
+  &.active {
+    background-color: #30363d;
+  }
 }
 .dropdown {
 z-index: 10;

frontend/app/components/parts/site_options/SiteOptions.vue

@@ -13,5 +13,7 @@ import ThemeSelector from './ThemeSelector.vue';
 <style lang="scss" scoped>
 .site-options {
     display: flex;
+    justify-content: right;
+    width: 400px;
 }
 </style>

frontend/app/components/parts/site_options/ThemeSelector.vue

@@ -30,36 +30,39 @@ onUnmounted(() => {
 
 <template>
 <div class="menu-container" ref="menuContainer">
-  <button class="menu-button" @click="toggleDropdown">Theme </button>
+  <button class="menu-button" @click="toggleDropdown">{{ $t('site_options.theme_selector.dropdown') }} </button>
 
   <div class="dropdown" v-show="dropdownVisible">
     <div class="two-columns">
         <div class="section">
             <div class="menu-section">
                 <div class="menu-header">
-                    Theme
+                    {{ $t('site_options.theme_selector.dropdown') }}
                 </div>
             </div>
             <div class="divider"></div>
             <div class="menu-section">
                 <div :class="{'menu-item': true, 'active': theme === 'dark' }" @click="setTheme('dark')">
-                    <div class="circle dark"></div>Dark
+                    <div class="circle dark"></div>
+                    {{ $t('themes.dark') }}
                 </div>
                 <div :class="{'menu-item': true, 'active': theme === 'light' }" @click="setTheme('light')">
-                    <div class="circle light"></div>Light
+                    <div class="circle light"></div>
+                    {{ $t('themes.light') }}
                 </div>
             </div>
         </div>
         <div class="section">
             <div class="menu-section">
                 <div class="menu-header">
-                    Dragon
+                    {{ $t('site_options.theme_selector.dragon') }}
                 </div>
             </div>
             <div class="divider"></div>
             <div class="menu-section">
                 <div :class="{'menu-item': true, 'active': accent === 'katlum' }" @click="setAccent('katlum')">
-                    <div class="circle katlum"></div>Katlum
+                    <div class="circle katlum"></div>
+                    {{ $t('themes.accents.katlum') }}
                 </div>
                 <!--
                 <div :class="{'menu-item': true, 'active': accent === 'solus' }" @click="setAccent('solus')">