#331 initial welcome banner to require tea cli (#332)

* #331 show banner if Tea cli is not installed
- adjustments of notification: show only if tea is not latest

---------

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

modules/desktop/src/components/top-bar/profile-nav-button.svelte

@@ -7,7 +7,6 @@
 
 
 	const toggleSideNav = () => {
-		console.log("toggle", $sideNavOpen)
 		navStore.sideNavOpen.update((v) => !v);
 	}
 

modules/desktop/src/components/welcome-modal/welcome-modal.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import Button from "@tea/ui/button/button.svelte";
+  import { PackageStates, type GUIPackage } from "$libs/types";
+	import { openTerminal, isPackageInstalled } from '@native';
+  import { packagesStore } from "$libs/stores";
+
+  export let tea:GUIPackage|undefined;
+
+  let installing = false;
+  
+  let checkTeaPoll: NodeJS.Timer | null;
+  const checkInstalled = async () => {
+    if (checkTeaPoll) return;
+    return new Promise((resolve) => {
+      checkTeaPoll = setInterval(async () => {
+        const installed = await isPackageInstalled("tea.xyz", tea?.version);
+        if (installed && checkTeaPoll) {
+          clearInterval(checkTeaPoll);
+          checkTeaPoll = null;
+          resolve(null);
+        }
+      }, 5000); // check every 5s
+    })
+  }
+
+  const onOpenTerminal = async () => {
+    if (installing) return;
+    installing = true;
+		try {
+			openTerminal(`sh <(curl https://tea.xyz)`);
+      await checkInstalled();
+      packagesStore.updatePackage("tea.xyz", {
+        state: PackageStates.INSTALLED,
+        installed_versions: [tea?.version || "latest"]
+      });
+		} catch (error) {
+			console.log("install failed")
+		} finally {
+      installing = false;
+    }
+	}
+</script>
+
+<section class="fixed z-10 top-0 left-0 flex items-center justify-center">
+  <article class="flex margin-auto p-2 border border-gray rounded-md">
+    <figure>
+      <img  class="object-contain" src="/images/welcome-bg.png" alt="welcome"/>
+    </figure>
+    <div class="flex-grow flex flex-col justify-center px-12">
+      <h1 class="text-primary text-4xl mb-4">Welcome to the tea app!</h1>
+      <p class="font-inter mb-4">This app is your gateway into the world of open-source software. Easily explore and manage packages with a click of a button. This app will notify you of any available software updates to ensure you’re safe and secure. Under the hood is the powerful tea cli.</p>
+      <Button type="plain" color="secondary" class={`w-7/12 ${installing && "animate-pulse"}`}
+        onClick={onOpenTerminal}
+      >
+        INSTALL TEA CLI v{tea?tea.version:"latest"}
+      </Button>
+      <p class="text-gray text-sm mt-2">tea cli is required in order to use our app. Clicking the link above will automatically install it via your command-line.</p>
+    </div>
+  </article>
+</section>
+
+<style>
+  section {
+    width: 100%;
+    height: 100vh;
+    background: rgba(0,0,0, 0.5);
+  }
+
+  article {
+    height: 472px;
+    width: 725px;
+    background: rgba(0,0,0, 0.8);
+  }
+
+  figure {
+    min-width: 140px;
+  }
+  img {
+    height: 100%;
+  }
+</style>

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

@@ -212,3 +212,18 @@ export const submitLogs = async () => {
 	const response = await ipcRenderer.invoke("submit-logs");
 	return response;
 };
+
+export const isPackageInstalled = async (fullName: string, version?: string): Promise<boolean> => {
+	let isInstalled = false;
+	const pkgs = await getInstalledPackages();
+	const teaPkg = pkgs.find((p) => p.full_name === fullName);
+
+	if (teaPkg) {
+		isInstalled = true;
+		if (version) {
+			isInstalled = teaPkg.installed_versions.includes(version);
+		}
+	}
+
+	return isInstalled;
+};

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

@@ -340,3 +340,7 @@ export const getProtocolPath = async (): Promise<string> => "";
 export const submitLogs = async () => {
 	return "synced!";
 };
+
+export const isPackageInstalled = async (_v?: string): Promise<boolean> => {
+	return true;
+};

modules/desktop/src/libs/stores/pkgs.ts

@@ -115,17 +115,16 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
 		});
 	};
 
-	const checkTeaCLIPackage = async (teaPkg: Package, installedTeaCliPkg?: InstalledPackage) => {
-		const isLatest =
-			installedTeaCliPkg && installedTeaCliPkg.installed_versions[0] === teaPkg.version;
-		log.info("check Tea-CLI if latest:", !isLatest);
-		if (!isLatest) {
+	const checkTeaCLIPackage = async (teaPkg: Package) => {
+		const guiPkg = await syncPackageBottlesAndState(teaPkg.full_name);
+		log.info("check Tea-CLI if state:", guiPkg?.state);
+		if (guiPkg?.state === PackageStates.NEEDS_UPDATE && guiPkg?.installed_versions?.length) {
 			notificationStore.add({
 				message: "install cli",
 				i18n_key: "package.update-tea-cli",
 				type: NotificationType.ACTION_BANNER,
 				callback: installTea,
-				callback_label: installedTeaCliPkg ? "INSTALL" : "UPDATE"
+				callback_label: "UPDATE"
 			});
 		}
 	};
@@ -153,9 +152,8 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
 				const installedPkgs: InstalledPackage[] = await getInstalledPackages();
 
 				log.info("sync test for tea-cli");
-				const installedTea = installedPkgs.find((p) => p.full_name === "tea.xyz");
 				const distTea = pkgs.find((p) => p.full_name === "tea.xyz");
-				if (distTea) await checkTeaCLIPackage(distTea, installedTea);
+				if (distTea) await checkTeaCLIPackage(distTea);
 
 				log.info("set NEEDS_UPDATE state to pkgs");
 				let progressCount = 0;

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

@@ -1,19 +1,23 @@
 <script lang="ts">
 	import '$appcss';
 	import { t } from '$libs/translations';
-	import { navStore, packagesStore, notificationStore } from '$libs/stores';
+	import { navStore, packagesStore } from '$libs/stores';
 	import Packages from '$components/packages/packages.svelte';
-	import { SideMenuOptions } from '$libs/types';
+	import { PackageStates, SideMenuOptions } from '$libs/types';
 	import SortingButtons from "$components/search-packages/sorting-buttons.svelte";
 	import SideMenu from "$components/side-menu/side-menu.svelte";
 	import NotificationBar from '$components/notification-bar/notification-bar.svelte';
+	import WelcomeModal from '$components/welcome-modal/welcome-modal.svelte';
 
 	const { sideNavOpen } = navStore; // right side not left
+	const { packages } = packagesStore;
 
 	let sideMenuOption = SideMenuOptions.all;
 
 	let sortBy: "popularity" | "most recent" = "popularity";
 	let sortDirection: "asc" | "desc" = "desc";
+
+	$: teaPkg = $packages.find((p) => p.full_name === "tea.xyz");
 </script>
 
 <div id="package-container">
@@ -33,6 +37,9 @@
 	</div>
 </header>
 
+{#if !teaPkg || PackageStates.AVAILABLE === teaPkg?.state || !teaPkg?.installed_versions?.length }
+	<WelcomeModal tea={teaPkg} />
+{/if}
 <style>
 	#package-container {
 		padding-top: 50px;