feat: implement pixel dance animation component, page and command

.prettierrc

@@ -1,20 +1,20 @@
 {
-  "printWidth": 100,
-  "tabWidth": 2,
-  "trailingComma": "none",
-  "semi": false,
-  "useTabs": true,
-  "plugins": [
-    "prettier-plugin-svelte",
-    "@ianvs/prettier-plugin-sort-imports",
-    "prettier-plugin-tailwindcss"
-  ],
-  "overrides": [
-    {
-      "files": "*.svelte",
-      "options": {
-        "parser": "svelte"
-      }
-    }
-  ]
+	"printWidth": 100,
+	"tabWidth": 2,
+	"trailingComma": "none",
+	"semi": false,
+	"useTabs": true,
+	"plugins": [
+		"prettier-plugin-svelte",
+		"@ianvs/prettier-plugin-sort-imports",
+		"prettier-plugin-tailwindcss"
+	],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
 }

apps/desktop/.gitignore

@@ -8,3 +8,5 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+dance.json
+dance.bin

apps/desktop/package.json

@@ -4,6 +4,7 @@
 	"description": "",
 	"type": "module",
 	"scripts": {
+		"prepare": "bun setup.ts",
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
@@ -22,6 +23,8 @@
 		"@tauri-apps/plugin-shell": "^2",
 		"bits-ui": "1.0.0-next.36",
 		"lucide-svelte": "^0.454.0",
+		"lz-string": "^1.5.0",
+		"mode-watcher": "^0.4.1",
 		"svelte-radix": "^2.0.1",
 		"svelte-sonner": "^0.3.28",
 		"sveltekit-superforms": "^2.20.0"
@@ -36,6 +39,7 @@
 		"@tailwindcss/forms": "^0.5.9",
 		"@tailwindcss/typography": "^0.5.15",
 		"@tauri-apps/cli": "^2.0.4",
+		"@types/bun": "latest",
 		"autoprefixer": "^10.4.20",
 		"clsx": "^2.1.1",
 		"embla-carousel-svelte": "^8.3.1",

apps/desktop/setup.ts

@@ -0,0 +1,27 @@
+import assert from "assert"
+import { compressString, decompressString } from "@kksh/utils"
+import { $ } from "bun"
+
+/* -------------------------------------------------------------------------- */
+/*                             Download Dance JSON                            */
+/* -------------------------------------------------------------------------- */
+console.log("Downloading Dance Data...")
+const rawData = await fetch("https://dance.kunkun.sh/api/data").then((res) => res.text())
+
+function formatFileSize(size: number) {
+	return `${(size / 1024).toFixed(2)} KB`
+}
+Bun.write("./src/data/dance.json", rawData)
+console.log(`Raw Data Size: ${formatFileSize(rawData.length)}`)
+const compressedDance = compressString(rawData)
+const decompressedDance = decompressString(compressedDance)
+assert(decompressedDance === rawData)
+const filePath = "./src/data/dance.bin"
+
+Bun.write(
+	filePath, // has to be .txt in order to be imported as text
+	compressedDance
+)
+// get file size
+const fileSize = Bun.file(filePath).size
+console.log(`Dance Data Compressed File Size: ${formatFileSize(fileSize)}`)

apps/desktop/src/lib/cmds/builtin.ts

@@ -74,7 +74,7 @@ export const builtinCmds: BuiltinCmd[] = [
 			appState.clearSearchTerm()
 			goto("/settings/set-dev-ext-path")
 		}
-	}
+	},
 	// {
 	// 	name: "Extension Window Troubleshooter",
 	// 	iconifyIcon: "material-symbols:window-outline",
@@ -167,14 +167,14 @@ export const builtinCmds: BuiltinCmd[] = [
 	// 		location.reload()
 	// 	}
 	// },
-	// {
-	// 	name: "Dance",
-	// 	iconifyIcon: "mdi:dance-pole",
-	// 	description: "Dance",
-	// 	function: async () => {
-	// 		goto("/dance")
-	// 	}
-	// },
+	{
+		name: "Dance",
+		iconifyIcon: "mdi:dance-pole",
+		description: "Dance",
+		function: async () => {
+			goto("/dance")
+		}
+	}
 	// {
 	// 	name: "Quit Kunkun",
 	// 	iconifyIcon: "emojione:cross-mark-button",

apps/desktop/src/lib/cmds/ext.ts

@@ -51,7 +51,11 @@ export async function onCustomUiCmdSelect(
 	} else {
 		console.log("Launch main window")
 		return winExtMap
-			.registerExtensionWithWindow({ windowLabel: "main", extPath: ext.extPath, dist: cmd.dist })
+			.registerExtensionWithWindow({
+				windowLabel: "main",
+				extPath: ext.extPath,
+				dist: cmd.dist
+			})
 			.then(() => goto(url2))
 	}
 }

apps/desktop/src/lib/components/context/AppContext.svelte

@@ -9,8 +9,11 @@
 		appConfig,
 		appState,
 		children
-	}: { appConfig: Writable<AppConfig>; appState: Writable<AppState>; children: Snippet<[]> } =
-		$props()
+	}: {
+		appConfig: Writable<AppConfig>
+		appState: Writable<AppState>
+		children: Snippet<[]>
+	} = $props()
 
 	setAppConfigContext(appConfig)
 	setAppStateContext(appState)

apps/desktop/src/lib/components/dance.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { GridAnimation } from "@kksh/ui"
+	import { decompressFrame, decompressString, deserializeFrame } from "@kksh/utils"
+	import compressedDance from "$lib/../data/dance.bin?raw"
+
+	const rawData = JSON.parse(decompressString(compressedDance))
+	const { fps, frames: rawFrames }: { fps: number; frames: string[] } = rawData
+	const decodedFrames = rawFrames.map((frame) => deserializeFrame(decompressFrame(frame)))
+
+	let { scale = 1 } = $props()
+</script>
+
+<GridAnimation
+	class="pointer-events-none max-h-full max-w-full select-none invert dark:invert-0"
+	{fps}
+	frames={decodedFrames}
+	{scale}
+/>

apps/desktop/src/lib/components/main/CommandPalette.svelte

@@ -3,6 +3,7 @@
 passing everything through props will be very complicated and hard to maintain.
 -->
 <script lang="ts">
+	import { devStoreExts, installedStoreExts } from "@/stores"
 	import type { ExtPackageJsonExtra } from "@kksh/api/models"
 	import { isExtPathInDev } from "@kksh/extension/utils"
 	import { Command } from "@kksh/svelte5"
@@ -47,22 +48,18 @@ passing everything through props will be very complicated and hard to maintain.
 	<Command.List class="max-h-screen grow">
 		<Command.Empty data-tauri-drag-region>No results found.</Command.Empty>
 		<BuiltinCmds {builtinCmds} />
-		{#if $appConfig.extensionPath}
+		{#if $appConfig.extensionPath && $devStoreExts.length > 0}
 			<ExtCmdsGroup
-				extensions={extensions.filter((ext) =>
-					isExtPathInDev($appConfig.extensionPath!, ext.extPath)
-				)}
+				extensions={$devStoreExts}
 				heading="Dev Extensions"
 				isDev={true}
 				onExtCmdSelect={commandLaunchers.onExtCmdSelect}
 				hmr={$appConfig.hmr}
 			/>
 		{/if}
-		{#if $appConfig.extensionPath}
+		{#if $appConfig.extensionPath && $installedStoreExts.length > 0}
 			<ExtCmdsGroup
-				extensions={extensions.filter(
-					(ext) => !isExtPathInDev($appConfig.extensionPath!, ext.extPath)
-				)}
+				extensions={$installedStoreExts}
 				heading="Extensions"
 				isDev={false}
 				hmr={false}

apps/desktop/src/lib/stores/extensions.ts

@@ -106,14 +106,6 @@ function createExtensionsStore(): Writable<ExtPackageJsonExtra[]> & {
 
 export const extensions = createExtensionsStore()
 
-// export const devExtensions: Readable<ExtPackageJsonExtra[]> = derived(
-// 	extensions,
-// 	($extensionsStore, set) => {
-// 		getExtensionsFolder().then((extFolder) => {
-// 			set($extensionsStore.filter((ext) => !ext.extPath.startsWith(extFolder)))
-// 		})
-// 	}
-// )
 export const installedStoreExts: Readable<ExtPackageJsonExtra[]> = derived(
 	extensions,
 	($extensionsStore) => {
@@ -122,3 +114,11 @@ export const installedStoreExts: Readable<ExtPackageJsonExtra[]> = derived(
 		return $extensionsStore.filter((ext) => !extAPI.isExtPathInDev(extContainerPath, ext.extPath))
 	}
 )
+export const devStoreExts: Readable<ExtPackageJsonExtra[]> = derived(
+	extensions,
+	($extensionsStore) => {
+		const extContainerPath = get(appConfig).extensionPath
+		if (!extContainerPath) return []
+		return $extensionsStore.filter((ext) => extAPI.isExtPathInDev(extContainerPath, ext.extPath))
+	}
+)

apps/desktop/src/routes/dance/+page.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { goBackOnEscape } from "@/utils/key"
+	import { goBack } from "@/utils/route"
+	import { Button } from "@kksh/svelte5"
+	import { Layouts } from "@kksh/ui"
+	import Dance from "$lib/components/dance.svelte"
+	import ArrowLeft from "svelte-radix/ArrowLeft.svelte"
+</script>
+
+<svelte:window on:keydown={goBackOnEscape} />
+<Button
+	variant="outline"
+	size="icon"
+	onclick={goBack}
+	class="absolute left-2 top-2"
+	data-tauri-drag-region
+>
+	<ArrowLeft class="size-4" />
+</Button>
+<Layouts.Center class="h-screen w-screen" data-tauri-drag-region>
+	<Dance />
+</Layouts.Center>

apps/desktop/src/routes/extension/store/+page.svelte

@@ -36,7 +36,9 @@
 	async function onExtItemUpgrade(ext: SBExt) {
 		const res = await supabaseAPI.getLatestExtPublish(ext.identifier)
 		if (res.error)
-			return toast.error("Fail to get latest extension", { description: res.error.message })
+			return toast.error("Fail to get latest extension", {
+				description: res.error.message
+			})
 		const tarballUrl = supabaseAPI.translateExtensionFilePathToUrl(res.data.tarball_path)
 		return extensions.upgradeStoreExtension(ext.identifier, tarballUrl).then((newExt) => {
 			toast.success(`${ext.name} Upgraded to ${newExt.version}`)
@@ -47,7 +49,9 @@
 		console.log("onExtItemInstall", ext)
 		const res = await supabaseAPI.getLatestExtPublish(ext.identifier)
 		if (res.error)
-			return toast.error("Fail to get latest extension", { description: res.error.message })
+			return toast.error("Fail to get latest extension", {
+				description: res.error.message
+			})
 
 		const tarballUrl = supabaseAPI.translateExtensionFilePathToUrl(res.data.tarball_path)
 		const installDir = await getExtensionsFolder()

apps/desktop/src/routes/extension/store/+page.ts

@@ -35,5 +35,10 @@ export const load: PageLoad = async (): Promise<{
 	)
 	console.log(get(upgradableExpsMap))
 
-	return { storeExtList, installedStoreExts, installedExtsMap, upgradableExpsMap }
+	return {
+		storeExtList,
+		installedStoreExts,
+		installedExtsMap,
+		upgradableExpsMap
+	}
 }

apps/desktop/src/routes/extension/ui-iframe/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Dance from "@/components/dance.svelte"
 	import { appConfig, winExtMap } from "@/stores"
 	import { goBackOnEscape } from "@/utils/key"
 	import { goHome } from "@/utils/route"
@@ -21,12 +22,16 @@
 	} from "@kksh/api/ui"
 	import { toast, type IUiIframeServer2 } from "@kksh/api/ui/iframe"
 	import { Button } from "@kksh/svelte5"
+	import { Layouts } from "@kksh/ui"
 	import { cn } from "@kksh/ui/utils"
+	import { error as svelteError } from "@sveltejs/kit"
 	import { getCurrentWindow } from "@tauri-apps/api/window"
 	import { goto } from "$app/navigation"
 	import { page } from "$app/stores"
 	import { ArrowLeftIcon, MoveIcon, RefreshCcwIcon, XIcon } from "lucide-svelte"
 	import { onDestroy, onMount } from "svelte"
+	import { fade } from "svelte/transition"
+	import Layout from "../../+layout.svelte"
 	import type { PageData } from "./$types"
 
 	let { data }: { data: PageData } = $props()
@@ -133,24 +138,34 @@
 		}
 	}
 
+	function onIframeLoaded() {
+		setTimeout(() => {
+			iframeRef.focus()
+			uiControl.iframeLoaded = true
+		}, 300)
+	}
+
 	onMount(() => {
 		appWin.show()
-		console.log("how", appWin.label)
-
-		console.log(iframeRef.contentWindow)
 		if (iframeRef?.contentWindow) {
 			exposeApiToWindow(iframeRef.contentWindow, serverAPI)
 		} else {
 			toast.warning("iframeRef.contentWindow not available")
 		}
+
+		setTimeout(() => {
+			if (!uiControl.iframeLoaded) {
+				toast.error("Extension failed to load")
+			}
+		}, 3_000)
 	})
 
 	onDestroy(() => {
 		winExtMap.unregisterExtensionFromWindow(appWin.label)
 	})
 </script>
 
-<svelte:window on:keydown|preventDefault={goBackOnEscape} />
+<svelte:window on:keydown={goBackOnEscape} />
 
 {#if uiControl.backBtnPosition}
 	<Button
@@ -190,9 +205,17 @@
 {/if}
 
 <main class="h-screen">
+	{#if !uiControl.iframeLoaded}
+		<div class="bg-background absolute h-screen w-screen" out:fade>
+			<Layouts.Center class="h-full w-full" hidden={true}>
+				<Dance />
+			</Layouts.Center>
+		</div>
+	{/if}
 	<iframe
 		bind:this={iframeRef}
 		class="h-full"
+		onload={onIframeLoaded}
 		width="100%"
 		height="100%"
 		frameborder="0"