UPD: UI Animations

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
+      <TransitionGroup name="flex">
-        v-for="(option, key) in options" :key="key"
+        <TabSelectButton
-        :ref="(el) => buttons[key] = el"
+          v-for="(option, key) in options" :key="key"
-        :title="$t(option.titleKey)"
+          :ref="(el) => buttons[key] = el"
-        :icon="option.icon" :selected="model===key"
+          :title="$t(option.titleKey)"
-        @select="model=key">
+          :icon="option.icon" :selected="model===key"
-        <template v-if="$slots[key]" #replace>
+          class="min-w-0 overflow-hidden"
-          <slot :name="key" />
+          @select="model=key">
-        </template>
+          <template v-if="$slots[key]" #replace>
-      </TabSelectButton>
+            <slot :name="key" />
+          </template>
+        </TabSelectButton>
+      </TransitionGroup>
     </div>
   </div>
 </template>
@@ -73,4 +76,15 @@ defineProps({
     }),
   },
 })
-</script>
+</script>
+<style scoped>
+.flex-enter-active,
+.flex-leave-active {
+  transition: flex-grow 75ms;
+}
+
+.flex-enter-from,
+.flex-leave-to {
+  flex-grow: 0.000001;
+}
+</style>

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'

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>

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'

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>

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>

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"