From e74835ad79c690a8e3883c6d0ea3231b44943330 Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Mon, 4 Nov 2024 16:22:12 -0500
Subject: [PATCH] refactor: move StoreListing.svelte in @kksh/ui back to
 desktop

I realized that StoreListing is a pure wrapper, all the interactions are done with props. Even if this component is later used in other projects, it either lacks flexibility or require more changes. So it's moved back to desktop as a regular +page.svelte
---
 .../src/routes/extension/store/+page.svelte   | 55 +++++++++++----
 .../components/extension/StoreListing.svelte  | 68 -------------------
 packages/ui/src/components/extension/index.ts |  1 -
 3 files changed, 40 insertions(+), 84 deletions(-)
 delete mode 100644 packages/ui/src/components/extension/StoreListing.svelte

diff --git a/apps/desktop/src/routes/extension/store/+page.svelte b/apps/desktop/src/routes/extension/store/+page.svelte
index d61bbe0..7f53ef9 100644
--- a/apps/desktop/src/routes/extension/store/+page.svelte
+++ b/apps/desktop/src/routes/extension/store/+page.svelte
@@ -6,12 +6,15 @@
 	import { goBack } from "@/utils/route"
 	import { SBExt } from "@kksh/api/supabase"
 	import { isUpgradable } from "@kksh/extension"
-	import { StoreListing } from "@kksh/ui/extension"
+	import { Button, Command } from "@kksh/svelte5"
+	import { Constants } from "@kksh/ui"
+	import { ExtListItem } from "@kksh/ui/extension"
+	import { CustomCommandInput, GlobalCommandPaletteFooter } from "@kksh/ui/main"
 	import { goto } from "$app/navigation"
+	import { ArrowLeft } from "lucide-svelte"
 	import { toast } from "svelte-sonner"
-	import { type PageData } from "./$types"
 
-	let { data }: { data: PageData } = $props()
+	let { data } = $props()
 	const { storeExtList, installedStoreExts, installedExtsMap, upgradableExpsMap } = data
 
 	// function isUpgradeable(item: DbExtItem): boolean {
@@ -62,15 +65,37 @@
 </script>
 
 <svelte:window on:keydown={goBackOnEscapeClearSearchTerm} />
-<StoreListing
-	{storeExtList}
-	{appState}
-	installedExtsMap={$installedExtsMap}
-	upgradableExpsMap={$upgradableExpsMap}
-	{onExtItemSelected}
-	{onExtItemUpgrade}
-	{onExtItemInstall}
-	{isUpgradable}
-	bind:searchTerm={$appState.searchTerm}
-	onGoBack={goBack}
-/>
+
+{#snippet leftSlot()}
+	<Button
+		variant="outline"
+		size="icon"
+		onclick={goBack}
+		class={Constants.CLASSNAMES.BACK_BUTTON}
+		data-flip-id={Constants.CLASSNAMES.BACK_BUTTON}
+	>
+		<ArrowLeft class="size-4" />
+	</Button>
+{/snippet}
+<Command.Root class="h-screen rounded-lg border shadow-md">
+	<CustomCommandInput
+		autofocus
+		placeholder="Type a command or search..."
+		{leftSlot}
+		bind:value={$appState.searchTerm}
+	/>
+	<Command.List class="max-h-screen grow">
+		<Command.Empty>No results found.</Command.Empty>
+		{#each storeExtList as ext}
+			<ExtListItem
+				{ext}
+				installedVersion={$installedExtsMap[ext.identifier]}
+				isUpgradable={!!$upgradableExpsMap[ext.identifier]}
+				onSelect={() => onExtItemSelected(ext)}
+				onUpgrade={() => onExtItemUpgrade(ext)}
+				onInstall={() => onExtItemInstall(ext)}
+			/>
+		{/each}
+	</Command.List>
+	<GlobalCommandPaletteFooter />
+</Command.Root>
diff --git a/packages/ui/src/components/extension/StoreListing.svelte b/packages/ui/src/components/extension/StoreListing.svelte
deleted file mode 100644
index 7f17604..0000000
--- a/packages/ui/src/components/extension/StoreListing.svelte
+++ /dev/null
@@ -1,68 +0,0 @@
-<script lang="ts">
-	import { SBExt } from "@kksh/api/supabase"
-	import { Button, Command } from "@kksh/svelte5"
-	import { CustomCommandInput, GlobalCommandPaletteFooter } from "@kksh/ui/main"
-	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 {
-		storeExtList,
-		installedExtsMap,
-		onExtItemSelected,
-		onExtItemUpgrade,
-		onExtItemInstall,
-		upgradableExpsMap,
-		isUpgradable,
-		appState,
-		onGoBack,
-		searchTerm = $bindable("")
-	}: {
-		storeExtList: SBExt[]
-		installedExtsMap: Record<string, string>
-		onExtItemSelected: (ext: SBExt) => void
-		onExtItemUpgrade: (ext: SBExt) => void
-		onExtItemInstall: (ext: SBExt) => void
-		upgradableExpsMap: Record<string, boolean>
-		isUpgradable: (dbExt: SBExt, installedExtVersion: string) => boolean
-		onGoBack?: () => void
-		appState: Writable<{ searchTerm: string }>
-		searchTerm: string
-	} = $props()
-</script>
-
-{#snippet leftSlot()}
-	<Button
-		variant="outline"
-		size="icon"
-		onclick={onGoBack}
-		class={CLASSNAMES.BACK_BUTTON}
-		data-flip-id={CLASSNAMES.BACK_BUTTON}
-	>
-		<ArrowLeft class="size-4" />
-	</Button>
-{/snippet}
-<Command.Root class="h-screen rounded-lg border shadow-md">
-	<CustomCommandInput
-		autofocus
-		placeholder="Type a command or search..."
-		leftSlot={leftSlot as Snippet}
-		bind:value={searchTerm}
-	/>
-	<Command.List class="max-h-screen grow">
-		<Command.Empty>No results found.</Command.Empty>
-		{#each storeExtList as ext}
-			<ExtListItem
-				{ext}
-				installedVersion={installedExtsMap[ext.identifier]}
-				isUpgradable={!!upgradableExpsMap[ext.identifier]}
-				onSelect={() => onExtItemSelected(ext)}
-				onUpgrade={() => onExtItemUpgrade(ext)}
-				onInstall={() => onExtItemInstall(ext)}
-			/>
-		{/each}
-	</Command.List>
-	<GlobalCommandPaletteFooter />
-</Command.Root>
diff --git a/packages/ui/src/components/extension/index.ts b/packages/ui/src/components/extension/index.ts
index 78a3780..5e813b7 100644
--- a/packages/ui/src/components/extension/index.ts
+++ b/packages/ui/src/components/extension/index.ts
@@ -1,4 +1,3 @@
 export { default as ExtListItem } from "./ExtListItem.svelte"
-export { default as StoreListing } from "./StoreListing.svelte"
 export { default as StoreExtDetail } from "./StoreExtDetail.svelte"
 export { default as PermissionInspector } from "./PermissionInspector.svelte"