UPD: No profile selected case

src/components/config/ConfigPane.vue

@@ -1,23 +1,37 @@
 <template>
   <div>
-    <TabSelect
+    <template v-if="store.selectedProfile">
-      v-if="showTabs"
+      <TabSelect
-      v-model="configPage"
+        v-if="showTabs"
-      :options="configPages"
+        v-model="configPage"
-      class="p-2 border solid border-b">
+        :options="configPages"
-      <template v-for="(page, key) in configPages" #[key]>
+        class="p-2 border solid border-b">
-        {{ $t(page.titleKey) }}
+        <template v-for="(page, key) in configPages" #[key]>
-      </template>
+          {{ $t(page.titleKey) }}
-    </TabSelect>
+        </template>
-    <div class="grow overflow-y-auto">
+      </TabSelect>
-      <component :is="store.currentConfigComponent" />
+      <div class="grow overflow-y-auto">
-    </div>
+        <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()