New home discover (#483)

discover tab in homepage --------- Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>
2025-04-23 14:07:14 +03:00 · 2023-04-21 16:09:07 +08:00 · 2023-04-21 16:09:07 +08:00 · b1e988023c
commit b1e988023c
parent 8f0b9f4c83
21 changed files with 200 additions and 62 deletions
--- a/modules/desktop/src/components/discover-packages/discover-packages.svelte
+++ b/modules/desktop/src/components/discover-packages/discover-packages.svelte
@ -0,0 +1,77 @@
+<script lang="ts">
+	import "$appcss";
+	// import { t } from '$libs/translations';
+	import { SideMenuOptions } from "$libs/types";
+	import Preloader from "@tea/ui/Preloader/Preloader.svelte";
+	import Package from "$components/packages/package.svelte";
+	import { packagesStore } from "$libs/stores";
+
+	const { packageList: allPackages } = packagesStore;
+	export let packageFilter: SideMenuOptions = SideMenuOptions.discover;
+
+	export let scrollY = 0;
+
+	const onScroll = (e: Event) => {
+		const target = e.target as HTMLInputElement;
+		scrollY = target.scrollTop || 0;
+	};
+
+	$: packages = $allPackages
+    .filter((p) => p.categories.includes(SideMenuOptions.discover))
+    .sort((a, b) => {
+      return a.manual_sorting - b.manual_sorting;
+    });
+  console.log("test",packages)
+</script>
+
+<div class="relative h-full w-full">
+	<ul class="grid grid-cols-2 bg-black"  on:scroll={onScroll}>
+		{#if packages.length > 0}
+			{#each packages as pkg}
+        <div class="z-1 p-1" class:col-span-2={["left", "right"].includes(pkg.card_layout)}>
+          <Package tab={packageFilter} {pkg} layout={pkg.card_layout}/>
+        </div>
+			{/each}
+		{:else}
+			{#each Array(9) as _}
+				<section class="card p-1 h-{238}">
+					<div class="border-gray h-full w-full border">
+						<Preloader />
+					</div>
+				</section>
+			{/each}
+		{/if}
+	</ul>
+</div>
+
+<style>
+	ul {
+		margin-top: 0px;
+		padding-top: 80px;
+		height: calc(100vh - 49px);
+		overflow-y: scroll;
+		overflow-x: hidden;
+		padding-right: 4px;
+	}
+
+	/* width */
+	::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	/* Track */
+	::-webkit-scrollbar-track {
+		background: #272626;
+	}
+
+	/* Handle */
+	::-webkit-scrollbar-thumb {
+		background: #949494;
+		border-radius: 4px;
+	}
+
+	/* Handle on hover */
+	::-webkit-scrollbar-thumb:hover {
+		background: white;
+	}
+</style>
--- a/modules/desktop/src/components/package-card/package-card.svelte
+++ b/modules/desktop/src/components/package-card/package-card.svelte
@ -12,10 +12,11 @@
 	export let link: string;
 	export let progessLoading = 0;

-	$: imgUrl = pkg?.cached_image_url || (!pkg.thumb_image_url.includes("https://tea.xyz")
-		? "https://tea.xyz/Images/package-thumb-nolabel4.jpg"
-		: pkg.thumb_image_url);
+	export let layout: "bottom" | "right" | "left" = "bottom";

+	$: imgUrl = pkg?.cached_image_url || (!pkg.thumb_image_url.includes("https://tea.xyz")
+		? "/images/default-thumb.jpg"
+		: pkg.thumb_image_url);
 	export let onClickCTA = async () => {
 		console.log("do nothing");
 	};
@ -37,22 +38,23 @@
 </script>

 <section
-	class="package-card border-gray relative h-auto border bg-center"
+	class="package-card border-gray relative h-auto border bg-center {layout}"
 	class:active={isActive}
 	style="background-image: url({imgUrl})"
 >
-	<aside class="blur-sm">
+	<aside class="blur-sm {layout}">
 		<figure class="bg-center" style="background-image: url({imgUrl})" />
 	</aside>
 	<a href={link} on:mousedown={activate} on:mouseup={deactivate} on:mouseleave={deactivate}>
-		<div class="package-card-content absolute flex h-full w-full flex-col justify-between">
+		<div class="package-card-content absolute  h-full w-full flex-col justify-between">
 			<div class="hint-container">
 				<div class="hint">
 					<div class="line-clamp-1 text-xs">view more details</div>
 					<div class="hint-icon"><i class="icon-upward-arrow" /></div>
 				</div>
 			</div>
-			<div class="content-container relative">
+			<div class="content-container absolute bottom-0 w-full {layout}"
+			>
 				<article class="card-thumb-label relative">
 					<h3 class="text-bold font-mona line-clamp-1 text-2xl font-bold text-white">
 						{fixPackageName(pkg.name)}
@ -108,6 +110,9 @@
 		background-size: cover;
 		box-sizing: border-box;
 	}
+	section.right {
+		height: 220px;
+	}

 	section.active::before {
 		position: absolute;
@ -129,11 +134,23 @@
 	aside {
 		position: absolute;
 		bottom: 0px;
-		left: 0px;
 		width: 100%;
 		height: 50%;
 		overflow: hidden;
 	}
+	aside.bottom {
+		left: 0px;
+	}
+
+	aside.left {
+		height: 100%;
+		width: 40%;
+	}
+
+	aside.right {
+		height: 100%;
+		width: 60%;
+	}

 	figure {
 		position: absolute;
@ -144,6 +161,14 @@
 		background-size: cover;
 		background-repeat: no-repeat;
 	}
+	aside.right figure {
+		height: 100%;
+		width: 150%;
+	}
+	aside.left figure {
+		height: 100%;
+		width: 250%;
+	}

 	.content-container {
 		height: 50%;
@ -151,16 +176,33 @@
 		display: flex;
 		flex-direction: column;
 		padding: 28px 14px;
-		justify-content: space-between;
+		justify-content: center;
+	}
+	.content-container.bottom {
+		left: 0px;
+	}
+
+	.content-container.left {
+		height: 100%;
+		width: 40%;
+		left: 0px;
+	}
+	.content-container.right {
+		height: 100%;
+		width: 60%;
+		right: 0px;
 	}

 	.hint-container {
+		position: absolute;
+		top: 0px;
+		right: 0px;
 		display: flex;
 		justify-content: flex-end;
 	}

 	.hint {
-		width: auto;
+		min-width: 240px;
 		padding-left: 30%;
 		height: 24px;
 		display: flex;
--- a/modules/desktop/src/components/packages/package.svelte
+++ b/modules/desktop/src/components/packages/package.svelte
@ -8,6 +8,7 @@

 	export let tab = "all";
 	export let pkg: GUIPackage;
+	export let layout: "bottom" | "left" | "right" = "bottom";

 	onMount(() => {
 		packagesStore.fetchPackageBottles(pkg.full_name);
@ -16,6 +17,7 @@

 <PackageCard
 	{pkg}
+	{layout}
 	link="/packages/{pkg.slug}?tab={tab}"
 	progessLoading={pkg.install_progress_percentage}
 	onClickCTA={async () => {
--- a/modules/desktop/src/components/packages/packages.svelte
+++ b/modules/desktop/src/components/packages/packages.svelte
@ -87,7 +87,7 @@
 			{#each packages as pkg, index}
 				{#if index < limit}
 					<div class="card z-1 p-1" class:animate-puls={pkg.state === PackageStates.INSTALLING}>
-						<Package tab={packageFilter} {pkg} />
+						<Package tab={packageFilter} {pkg} layout="vertical"/>
 					</div>
 				{/if}
 			{/each}
--- a/modules/desktop/src/components/search-popup-results/package-search-result.svelte
+++ b/modules/desktop/src/components/search-popup-results/package-search-result.svelte
@ -30,7 +30,7 @@
 		on:click={() => gotoPackagePage()}
 		class="pkg-image h-16 w-16 object-cover"
 		src={!pkg.thumb_image_url.includes("https://tea.xyz")
-			? "https://tea.xyz/Images/package-thumb-nolabel4.jpg"
+			? "/images/default-thumb.jpg"
 			: pkg.thumb_image_url}
 		alt={pkg.name}
 	/>
--- a/modules/desktop/src/components/side-menu/side-menu.svelte
+++ b/modules/desktop/src/components/side-menu/side-menu.svelte
@ -15,7 +15,21 @@
 <aside class="border-gray border border-t-0 border-b-0 border-l-0 p-2">
 	<ul class="flex flex-col gap-1 pt-4 pl-1">
 		<MenuButton
-			label="Installed"
+			label={$t("tags.discover").toLowerCase()}
+			icon="map"
+			active={activeOption === SideMenuOptions.discover}
+			on:click={() => goto(`/?tab=${SideMenuOptions.discover}`)}
+		/>
+		<hr />
+		<MenuButton
+		label={$t("side-menu-title.all").toLowerCase()}
+			icon="grid"
+			active={activeOption === SideMenuOptions.all}
+			on:click={() => goto(`/?tab=${SideMenuOptions.all}`)}
+		/>
+		<hr />
+		<MenuButton
+			label="installed"
 			icon="tea-checkmark"
 			active={activeOption === SideMenuOptions.installed}
 			on:click={() => goto(`/?tab=${SideMenuOptions.installed}`)}
@ -23,7 +37,7 @@
 		<hr />
 		{#if needsUpdateCount}
 			<MenuButton
-				label={$t("tags.installed_updates_available")}
+				label={$t("tags.installed_updates_available").toLowerCase()}
 				icon="update"
 				active={activeOption === SideMenuOptions.installed_updates_available}
 				on:click={() => goto(`/?tab=${SideMenuOptions.installed_updates_available}`)}
@ -33,49 +47,28 @@
 			<hr />
 		{/if}
 		<MenuButton
-			label={$t("tags.recently_updated")}
-			icon="back-in-time"
-			active={activeOption === SideMenuOptions.recently_updated}
-			on:click={() => goto(`/?tab=${SideMenuOptions.recently_updated}`)}
-		/>
-		<hr />
-		<MenuButton
-			label={$t("tags.new_packages")}
+			label={$t("tags.new_packages").toLowerCase()}
 			icon="birthday-cake"
 			active={activeOption === SideMenuOptions.new_packages}
 			on:click={() => goto(`/?tab=${SideMenuOptions.new_packages}`)}
 		/>
 		<hr />
 		<MenuButton
-			label={$t("tags.popular")}
+			label={$t("tags.popular").toLowerCase()}
 			icon="bar-chart"
 			active={activeOption === SideMenuOptions.popular}
 			on:click={() => goto(`/?tab=${SideMenuOptions.popular}`)}
 		/>
 		<hr />
 		<MenuButton
-			label={$t("tags.featured")}
-			icon="lightbulb"
-			active={activeOption === SideMenuOptions.featured}
-			on:click={() => goto(`/?tab=${SideMenuOptions.featured}`)}
+			label={$t("tags.recently_updated").toLowerCase()}
+			icon="back-in-time"
+			active={activeOption === SideMenuOptions.recently_updated}
+			on:click={() => goto(`/?tab=${SideMenuOptions.recently_updated}`)}
 		/>
 		<hr />
 		<MenuButton
-			label={$t("tags.essentials")}
-			icon="square"
-			active={activeOption === SideMenuOptions.essentials}
-			on:click={() => goto(`/?tab=${SideMenuOptions.essentials}`)}
-		/>
-		<hr />
-		<MenuButton
-			label={$t("tags.starstruck")}
-			icon="star-full"
-			active={activeOption === SideMenuOptions.starstruck}
-			on:click={() => goto(`/?tab=${SideMenuOptions.starstruck}`)}
-		/>
-		<hr />
-		<MenuButton
-			label={$t("tags.made_by_tea")}
+			label={$t("tags.made_by_tea").toLowerCase()}
 			icon="tea-logo-iconasset-1"
 			active={activeOption === SideMenuOptions.made_by_tea}
 			on:click={() => goto(`/?tab=${SideMenuOptions.made_by_tea}`)}
--- a/modules/desktop/src/libs/native-electron.ts
+++ b/modules/desktop/src/libs/native-electron.ts
@ -262,6 +262,7 @@ export const topbarDoubleClick = async () => {
 };

 export const cacheImageURL = async (url: string): Promise<string | undefined> => {
+	if (!url) return "";
 	try {
 		const cachedSrc = await ipcRenderer.invoke("cache-image", url);
 		return cachedSrc;
--- a/modules/desktop/src/libs/stores/pkgs.ts
+++ b/modules/desktop/src/libs/stores/pkgs.ts
@ -252,9 +252,11 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
 	});

 	const cachePkgImage = async (pkg: GUIPackage) => {
-		const cacheFileURL = await cacheImageURL(pkg.thumb_image_url);
-		if (cacheFileURL) {
-			updatePackage(pkg.full_name, { cached_image_url: cacheFileURL });
+		if (pkg.thumb_image_url && !pkg.thumb_image_url.includes("package-thumb-nolabel4.jpg")) {
+			const cacheFileURL = await cacheImageURL(pkg.thumb_image_url);
+			if (cacheFileURL) {
+				updatePackage(pkg.full_name, { cached_image_url: cacheFileURL });
+			}
 		}
 	};

--- a/modules/desktop/src/libs/translations/translations.json
+++ b/modules/desktop/src/libs/translations/translations.json
@ -53,6 +53,7 @@
 			"gui-downloaded": "A new tea gui({{version}}) is now available. Relaunch the app to update."
 		},
 		"side-menu-title": {
+			"discover": "discover",
 			"all": "All Packages",
 			"installed": "Installed Packages",
 			"installed_updates_available": "Available Updates",
@ -62,9 +63,10 @@
 			"featured": "Featured",
 			"essentials": "Essentials",
 			"starstruck": "Starstruck Heavyweights",
-			"made_by_tea": "Made by Tea.xyz"
+			"made_by_tea": "made by tea"
 		},
 		"tags": {
+			"discover": "discover",
 			"all": "all",
 			"installed": "installed",
 			"installed_updates_available": "Updates available",
@ -74,7 +76,7 @@
 			"featured": "Featured",
 			"essentials": "Essentials",
 			"starstruck": "Starstruck",
-			"made_by_tea": "Made by tea.xyz"
+			"made_by_tea": "Made by tea"
 		}
 	}
 }
--- a/modules/desktop/src/libs/types.ts
+++ b/modules/desktop/src/libs/types.ts
@ -60,6 +60,7 @@ export interface Session {
 }

 export enum SideMenuOptions {
+	discover = "discover",
 	all = "all",
 	installed = "installed",
 	installed_updates_available = "installed_updates_available",
--- a/modules/desktop/src/routes/+page.svelte
+++ b/modules/desktop/src/routes/+page.svelte
@ -6,6 +6,7 @@
 	import { afterNavigate } from "$app/navigation";
 	import { packagesStore, navStore } from "$libs/stores";
 	import Packages from "$components/packages/packages.svelte";
+	import DiscoverPackages from "$components/discover-packages/discover-packages.svelte";
 	import { PackageStates, SideMenuOptions, type GUIPackage } from "$libs/types";
 	// import SortingButtons from "$components/search-packages/sorting-buttons.svelte";
 	import SideMenu from "$components/side-menu/side-menu.svelte";
@ -20,7 +21,7 @@

 	const url = $page.url;

-	let sideMenuOption = (url.searchParams.get("tab") as SideMenuOptions) || SideMenuOptions.all;
+	let sideMenuOption = (url.searchParams.get("tab") as SideMenuOptions) || SideMenuOptions.discover;

 	let sortBy: "popularity" | "most recent" = "most recent";
 	let sortDirection: "asc" | "desc" = "desc";
@ -46,13 +47,12 @@
 		sideMenuOption = SideMenuOptions.all;
 	}

-	$: teaPkg = $packageList.find((p) => p.full_name === "tea.xyz");
 	$: needsUpdateCount = pkgsToUpdate.length;

 	afterNavigate(({ from, to }) => {
 		if (to?.url?.pathname === "/") {
 			const tab = to.url.searchParams.get("tab");
-			sideMenuOption = !tab ? SideMenuOptions.all : (tab as SideMenuOptions);
+			sideMenuOption = !tab ? SideMenuOptions.discover : (tab as SideMenuOptions);
 		}
 	});
 </script>
@ -61,16 +61,22 @@
 	<NotificationBar />
 	<article class="relative h-auto w-full flex-grow overflow-hidden">
 		<ul class="px-2">
-			<Packages
-				packageFilter={sideMenuOption}
-				{sortBy}
-				{sortDirection}
-				bind:scrollY={packagesScrollY}
-			/>
+			{#if sideMenuOption == SideMenuOptions.discover}
+				<DiscoverPackages 
+					bind:scrollY={packagesScrollY}
+				/>
+			{:else}
+				<Packages
+					packageFilter={sideMenuOption}
+					{sortBy}
+					{sortDirection}
+					bind:scrollY={packagesScrollY}
+				/>
+			{/if}
 		</ul>
 		<header class="z-30 flex items-center justify-between" class:scrolling={packagesScrollY > 150}>
 			<h1 class="text-primary font-mona pl-3 text-2xl font-bold">
-				{$t(`side-menu-title.${sideMenuOption}`)}
+				{$t(`side-menu-title.${sideMenuOption}`).toUpperCase()}
 			</h1>
 			<!-- 
 			<section class="border-gray mt-4 mr-4 h-10 w-48 border rounded-sm">
--- a/modules/desktop/src/routes/packages/[slug]/+page.svelte
+++ b/modules/desktop/src/routes/packages/[slug]/+page.svelte
@ -58,7 +58,7 @@
 	<a class="hover:text-white hover:opacity-80" href="/">{$t("common.home")}</a>
 	>
 	{#if tab && tab !== "all"}
-		<a class="hover:text-white hover:opacity-80" href="/?tab={tab || "all"}">{$t(`tags.${tab}`) || "all"}</a>
+		<a class="hover:text-white hover:opacity-80" href="/?tab={tab || "all"}">{$t(`tags.${tab}`).toLowerCase() || "all"}</a>
 		>
 	{/if}
 	<span class="text-white">{pkg?.full_name}</span>
--- a/modules/desktop/static/images/default-thumb.jpg
+++ b/modules/desktop/static/images/default-thumb.jpg
--- a/modules/ui/src/gallery/gallery-item.svelte
+++ b/modules/ui/src/gallery/gallery-item.svelte
@ -11,9 +11,7 @@
 <figure class="gallery-item relative h-full w-full" style={`width:${width}px`}>
 	<ImgLoader
 		class="featured-img"
-		src={!imageUrl.includes("https://tea.xyz")
-			? "https://tea.xyz/Images/package-thumb-nolabel4.jpg"
-			: imageUrl}
+		src={!imageUrl.includes("https://tea.xyz") ? "/images/default-thumb.jpg" : imageUrl}
 		alt={title}
 	/>

--- a/modules/ui/src/icons/fonts/tea-icons.eot
+++ b/modules/ui/src/icons/fonts/tea-icons.eot
--- a/modules/ui/src/icons/fonts/tea-icons.svg
+++ b/modules/ui/src/icons/fonts/tea-icons.svg
@ -61,4 +61,7 @@
 <glyph glyph-name="cog" unicode="&#90;" d="M329 256c0 20-7 37-21 52-15 14-32 21-52 21-20 0-37-7-52-21-14-15-21-32-21-52 0-20 7-37 21-52 15-14 32-21 52-21 20 0 37 7 52 21 14 15 21 32 21 52z m146 31l0-63c0-3 0-5-2-7-1-2-3-3-6-4l-52-8c-4-10-8-19-12-26 7-9 17-22 31-39 2-2 3-5 3-7 0-3-1-5-3-7-5-7-14-17-28-31-14-13-23-20-27-20-2 0-5 1-7 3l-40 31c-8-5-17-8-26-11-3-26-6-44-8-53-1-6-5-8-10-8l-64 0c-2 0-5 0-7 2-2 2-3 4-3 6l-8 53c-9 3-18 6-26 10l-40-30c-2-2-4-3-7-3-3 0-5 1-7 3-24 22-40 38-47 48-2 2-2 4-2 7 0 2 0 4 2 6 3 4 8 11 14 19 7 9 12 16 16 21-5 9-9 19-12 28l-52 8c-3 0-5 1-6 3-2 2-2 4-2 7l0 63c0 3 0 5 2 7 1 2 3 3 5 4l53 8c3 8 7 17 12 26-8 11-18 24-31 39-2 3-3 5-3 7 0 2 1 4 3 7 5 7 14 17 28 30 14 14 23 21 27 21 2 0 5-1 7-3l40-31c8 5 17 8 26 11 3 26 6 44 8 53 1 6 5 8 10 8l64 0c2 0 5 0 7-2 2-2 3-4 3-6l8-53c9-3 18-6 26-10l40 30c2 2 4 3 7 3 3 0 5-1 7-3 25-23 41-39 47-49 2-1 2-3 2-6 0-2 0-4-2-6-3-4-8-11-14-19-7-9-12-16-16-21 5-9 9-18 12-28l52-8c3 0 5-1 6-3 2-2 2-4 2-7z"/>
 <glyph glyph-name="bug" unicode="&#48;" d="M421 246l90 0 0 51-90 0 0 2c0 21-5 40-11 59l72 56-31 40-67-52c-30 37-76 62-128 62-52 0-98-25-128-62l-67 51-31-40 72-56c-6-18-11-37-11-58l0-2-91 0 0-52 91 0 0-2c0-20 4-40 11-58l-73-56 32-40 67 52c30-38 75-62 127-62 52 0 98 24 128 61l67-52 31 40-72 56c7 19 11 38 11 59l0 2z m-166-115c-62 0-113 51-113 114l0 55c0 63 51 114 113 114 62 0 114-51 114-114l0-55c0-63-51-114-114-114z m-39 175c-14 0-26-12-26-26l0-18c0-15 12-26 26-26 15 0 26 11 26 26l0 18c0 14-11 26-26 26z m80 0c-15 0-26-12-26-26l0-18c0-15 11-26 26-26 14 0 26 11 26 26l0 18c0 14-12 26-26 26z"/>
 <glyph glyph-name="gear" unicode="&#49;" d="M512 224l0 65-47 0c-5 34-18 66-38 92l33 33-46 46-33-33c-26 20-58 33-91 38l0 47-65 0 0-47c-35-5-66-18-93-38l-33 33-45-46 32-33c-19-26-32-58-38-92l-48 0 0-65 47 0c5-35 18-66 38-93l-33-32 46-46 33 33c26-20 58-33 92-38l0-48 65 0 0 48c34 5 66 18 92 38l33-33 45 46-32 32c19 27 32 58 38 93z m-256-115c-81 0-147 66-147 147 0 81 66 147 147 147 81 0 147-66 147-147 0-81-66-147-147-147z"/>
+<glyph glyph-name="apple" unicode="&#50;" d="M453 165c-8-24-19-48-35-72-25-37-49-56-74-56-9 0-22 3-40 10-16 6-30 9-43 9-11 0-25-3-40-10-16-6-28-9-38-9-29 0-58 24-86 74-28 49-42 97-42 143 0 44 11 79 32 107 21 28 49 41 81 41 14 0 31-3 51-8 20-6 33-9 39-9 9 0 22 3 41 10 20 6 36 10 50 10 22 0 43-7 60-19 10-7 20-16 30-29-15-12-26-24-32-33-13-18-19-38-19-59 0-24 7-45 20-64 13-19 28-31 45-36z m-108 335c0-12-2-25-8-39-6-14-14-27-26-39-11-11-21-17-31-21-7-2-17-4-30-5 1 29 8 53 22 74 14 20 38 34 72 42 0-1 0-2 0-3 1-2 1-3 1-3 0-1 0-2 0-3 0-1 0-2 0-3z"/>
+<glyph glyph-name="map" unicode="&#51;" d="M146 512c3 0 5-1 7-3 2-2 2-4 2-6l0-421c0-4-1-6-4-8l-138-73c-1-1-2-1-4-1-2 0-4 1-6 3-2 2-3 4-3 6l0 421c0 4 2 6 5 8l137 73c1 1 3 1 4 1z m357 0c2 0 4-1 6-3 2-2 3-4 3-6l0-421c0-4-2-6-5-8l-137-73c-1-1-3-1-4-1-3 0-5 1-7 3-2 2-2 4-2 6l0 421c0 4 1 6 4 8l138 73c1 1 2 1 4 1z m-320 0c1 0 3 0 4-1l146-73c4-2 5-5 5-8l0-421c0-2-1-4-2-6-2-2-4-3-7-3-1 0-3 0-4 1l-146 73c-4 2-5 5-5 8l0 421c0 2 1 4 2 6 2 2 4 3 7 3z"/>
+<glyph glyph-name="grid" unicode="&#52;" d="M21 469l0-448 448 0 0 448z m405-149l-106 0 0 107 106 0z m0-128l-106 0 0 107 106 0z m0-128l-106 0 0 107 106 0z m-362 107l107 0 0-107-107 0z m0 128l107 0 0-107-107 0z m0 128l107 0 0-107-107 0z m234-107l-106 0 0 107 106 0 0-107z m0-128l-106 0 0 107 106 0 0-107z m-106-21l106 0 0-107-106 0z"/>
 </font></defs></svg>
--- a/modules/ui/src/icons/fonts/tea-icons.ttf
+++ b/modules/ui/src/icons/fonts/tea-icons.ttf
--- a/modules/ui/src/icons/fonts/tea-icons.woff
+++ b/modules/ui/src/icons/fonts/tea-icons.woff
--- a/modules/ui/src/icons/icons.css
+++ b/modules/ui/src/icons/icons.css
@ -199,3 +199,12 @@
 .icon-gear:before {
 	content: "\31";
 }
+.icon-apple:before {
+	content: "\32";
+}
+.icon-map:before {
+	content: "\33";
+}
+.icon-grid:before {
+	content: "\34";
+}
--- a/modules/ui/src/mini-package-card/mini-package-card.svelte
+++ b/modules/ui/src/mini-package-card/mini-package-card.svelte
@ -18,7 +18,7 @@
 		<ImgLoader
 			class="pkg-image object-contain"
 			src={!pkg.thumb_image_url.includes("https://tea.xyz")
-				? "https://tea.xyz/Images/package-thumb-nolabel4.jpg"
+				? "/images/default-thumb.jpg"
 				: pkg.thumb_image_url}
 			alt={pkg.name}
 		/>
--- a/modules/ui/src/types.ts
+++ b/modules/ui/src/types.ts
@ -32,6 +32,8 @@ export interface Package {
 	github?: string;
 	contributors?: Contributor[];
 	readme_md?: string;
+	manual_sorting: number;
+	card_layout: "bottom" | "right" | "left";
 }

 export type AirtablePost = {