fix: move modifier-click guard to the asset selection consumer

AssetsListItem now always forwards the click event on preview-click
instead of swallowing modifier-held clicks itself, so consumers that
don't implement selection (JobAssetsList) keep opening the viewer on
a modifier-held click. AssetsSidebarListView, which does implement
selection, now gates both preview-click and dblclick on the modifier
keys itself.

Author: mattmillerai

src/components/sidebar/tabs/AssetsSidebarListView.test.ts

@@ -56,7 +56,7 @@ const AssetsListItemStub = defineComponent({
     :data-preview-url="previewUrl"
     :data-is-video-preview="isVideoPreview"
     data-testid="assets-list-item"
-  ><button data-testid="preview-click-trigger" @click="$emit('preview-click')" /><slot /></div>`
+  ><button data-testid="preview-click-trigger" @click="$emit('preview-click', $event)" /><slot /></div>`
 })
 
 const buildAsset = (id: string, name: string): AssetItem =>
@@ -173,4 +173,46 @@ describe('AssetsSidebarListView', () => {
 
     expect(onPreviewAsset).toHaveBeenCalledWith(imageAsset)
   })
+
+  it('does not emit preview-asset when preview is clicked with a selection modifier held', async () => {
+    const imageAsset = {
+      ...buildAsset('image-asset-mod', 'image.png'),
+      preview_url: '/api/view/image.png',
+      user_metadata: {}
+    } satisfies AssetItem
+
+    const onPreviewAsset = vi.fn()
+    const { container } = renderListView([buildOutputItem(imageAsset)], {
+      'onPreview-asset': onPreviewAsset
+    })
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const trigger = container.querySelector(
+      '[data-testid="preview-click-trigger"]'
+    )!
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.click(trigger, { ctrlKey: true })
+
+    expect(onPreviewAsset).not.toHaveBeenCalled()
+  })
+
+  it('does not emit preview-asset when double-clicked with a selection modifier held', async () => {
+    const imageAsset = {
+      ...buildAsset('image-asset-dbl-mod', 'image.png'),
+      preview_url: '/api/view/image.png',
+      user_metadata: {}
+    } satisfies AssetItem
+
+    const onPreviewAsset = vi.fn()
+    const { container } = renderListView([buildOutputItem(imageAsset)], {
+      'onPreview-asset': onPreviewAsset
+    })
+
+    // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+    const stub = container.querySelector('[data-testid="assets-list-item"]')!
+    // eslint-disable-next-line testing-library/prefer-user-event
+    await fireEvent.dblClick(stub, { shiftKey: true })
+
+    expect(onPreviewAsset).not.toHaveBeenCalled()
+  })
 })

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -44,8 +44,8 @@
             @mouseleave="onAssetLeave(item.asset.id)"
             @contextmenu.prevent.stop="emit('context-menu', $event, item.asset)"
             @click.stop="emit('select-asset', item.asset, selectableAssets)"
-            @dblclick.stop="emit('preview-asset', item.asset)"
-            @preview-click="emit('preview-asset', item.asset)"
+            @dblclick.stop="openPreview($event, item.asset)"
+            @preview-click="openPreview($event, item.asset)"
             @stack-toggle="void toggleStack(item.asset)"
           >
             <template v-if="hoveredAssetId === item.asset.id" #actions>
@@ -189,4 +189,11 @@ function onAssetLeave(assetId: string) {
     hoveredAssetId.value = null
   }
 }
+
+function openPreview(event: MouseEvent, asset: AssetItem) {
+  const hasSelectionModifier = event.shiftKey || event.metaKey || event.ctrlKey
+  if (hasSelectionModifier) return
+
+  emit('preview-asset', asset)
+}
 </script>

src/platform/assets/components/AssetsListItem.test.ts

@@ -83,8 +83,8 @@ describe('AssetsListItem', () => {
   })
 
   it.for(SELECTION_MODIFIERS)(
-    'does not emit preview-click when %s is held over the preview',
-    async ([, heldModifier]) => {
+    'still emits preview-click with the event when %s is held over the preview',
+    async ([modifierKey, heldModifier]) => {
       const user = userEvent.setup()
       const { emitted } = render(AssetsListItem, {
         props: {
@@ -96,25 +96,10 @@ describe('AssetsListItem', () => {
       await user.keyboard(heldModifier)
       await user.click(screen.getByRole('img'))
 
-      expect(emitted()['preview-click']).toBeUndefined()
-    }
-  )
-
-  it.for(SELECTION_MODIFIERS)(
-    'does not emit preview-click when %s is held over the fallback icon',
-    async ([, heldModifier]) => {
-      const user = userEvent.setup()
-      const { container, emitted } = render(AssetsListItem, {
-        props: {
-          iconName: 'icon-[lucide--box]'
-        }
-      })
-
-      await user.keyboard(heldModifier)
-      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access -- aria-hidden icon, no semantic query available
-      await user.click(container.querySelector('i')!)
-
-      expect(emitted()['preview-click']).toBeUndefined()
+      const events = emitted()['preview-click']
+      expect(events).toHaveLength(1)
+      const [event] = events![0] as [MouseEvent]
+      expect(event[`${modifierKey}Key`]).toBe(true)
     }
   )
 })

src/platform/assets/components/AssetsListItem.vue

@@ -143,7 +143,7 @@ import VideoPlayOverlay from './VideoPlayOverlay.vue'
 
 const emit = defineEmits<{
   'stack-toggle': []
-  'preview-click': []
+  'preview-click': [event: MouseEvent]
 }>()
 
 const {
@@ -179,10 +179,7 @@ const {
 }>()
 
 function onPreviewClick(event: MouseEvent) {
-  const hasSelectionModifier = event.shiftKey || event.metaKey || event.ctrlKey
-  if (hasSelectionModifier) return
-
-  emit('preview-click')
+  emit('preview-click', event)
 }
 
 const {