ADD: Profile Manager slide

src/components/profile/ProfileManager.vue

@@ -3,12 +3,12 @@
     <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="showProfileList=true">
+        <button class="flex items-center" @click="showProfileConfig=false">
-          <component :is="showProfileList ? List : ArrowLeft" class="w-5 h-full mr-1" />
+          <component :is="showProfileConfig ? ArrowLeft : List" class="w-5 h-full mr-1" />
           <span class="font-heading mr-2">
-            <ScrambleText :text="showProfileList ? $t('profiles.title') : store.selectedProfile?.name" />
+            <ScrambleText :text="showProfileConfig ? store.selectedProfile?.name : $t('profiles.title')" />
             <ScrambleText
-              v-if="showProfileList" class="text-sm text-zinc-600"
+              v-if="!showProfileConfig" class="text-sm text-zinc-600"
               scramble-on-mount
               :fill-interval="20"
               :delay="500"
@@ -16,7 +16,7 @@
           </span>
         </button>
         <button
-          v-if="showProfileList"
+          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" />
@@ -24,24 +24,24 @@
       </div>
       <Separator />
     </div>
-    <template v-if="showProfileList">
+    <div v-if="showFilter">
-      <div v-if="showFilter">
+      <div class="flex w-full h-12 items-center">
-        <div class="flex w-full h-12 items-center">
+        <label for="filter" class="flex h-full items-center cursor-text">
-          <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" />
-            <Search class="ml-4 mr-2 mb-0.5 h-4 w-4 shrink-0 opacity-50 float-left" />
+        </label>
-          </label>
+        <input
-          <input
+          id="filter"
-            id="filter"
+          v-model="filter"
-            v-model="filter"
+          :placeholder="$t('profiles.filter_placeholder')"
-            :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">
-            class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0">
+        <button
-          <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">
-            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 />
-            <Plus />
+        </button>
-          </button>
-        </div>
-        <Separator />
       </div>
+      <Separator />
+    </div>
+    <div class="grow relative">
       <div class="grow overflow-y-auto">
         <div v-if="filteredProfiles.length === 0">
           <div class="flex flex-col items-center justify-center h-32">
@@ -75,7 +75,7 @@
                     :key="element.id"
                     :profile="element"
                     :selected="store.selectedProfile?.id === element.id"
-                    @select="store.selectProfile(element.id); showProfileList=false"
+                    @select="store.selectProfile(element.id); showProfileConfig=true"
                     @duplicate="store.duplicateProfile(element.id)"
                     @delete="store.removeProfile(element.id)" />
                 </template>
@@ -85,16 +85,20 @@
           </Collapsible>
         </div>
       </div>
-    </template>
+      <Transition name="slide">
-    <div v-else class="grow overflow-y-auto">
+        <div
-      <ProfileConfig />
+          v-if="showProfileConfig"
+          class="grow overflow-y-auto absolute top-0 h-full bg-zinc-950 transition-transform">
+          <ProfileConfig />
+        </div>
+      </Transition>
     </div>
   </div>
 </template>
 <script setup>
 import { Separator } from '@/components/ui/separator'
 import { ChevronRight, Plus, Search, ArrowLeft, List } from 'lucide-vue-next'
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 import ScrambleText from '@/components/common/ScrambleText.vue'
 import { useStore } from '@/store.js'
@@ -115,7 +119,18 @@ const store = useStore()
 const filter = ref('')
 const collapse = ref({})
 
-const showProfileList = ref(true)
+const showProfileConfig = ref(true)
+const renderProfileConfig = ref(showProfileConfig.value)
+
+watch(showProfileConfig, value => {
+  if (value) {
+    renderProfileConfig.value = true
+  } else {
+    setTimeout(() => {
+      renderProfileConfig.value = false
+    }, 300)
+  }
+})
 
 const filteredProfiles = computed(() => {
   if (!filter.value) {
@@ -166,4 +181,18 @@ const dragOptions = {
 [data-state=open] > .chevrot {
   transform: rotate(90deg);
 }
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: transform 300ms ease-out;
+}
+
+.slide-enter-active {
+  transition-delay: 150ms;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  transform: translateX(-100%);
+}
 </style>

src/store.js

@@ -49,14 +49,17 @@ export const useStore = defineStore('main', {
       if (!this.profileIds.includes(id)) return false
       this.selectedProfileId = id
       return true
-    }, addProfile(profile, categoryIndex, newIndex) {
+    },
+    addProfile(profile, categoryIndex, newIndex) {
       const category = this.profileCategories[categoryIndex]
       category.profiles.splice(newIndex, 0, profile)
-    }, removeProfile(profileId) {
+    },
+    removeProfile(profileId) {
       const category = this.profileCategories.find(c => c.profiles.find(p => p.id === profileId))
       const index = category.profiles.findIndex(p => p.id === profileId)
       category.profiles.splice(index, 1)
-    }, duplicateProfile(profileId) {
+    },
+    duplicateProfile(profileId) {
       const originalProfile = this.profiles.find(p => p.id === profileId)
       const newProfile = JSON.parse(JSON.stringify(originalProfile))
       newProfile.id = this.newProfileId(originalProfile.id)
@@ -64,22 +67,26 @@ export const useStore = defineStore('main', {
       const category = this.categories.find(c => c.profiles.find(p => p.id === profileId))
       category.profiles.push(newProfile)
       return newProfile.id
-    }, moveProfile(profileId, oldIndex, newIndex) {
+    },
+    moveProfile(profileId, oldIndex, newIndex) {
       // Find the profile category, then swap the profiles at the old and new indices
       const category = this.profileCategories.find(c => c.profiles.find(p => p.id === profileId))
       const tmpProfile = category.profiles[newIndex]
       category.profiles[newIndex] = category.profiles[oldIndex]
       category.profiles[newIndex] = tmpProfile
-    }, changeProfileCategory(profileId, newCategoryIndex, newIndex) {
+    },
+    changeProfileCategory(profileId, newCategoryIndex, newIndex) {
       const profile = this.profiles.find(p => p.id === profileId)
       const oldCategory = this.profileCategories.find(c => c.profiles.find(p => p.id === profileId))
       const newCategory = this.profileCategories[newCategoryIndex]
       oldCategory.profiles = oldCategory.profiles.filter(p => p.id !== profileId)
       newCategory.profiles.splice(newIndex, 0, profile)
-    }, renameProfile(profileId, newName) {
+    },
+    renameProfile(profileId, newName) {
       const profile = this.profiles.find(p => p.id === profileId)
       profile.name = newName
-    }, fetchProfiles() {
+    },
+    fetchProfiles() {
       Axios.get('http://localhost:3001/categories').then((res) => {
         const categories = res.data
         console.log(categories)
@@ -105,14 +112,16 @@ export const useStore = defineStore('main', {
       }).catch((err) => {
         console.error(err)
       })
-    }, newProfileName(originalName = '') {
+    },
+    newProfileName(originalName = '') {
       let name = originalName
       let i = 1
       while (this.profiles.find(p => p.name === name)) {
         name = `${originalName} (${i++})`
       }
       return name
-    }, newProfileId(originalId = '') {
+    },
+    newProfileId(originalId = '') {
       let id = originalId
       if (originalId) {
         do {
@@ -124,15 +133,19 @@ export const useStore = defineStore('main', {
         } while (this.profileIds.includes(id))
       }
       return id
-    }, selectConfigFeature(feature) {
+    },
+    selectConfigFeature(feature) {
       this.selectedFeature = feature
       if (!this.currentConfigPages[this.currentConfigPage]) this.setCurrentConfigPage('mapping')
-    }, selectKey(key) {
+    },
+    selectKey(key) {
       this.selectedKey = key
       this.selectConfigFeature('key')
-    }, setCurrentConfigPage(page) {
+    },
+    setCurrentConfigPage(page) {
       this.currentConfigPage = page
-    }, setConnected(connected) {
+    },
+    setConnected(connected) {
       this.connected = connected
     },
   },