From df66a96976150899afbd3e6d7b1510939a999f34 Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Wed, 26 Nov 2025 11:52:54 -0800
Subject: [PATCH] Feat: Double Click on Image Assets to open the lightbox
 (#6955)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Make it easier to open the lightbox preview.

## Review Focus

The first click still selects the image. I liked the suggestion to
require shift or ctrl to initiate selection and have click go back to
the previous behavior.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6955-Feat-Double-Click-on-Image-Assets-to-open-the-lightbox-2b76d73d365081f0bf0de847add5c820)
by [Unito](https://www.unito.io)
---
 .../assets/components/MediaAssetCard.vue      | 65 +++++++------------
 .../assets/components/MediaImageTop.vue       |  2 +
 2 files changed, 26 insertions(+), 41 deletions(-)

diff --git a/src/platform/assets/components/MediaAssetCard.vue b/src/platform/assets/components/MediaAssetCard.vue
index e78b3c096..fff097d7f 100644
--- a/src/platform/assets/components/MediaAssetCard.vue
+++ b/src/platform/assets/components/MediaAssetCard.vue
@@ -59,35 +59,29 @@
 
           <!-- Media actions - show on hover or when playing -->
           <IconGroup v-else-if="showActionsOverlay">
-            <div v-tooltip.top="$t('mediaAsset.actions.inspect')">
-              <IconButton
-                size="sm"
-                @click.stop="handleZoomClick"
-                @mouseenter="handleOverlayMouseEnter"
-                @mouseleave="handleOverlayMouseLeave"
-              >
-                <i class="icon-[lucide--zoom-in] size-4" />
-              </IconButton>
-            </div>
-            <div v-tooltip.top="$t('mediaAsset.actions.more')">
-              <MoreButton
-                ref="moreButtonRef"
-                size="sm"
-                @menu-opened="handleMenuOpened"
-                @menu-closed="handleMenuClosed"
-                @mouseenter="handleOverlayMouseEnter"
-                @mouseleave="handleOverlayMouseLeave"
-              >
-                <template #default="{ close }">
-                  <MediaAssetMoreMenu
-                    :close="close"
-                    :show-delete-button="showDeleteButton"
-                    @inspect="handleZoomClick"
-                    @asset-deleted="handleAssetDelete"
-                  />
-                </template>
-              </MoreButton>
-            </div>
+            <IconButton
+              v-tooltip.top="$t('mediaAsset.actions.inspect')"
+              size="sm"
+              @click.stop="handleZoomClick"
+            >
+              <i class="icon-[lucide--zoom-in] size-4" />
+            </IconButton>
+            <MoreButton
+              ref="moreButtonRef"
+              v-tooltip.top="$t('mediaAsset.actions.more')"
+              size="sm"
+              @menu-opened="handleMenuOpened"
+              @menu-closed="handleMenuClosed"
+            >
+              <template #default="{ close }">
+                <MediaAssetMoreMenu
+                  :close="close"
+                  :show-delete-button="showDeleteButton"
+                  @inspect="handleZoomClick"
+                  @asset-deleted="handleAssetDelete"
+                />
+              </template>
+            </MoreButton>
           </IconGroup>
         </template>
 
@@ -101,8 +95,6 @@
             size="sm"
             :label="String(outputCount)"
             @click.stop="handleOutputCountClick"
-            @mouseenter="handleOverlayMouseEnter"
-            @mouseleave="handleOverlayMouseLeave"
           >
             <template #icon>
               <i class="icon-[lucide--layers] size-4" />
@@ -216,7 +208,6 @@ const moreButtonRef = ref<InstanceType<typeof MoreButton>>()
 const isVideoPlaying = ref(false)
 const isMenuOpen = ref(false)
 const showVideoControls = ref(false)
-const isOverlayHovered = ref(false)
 
 // Store actual image dimensions
 const imageDimensions = ref<{ width: number; height: number } | undefined>()
@@ -299,7 +290,7 @@ const durationChipClasses = computed(() => {
 })
 
 const isCardOrOverlayHovered = computed(
-  () => isHovered.value || isOverlayHovered.value || isMenuOpen.value
+  () => isHovered.value || isMenuOpen.value
 )
 
 // Show static chips when NOT hovered and NOT playing (normal state)
@@ -320,14 +311,6 @@ const showActionsOverlay = computed(
     (isCardOrOverlayHovered.value || isVideoPlaying.value)
 )
 
-const handleOverlayMouseEnter = () => {
-  isOverlayHovered.value = true
-}
-
-const handleOverlayMouseLeave = () => {
-  isOverlayHovered.value = false
-}
-
 const handleZoomClick = () => {
   if (asset) {
     emit('zoom', asset)
diff --git a/src/platform/assets/components/MediaImageTop.vue b/src/platform/assets/components/MediaImageTop.vue
index dc065ce68..8bd64fe6c 100644
--- a/src/platform/assets/components/MediaImageTop.vue
+++ b/src/platform/assets/components/MediaImageTop.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="relative size-full overflow-hidden rounded bg-modal-card-placeholder-background"
+    @dblclick="emit('view')"
   >
     <img
       v-if="!error"
@@ -28,6 +29,7 @@ const { asset } = defineProps<{
 
 const emit = defineEmits<{
   'image-loaded': [width: number, height: number]
+  view: []
 }>()
 
 const { state, error, isReady } = useImage({