#377 search result package should link to package page (#378)

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

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

@@ -6,25 +6,34 @@
 
 	import ImgLoader from "@tea/ui/img-loader/img-loader.svelte";
 	import { findAvailableVersions } from "$libs/packages/pkg-utils";
+  import { goto } from "$app/navigation";
 	export let pkg: GUIPackage;
 	export let onClick: (_version: string) => Promise<void>;
+	export let onClose: () => void;
 
 	onMount(() => {
 		packagesStore.fetchPackageBottles(pkg.full_name);
 	});
 
 	const availableVersions = findAvailableVersions(pkg);
+
+	const gotoPackagePage = () => {
+		goto(`/packages/${pkg.slug}?tab=all`);
+		onClose();
+	}
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <figure class="border-gray flex flex-row gap-2 border p-2">
 	<ImgLoader
+		on:click={() => gotoPackagePage()}
 		class="pkg-image h-16 w-16 object-cover"
 		src={!pkg.thumb_image_url.includes("https://tea.xyz")
 			? "https://tea.xyz/Images/package-thumb-nolabel4.jpg"
 			: pkg.thumb_image_url}
 		alt={pkg.name}
 	/>
-	<header class="flex-grow">
+	<header class="flex-grow" on:click={() => gotoPackagePage()}>
 		<h1>{pkg.full_name}</h1>
 		<p class="line-clamp-2 text-xs">{pkg.desc}</p>
 	</header>
@@ -33,3 +42,9 @@
 		<footer class="mt-2 text-center text-xs">v{pkg.version}</footer>
 	</aside>
 </figure>
+
+<style>
+	figure:hover {
+		background-color: #252525;
+	}
+</style>

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

@@ -62,6 +62,7 @@
 					<div class={pkg.state === PackageStates.INSTALLING ? 'animate-pulse' : ''}>
 						<PackageResult
 							{pkg}
+							{onClose}
 							ctaLabel={$t(`package.cta-${pkg.state}`)}
 							ctaColor={pkg.state === PackageStates.INSTALLED ? "green": "secondary"}
 							onClick={async () => {