From 15a97ade7eb9ee46d38dfe5a042cf64ccbbced49 Mon Sep 17 00:00:00 2001
From: goynov <goynov@gmail.com>
Date: Sun, 8 Feb 2026 09:20:54 +0200
Subject: [PATCH] resolves #29

---
 src/App.vue                      |  5 ++++
 src/components/AppHeader.vue     | 23 ++---------------
 src/components/CommonHeader.vue  | 44 ++++++++++++++++++++++++++++++++
 src/components/ConsoleHeader.vue | 17 +-----------
 src/stores/app.js                |  4 +++
 5 files changed, 56 insertions(+), 37 deletions(-)
 create mode 100644 src/components/CommonHeader.vue

diff --git a/src/App.vue b/src/App.vue
index ab09150..c087988 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,9 +11,14 @@
 </template>
 
 <script>
+import { useTheme } from 'vuetify'
+
 export default {
   async created() {
+    const theme = useTheme()
     this.loadUser();
+    this.lang = this.store.prefs.ui.lang;
+    theme.change(this.store.prefs.ui.theme);
   },
   methods: {
   }
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index ed78db4..0c8753c 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -10,28 +10,9 @@
             <router-link to="/">{{ l.playground }}</router-link>
         </v-app-bar-title>
         <v-btn to="/manage" icon="mdi-wrench-cog-outline" v-if="roles.editor" v-tooltip="l.workshop"></v-btn>
-        <v-dialog max-width="480">
-            <template v-slot:activator="{ props }">
-                <v-btn icon="mdi-account" variant="text" v-bind="props"></v-btn>
-            </template>
-            <template v-slot:default="{ isActive }">
-                <v-card class="pa-3" :title="user? l.profile : l.signin ">
-                    <v-card-text>
-                        <Profile v-if="user"></Profile>
-                        <Auth v-show="!user" @login-success="isActive.value = false"></Auth>
-                    </v-card-text>
-                </v-card>
-            </template>
-        </v-dialog >
+        <CommonHeader></CommonHeader>
     </v-app-bar>
 </template>
 
-<script setup>
-import { useTheme } from 'vuetify'
-import Profile from './User/Profile.vue';
-const theme = useTheme()
-
-function toggleTheme () {
-  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
-}
+<script>
 </script>
\ No newline at end of file
diff --git a/src/components/CommonHeader.vue b/src/components/CommonHeader.vue
new file mode 100644
index 0000000..b36d9b1
--- /dev/null
+++ b/src/components/CommonHeader.vue
@@ -0,0 +1,44 @@
+<template>
+    <v-btn icon="mdi-theme-light-dark" @click="toggleTheme" v-tooltip="l.darkMode"></v-btn>
+    <v-btn-toggle @update:model-value="changeLang" density="compact" v-model="lang" mandatory rounded="xl" color="white" variant="flat" v-show="langOpts">
+        <v-btn size="small" value="bg">BG</v-btn>
+        <v-btn size="small" value="en">EN</v-btn>
+    </v-btn-toggle>
+    <v-btn icon="mdi-translate" @click="langOpts = !langOpts"></v-btn>
+    <v-dialog max-width="480">
+        <template v-slot:activator="{ props }">
+            <v-btn icon="mdi-account" variant="text" v-bind="props"></v-btn>
+        </template>
+        <template v-slot:default="{ isActive }">
+            <v-card class="pa-3" :title="user ? l.profile : l.signin">
+                <v-card-text>
+                    <Profile v-if="user"></Profile>
+                    <Auth v-show="!user" @login-success="isActive.value = false"></Auth>
+                </v-card-text>
+            </v-card>
+        </template>
+    </v-dialog>
+</template>
+
+<script>
+import { useTheme } from 'vuetify'
+export default {
+    data() {
+        return {
+            langOpts:false
+        }
+    },
+    created() {
+        this.theme = useTheme()
+    },
+    methods: {
+        toggleTheme() {
+            this.store.prefs.ui.theme = this.store.prefs.ui.theme == 'dark' ? 'light' : 'dark';
+            this.theme.change(this.store.prefs.ui.theme);
+        },
+        changeLang(v) {
+            this.store.prefs.ui.lang = v;
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/ConsoleHeader.vue b/src/components/ConsoleHeader.vue
index 9c6f50a..b39ab50 100644
--- a/src/components/ConsoleHeader.vue
+++ b/src/components/ConsoleHeader.vue
@@ -38,23 +38,8 @@
 
         </v-list>
         <v-divider></v-divider>
-        <v-list nav>
-            <v-list-item @click="toggleTheme" prepend-icon="mdi-theme-light-dark" :title="l.darkMode"></v-list-item>
-            <v-list-item prepend-icon="mdi-translate">
-                <v-btn-toggle density="compact" v-model="lang" rounded="xl" color="white" variant="outlined">
-                    <v-btn size="small" value="bg">BG</v-btn>
-                    <v-btn size="small" value="en">EN</v-btn>
-                </v-btn-toggle>
-            </v-list-item>
-        </v-list>
     </v-navigation-drawer>
 </template>
 
-<script setup>
-import { useTheme } from 'vuetify'
-const theme = useTheme()
-
-function toggleTheme() {
-    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
-}
+<script>
 </script>
\ No newline at end of file
diff --git a/src/stores/app.js b/src/stores/app.js
index 921896e..cc026b9 100644
--- a/src/stores/app.js
+++ b/src/stores/app.js
@@ -6,6 +6,10 @@ let prefs = localStorage.getItem('prefs')
 prefs = reactive(prefs ? JSON.parse(prefs) : {
   xr: {
     depthSense: true
+  },
+  ui:{
+    lang: 'bg',
+    theme: 'light'
   }
 })