[ENG-1402] Drag & drop into OS

apps/desktop/package.json

@@ -12,12 +12,13 @@
 		"lint": "eslint src --cache"
 	},
 	"dependencies": {
-		"@spacedrive/rspc-client": "github:spacedriveapp/rspc#path:packages/client&6a77167495",
-		"@spacedrive/rspc-tauri": "github:spacedriveapp/rspc#path:packages/tauri&6a77167495",
+		"@crabnebula/tauri-plugin-drag": "^2.0.0",
 		"@remix-run/router": "=1.13.1",
 		"@sd/client": "workspace:*",
 		"@sd/interface": "workspace:*",
 		"@sd/ui": "workspace:*",
+		"@spacedrive/rspc-client": "github:spacedriveapp/rspc#path:packages/client&6a77167495",
+		"@spacedrive/rspc-tauri": "github:spacedriveapp/rspc#path:packages/tauri&6a77167495",
 		"@t3-oss/env-core": "^0.7.1",
 		"@tanstack/react-query": "^5.59",
 		"@tauri-apps/api": "=2.0.3",

apps/desktop/src-tauri/Cargo.toml

@@ -47,7 +47,8 @@ tauri-plugin-shell             = "=2.0.2"
 tauri-plugin-updater           = "=2.0.2"
 
 # memory allocator
-mimalloc = { workspace = true }
+mimalloc          = { workspace = true }
+tauri-plugin-drag = "2.0.0"
 
 [dependencies.tauri]
 features = ["linux-libxdo", "macos-private-api", "native-tls-vendored", "unstable"]

apps/desktop/src-tauri/capabilities/default.json

@@ -27,6 +27,7 @@
 		"core:window:allow-start-dragging",
 		"core:webview:allow-internal-toggle-devtools",
 		"cors-fetch:default",
+		"drag:default",
 		{
 			"identifier": "http:default",
 			"allow": [

apps/desktop/src-tauri/src/main.rs

@@ -358,6 +358,7 @@ async fn main() -> tauri::Result<()> {
 		.plugin(tauri_plugin_os::init())
 		.plugin(tauri_plugin_shell::init())
 		.plugin(tauri_plugin_http::init())
+		.plugin(tauri_plugin_drag::init())
 		// TODO: Bring back Tauri Plugin Window State - it was buggy so we removed it.
 		.plugin(tauri_plugin_updater::Builder::new().build())
 		.plugin(updater::plugin())

apps/desktop/src/App.tsx

@@ -18,6 +18,7 @@ import { RouteTitleContext } from '@sd/interface/hooks/useRouteTitle';
 
 import '@sd/ui/style';
 
+import { startDrag } from '@crabnebula/tauri-plugin-drag';
 import SuperTokens from 'supertokens-web-js';
 import EmailPassword from 'supertokens-web-js/recipe/emailpassword';
 import Passwordless from 'supertokens-web-js/recipe/passwordless';
@@ -46,6 +47,7 @@ import { createUpdater } from './updater';
 declare global {
 	interface Window {
 		enableCORSFetch: (enable: boolean) => void;
+		startDrag: typeof startDrag;
 	}
 }
 
@@ -72,6 +74,7 @@ export default function App() {
 		// This tells Tauri to show the current window because it's finished loading
 		commands.appReady();
 		window.enableCORSFetch(true);
+		window.startDrag = startDrag;
 		// .then(() => {
 		// 	if (import.meta.env.PROD) window.fetch = fetch;
 		// });

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

@@ -1,16 +1,19 @@
+import { Transparent } from '@sd/assets/images';
 import clsx from 'clsx';
-import { memo, useMemo } from 'react';
+import { memo, useEffect, useMemo } from 'react';
 import {
 	getItemFilePath,
 	getItemObject,
 	humanizeSize,
+	libraryClient,
 	Tag,
 	useExplorerLayoutStore,
 	useLibraryQuery,
 	useSelector,
 	type ExplorerItem
 } from '@sd/client';
 import { useLocale } from '~/hooks';
+import { usePlatform } from '~/util/Platform';
 
 import { useExplorerContext } from '../../../Context';
 import { ExplorerDraggable } from '../../../ExplorerDraggable';
@@ -19,6 +22,7 @@ import { FileThumb } from '../../../FilePath/Thumb';
 import { useFrame } from '../../../FilePath/useFrame';
 import { explorerStore } from '../../../store';
 import { useExplorerDraggable } from '../../../useExplorerDraggable';
+import { useExplorerItemData } from '../../../useExplorerItemData';
 import { RenamableItemText } from '../../RenamableItemText';
 import { ViewItem } from '../../ViewItem';
 import { GridViewItemContext, useGridViewItemContext } from './Context';
@@ -107,6 +111,38 @@ const ItemMetadata = memo(() => {
 	const item = useGridViewItemContext();
 	const { isDroppable } = useExplorerDroppableContext();
 	const explorerLayout = useExplorerLayoutStore();
+	const dragState = useSelector(explorerStore, (s) => s.drag);
+
+	useEffect(() => {
+		(async () => {
+			if (dragState?.type === 'dragging' && dragState.items.length > 0) {
+				const items = await Promise.all(
+					dragState.items.map(async (item) => {
+						const data = getItemFilePath(item);
+						if (!data) return;
+
+						const file_path =
+							'path' in data
+								? data.path
+								: await libraryClient.query(['files.getPath', data.id]);
+
+						return {
+							type: 'explorer-item',
+							file_path: file_path
+						};
+					})
+				);
+
+				// get image src from Transparent
+				const image = Transparent.split('/@fs')[1];
+
+				(window as any).startDrag({
+					item: items.filter(Boolean).map((item) => item?.file_path),
+					icon: image
+				});
+			}
+		})();
+	}, [dragState]);
 
 	const isRenaming = useSelector(explorerStore, (s) => s.isRenaming && item.selected);