show link when no search results (#504)

modules/desktop/electron/libs/cli.ts

@@ -100,12 +100,12 @@ function newInstallProgressNotifier(full_name: string, notifyMainWindow: MainWin
 				// how much of the current package is completed
 				const packageProgress = (received / contentSize) * 100;
 				// progress is the total packages completed plus the percentage of the current package
-				const progress = (overallProgress + packageProgress / numberOfPackages).toFixed(2);
+				const progress = overallProgress + packageProgress / numberOfPackages;
 				notifyMainWindow("install-progress", { full_name, progress });
 			}
 		} else if (msg.status === "installed") {
 			currentPackageNumber++;
-			const progress = ((currentPackageNumber / numberOfPackages) * 100).toFixed(2);
+			const progress = (currentPackageNumber / numberOfPackages) * 100;
 			notifyMainWindow("install-progress", { full_name, progress });
 		}
 	};

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

@@ -142,7 +142,7 @@
 				{/if}
 				{#if pkg.github}
 					<button
-						class="border-gray group flex h-[40px] w-[40px] items-center justify-center rounded-sm border hover:bg-[#e1e1e1]"
+						class="border-gray group flex h-[40px] w-[40px] items-center justify-center rounded-sm border hover:bg-[#e1e1e1] shrink-0"
 						on:click={() => {
 							if (pkg.github) {
 								const slug = trimGithubSlug(pkg.github);

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Button from "@tea/ui/button/button.svelte";
+  import { shellOpenExternal } from "@native";
+</script>
+
+<div class="flex flex-col justify-center items-center h-full">
+  <div class="text-2xl">Hmm, we don't have that one yet...</div>
+  <div class="text-xl mt-4">But we'd love for you to submit it to the pantry!</div>
+  <div class="mt-10">
+    <Button type="plain" color="blue" onClick={() => shellOpenExternal("https://github.com/teaxyz/pantry")}>
+      <span class="text-sm px-12">VISIT PANTRY</span>
+    </Button>
+  </div>
+  <div class="text-gray text-xs mt-2">Redirects to github</div>
+</div>

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

@@ -12,6 +12,7 @@
 
 	import { installPackage } from "@native";
 	import { onMount } from "svelte";
+  import NoSearchResults from "./no-search-results.svelte";
 
 	const { searching, packagesSearch } = searchStore;
 	// import type { AirtablePost } from '@tea/ui/types';
@@ -75,33 +76,35 @@
 		</header>
 		{#if term}
 			<div class="z-20 bg-black">
-				<header class="text-gray p-4 text-lg">
-					Packages ({$packagesSearch.length})
-				</header>
-				<ul class="flex flex-col gap-2 p-2">
-					{#if $packagesSearch.length > 0}
-						{#each $packagesSearch as pkg}
-							<div class={pkg.state === PackageStates.INSTALLING ? "animate-pulse" : ""}>
-								<PackageResult
-									{pkg}
-									{onClose}
-									onClick={async () => {
-										if (
-											[
-												PackageStates.INSTALLED,
-												PackageStates.INSTALLING,
-												PackageStates.UPDATING
-											].includes(pkg.state)
-										) {
-											return;
-										}
-										packagesStore.installPkg(pkg);
-									}}
-								/>
-							</div>
-						{/each}
-					{/if}
-				</ul>
+				{#if $packagesSearch.length > 0}
+					<header class="text-gray p-4 text-lg">
+						packages ({$packagesSearch.length})
+					</header>
+					<ul class="flex flex-col gap-2 p-2">
+							{#each $packagesSearch as pkg}
+								<div class={pkg.state === PackageStates.INSTALLING ? "animate-pulse" : ""}>
+									<PackageResult
+										{pkg}
+										{onClose}
+										onClick={async () => {
+											if (
+												[
+													PackageStates.INSTALLED,
+													PackageStates.INSTALLING,
+													PackageStates.UPDATING
+												].includes(pkg.state)
+											) {
+												return;
+											}
+											packagesStore.installPkg(pkg);
+										}}
+									/>
+								</div>
+							{/each}
+					</ul>
+				{:else}
+					<NoSearchResults />
+				{/if}
 				<!-- <header class="text-primary p-4 text-lg">
 					Top Article Results ({articles.length})
 				</header>

modules/desktop/src/components/top-bar/top-bar.svelte

@@ -36,6 +36,7 @@
 			onFocus={() => {
 				searchStore.searching.set(true);
 			}}
+			readonly={true}
 		/>
 
 		<kbd

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

@@ -318,7 +318,7 @@ export const withFakeLoader = (
 		const progressLeft = 100 - fakeLoadingProgress;
 		const addProgress = progressLeft * increment;
 		fakeLoadingProgress = fakeLoadingProgress + addProgress;
-		callback(+fakeLoadingProgress.toFixed(2));
+		callback(fakeLoadingProgress);
 	}, ms);
 
 	return fakeTimer;

modules/ui/src/button-icon/button-icon.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <button
-	class="group flex h-[28px] w-[28px] items-center justify-center rounded-sm border border-gray hover:bg-[#e1e1e1]"
+	class="group flex h-[28px] w-[28px] shrink-0 items-center justify-center rounded-sm border border-gray hover:bg-[#e1e1e1]"
 	on:dblclick={preventDoubleClick}
 	on:click
 	title={helpText}

modules/ui/src/progress-circle/progress-circle.svelte

@@ -18,6 +18,12 @@
 			return path;
 		}
 	};
+
+	// Format the percentage expressed as 0..100 to a number with 2 decimal places.
+	// we never want to round 99.999% to 100% because makes the experience bad so we can't just use toFixed(2) immediately
+	const formatPercent = (percent: number) => {
+		return (Math.floor(percent * 100) / 100).toFixed(2);
+	};
 </script>
 
 <div>
@@ -27,7 +33,7 @@
 	</svg>
 	<div>
 		<slot>
-			<span>{value}%</span>
+			<span class="font-mono">{formatPercent(value)}%</span>
 		</slot>
 	</div>
 </div>

modules/ui/src/search-input/search-input.svelte

@@ -15,6 +15,7 @@
 	export let placeholder = "search_";
 
 	export let autofocus = false;
+	export let readonly = false;
 
 	let searchInput: HTMLInputElement;
 
@@ -58,6 +59,7 @@
 		{placeholder}
 		on:keyup={onChange}
 		on:focus={onFocus}
+		{readonly}
 	/>
 </section>