From 19e18096158534c79f8d0bbb4f0f1a14969ca3d4 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Fri, 2 Dec 2022 08:01:24 +0800
Subject: [PATCH 01/10] hide package reviews

---
 .../gui/src/routes/packages/[slug]/+page.svelte    | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/gui/src/routes/packages/[slug]/+page.svelte b/packages/gui/src/routes/packages/[slug]/+page.svelte
index 65bd403..9d0e6a2 100644
--- a/packages/gui/src/routes/packages/[slug]/+page.svelte
+++ b/packages/gui/src/routes/packages/[slug]/+page.svelte
@@ -22,11 +22,12 @@
 		if (!pkg && foundPackage) {
 			pkg = foundPackage;
 		}
-		if (!reviews && pkg) {
-			packagesReviewStore.subscribe(pkg.full_name, (updatedReviews) => {
-				reviews = updatedReviews;
-			});
-		}
+		// TODO: uncomment when api is ready
+		// if (!reviews && pkg) {
+		// 	packagesReviewStore.subscribe(pkg.full_name, (updatedReviews) => {
+		// 		reviews = updatedReviews;
+		// 	});
+		// }
 	};
 
 	packages.subscribe(setPkg);
@@ -38,7 +39,10 @@
 	<section>
 		<PackageBanner {pkg} />
 	</section>
+	<!-- 
+	TODO: uncomment when api is ready	
 	<section class="mt-8">
 		<PackageReviews reviews={reviews || []} />
 	</section>
+	-->
 </div>

From 191f2764810a3936bee3d896a2bbd046235f5807 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Fri, 2 Dec 2022 09:52:04 +0800
Subject: [PATCH 02/10] #49 added and use @tea/ui/ImgPreloader

---
 packages/gui/.prettierrc                      |  2 +-
 packages/gui/package.json                     |  3 +-
 .../FeaturedPackages/FeaturedPackage.svelte   | 12 ++++---
 .../FeaturedPackages/FeaturedPackages.svelte  | 31 +++++++++++--------
 .../GettingStarted/GettingStarted.svelte      |  4 +--
 .../gui/src/components/NavBar/NavBar.svelte   |  6 ++--
 .../PackageBanner/PackageBanner.svelte        | 14 ++++-----
 .../PackageReviews/PackageReviews.svelte      | 10 +++---
 .../components/PageHeader/PageHeader.svelte   |  2 +-
 .../components/Placeholder/Placeholder.svelte |  2 +-
 .../SearchPackages/SearchPackages.svelte      | 19 +++++++++---
 .../SearchPackages/SortingButtons.svelte      |  4 +--
 packages/gui/src/libs/api/mock.ts             |  7 +++++
 packages/gui/src/libs/stores.ts               |  2 +-
 .../src/routes/packages/[slug]/+page.svelte   |  8 ++---
 packages/ui/.prettierrc                       |  2 +-
 packages/ui/package.json                      |  3 +-
 .../ui/src/ArticleCard/ArticleCard.svelte     | 12 +++----
 packages/ui/src/Button/Button.svelte          |  2 +-
 .../ui/src/ImgLoader/ImgLoader.stories.ts     | 28 +++++++++++++++++
 packages/ui/src/ImgLoader/ImgLoader.svelte    | 24 ++++++++++++++
 .../ui/src/PackageCard/PackageCard.svelte     | 11 ++++---
 .../ui/src/Preloader/Preloader.stories.ts     | 14 +++++++++
 packages/ui/src/Preloader/Preloader.svelte    |  9 ++++++
 packages/ui/src/ReviewCard/ReviewCard.svelte  |  6 ++--
 .../ui/src/SearchInput/SearchInput.svelte     |  2 +-
 pnpm-lock.yaml                                | 25 +++++++++++----
 27 files changed, 191 insertions(+), 73 deletions(-)
 create mode 100644 packages/ui/src/ImgLoader/ImgLoader.stories.ts
 create mode 100644 packages/ui/src/ImgLoader/ImgLoader.svelte
 create mode 100644 packages/ui/src/Preloader/Preloader.stories.ts
 create mode 100644 packages/ui/src/Preloader/Preloader.svelte

diff --git a/packages/gui/.prettierrc b/packages/gui/.prettierrc
index 1176c1f..ea07536 100644
--- a/packages/gui/.prettierrc
+++ b/packages/gui/.prettierrc
@@ -4,7 +4,7 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/packages/gui/package.json b/packages/gui/package.json
index 77b5824..fd63afa 100644
--- a/packages/gui/package.json
+++ b/packages/gui/package.json
@@ -27,8 +27,9 @@
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.19",
-		"prettier": "^2.6.2",
+		"prettier": "^2.7.1",
 		"prettier-plugin-svelte": "^2.7.0",
+		"prettier-plugin-tailwindcss": "^0.2.0",
 		"svelte": "^3.49.0",
 		"svelte-check": "^2.8.0",
 		"svelte-preprocess": "^4.10.7",
diff --git a/packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte b/packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte
index 31025de..7f9c3ff 100644
--- a/packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte
+++ b/packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte
@@ -1,29 +1,33 @@
 <script lang="ts">
 	import '$appcss';
 	import type { Package } from '@tea/ui/types';
+	import ImgLoader from '@tea/ui/ImgLoader/ImgLoader.svelte';
 	export let pkg: Package;
+	export let width: number;
 </script>
 
-<figure class="w-full h-full relative">
-	<img
+<figure class="featured-pkg relative h-full w-full" style={`width:${width}px`}>
+	<ImgLoader
+		class="featured-img"
 		src={!pkg.thumb_image_url.includes('https://tea.xyz')
 			? 'https://tea.xyz/Images/package-thumb-nolabel4.jpg'
 			: pkg.thumb_image_url}
 		alt={pkg.name}
 	/>
+
 	<article class="card-thumb-label">
 		<i class="icon-tea-logo-iconasset-1">
 			<!-- TODO: replace with icon.svg -->
 		</i>
 		<h3 class="text-3xl">{pkg.name}</h3>
 		{#if pkg.maintainer}
-			<h4 class="text-lg mt-2">&#x2022;&nbsp;{pkg.maintainer}</h4>
+			<h4 class="mt-2 text-lg">&#x2022;&nbsp;{pkg.maintainer}</h4>
 		{/if}
 	</article>
 </figure>
 
 <style>
-	img {
+	.featured-pkg :global(.featured-img) {
 		box-shadow: 0px 0px 12px #0c0c0c !important;
 		width: 100%;
 		height: 100%;
diff --git a/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
index 75d8d20..31f75e5 100644
--- a/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
+++ b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
@@ -3,6 +3,7 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { watchResize } from 'svelte-watch-resize';
 	import type { Package } from '@tea/ui/types';
+	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 	import FeaturedPackage from './FeaturedPackage.svelte';
 	import {
 		featuredPackages as featuredPackagesStore,
@@ -56,9 +57,9 @@
 	});
 </script>
 
-<section class="bg-black w-full h-96" use:watchResize={handleContainerResize}>
+<section class="h-96 w-full bg-black" use:watchResize={handleContainerResize}>
 	<!-- <Placeholder label="FeaturedPackages" /> -->
-	<header class="bg-accent h-12 flex justify-between px-2 items-center">
+	<header class="flex h-12 items-center justify-between bg-accent px-2">
 		<p>FEATURED PACKAGES</p>
 		<ul class="flex gap-2">
 			{#each featuredPackages as pkg, i}
@@ -67,22 +68,26 @@
 						pkgFocus = i;
 						resetLoop();
 					}}
-					class={`border-white border-2 w-4 h-4 rounded-lg bg-purple transition-colors ${
+					class={`bg-purple h-4 w-4 rounded-lg border-2 border-white transition-colors ${
 						i === pkgFocus ? 'bg-purple-900' : ''
 					}`}
 				/>
 			{/each}
 		</ul>
 	</header>
-	<figure class="overflow-hidden absolute bottom-0 top-12 left-0 right-0">
-		<section class="flex absolute top-0 h-full" style={styleFeaturedPackages}>
-			{#each featuredPackages as pkg}
-				<div class="h-full" style={`width:${width}px`}>
-					<a href={`/packages/${pkg.slug}`}>
-						<FeaturedPackage {pkg} />
-					</a>
-				</div>
-			{/each}
-		</section>
+	<figure class="absolute bottom-0 top-12 left-0 right-0 overflow-hidden">
+		{#if featuredPackages.length}
+			<section class="absolute top-0 flex h-full" style={styleFeaturedPackages}>
+				{#each featuredPackages as pkg}
+					<div class="h-full" style={`width:${width}px`}>
+						<a href={`/packages/${pkg.slug}`}>
+							<FeaturedPackage {pkg} {width} />
+						</a>
+					</div>
+				{/each}
+			</section>
+		{:else}
+			<Preloader />
+		{/if}
 	</figure>
 </section>
diff --git a/packages/gui/src/components/GettingStarted/GettingStarted.svelte b/packages/gui/src/components/GettingStarted/GettingStarted.svelte
index ffd55b5..80c7ce6 100644
--- a/packages/gui/src/components/GettingStarted/GettingStarted.svelte
+++ b/packages/gui/src/components/GettingStarted/GettingStarted.svelte
@@ -7,8 +7,8 @@
 	};
 </script>
 
-<header class="text-primary bg-black border border-gray p-4">GETTING STARTED WITH TEA</header>
-<section class="grid bg-black grid-cols-3">
+<header class="border border-gray bg-black p-4 text-primary">GETTING STARTED WITH TEA</header>
+<section class="grid grid-cols-3 bg-black">
 	<div class="border border-gray p-4">
 		<ArticleCard
 			content={{
diff --git a/packages/gui/src/components/NavBar/NavBar.svelte b/packages/gui/src/components/NavBar/NavBar.svelte
index cdfaad1..e45c6f6 100644
--- a/packages/gui/src/components/NavBar/NavBar.svelte
+++ b/packages/gui/src/components/NavBar/NavBar.svelte
@@ -84,15 +84,15 @@
 	{#each routes as route}
 		<li class={route.active ? 'nav_button active' : 'nav_button'}>
 			<a href={route.path}>
-				<Button class="h-16 text-left pl-4 text-white" active={route.active}>{route.label}</Button>
+				<Button class="h-16 pl-4 text-left text-white" active={route.active}>{route.label}</Button>
 			</a>
 		</li>
 	{/each}
 	<li class="nav_button">
-		<Button class="h-16 text-left pl-4 text-white" onClick={openGithub}>VIEW ON GITHUB</Button>
+		<Button class="h-16 pl-4 text-left text-white" onClick={openGithub}>VIEW ON GITHUB</Button>
 	</li>
 
-	<footer class="border border-x-0 border-gray w-full">
+	<footer class="w-full border border-x-0 border-gray">
 		<a href="/profile">
 			<section class="flex">
 				<img width="40" height="40" src="/images/bored-ape.png" alt="profile" />
diff --git a/packages/gui/src/components/PackageBanner/PackageBanner.svelte b/packages/gui/src/components/PackageBanner/PackageBanner.svelte
index e616ce1..689d1ab 100644
--- a/packages/gui/src/components/PackageBanner/PackageBanner.svelte
+++ b/packages/gui/src/components/PackageBanner/PackageBanner.svelte
@@ -17,26 +17,26 @@
 	};
 </script>
 
-<section class="border-gray border bg-black mt-4">
+<section class="mt-4 border border-gray bg-black">
 	<header class="flex p-2">
-		<figure class="w-1/3 grow-1">
+		<figure class="grow-1 w-1/3">
 			<img width={260} src={pkg.thumb_image_url} alt={pkg.full_name} />
 		</figure>
 		<article class="w-2/3 p-4">
-			<h3 class="text-primary text-5xl">{pkg.full_name}</h3>
+			<h3 class="text-5xl text-primary">{pkg.full_name}</h3>
 			{#if pkg.maintainer}
 				<h3>* {pkg.maintainer}</h3>
 			{/if}
 			<div class="mt-4">
 				<StarRating maxRating={5} rating={packageRating} />
 			</div>
-			<p class="font-sono mt-4 text-sm">{pkg.desc}</p>
+			<p class="mt-4 font-sono text-sm">{pkg.desc}</p>
 		</article>
 	</header>
-	<footer class="flex text-white border-gray border-t h-20">
+	<footer class="flex h-20 border-t border-gray text-white">
 		<input class="flex-grow bg-black pl-4" disabled value={copyValue} />
-		<Button class="text-sm border-0 border-l-2 w-16" onClick={onCopy}>{copyButtonText}</Button>
-		<Button class="text-sm border-0 border-l-2 w-56" onClick={() => console.log('cli')}
+		<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
+		<Button class="w-56 border-0 border-l-2 text-sm" onClick={() => console.log('cli')}
 			>OPEN IN TERMINAL</Button
 		>
 	</footer>
diff --git a/packages/gui/src/components/PackageReviews/PackageReviews.svelte b/packages/gui/src/components/PackageReviews/PackageReviews.svelte
index 1d6b7f7..bf765b7 100644
--- a/packages/gui/src/components/PackageReviews/PackageReviews.svelte
+++ b/packages/gui/src/components/PackageReviews/PackageReviews.svelte
@@ -24,21 +24,21 @@
 	// ideally they should work like metro-ui to not have extreme height diff between columns
 </script>
 
-<header class="text-primary bg-black border border-gray p-4">REVIEWS ({reviews.length})</header>
-<section class="flex flex-wrap bg-black flex-row font-machina">
-	<div class="border-gray border-0 border-l-2 p-4 w-1/3">
+<header class="border border-gray bg-black p-4 text-primary">REVIEWS ({reviews.length})</header>
+<section class="flex flex-row flex-wrap bg-black font-machina">
+	<div class="w-1/3 border-0 border-l-2 border-gray p-4">
 		{#each col1 as review}
 			<ReviewCard {review} />
 			<div class="mt-4" />
 		{/each}
 	</div>
-	<div class="border-gray border-0 border-l-2 p-4 w-1/3">
+	<div class="w-1/3 border-0 border-l-2 border-gray p-4">
 		{#each col2 as review}
 			<ReviewCard {review} />
 			<div class="mt-4" />
 		{/each}
 	</div>
-	<div class="border-gray border-0 p-4 border-x-2 w-1/3">
+	<div class="w-1/3 border-0 border-x-2 border-gray p-4">
 		{#each col3 as review}
 			<ReviewCard {review} />
 			<div class="mt-4" />
diff --git a/packages/gui/src/components/PageHeader/PageHeader.svelte b/packages/gui/src/components/PageHeader/PageHeader.svelte
index 0037feb..2146296 100644
--- a/packages/gui/src/components/PageHeader/PageHeader.svelte
+++ b/packages/gui/src/components/PageHeader/PageHeader.svelte
@@ -1,3 +1,3 @@
-<header class="text-primary text-6xl font-machina uppercase mb-8">
+<header class="mb-8 font-machina text-6xl uppercase text-primary">
 	<slot />
 </header>
diff --git a/packages/gui/src/components/Placeholder/Placeholder.svelte b/packages/gui/src/components/Placeholder/Placeholder.svelte
index 5e5e9a7..68381d0 100644
--- a/packages/gui/src/components/Placeholder/Placeholder.svelte
+++ b/packages/gui/src/components/Placeholder/Placeholder.svelte
@@ -2,7 +2,7 @@
 	export let label = '';
 </script>
 
-<section class="p-8 bg-gray">
+<section class="bg-gray p-8">
 	<header>{label}</header>
 	<slot />
 </section>
diff --git a/packages/gui/src/components/SearchPackages/SearchPackages.svelte b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
index 5396224..1307062 100644
--- a/packages/gui/src/components/SearchPackages/SearchPackages.svelte
+++ b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
@@ -6,6 +6,7 @@
 	import type { Package } from '@tea/ui/types';
 	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
 	import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
+	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 	import { onMount } from 'svelte';
 
 	let allPackages: Package[] = [];
@@ -74,8 +75,8 @@
 	};
 </script>
 
-<div class="bg-black border border-gray">
-	<section class="flex justify-between items-center">
+<div class="border border-gray bg-black">
+	<section class="flex items-center justify-between">
 		<div>
 			<SearchInput size="medium" {onSearch} />
 		</div>
@@ -86,8 +87,16 @@
 		</div>
 	</section>
 	<ul class="grid grid-cols-3">
-		{#each packages as pkg}
-			<PackageCard {pkg} link={`/packages/${pkg.slug}`} />
-		{/each}
+		{#if packages.length}
+			{#each packages as pkg}
+				<PackageCard {pkg} link={`/packages/${pkg.slug}`} />
+			{/each}
+		{:else}
+			{#each Array(12) as _}
+				<section class="h-50 border border-gray p-4">
+					<Preloader />
+				</section>
+			{/each}
+		{/if}
 	</ul>
 </div>
diff --git a/packages/gui/src/components/SearchPackages/SortingButtons.svelte b/packages/gui/src/components/SearchPackages/SortingButtons.svelte
index 66acddd..e529e6e 100644
--- a/packages/gui/src/components/SearchPackages/SortingButtons.svelte
+++ b/packages/gui/src/components/SearchPackages/SortingButtons.svelte
@@ -20,10 +20,10 @@
 	};
 </script>
 
-<section class="sorting-container font-machina bg-black text-white">
+<section class="sorting-container bg-black font-machina text-white">
 	<div class="dropdown">
 		<div class="dropdown-title">SORT ORDER</div>
-		<ul class="dropdown-content flex column">
+		<ul class="dropdown-content column flex">
 			{#each sortOptions as option}
 				<li class="flex items-center">
 					<button
diff --git a/packages/gui/src/libs/api/mock.ts b/packages/gui/src/libs/api/mock.ts
index 70482d2..bdccc2a 100644
--- a/packages/gui/src/libs/api/mock.ts
+++ b/packages/gui/src/libs/api/mock.ts
@@ -153,10 +153,12 @@ const packages: Package[] = [
 ];
 
 export async function getPackages(): Promise<Package[]> {
+	await delay(2000);
 	return packages;
 }
 
 export async function getFeaturedPackages(): Promise<Package[]> {
+	await delay(2000);
 	return packages.slice(0, 4);
 }
 
@@ -195,5 +197,10 @@ export async function getPackageReviews(full_name: string): Promise<Review[]> {
 		});
 	}
 
+	await delay(2000);
 	return reviews;
 }
+
+function delay(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
diff --git a/packages/gui/src/libs/stores.ts b/packages/gui/src/libs/stores.ts
index 4869c80..93fdc79 100644
--- a/packages/gui/src/libs/stores.ts
+++ b/packages/gui/src/libs/stores.ts
@@ -28,7 +28,7 @@ interface PackagesReview {
 }
 
 function initPackagesReviewStore() {
-	const { set, update, subscribe } = writable<PackagesReview>({});
+	const { update, subscribe } = writable<PackagesReview>({});
 
 	let packagesReviews: PackagesReview = {};
 
diff --git a/packages/gui/src/routes/packages/[slug]/+page.svelte b/packages/gui/src/routes/packages/[slug]/+page.svelte
index 9d0e6a2..03ff7ab 100644
--- a/packages/gui/src/routes/packages/[slug]/+page.svelte
+++ b/packages/gui/src/routes/packages/[slug]/+page.svelte
@@ -3,19 +3,19 @@
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import { backLink } from '$libs/stores';
 	import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
-	import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
+	// import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
 	backLink.set('/packages');
 
 	/** @type {import('./$types').PageData} */
 	export let data;
 
-	import { packages, featuredPackages, packagesReviewStore } from '$libs/stores';
+	import { packages, featuredPackages } from '$libs/stores';
 
-	import type { Package, Review } from '@tea/ui/types';
+	import type { Package } from '@tea/ui/types';
 
 	let pkg: Package;
 
-	let reviews: Review[];
+	// let reviews: Review[];
 
 	const setPkg = (pkgs: Package[]) => {
 		const foundPackage = pkgs.find(({ slug }) => slug === data?.slug) as Package;
diff --git a/packages/ui/.prettierrc b/packages/ui/.prettierrc
index 1176c1f..ea07536 100644
--- a/packages/ui/.prettierrc
+++ b/packages/ui/.prettierrc
@@ -4,7 +4,7 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2479061..edca0fd 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -38,8 +38,9 @@
 		"eslint-plugin-storybook": "^0.6.7",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.19",
-		"prettier": "^2.6.2",
+		"prettier": "^2.7.1",
 		"prettier-plugin-svelte": "^2.7.0",
+		"prettier-plugin-tailwindcss": "^0.2.0",
 		"storybook": "^7.0.0-alpha.51",
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
diff --git a/packages/ui/src/ArticleCard/ArticleCard.svelte b/packages/ui/src/ArticleCard/ArticleCard.svelte
index 686fb74..7ed9773 100644
--- a/packages/ui/src/ArticleCard/ArticleCard.svelte
+++ b/packages/ui/src/ArticleCard/ArticleCard.svelte
@@ -14,20 +14,20 @@
 </script>
 
 <section class="border border-gray">
-	<header class="bg-accent text-white p-2 uppercase">{content.title}</header>
+	<header class="bg-accent p-2 uppercase text-white">{content.title}</header>
 	<figure class="h-24">
-		<img class="object-cover h-24 w-full" src={content.img_url} alt={content.title} />
+		<img class="h-24 w-full object-cover" src={content.img_url} alt={content.title} />
 	</figure>
 	<article class="p-4">
-		<p class="text-xs font-sono line-clamp-3">{content.copy}</p>
+		<p class="font-sono text-xs line-clamp-3">{content.copy}</p>
 		{#if content.link}
 			<a href={content.link || '#'}>
-				<button class="text-primary mt-2">{content.cta_label}</button>
+				<button class="mt-2 text-primary">{content.cta_label}</button>
 			</a>
 		{:else if onClick}
-			<button on:click={onClick} class="text-primary mt-2">{content.cta_label}</button>
+			<button on:click={onClick} class="mt-2 text-primary">{content.cta_label}</button>
 		{:else}
-			<button disabled class="text-gray mt-2">{content.cta_label}</button>
+			<button disabled class="mt-2 text-gray">{content.cta_label}</button>
 		{/if}
 	</article>
 </section>
diff --git a/packages/ui/src/Button/Button.svelte b/packages/ui/src/Button/Button.svelte
index aabaa4c..0a23370 100644
--- a/packages/ui/src/Button/Button.svelte
+++ b/packages/ui/src/Button/Button.svelte
@@ -10,7 +10,7 @@
 
 <button
 	type="button font-sans"
-	class={`p-2 font-machina text-gray w-full ${clazz} ${active ? 'active' : ''}`}
+	class={`w-full p-2 font-machina text-gray ${clazz} ${active ? 'active' : ''}`}
 	on:click={() => onClick && onClick()}
 >
 	<slot />
diff --git a/packages/ui/src/ImgLoader/ImgLoader.stories.ts b/packages/ui/src/ImgLoader/ImgLoader.stories.ts
new file mode 100644
index 0000000..9186875
--- /dev/null
+++ b/packages/ui/src/ImgLoader/ImgLoader.stories.ts
@@ -0,0 +1,28 @@
+import ImgLoader from './ImgLoader.svelte';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
+
+interface Props {
+	alt: string;
+	src: string;
+	class: string;
+}
+export default {
+	title: 'Example/ImgLoader',
+	component: ImgLoader,
+	tags: ['docsPage'],
+	render: (props: Props) => ({
+		Component: ImgLoader,
+		props
+	}),
+	argTypes: {}
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
+export const Example = {
+	args: {
+		class: 'w-1/2',
+		alt: 'sample',
+		src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/%22_Shot_From_The_Sky%22_Army_Show_1945_Oak_Ridge_%2824971013612%29.jpg/2732px-%22_Shot_From_The_Sky%22_Army_Show_1945_Oak_Ridge_%2824971013612%29.jpg'
+	}
+};
diff --git a/packages/ui/src/ImgLoader/ImgLoader.svelte b/packages/ui/src/ImgLoader/ImgLoader.svelte
new file mode 100644
index 0000000..7fa08a0
--- /dev/null
+++ b/packages/ui/src/ImgLoader/ImgLoader.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import '../app.css';
+	import Preloader from '../Preloader/Preloader.svelte';
+	export let src: string;
+	export let alt = 'loading';
+	export let style = '';
+
+	let clazz = '';
+	export { clazz as class };
+
+	function preloadImage() {
+		return new Promise(function (resolve) {
+			let img = new Image();
+			img.onload = resolve;
+			img.src = src;
+		});
+	}
+</script>
+
+{#await preloadImage()}
+	<Preloader />
+{:then _}
+	<img {style} class={clazz} {src} {alt} />
+{/await}
diff --git a/packages/ui/src/PackageCard/PackageCard.svelte b/packages/ui/src/PackageCard/PackageCard.svelte
index 749d14d..871d5f0 100644
--- a/packages/ui/src/PackageCard/PackageCard.svelte
+++ b/packages/ui/src/PackageCard/PackageCard.svelte
@@ -1,13 +1,15 @@
 <script type="ts">
 	import '../app.css';
 	import type { Package } from '../types';
+	import ImgLoader from '../ImgLoader/ImgLoader.svelte';
 	export let pkg: Package;
 	export let link: string;
 </script>
 
-<section class="p-4 border border-gray">
+<section class="package-card border border-gray p-4">
 	<figure>
-		<img
+		<ImgLoader
+			class="pkg-image"
 			src={!pkg.thumb_image_url.includes('https://tea.xyz')
 				? 'https://tea.xyz/Images/package-thumb-nolabel4.jpg'
 				: pkg.thumb_image_url}
@@ -23,7 +25,7 @@
 			{/if}
 		</article>
 	</figure>
-	<footer class="flex mt-4 justify-between items-center">
+	<footer class="mt-4 flex items-center justify-between">
 		<div>
 			<p>
 				<span class="text-xs">V&NonBreakingSpace;{pkg.version}</span>
@@ -49,9 +51,10 @@
 
 	figure {
 		position: relative;
+		min-height: 150px;
 	}
 
-	img {
+	.package-card :global(.pkg-image) {
 		box-shadow: 0px 0px 12px #0c0c0c !important;
 		width: 100%;
 		height: 100%;
diff --git a/packages/ui/src/Preloader/Preloader.stories.ts b/packages/ui/src/Preloader/Preloader.stories.ts
new file mode 100644
index 0000000..4210454
--- /dev/null
+++ b/packages/ui/src/Preloader/Preloader.stories.ts
@@ -0,0 +1,14 @@
+import Preloader from './Preloader.svelte';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
+export default {
+	title: 'Example/Preloader',
+	component: Preloader,
+	tags: ['docsPage'],
+	render: () => ({
+		Component: Preloader
+	})
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
+export const Example = {};
diff --git a/packages/ui/src/Preloader/Preloader.svelte b/packages/ui/src/Preloader/Preloader.svelte
new file mode 100644
index 0000000..28355b5
--- /dev/null
+++ b/packages/ui/src/Preloader/Preloader.svelte
@@ -0,0 +1,9 @@
+<script type="ts">
+	import '../app.css';
+	// TODO: add types of preloader here
+	// export let type: EnumPreload = 'logo-pulse';
+</script>
+
+<figure class="flex h-full w-full items-center justify-center bg-black bg-opacity-90 py-8">
+	<i class="icon-tea-logo-iconasset-1 animate-pulse text-4xl text-gray" />
+</figure>
diff --git a/packages/ui/src/ReviewCard/ReviewCard.svelte b/packages/ui/src/ReviewCard/ReviewCard.svelte
index b42217a..8218ff1 100644
--- a/packages/ui/src/ReviewCard/ReviewCard.svelte
+++ b/packages/ui/src/ReviewCard/ReviewCard.svelte
@@ -26,10 +26,10 @@
 </script>
 
 <section class="border border-gray p-4">
-	<header class=" text-primary text-lg">{review.title}</header>
-	<div class="flex mt-2 text-xs">
+	<header class=" text-lg text-primary">{review.title}</header>
+	<div class="mt-2 flex text-xs">
 		<i class={`${getStarType()} text-primary`} />
-		<span class="text-gray pl-2">{getStarLabel()}</span>
+		<span class="pl-2 text-gray">{getStarLabel()}</span>
 	</div>
 	<p class="mt-2 text-sm">{review.comment}</p>
 </section>
diff --git a/packages/ui/src/SearchInput/SearchInput.svelte b/packages/ui/src/SearchInput/SearchInput.svelte
index 22eacb0..43b289c 100644
--- a/packages/ui/src/SearchInput/SearchInput.svelte
+++ b/packages/ui/src/SearchInput/SearchInput.svelte
@@ -14,7 +14,7 @@
 	};
 </script>
 
-<section class={`flex py-2 items-center ${size}`}>
+<section class={`flex items-center py-2 ${size}`}>
 	<div class="icon pl-4">
 		<i class="icon-search-icon" />
 	</div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0321477..da6a022 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,8 +25,9 @@ importers:
       lodash: ^4.17.21
       lorem-ipsum: ^2.0.8
       postcss: ^8.4.19
-      prettier: ^2.6.2
+      prettier: ^2.7.1
       prettier-plugin-svelte: ^2.7.0
+      prettier-plugin-tailwindcss: ^0.2.0
       svelte: ^3.49.0
       svelte-check: ^2.8.0
       svelte-preprocess: ^4.10.7
@@ -59,6 +60,7 @@ importers:
       postcss: 8.4.19
       prettier: 2.7.1
       prettier-plugin-svelte: 2.8.0_nryolsexf6k3znhuh4uzpugsem
+      prettier-plugin-tailwindcss: 0.2.0_prettier@2.7.1
       svelte: 3.53.1
       svelte-check: 2.9.2_mocwzvuqzrhb37u7s4hjvvzl3i
       svelte-preprocess: 4.10.7_mvbmsfnr3ibpjsbee6imjcb33m
@@ -89,8 +91,9 @@ importers:
       eslint-plugin-storybook: ^0.6.7
       eslint-plugin-svelte3: ^4.0.0
       postcss: ^8.4.19
-      prettier: ^2.6.2
+      prettier: ^2.7.1
       prettier-plugin-svelte: ^2.7.0
+      prettier-plugin-tailwindcss: ^0.2.0
       storybook: ^7.0.0-alpha.51
       svelte: ^3.44.0
       svelte-check: ^2.7.1
@@ -122,6 +125,7 @@ importers:
       postcss: 8.4.19
       prettier: 2.7.1
       prettier-plugin-svelte: 2.8.0_nryolsexf6k3znhuh4uzpugsem
+      prettier-plugin-tailwindcss: 0.2.0_prettier@2.7.1
       storybook: 7.0.0-alpha.51_typescript@4.9.3
       svelte: 3.53.1
       svelte-check: 2.9.2_mocwzvuqzrhb37u7s4hjvvzl3i
@@ -1943,7 +1947,7 @@ packages:
       '@storybook/components': 7.0.0-alpha.51
       '@storybook/csf-plugin': 7.0.0-alpha.51
       '@storybook/csf-tools': 7.0.0-alpha.51
-      '@storybook/mdx2-csf': 0.1.0-next.6
+      '@storybook/mdx2-csf': 0.1.0-next.7
       '@storybook/node-logger': 7.0.0-alpha.51
       '@storybook/postinstall': 7.0.0-alpha.51
       '@storybook/preview-web': 7.0.0-alpha.51
@@ -2357,7 +2361,7 @@ packages:
       '@storybook/client-api': 7.0.0-alpha.51
       '@storybook/client-logger': 7.0.0-alpha.51
       '@storybook/core-common': 7.0.0-alpha.51_typescript@4.9.3
-      '@storybook/mdx2-csf': 0.1.0-next.6
+      '@storybook/mdx2-csf': 0.1.0-next.7
       '@storybook/node-logger': 7.0.0-alpha.51
       '@storybook/preview-web': 7.0.0-alpha.51
       '@storybook/source-loader': 7.0.0-alpha.51
@@ -2886,8 +2890,8 @@ packages:
     resolution: {integrity: sha512-SgjcpweoAWnKvbZ1uINCGcSU1BtNJP2xR0x9obNw+qp6pi0OsOo1iA1DTgB0gJM0vc3BgrKgCMlJ76v/wlRB+Q==}
     dev: true
 
-  /@storybook/mdx2-csf/0.1.0-next.6:
-    resolution: {integrity: sha512-FDBPTDHG9BcI27Zp5kwkqjsv2A3s8aUahtKeHOsmTicOBS8uWqUZ3jmL7vg6N7SpiUUBAft9/vTQfttNLeHO7w==}
+  /@storybook/mdx2-csf/0.1.0-next.7:
+    resolution: {integrity: sha512-ahwV2A4aS/D79WWum8fmrFhhbC28/f4XlEKtNG1s0EkCVwCSU17bthEBRY5/Y3IBR5jfeN/oApizNQMLh7mqAA==}
     dependencies:
       loader-utils: 2.0.4
     dev: true
@@ -8496,6 +8500,15 @@ packages:
       svelte: 3.53.1
     dev: true
 
+  /prettier-plugin-tailwindcss/0.2.0_prettier@2.7.1:
+    resolution: {integrity: sha512-Ruqig/mdWCSpqdq9WK44nrmqM4BFWTzBPhPGwC5NK3coV9eZntEQPB84MGZbjAg0XQU02jVRHXNRPREBzxvM+A==}
+    engines: {node: '>=12.17.0'}
+    peerDependencies:
+      prettier: '>=2.2.0'
+    dependencies:
+      prettier: 2.7.1
+    dev: true
+
   /prettier/2.7.1:
     resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==}
     engines: {node: '>=10.13.0'}

From b267706f5cd961eeaa3372fc45afc9770b6e6257 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Fri, 2 Dec 2022 15:01:41 +0800
Subject: [PATCH 03/10] #55 install state and install on click

---
 packages/gui/src-tauri/Cargo.lock             | 22 ++++++
 packages/gui/src-tauri/Cargo.toml             |  2 +-
 .../gui/src-tauri/src/handlers/packages.rs    |  1 +
 packages/gui/src-tauri/tauri.conf.json        | 29 ++++++-
 .../SearchPackages/SearchPackages.svelte      | 43 +++++++++--
 packages/gui/src/libs/api/mock.ts             | 16 +++-
 packages/gui/src/libs/api/tauri.ts            | 71 ++++++++++++++++-
 packages/gui/src/libs/stores.ts               |  4 +-
 packages/gui/src/libs/types.ts                | 14 ++++
 .../ui/src/PackageCard/PackageCard.svelte     | 77 ++++++++-----------
 10 files changed, 212 insertions(+), 67 deletions(-)

diff --git a/packages/gui/src-tauri/Cargo.lock b/packages/gui/src-tauri/Cargo.lock
index 084781c..f276b59 100644
--- a/packages/gui/src-tauri/Cargo.lock
+++ b/packages/gui/src-tauri/Cargo.lock
@@ -1622,6 +1622,16 @@ dependencies = [
  "vcpkg",
 ]
 
+[[package]]
+name = "os_pipe"
+version = "1.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c6a252f1f8c11e84b3ab59d7a488e48e4478a93937e027076638c49536204639"
+dependencies = [
+ "libc",
+ "windows-sys 0.42.0",
+]
+
 [[package]]
 name = "overload"
 version = "0.1.1"
@@ -2339,6 +2349,16 @@ dependencies = [
  "lazy_static",
 ]
 
+[[package]]
+name = "shared_child"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b0d94659ad3c2137fef23ae75b03d5241d633f8acded53d672decfa0e6e0caef"
+dependencies = [
+ "libc",
+ "winapi",
+]
+
 [[package]]
 name = "siphasher"
 version = "0.3.10"
@@ -2552,6 +2572,7 @@ dependencies = [
  "objc",
  "once_cell",
  "open",
+ "os_pipe",
  "percent-encoding",
  "rand 0.8.5",
  "raw-window-handle",
@@ -2561,6 +2582,7 @@ dependencies = [
  "serde_json",
  "serde_repr",
  "serialize-to-javascript",
+ "shared_child",
  "state",
  "tar",
  "tauri-macros",
diff --git a/packages/gui/src-tauri/Cargo.toml b/packages/gui/src-tauri/Cargo.toml
index 8e3c1b4..6576123 100644
--- a/packages/gui/src-tauri/Cargo.toml
+++ b/packages/gui/src-tauri/Cargo.toml
@@ -17,7 +17,7 @@ tauri-build = { version = "1.2.0", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2.0", features = ["http-all", "shell-open", "window-all"] }
+tauri = { version = "1.2.0", features = ["fs-read-dir", "http-all", "shell-all", "window-all"] }
 uuid = "1.2.1"
 futures = "0.3"
 
diff --git a/packages/gui/src-tauri/src/handlers/packages.rs b/packages/gui/src-tauri/src/handlers/packages.rs
index 6df1455..4e77c9a 100644
--- a/packages/gui/src-tauri/src/handlers/packages.rs
+++ b/packages/gui/src-tauri/src/handlers/packages.rs
@@ -1,4 +1,5 @@
 #[tauri::command]
 pub fn install_package(package: String) {
   println!("installing: {}", package);
+  
 }
\ No newline at end of file
diff --git a/packages/gui/src-tauri/tauri.conf.json b/packages/gui/src-tauri/tauri.conf.json
index 3fd334d..9b417d5 100644
--- a/packages/gui/src-tauri/tauri.conf.json
+++ b/packages/gui/src-tauri/tauri.conf.json
@@ -18,10 +18,26 @@
 				"scope": ["https://api.tea.xyz/v1/*", "https://github.com/*"]
 			},
 			"shell": {
-				"all": false,
-				"execute": false,
+				"all": true,
+				"execute": true,
 				"open": true,
-				"scope": [],
+				"scope": [
+					{
+						"name": "tea-install",
+						"cmd": "tea",
+						"args": [{ "validator": "\\S+" }, "true"]
+					},
+					{
+						"name": "node",
+						"cmd": "node",
+						"args": ["--version"]
+					},
+					{
+						"name": "list-packages",
+						"cmd": "ls",
+						"args": ["-R ~/.tea/tea.xyz/var/www | grep 'xz\\|gz'"]
+					}
+				],
 				"sidecar": false
 			},
 			"window": {
@@ -55,6 +71,13 @@
 				"startDragging": true,
 				"unmaximize": true,
 				"unminimize": true
+			},
+			"fs": {
+				"readDir": true,
+				"scope": [
+					"$HOME/.tea/*",
+					"$APPDATA/*"
+				]
 			}
 		},
 		"bundle": {
diff --git a/packages/gui/src/components/SearchPackages/SearchPackages.svelte b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
index 1307062..648a093 100644
--- a/packages/gui/src/components/SearchPackages/SearchPackages.svelte
+++ b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
@@ -3,15 +3,18 @@
 	import Fuse from 'fuse.js';
 	import { packages as packagesStore, initializePackages } from '$libs/stores';
 	import SortingButtons from './SortingButtons.svelte';
-	import type { Package } from '@tea/ui/types';
+	import type { GUIPackage } from '$libs/types';
+	import { PackageStates } from '$libs/types';
 	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
 	import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 	import { onMount } from 'svelte';
 
-	let allPackages: Package[] = [];
-	let packagesIndex: Fuse<Package>;
-	let packages: Package[] = [];
+	import { installPackage } from '@api';
+
+	let allPackages: GUIPackage[] = [];
+	let packagesIndex: Fuse<GUIPackage>;
+	let packages: GUIPackage[] = [];
 	let initialized = false;
 
 	let sortBy = 'popularity';
@@ -19,7 +22,7 @@
 
 	const searchLimit = 5;
 
-	const setPackages = (pkgs: Package[]) => {
+	const setPackages = (pkgs: GUIPackage[]) => {
 		console.log('pkgs sub', pkgs);
 		packages = pkgs.sort((a, b) => {
 			if (sortBy === 'popularity') {
@@ -54,7 +57,7 @@
 	});
 
 	const onSearch = (term: string) => {
-		if (term !== '' && term.length > 3) {
+		if (term !== '' && term.length > 1) {
 			const res = packagesIndex.search(term);
 			const matchingPackages = [];
 			for (let i = 0; i < searchLimit; i++) {
@@ -73,6 +76,15 @@
 		sortDirection = dir;
 		setPackages(packages);
 	};
+
+	const getCTALabel = (state: PackageStates): string => {
+		return {
+			[PackageStates.AVAILABLE]: 'INSTALL',
+			[PackageStates.INSTALLED]: 'INSTALLED',
+			[PackageStates.INSTALLING]: 'INSTALLING',
+			[PackageStates.UNINSTALLED]: 'RE-INSTALL'
+		}[state];
+	};
 </script>
 
 <div class="border border-gray bg-black">
@@ -87,9 +99,24 @@
 		</div>
 	</section>
 	<ul class="grid grid-cols-3">
-		{#if packages.length}
+		{#if packages.length > 0}
 			{#each packages as pkg}
-				<PackageCard {pkg} link={`/packages/${pkg.slug}`} />
+				<div class={pkg.state === PackageStates.INSTALLING ? 'animate-pulse' : ''}>
+					<PackageCard
+						{pkg}
+						link={`/packages/${pkg.slug}`}
+						ctaLabel={getCTALabel(pkg.state)}
+						onClickCTA={async () => {
+							try {
+								pkg.state = PackageStates.INSTALLING;
+								await installPackage(pkg.full_name);
+								pkg.state = PackageStates.INSTALLED;
+							} catch (error) {
+								console.error(error);
+							}
+						}}
+					/>
+				</div>
 			{/each}
 		{:else}
 			{#each Array(12) as _}
diff --git a/packages/gui/src/libs/api/mock.ts b/packages/gui/src/libs/api/mock.ts
index bdccc2a..aaf6d9d 100644
--- a/packages/gui/src/libs/api/mock.ts
+++ b/packages/gui/src/libs/api/mock.ts
@@ -6,6 +6,8 @@
  *  * make cors work with api.tea.xyz/v1
  */
 import type { Package, Review } from '@tea/ui/types';
+import type { GUIPackage } from '../types';
+import { PackageStates } from '../types';
 import { loremIpsum } from 'lorem-ipsum';
 import _ from 'lodash';
 
@@ -152,9 +154,14 @@ const packages: Package[] = [
 	}
 ];
 
-export async function getPackages(): Promise<Package[]> {
+export async function getPackages(): Promise<GUIPackage[]> {
 	await delay(2000);
-	return packages;
+	return packages.map((pkg) => {
+		return {
+			...pkg,
+			state: PackageStates.AVAILABLE
+		};
+	});
 }
 
 export async function getFeaturedPackages(): Promise<Package[]> {
@@ -201,6 +208,11 @@ export async function getPackageReviews(full_name: string): Promise<Review[]> {
 	return reviews;
 }
 
+export async function installPackage(full_name: string) {
+	console.log('installing: ', full_name);
+	await delay(10000);
+}
+
 function delay(ms: number) {
 	return new Promise((resolve) => setTimeout(resolve, ms));
 }
diff --git a/packages/gui/src/libs/api/tauri.ts b/packages/gui/src/libs/api/tauri.ts
index 60bc07d..dc25694 100644
--- a/packages/gui/src/libs/api/tauri.ts
+++ b/packages/gui/src/libs/api/tauri.ts
@@ -11,9 +11,14 @@
  *  - connect to a local platform api and returns a data
  */
 import { getClient } from '@tauri-apps/api/http';
+// import { invoke } from '@tauri-apps/api';
+import { Command } from '@tauri-apps/api/shell';
+import { readDir, BaseDirectory } from '@tauri-apps/api/fs';
 import { Buffer } from 'buffer';
-import type { Package, Review } from '../types';
+import type { Package, Review } from '@tea/ui/types';
+import type { GUIPackage } from '../types';
 import * as mock from './mock';
+import { PackageStates } from '../types';
 
 const username = 'user';
 const password = 'password';
@@ -46,9 +51,20 @@ const join = function (...paths: string[]) {
 		.join('/');
 };
 
-export async function getPackages(): Promise<Package[]> {
-	const packages = await get<Package[]>('packages');
-	return packages;
+export async function getPackages(): Promise<GUIPackage[]> {
+	const [packages, installedPackages] = await Promise.all([
+		get<Package[]>('packages'),
+		getInstalledPackages()
+	]);
+
+	return packages.map((pkg) => {
+		const found = installedPackages.find((p) => p.full_name === pkg.full_name);
+		return {
+			...pkg,
+			state: found ? PackageStates.INSTALLED : PackageStates.AVAILABLE,
+			installed_version: found ? found.version : ''
+		};
+	});
 }
 
 export async function getFeaturedPackages(): Promise<Package[]> {
@@ -62,3 +78,50 @@ export async function getPackageReviews(full_name: string): Promise<Review[]> {
 
 	return reviews;
 }
+
+export async function installPackage(full_name: string) {
+	try {
+		await installPackageCommand(full_name);
+	} catch (error) {
+		console.error(error);
+	}
+}
+
+async function installPackageCommand(full_name: string) {
+	return new Promise((resolve, reject) => {
+		const teaInstallCommand = new Command('tea-install', [`+${full_name}`, 'true']);
+		teaInstallCommand.on('error', reject);
+
+		const handleLineOutput = async (line: string) => {
+			const c = await child;
+			if (line.includes('installed:')) {
+				c.kill();
+				resolve(c.pid);
+			}
+		};
+
+		teaInstallCommand.stdout.on('data', handleLineOutput);
+		teaInstallCommand.stderr.on('data', handleLineOutput);
+
+		const child = teaInstallCommand.spawn();
+	});
+}
+
+async function getInstalledPackages() {
+	const entries = await readDir('.tea/tea.xyz/var/www', {
+		dir: BaseDirectory.Home,
+		recursive: false
+	});
+	const packages = entries
+		.filter((o) => o.path.match('^(.*).(g|x)z$'))
+		.map((o) => {
+			const [pkg_version] = (o?.name || '').split('+');
+			const version = pkg_version.split('-').pop();
+			const full_name = pkg_version.replace(`-${version}`, '');
+			return {
+				full_name,
+				version
+			};
+		});
+	return packages;
+}
diff --git a/packages/gui/src/libs/stores.ts b/packages/gui/src/libs/stores.ts
index 93fdc79..60dbe7b 100644
--- a/packages/gui/src/libs/stores.ts
+++ b/packages/gui/src/libs/stores.ts
@@ -1,13 +1,13 @@
 import { writable } from 'svelte/store';
 import type { Package, Review } from '@tea/ui/types';
-
+import type { GUIPackage } from '$libs/types';
 // TODO: figure out a better structure for managing states maybe turn them into models?
 
 import { getPackages, getFeaturedPackages, getPackageReviews } from '@api';
 
 export const backLink = writable<string>('/');
 
-export const packages = writable<Package[]>([]);
+export const packages = writable<GUIPackage[]>([]);
 
 export const featuredPackages = writable<Package[]>([]);
 
diff --git a/packages/gui/src/libs/types.ts b/packages/gui/src/libs/types.ts
index ed18b7d..9924df9 100644
--- a/packages/gui/src/libs/types.ts
+++ b/packages/gui/src/libs/types.ts
@@ -2,3 +2,17 @@
 // else
 // 		please use the package @tea/ui/src/types.ts
 //		things that go there are shared types/shapes like ie: Package
+
+import type { Package } from '@tea/ui/types';
+
+export enum PackageStates {
+	AVAILABLE,
+	INSTALLED,
+	INSTALLING,
+	UNINSTALLED
+}
+
+export type GUIPackage = Package & {
+	state: PackageStates;
+	installed_version?: string;
+};
diff --git a/packages/ui/src/PackageCard/PackageCard.svelte b/packages/ui/src/PackageCard/PackageCard.svelte
index 871d5f0..cf63f1d 100644
--- a/packages/ui/src/PackageCard/PackageCard.svelte
+++ b/packages/ui/src/PackageCard/PackageCard.svelte
@@ -2,29 +2,37 @@
 	import '../app.css';
 	import type { Package } from '../types';
 	import ImgLoader from '../ImgLoader/ImgLoader.svelte';
+
 	export let pkg: Package;
 	export let link: string;
+	export let ctaLabel: string;
+
+	export let onClickCTA = () => {
+		console.log('do nothing');
+	};
 </script>
 
 <section class="package-card border border-gray p-4">
-	<figure>
-		<ImgLoader
-			class="pkg-image"
-			src={!pkg.thumb_image_url.includes('https://tea.xyz')
-				? 'https://tea.xyz/Images/package-thumb-nolabel4.jpg'
-				: pkg.thumb_image_url}
-			alt={pkg.name}
-		/>
-		<article class="card-thumb-label">
-			<i class="icon-tea-logo-iconasset-1">
-				<!-- TODO: replace with icon.svg -->
-			</i>
-			<h3>{pkg.name}</h3>
-			{#if pkg.maintainer}
-				<h4>&#x2022;&nbsp;{pkg.maintainer}</h4>
-			{/if}
-		</article>
-	</figure>
+	<a href={link}>
+		<figure>
+			<ImgLoader
+				class="pkg-image"
+				src={!pkg.thumb_image_url.includes('https://tea.xyz')
+					? 'https://tea.xyz/Images/package-thumb-nolabel4.jpg'
+					: pkg.thumb_image_url}
+				alt={pkg.name}
+			/>
+			<article class="card-thumb-label">
+				<i class="icon-tea-logo-iconasset-1">
+					<!-- TODO: replace with icon.svg -->
+				</i>
+				<h3>{pkg.name}</h3>
+				{#if pkg.maintainer}
+					<h4>&#x2022;&nbsp;{pkg.maintainer}</h4>
+				{/if}
+			</article>
+		</figure>
+	</a>
 	<footer class="mt-4 flex items-center justify-between">
 		<div>
 			<p>
@@ -35,10 +43,7 @@
         <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
 			</p>
 		</div>
-		<!-- TODO: move this button into its own reusable component -->
-		<a href={link}>
-			<button class="detail-btn"><i class="icon-enter-arrow" />details</button>
-		</a>
+		<button class="p-2 font-machina" on:click={onClickCTA}>{ctaLabel}</button>
 	</footer>
 </section>
 
@@ -91,40 +96,18 @@
 		padding: 0px;
 	}
 
-	.detail-btn {
-		position: relative;
-		float: right;
-		right: 0;
-		display: inline-block;
-		font-family: 'pp-neue-machina', sans-serif;
+	button {
 		background-color: #1a1a1a;
 		border: 0.5px solid #ffffff;
 		color: #fff;
-		padding-top: 0.279vw;
 		text-decoration: none;
 		text-transform: uppercase;
-		width: 120px;
-		height: 2.232vw;
-		min-height: 34px;
+		min-width: 120px;
 		transition: 0.1s linear;
 	}
 
-	.detail-btn:hover {
+	button:hover {
 		background-color: #8000ff;
 		box-shadow: inset 0vw 0vw 0vw 0.223vw #1a1a1a !important;
 	}
-
-	/* Icon Styling */
-
-	.detail-btn .icon-enter-arrow {
-		display: inline-block;
-		position: relative;
-		margin-right: 0.558vw;
-		transition: 0.2s ease-in-out;
-	}
-
-	.detail-btn:hover .icon-enter-arrow {
-		display: inline-block;
-		transform: rotate(-45deg) !important;
-	}
 </style>

From f54c5e4d446f02052dde19f637b7cb2464d09beb Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Fri, 2 Dec 2022 15:53:13 +0800
Subject: [PATCH 04/10] test logging

---
 packages/gui/src/components/SearchPackages/SearchPackages.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/gui/src/components/SearchPackages/SearchPackages.svelte b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
index 648a093..412a431 100644
--- a/packages/gui/src/components/SearchPackages/SearchPackages.svelte
+++ b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
@@ -65,6 +65,7 @@
 					matchingPackages.push(res[i].item);
 				}
 			}
+			console.log(res, matchingPackages)
 			setPackages(matchingPackages);
 		} else {
 			setPackages(allPackages);

From c6963c08d384dcbecb0546ee76f0cbf276fb2479 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Fri, 2 Dec 2022 16:03:11 +0800
Subject: [PATCH 05/10] test search

---
 .../components/SearchPackages/SearchPackages.svelte    | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/gui/src/components/SearchPackages/SearchPackages.svelte b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
index 412a431..64ee27d 100644
--- a/packages/gui/src/components/SearchPackages/SearchPackages.svelte
+++ b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
@@ -22,9 +22,8 @@
 
 	const searchLimit = 5;
 
-	const setPackages = (pkgs: GUIPackage[]) => {
-		console.log('pkgs sub', pkgs);
-		packages = pkgs.sort((a, b) => {
+	const setPackages = (pkgs: GUIPackage[], isSearch?: boolean) => {
+		packages = isSearch ? pkgs : pkgs.sort((a, b) => {
 			if (sortBy === 'popularity') {
 				const aPop = +a.dl_count + a.installs;
 				const bPop = +b.dl_count + b.installs;
@@ -59,14 +58,13 @@
 	const onSearch = (term: string) => {
 		if (term !== '' && term.length > 1) {
 			const res = packagesIndex.search(term);
-			const matchingPackages = [];
+			const matchingPackages: GUIPackage[] = [];
 			for (let i = 0; i < searchLimit; i++) {
 				if (res[i]) {
 					matchingPackages.push(res[i].item);
 				}
 			}
-			console.log(res, matchingPackages)
-			setPackages(matchingPackages);
+			setPackages(matchingPackages, true);
 		} else {
 			setPackages(allPackages);
 		}

From 8531041a23cde58b72f48024d2329e7350e988d0 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Fri, 2 Dec 2022 16:06:23 +0800
Subject: [PATCH 06/10] lint

---
 .../SearchPackages/SearchPackages.svelte      | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/gui/src/components/SearchPackages/SearchPackages.svelte b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
index 64ee27d..afa6a14 100644
--- a/packages/gui/src/components/SearchPackages/SearchPackages.svelte
+++ b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
@@ -23,18 +23,20 @@
 	const searchLimit = 5;
 
 	const setPackages = (pkgs: GUIPackage[], isSearch?: boolean) => {
-		packages = isSearch ? pkgs : pkgs.sort((a, b) => {
-			if (sortBy === 'popularity') {
-				const aPop = +a.dl_count + a.installs;
-				const bPop = +b.dl_count + b.installs;
-				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;
-			}
-		});
+		packages = isSearch
+			? pkgs
+			: pkgs.sort((a, b) => {
+					if (sortBy === 'popularity') {
+						const aPop = +a.dl_count + a.installs;
+						const bPop = +b.dl_count + b.installs;
+						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;
+					}
+			  });
 	};
 
 	packagesStore.subscribe((v) => {

From f1307333b3b3b8db42278add2f1900a8e3b778c4 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Fri, 2 Dec 2022 16:10:27 +0800
Subject: [PATCH 07/10] simplify search

---
 .../components/SearchPackages/SearchPackages.svelte    | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/gui/src/components/SearchPackages/SearchPackages.svelte b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
index afa6a14..435af28 100644
--- a/packages/gui/src/components/SearchPackages/SearchPackages.svelte
+++ b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
@@ -59,13 +59,9 @@
 
 	const onSearch = (term: string) => {
 		if (term !== '' && term.length > 1) {
-			const res = packagesIndex.search(term);
-			const matchingPackages: GUIPackage[] = [];
-			for (let i = 0; i < searchLimit; i++) {
-				if (res[i]) {
-					matchingPackages.push(res[i].item);
-				}
-			}
+			const res = packagesIndex.search(term, { limit: searchLimit });
+			const matchingPackages: GUIPackage[] = res.map((v) => v.item);
+
 			setPackages(matchingPackages, true);
 		} else {
 			setPackages(allPackages);

From 82c01b0818748a13f502972c15b508411bd571ad Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Fri, 2 Dec 2022 16:38:01 +0800
Subject: [PATCH 08/10] #55 add more success resolution on install

---
 .../SearchPackages/SearchPackages.svelte          |  4 ++--
 packages/gui/src/libs/api/tauri.ts                | 15 ++++++++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/gui/src/components/SearchPackages/SearchPackages.svelte b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
index 435af28..e6a2bbd 100644
--- a/packages/gui/src/components/SearchPackages/SearchPackages.svelte
+++ b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
@@ -20,7 +20,7 @@
 	let sortBy = 'popularity';
 	let sortDirection: 'asc' | 'desc' = 'desc';
 
-	const searchLimit = 5;
+	const searchLimit = 10;
 
 	const setPackages = (pkgs: GUIPackage[], isSearch?: boolean) => {
 		packages = isSearch
@@ -42,7 +42,7 @@
 	packagesStore.subscribe((v) => {
 		allPackages = v;
 		setPackages(allPackages);
-		if (!packagesIndex) {
+		if (!packagesIndex && allPackages.length) {
 			// dont remove or this can get crazy
 			packagesIndex = new Fuse(allPackages, {
 				keys: ['name', 'full_name', 'desc']
diff --git a/packages/gui/src/libs/api/tauri.ts b/packages/gui/src/libs/api/tauri.ts
index dc25694..e091803 100644
--- a/packages/gui/src/libs/api/tauri.ts
+++ b/packages/gui/src/libs/api/tauri.ts
@@ -92,17 +92,26 @@ async function installPackageCommand(full_name: string) {
 		const teaInstallCommand = new Command('tea-install', [`+${full_name}`, 'true']);
 		teaInstallCommand.on('error', reject);
 
-		const handleLineOutput = async (line: string) => {
+		const handleLineOutput = async (line: string | any) => {
 			const c = await child;
-			if (line.includes('installed:')) {
+			if (line?.code === 0 || line.includes('installed:')) {
 				c.kill();
 				resolve(c.pid);
+			} else if (line?.code === 1) {
+				reject();
 			}
 		};
 
 		teaInstallCommand.stdout.on('data', handleLineOutput);
 		teaInstallCommand.stderr.on('data', handleLineOutput);
-
+		teaInstallCommand.on('close', (line: string) => {
+			console.log('command closed!');
+			handleLineOutput(line || '');
+		});
+		teaInstallCommand.on('error', (line: string) => {
+			console.log('command error!', line);
+			handleLineOutput(line || '');
+		});
 		const child = teaInstallCommand.spawn();
 	});
 }

From 7c9ad868263a921313e34e97cc1d1c93dec81ce0 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Mon, 5 Dec 2022 15:57:53 +0800
Subject: [PATCH 09/10] #38 layout for tea cli banner - additional cleanup

---
 .../BigBlackSpace/BigBlackSpace.svelte        |  3 +--
 .../src/components/CliBanner/CliBanner.svelte | 25 +++++++++++++++++--
 .../gui/src/components/NavBar/NavBar.svelte   |  2 +-
 packages/gui/src/libs/api/tauri.ts            |  9 ++++---
 packages/gui/src/routes/+layout.svelte        |  6 ++---
 .../ui/src/SearchInput/SearchInput.svelte     |  4 ++-
 6 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte b/packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte
index c6701a4..5aa397a 100644
--- a/packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte
+++ b/packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import '$appcss';
-	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
 
-<Placeholder label="BigBlackSpace" />
+<section class="h-56 border border-gray bg-black" />
diff --git a/packages/gui/src/components/CliBanner/CliBanner.svelte b/packages/gui/src/components/CliBanner/CliBanner.svelte
index 0415675..d268cb7 100644
--- a/packages/gui/src/components/CliBanner/CliBanner.svelte
+++ b/packages/gui/src/components/CliBanner/CliBanner.svelte
@@ -1,6 +1,27 @@
 <script lang="ts">
 	import '$appcss';
-	import Placeholder from '$components/Placeholder/Placeholder.svelte';
+	import Button from '@tea/ui/Button/Button.svelte';
+	let copyButtonText = 'COPY';
+	const copyValue = `sh <(curl https://tea.xyz)`;
+
+	const onCopy = () => {
+		copyButtonText = 'COPIED!';
+		navigator.clipboard.writeText(copyValue);
+	};
 </script>
 
-<Placeholder label="CLI Hero" />
+<section class="mt-4 border border-gray bg-black">
+	<header class="flex flex-col items-center py-8">
+		<figure>
+			<img alt="tea" src="/images/tea-icon.png" class="rounded-md" />
+		</figure>
+		<p class="text-primary">tea.cli ver. 0.6.0</p>
+	</header>
+	<footer class="flex h-20 border-t border-gray text-white">
+		<input class="flex-grow bg-black pl-4" disabled value="sh <(curl tea.xyz)>" />
+		<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
+		<Button class="w-56 border-0 border-l-2 text-sm" onClick={() => console.log('cli')}
+			>OPEN IN TERMINAL</Button
+		>
+	</footer>
+</section>
diff --git a/packages/gui/src/components/NavBar/NavBar.svelte b/packages/gui/src/components/NavBar/NavBar.svelte
index e45c6f6..7fec170 100644
--- a/packages/gui/src/components/NavBar/NavBar.svelte
+++ b/packages/gui/src/components/NavBar/NavBar.svelte
@@ -79,7 +79,7 @@
 		</a>
 	</nav>
 
-	<SearchInput size="small" {onSearch} />
+	<SearchInput class="border border-gray py-4" size="small" {onSearch} />
 
 	{#each routes as route}
 		<li class={route.active ? 'nav_button active' : 'nav_button'}>
diff --git a/packages/gui/src/libs/api/tauri.ts b/packages/gui/src/libs/api/tauri.ts
index e091803..eb3be09 100644
--- a/packages/gui/src/libs/api/tauri.ts
+++ b/packages/gui/src/libs/api/tauri.ts
@@ -92,12 +92,15 @@ async function installPackageCommand(full_name: string) {
 		const teaInstallCommand = new Command('tea-install', [`+${full_name}`, 'true']);
 		teaInstallCommand.on('error', reject);
 
-		const handleLineOutput = async (line: string | any) => {
+		const handleLineOutput = async (line: string | { code: number }) => {
 			const c = await child;
-			if (line?.code === 0 || line.includes('installed:')) {
+			if (
+				(typeof line === 'string' && line.includes('installed:')) ||
+				(typeof line !== 'string' && line?.code === 0)
+			) {
 				c.kill();
 				resolve(c.pid);
-			} else if (line?.code === 1) {
+			} else if (typeof line !== 'string' && line?.code === 1) {
 				reject();
 			}
 		};
diff --git a/packages/gui/src/routes/+layout.svelte b/packages/gui/src/routes/+layout.svelte
index 5b4e057..d659455 100644
--- a/packages/gui/src/routes/+layout.svelte
+++ b/packages/gui/src/routes/+layout.svelte
@@ -12,13 +12,13 @@
 </script>
 
 <div id="main-layout">
-	<nav class="">
+	<nav class="border border-t-0 border-l-0 border-b-0 border-gray">
 		<NavBar />
 	</nav>
 	<section class="px-16 pt-24">
 		{#if backLink}
-			<header>
-				<a href={backLink}>back</a>
+			<header class="px-16 py-2 text-3xl text-gray hover:text-primary">
+				<a href={backLink}>&#8592</a>
 			</header>
 		{/if}
 		<figure />
diff --git a/packages/ui/src/SearchInput/SearchInput.svelte b/packages/ui/src/SearchInput/SearchInput.svelte
index 43b289c..ec4c9e4 100644
--- a/packages/ui/src/SearchInput/SearchInput.svelte
+++ b/packages/ui/src/SearchInput/SearchInput.svelte
@@ -1,6 +1,8 @@
 <script type="ts">
 	import '../app.css';
 
+	let clazz = '';
+	export { clazz as class };
 	export let size: 'small' | 'medium' | 'large' = 'small';
 	export let onSearch: (text: string) => void;
 
@@ -14,7 +16,7 @@
 	};
 </script>
 
-<section class={`flex items-center py-2 ${size}`}>
+<section class={`flex items-center py-2 ${size} ${clazz}`}>
 	<div class="icon pl-4">
 		<i class="icon-search-icon" />
 	</div>

From 9970b686bb53f0e4a72b5c101be092d1b5743823 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Tue, 6 Dec 2022 13:17:54 +0800
Subject: [PATCH 10/10] #35 FeaturedCourses - added reusable Gallery component

---
 .../FeaturedCourses/FeaturedCourses.svelte    | 25 +++++-
 .../FeaturedPackages/FeaturedPackages.svelte  | 84 +++--------------
 packages/gui/src/libs/api/mock.ts             | 27 +++++-
 packages/gui/src/libs/api/tauri.ts            |  7 +-
 packages/gui/src/libs/types.ts                |  7 ++
 packages/ui/package.json                      |  3 +-
 packages/ui/src/Gallery/Gallery.svelte        | 90 +++++++++++++++++++
 .../src/Gallery/GalleryItem.svelte}           | 26 +++---
 pnpm-lock.yaml                                | 39 +++++++-
 9 files changed, 217 insertions(+), 91 deletions(-)
 create mode 100644 packages/ui/src/Gallery/Gallery.svelte
 rename packages/{gui/src/components/FeaturedPackages/FeaturedPackage.svelte => ui/src/Gallery/GalleryItem.svelte} (62%)

diff --git a/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte b/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte
index c662ae7..4febfe4 100644
--- a/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte
+++ b/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte
@@ -1,7 +1,26 @@
 <script lang="ts">
 	import '$appcss';
-	import Placeholder from '$components/Placeholder/Placeholder.svelte';
+	import { onMount } from 'svelte';
+	import type { Course } from '$libs/types';
+
+	import Gallery from '@tea/ui/Gallery/Gallery.svelte';
+	import { getFeaturedCourses } from '@api';
+
+	let courses: Course[] = [];
+
+	onMount(async () => {
+		if (!courses.length) {
+			courses = await getFeaturedCourses();
+		}
+	});
 </script>
 
-<Placeholder label="FeaturedCourses" />
-<h1>test</h1>
+<Gallery
+	title="FEATURED COURSES"
+	items={courses.map((course) => ({
+		title: course.title,
+		subTitle: course.sub_title,
+		imageUrl: course.banner_image_url,
+		link: course.link
+	}))}
+/>
diff --git a/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
index 31f75e5..83ac856 100644
--- a/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
+++ b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
 	import '$appcss';
-	import { onDestroy, onMount } from 'svelte';
-	import { watchResize } from 'svelte-watch-resize';
+	import { onMount } from 'svelte';
 	import type { Package } from '@tea/ui/types';
-	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
-	import FeaturedPackage from './FeaturedPackage.svelte';
+
+	import Gallery from '@tea/ui/Gallery/Gallery.svelte';
 	import {
 		featuredPackages as featuredPackagesStore,
 		initializeFeaturedPackages
@@ -12,82 +11,23 @@
 
 	let featuredPackages: Package[] = [];
 
-	let pkgFocus = 0;
-	let width = 0;
-	let styleFeaturedPackages: string;
-
-	function resetFeaturedStyle() {
-		const position = pkgFocus * width;
-		styleFeaturedPackages = `
-			width: ${featuredPackages.length * width}px;
-			left: -${position}px;
-			transition: left 0.6s ease-in;
-		`;
-	}
-
-	function handleContainerResize(node: HTMLElement) {
-		width = node.clientWidth;
-		resetFeaturedStyle();
-	}
-
-	let loop: NodeJS.Timer;
-
-	function resetLoop() {
-		if (loop) clearInterval(loop);
-		loop = setInterval(() => {
-			pkgFocus++;
-			if (pkgFocus === featuredPackages.length) {
-				pkgFocus = 0;
-			}
-			resetFeaturedStyle();
-		}, 3000);
-		resetFeaturedStyle();
-	}
-
 	featuredPackagesStore.subscribe((v) => {
 		featuredPackages = v;
 	});
 
-	onDestroy(() => clearInterval(loop));
 	onMount(() => {
 		if (!featuredPackages.length) {
 			initializeFeaturedPackages();
 		}
-		resetLoop();
 	});
 </script>
 
-<section class="h-96 w-full bg-black" use:watchResize={handleContainerResize}>
-	<!-- <Placeholder label="FeaturedPackages" /> -->
-	<header class="flex h-12 items-center justify-between bg-accent px-2">
-		<p>FEATURED PACKAGES</p>
-		<ul class="flex gap-2">
-			{#each featuredPackages as pkg, i}
-				<button
-					on:click={() => {
-						pkgFocus = i;
-						resetLoop();
-					}}
-					class={`bg-purple h-4 w-4 rounded-lg border-2 border-white transition-colors ${
-						i === pkgFocus ? 'bg-purple-900' : ''
-					}`}
-				/>
-			{/each}
-		</ul>
-	</header>
-	<figure class="absolute bottom-0 top-12 left-0 right-0 overflow-hidden">
-		{#if featuredPackages.length}
-			<section class="absolute top-0 flex h-full" style={styleFeaturedPackages}>
-				{#each featuredPackages as pkg}
-					<div class="h-full" style={`width:${width}px`}>
-						<a href={`/packages/${pkg.slug}`}>
-							<FeaturedPackage {pkg} {width} />
-						</a>
-					</div>
-				{/each}
-			</section>
-		{:else}
-			<Preloader />
-		{/if}
-	</figure>
-</section>
+<Gallery
+	title="FEATURED PACKAGES"
+	items={featuredPackages.map((pkg) => ({
+		title: pkg.full_name,
+		subTitle: pkg.maintainer || '',
+		imageUrl: pkg.thumb_image_url,
+		link: `/packages/${pkg.slug}`
+	}))}
+/>
diff --git a/packages/gui/src/libs/api/mock.ts b/packages/gui/src/libs/api/mock.ts
index aaf6d9d..9e1abf2 100644
--- a/packages/gui/src/libs/api/mock.ts
+++ b/packages/gui/src/libs/api/mock.ts
@@ -6,7 +6,7 @@
  *  * make cors work with api.tea.xyz/v1
  */
 import type { Package, Review } from '@tea/ui/types';
-import type { GUIPackage } from '../types';
+import type { GUIPackage, Course } from '../types';
 import { PackageStates } from '../types';
 import { loremIpsum } from 'lorem-ipsum';
 import _ from 'lodash';
@@ -216,3 +216,28 @@ export async function installPackage(full_name: string) {
 function delay(ms: number) {
 	return new Promise((resolve) => setTimeout(resolve, ms));
 }
+
+export async function getFeaturedCourses(): Promise<Course[]> {
+	const mockCourses: Course[] = [
+		{
+			title: 'Developing With Tea',
+			sub_title: 'by Mxcl',
+			link: '#',
+			banner_image_url: 'https://tea.xyz/Images/packages/mesonbuild_com.jpg'
+		},
+		{
+			title: 'Brewing Tea',
+			sub_title: 'by Mxcl',
+			link: '#',
+			banner_image_url: 'https://tea.xyz/Images/packages/tea_xyz_gx_cc.jpg'
+		},
+		{
+			title: 'Harvesting Tea',
+			sub_title: 'by Mxcl',
+			link: '#',
+			banner_image_url: 'https://tea.xyz/Images/packages/ipfs_tech.jpg'
+		}
+	];
+
+	return mockCourses;
+}
diff --git a/packages/gui/src/libs/api/tauri.ts b/packages/gui/src/libs/api/tauri.ts
index eb3be09..27763f2 100644
--- a/packages/gui/src/libs/api/tauri.ts
+++ b/packages/gui/src/libs/api/tauri.ts
@@ -16,7 +16,7 @@ import { Command } from '@tauri-apps/api/shell';
 import { readDir, BaseDirectory } from '@tauri-apps/api/fs';
 import { Buffer } from 'buffer';
 import type { Package, Review } from '@tea/ui/types';
-import type { GUIPackage } from '../types';
+import type { GUIPackage, Course } from '../types';
 import * as mock from './mock';
 import { PackageStates } from '../types';
 
@@ -137,3 +137,8 @@ async function getInstalledPackages() {
 		});
 	return packages;
 }
+
+export async function getFeaturedCourses(): Promise<Course[]> {
+	const courses = await mock.getFeaturedCourses();
+	return courses;
+}
diff --git a/packages/gui/src/libs/types.ts b/packages/gui/src/libs/types.ts
index 9924df9..e7bde39 100644
--- a/packages/gui/src/libs/types.ts
+++ b/packages/gui/src/libs/types.ts
@@ -16,3 +16,10 @@ export type GUIPackage = Package & {
 	state: PackageStates;
 	installed_version?: string;
 };
+
+export type Course = {
+	title: string;
+	sub_title: string;
+	banner_image_url: string;
+	link: string;
+};
diff --git a/packages/ui/package.json b/packages/ui/package.json
index edca0fd..d2e8c39 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -52,6 +52,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@tailwindcss/line-clamp": "^0.4.2"
+		"@tailwindcss/line-clamp": "^0.4.2",
+		"svelte-watch-resize": "^1.0.3"
 	}
 }
diff --git a/packages/ui/src/Gallery/Gallery.svelte b/packages/ui/src/Gallery/Gallery.svelte
new file mode 100644
index 0000000..bc7f0f1
--- /dev/null
+++ b/packages/ui/src/Gallery/Gallery.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+	import '$appcss';
+	import { onDestroy, onMount } from 'svelte';
+	import { watchResize } from 'svelte-watch-resize';
+	import Preloader from '../Preloader/Preloader.svelte';
+	import GalleryItem from './GalleryItem.svelte';
+
+	export let title = '';
+
+	interface GalleryItemShape {
+		imageUrl: string;
+		title: string;
+		subTitle: string;
+		link: string;
+	}
+
+	export let items: GalleryItemShape[] = [];
+
+	let focus = 0;
+	let width = 0;
+	let styleFeaturedPackages: string;
+
+	function resetFeaturedStyle() {
+		const position = focus * width;
+		styleFeaturedPackages = `
+			width: ${items.length * width}px;
+			left: -${position}px;
+			transition: left 0.6s ease-in;
+		`;
+	}
+
+	function handleContainerResize(node: HTMLElement) {
+		width = node.clientWidth;
+		resetFeaturedStyle();
+	}
+
+	let loop: NodeJS.Timer;
+
+	function resetLoop() {
+		if (loop) clearInterval(loop);
+		loop = setInterval(() => {
+			focus++;
+			if (focus === items.length) {
+				focus = 0;
+			}
+			resetFeaturedStyle();
+		}, 3000);
+		resetFeaturedStyle();
+	}
+
+	onDestroy(() => clearInterval(loop));
+	onMount(() => {
+		resetLoop();
+	});
+</script>
+
+<section class="h-96 w-full bg-black" use:watchResize={handleContainerResize}>
+	<!-- <Placeholder label="FeaturedPackages" /> -->
+	<header class="flex h-12 items-center justify-between bg-accent px-2">
+		<p>{title}</p>
+		<ul class="flex gap-2">
+			{#each items as _item, i}
+				<button
+					on:click={() => {
+						focus = i;
+						resetLoop();
+					}}
+					class={`bg-purple h-4 w-4 rounded-lg border-2 border-white transition-colors ${
+						i === focus ? 'bg-purple-900' : ''
+					}`}
+				/>
+			{/each}
+		</ul>
+	</header>
+	<figure class="absolute bottom-0 top-12 left-0 right-0 overflow-hidden">
+		{#if items.length}
+			<section class="absolute top-0 flex h-full" style={styleFeaturedPackages}>
+				{#each items as item}
+					<div class="h-full" style={`width:${width}px`}>
+						<a href={item.link}>
+							<GalleryItem {...item} {width} />
+						</a>
+					</div>
+				{/each}
+			</section>
+		{:else}
+			<Preloader />
+		{/if}
+	</figure>
+</section>
diff --git a/packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte b/packages/ui/src/Gallery/GalleryItem.svelte
similarity index 62%
rename from packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte
rename to packages/ui/src/Gallery/GalleryItem.svelte
index 7f9c3ff..e106d32 100644
--- a/packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte
+++ b/packages/ui/src/Gallery/GalleryItem.svelte
@@ -1,33 +1,35 @@
 <script lang="ts">
 	import '$appcss';
-	import type { Package } from '@tea/ui/types';
-	import ImgLoader from '@tea/ui/ImgLoader/ImgLoader.svelte';
-	export let pkg: Package;
-	export let width: number;
+	import ImgLoader from '../ImgLoader/ImgLoader.svelte';
+
+	export let width = 0;
+	export let imageUrl = '';
+	export let title = '';
+	export let subTitle = '';
 </script>
 
-<figure class="featured-pkg relative h-full w-full" style={`width:${width}px`}>
+<figure class="gallery-item relative h-full w-full" style={`width:${width}px`}>
 	<ImgLoader
 		class="featured-img"
-		src={!pkg.thumb_image_url.includes('https://tea.xyz')
+		src={!imageUrl.includes('https://tea.xyz')
 			? 'https://tea.xyz/Images/package-thumb-nolabel4.jpg'
-			: pkg.thumb_image_url}
-		alt={pkg.name}
+			: imageUrl}
+		alt={title}
 	/>
 
 	<article class="card-thumb-label">
 		<i class="icon-tea-logo-iconasset-1">
 			<!-- TODO: replace with icon.svg -->
 		</i>
-		<h3 class="text-3xl">{pkg.name}</h3>
-		{#if pkg.maintainer}
-			<h4 class="mt-2 text-lg">&#x2022;&nbsp;{pkg.maintainer}</h4>
+		<h3 class="text-3xl">{title}</h3>
+		{#if subTitle}
+			<h4 class="mt-2 text-lg">&#x2022;&nbsp;{subTitle}</h4>
 		{/if}
 	</article>
 </figure>
 
 <style>
-	.featured-pkg :global(.featured-img) {
+	.gallery-item :global(.featured-img) {
 		box-shadow: 0px 0px 12px #0c0c0c !important;
 		width: 100%;
 		height: 100%;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index da6a022..106fbc3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,12 +98,14 @@ importers:
       svelte: ^3.44.0
       svelte-check: ^2.7.1
       svelte-preprocess: ^4.10.7
+      svelte-watch-resize: ^1.0.3
       tailwindcss: ^3.2.4
       tslib: ^2.3.1
       typescript: ^4.7.4
       vite: ^3.1.0
     dependencies:
       '@tailwindcss/line-clamp': 0.4.2_tailwindcss@3.2.4
+      svelte-watch-resize: 1.0.3
     devDependencies:
       '@playwright/test': 1.25.0
       '@storybook/addon-essentials': 7.0.0-alpha.51_typescript@4.9.3
@@ -113,7 +115,7 @@ importers:
       '@storybook/svelte-vite': 7.0.0-alpha.51_typescript@4.9.3
       '@storybook/testing-library': 0.0.13
       '@sveltejs/adapter-auto': 1.0.0-next.90
-      '@sveltejs/kit': 1.0.0-next.570_svelte@3.53.1+vite@3.2.4
+      '@sveltejs/kit': 1.0.0-next.572_svelte@3.53.1+vite@3.2.4
       '@sveltejs/package': 1.0.0-next.1_7dvewpees4iyn2tkw2qzal77a4
       '@typescript-eslint/eslint-plugin': 5.43.0_wze2rj5tow7zwqpgbdx2buoy3m
       '@typescript-eslint/parser': 5.43.0_e3uo4sehh4zr4i6m57mkkxxv7y
@@ -3242,6 +3244,34 @@ packages:
       - supports-color
     dev: true
 
+  /@sveltejs/kit/1.0.0-next.572_svelte@3.53.1+vite@3.2.4:
+    resolution: {integrity: sha512-PiKEr55L/uJyMKvDPdyoa5MlAYQwdgs8HLMbr28YcCBmhw/v6V7gutKOKdqeXc3YwKEFVS3z7TvW6c7eDokJdQ==}
+    engines: {node: '>=16.14'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      svelte: ^3.44.0
+      vite: ^3.2.0
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 1.3.1_svelte@3.53.1+vite@3.2.4
+      '@types/cookie': 0.5.1
+      cookie: 0.5.0
+      devalue: 4.2.0
+      kleur: 4.1.5
+      magic-string: 0.27.0
+      mime: 3.0.0
+      sade: 1.8.1
+      set-cookie-parser: 2.5.1
+      sirv: 2.0.2
+      svelte: 3.53.1
+      tiny-glob: 0.2.9
+      undici: 5.13.0
+      vite: 3.2.4
+    transitivePeerDependencies:
+      - diff-match-patch
+      - supports-color
+    dev: true
+
   /@sveltejs/package/1.0.0-next.1_7dvewpees4iyn2tkw2qzal77a4:
     resolution: {integrity: sha512-U8XBk6Cfy8MjKG41Uyo+fqBpdhu7xUSnhiCNoODRaAtWV02RZoLh+McXrsxEvqi/ycgymctlhJhssqDnD+E+FA==}
     engines: {node: '>=16.9'}
@@ -7382,6 +7412,13 @@ packages:
       sourcemap-codec: 1.4.8
     dev: true
 
+  /magic-string/0.27.0:
+    resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
+    engines: {node: '>=12'}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: true
+
   /make-dir/2.1.0:
     resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
     engines: {node: '>=6'}