Merge pull request #141 from teaxyz/nav-history

#134 prev next buttons in topbar are working correctly

modules/gui/src/components/TopBar/TopBar.svelte

@@ -7,7 +7,7 @@
 
 	import ProfileNavButton from './ProfileNavButton.svelte';
 
-	let backLink = navStore.backLink;
+	let { nextPath, prevPath } = navStore;
 
 	const onSearch = (term: string) => {
 		searchStore.search(term);
@@ -23,9 +23,9 @@
 	<a href="/">
 		<img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
 	</a>
-	<ul id="PrevNextButtons" class="flex h-10 gap-4 pl-4 align-middle leading-10 text-gray">
-		<a href={$backLink} class={currentPath !== '/' ? 'active' : ''}>&#8592</a>
-		<a href={$backLink} class={currentPath === '/' ? 'active' : ''}>&#8594</a>
+	<ul class="flex h-10 gap-4 pl-4 align-middle leading-10 text-gray">
+		<button on:click={navStore.back} class={$prevPath ? 'active' : ''}>&#8592</button>
+		<button on:click={navStore.next} class={$nextPath ? 'active' : ''}>&#8594</button>
 	</ul>
 	<SearchInput
 		class="flex-grow border border-none py-4"
@@ -64,7 +64,12 @@
 		color: white;
 	}
 
-	#PrevNextButtons a.active {
+	ul button {
+		pointer-events: none;
+	}
+
+	ul button.active {
 		color: white;
+		pointer-events: all;
 	}
 </style>

modules/gui/src/libs/stores/nav.ts

@@ -1,10 +1,55 @@
 import { writable } from 'svelte/store';
+import { goto } from '$app/navigation';
 
 export default function initNavStore() {
-	const backLink = writable<string>('/');
+	const historyStore = writable<string[]>(['/']);
+	let history = ['/'];
+
+	historyStore.subscribe((v) => (history = v));
+
+	const prevPathStore = writable<string>('');
+	const nextPathStore = writable<string>('');
+
+	let currentIndex = 0; // if non next/back click
+
+	let isMovingNext = false;
+	let isMovingBack = false;
 
 	return {
-		backLink,
-		set: (newlink: string) => backLink.set(newlink)
+		historyStore,
+		prevPath: prevPathStore,
+		nextPath: nextPathStore,
+		next: () => {
+			if (currentIndex < history.length - 1) {
+				isMovingNext = true;
+				goto(history[currentIndex + 1]);
+				prevPathStore.set(history[currentIndex]);
+				currentIndex++;
+				if (currentIndex >= history.length - 1) nextPathStore.set('');
+			}
+		},
+		back: () => {
+			if (currentIndex > 0) {
+				isMovingBack = true;
+				goto(history[currentIndex - 1]);
+				nextPathStore.set(history[currentIndex]);
+				currentIndex--;
+				if (currentIndex === 0) prevPathStore.set('');
+			}
+		},
+		setNewPath: (newNextPath: string, newPrevPath: string) => {
+			const oldCurrentPath = history[currentIndex];
+			const isNavArrows = isMovingBack || isMovingNext;
+			if (!isNavArrows && newNextPath !== oldCurrentPath) {
+				historyStore.update((history) => {
+					const cleanHistory = history.filter((_v, i) => i <= currentIndex);
+					currentIndex = cleanHistory.length;
+					prevPathStore.set(cleanHistory[currentIndex - 1]);
+					return [...cleanHistory, newNextPath];
+				});
+			}
+			isMovingNext = false;
+			isMovingBack = false;
+		}
 	};
 }

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

@@ -2,14 +2,24 @@
 <script lang="ts">
 	import '$appcss';
 	import { navigating } from '$app/stores';
+	import { afterNavigate } from '$app/navigation';
 	import TopBar from '$components/TopBar/TopBar.svelte';
 	import FooterLinks from '$components/FooterLinks/FooterLinks.svelte';
+	import { navStore } from '$libs/stores';
 
 	import SearchPopupResults from '$components/SearchPopupResults/SearchPopupResults.svelte';
 
 	let view: HTMLElement;
 
 	$: if ($navigating) view.scrollTop = 0;
+
+	afterNavigate(({ from, to }) => {
+		if (to?.route.id) {
+			const nextPath = to.url.href.replace(to.url.origin, '');
+			const fromPath = from?.url.href.replace(from.url.origin, '');
+			navStore.setNewPath(nextPath, fromPath || '/');
+		}
+	});
 </script>
 
 <div id="main-layout" class="w-full">

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

@@ -1,14 +1,12 @@
 <!-- home / discover / welcome page -->
 <script lang="ts">
 	import '$appcss';
-	import { backLink } from '$libs/stores';
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import FeaturedPackages from '$components/FeaturedPackages/FeaturedPackages.svelte';
 	import GettingStarted from '$components/GettingStarted/GettingStarted.svelte';
 	import TopPackages from '$components/TopPackages/TopPackages.svelte';
 	import News from '$components/News/News.svelte';
 	import CategorizedPackages from '$components/CategorizedPackages/CategorizedPackages.svelte';
-	backLink.set('');
 </script>
 
 <div>

modules/gui/src/routes/cli/+page.svelte

@@ -3,8 +3,6 @@
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import CliBanner from '$components/CliBanner/CliBanner.svelte';
 	import BigBlackSpace from '$components/BigBlackSpace/BigBlackSpace.svelte';
-	import { navStore } from '$libs/stores';
-	navStore.set('/');
 </script>
 
 <div>

modules/gui/src/routes/documentation/+page.svelte

@@ -3,8 +3,6 @@
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import FeaturedCourses from '$components/FeaturedCourses/FeaturedCourses.svelte';
 	import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte';
-	import { navStore } from '$libs/stores';
-	navStore.set('/');
 </script>
 
 <div>

modules/gui/src/routes/packages/+page.svelte

@@ -2,8 +2,6 @@
 	import '$appcss';
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import SearchPackages from '$components/SearchPackages/SearchPackages.svelte';
-	import { navStore } from '$libs/stores';
-	navStore.set('/');
 </script>
 
 <div>

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

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import '$appcss';
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
-	import { navStore, packagesReviewStore } from '$libs/stores';
+	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 SuggestedPackages from '$components/SuggestedPackages/SuggestedPackages.svelte';
-	navStore.set('/packages');
 
 	/** @type {import('./$types').PageData} */
 	export let data;

modules/gui/src/routes/profile/+page.svelte

@@ -5,8 +5,6 @@
 	import Preflight from '$components/Preflight/Preflight.svelte';
 	import Badges from '$components/Badges/Badges.svelte';
 	import InstalledPackages from '$components/InstalledPackages/InstalledPackages.svelte';
-	import { navStore } from '$libs/stores';
-	navStore.set('/');
 </script>
 
 <div>