feat: add system commands

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

@@ -0,0 +1,4 @@
+import { getSystemCommands } from "@kksh/api/commands"
+import type { SysCommand } from "@kksh/api/models"
+
+export const systemCommands: SysCommand[] = getSystemCommands()

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 { systemCommands } from "@/cmds/system"
 	import { devStoreExts, installedStoreExts } from "@/stores"
 	import type { ExtPackageJsonExtra } from "@kksh/api/models"
 	import { isExtPathInDev } from "@kksh/extension/utils"
@@ -12,7 +13,8 @@ passing everything through props will be very complicated and hard to maintain.
 		BuiltinCmds,
 		CustomCommandInput,
 		ExtCmdsGroup,
-		GlobalCommandPaletteFooter
+		GlobalCommandPaletteFooter,
+		SystemCmds
 	} from "@kksh/ui/main"
 	import type { BuiltinCmd, CommandLaunchers } from "@kksh/ui/types"
 	import { cn } from "@kksh/ui/utils"
@@ -48,6 +50,7 @@ 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} />
+		<SystemCmds {systemCommands} />
 		{#if $appConfig.extensionPath && $devStoreExts.length > 0}
 			<ExtCmdsGroup
 				extensions={$devStoreExts}

packages/api/src/commands/system.ts

@@ -295,7 +295,7 @@ export const rawSystemCommands = [
 	}
 ]
 
-export async function getSystemCommands(): Promise<SysCommand[]> {
+export function getSystemCommands(): SysCommand[] {
 	return rawSystemCommands
 		.filter(async (cmd) => cmd.platforms.includes(platform())) // Filter out system commands that are not supported on the current platform
 		.map((cmd) => ({

packages/ui/src/components/main/SystemCmds.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { IconEnum, SysCommand } from "@kksh/api/models"
+	import { Command } from "@kksh/svelte5"
+	import { IconMultiplexer } from "@kksh/ui"
+	import { DraggableCommandGroup } from "@kksh/ui/custom"
+
+	const { systemCommands }: { systemCommands: SysCommand[] } = $props()
+</script>
+
+<DraggableCommandGroup heading="System Commands">
+	{#each systemCommands as cmd}
+		<Command.Item
+			class="flex justify-between"
+			onSelect={() => {
+				cmd.function()
+			}}
+		>
+			<span class="flex gap-2">
+				{#if cmd.icon}
+					<IconMultiplexer icon={cmd.icon} class="!h-5 !w-5 shrink-0" />
+				{/if}
+				<span>{cmd.name}</span>
+			</span>
+		</Command.Item>
+	{/each}
+</DraggableCommandGroup>

packages/ui/src/components/main/index.ts

@@ -2,4 +2,5 @@ export { default as BuiltinCmds } from "./BuiltinCmds.svelte"
 export { default as CustomCommandInput } from "./CustomCommandInput.svelte"
 export { default as GlobalCommandPaletteFooter } from "./GlobalCommandPaletteFooter.svelte"
 export { default as ExtCmdsGroup } from "./ExtCmdsGroup.svelte"
+export { default as SystemCmds } from "./SystemCmds.svelte"
 export * from "./types"