feat: add cross-page transition for ext store back button with gasp Flip

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,

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()

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

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}

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"
 }