From 00f197fb0099a90cc2468a7a193ac7acc852f21f Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Fri, 20 Dec 2024 09:05:28 -0500
Subject: [PATCH] feat: use Dance as splashscreen

---
 apps/desktop/src/lib/cmds/builtin.ts            | 17 +++++++++++++++++
 .../src/lib/components/dance/dance.svelte       |  8 ++++++--
 .../src/routes/splashscreen/+page.svelte        | 15 ++++++---------
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/apps/desktop/src/lib/cmds/builtin.ts b/apps/desktop/src/lib/cmds/builtin.ts
index 09d7673..13a1666 100644
--- a/apps/desktop/src/lib/cmds/builtin.ts
+++ b/apps/desktop/src/lib/cmds/builtin.ts
@@ -72,6 +72,23 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 			}, 2_000)
 		}
 	},
+	{
+		name: "Splashscreen (Dev)",
+		icon: {
+			type: IconEnum.Iconify,
+			value: "material-symbols:skeleton"
+		},
+		description: "",
+		flags: {
+			dev: true
+		},
+		function: async () => {
+			new WebviewWindow(`splashscreen`, {
+				url: "/splashscreen"
+			})
+			appState.clearSearchTerm()
+		}
+	},
 	{
 		name: "File Transfer",
 		icon: {
diff --git a/apps/desktop/src/lib/components/dance/dance.svelte b/apps/desktop/src/lib/components/dance/dance.svelte
index ddb2f8f..e05a1b6 100644
--- a/apps/desktop/src/lib/components/dance/dance.svelte
+++ b/apps/desktop/src/lib/components/dance/dance.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { cn } from "@/utils"
 	import { GridAnimation } from "@kksh/ui"
 	import { decompressFrame, decompressString, deserializeFrame } from "@kksh/utils"
 	import compressedDance from "$lib/../data/dance.bin?raw"
@@ -7,11 +8,14 @@
 	const { fps, frames: rawFrames }: { fps: number; frames: string[] } = rawData
 	const decodedFrames = rawFrames.map((frame) => deserializeFrame(decompressFrame(frame)))
 
-	let { scale = 1 } = $props()
+	let { scale = 1, class: className }: { scale?: number; class?: string } = $props()
 </script>
 
 <GridAnimation
-	class="pointer-events-none max-h-full max-w-full select-none invert dark:invert-0"
+	class={cn(
+		"pointer-events-none max-h-full max-w-full select-none invert dark:invert-0",
+		className
+	)}
 	{fps}
 	frames={decodedFrames}
 	{scale}
diff --git a/apps/desktop/src/routes/splashscreen/+page.svelte b/apps/desktop/src/routes/splashscreen/+page.svelte
index 00cfe3c..2d4c6db 100644
--- a/apps/desktop/src/routes/splashscreen/+page.svelte
+++ b/apps/desktop/src/routes/splashscreen/+page.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
-	import { Skeleton } from "@kksh/svelte5"
+	import Dance from "@/components/dance/dance.svelte"
+	import { cn } from "@/utils"
+	import { Command, Skeleton } from "@kksh/svelte5"
+	import { CustomCommandInput } from "@kksh/ui/main"
 	import { getCurrentWindow } from "@tauri-apps/api/window"
 	import { onMount } from "svelte"
 
@@ -9,12 +12,6 @@
 	})
 </script>
 
-<main data-tauri-drag-region class="h-screen">
-	<div class="flex items-center space-x-4">
-		<Skeleton class="size-12 rounded-full" />
-		<div class="space-y-2">
-			<Skeleton class="h-4 w-[250px]" />
-			<Skeleton class="h-4 w-[200px]" />
-		</div>
-	</div>
+<main class="h-screen" data-tauri-drag-region>
+	<Dance class="h-full w-full" />
 </main>