Sync user settings with newer versions on changes

src/settingsManager.ts

@@ -18,9 +18,28 @@ export function getDefaultSettings() {
             type: 'checkbox'
         }
     }
+}
+
+export function syncUserSettings() {
+    const defaultSettings = getDefaultSettings()
+    let userSettings = localStorage.getItem('settings')
+    if (!userSettings) return
+    const parsedUserSettings = JSON.parse(userSettings)
+
+    if(parsedUserSettings.version === import.meta.env.SAFETWITCH_TAG) {
+        console.log('Settings up to date!')
+        return
+    } else {
+        console.log('Settings outdated... Migrating')
     }
 
-  export function getSetting(key: string): boolean | string {
+
+    const synced = {...defaultSettings, ...parsedUserSettings}
+    localStorage.setItem('settings', JSON.stringify(synced))
+    console.log('Migrated!')
+}
+
+export function getSetting(key: string): boolean | string {
     const storage = localStorage.getItem('settings')
     let parsed
     if (!storage) {
@@ -30,13 +49,12 @@ export function getDefaultSettings() {
     }
 
     return parsed[key].selected
-  }
+}
 
-  export function chatVisible() {
+export function chatVisible() {
     const p = getSetting('chatVisible')
     // Flip becuase on the setting page it's
     // displayed as "Hide Chat", but the value
     // is chatVisible
     return !p
-  }
+}
-  

src/views/SettingsView.vue

@@ -1,9 +1,10 @@
 <script lang="ts">
-import { getDefaultSettings } from '@/settingsManager'
+import { getDefaultSettings, syncUserSettings } from '@/settingsManager'
 
 export default {
   setup() {
     let settings
+    syncUserSettings()
 
     let storedSettings = localStorage.getItem('settings')
     if (storedSettings === null) {