feat: ✨ Show popup for changing language to restart the app

NUXT/components/Settings/language.vue

@@ -1,11 +1,26 @@
 <template>
+<div>
   <v-select
     v-model="selectedLang"
     background-color="background"
     :items="langs"
     label="App Language"
     solo
-  ></v-select>
+  />
+
+  <v-dialog v-model="restart" width="500">
+    <v-card class="rounded-lg" :class=" $vuetify.theme.dark ? 'background lighten-1' : 'background darken-1' " >
+      <v-card-title class="text-h5">{{ lang.global.restart }}</v-card-title>
+      <v-card-text>{{ lang.global.settingRestart }}</v-card-text>
+      <v-divider />
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text @click="restart = false">{{ lang.global.later }}</v-btn>
+        <v-btn color="primary" text @click="restartApp()">{{ lang.global.restart }}</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</div>
 </template>
 
 <script>
@@ -13,23 +28,33 @@ export default {
   data() {
     return {
       langs: [],
-      lang: { mods: { general: { language: "" } } },
+      lang: { global: {}, mods: { general: { language: "" } } },
       selectedLang: null,
+      restart: false,
+
+      //---   Required To Prvent Initial Popup   ---//
+      userChanged: false
     };
   },
 
   watch: {
     //---   Update Stored Language Value   ---//
     selectedLang: function (newVal) {
+
+      //---   Required To Prvent Initial Popup   ---//
+      if (this.userChanged == false) return this.userChanged = true;
+
+      //---   Change Lang Stuff   ---//
       const langs = this.$lang(null, true);
       let lang = String();
       for (const i in langs) {
         if (langs[i].name == newVal) {
           lang = i;
-          console.log(lang);
+          this.lang = langs[i];
         }
       }
       localStorage.setItem("language", lang);
+      this.restart = true;
     },
     //---   End Update Stored Language Value   ---//
   },
@@ -43,5 +68,11 @@ export default {
 
     this.selectedLang = this.$lang().name;
   },
+
+  methods: {
+    restartApp() {
+      this.$router.replace("/");
+    }
+  }
 };
 </script>

NUXT/plugins/languages/english.js

@@ -5,9 +5,9 @@ module.exports = {
     home: "Home",
     subscriptions: "Subscriptions",
     library: "Library",
-    restart: "Restart Now",
+    restart: "Restart",
     later: "Later",
-    settingRestart: "Changing this setting requires the app to restart for the settings to be applied."
+    settingRestart: "Modifying this setting requires the app to restart for the changes to be applied."
   },
 
   index: {