Working deep links

apps/desktop/src/App.tsx

@@ -6,6 +6,7 @@ import { createPortal } from 'react-dom';
 import { RspcProvider } from '@sd/client';
 import {
 	createRoutes,
+	DeeplinkEvent,
 	ErrorPage,
 	KeybindEvent,
 	PlatformProvider,
@@ -17,6 +18,10 @@ import { RouteTitleContext } from '@sd/interface/hooks/useRouteTitle';
 
 import '@sd/ui/style/style.scss';
 
+import SuperTokens from 'supertokens-web-js';
+import EmailPassword from 'supertokens-web-js/recipe/emailpassword';
+import Session from 'supertokens-web-js/recipe/session';
+import ThirdParty from 'supertokens-web-js/recipe/thirdparty';
 // TODO: Bring this back once upstream is fixed up.
 // const client = hooks.createClient({
 // 	links: [
@@ -26,10 +31,6 @@ import '@sd/ui/style/style.scss';
 // 		tauriLink()
 // 	]
 // });
-import SuperTokens from 'supertokens-web-js';
-import EmailPassword from 'supertokens-web-js/recipe/emailpassword';
-import Session from 'supertokens-web-js/recipe/session';
-import ThirdParty from 'supertokens-web-js/recipe/thirdparty';
 import getCookieHandler from '@sd/interface/app/$libraryId/settings/client/account/handlers/cookieHandler';
 import getWindowHandler from '@sd/interface/app/$libraryId/settings/client/account/handlers/windowHandler';
 import { useLocale } from '@sd/interface/hooks';
@@ -67,18 +68,21 @@ export default function App() {
 		const keybindListener = listen('keybind', (input) => {
 			document.dispatchEvent(new KeybindEvent(input.payload as string));
 		});
-
-		return () => {
-			keybindListener.then((unlisten) => unlisten());
-		};
-	}, []);
-
-	useEffect(() => {
-		const deeplinkListener = listen('deeplink', (data) => {
-			console.log('deeplink', data.payload);
+		const deeplinkListener = listen('deeplink', async (data) => {
+			const payload = (data.payload as any).data as string;
+			if (!payload) return;
+			const json = JSON.parse(payload)[0];
+			if (!json) return;
+			//json output: "spacedrive://-/URL"
+			if (typeof json !== 'string') return;
+			if (!json.startsWith('spacedrive://-')) return;
+			const url = (json as string).split('://-/')[1];
+			if (!url) return;
+			document.dispatchEvent(new DeeplinkEvent(url));
 		});
 
 		return () => {
+			keybindListener.then((unlisten) => unlisten());
 			deeplinkListener.then((unlisten) => unlisten());
 		};
 	}, []);

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

@@ -15,6 +15,7 @@ import { useRootContext } from '~/app/RootContext';
 import { LibraryIdParamsSchema } from '~/app/route-schemas';
 import ErrorFallback, { BetterErrorBoundary } from '~/ErrorFallback';
 import {
+	useDeeplinkEventHandler,
 	useKeybindEventHandler,
 	useOperatingSystem,
 	useRedirectToNewLocation,
@@ -40,6 +41,7 @@ const Layout = () => {
 	const windowState = useWindowState();
 
 	useKeybindEventHandler(library?.uuid);
+	useDeeplinkEventHandler();
 
 	const layoutRef = useRef<HTMLDivElement>(null);
 

interface/app/$libraryId/settings/Sidebar.tsx

@@ -37,7 +37,7 @@ export default () => {
 
 	// const isPairingEnabled = useFeatureFlag('p2pPairing');
 	const isBackupsEnabled = useFeatureFlag('backups');
-	const cloudSync = useFeatureFlag('cloudSync');
+	// const cloudSync = useFeatureFlag('cloudSync');
 
 	const { t } = useLocale();
 
@@ -123,12 +123,12 @@ export default () => {
 						<Icon component={MagnifyingGlass} />
 						Saved Searches
 					</SidebarLink> */}
-					{cloudSync && (
+					{/* {cloudSync && (
 						<SidebarLink to="library/sync">
 							<Icon component={ArrowsClockwise} />
 							{t('sync')}
 						</SidebarLink>
-					)}
+					)} */}
 					<SidebarLink disabled to="library/clouds">
 						<Icon component={Cloud} />
 						{t('clouds')}

interface/hooks/index.ts

@@ -31,3 +31,4 @@ export * from './useWindowState';
 export * from './useZodParams';
 export * from './useZodRouteParams';
 export * from './useZodSearchParams';
+export * from './useDeeplinkEventHandler';

interface/hooks/useDeeplinkEventHandler.ts

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router";
+import { DeeplinkEvent } from "~/util/events";
+
+export const useDeeplinkEventHandler = () => {
+	const navigate = useNavigate();
+	useEffect(() => {
+		const handler = (e: DeeplinkEvent) => {
+			e.preventDefault();
+
+			const url = e.detail.url;
+			if (!url) return;
+
+			navigate(url);
+		};
+
+		document.addEventListener('deeplink', handler);
+		return () => document.removeEventListener('deeplink', handler);
+	}, [navigate]);
+}

interface/hooks/useKeybindEventHandler.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 
-import { KeybindEvent } from '../util/keybind';
+import { KeybindEvent } from '../util/events';
 import { useQuickRescan } from './useQuickRescan';
 import { getWindowState } from './useWindowState';
 

interface/index.tsx

@@ -15,8 +15,6 @@ import {
 import { toast, TooltipProvider } from '@sd/ui';
 
 import { createRoutes } from './app';
-import getCookieHandler from './app/$libraryId/settings/client/account/handlers/cookieHandler';
-import getWindowHandler from './app/$libraryId/settings/client/account/handlers/windowHandler';
 import { SpacedropProvider } from './app/$libraryId/Spacedrop';
 import i18n from './app/I18n';
 import { Devtools } from './components/Devtools';
@@ -28,7 +26,7 @@ import { RouterContext, RoutingContext } from './RoutingContext';
 export * from './app';
 export { ErrorPage } from './ErrorFallback';
 export * from './TabsContext';
-export * from './util/keybind';
+export * from './util/events';
 export * from './util/Platform';
 
 dayjs.extend(advancedFormat);

interface/util/events.ts

@@ -1,6 +1,7 @@
 declare global {
 	interface GlobalEventHandlersEventMap {
 		keybindexec: KeybindEvent;
+		deeplink: DeeplinkEvent;
 	}
 }
 
@@ -13,3 +14,13 @@ export class KeybindEvent extends CustomEvent<{ action: string }> {
 		});
 	}
 }
+
+export class DeeplinkEvent extends CustomEvent<{ url: string }> {
+	constructor(url: string) {
+		super('deeplink', {
+			detail: {
+				url
+			}
+		});
+	}
+}

packages/client/src/core.ts

@@ -512,9 +512,10 @@ export type NodeConfigP2P = { discovery?: P2PDiscoveryState; port: Port; disable
  * 
  * All of these are valid values:
  * - `localhost`
- * - `otbeaumont.me` or `otbeaumont.me:3000`
+ * - `spacedrive.com` or `spacedrive.com:3000`
  * - `127.0.0.1` or `127.0.0.1:300`
  * - `[::1]` or `[::1]:3000`
+ * 
  * which is why we use `String` not `SocketAddr`
  */
 manual_peers?: string[] }