From 0c90b3c891ce5e3c7faeab18939aa4e09658ba41 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Mon, 5 Feb 2024 13:35:34 +0100
Subject: [PATCH] UPD: No profile selected case

---
 src/components/config/ConfigPane.vue | 38 +++++++++++++++++++---------
 1 file changed, 26 insertions(+), 12 deletions(-)

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