[ENG-710] Fix explorer view context menu (#933)

* Fix context menu on overview

* Fix double click action

* fix propagation & switch to onMouseDown

interface/app/$libraryId/Explorer/View/ListView.tsx

@@ -253,7 +253,7 @@ export default () => {
 		e: React.MouseEvent<HTMLDivElement, MouseEvent>,
 		row: Row<ExplorerItem>
 	) {
-		if (!explorerView.onSelectedChange) return;
+		if (!explorerView.onSelectedChange || e.button !== 0) return;
 
 		const rowIndex = row.index;
 		const itemId = row.original.item.id;
@@ -328,7 +328,7 @@ export default () => {
 			}
 
 			explorerView.onSelectedChange?.([...updated]);
-		} else if (e.button === 0) {
+		} else {
 			explorerView.onSelectedChange(explorerView.multiSelect ? [itemId] : itemId);
 			setRanges([[itemId, itemId]]);
 		}

interface/app/$libraryId/Explorer/View/index.tsx

@@ -22,7 +22,7 @@ import {
 	ViewContext,
 	useExplorerViewContext
 } from '../ViewContext';
-import { getItemFilePath } from '../util';
+import { getExplorerItemData, getItemFilePath } from '../util';
 import GridView from './GridView';
 import ListView from './ListView';
 import MediaView from './MediaView';
@@ -62,6 +62,12 @@ export const ViewItem = ({ data, children, ...props }: ViewItemProps) => {
 			}
 
 			openFilePath(library.uuid, filePath.id);
+		} else {
+			const { kind } = getExplorerItemData(data);
+
+			if (['Video', 'Image', 'Audio'].includes(kind)) {
+				getExplorerStore().quickViewObject = data;
+			}
 		}
 	};
 

interface/app/$libraryId/Explorer/index.tsx

@@ -32,7 +32,7 @@ export default function Explorer(props: Props) {
 			selectedItemId
 				? props.items?.find((item) => item.item.id === selectedItemId)
 				: undefined,
-		[selectedItemId]
+		[selectedItemId, props.items]
 	);
 
 	useLibrarySubscription(['jobs.newThumbnail'], {

interface/app/$libraryId/overview/index.tsx

@@ -1,9 +1,8 @@
 import { useMemo, useState } from 'react';
 import 'react-loading-skeleton/dist/skeleton.css';
-import { useKey } from 'rooks';
 import { Category } from '@sd/client';
 import { z } from '@sd/ui/src/forms';
-import { getExplorerStore, useExplorerStore, useExplorerTopBarOptions } from '~/hooks';
+import { useExplorerStore, useExplorerTopBarOptions } from '~/hooks';
 import ContextMenu from '../Explorer/File/ContextMenu';
 import { Inspector } from '../Explorer/Inspector';
 import View from '../Explorer/View';
@@ -33,7 +32,7 @@ export const Component = () => {
 
 	const selectedItem = useMemo(
 		() => (selectedItemId ? items?.find((item) => item.item.id === selectedItemId) : undefined),
-		[selectedItemId]
+		[selectedItemId, items]
 	);
 
 	return (
@@ -63,7 +62,7 @@ export const Component = () => {
 						onSelectedChange={setSelectedItemId}
 						top={68}
 						className={explorerStore.layoutMode === 'rows' ? 'min-w-0' : undefined}
-						contextMenu={selectedItem && <ContextMenu data={selectedItem} />}
+						contextMenu={<ContextMenu data={selectedItem} />}
 						emptyNotice={null}
 					/>
 

interface/components/GridList.tsx

@@ -346,7 +346,7 @@ export default <T extends GridListSelection>({ selectable = true, ...props }: Gr
 											selectable: selectable && !!props.onSelectedChange,
 											index,
 											style: { width: itemWidth },
-											onClick: (id) => {
+											onMouseDown: (id) => {
 												!multiSelect && props.onSelectedChange?.(id as T);
 											},
 											onContextMenu: (id) => {
@@ -371,12 +371,12 @@ const useSelecto = () => useContext(SelectoContext);
 
 interface GridListItemProps
 	extends PropsWithChildren,
-		Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'onClick' | 'onContextMenu'> {
+		Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'onMouseDown' | 'onContextMenu'> {
 	selectable?: boolean;
 	index?: number;
 	selected?: boolean;
 	id?: number;
-	onClick?: (id: number) => void;
+	onMouseDown?: (id: number) => void;
 	onContextMenu?: (id: number) => void;
 }
 
@@ -411,10 +411,11 @@ const GridListItem = ({ className, children, style, ...props }: GridListItemProp
 			{...selectableProps}
 			style={style}
 			className={clsx('mx-auto h-full', className)}
-			onClick={() => {
-				if (props.onClick && props.selectable) {
+			onMouseDown={(e) => {
+				e.stopPropagation();
+				if (e.button === 0 && props.onMouseDown && props.selectable) {
 					const id = props.id || props.index;
-					if (id) props.onClick(id);
+					if (id) props.onMouseDown(id);
 				}
 			}}
 			onContextMenu={() => {