feat: use Dance as splashscreen

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: {

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}

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">
+<main class="h-screen" data-tauri-drag-region>
-	<div class="flex items-center space-x-4">
+	<Dance class="h-full w-full" />
-		<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>