UPD: Use proper tab select in ConfigPane

src/components/common/PaletteInput.vue

@@ -7,7 +7,7 @@
       <button
         v-for="(option, key) in options" :key="key"
         class="flex-1 pt-2 items-center text-center"
-        :class="currentOption!==key ? 'hover:bg-zinc-800 text-zinc-200 bg-zinc-900' : 'text-black bg-zinc-300 hover:bg-zinc-200'"
+        :class="currentOption!==key ? 'hover:bg-zinc-800 text-muted-foreground bg-zinc-900' : 'text-black bg-zinc-300 hover:bg-zinc-200'"
         @click="currentOption = key">
         {{ $t(option.titleKey) }}
         <span class="flex h-4 w-full mt-2" :style="{background: option.color.hex()}" />

src/components/common/TabSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-2 border-solid border-0 border-b">
-    <div class="flex bg-zinc-900 rounded-xl overflow-hidden border border-zinc-800">
+    <div class="flex rounded-xl overflow-hidden border border-zinc-800">
       <TabSelectButton
         v-for="(option, key) in options" :key="key"
         :ref="(el) => buttons[key] = el"

src/components/common/TabSelectButton.vue

@@ -1,14 +1,15 @@
 <template>
   <button
-    class="flex-1 flex flex-col items-center p-2 gap-2 font-heading transition-all"
+    class="flex-1 flex flex-col items-center rounded-xl p-2 gap-2 font-heading transition-all"
     :class="{'text-black bg-zinc-300 hover:bg-zinc-200': selected,
           'hover:bg-zinc-800 text-muted-foreground' : !selected}"
     @click="$emit('select'); $refs.title.scramble()">
     <slot v-if="$slots['replace']" name="replace" />
     <template v-else>
       <img
+        v-if="icon"
         draggable="false"
-        :src="icon" alt="connection-type-icon"
+        :src="icon" :alt="title"
         class="h-16"
         :class="{'invert': selected}">
       <ScrambleText ref="title" :resize="false" class="text-xs text-wrap" :text="title" />
@@ -27,7 +28,7 @@ defineProps({
   },
   icon: {
     type: [String, Object, Function],
-    default: '',
+    default: null,
   },
   selected: {
     type: Boolean,

src/components/config/ConfigPane.vue

@@ -1,17 +1,14 @@
 <template>
   <div>
-    <div v-if="showTabs" class="p-2 border-solid border-0 border-b">
+    <TabSelect
-      <div class="flex bg-zinc-900 rounded-xl overflow-hidden border border-zinc-800">
+      v-if="showTabs"
-        <button
+      v-model="configPage"
-          v-for="(option, key) in store.currentConfigPages" :key="key"
+      :options="configPages"
-          class="flex-1 h-12 items-center text-center px-3 font-heading transition-all"
+      class="p-2 border solid border-b">
-          :class="{'text-black bg-zinc-300 hover:bg-zinc-200': key===store.currentConfigPage,
+      <template v-for="(page, key) in configPages" #[key]>
-          'hover:bg-zinc-800 text-muted-foreground' : key!==store.currentConfigPage}"
+        {{ $t(page.titleKey) }}
-          @click="store.setCurrentConfigPage(key)">
+      </template>
-          {{ $t(option.titleKey) }}
+    </TabSelect>
-        </button>
-      </div>
-    </div>
     <div class="grow overflow-y-auto">
       <component :is="store.currentConfigComponent" />
     </div>
@@ -19,9 +16,17 @@
 </template>
 <script setup>
 import { useStore } from '@/store'
+import TabSelect from '@/components/common/TabSelect.vue'
+import { computed } from 'vue'
 
 const store = useStore()
 
+const configPages = computed(() => store.currentConfigPages)
+const configPage = computed({
+  get: () => store.currentConfigPage,
+  set: (value) => store.setCurrentConfigPage(value),
+})
+
 defineProps({
   showTabs: {
     type: Boolean,