From e01541d06d0f69cfc09a4db1d6801226265d9cca Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Wed, 7 Feb 2024 00:23:36 +0100
Subject: [PATCH] UPD: UI Animations

---
 src/components/common/TabSelect.vue           | 36 +++++++++++++------
 src/components/config/keys/KeyLightConfig.vue |  4 +--
 .../config/keys/KeyMappingConfig.vue          |  4 +--
 .../config/knob/KnobLightConfig.vue           |  4 +--
 .../config/knob/KnobMappingConfig.vue         |  4 +--
 src/components/device/DevicePreview.vue       |  2 +-
 src/components/profile/ProfileManager.vue     |  3 ++
 7 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/components/common/TabSelect.vue b/src/components/common/TabSelect.vue
index 55b8225..74292e5 100644
--- a/src/components/common/TabSelect.vue
+++ b/src/components/common/TabSelect.vue
@@ -1,16 +1,19 @@
 <template>
   <div class="p-2 border-solid border-0 border-b">
     <div class="flex rounded-lg overflow-hidden border border-zinc-800">
-      <TabSelectButton
-        v-for="(option, key) in options" :key="key"
-        :ref="(el) => buttons[key] = el"
-        :title="$t(option.titleKey)"
-        :icon="option.icon" :selected="model===key"
-        @select="model=key">
-        <template v-if="$slots[key]" #replace>
-          <slot :name="key" />
-        </template>
-      </TabSelectButton>
+      <TransitionGroup name="flex">
+        <TabSelectButton
+          v-for="(option, key) in options" :key="key"
+          :ref="(el) => buttons[key] = el"
+          :title="$t(option.titleKey)"
+          :icon="option.icon" :selected="model===key"
+          class="min-w-0 overflow-hidden"
+          @select="model=key">
+          <template v-if="$slots[key]" #replace>
+            <slot :name="key" />
+          </template>
+        </TabSelectButton>
+      </TransitionGroup>
     </div>
   </div>
 </template>
@@ -73,4 +76,15 @@ defineProps({
     }),
   },
 })
-</script>
\ No newline at end of file
+</script>
+<style scoped>
+.flex-enter-active,
+.flex-leave-active {
+  transition: flex-grow 75ms;
+}
+
+.flex-enter-from,
+.flex-leave-to {
+  flex-grow: 0.000001;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/config/keys/KeyLightConfig.vue b/src/components/config/keys/KeyLightConfig.vue
index ba9a9cd..6323053 100644
--- a/src/components/config/keys/KeyLightConfig.vue
+++ b/src/components/config/keys/KeyLightConfig.vue
@@ -1,10 +1,10 @@
 <template>
-  <ConfigSection title="Key Light" :icon-component="Lightbulb">
+  <ConfigSection title="Key Colors" :icon-component="Palette">
     <PaletteInput v-model="keyColors" />
   </ConfigSection>
 </template>
 <script setup>
-import { Lightbulb } from 'lucide-vue-next'
+import { Palette } from 'lucide-vue-next'
 import ConfigSection from '@/components/common/ConfigSection.vue'
 import PaletteInput from '@/components/common/PaletteInput.vue'
 import Color from 'color'
diff --git a/src/components/config/keys/KeyMappingConfig.vue b/src/components/config/keys/KeyMappingConfig.vue
index e402ed3..ff7cdd5 100644
--- a/src/components/config/keys/KeyMappingConfig.vue
+++ b/src/components/config/keys/KeyMappingConfig.vue
@@ -1,10 +1,10 @@
 <template>
-  <ConfigSection title="Key Mapping" :icon-component="Keyboard">
+  <ConfigSection title="Key Mapping" :icon-component="PlusSquare">
     <WIP />
   </ConfigSection>
 </template>
 <script setup>
-import { Keyboard } from 'lucide-vue-next'
+import { PlusSquare } from 'lucide-vue-next'
 import ConfigSection from '@/components/common/ConfigSection.vue'
 import WIP from '@/components/WIP.vue'
 </script>
\ No newline at end of file
diff --git a/src/components/config/knob/KnobLightConfig.vue b/src/components/config/knob/KnobLightConfig.vue
index 7db3eef..32ba765 100644
--- a/src/components/config/knob/KnobLightConfig.vue
+++ b/src/components/config/knob/KnobLightConfig.vue
@@ -1,10 +1,10 @@
 <template>
-  <ConfigSection title="Ring Light" :icon-component="Lightbulb">
+  <ConfigSection title="Ring Colors" :icon-component="Palette">
     <PaletteInput v-model="ringColors" />
   </ConfigSection>
 </template>
 <script setup>
-import { Lightbulb } from 'lucide-vue-next'
+import { Palette } from 'lucide-vue-next'
 import ConfigSection from '@/components/common/ConfigSection.vue'
 import PaletteInput from '@/components/common/PaletteInput.vue'
 import Color from 'color'
diff --git a/src/components/config/knob/KnobMappingConfig.vue b/src/components/config/knob/KnobMappingConfig.vue
index 9ac92f4..30dc6fc 100644
--- a/src/components/config/knob/KnobMappingConfig.vue
+++ b/src/components/config/knob/KnobMappingConfig.vue
@@ -1,10 +1,10 @@
 <template>
-  <ConfigSection title="Knob Mapping" :icon-component="GaugeCircle">
+  <ConfigSection title="Knob Mapping" :icon-component="PlusCircle">
     <WIP />
   </ConfigSection>
 </template>
 <script setup>
-import { GaugeCircle } from 'lucide-vue-next'
+import { PlusCircle } from 'lucide-vue-next'
 import ConfigSection from '@/components/common/ConfigSection.vue'
 import WIP from '@/components/WIP.vue'
 </script>
\ No newline at end of file
diff --git a/src/components/device/DevicePreview.vue b/src/components/device/DevicePreview.vue
index 93808a2..3d7b79e 100644
--- a/src/components/device/DevicePreview.vue
+++ b/src/components/device/DevicePreview.vue
@@ -53,7 +53,7 @@
         <DeviceKeys
           v-if="store.connected"
           class="absolute w-[72.7%] top-[77.2%] gap-[2.8%] left-0 right-0 mx-auto"
-          :selected="store.selectedFeature === 'key' && store.selectedKey"
+          :selected="store.selectedFeature === 'key' ? store.selectedKey : ''"
           @select="store.selectKey" />
       </Transition>
     </div>
diff --git a/src/components/profile/ProfileManager.vue b/src/components/profile/ProfileManager.vue
index 6e98882..bcff5bb 100644
--- a/src/components/profile/ProfileManager.vue
+++ b/src/components/profile/ProfileManager.vue
@@ -57,6 +57,9 @@
                 v-bind="dragOptions"
                 @change="(event)=>onProfileDrop(event, categoryIndex)"
               >
+                <div v-if="category.profiles.length === 0">
+                  HELLO THERE!
+                </div>
                 <template #item="{ element }">
                   <ProfileButton
                     :key="element.id"