FIX: ProfileManager

src/components/config/ConfigPane.vue

@@ -15,7 +15,7 @@
       </div>
     </template>
     <template v-else>
-      <div class="flex flex-1 justify-center items-center text-muted-foreground pb-16">
+      <div class="flex grow justify-center items-center text-muted-foreground pb-16">
         <ChevronLeft class="h-5 mb-0.5 inline-block" />
         <ScrambleText
           scramble-on-mount

src/components/navbar/Navbar.vue

@@ -48,7 +48,7 @@
             </MenubarItem>
           </MenubarContent>
         </MenubarMenu>
-        <MenubarButton class="app-titlebar-button" @click="electron.openExternal('https://discord.gg/jgRd77YN5T')">
+        <MenubarButton class="app-titlebar-button" @click="electron?.openExternal('https://discord.gg/jgRd77YN5T')">
           Community
         </MenubarButton>
         <MenubarMenu>
@@ -86,18 +86,18 @@
         <button
           v-if="minimizable"
           class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
-          @click="electron.minimizeWindow">
+          @click="electron?.minimizeWindow">
           <Minus class="h-5 w-5" />
         </button>
         <button
           v-if="maximizable"
           class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
-          @click="electron.toggleMaximizeWindow">
+          @click="electron?.toggleMaximizeWindow">
           <Square class="h-3.5 w-3.5 mr-0.5" />
         </button>
         <button
           class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
-          @click="electron.closeWindow">
+          @click="electron?.closeWindow">
           <X class="h-5 w-5 mr-0.5" />
         </button>
       </div>
@@ -128,7 +128,7 @@ const maximizable = ref(false)
 
 const { electron } = window
 
-const isMacOS = electron.platform === 'darwin'
+const isMacOS = electron?.platform === 'darwin'
 const zoomFactor = ref(1)
 
 onMounted(() => {

src/components/profile/ProfileManager.vue

@@ -4,7 +4,7 @@
       <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">
-          <component :is="showProfileConfig ? ArrowLeft : List" class="w-5 h-full mr-1" />
+          <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
@@ -41,8 +41,10 @@
       </div>
       <Separator />
     </div>
-    <div class="grow relative">
+    <div class="grow overflow-y-auto relative">
-      <div class="grow overflow-y-auto">
+      <div
+        v-if="renderProfileList"
+        class="absolute w-full">
         <div v-if="filteredProfiles.length === 0">
           <div class="flex flex-col items-center justify-center h-32">
             <ScrambleText
@@ -53,7 +55,7 @@
         <div v-else>
           <Collapsible
             v-for="(category, categoryIndex) in store.profileCategories" :key="categoryIndex"
-            v-model:open="collapse[index]"
+            v-model:open="collapse[categoryIndex]"
             :default-open="true">
             <!-- TODO: Make profile groups computed instead defining them of using v-for -->
             <CollapsibleTrigger
@@ -86,9 +88,7 @@
         </div>
       </div>
       <Transition name="slide">
-        <div
+        <div v-if="showProfileConfig" class="absolute bg-zinc-950">
-          v-if="showProfileConfig"
-          class="grow overflow-y-auto absolute top-0 h-full bg-zinc-950 transition-transform">
           <ProfileConfig />
         </div>
       </Transition>
@@ -119,13 +119,18 @@ const store = useStore()
 const filter = ref('')
 const collapse = ref({})
 
-const showProfileConfig = ref(true)
+const showProfileConfig = ref(false)
 const renderProfileConfig = ref(showProfileConfig.value)
+const renderProfileList = ref(!showProfileConfig.value)
 
 watch(showProfileConfig, value => {
   if (value) {
     renderProfileConfig.value = true
+    setTimeout(() => {
+      renderProfileList.value = false
+    }, 300)
   } else {
+    renderProfileList.value = true
     setTimeout(() => {
       renderProfileConfig.value = false
     }, 300)
@@ -184,7 +189,7 @@ const dragOptions = {
 
 .slide-enter-active,
 .slide-leave-active {
-  transition: transform 300ms ease-out;
+  transition: transform 150ms ease;
 }
 
 .slide-enter-active {

src/store.js

@@ -60,13 +60,14 @@ export const useStore = defineStore('main', {
       category.profiles.splice(index, 1)
     },
     duplicateProfile(profileId) {
-      const originalProfile = this.profiles.find(p => p.id === profileId)
+      const profile = this.profiles.find(p => p.id === profileId)
-      const newProfile = JSON.parse(JSON.stringify(originalProfile))
+      const newProfile = JSON.parse(JSON.stringify(profile))
-      newProfile.id = this.newProfileId(originalProfile.id)
+      newProfile.id = this.newProfileId(profile.id)
-      newProfile.name = this.newProfileName(originalProfile.name)
+      newProfile.name = this.newProfileName(profile.name)
-      const category = this.categories.find(c => c.profiles.find(p => p.id === profileId))
+      const category = this.profileCategories.find(c => c.profiles.find(p => p.id === profileId))
-      category.profiles.push(newProfile)
+      const index = category.profiles.findIndex(p => p.id === profileId)
-      return newProfile.id
+      category.profiles.splice(index + 1, 0, newProfile)
+      this.selectProfile(newProfile.id)
     },
     moveProfile(profileId, oldIndex, newIndex) {
       // Find the profile category, then swap the profiles at the old and new indices