fix activator for quick action card

next-ui/src/components/dialog/ConfirmEditInstance.vue

@@ -25,6 +25,7 @@
  */
 import { useDialogsStore } from '@/stores/dialogs'
 import { storeToRefs } from 'pinia'
+import { syncRefs } from '@vueuse/core'
 
 const showDialog = ref<boolean>(false)
 const loading = ref<boolean>(false)
@@ -39,6 +40,11 @@ function hideDialog() {
 function setLoading(isLoading: boolean) {
   loading.value = isLoading
 }
+
+syncRefs(
+  toRef(() => confirmEdit.value.dialogProps.shown),
+  showDialog,
+)
 </script>
 
 <style scoped></style>

next-ui/src/components/dialog/ConfirmInstance.vue

@@ -22,6 +22,7 @@
  */
 import { useDialogsStore } from '@/stores/dialogs'
 import { storeToRefs } from 'pinia'
+import { syncRefs } from '@vueuse/core'
 
 const showDialog = ref<boolean>(false)
 const loading = ref<boolean>(false)
@@ -36,6 +37,11 @@ function hideDialog() {
 function setLoading(isLoading: boolean) {
   loading.value = isLoading
 }
+
+syncRefs(
+  toRef(() => confirm.value.dialogProps.shown),
+  showDialog,
+)
 </script>
 
 <style scoped></style>

next-ui/src/components/item/card/ItemCard.vue

@@ -93,7 +93,6 @@
             color="white"
             class="bottom-0 left-0 position-absolute"
             @click.stop="emit('clickQuickAction')"
-            @mouseenter="(event: Event) => quickActionMouseEnter(event)"
           />
 
           <!--  Bottom right menu icon  -->
@@ -154,7 +153,6 @@ const {
   preSelect = false,
   fabIcon,
   quickActionIcon,
-  quickActionMouseEnter = () => {},
   menuIcon,
   menuMouseEnter = () => {},
 } = defineProps<
@@ -193,11 +191,6 @@ const {
      * Icon displayed in the bottom-left corner.
      */
     quickActionIcon?: string
-    /**
-     * Callback function called when the mouse enters the quick action button.
-     * @param event
-     */
-    quickActionMouseEnter?: (event: Event) => void
     /**
      * Icon displayed in the bottom-right corner.
      */

next-ui/src/components/item/card/Series.vue

@@ -1,5 +1,6 @@
 <template>
   <ItemCard
+    :id="id"
     :title="title"
     :lines="lines"
     :poster-url="seriesThumbnailUrl(series.id)"
@@ -7,12 +8,10 @@
     :top-right-icon="isRead ? 'i-mdi:check' : undefined"
     fab-icon="i-mdi:play"
     :quick-action-icon="quickActionIcon"
-    :quick-action-mouse-enter="
-      (event: Event) => (editMetadataActivator = event.currentTarget as Element)
-    "
     :menu-icon="menuIcon"
     :menu-mouse-enter="(event: Event) => (menuActivator = event.currentTarget as Element)"
     v-bind="props"
+    @mouseenter="editMetadataActivator = `#${id}`"
     @selection="(val) => emit('selection', val)"
     @click-quick-action="showEditMetadataDialog()"
     @card-long-press="bottomSheet = true"
@@ -37,6 +36,8 @@ import { useEditSeriesMetadataDialog } from '@/composables/series'
 
 const intl = useIntl()
 
+const id = useId()
+
 const { series, ...props } = defineProps<
   {
     series: components['schemas']['SeriesDto']
@@ -96,11 +97,15 @@ const { isAdmin } = useCurrentUser()
 const quickActionIcon = computed(() => (isAdmin.value ? 'i-mdi:pencil' : undefined))
 const menuIcon = computed(() => (isAdmin.value ? 'i-mdi:dots-vertical' : undefined))
 
-const { showDialog: showEditSeriesMetadataDialog, activator: editMetadataActivator } =
-  useEditSeriesMetadataDialog()
+const {
+  prepareDialog: prepareEditSeriesMetadataDialog,
+  showDialog: showEditSeriesMetadataDialog,
+  activator: editMetadataActivator,
+} = useEditSeriesMetadataDialog()
 
 function showEditMetadataDialog() {
-  showEditSeriesMetadataDialog(series)
+  prepareEditSeriesMetadataDialog(series)
+  showEditSeriesMetadataDialog()
 }
 
 const menuActivator = ref()

next-ui/src/composables/series.ts

@@ -26,7 +26,7 @@ export function useEditSeriesMetadataDialog() {
   const messagesStore = useMessagesStore()
   const { mutateAsync: mutateUpdateSeriesMetadata } = useUpdateSeriesMetadata()
 
-  const showDialog = (series: components['schemas']['SeriesDto']) => {
+  const prepareDialog = (series: components['schemas']['SeriesDto']) => {
     dialogConfirmEdit.value.dialogProps = {
       title: intl.formatMessage({
         description: 'Edit series metadata dialog title',
@@ -86,9 +86,14 @@ export function useEditSeriesMetadataDialog() {
     set: (val) => (dialogConfirmEdit.value.activator = val),
   })
 
+  function showDialog() {
+    dialogConfirmEdit.value.dialogProps.shown = true
+  }
+
   return {
-    showDialog: showDialog,
+    prepareDialog: prepareDialog,
     activator: activatorRef,
+    showDialog: showDialog,
   }
 }
 
@@ -241,7 +246,7 @@ export function useSeriesActions(
   ])
 
   //region Update Series metadata
-  const { showDialog: showEditSeriesMetadataDialog, activator: editMetadataActivator } =
+  const { prepareDialog: showEditSeriesMetadataDialog, activator: editMetadataActivator } =
     useEditSeriesMetadataDialog()
 
   function updateSeriesMetadata() {