From 15007e7dc749a1ab5ac2df67ac04165a34891454 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Mon, 5 Feb 2024 02:06:31 +0100
Subject: [PATCH] UPD: Use proper tab select in ConfigPane

---
 src/components/common/PaletteInput.vue    |  2 +-
 src/components/common/TabSelect.vue       |  2 +-
 src/components/common/TabSelectButton.vue |  7 +++---
 src/components/config/ConfigPane.vue      | 29 +++++++++++++----------
 4 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/components/common/PaletteInput.vue b/src/components/common/PaletteInput.vue
index 5c150d4..816b4cd 100644
--- a/src/components/common/PaletteInput.vue
+++ b/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()}" />
diff --git a/src/components/common/TabSelect.vue b/src/components/common/TabSelect.vue
index 07186aa..953d1ef 100644
--- a/src/components/common/TabSelect.vue
+++ b/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"
diff --git a/src/components/common/TabSelectButton.vue b/src/components/common/TabSelectButton.vue
index 3af335f..011f981 100644
--- a/src/components/common/TabSelectButton.vue
+++ b/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,
diff --git a/src/components/config/ConfigPane.vue b/src/components/config/ConfigPane.vue
index 9abd761..b0d7515 100644
--- a/src/components/config/ConfigPane.vue
+++ b/src/components/config/ConfigPane.vue
@@ -1,17 +1,14 @@
 <template>
   <div>
-    <div v-if="showTabs" class="p-2 border-solid border-0 border-b">
-      <div class="flex bg-zinc-900 rounded-xl overflow-hidden border border-zinc-800">
-        <button
-          v-for="(option, key) in store.currentConfigPages" :key="key"
-          class="flex-1 h-12 items-center text-center px-3 font-heading transition-all"
-          :class="{'text-black bg-zinc-300 hover:bg-zinc-200': key===store.currentConfigPage,
-          'hover:bg-zinc-800 text-muted-foreground' : key!==store.currentConfigPage}"
-          @click="store.setCurrentConfigPage(key)">
-          {{ $t(option.titleKey) }}
-        </button>
-      </div>
-    </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>
@@ -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,