From f9b1d066d368adc897131a7e52141d2f90b01663 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Wed, 7 Feb 2024 02:17:07 +0100
Subject: [PATCH] FIX: hoverButtons on drag

---
 src/components/profile/ProfileButton.vue  | 10 ++++++++--
 src/components/profile/ProfileManager.vue |  1 +
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/profile/ProfileButton.vue b/src/components/profile/ProfileButton.vue
index e91a361..8e9b8ec 100644
--- a/src/components/profile/ProfileButton.vue
+++ b/src/components/profile/ProfileButton.vue
@@ -1,8 +1,9 @@
 <template>
   <div
-    class="h-12 flex overflow-hidden rounded-lg m-2 group transition-all"
+    class="h-12 flex overflow-hidden rounded-lg m-2 transition-all"
     :class="{'border border-zinc-100 bg-zinc-300': selected,
-    'border border-transparent hover:border-zinc-900': !selected}">
+    'border border-transparent hover:border-zinc-900': !selected,
+    'group': showHoverButtons}">
     <form
       v-if="nameEditable && editing"
       class="flex-1 flex h-full text-left whitespace-nowrap overflow-hidden"
@@ -24,6 +25,7 @@
         <Check class="h-4 w-4" />
       </button>
     </form>
+    <!-- TODO: Make hover buttons use Transition(Group) and v-if directive -->
     <button
       v-else
       :class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
@@ -136,6 +138,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  showHoverButtons: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 async function startEditing() {
diff --git a/src/components/profile/ProfileManager.vue b/src/components/profile/ProfileManager.vue
index 73edaf6..3569c56 100644
--- a/src/components/profile/ProfileManager.vue
+++ b/src/components/profile/ProfileManager.vue
@@ -68,6 +68,7 @@
                     <div :key="element.name">
                       <ProfileButton
                         :profile="element"
+                        :show-hover-buttons="!drag"
                         :selected="store.selectedProfile?.id === element.id"
                         @select="store.selectProfile(element.id); showProfileConfig=true"
                         @duplicate="store.duplicateProfile(element.id)"