infinite scroll + fadeaway (#351)

* #312 init infinite scroll * #312 adjust header heights --------- Co-authored-by: neil molina <neil@neils-MacBook-Pro.local>
2025-04-23 14:07:14 +03:00 · 2023-03-29 12:44:39 +08:00 · 2023-03-29 12:44:39 +08:00 · 8381cd8bff
commit 8381cd8bff
parent d6dbffa6e5
8 changed files with 75 additions and 35 deletions
--- a/modules/desktop/package.json
+++ b/modules/desktop/package.json
@ -100,6 +100,7 @@
 		"pushy-electron": "^1.0.11",
 		"renderer": "link:@types/electron/renderer",
 		"semver": "^7.3.8",
+		"svelte-infinite-scroll": "^2.0.1",
 		"svelte-markdown": "^0.2.3",
 		"svelte-watch-resize": "^1.0.3",
 		"sveltekit-i18n": "^2.2.2",
--- a/modules/desktop/src/components/packages/package.svelte
+++ b/modules/desktop/src/components/packages/package.svelte
@ -9,6 +9,7 @@
  import { packagesStore, notificationStore } from '$libs/stores';
  import { onMount } from 'svelte';
 	import semverCompare from "semver/functions/compare";
+	import { clean } from "semver";

 	export let tab = "all";
 	export let pkg: GUIPackage;
@ -71,7 +72,11 @@
 			versionSet.add(b.version)
 		}

-		return Array.from(versionSet).sort((a, b) => semverCompare(b, a));
+		return Array.from(versionSet).sort((a, b) => semverCompare(cleanVersion(b), cleanVersion(a)));
+	}
+
+	const cleanVersion = (version: string) => {
+		return clean(version) || '0.0.0';
 	}

 	onMount(() => {
--- a/modules/desktop/src/components/packages/packages.svelte
+++ b/modules/desktop/src/components/packages/packages.svelte
@ -1,5 +1,6 @@
 <script lang="ts">
 	import '$appcss';
+	import InfiniteScroll from "svelte-infinite-scroll";
 	// import { t } from '$libs/translations';
 	import type { GUIPackage } from '$libs/types';
 	import moment from "moment";
@ -14,6 +15,8 @@
 	export let sortBy: "popularity" | "most recent" = 'popularity';
 	export let sortDirection: 'asc' | 'desc' = 'desc';

+	export let scrollY = 0;
+
 	const loadMore = 9;
 	let limit = loadMore;

@ -35,6 +38,11 @@
 		[SideMenuOptions.made_by_tea]: (pkg: GUIPackage) => pkg.full_name.includes("tea.xyz"),
 	}

+	const onScroll = (e: Event) => {
+		const target = e.target as HTMLInputElement;
+		scrollY = target.scrollTop || 0;
+	}
+
 	$: packages = $allPackages
 		.filter(pkgFilters[packageFilter] || pkgFilters.all)
 		.sort((a, b) => {
@ -52,7 +60,9 @@
 </script>

 <div>
-	<ul class="grid grid-cols-3 gap-2 bg-black">
+	<ul class="grid grid-cols-3 gap-2 bg-black"
+		on:scroll={onScroll}
+	>
 		{#if packages.length > 0}
 			{#each packages as pkg, index}
 				{#if index < limit}
@ -72,26 +82,38 @@
 				</section>
 			{/each}
 		{/if}
+		<InfiniteScroll threshold={100} on:loadMore={() => limit += loadMore} />
 	</ul>
-	{#if limit < packages.length }
-	<footer class="w-full flex border border-gray h-16">
-		<button class="flex-grow h-16" on:click={() => limit += loadMore }>show more</button>
-	</footer>
-	{/if}
 </div>

 <style>
-	button {
-		height: 100%;
-		text-decoration: none;
-		min-width: 120px;
-		transition: 0.1s linear;
+	ul {
+		margin-top: 0px;
+		padding-top: 60px;
+		max-height: calc(100vh - 95px);
+		overflow-y: scroll;
+		overflow-x: hidden;
+		padding-right: 4px;
 	}

-	button:hover, button.active {
-		color: white;
-		background-color: #8000ff;
-		box-shadow: inset 0vw 0vw 0vw 0.223vw #1a1a1a !important;
-		box-sizing: border-box;
+	/* 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/side-menu/side-menu.svelte
+++ b/modules/desktop/src/components/side-menu/side-menu.svelte
@ -60,10 +60,10 @@

 <style>
 	aside {
-		position: fixed;
-		top: 48px;
+		position: absolute;
 		left: 0px;
-		height: calc(100% - 40px - 35px); /* win.height - title-bar.height - footer.height */
+		top: 0px;
+		height: calc(100vh - 48px - 27px); /* win.height - title-bar.height - footer.height */
 		width: 190px;
 		box-sizing: border-box;
 	}
--- a/modules/desktop/src/routes/+layout.svelte
+++ b/modules/desktop/src/routes/+layout.svelte
@ -44,7 +44,7 @@

 <div id="main-layout" class={`${$sideNavOpen ? "w-3/4" : "w-full"} transition-all font-inter`}>
 	<TopBar />
-	<section class="relative pt-4" bind:this={view}>
+	<section class="relative" bind:this={view}>
 		<div class="content p-2">
 			<slot/>
 		</div>
@ -64,7 +64,7 @@
 	}
 	section {
 		height: calc(100vh - 50px - 25px); /* win.height - header - footer */
-		overflow-y: scroll;
+		overflow-y: auto;
 		box-sizing: border-box;
 	}

--- a/modules/desktop/src/routes/+page.svelte
+++ b/modules/desktop/src/routes/+page.svelte
@ -27,6 +27,8 @@

 	let updating = false;

+	let packagesScrollY = 0;
+
 	$: pkgsToUpdate = $packages.filter((p: GUIPackage) => p.state === PackageStates.NEEDS_UPDATE);
 	async function updateAll() {
 		updating = true;
@ -47,13 +49,12 @@
 </script>

 <div id="package-container">
-	<Packages packageFilter={sideMenuOption} {sortBy} {sortDirection}/>
+	<Packages packageFilter={sideMenuOption} {sortBy} {sortDirection} bind:scrollY={packagesScrollY}/>
 </div>
-<SideMenu bind:activeOption={sideMenuOption}/>
-<header class={`transition-all px-2 flex flex-col ${$sideNavOpen ? "min": ""}`}>
+<header class={`transition-all px-2 flex flex-col ${$sideNavOpen ? "min": ""} ${packagesScrollY > 100 && 'scrolling'}`}>
 	<NotificationBar />
 	<div class="flex justify-between items-center align-middle">
-		<h1 class="text-primary mt-4 pl-3 text-2xl font-bold font-mona">{$t(`side-menu-title.${sideMenuOption}`)}</h1>
+		<h1 class="text-primary pl-3 text-2xl font-bold font-mona">{$t(`side-menu-title.${sideMenuOption}`)}</h1>
 		<!-- 
 		<section class="border-gray mt-4 mr-4 h-10 w-48 border rounded-sm">
 			
@ -76,32 +77,37 @@
 		{/if}
 	</div>
 </header>
-
+<SideMenu bind:activeOption={sideMenuOption}/>
 {#if $requireTeaCli }
 	<WelcomeModal tea={teaPkg} />
 {/if}
 <style>
 	#package-container {
-		padding-top: 50px;
 		width: calc(100% - 200px);
 		margin-left: 200px;
 	}

 	header {
-		position: fixed;
-		top: 48px;
+		position: absolute;
+		top: 0px;
 		left: 190px;
-		height: 150px;
-		width: calc(100% - 190px);
+		height: 72px;
+		width: calc(100% - 190px - 18px);
 		background-image: linear-gradient(rgba(26,26,26,1), rgba(26,26,26,0));
-		padding-bottom: 80px;
+		padding-top: 15px;
 	}

 	header.lower {
-		top: 80px;
+		top: 32px;
 	}

 	header.min {
 		width: calc(75% - 190px);
 	}
+
+	header.scrolling {
+		height: 60px;
+		background-color: rgba(26,26,26,1);
+		padding-top: 5px;
+	}
 </style>
--- a/modules/desktop/src/routes/packages/[slug]/+page.svelte
+++ b/modules/desktop/src/routes/packages/[slug]/+page.svelte
@ -64,7 +64,7 @@

 	const tab = url.searchParams.get("tab");
 </script>
-<header class="mx-16 pb-5 mb-10 text-gray border border-x-0 border-t-0">
+<header class="mx-16 py-5 mb-10 text-gray border border-x-0 border-t-0">
 	<a class="hover:text-white hover:opacity-80 cursor-default" href="/">home</a>
 	>
 	{#if tab !== "all"}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -73,6 +73,7 @@ importers:
      semver: ^7.3.8
      svelte: ^3.55.1
      svelte-check: ^2.8.0
+      svelte-infinite-scroll: ^2.0.1
      svelte-markdown: ^0.2.3
      svelte-preprocess: ^5.0.1
      svelte-watch-resize: ^1.0.3
@ -114,6 +115,7 @@ importers:
      pushy-electron: 1.0.11
      renderer: link:@types/electron/renderer
      semver: 7.3.8
+      svelte-infinite-scroll: 2.0.1
      svelte-markdown: 0.2.3_svelte@3.55.1
      svelte-watch-resize: 1.0.3
      sveltekit-i18n: 2.2.2_svelte@3.55.1
@ -12004,6 +12006,10 @@ packages:
      svelte: 3.55.1
    dev: true

+  /svelte-infinite-scroll/2.0.1:
+    resolution: {integrity: sha512-goTHCfOHRDCs8C5MeSuIc6LlAQ8zVQ+M4Y3LyvrDjx5rqSSxSrdCuQwIyWYNcO6j6/mnqRro3QB64ClBzfn+Wg==}
+    dev: false
+
  /svelte-markdown/0.2.3_svelte@3.55.0:
    resolution: {integrity: sha512-2h680NzTXnAD0CXhxe3GeHl6W+ayG4iKQRl+BIDRw+R0mUE0OiNxP1Vt8Rn+aWevB/LBiBIPCAwvL+0BkG057A==}
    peerDependencies: