New style for update badge (#463)

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

@@ -4,8 +4,6 @@
 	export let label: string;
 
 	export let active = false;
-
-	export let count = 0;
 </script>
 
 <button
@@ -16,10 +14,8 @@
 	<i class="icon-{icon} mt-1" />
 	<div class="text-sm font-thin">
 		{label}
-		{#if count > 0}
-			<span class="rounded-sm text-right">{count}</span>
-		{/if}
 	</div>
+	<slot />
 </button>
 
 <style>
@@ -27,14 +23,9 @@
 		box-sizing: border-box;
 		height: 37px;
 	}
+
 	button.active {
 		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

@@ -1,69 +1,86 @@
 <script lang="ts">
-	import '$appcss';
-	import { PackageStates, SideMenuOptions } from '$libs/types';
-	import { packagesStore } from '$libs/stores';
-  import MenuButton from './menu-button.svelte';
-	import { t } from '$libs/translations'; 
-  import { goto } from '$app/navigation';
-  const { packageList } = packagesStore;
+	import "$appcss";
+	import { PackageStates, SideMenuOptions } from "$libs/types";
+	import { packagesStore } from "$libs/stores";
+	import MenuButton from "./menu-button.svelte";
+	import { t } from "$libs/translations";
+	import { goto } from "$app/navigation";
+	const { packageList } = packagesStore;
 
-	export let activeOption:SideMenuOptions;
+	export let activeOption: SideMenuOptions;
 
-  $: needsUpdateCount = $packageList.filter((p) => p.state === PackageStates.NEEDS_UPDATE).length;
+	$: needsUpdateCount = $packageList.filter((p) => p.state === PackageStates.NEEDS_UPDATE).length;
 </script>
 
-<aside class="border border-t-0 border-b-0 border-l-0 border-gray p-2">
-  <ul class="flex flex-col pt-4 gap-1 pl-1">
-    <MenuButton label="Installed" icon="tea-checkmark"
+<aside class="border-gray border border-t-0 border-b-0 border-l-0 p-2">
+	<ul class="flex flex-col gap-1 pt-4 pl-1">
+		<MenuButton
+			label="Installed"
+			icon="tea-checkmark"
 			active={activeOption === SideMenuOptions.installed}
 			on:click={() => goto(`/?tab=${SideMenuOptions.installed}`)}
 		/>
-		<hr/>
+		<hr />
 		{#if needsUpdateCount}
-    	<MenuButton
-				count={needsUpdateCount}
+			<MenuButton
 				label={$t("tags.installed_updates_available")}
 				icon="update"
 				active={activeOption === SideMenuOptions.installed_updates_available}
 				on:click={() => goto(`/?tab=${SideMenuOptions.installed_updates_available}`)}
-			/>
-			<hr/>
+			>
+				<div class="update-count-badge">{needsUpdateCount}</div>
+			</MenuButton>
+			<hr />
 		{/if}
-    <MenuButton label={$t("tags.recently_updated")} icon="back-in-time"
+		<MenuButton
+			label={$t("tags.recently_updated")}
+			icon="back-in-time"
 			active={activeOption === SideMenuOptions.recently_updated}
 			on:click={() => goto(`/?tab=${SideMenuOptions.recently_updated}`)}
 		/>
-		<hr/>
-    <MenuButton label={$t("tags.new_packages")} icon="birthday-cake"
+		<hr />
+		<MenuButton
+			label={$t("tags.new_packages")}
+			icon="birthday-cake"
 			active={activeOption === SideMenuOptions.new_packages}
-			on:click={() =>goto(`/?tab=${SideMenuOptions.new_packages}`)}
+			on:click={() => goto(`/?tab=${SideMenuOptions.new_packages}`)}
 		/>
-		<hr/>
-    <MenuButton label={$t("tags.popular")} icon="bar-chart"
+		<hr />
+		<MenuButton
+			label={$t("tags.popular")}
+			icon="bar-chart"
 			active={activeOption === SideMenuOptions.popular}
 			on:click={() => goto(`/?tab=${SideMenuOptions.popular}`)}
 		/>
-		<hr/>
-    <MenuButton label={$t("tags.featured")} icon="lightbulb"
+		<hr />
+		<MenuButton
+			label={$t("tags.featured")}
+			icon="lightbulb"
 			active={activeOption === SideMenuOptions.featured}
 			on:click={() => goto(`/?tab=${SideMenuOptions.featured}`)}
 		/>
-		<hr/>
-    <MenuButton label={$t("tags.essentials")} icon="square"
+		<hr />
+		<MenuButton
+			label={$t("tags.essentials")}
+			icon="square"
 			active={activeOption === SideMenuOptions.essentials}
 			on:click={() => goto(`/?tab=${SideMenuOptions.essentials}`)}
 		/>
-		<hr/>
-    <MenuButton label={$t("tags.starstruck")} icon="star-full"
+		<hr />
+		<MenuButton
+			label={$t("tags.starstruck")}
+			icon="star-full"
 			active={activeOption === SideMenuOptions.starstruck}
 			on:click={() => goto(`/?tab=${SideMenuOptions.starstruck}`)}
 		/>
-		<hr/>
-    <MenuButton label={$t("tags.made_by_tea")} icon="tea-logo-iconasset-1"
+		<hr />
+		<MenuButton
+			label={$t("tags.made_by_tea")}
+			icon="tea-logo-iconasset-1"
 			active={activeOption === SideMenuOptions.made_by_tea}
 			on:click={() => goto(`/?tab=${SideMenuOptions.made_by_tea}`)}
 		/>
-  </ul>
+	</ul>
 </aside>
 
 <style>
@@ -72,11 +89,24 @@
 		left: 0px;
 		top: 0px;
 		height: calc(100vh - 48px); /* win.height - title-bar.height */
-		width: 190px;
+		width: 210px;
 		box-sizing: border-box;
 	}
 
 	hr {
 		border-top: 1px solid #272626;
 	}
+
+	.update-count-badge {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: white;
+		background: #ff4100;
+		font-size: 11px;
+		width: 22px;
+		height: 22px;
+		border-radius: 50%;
+		margin-left: 4px;
+	}
 </style>

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

@@ -89,7 +89,7 @@
 	aside {
 		top: 52px;
 		right: 5px;
-		width: 190px;
+		width: 210px;
 		overflow: clip;
 		height: auto;
 		opacity: 1;

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

@@ -1,19 +1,18 @@
 <script lang="ts">
-	import '$appcss';
+	import "$appcss";
 
-	import { page } from '$app/stores';
-	import { t } from '$libs/translations';
-	import { afterNavigate } from '$app/navigation';
-	import { packagesStore, navStore } from '$libs/stores';
-	import Packages from '$components/packages/packages.svelte';
-	import { PackageStates, SideMenuOptions, type GUIPackage } from '$libs/types';
+	import { page } from "$app/stores";
+	import { t } from "$libs/translations";
+	import { afterNavigate } from "$app/navigation";
+	import { packagesStore, navStore } from "$libs/stores";
+	import Packages from "$components/packages/packages.svelte";
+	import { PackageStates, SideMenuOptions, type GUIPackage } from "$libs/types";
 	// import SortingButtons from "$components/search-packages/sorting-buttons.svelte";
 	import SideMenu from "$components/side-menu/side-menu.svelte";
-	import NotificationBar from '$components/notification-bar/notification-bar.svelte';
-	import WelcomeModal from '$components/welcome-modal/welcome-modal.svelte';
+	import NotificationBar from "$components/notification-bar/notification-bar.svelte";
+	import WelcomeModal from "$components/welcome-modal/welcome-modal.svelte";
 	import Button from "@tea/ui/button/button.svelte";
 
-
 	const log = window.require("electron-log");
 
 	const { packageList } = packagesStore;
@@ -21,7 +20,7 @@
 
 	const url = $page.url;
 
-	let sideMenuOption = url.searchParams.get("tab") as SideMenuOptions || SideMenuOptions.all;
+	let sideMenuOption = (url.searchParams.get("tab") as SideMenuOptions) || SideMenuOptions.all;
 
 	let sortBy: "popularity" | "most recent" = "most recent";
 	let sortDirection: "asc" | "desc" = "desc";
@@ -29,14 +28,14 @@
 	let updating = false;
 
 	let packagesScrollY = 0;
-	$: currentUpdatingPkg = $packageList.find((p) => p.state === PackageStates.UPDATING)
+	$: currentUpdatingPkg = $packageList.find((p) => p.state === PackageStates.UPDATING);
 	$: updatingMessage = `updating ${currentUpdatingPkg?.full_name} (${currentUpdatingPkg?.install_progress_percentage}%)`;
 
 	$: pkgsToUpdate = $packageList.filter((p: GUIPackage) => p.state === PackageStates.NEEDS_UPDATE);
 	async function updateAll() {
 		updating = true;
 		log.info(`updating: ${pkgsToUpdate.length} packages`);
-		for(const pkg of pkgsToUpdate) {
+		for (const pkg of pkgsToUpdate) {
 			try {
 				await packagesStore.installPkg(pkg);
 			} catch (error) {
@@ -50,23 +49,27 @@
 	$: teaPkg = $packageList.find((p) => p.full_name === "tea.xyz");
 	$: needsUpdateCount = pkgsToUpdate.length;
 
-	
 	afterNavigate(({ from, to }) => {
 		if (to?.url?.pathname === "/") {
-			const tab = to.url.searchParams.get("tab")
-			sideMenuOption = !tab ? SideMenuOptions.all : tab as SideMenuOptions;
+			const tab = to.url.searchParams.get("tab");
+			sideMenuOption = !tab ? SideMenuOptions.all : (tab as SideMenuOptions);
 		}
 	});
 </script>
 
 <div id="content" class="flex flex-col">
 	<NotificationBar />
-	<article class="w-full h-auto flex-grow overflow-hidden relative">
+	<article class="relative h-auto w-full flex-grow overflow-hidden">
 		<ul class="px-2">
-			<Packages packageFilter={sideMenuOption} {sortBy} {sortDirection} bind:scrollY={packagesScrollY}/>
+			<Packages
+				packageFilter={sideMenuOption}
+				{sortBy}
+				{sortDirection}
+				bind:scrollY={packagesScrollY}
+			/>
 		</ul>
-		<header class="flex justify-between items-center z-30" class:scrolling={packagesScrollY > 150}>
-			<h1 class="text-primary pl-3 text-2xl font-bold font-mona">
+		<header class="z-30 flex items-center justify-between" class:scrolling={packagesScrollY > 150}>
+			<h1 class="text-primary font-mona pl-3 text-2xl font-bold">
 				{$t(`side-menu-title.${sideMenuOption}`)}
 			</h1>
 			<!-- 
@@ -80,34 +83,35 @@
 			</section>
 			 -->
 			{#if needsUpdateCount && sideMenuOption === SideMenuOptions.installed_updates_available}
-			 <!-- 22px right margin to account for the scrollbar on the package cards -->
-			 <div class="flex items-center text-sm mr-[22px]">
-				{#if currentUpdatingPkg}
-					<p class="text-gray px-2">{updatingMessage}</p>
-				{/if}
-				<Button
-					class="w-48 h-8 text-xs"
-					loading={updating}
-					type="plain"
-					color="secondary"
-					onClick={updateAll}
-				>
+				<!-- 22px right margin to account for the scrollbar on the package cards -->
+				<div class="mr-[22px] flex items-center text-sm">
+					{#if currentUpdatingPkg}
+						<p class="text-gray px-2">{updatingMessage}</p>
+					{/if}
+					<Button
+						class="h-8 w-48 text-xs"
+						loading={updating}
+						type="plain"
+						color="secondary"
+						onClick={updateAll}
+					>
 						{$t(`package.update-all`)} [{needsUpdateCount}]
-				</Button> 
-			 </div>
+					</Button>
+				</div>
 			{/if}
 		</header>
 	</article>
 </div>
 
-<SideMenu bind:activeOption={sideMenuOption}/>
-{#if $showWelcome }
+<SideMenu bind:activeOption={sideMenuOption} />
+{#if $showWelcome}
 	<WelcomeModal />
 {/if}
+
 <style>
 	#content {
-		width: calc(100vw - 191px);
-		margin-left: 185px;
+		width: calc(100vw - 211px);
+		margin-left: 205px;
 		height: calc(100vh - 48px);
 		overflow: hidden;
 	}
@@ -118,7 +122,7 @@
 		left: 1px;
 		height: 72px;
 		width: 100%;
-		background-image: linear-gradient(rgba(26,26,26,1), rgba(26,26,26,0));
+		background-image: linear-gradient(rgba(26, 26, 26, 1), rgba(26, 26, 26, 0));
 		padding-top: 15px;
 	}