From 0c7c1e8612b77f6190dcc15ff9c291661ff647d8 Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Mon, 4 Nov 2024 16:14:47 -0500
Subject: [PATCH] feat: add cross-page transition for ext store back button
 with gasp Flip

---
 .../desktop/src/routes/extension/store/+layout.svelte |  6 ++++--
 apps/desktop/src/routes/extension/store/+page.svelte  |  7 +------
 .../routes/extension/store/[identifier]/+page.svelte  | 10 +++++++++-
 .../ui/src/components/extension/StoreListing.svelte   | 11 ++++++++---
 packages/ui/src/constants.ts                          |  3 ++-
 5 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/apps/desktop/src/routes/extension/store/+layout.svelte b/apps/desktop/src/routes/extension/store/+layout.svelte
index f1c04bd..965001f 100644
--- a/apps/desktop/src/routes/extension/store/+layout.svelte
+++ b/apps/desktop/src/routes/extension/store/+layout.svelte
@@ -8,7 +8,9 @@
 	let flipState: Flip.FlipState
 
 	beforeNavigate(() => {
-		flipState = Flip.getState(`.${Constants.CLASSNAMES.EXT_LOGO}`)
+		flipState = Flip.getState(
+			`.${Constants.CLASSNAMES.EXT_LOGO}, .${Constants.CLASSNAMES.BACK_BUTTON}`
+		)
 	})
 
 	afterNavigate(() => {
@@ -17,7 +19,7 @@
 		}
 
 		Flip.from(flipState, {
-			targets: ".kk-ext-logo",
+			targets: `.${Constants.CLASSNAMES.EXT_LOGO}, .${Constants.CLASSNAMES.BACK_BUTTON}`,
 			duration: 0.5,
 			absolute: true,
 			scale: true,
diff --git a/apps/desktop/src/routes/extension/store/+page.svelte b/apps/desktop/src/routes/extension/store/+page.svelte
index 74f3680..d61bbe0 100644
--- a/apps/desktop/src/routes/extension/store/+page.svelte
+++ b/apps/desktop/src/routes/extension/store/+page.svelte
@@ -2,18 +2,13 @@
 	import { getExtensionsFolder } from "@/constants"
 	import { appState, extensions } from "@/stores"
 	import { supabaseAPI } from "@/supabase"
-	import { goBackOnEscape, goBackOnEscapeClearSearchTerm } from "@/utils/key"
+	import { goBackOnEscapeClearSearchTerm } from "@/utils/key"
 	import { goBack } from "@/utils/route"
-	import { isCompatible } from "@kksh/api"
 	import { SBExt } from "@kksh/api/supabase"
 	import { isUpgradable } from "@kksh/extension"
-	import { Command } from "@kksh/svelte5"
 	import { StoreListing } from "@kksh/ui/extension"
-	import { greaterThan, parse as parseSemver } from "@std/semver"
 	import { goto } from "$app/navigation"
-	import { onMount } from "svelte"
 	import { toast } from "svelte-sonner"
-	import { get } from "svelte/store"
 	import { type PageData } from "./$types"
 
 	let { data }: { data: PageData } = $props()
diff --git a/apps/desktop/src/routes/extension/store/[identifier]/+page.svelte b/apps/desktop/src/routes/extension/store/[identifier]/+page.svelte
index 23d82af..67ce854 100644
--- a/apps/desktop/src/routes/extension/store/[identifier]/+page.svelte
+++ b/apps/desktop/src/routes/extension/store/[identifier]/+page.svelte
@@ -4,6 +4,8 @@
 	import { supabaseAPI } from "@/supabase"
 	import { goBack } from "@/utils/route.js"
 	import { Button } from "@kksh/svelte5"
+	import { cn } from "@kksh/svelte5/utils"
+	import { Constants } from "@kksh/ui"
 	import { StoreExtDetail } from "@kksh/ui/extension"
 	import { greaterThan, parse as parseSemver } from "@std/semver"
 	import { error } from "@tauri-apps/plugin-log"
@@ -139,7 +141,13 @@
 
 <svelte:window on:keydown={handleKeydown} />
 
-<Button variant="outline" size="icon" class="fixed left-3 top-3" onclick={goBack}>
+<Button
+	variant="outline"
+	size="icon"
+	class={cn("fixed left-3 top-3", Constants.CLASSNAMES.BACK_BUTTON)}
+	data-flip-id={Constants.CLASSNAMES.BACK_BUTTON}
+	onclick={goBack}
+>
 	<ArrowLeftIcon />
 </Button>
 <StoreExtDetail
diff --git a/packages/ui/src/components/extension/StoreListing.svelte b/packages/ui/src/components/extension/StoreListing.svelte
index 178dceb..7f17604 100644
--- a/packages/ui/src/components/extension/StoreListing.svelte
+++ b/packages/ui/src/components/extension/StoreListing.svelte
@@ -2,11 +2,10 @@
 	import { SBExt } from "@kksh/api/supabase"
 	import { Button, Command } from "@kksh/svelte5"
 	import { CustomCommandInput, GlobalCommandPaletteFooter } from "@kksh/ui/main"
-	import { cn } from "@kksh/ui/utils"
-	import { afterNavigate, beforeNavigate } from "$app/navigation"
 	import { type Snippet } from "svelte"
 	import ArrowLeft from "svelte-radix/ArrowLeft.svelte"
 	import type { Writable } from "svelte/store"
+	import { CLASSNAMES } from "../../constants"
 	import ExtListItem from "./ExtListItem.svelte"
 
 	let {
@@ -35,7 +34,13 @@
 </script>
 
 {#snippet leftSlot()}
-	<Button variant="outline" size="icon" onclick={onGoBack}>
+	<Button
+		variant="outline"
+		size="icon"
+		onclick={onGoBack}
+		class={CLASSNAMES.BACK_BUTTON}
+		data-flip-id={CLASSNAMES.BACK_BUTTON}
+	>
 		<ArrowLeft class="size-4" />
 	</Button>
 {/snippet}
diff --git a/packages/ui/src/constants.ts b/packages/ui/src/constants.ts
index 713f046..5b6b427 100644
--- a/packages/ui/src/constants.ts
+++ b/packages/ui/src/constants.ts
@@ -1,3 +1,4 @@
 export const CLASSNAMES = {
-	EXT_LOGO: "kk-ext-logo"
+	EXT_LOGO: "kk-ext-logo",
+	BACK_BUTTON: "kk-back-button"
 }