blank screens for installs and updates (#519)

modules/desktop/src/components/package-card/bg-image.svelte

@@ -69,7 +69,6 @@
 	>
 		<!-- dup image: save processing power instead of computing the blur across all the HTML layers -->
 		{#if layout !== "none"}
-			<!-- TODO: TALK TO NEIL -->
 			<aside
 				class="blur-sm {layout} opacity-0 transition-all duration-500"
 				class:opacity-100={loaded}

modules/desktop/src/components/packages/no-installs.svelte

@@ -0,0 +1,14 @@
+<script>
+  import Button from "@tea/ui/button/button.svelte";
+	import { goto } from "$app/navigation";
+  import { SideMenuOptions } from "$libs/types";
+</script>
+
+<div class="flex w-full h-3/4 justify-center items-center flex-col">
+  <div class="text-2xl text-[#e1e1e1] bg-[#252424] px-9 py-3">
+    You don’t have anything installed 
+  </div>
+  <div class="mt-6 h-6 w-40">
+    <Button type="plain" color="blue" onClick={() => goto(`/?tab=${SideMenuOptions.discover}`)}>DISCOVER</Button>
+  </div>
+</div>

modules/desktop/src/components/packages/no-updates.svelte

@@ -0,0 +1,5 @@
+<div class="flex w-full h-3/4 justify-center items-center">
+  <div class="text-2xl text-[#e1e1e1] bg-[#252424] px-9 py-3">
+    You’re all up to date 👍 
+  </div>
+</div>

modules/desktop/src/components/packages/packages.svelte

@@ -8,6 +8,8 @@
 	import { PackageStates, SideMenuOptions } from "$libs/types";
 	import Preloader from "@tea/ui/Preloader/Preloader.svelte";
 	import Package from "./package.svelte";
+	import NoInstalls from "./no-installs.svelte";
+	import NoUpdates from "./no-updates.svelte";
 	import { packagesStore } from "$libs/stores";
 
 	const { packageList: allPackages } = packagesStore;
@@ -92,9 +94,9 @@
 				{/if}
 			{/each}
 		{:else if packageFilter === SideMenuOptions.installed}
-			<div class="flex w-full h-full text-2xl justify-center items-center">
-				open source is a treasure trove, go plunder something
-			</div>
+			<NoInstalls />
+		{:else if packageFilter === SideMenuOptions.installed_updates_available}
+			<NoUpdates />
 		{:else}
 			{#each Array(9) as _}
 				<section class="card p-1 h-{238}">

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

@@ -10,12 +10,6 @@
 	export let activeOption: SideMenuOptions;
 
 	$: needsUpdateCount = $packageList.filter((p) => p.state === PackageStates.NEEDS_UPDATE).length;
-	$: hasInstalled = $packageList.some((p) => [
-		PackageStates.INSTALLED,
-		PackageStates.NEEDS_UPDATE,
-		PackageStates.UPDATING,
-		PackageStates.INSTALLING,
-	].includes(p.state));
 </script>
 
 <aside class="border-gray border border-t-0 border-b-0 border-l-0 p-2">
@@ -34,26 +28,24 @@
 			on:click={() => goto(`/?tab=${SideMenuOptions.all}`)}
 		/>
 		<hr />
-		{#if hasInstalled}
-			<MenuButton
-				label="installed"
-				icon="tea-checkmark"
-				active={activeOption === SideMenuOptions.installed}
-				on:click={() => goto(`/?tab=${SideMenuOptions.installed}`)}
-			/>
-			<hr />
-		{/if}
-		{#if needsUpdateCount}
-			<MenuButton
-				label={$t("tags.installed_updates_available").toLowerCase()}
-				icon="update"
-				active={activeOption === SideMenuOptions.installed_updates_available}
-				on:click={() => goto(`/?tab=${SideMenuOptions.installed_updates_available}`)}
-			>
+		<MenuButton
+			label="installed"
+			icon="tea-checkmark"
+			active={activeOption === SideMenuOptions.installed}
+			on:click={() => goto(`/?tab=${SideMenuOptions.installed}`)}
+		/>
+		<hr />
+		<MenuButton
+			label={$t("tags.installed_updates_available").toLowerCase()}
+			icon="update"
+			active={activeOption === SideMenuOptions.installed_updates_available}
+			on:click={() => goto(`/?tab=${SideMenuOptions.installed_updates_available}`)}
+		>
+			{#if needsUpdateCount > 0}
 				<div class="update-count-badge">{needsUpdateCount}</div>
-			</MenuButton>
-			<hr />
-		{/if}
+			{/if}
+		</MenuButton>
+		<hr />
 		<MenuButton
 			label={$t("tags.new_packages").toLowerCase()}
 			icon="birthday-cake"