FIX: Config pane

src/App.vue

@@ -3,14 +3,9 @@ import ProfileManager from '@/components/profile/ProfileManager.vue'
 import DevicePreview from '@/components/device/DevicePreview.vue'
 import ConfigPane from '@/components/config/ConfigPane.vue'
 import Navbar from '@/components/Navbar.vue'
-import ConfigSelect from '@/components/config/ConfigSelect.vue'
 import { onMounted, ref } from 'vue'
-import ConfigSection from '@/components/config/ConfigSection.vue'
-import { Bolt } from 'lucide-vue-next'
 import { useStore } from '@/store'
 
-const currentConfigPage = ref(0)
-
 const store = useStore()
 
 store.fetchProfiles()
@@ -35,8 +30,7 @@ onMounted(() => {
         class="basis-1/3 min-w-80 flex-1 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
       <DevicePreview class="basis-1/3 flex-col flex border-solid border-0 border-r" />
       <ConfigPane
-        class="flex-1 basis-2/5 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30"
+        class="flex-1 basis-2/5 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
-        :page="currentConfigPage" />
     </div>
   </main>
   <p

src/components/config/ConfigPane.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="flex font-heading">
-      <div v-for="(option, index) in configPageOptions" :key="index" class="flex items-center">
+      <div v-for="(option, index) in configPageOptions" :key="index" class="flex flex-1 items-center">
         <button
           class="flex-1 p-4 items-center text-center group"
           :class="index===currentPage ? 'bg-zinc-900': 'hover:bg-zinc-800 text-zinc-200 bg-zinc-950'"
@@ -28,12 +28,7 @@ import HapticConfig from '@/components/config/pages/HapticConfig.vue'
 import { Separator } from '@/components/ui/separator'
 import { ref } from 'vue'
 
-defineProps({
+const currentPage = ref(0)
-  currentPage: {
-    type: Number,
-    default: '0',
-  },
-})
 
 const configPageOptions = [
   {