UPD: No profile selected case

src/components/config/ConfigPane.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <template v-if="store.selectedProfile">
       <TabSelect
         v-if="showTabs"
         v-model="configPage"
@@ -12,12 +13,25 @@
       <div class="grow overflow-y-auto">
         <component :is="store.currentConfigComponent" />
       </div>
+    </template>
+    <template v-else>
+      <div class="flex flex-1 justify-center items-center text-muted-foreground pb-16">
+        <ChevronLeft class="h-5 mb-0.5 inline-block" />
+        <ScrambleText
+          scramble-on-mount
+          :fill-interval="5"
+          :replace-interval="5"
+          text="Select a profile first" />
+      </div>
+    </template>
   </div>
 </template>
 <script setup>
 import { useStore } from '@/store'
 import TabSelect from '@/components/common/TabSelect.vue'
 import { computed } from 'vue'
+import ScrambleText from '@/components/common/ScrambleText.vue'
+import { ChevronLeft } from 'lucide-vue-next'
 
 const store = useStore()