From 056bade873a52b1054a03198d62653f09288c5d2 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Wed, 18 Jan 2023 11:23:37 +0800
Subject: [PATCH 1/3] #154 new package page layout

---
 .../PackageBanner/PackageBanner.svelte           | 14 ++++++--------
 .../src/components/PageHeader/PageHeader.svelte  |  4 +++-
 .../gui/src/routes/packages/[slug]/+page.svelte  | 16 +++++++++++++---
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/modules/gui/src/components/PackageBanner/PackageBanner.svelte b/modules/gui/src/components/PackageBanner/PackageBanner.svelte
index 10fd92b..571a451 100644
--- a/modules/gui/src/components/PackageBanner/PackageBanner.svelte
+++ b/modules/gui/src/components/PackageBanner/PackageBanner.svelte
@@ -4,7 +4,7 @@
 	import type { Package, Bottle } from '@tea/ui/types';
 	import Button from '@tea/ui/Button/Button.svelte';
 	import StarRating from '@tea/ui/StarRating/StarRating.svelte';
-	import Bottles from '@tea/ui/Bottles/Bottles.svelte';
+	// import Bottles from '@tea/ui/Bottles/Bottles.svelte';
 	import { onMount } from 'svelte';
 	import { getPackageBottles } from '@api';
 
@@ -33,20 +33,18 @@
 		<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-5xl text-primary">{pkg.full_name}</h3>
-			{#if pkg.maintainer}
-				<h3>* {pkg.maintainer}</h3>
-			{/if}
+		<article class="w-2/3 p-4 pt-8">
+			<h3 class="text-3xl text-primary">{pkg.full_name}</h3>
+			<h3>&#x2022; {pkg.maintainer || ''}{pkg.maintainer ? ' |' : ''} {bottles.length} bottles</h3>
 			<div class="mt-4">
 				<StarRating maxRating={5} rating={packageRating} />
 			</div>
 			<p class="mt-4 font-sono text-sm">{pkg.desc}</p>
 		</article>
 	</header>
-	<section>
+	<!-- <section>
 		<Bottles {bottles} />
-	</section>
+	</section> -->
 	<footer class="flex h-20 border-t border-gray text-white">
 		<input class="click-copy flex-grow bg-black pl-4" disabled value={copyValue} />
 		<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
diff --git a/modules/gui/src/components/PageHeader/PageHeader.svelte b/modules/gui/src/components/PageHeader/PageHeader.svelte
index d58eabf..4674a48 100644
--- a/modules/gui/src/components/PageHeader/PageHeader.svelte
+++ b/modules/gui/src/components/PageHeader/PageHeader.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
 	export let coverUrl = '';
+	let clazz = '';
+	export { clazz as class };
 </script>
 
-<figure class="relative mb-8 h-32 w-full font-machina uppercase">
+<figure class={`relative mb-8 h-32 w-full font-machina uppercase ${clazz}`}>
 	{#if coverUrl}
 		<img src={coverUrl} class="absolute z-0 h-32 w-full object-cover" alt="cover" />
 	{/if}
diff --git a/modules/gui/src/routes/packages/[slug]/+page.svelte b/modules/gui/src/routes/packages/[slug]/+page.svelte
index cdefed0..36081b7 100644
--- a/modules/gui/src/routes/packages/[slug]/+page.svelte
+++ b/modules/gui/src/routes/packages/[slug]/+page.svelte
@@ -36,14 +36,24 @@
 </script>
 
 <div>
-	<PageHeader>{pkg.full_name}</PageHeader>
+	<PageHeader coverUrl={pkg.thumb_image_url}>{pkg.full_name}</PageHeader>
 	<section>
 		<PackageBanner {pkg} />
 	</section>
-	<section class="mt-8">
-		<PackageReviews reviews={reviews || []} />
+
+	<section class="mt-8 flex gap-8">
+		<div class="h-64 w-2/3 bg-gray">details and versions</div>
+		<div class="h-64 w-1/3 bg-gray">metas</div>
 	</section>
+	<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png">SNIPPETS</PageHeader>
+	<section class="mt-8 h-64 bg-gray">snippets</section>
+	<!-- <section class="mt-8">
+		<PackageReviews reviews={reviews || []} />
+	</section> -->
 	{#if pkg}
+		<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png"
+			>YOU MAY ALSO LIKE...</PageHeader
+		>
 		<section class="mt-8">
 			<SuggestedPackages {pkg} />
 		</section>

From f80dc067abb384a981c86e0c6890bc54c0ab07af Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Wed, 18 Jan 2023 13:57:48 +0800
Subject: [PATCH 2/3] #157 init details and versions tabs

---
 .../gui/src/components/Badges/Badges.svelte   |  3 ++
 .../PackageBanner/PackageBanner.svelte        |  5 +--
 modules/gui/src/routes/+layout.svelte         |  2 +-
 .../src/routes/packages/[slug]/+page.svelte   | 39 ++++++++++++++++++-
 modules/ui/src/Tabs/Tabs.svelte               | 32 +++++++++++++++
 modules/ui/src/types.ts                       |  9 +++++
 6 files changed, 83 insertions(+), 7 deletions(-)
 create mode 100644 modules/ui/src/Tabs/Tabs.svelte

diff --git a/modules/gui/src/components/Badges/Badges.svelte b/modules/gui/src/components/Badges/Badges.svelte
index d17db57..7f27f4a 100644
--- a/modules/gui/src/components/Badges/Badges.svelte
+++ b/modules/gui/src/components/Badges/Badges.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import '$appcss';
 	import Placeholder from '$components/Placeholder/Placeholder.svelte';
+
+	export let arg1: string;
 </script>
 
 <Placeholder label="Badges" />
+<h1>{arg1 || 'tes'}</h1>
diff --git a/modules/gui/src/components/PackageBanner/PackageBanner.svelte b/modules/gui/src/components/PackageBanner/PackageBanner.svelte
index 571a451..ed6d5a4 100644
--- a/modules/gui/src/components/PackageBanner/PackageBanner.svelte
+++ b/modules/gui/src/components/PackageBanner/PackageBanner.svelte
@@ -4,7 +4,6 @@
 	import type { Package, Bottle } from '@tea/ui/types';
 	import Button from '@tea/ui/Button/Button.svelte';
 	import StarRating from '@tea/ui/StarRating/StarRating.svelte';
-	// import Bottles from '@tea/ui/Bottles/Bottles.svelte';
 	import { onMount } from 'svelte';
 	import { getPackageBottles } from '@api';
 
@@ -42,9 +41,7 @@
 			<p class="mt-4 font-sono text-sm">{pkg.desc}</p>
 		</article>
 	</header>
-	<!-- <section>
-		<Bottles {bottles} />
-	</section> -->
+
 	<footer class="flex h-20 border-t border-gray text-white">
 		<input class="click-copy flex-grow bg-black pl-4" disabled value={copyValue} />
 		<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
diff --git a/modules/gui/src/routes/+layout.svelte b/modules/gui/src/routes/+layout.svelte
index 57d3d85..08d8d92 100644
--- a/modules/gui/src/routes/+layout.svelte
+++ b/modules/gui/src/routes/+layout.svelte
@@ -13,7 +13,7 @@
 	$: if ($navigating) view.scrollTop = 0;
 
 	afterNavigate(({ from, to }) => {
-		if (to?.route.id) {
+		if (to?.route.id && from && from?.url) {
 			const nextPath = to.url.href.replace(to.url.origin, '');
 			const fromPath = from?.url.href.replace(from.url.origin, '');
 			navStore.setNewPath(nextPath, fromPath || '/');
diff --git a/modules/gui/src/routes/packages/[slug]/+page.svelte b/modules/gui/src/routes/packages/[slug]/+page.svelte
index 36081b7..4ef2ea7 100644
--- a/modules/gui/src/routes/packages/[slug]/+page.svelte
+++ b/modules/gui/src/routes/packages/[slug]/+page.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
 	import '$appcss';
+	import { onMount } from 'svelte';
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import { packagesReviewStore } from '$libs/stores';
 	import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
 	import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
-	import type { Review } from '@tea/ui/types';
+	import type { Review, Bottle } from '@tea/ui/types';
 	import SuggestedPackages from '$components/SuggestedPackages/SuggestedPackages.svelte';
+	import Tabs from '@tea/ui/Tabs/Tabs.svelte';
+	import type { Tab } from '@tea/ui/types';
+	import Badges from '$components/Badges/Badges.svelte';
+	import Bottles from '@tea/ui/Bottles/Bottles.svelte';
+	import { getPackageBottles } from '@api';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
@@ -33,6 +39,33 @@
 
 	packagesStore.subscribe(setPkg);
 	featuredPackages.subscribe(setPkg);
+
+	let bottles: Bottle[] = [];
+	const tabs: Tab[] = [
+		{
+			label: 'details',
+			component: Badges,
+			props: {
+				arg1: 'A1'
+			}
+		},
+		{
+			label: 'versions',
+			component: Bottles,
+			props: {
+				bottles
+			}
+		}
+	];
+
+	onMount(async () => {
+		try {
+			const newBottles = await getPackageBottles(pkg.full_name);
+			bottles.push(...newBottles);
+		} catch (err) {
+			console.error(err);
+		}
+	});
 </script>
 
 <div>
@@ -42,7 +75,9 @@
 	</section>
 
 	<section class="mt-8 flex gap-8">
-		<div class="h-64 w-2/3 bg-gray">details and versions</div>
+		<div class="w-2/3 bg-black">
+			<Tabs {tabs} />
+		</div>
 		<div class="h-64 w-1/3 bg-gray">metas</div>
 	</section>
 	<PageHeader class="mt-8" coverUrl="/images/headers/header_bg_1.png">SNIPPETS</PageHeader>
diff --git a/modules/ui/src/Tabs/Tabs.svelte b/modules/ui/src/Tabs/Tabs.svelte
new file mode 100644
index 0000000..56f4bb5
--- /dev/null
+++ b/modules/ui/src/Tabs/Tabs.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Tab } from '../types';
+	import { onMount } from 'svelte';
+
+	import Button from '../Button/Button.svelte';
+
+	export let tabs: Tab[] = [];
+
+	let active: string;
+
+	onMount(() => {
+		if (tabs.length) {
+			active = tabs[0].label;
+		}
+	});
+</script>
+
+<section class="relative h-auto border border-gray">
+	<menu class="flex border border-gray">
+		{#each tabs as tab}
+			<div class="border border-y-0 border-l-0 border-gray">
+				<Button onClick={() => (active = tab.label)}>{tab.label}</Button>
+			</div>
+		{/each}
+	</menu>
+
+	{#each tabs as tab}
+		{#if tab.label === active}
+			<svelte:component this={tab.component} {...tab.props} />
+		{/if}
+	{/each}
+</section>
diff --git a/modules/ui/src/types.ts b/modules/ui/src/types.ts
index afc7524..8a52f40 100644
--- a/modules/ui/src/types.ts
+++ b/modules/ui/src/types.ts
@@ -1,3 +1,4 @@
+import type { ComponentType } from 'svelte';
 export interface Review {
 	title: string;
 	comment: string;
@@ -50,3 +51,11 @@ export type Bottle = {
 	arch: string;
 	version: string;
 };
+
+export type Tab = {
+	label: string;
+	props?: {
+		[key: string]: any;
+	};
+	component: ComponentType;
+};

From 687345b28a5ae27ed1423e1d0b3f9884103ca7f7 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Wed, 18 Jan 2023 15:45:37 +0800
Subject: [PATCH 3/3] #157 show versions in tab

---
 .../PackageDetail/PackageDetail.svelte        |  8 ++++
 .../src/routes/packages/[slug]/+page.svelte   | 43 +++++++++++--------
 modules/ui/src/Button/Button.svelte           |  2 +-
 modules/ui/src/Tabs/Tabs.svelte               |  8 +++-
 4 files changed, 40 insertions(+), 21 deletions(-)
 create mode 100644 modules/gui/src/components/PackageDetail/PackageDetail.svelte

diff --git a/modules/gui/src/components/PackageDetail/PackageDetail.svelte b/modules/gui/src/components/PackageDetail/PackageDetail.svelte
new file mode 100644
index 0000000..8b16f0f
--- /dev/null
+++ b/modules/gui/src/components/PackageDetail/PackageDetail.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { Package } from '@tea/ui/types';
+	export let pkg: Package;
+</script>
+
+<section class="h-64 w-full">
+	<h1>{pkg.full_name}</h1>
+</section>
diff --git a/modules/gui/src/routes/packages/[slug]/+page.svelte b/modules/gui/src/routes/packages/[slug]/+page.svelte
index 4ef2ea7..a29b88b 100644
--- a/modules/gui/src/routes/packages/[slug]/+page.svelte
+++ b/modules/gui/src/routes/packages/[slug]/+page.svelte
@@ -12,6 +12,7 @@
 	import Badges from '$components/Badges/Badges.svelte';
 	import Bottles from '@tea/ui/Bottles/Bottles.svelte';
 	import { getPackageBottles } from '@api';
+	import PackageDetail from '$components/PackageDetail/PackageDetail.svelte';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
@@ -23,11 +24,20 @@
 	let pkg: Package;
 
 	let reviews: Review[];
+	let bottles: Bottle[] = [];
+	let versions: string[] = [];
+
+	let tabs: Tab[] = [];
 
 	const setPkg = (pkgs: Package[]) => {
 		const foundPackage = pkgs.find(({ slug }) => slug === data?.slug) as Package;
 		if (!pkg && foundPackage) {
 			pkg = foundPackage;
+			tabs.push({
+				label: 'details',
+				component: PackageDetail,
+				props: { pkg }
+			});
 		}
 
 		if (!reviews && pkg) {
@@ -40,28 +50,25 @@
 	packagesStore.subscribe(setPkg);
 	featuredPackages.subscribe(setPkg);
 
-	let bottles: Bottle[] = [];
-	const tabs: Tab[] = [
-		{
-			label: 'details',
-			component: Badges,
-			props: {
-				arg1: 'A1'
-			}
-		},
-		{
-			label: 'versions',
-			component: Bottles,
-			props: {
-				bottles
-			}
-		}
-	];
-
 	onMount(async () => {
 		try {
 			const newBottles = await getPackageBottles(pkg.full_name);
+			const newVersion = newBottles.map((b) => b.version);
+			versions = [...new Set(newVersion)];
+
 			bottles.push(...newBottles);
+			console.log('sync tabs:', versions);
+			tabs = [
+				...tabs,
+				{
+					label: `versions (${versions.length || 0})`,
+					component: Bottles,
+					props: {
+						bottles
+					}
+				}
+			];
+			console.log(tabs);
 		} catch (err) {
 			console.error(err);
 		}
diff --git a/modules/ui/src/Button/Button.svelte b/modules/ui/src/Button/Button.svelte
index 3376f82..b80487e 100644
--- a/modules/ui/src/Button/Button.svelte
+++ b/modules/ui/src/Button/Button.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <button
-	type="button font-sans"
+	type="button"
 	class={`w-full p-2 font-machina text-gray ${clazz} ${active ? 'active' : ''}`}
 	on:click={() => onClick && onClick()}
 >
diff --git a/modules/ui/src/Tabs/Tabs.svelte b/modules/ui/src/Tabs/Tabs.svelte
index 56f4bb5..fe5a502 100644
--- a/modules/ui/src/Tabs/Tabs.svelte
+++ b/modules/ui/src/Tabs/Tabs.svelte
@@ -13,13 +13,17 @@
 			active = tabs[0].label;
 		}
 	});
+
+	console.log('t', tabs);
 </script>
 
 <section class="relative h-auto border border-gray">
 	<menu class="flex border border-gray">
 		{#each tabs as tab}
-			<div class="border border-y-0 border-l-0 border-gray">
-				<Button onClick={() => (active = tab.label)}>{tab.label}</Button>
+			<div class="border border-y-0 border-l-0 border-gray text-white">
+				<Button onClick={() => (active = tab.label)}>
+					<span class={tab.label === active ? 'text-white' : ''}>{tab.label}</span>
+				</Button>
 			</div>
 		{/each}
 	</menu>