UPD: UI Animations

src/components/profile/ProfileManager.vue

@@ -3,41 +3,26 @@
     <div>
       <div
         class="w-full h-12 px-4 flex items-center justify-between flex-nowrap text-nowrap bg-zinc-900">
-        <button class="flex items-center" @click="showProfileConfig=false">
+        <button class="flex items-center min-w-0 font-heading" @click="showProfileConfig=false">
           <component :is="showProfileConfig ? ArrowLeft : List" class="w-5 h-full mr-1 shrink-0" />
-          <span class="font-heading mr-2">
-            <ScrambleText :text="showProfileConfig ? store.selectedProfile?.name : $t('profiles.title')" />
-            <ScrambleText
-              v-if="!showProfileConfig" class="text-sm text-zinc-600"
-              scramble-on-mount
-              :fill-interval="20"
-              :delay="500"
-              :text="`(${store.profiles.length}/${ maxProfiles})`" />
-          </span>
-        </button>
-        <button
-          v-if="!showProfileConfig"
-          class="bg-zinc-200 text-black hover:bg-zinc-100 rounded-full aspect-square h-7 flex justify-center items-center"
-          @click="store.addProfile">
-          <Plus class="h-4" />
-        </button>
-      </div>
-      <Separator />
-    </div>
-    <div v-if="showFilter">
-      <div class="flex w-full h-12 items-center">
-        <label for="filter" class="flex h-full items-center cursor-text">
-          <Search class="ml-4 mr-2 mb-0.5 h-4 w-4 shrink-0 opacity-50 float-left" />
-        </label>
-        <input
-          id="filter"
-          v-model="filter"
-          :placeholder="$t('profiles.filter_placeholder')"
-          class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0">
-        <button
-          class="h-full flex text-zinc-200 bg-zinc-900 justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-800">
-          <Plus />
+          <ScrambleText
+            :text="showProfileConfig ? store.selectedProfile?.name : $t('profiles.title')"
+            class="text-ellipsis overflow-hidden min-w-0" />
+          <ScrambleText
+            v-if="!showProfileConfig" class="text-sm text-zinc-600 text-ellipsis overflow-hidden min-w-0"
+            scramble-on-mount
+            :fill-interval="20"
+            :delay="500"
+            :text="`(${store.profiles.length}/${ maxProfiles})`" />
         </button>
+        <Transition name="fade">
+          <button
+            v-if="!showProfileConfig"
+            class="bg-zinc-200 text-black hover:bg-zinc-100 rounded-full aspect-square h-7 flex justify-center items-center"
+            @click="store.addProfile">
+            <Plus class="h-4" />
+          </button>
+        </Transition>
       </div>
       <Separator />
     </div>
@@ -45,7 +30,7 @@
       <div
         v-if="renderProfileList"
         class="absolute w-full">
-        <div v-if="filteredProfiles.length === 0">
+        <div v-if="store.profiles.length === 0">
           <div class="flex flex-col items-center justify-center h-32">
             <ScrambleText
               scramble-on-mount :fill-interval="5" class="text-sm text-muted-foreground"
@@ -97,8 +82,8 @@
 </template>
 <script setup>
 import { Separator } from '@/components/ui/separator'
-import { ChevronRight, Plus, Search, ArrowLeft, List } from 'lucide-vue-next'
-import { computed, ref, watch } from 'vue'
+import { ChevronRight, Plus, ArrowLeft, List } from 'lucide-vue-next'
+import { ref, watch } from 'vue'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 import ScrambleText from '@/components/common/ScrambleText.vue'
 import { useStore } from '@/store.js'
@@ -137,30 +122,30 @@ watch(showProfileConfig, value => {
   }
 })
 
-const filteredProfiles = computed(() => {
-  if (!filter.value) {
-    return store.profiles
-  }
-  const filterLower = filter.value.toLowerCase()
-  return store.profiles.filter(profile => {
-    const nameLower = profile.name.toLowerCase()
-    const idLower = profile.id.toLowerCase()
-    const tagLower = profile.profileTag.toLowerCase()
-    return nameLower.includes(filterLower) || idLower.includes(filterLower) || tagLower.includes(filterLower)
-  })
-})
-
-const filteredProfilesByTag = computed(() => {
-  const map = new Map()
-  filteredProfiles.value.forEach(profile => {
-    const tag = profile.profileTag || 'Uncategorized'
-    if (!map.has(tag)) {
-      map.set(tag, [])
-    }
-    map.get(tag).push(profile)
-  })
-  return map
-})
+// const filteredProfiles = computed(() => {
+//   if (!filter.value) {
+//     return store.profiles
+//   }
+//   const filterLower = filter.value.toLowerCase()
+//   return store.profiles.filter(profile => {
+//     const nameLower = profile.name.toLowerCase()
+//     const idLower = profile.id.toLowerCase()
+//     const tagLower = profile.profileTag.toLowerCase()
+//     return nameLower.includes(filterLower) || idLower.includes(filterLower) || tagLower.includes(filterLower)
+//   })
+// })
+//
+// const filteredProfilesByTag = computed(() => {
+//   const map = new Map()
+//   filteredProfiles.value.forEach(profile => {
+//     const tag = profile.profileTag || 'Uncategorized'
+//     if (!map.has(tag)) {
+//       map.set(tag, [])
+//     }
+//     map.get(tag).push(profile)
+//   })
+//   return map
+// })
 
 const onProfileDrop = (event, categoryIndex) => {
   if (event.moved) {
@@ -192,12 +177,18 @@ const dragOptions = {
   transition: transform 150ms ease;
 }
 
-.slide-enter-active {
-  transition-delay: 150ms;
-}
-
 .slide-enter-from,
 .slide-leave-to {
   transform: translateX(-100%);
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 150ms ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>