UPD: Pane switching (random for testing)

src/App.vue

@@ -4,9 +4,12 @@ import DevicePreview from '@/components/device/DevicePreview.vue'
 import ConfigPane from '@/components/config/ConfigPane.vue'
 import Navbar from '@/components/Navbar.vue'
 import { useStore } from '@/store'
+import { ref } from 'vue'
 
 const store = useStore()
 
+const currentConfigPage = ref(0)
+
 store.fetchProfiles()
 
 </script>
@@ -16,8 +19,11 @@ store.fetchProfiles()
     <div class="flex-1 min-h-0 flex flex-row">
       <ProfileManager
         class="basis-1/3 min-w-60 flex-1 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-50" />
-      <DevicePreview class="basis-1/3 flex-col flex-1 flex border-solid border-0 border-r" />
+      <DevicePreview
+        class="basis-1/3 flex-col flex-1 flex border-solid border-0 border-r"
+        @select="currentConfigPage = Math.floor(Math.random() * 4)" />
       <ConfigPane
+        v-model="currentConfigPage"
         class="flex-1 basis-2/5 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-50" />
     </div>
   </main>

src/components/config/ConfigPane.vue

@@ -27,7 +27,6 @@ import ProfileConfig from '@/components/config/pages/ProfileConfig.vue'
 import MappingConfig from '@/components/config/pages/MappingConfig.vue'
 import HapticConfig from '@/components/config/pages/HapticConfig.vue'
 import { Separator } from '@/components/ui/separator'
-import { ref } from 'vue'
 
 defineProps({
   showTabs: {
@@ -36,7 +35,10 @@ defineProps({
   },
 })
 
-const currentPage = ref(1)
+const currentPage = defineModel({
+  type: Number,
+  default: 0,
+})
 
 const configPageOptions = [
   {

src/components/device/DevicePreview.vue

@@ -30,10 +30,10 @@
         class="rounded-full outline-2 absolute h-[41.5%] top-[24.5%] aspect-square left-0 right-0 mx-auto transition-all"
         :class="{'outline outline-white': selected==='ring',
         'hover:outline outline-zinc-400': selected!=='ring'}"
-        @click="selected='ring'" />
+        @click="selected='ring'; $emit('select', selected)" />
       <DeviceKeys
         :selected="selected" class="absolute w-[72.7%] top-[77.2%] gap-[2.8%] left-0 right-0 mx-auto"
-        @select="args => selected=args" />
+        @select="args => {selected=args; $emit('select', selected)}" />
     </div>
   </div>
 </template>
@@ -48,6 +48,8 @@ import DeviceLEDRing from '@/components/device/DeviceLEDRing.vue'
 import gsap from 'gsap'
 import DeviceKeys from '@/components/device/DeviceKeys.vue'
 
+defineEmits(['select'])
+
 const selected = ref('a')
 
 const value = ref(69)

src/lang/en.json

@@ -16,7 +16,7 @@
       "feedback_type": {
         "coarse_detents": "Coarse Detents",
         "fine_detents": "Fine Detents",
-        "return_to_center": "Return to Center",
+        "return_to_center": "Snap to Center",
         "title": "Feedback Type",
         "viscous_rotation": "Viscous Rotation"
       },