fix: don't open the lightbox on a modifier-click in the assets list view

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

@@ -5,6 +5,12 @@ import userEvent from '@testing-library/user-event'
 
 import AssetsListItem from './AssetsListItem.vue'
 
+const SELECTION_MODIFIERS = [
+  ['shift', '{Shift>}'],
+  ['meta', '{Meta>}'],
+  ['ctrl', '{Control>}']
+] as const
+
 describe('AssetsListItem', () => {
   it('renders video element with play overlay for video previews', () => {
     const { container } = render(AssetsListItem, {
@@ -75,4 +81,25 @@ describe('AssetsListItem', () => {
 
     expect(emitted()['preview-click']).toHaveLength(1)
   })
+
+  it.for(SELECTION_MODIFIERS)(
+    '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: {
+          previewUrl: 'https://example.com/preview.jpg',
+          previewAlt: 'image.png'
+        }
+      })
+
+      await user.keyboard(heldModifier)
+      await user.click(screen.getByRole('img'))
+
+      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

@@ -38,7 +38,7 @@
         <div
           v-if="previewUrl"
           class="relative size-full"
-          @click="emit('preview-click')"
+          @click="onPreviewClick"
         >
           <template v-if="isVideoPreview">
             <video
@@ -60,7 +60,7 @@
         <div
           v-else
           class="flex size-full items-center justify-center"
-          @click="emit('preview-click')"
+          @click="onPreviewClick"
         >
           <i
             aria-hidden="true"
@@ -143,7 +143,7 @@ import VideoPlayOverlay from './VideoPlayOverlay.vue'
 
 const emit = defineEmits<{
   'stack-toggle': []
-  'preview-click': []
+  'preview-click': [event: MouseEvent]
 }>()
 
 const {
@@ -178,6 +178,10 @@ const {
   progressCurrentPercent?: number
 }>()
 
+function onPreviewClick(event: MouseEvent) {
+  emit('preview-click', event)
+}
+
 const {
   progressBarContainerClass,
   progressBarPrimaryClass,