settings-syncer: Use standard key name beggining with 'cockpit'

As we serve the interface in IPs that can vary, this makes it clear that the key is ours and not from another application.

src/components/Tutorial.vue

@@ -3,7 +3,7 @@
     :is-visible="showTutorial"
     class="pa-5 z-[1000000]"
     :draggable="true"
-    storage-key="tutorial-modal"
+    storage-key="cockpit-tutorial-modal"
     is-persistent
   >
     <div class="w-[600px]" :class="tallContent ? 'h-[350px]' : 'h-[280px]'">
@@ -149,7 +149,7 @@ const steps = [
     id: 7,
     title: 'Joystick Configuration',
     content: `Connect a controller and move a joystick or press a button to see the current function mapping.`,
-    opposite: `Fully supported joysticks have a visual configuration interface available, but there's also a 
+    opposite: `Fully supported joysticks have a visual configuration interface available, but there's also a
       mapping table provided for custom or uncommon controllers. Actions can be related to vehicle functions,
       can influence the display, or can run custom requests or code.`,
   },
@@ -209,7 +209,7 @@ const handleStepChangeUp = (newStep: number): void => {
       if (!interfaceStore.isMainMenuVisible) {
         interfaceStore.isMainMenuVisible = true
       }
-      localStorage.setItem('last-tutorial-step', '1')
+      localStorage.setItem('cockpit-last-tutorial-step', '1')
       interfaceStore.mainMenuCurrentStep = 2
       tallContent.value = true
       interfaceStore.componentToHighlight = 'General'
@@ -223,10 +223,10 @@ const handleStepChangeUp = (newStep: number): void => {
       tallContent.value = false
       interfaceStore.componentToHighlight = 'vehicle-address'
       setVehicleConnectedVisible()
-      localStorage.setItem('last-tutorial-step', '5')
+      localStorage.setItem('cockpit-last-tutorial-step', '5')
       break
     case 6:
-      localStorage.setItem('last-tutorial-step', '1')
+      localStorage.setItem('cockpit-last-tutorial-step', '1')
       tallContent.value = false
       interfaceStore.componentToHighlight = 'Interface'
       interfaceStore.configComponent = 1
@@ -295,7 +295,7 @@ const handleStepChangeDown = (newStep: number): void => {
       if (!interfaceStore.isMainMenuVisible) {
         interfaceStore.isMainMenuVisible = true
       }
-      localStorage.setItem('last-tutorial-step', '1')
+      localStorage.setItem('cockpit-last-tutorial-step', '1')
       interfaceStore.mainMenuCurrentStep = 1
       interfaceStore.configComponent = -1
       tallContent.value = true
@@ -421,7 +421,7 @@ watch(userHasSeenTutorial, (newVal) => {
 })
 
 const checkUserHasSeenTutorial = (): void => {
-  const lastViewedTutorialStep = localStorage.getItem('last-tutorial-step')
+  const lastViewedTutorialStep = localStorage.getItem('cockpit-last-tutorial-step')
   setTimeout(() => {
     showTutorial.value = !userHasSeenTutorial.value
     interfaceStore.isTutorialVisible = !userHasSeenTutorial.value

src/stores/appInterface.ts

@@ -20,7 +20,7 @@ export const useAppInterfaceStore = defineStore('responsive', {
       blur: 25,
     }),
     displayUnitPreferences: useBlueOsStorage('cockpit-display-unit-preferences', defaultDisplayUnitPreferences),
-    mainMenuStyleTrigger: useBlueOsStorage('main-menu-style', 'center-left'),
+    mainMenuStyleTrigger: useBlueOsStorage('cockpit-main-menu-style', 'center-left'),
     componentToHighlight: 'none',
     isMainMenuVisible: false,
     mainMenuCurrentStep: 1,