ui adjustments (#320)

* #319 improve sorting

* #309 adjustments to title bar

* #309 fadeaway adjustments

* #309 font adjustments

* #309 update tea package update

* fix search font

---------

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

modules/desktop/electron/electron.ts

@@ -53,7 +53,7 @@ function createWindow() {
 		autoHideMenuBar: true,
 		trafficLightPosition: {
 			x: 14,
-			y: 13
+			y: 15
 		},
 		minHeight: 600,
 		minWidth: 1000,

modules/desktop/src/app.css

@@ -3,13 +3,13 @@
 @tailwind utilities;
 
 @font-face {
-	font-family: "pp-neue-machina";
-	src: url("/fonts/PPNeueMachina-InktrapLight.woff");
+	font-family: "mona-sans";
+	src: url("/fonts/mona-sans-bold.woff2");
 }
 
 @font-face {
-	font-family: "sono";
-	src: url("/fonts/Sono-Light.woff2");
+	font-family: "inter";
+	src: url("/fonts/inter-regular.woff2");
 }
 
 html {
@@ -26,18 +26,16 @@ html {
 }
 
 .text-primary,
-header,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
-button,
 .click-copy {
-	font-family: "pp-neue-machina" !important;
+	font-family: "mona-sans";
 }
 
 .pk-version {
-	font-family: "sono";
+	font-family: "inter";
 }

modules/desktop/src/components/footer-links/footer-links.svelte

@@ -4,7 +4,7 @@
 	import * as pub from '$env/static/public';
 </script>
 
-<footer class="font-machina relative h-auto w-full bg-black">
+<footer class="relative h-auto w-full bg-black">
 	<section class="p-4 px-16 py-16">
 		<h3 class="text-primary mb-5 text-2xl">{$t("footer.quick-links-title").toUpperCase()}</h3>
 		<menu class="flex gap-4">
@@ -70,23 +70,6 @@
 
 <style>
 	h3 {
-		font-family: 'pp-neue-machina', sans-serif;
 		color: #00ffd0;
 	}
-
-	p,
-	.nav-item {
-		font-family: 'sono', sans-serif;
-		color: #ffffff;
-	}
-
-	.list-group-item {
-		font-family: 'pp-neue-machina', sans-serif;
-		text-transform: uppercase;
-		transition: 0.1s ease-in;
-	}
-
-	.list-group-item:hover {
-		padding-left: 1vw;
-	}
 </style>

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import '$appcss';
+	import { t } from "$libs/translations";
+	import { notificationStore } from '$libs/stores';
+	import Notification from "@tea/ui/notification/notification.svelte";
+</script>
+
+<div class="w-full flex flex-col gap-1 py-2 pl-2 pr-4">
+  {#each $notificationStore as notification}
+    <Notification
+      notification={{
+        ...notification,
+        // TODO this looks nasty but cleanup later.
+        message: notification.i18n_key ? $t(notification.i18n_key, notification.params) : notification.message
+      }}
+        onClose={() => {
+        notificationStore.remove(notification.id);
+      }}
+    />
+  {/each}
+</div>

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

@@ -44,7 +44,7 @@
 					<span>{pkg.homepage}</span>
 				</a>
 			{/if}
-			<p class="font-sono mt-4 text-sm">{pkg.desc}</p>
+			<p class="mt-4 text-sm">{pkg.desc}</p>
 			<menu class="h-10 grid grid-cols-2 gap-4 mt-4 text-xs">
 				{#if pkg.state === PackageStates.INSTALLED}
 					<Button type="plain" color="primary">

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

@@ -29,7 +29,7 @@
 </script>
 
 <header class="border-gray text-primary border bg-black p-4">REVIEWS ({reviews.length})</header>
-<section class="font-machina flex flex-row flex-wrap bg-black">
+<section class="flex flex-row flex-wrap bg-black">
 	<div class="border-gray w-1/3 border-0 border-l-2 border-b-2 p-4">
 		{#each col1 as review}
 			<ReviewCard {review} />

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

@@ -40,19 +40,19 @@
 	}
 
 	$: packages = $allPackages
+		.filter(pkgFilters[packageFilter] || pkgFilters.all)
 		.sort((a, b) => {
-			if (sortBy === 'popularity') {
+			if (sortBy === "popularity") {
 				const aPop = +a.dl_count + a.installs;
 				const bPop = +b.dl_count + b.installs;
-				return sortDirection === 'asc' ? aPop - bPop : bPop - aPop;
+				return sortDirection === "asc" ? aPop - bPop : bPop - aPop;
 			} else {
 				// most recent
 				const aDate = new Date(a.last_modified);
 				const bDate = new Date(b.last_modified);
-				return sortDirection === 'asc' ? +aDate - +bDate : +bDate - +aDate;
+				return sortDirection === "asc" ? +aDate - +bDate : +bDate - +aDate;
 			}
-		})
-		.filter(pkgFilters[packageFilter] || pkgFilters.all);
+		});
 </script>
 
 <div>

modules/desktop/src/components/page-header/page-header.svelte

@@ -4,7 +4,7 @@
 	export { clazz as class };
 </script>
 
-<figure class={`font-machina relative mb-8 h-32 w-full uppercase ${clazz}`}>
+<figure class={`relative mb-8 h-32 w-full uppercase ${clazz}`}>
 	{#if coverUrl}
 		<img src={coverUrl} class="absolute z-0 h-32 w-full object-cover" alt="cover" />
 	{/if}

modules/desktop/src/components/search-packages/sorting-buttons.svelte

@@ -28,7 +28,7 @@
 	};
 </script>
 
-<section class="sorting-container font-machina bg-black text-gray">
+<section class="sorting-container bg-black text-gray">
 	<div class="dropdown">
 		<div class="dropdown-title">{$t("sorting.label")}</div>
 		<ul class="dropdown-content column flex">

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

@@ -61,7 +61,7 @@
 <style>
 	aside {
 		position: fixed;
-		top: 40px;
+		top: 48px;
 		left: 0px;
 		height: calc(100% - 40px);
 		width: 190px;

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

@@ -21,9 +21,9 @@
 	});
 </script>
 
-<header class="border-gray flex w-full border border-l-0 border-r-0 h-10" style="-webkit-app-region: drag">
+<header class="border-gray flex items-center w-full border border-l-0 border-r-0 h-12" style="-webkit-app-region: drag">
 	<div class="w-16 mr-2">
-		<!-- just spacing for the close/expand/ buttons in title bar
+		<!-- just spacing for the traffice-lights buttons in title bar
 			todo: handle this different when on linux probably move to right
 		-->
 	</div>
@@ -33,9 +33,9 @@
 			<button on:click={navStore.next} class={$nextPath ? 'active' : ''}>&#8594</button>
 		</ul>
 	{/if}
-	<div class="p-1 flex-grow h-8">
+	<div class="px-2 flex-grow">
 		<SearchInput
-			class="w-full border border-gray rounded-sm"
+			class="w-full border border-gray rounded-sm h-9"
 			size="small"
 			placeholder={`${$t("store-search-placeholder")} rm this v${pub.PUBLIC_VERSION}`}
 			{onSearch}
@@ -49,6 +49,11 @@
 	@tailwind components;
 	@tailwind utilities;
 
+	header {
+		background: rgba(26,26,26,0.9);
+		backdrop-filter: blur(2px);
+	}
+
 	ul button {
 		pointer-events: none;
 	}

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

@@ -7,6 +7,18 @@ import { getPackage, getPackageBottles } from "@native";
 
 import { getReadme, getContributors, getRepoAsPackage } from "$libs/github";
 import semverCompare from "semver/functions/compare";
+import { notificationStore } from "../stores";
+import { openTerminal } from "@native";
+import { NotificationType } from "@tea/ui/types";
+
+const installTea = async () => {
+	console.log("installing tea...");
+	try {
+		openTerminal(`sh <(curl https://tea.xyz)`);
+	} catch (error) {
+		console.log("install failed");
+	}
+};
 
 export default function initPackagesStore() {
 	let initialized = false;
@@ -22,8 +34,11 @@ export default function initPackagesStore() {
 				keys: ["name", "full_name", "desc", "categories"]
 			});
 
+			const teaCliName = "tea.xyz";
 			pkgs.forEach((pkg) => {
-				if (pkg.state === PackageStates.INSTALLED) {
+				if (pkg.full_name === teaCliName) {
+					syncTeaCliPackage(pkg);
+				} else if (pkg.state === PackageStates.INSTALLED) {
 					syncPackageBottlesAndState(pkg.full_name);
 				}
 			});
@@ -73,34 +88,67 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
 		updatePackage(guiPkg.full_name!, updatedPackage);
 	};
 
-	const syncPackageBottlesAndState = async (pkgName: string) => {
+	const syncPackageBottlesAndState = async (pkgName: string): Promise<GUIPackage | void> => {
 		const bottles = await getPackageBottles(pkgName);
+		return new Promise((resolve) => {
+			packages.update((pkgs) => {
+				const i = pkgs.findIndex((pkg) => pkg.full_name === pkgName);
+				if (i >= 0) {
+					const pkg = pkgs[i];
 
-		packages.update((pkgs) => {
-			const i = pkgs.findIndex((pkg) => pkg.full_name === pkgName);
-			if (i >= 0) {
-				const pkg = pkgs[i];
+					const availableVersionsRaw = bottles
+						.map(({ version }) => version)
+						.sort((a, b) => semverCompare(b, a));
 
-				const availableVersions = bottles
-					.map(({ version }) => version)
-					.sort((a, b) => semverCompare(b, a));
+					const availableVersions = new Set(availableVersionsRaw);
 
-				const installedVersions =
-					pkg?.installed_versions?.sort((a, b) => semverCompare(b, a)) || [];
+					const installedVersions =
+						pkg?.installed_versions?.sort((a, b) => semverCompare(b, a)) || [];
 
-				pkgs[i] = {
-					...pkg,
-					available_versions: availableVersions,
-					state:
-						availableVersions[0] === installedVersions[0]
-							? PackageStates.INSTALLED
-							: PackageStates.NEEDS_UPDATE
-				};
-			}
-			return pkgs;
+					const it = availableVersions.values();
+					const latestVersion = it.next().value;
+
+					pkgs[i] = {
+						...pkg,
+						available_versions: Array.from(availableVersions),
+						state:
+							latestVersion === installedVersions[0]
+								? PackageStates.INSTALLED
+								: PackageStates.NEEDS_UPDATE
+					};
+
+					resolve(pkgs[i]);
+				} else {
+					resolve();
+				}
+				return pkgs;
+			});
 		});
 	};
 
+	const syncTeaCliPackage = async (cliPkg: GUIPackage) => {
+		const updatedPkg = await syncPackageBottlesAndState(cliPkg.full_name);
+		if (updatedPkg && updatedPkg.state === PackageStates.INSTALLED) return;
+
+		if (!updatedPkg || updatedPkg.state === PackageStates.AVAILABLE) {
+			notificationStore.add({
+				message: "install cli",
+				i18n_key: "package.install-tea-cli",
+				type: NotificationType.ACTION_BANNER,
+				callback: installTea,
+				callback_label: "INSTALL"
+			});
+		} else if (updatedPkg.state === PackageStates.NEEDS_UPDATE) {
+			notificationStore.add({
+				message: "install cli",
+				i18n_key: "package.update-tea-cli",
+				type: NotificationType.ACTION_BANNER,
+				callback: installTea,
+				callback_label: "UPDATE"
+			});
+		}
+	};
+
 	return {
 		packages,
 		subscribe: packages.subscribe,

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

@@ -1,19 +1,14 @@
 <script lang="ts">
 	import '$appcss';
 	import { goto } from '$app/navigation';
-	import { t } from "$libs/translations";
 	import { navigating } from '$app/stores';
 	import { afterNavigate } from '$app/navigation';
 	import TopBar from '$components/top-bar/top-bar.svelte';
 	import SideBar from '$components/side-bar/side-bar.svelte';
-	import { navStore, notificationStore } from '$libs/stores';
+	import { navStore } from '$libs/stores';
 	import { listenToChannel } from "@native";
 
-	import Notification from "@tea/ui/notification/notification.svelte";
-
 	import SearchPopupResults from '$components/search-popup-results/search-popup-results.svelte';
-
-  import TeaUpdate from '$components/tea-update/tea-update.svelte';
 	import { getProtocolPath } from '@native';
 
   import { onMount } from 'svelte';
@@ -45,24 +40,9 @@
 	});
 </script>
 
-<div id="main-layout" class={`${$sideNavOpen ? "w-3/4" : "w-full"} transition-all`}>
+<div id="main-layout" class={`${$sideNavOpen ? "w-3/4" : "w-full"} transition-all font-inter`}>
 	<TopBar />
-	{#each $notificationStore as notification}
-		<Notification
-			notification={{
-				...notification,
-				// TODO this looks nasty but cleanup later.
-				message: notification.i18n_key ? $t(notification.i18n_key, notification.params) : notification.message
-			}}
-				onClose={() => {
-				notificationStore.remove(notification.id);
-			}}
-		/>
-	{/each}
 	<section class="relative pt-4" bind:this={view}>
-		<div class="content">
-			<TeaUpdate />
-		</div>
 		<div class="content p-2">
 			<slot/>
 		</div>
@@ -80,7 +60,7 @@
 		overflow: hidden;
 	}
 	section {
-		height: calc(100vh - 42px);
+		height: calc(100vh - 50px);
 		overflow-y: scroll;
 		box-sizing: border-box;
 	}

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

@@ -6,6 +6,7 @@
 	import { SideMenuOptions } 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';
 
 	const { sideNavOpen } = navStore; // right side not left
 
@@ -19,30 +20,34 @@
 	<Packages packageFilter={sideMenuOption} {sortBy} {sortDirection}/>
 </div>
 <SideMenu bind:activeOption={sideMenuOption}/>
-<header class={`transition-all px-2 flex justify-between items-center align-middle ${$sideNavOpen ? "min": ""} ${$notificationStore.length ? "lower": ""}`}>
-	<h1 class="text-primary mt-4 text-2xl font-bold">{$t(`side-menu-title.${sideMenuOption}`)}</h1>
-	<section class="border-gray mt-4 mr-4 h-10 w-48 border rounded-sm">
-		<SortingButtons onSort={(prop, dir) => {
-			sortBy = prop;
-			sortDirection = dir;
-		}} />
-	</section>
+<header class={`transition-all px-2 flex flex-col ${$sideNavOpen ? "min": ""}`}>
+	<NotificationBar />
+	<div class="flex justify-between items-center align-middle">
+		<h1 class="text-primary mt-4 pl-3 text-2xl font-bold font-mona">{$t(`side-menu-title.${sideMenuOption}`)}</h1>
+		<section class="border-gray mt-4 mr-4 h-10 w-48 border rounded-sm">
+			<SortingButtons onSort={(prop, dir) => {
+				sortBy = prop;
+				sortDirection = dir;
+			}} />
+		</section>
+	</div>
 </header>
 
 <style>
 	#package-container {
-		padding-top: 36px;
+		padding-top: 50px;
 		width: calc(100% - 200px);
 		margin-left: 200px;
 	}
 
 	header {
 		position: fixed;
-		top: 40px;
+		top: 48px;
 		left: 190px;
-		height: 50px;
+		height: 150px;
 		width: calc(100% - 190px);
-		background-image: linear-gradient(black, rgba(0,0,0,0.6), rgba(0,0,0,0));
+		background-image: linear-gradient(rgba(26,26,26,1), rgba(26,26,26,0));
+		padding-bottom: 80px;
 	}
 
 	header.lower {

modules/desktop/src/routes/packages/[slug]/+page.svelte

@@ -62,7 +62,7 @@
 </script>
 
 {#if pkg}
-	<div>
+	<div class="bg-black">
 		<section>
 			<PackageBanner {pkg} />
 		</section>

modules/ui/src/app.css

@@ -5,11 +5,11 @@
 @tailwind utilities;
 
 @font-face {
-	font-family: "pp-neue-machina";
-	src: url("../static/fonts/PPNeueMachina-InktrapLight.woff");
+	font-family: "mona-sans";
+	src: url("/fonts/mona-sans-bold.woff2");
 }
 
 @font-face {
-	font-family: "sono";
-	src: url("../static/fonts/Sono-Light.woff2");
+	font-family: "inter";
+	src: url("/fonts/inter-regular.woff2");
 }

modules/ui/src/article-card/article-card.svelte

@@ -19,7 +19,7 @@
 		<img class="h-24 w-full object-cover" src={content.img_url} alt={content.title} />
 	</figure>
 	<article class="p-4">
-		<p class="font-sono text-xs line-clamp-3">{content.copy}</p>
+		<p class="text-xs line-clamp-3">{content.copy}</p>
 		{#if content.link}
 			<a href={content.link || "#"}>
 				<button class="mt-2 text-primary">{content.cta_label}</button>

modules/ui/src/bottles/bottles.svelte

@@ -15,7 +15,7 @@
 			{versions.length} version{versions.length === 1 ? "" : "s"} bottled
 		</h4>
 	</div>
-	<table class="w-full table-auto border border-gray font-sono">
+	<table class="w-full table-auto border border-gray">
 		<thead>
 			<tr>
 				<th class="border border-gray px-2 py-4">version</th>

modules/ui/src/button/button.svelte

@@ -15,7 +15,7 @@
 
 <button
 	type="button"
-	class={`w-full p-2 font-machina text-gray ${clazz} ${active ? "active" : ""} ${type} ${color} ${
+	class={`w-full p-2 text-gray ${clazz} ${active ? "active" : ""} ${type} ${color} ${
 		loading ? "animate-pulse" : ""
 	}`}
 	on:click={() => onClick && onClick()}

modules/ui/src/mini-package-card/mini-package-card.svelte

@@ -13,7 +13,7 @@
 	};
 </script>
 
-<section class="box-content flex h-24 w-full border border-gray font-sono">
+<section class="box-content flex h-24 w-full border border-gray">
 	<figure class="relative w-24">
 		<ImgLoader
 			class="pkg-image object-contain"
@@ -41,10 +41,10 @@
 		</div>
 		{#if link}
 			<a href={link}>
-				<button class="h-6 w-full font-machina text-xs">{ctaLabel}</button>
+				<button class="h-6 w-full text-xs">{ctaLabel}</button>
 			</a>
 		{:else}
-			<button class="h-6 w-full font-machina text-xs" on:click={onClickCTA}>{ctaLabel}</button>
+			<button class="h-6 w-full text-xs" on:click={onClickCTA}>{ctaLabel}</button>
 		{/if}
 	</footer>
 </section>

modules/ui/src/notification/notification.svelte

@@ -9,7 +9,7 @@
 	export let onClose: () => void;
 </script>
 
-<div class=" flex w-full items-center justify-between bg-accent px-4 py-2">
+<div class=" flex w-full items-center justify-between rounded-md bg-accent px-4 py-2">
 	<div class="text-white">{notification.message}</div>
 	<div class="flex items-center gap-4">
 		{#if notification.callback}

modules/ui/src/package-card/package-card.svelte

@@ -21,7 +21,7 @@
 	<a href={link}>
 		<figure class="relative">
 			<ImgLoader
-				class="pkg-image object-cover font-sono"
+				class="pkg-image object-cover"
 				src={!pkg.thumb_image_url.includes("https://tea.xyz")
 					? "https://tea.xyz/Images/package-thumb-nolabel4.jpg"
 					: pkg.thumb_image_url}
@@ -29,7 +29,7 @@
 			/>
 		</figure>
 		<article class="card-thumb-label">
-			<h3 class="text-bold text-xl font-bold text-white">{pkg.name}</h3>
+			<h3 class="text-bold font-mona text-xl font-bold text-white">{pkg.name}</h3>
 			{#if pkg.maintainer}
 				<h4 class="text-sm font-light">&#x2022;&nbsp;{pkg.maintainer}</h4>
 			{/if}
@@ -49,7 +49,7 @@
 			</p>
 		</div>
 		<Button
-			class="h-8 w-1/2 border border-gray p-2 font-machina text-xs"
+			class="h-8 w-1/2 border border-gray p-2 text-xs"
 			onClick={onClickCTA}
 			type={ctaType}
 			color={ctaColor}

modules/ui/src/package-snippets/package-snippet.svelte

@@ -35,10 +35,10 @@
 		<h3>{snippet.user}/{snippet.files[0].name}</h3>
 		<date class="text-xs">{snippet.created_at}</date>
 	</article>
-	<p class="font-machina text-xs text-primary">{snippet.files.length} file/s</p>
-	<p class="font-machina text-xs text-primary">{snippet.forks.length} forks</p>
-	<p class="font-machina text-xs text-primary">{snippet.comments.length} comments</p>
-	<p class="font-machina text-xs text-primary">{snippet.stars} stars</p>
+	<p class="text-xs text-primary">{snippet.files.length} file/s</p>
+	<p class="text-xs text-primary">{snippet.forks.length} forks</p>
+	<p class="text-xs text-primary">{snippet.comments.length} comments</p>
+	<p class="text-xs text-primary">{snippet.stars} stars</p>
 </header>
 {#if active}
 	<section class="mt-4">

modules/ui/src/panel-header/panel-header.svelte

@@ -6,5 +6,5 @@
 
 <header class="flex items-center justify-between border border-gray bg-black p-4 text-primary">
 	<span class="uppercase">{title}</span>
-	<a href={ctaLink} class="font-sono text-sm underline">{ctaLabel}</a>
+	<a href={ctaLink} class="text-sm underline">{ctaLabel}</a>
 </header>

modules/ui/src/posts/posts.svelte

@@ -23,7 +23,7 @@
 						src={article.thumb_image_url}
 						alt={article.title}
 					/>
-					<section class="flex-grow p-4 font-sono">
+					<section class="flex-grow p-4">
 						<ul class="mb-4 flex">
 							{#each article.tags as tag}
 								<li

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

@@ -48,7 +48,6 @@
 	}
 
 	section input {
-		font-family: "pp-neue-machina", sans-serif;
 		color: #00ffd0;
 		margin-bottom: -5px;
 		min-width: 60%;

modules/ui/tailwind.config.cjs

@@ -25,14 +25,14 @@ module.exports = {
 		},
 		extend: {
 			fontFamily: {
-				sono: ["sono", "sans-serif"],
-				machina: ["pp-neue-machina", "sans-serif"]
+				inter: ["inter", "sans-serif"],
+				mona: ["mona-sans", "sans-serif"]
 			},
 			typography: {
 				excerpt: {
 					css: {
 						p: {
-							fontFamily: "font-machina",
+							fontFamily: "font-inter",
 							fontSize: "font-2xl"
 						}
 					}