show installed state on search result (#471)

* #468 show installed state on search result

* #467 sync package pantry when installing

* add progress circle in package page

* hide i18n dropdown

* fix notification color

---------

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

modules/desktop/electron/libs/cli.ts

@@ -17,7 +17,7 @@ export async function installPackage(full_name: string) {
 
 	if (!teaVersion) throw new Error("no tea");
 	log.info(`installing package ${full_name}`);
-	await asyncExec(`cd ${destinationDirectory} && ./tea +${full_name} true`);
+	await asyncExec(`cd ${destinationDirectory} && ./tea -S +${full_name} true`);
 }
 
 export async function openTerminal(cmd: string) {

modules/desktop/src/components/package-banner/package-banner.svelte

@@ -5,6 +5,7 @@
 	import Button from "@tea/ui/button/button.svelte";
 	import ToolTip from "@tea/ui/tool-tip/tool-tip.svelte";
 	import semverCompare from "semver/functions/compare";
+	import ProgressCircle from "@tea/ui/progress-circle/progress-circle.svelte";
 
 	import type { GUIPackage } from "$libs/types";
 	import { packagesStore } from "$libs/stores";
@@ -38,8 +39,15 @@
 
 <section class="mt-4 bg-black">
 	<header class="flex">
-		<figure class="grow-1 w-1/3">
+		<figure class="grow-1 w-1/3 relative">
 			<img class="w-full" src={pkg.thumb_image_url} alt={pkg.full_name} />
+			{#if pkg.install_progress_percentage && pkg.install_progress_percentage < 100}
+				<div class="absolute left-0 top-0 z-40 h-full w-full bg-black bg-opacity-50">
+					<div class="absolute left-0 right-0 top-1/2 m-auto -mt-12 h-24 w-24">
+						<ProgressCircle value={pkg.install_progress_percentage} />
+					</div>
+				</div>
+			{/if}
 		</figure>
 		<article class="w-2/3 p-4 pt-8">
 			<h3 class="text-primary text-3xl">{pkg.full_name}</h3>

modules/desktop/src/components/popout-menu/popout-menu.svelte

@@ -67,8 +67,8 @@
 		</button>
 	{/if}
 	<hr class="mt-1" />
-	<SelectLang />
-	<hr />
+	<!-- <SelectLang />
+	<hr /> -->
 	<button
 		class="hover:bg-gray outline-gray focus:bg-secondary h-8 w-full p-1 text-left outline-1 transition-all hover:bg-opacity-25 hover:outline"
 		class:animate-pulse={submittedMessage === "syncing..."}

modules/desktop/src/components/search-popup-results/package-search-result.svelte

@@ -4,19 +4,20 @@
 	import { onMount } from "svelte";
 
 	import ImgLoader from "@tea/ui/img-loader/img-loader.svelte";
-	import { findAvailableVersions } from "$libs/packages/pkg-utils";
 	import { goto } from "$app/navigation";
 	import PackageInstallButton from "$components/package-install-button/package-install-button.svelte";
-	export let pkg: GUIPackage;
+	export let pkg: GUIPackage; // Fuse package search result probably not updated
 	export let onClick: () => Promise<void>;
 	export let onClose: () => void;
 
+	const { packageList } = packagesStore;
+
+	$: updatedPkg = $packageList.find((p) => p.full_name === pkg.full_name);
+
 	onMount(() => {
 		packagesStore.fetchPackageBottles(pkg.full_name);
 	});
 
-	const availableVersions = findAvailableVersions(pkg);
-
 	const gotoPackagePage = () => {
 		goto(`/packages/${pkg.slug}?tab=all`);
 		onClose();
@@ -39,7 +40,9 @@
 	</header>
 	<aside>
 		<div>
-			<PackageInstallButton {pkg} {onClick} />
+			{#if updatedPkg}
+				<PackageInstallButton pkg={updatedPkg} {onClick} />
+			{/if}
 		</div>
 	</aside>
 </figure>

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

@@ -24,7 +24,7 @@ export default function initNotificationStore() {
 				params
 			};
 			if (params.action) {
-				newNotification.callback_label = params.action;
+				newNotification.callback_label = params.action.toUpperCase();
 				newNotification.callback = () => {
 					relaunch();
 					remove(newNotification.id); // not sure yet

modules/ui/src/notification/notification.svelte

@@ -22,7 +22,7 @@
 	<div class="flex items-center gap-4">
 		{#if notification.callback}
 			<button
-				class="h-10 w-32 rounded-sm bg-white"
+				class="h-10 w-32 rounded-sm bg-white text-black"
 				on:click={() => {
 					if (notification.callback) {
 						notification.callback();
@@ -50,4 +50,9 @@
 		background-color: #8000ff;
 		color: #ffffff;
 	}
+
+	.action-banner-notification {
+		background-color: #8000ff;
+		color: #ffffff;
+	}
 </style>