Improve popover dismissal and tooltip timing

Add handlers to prevent unwanted popover closing and delay tooltip activation. Register @pointer-down-outside and @focus-outside to call onDismissOutside, which prevents the popover from closing when interacting with nested floating-vue poppers (checks .v-popper__popper and calls event.preventDefault()). Introduce tooltipsReady reactive state and a watch on open to enable tooltips 400ms after opening; update v-tooltip bindings to use tooltipsReady. Also import watch from Vue.

Author: stevebauman

app/components/PopoverPanel.vue

@@ -8,6 +8,8 @@
             side="top"
             class="w-auto max-w-sm p-0"
             @interact-outside="autoHide ? (open = false) : undefined"
+            @pointer-down-outside="onDismissOutside"
+            @focus-outside="onDismissOutside"
         >
             <div
                 class="flex items-center justify-between gap-2 border-b border-zinc-200 p-2 text-zinc-600 dark:border-zinc-800 dark:text-zinc-300"
@@ -19,7 +21,7 @@
                         v-if="resets"
                         size="sm"
                         variant="ghost"
-                        v-tooltip="'Reset'"
+                        v-tooltip="tooltipsReady ? 'Reset' : undefined"
                         @click="$emit('reset')"
                     >
                         <RefreshCwIcon class="h-4 w-4" />
@@ -29,7 +31,7 @@
                         v-if="closes"
                         size="sm"
                         variant="ghost"
-                        v-tooltip="'Close'"
+                        v-tooltip="tooltipsReady ? 'Close' : undefined"
                         @click="open = false"
                     >
                         <XIcon class="h-4 w-4" />
@@ -43,7 +45,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { Popover as UiPopover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { XIcon, RefreshCwIcon } from 'lucide-vue-next';
 
@@ -57,4 +59,23 @@ defineProps({
 defineEmits(['reset']);
 
 const open = ref(false);
+const tooltipsReady = ref(false);
+
+watch(open, (isOpen) => {
+    tooltipsReady.value = false;
+
+    if (isOpen) {
+        setTimeout(() => (tooltipsReady.value = true), 400);
+    }
+});
+
+function onDismissOutside(event) {
+    // Prevent the popover from closing when interacting
+    // with a nested floating-vue dropdown (e.g. color picker).
+    const target = event.detail?.originalEvent?.target ?? event.target;
+
+    if (target?.closest?.('.v-popper__popper')) {
+        event.preventDefault();
+    }
+}
 </script>