#396 updates tab changes: count in side menu, rm notification, progress message (#397)

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

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

@@ -4,11 +4,18 @@
   export let label:string;
 
   export let active = false;
+
+  export let count = 0;
 </script>
 
-<button on:click class={`text-xs w-full flex transition-all rounded-sm hover:bg-opacity-25 border-gray hover:border p-2 gap-2 items-center align-middle text-left hover:bg-gray box-border ${active && 'active'}`}>
+<button on:click class={`text-xs w-full flex transition-all rounded-sm hover:bg-opacity-25 border-gray hover:border px-1 gap-2 items-center align-middle text-left hover:bg-gray box-border ${active && 'active'}`}>
   <i class={`icon-${icon} mt-1`}/>
-  <div class="font-thin text-sm">{label}</div>
+  <div class="font-thin text-sm">
+    {label}
+    {#if count > 0}
+      <span class="text-right rounded-sm">{count}</span>
+    {/if}
+  </div>
 </button>
 
 <style>
@@ -20,4 +27,10 @@
     background: rgba(148, 148, 148, 0.5);
     border: rgba(148, 148, 148, 1) 1px solid;
   }
+  span {
+    color: white;
+    background: #FF4100;
+    padding: 2px;
+    font-size: 10px;
+  }
 </style>

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

@@ -20,7 +20,10 @@
 		/>
 		<hr/>
 		{#if needsUpdateCount}
-    	<MenuButton label={$t("tags.installed_updates_available")} icon="update"
+    	<MenuButton
+				count={needsUpdateCount}
+				label={$t("tags.installed_updates_available")}
+				icon="update"
 				active={activeOption === SideMenuOptions.installed_updates_available}
 				on:click={() => goto(`/?tab=${SideMenuOptions.installed_updates_available}`)}
 			/>

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

@@ -28,6 +28,8 @@
 	let updating = false;
 
 	let packagesScrollY = 0;
+	$: currentUpdatingPkg = $packages.find((p) => p.state === PackageStates.UPDATING)
+	$: updatingMessage = `updating ${currentUpdatingPkg?.full_name} (${currentUpdatingPkg?.install_progress_percentage}%)`;
 
 	$: pkgsToUpdate = $packages.filter((p: GUIPackage) => p.state === PackageStates.NEEDS_UPDATE);
 	async function updateAll() {
@@ -36,9 +38,6 @@
 		for(const pkg of pkgsToUpdate) {
 			try {
 				await packagesStore.installPkg(pkg);
-				notificationStore.add({
-					message: `Package ${pkg.full_name} has been updated to  v${pkg.version}.`,
-				});
 			} catch (error) {
 				log.error(error);
 			}
@@ -76,15 +75,21 @@
 			}} />
 		</section>
 		 -->
-		{#if needsUpdateCount}
+		{#if needsUpdateCount && sideMenuOption === SideMenuOptions.installed_updates_available}
+		 <div class="flex items-center text-sm">
+			{#if currentUpdatingPkg}
+				<p class="text-gray px-2">{updatingMessage}</p>
+			{/if}
 			<Button
-				class={`w-48 h-8 text-xs ${updating && "animate-pulse"}`}
+				class="w-48 h-8 text-xs"
+				loading={updating}
 				type="plain"
 				color="secondary"
 				onClick={updateAll}
 			>
 					{$t(`package.update-all`)} [{needsUpdateCount}]
 			</Button> 
+		 </div>
 		{/if}
 	</div>
 </header>

modules/ui/src/button/button.svelte

@@ -16,9 +16,8 @@
 <div class="button-container">
 	<button
 		type="button"
-		class={`w-full p-2 text-gray ${clazz} ${active ? "active" : ""} ${type} ${color} ${
-			loading ? "animate-pulse" : ""
-		}`}
+		class={`w-full p-2 text-gray ${clazz} ${active ? "active" : ""} ${type} ${color}`}
+		class:animate-puls={loading}
 		on:click={() => onClick && onClick()}
 	>
 		<slot />