[ENG-741] Add explorer item cut style (#1006)

Add cut style

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

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { memo } from 'react';
 import { ExplorerItem, bytesToNumber, getItemFilePath, getItemLocation } from '@sd/client';
 import GridList from '~/components/GridList';
-import { useExplorerStore } from '~/hooks';
+import { isCut, useExplorerStore } from '~/hooks';
 import { ViewItem } from '.';
 import FileThumb from '../File/Thumb';
 import { useExplorerViewContext } from '../ViewContext';
@@ -13,9 +13,10 @@ interface GridViewItemProps {
 	data: ExplorerItem;
 	selected: boolean;
 	index: number;
+	cut: boolean;
 }
 
-const GridViewItem = memo(({ data, selected, index, ...props }: GridViewItemProps) => {
+const GridViewItem = memo(({ data, selected, index, cut, ...props }: GridViewItemProps) => {
 	const filePathData = getItemFilePath(data);
 	const location = getItemLocation(data);
 	const explorerStore = useExplorerStore();
@@ -30,7 +31,11 @@ const GridViewItem = memo(({ data, selected, index, ...props }: GridViewItemProp
 	return (
 		<ViewItem data={data} className="h-full w-full" {...props}>
 			<div className={clsx('mb-1 rounded-lg ', selected && 'bg-app-selectedItem')}>
-				<FileThumb data={data} size={explorerStore.gridItemSize} className="mx-auto" />
+				<FileThumb
+					data={data}
+					size={explorerStore.gridItemSize}
+					className={clsx('mx-auto', cut && 'opacity-60')}
+				/>
 			</div>
 
 			<div className="flex flex-col justify-center">
@@ -81,9 +86,11 @@ export default () => {
 					? explorerView.selected.includes(item.item.id)
 					: explorerView.selected === item.item.id;
 
+				const cut = isCut(item.item.id);
+
 				return (
 					<Item selected={isSelected} id={item.item.id}>
-						<GridViewItem data={item} selected={isSelected} index={index} />
+						<GridViewItem data={item} selected={isSelected} index={index} cut={cut} />
 					</Item>
 				);
 			}}

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

@@ -29,6 +29,7 @@ import {
 import {
 	FilePathSearchOrderingKeys,
 	getExplorerStore,
+	isCut,
 	useExplorerStore,
 	useScrolled
 } from '~/hooks';
@@ -43,6 +44,7 @@ interface ListViewItemProps {
 	columnSizing: ColumnSizingState;
 	paddingX: number;
 	selected: boolean;
+	cut: boolean;
 }
 
 const ListViewItem = memo((props: ListViewItemProps) => {
@@ -139,10 +141,16 @@ export default () => {
 
 					const selected = selectedId === cell.row.original.item.id;
 
+					const cut = isCut(file.item.id);
+
 					return (
 						<div className="relative flex items-center">
 							<div className="mr-[10px] flex h-6 w-12 shrink-0 items-center justify-center">
-								<FileThumb data={file} size={35} />
+								<FileThumb
+									data={file}
+									size={35}
+									className={clsx(cut && 'opacity-60')}
+								/>
 							</div>
 							<RenamableItemText
 								allowHighlight={false}
@@ -225,7 +233,7 @@ export default () => {
 				accessorFn: (file) => getItemObject(file)?.pub_id
 			}
 		],
-		[explorerView.selected]
+		[explorerView.selected, explorerStore.cutCopyState.sourcePathId]
 	);
 
 	const table = useReactTable({
@@ -704,6 +712,8 @@ export default () => {
 										const selectedNext =
 											nextRow && isSelected(nextRow.original.item.id);
 
+										const cut = isCut(row.original.item.id);
+
 										return (
 											<div
 												key={row.id}
@@ -751,6 +761,7 @@ export default () => {
 														paddingX={paddingX}
 														columnSizing={columnSizing}
 														selected={selected}
+														cut={cut}
 													/>
 												</div>
 											</div>

interface/hooks/useExplorerStore.tsx

@@ -78,3 +78,11 @@ export function useExplorerStore() {
 export function getExplorerStore() {
 	return explorerStore;
 }
+
+export function isCut(id: number) {
+	return (
+		explorerStore.cutCopyState.active &&
+		explorerStore.cutCopyState.actionType === 'Cut' &&
+		explorerStore.cutCopyState.sourcePathId === id
+	);
+}