#289 custom protocol tea:// opens app and goes to target page (#290)

Co-authored-by: neil <neil@neils-MacBook-Pro.local>

modules/desktop/electron/electron.ts

@@ -1,5 +1,5 @@
 import windowStateManager from "electron-window-state";
-import { app, BrowserWindow, ipcMain, net } from "electron";
+import { app, BrowserWindow, ipcMain, net, dialog } from "electron";
 import { setupTitlebar, attachTitlebarToWindow } from "custom-electron-titlebar/main";
 import * as Sentry from "@sentry/electron";
 import contextMenu from "electron-context-menu";
@@ -12,7 +12,14 @@ import { installPackage, openTerminal } from "./libs/cli";
 import { autoUpdater } from "electron-updater";
 import * as log from "electron-log";
 import path from "path";
-import i18n from "sveltekit-i18n";
+
+/*
+ TODO:
+ - fix global mutable variable
+ - organize the ipc handlers into its own module
+ - create auto updater initialization module
+ */
+let teaProtocolPath = ""; // this should be empty string
 
 autoUpdater.logger = log;
 log.info("App starting...");
@@ -87,6 +94,7 @@ function sendStatusToWindow(text: string, params?: { [key: string]: any }) {
 	log.info(text);
 	mainWindow?.webContents.send("message", text, params || {});
 }
+
 autoUpdater.on("checking-for-update", () => {
 	log.info("checking for tea gui update");
 });
@@ -144,11 +152,30 @@ function createMainWindow() {
 		mainWindow = null;
 	});
 
-	if (!app.isPackaged) loadVite(port);
-	else serveURL(mainWindow);
+	if (mainWindow.isMinimized()) {
+		mainWindow.restore();
+	}
+
+	if (!app.isPackaged) {
+		// dev
+		loadVite(port);
+	} else {
+		serveURL(mainWindow);
+	}
+
+	global.protocol_path = "hello-world";
+}
+
+if (process.defaultApp) {
+	if (process.argv.length >= 2) {
+		app.setAsDefaultProtocolClient("tea", process.execPath, [path.resolve(process.argv[1])]);
+	}
+} else {
+	app.setAsDefaultProtocolClient("tea");
 }
 
 app.once("ready", createMainWindow);
+
 app.on("activate", () => {
 	if (!mainWindow) {
 		createMainWindow();
@@ -159,6 +186,14 @@ app.on("window-all-closed", async () => {
 	app.quit();
 });
 
+// NOTE: this doesnt work in linux
+// 	you have to loop through process.argv to figure out which url launched the app
+app.on("open-url", (event, url) => {
+	// ie url:  tea://packages/slug
+	event.preventDefault();
+	teaProtocolPath = url.replace("tea:/", "");
+});
+
 ipcMain.handle("get-installed-packages", async () => {
 	const pkgs = await getInstalledPackages();
 	return pkgs;
@@ -192,3 +227,9 @@ ipcMain.handle("open-terminal", async (_, data) => {
 ipcMain.handle("relaunch", async () => {
 	await autoUpdater.quitAndInstall();
 });
+
+ipcMain.handle("get-protocol-path", async () => {
+	const path = teaProtocolPath;
+	teaProtocolPath = "";
+	return path;
+});

modules/desktop/src/libs/native-electron.ts

@@ -144,3 +144,8 @@ export const listenToChannel = (channel: string, callback: (msg: string, ...args
 };
 
 export const relaunch = () => ipcRenderer.invoke("relaunch");
+
+export const getProtocolPath = async (): Promise<string> => {
+	const path = await ipcRenderer.invoke("get-protocol-path");
+	return path;
+};

modules/desktop/src/libs/native-mock.ts

@@ -382,3 +382,5 @@ export const listenToChannel = (channel: string, callback: (msg: string, ...args
 export const relaunch = () => {
 	console.log("relaunch");
 };
+
+export const getProtocolPath = async (): Promise<string> => "";

modules/desktop/src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import '$appcss';
+	import { goto } from '$app/navigation';
 	import { t } from "$libs/translations";
 	import { navigating } from '$app/stores';
 	import { afterNavigate } from '$app/navigation';
@@ -12,6 +13,9 @@
 	import SearchPopupResults from '$components/search-popup-results/search-popup-results.svelte';
 
   import TeaUpdate from '$components/tea-update/tea-update.svelte';
+	import { getProtocolPath } from '@native';
+
+  import { onMount } from 'svelte';
 
 	let view: HTMLElement;
 
@@ -27,6 +31,11 @@
 		}
 	});
 
+	onMount(async () => {
+		// used by the tea:// protocol to suggest a path to open
+		const path = await getProtocolPath();
+		if (path) goto(path);
+	});
 </script>
 
 <div id="main-layout" class={`${$sideNavOpen ? "w-3/4" : "w-full"} transition-all`}>

modules/desktop/src/routes/packages/[slug]/+page.svelte

@@ -11,6 +11,7 @@
 	import Markdown from '@tea/ui/markdown/markdown.svelte';
 	import PackageSnippets from '@tea/ui/package-snippets/package-snippets.svelte';
 	import type { GUIPackage } from '$libs/types';
+	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
@@ -60,34 +61,38 @@
 
 </script>
 
-<div>
-	<section>
-		<PackageBanner {pkg} />
-	</section>
-
-	<section class="mt-8 flex gap-8">
-		<div class="w-2/3">
-			<Tabs class="bg-black" {tabs} />
-		</div>
-		<div class="w-1/3">
-			{#if pkg}
-				<PackageMetas {pkg} />
-			{/if}
-		</div>
-	</section>
-	<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png">SNIPPETS</PageHeader>
-	<section class="mt-8">
-		<PackageSnippets />
-	</section>
-	<!-- <section class="mt-8">
-		<PackageReviews reviews={reviews || []} />
-	</section> -->
-	{#if pkg}
-		<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png"
-			>YOU MAY ALSO LIKE...</PageHeader
-		>
-		<section class="mt-8">
-			<SuggestedPackages {pkg} />
+{#if pkg}
+	<div>
+		<section>
+			<PackageBanner {pkg} />
 		</section>
-	{/if}
-</div>
+
+		<section class="mt-8 flex gap-8">
+			<div class="w-2/3">
+				<Tabs class="bg-black" {tabs} />
+			</div>
+			<div class="w-1/3">
+				{#if pkg}
+					<PackageMetas {pkg} />
+				{/if}
+			</div>
+		</section>
+		<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png">SNIPPETS</PageHeader>
+		<section class="mt-8">
+			<PackageSnippets />
+		</section>
+		<!-- <section class="mt-8">
+			<PackageReviews reviews={reviews || []} />
+		</section> -->
+		{#if pkg}
+			<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png"
+				>YOU MAY ALSO LIKE...</PageHeader
+			>
+			<section class="mt-8">
+				<SuggestedPackages {pkg} />
+			</section>
+		{/if}
+	</div>
+{:else}
+	<Preloader/>
+{/if}