feat: add sidebar to troubleshooter pages

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

@@ -97,7 +97,8 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 				url: "/troubleshooters/extension-window",
 				title: "Extension Window Troubleshooter"
 			})
-		}
+		},
+		keywords: ["extension", "window", "troubleshooter"]
 	},
 	{
 		name: "Extension Permission Inspector",
@@ -106,7 +107,8 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		function: async () => {
 			appState.clearSearchTerm()
 			goto("/extension/permission-inspector")
-		}
+		},
+		keywords: ["extension"]
 	},
 	{
 		name: "Extension Loading Troubleshooter",
@@ -115,7 +117,8 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		function: async () => {
 			appState.clearSearchTerm()
 			goto("/troubleshooters/extension-loading")
-		}
+		},
+		keywords: ["extension", "troubleshooter"]
 	},
 	{
 		name: "Create Quicklink",
@@ -224,7 +227,8 @@ export const rawBuiltinCmds: BuiltinCmd[] = [
 		},
 		flags: {
 			developer: true
-		}
+		},
+		keywords: ["mdns", "debugger", "troubleshooter"]
 	},
 	{
 		name: "Toggle Hide On Blur",

apps/desktop/src/routes/settings/sidebar-trigger.svelte → apps/desktop/src/lib/components/common/sidebar-trigger.svelte

@@ -1,16 +1,22 @@
 <script lang="ts">
 	import { goHome } from "@/utils/route"
 	import { Button, SideBar } from "@kksh/svelte5"
+	import { Constants } from "@kksh/ui"
 	import { ArrowLeftIcon } from "lucide-svelte"
 
 	const { useSidebar } = SideBar
 	const sidebar = useSidebar()
 </script>
 
-<div class="flex items-center h-10 pl-1 pt-1 gap-2" data-tauri-drag-region>
-	<SideBar.Trigger />
+<div class="flex h-10 items-center gap-2 pl-1 pt-1" data-tauri-drag-region>
+	<SideBar.Trigger class="z-50" />
 	{#if sidebar.state === "collapsed"}
-		<Button variant="outline" size="icon" class="" onclick={goHome}>
+		<Button
+			variant="outline"
+			size="icon"
+			class="z-50 {Constants.CLASSNAMES.BACK_BUTTON}"
+			onclick={goHome}
+		>
 			<ArrowLeftIcon class="h-4 w-4" />
 		</Button>
 	{/if}

apps/desktop/src/lib/utils/key.ts

@@ -1,21 +1,26 @@
 import { appState } from "@/stores"
+import { getCurrentWindow } from "@tauri-apps/api/window"
 import { platform } from "@tauri-apps/plugin-os"
 import { goto } from "$app/navigation"
 import { goBack, goHome } from "./route"
+import { isInMainWindow } from "./window"
 
 export function goHomeOnEscape(e: KeyboardEvent) {
+	console.log("goHomeOnEscape", e.key)
 	if (e.key === "Escape") {
 		goHome()
 	}
 }
 
 export function goBackOnEscape(e: KeyboardEvent) {
+	console.log("goBackOnEscape", e.key)
 	if (e.key === "Escape") {
 		goBack()
 	}
 }
 
 export function goBackOnEscapeClearSearchTerm(e: KeyboardEvent) {
+	console.log("goBackOnEscapeClearSearchTerm", e.key)
 	if (e.key === "Escape") {
 		if (appState.get().searchTerm) {
 			appState.clearSearchTerm()
@@ -26,6 +31,7 @@ export function goBackOnEscapeClearSearchTerm(e: KeyboardEvent) {
 }
 
 export function goHomeOnEscapeClearSearchTerm(e: KeyboardEvent) {
+	console.log("goHomeOnEscapeClearSearchTerm", e.key)
 	if (e.key === "Escape") {
 		if (appState.get().searchTerm) {
 			appState.clearSearchTerm()
@@ -35,7 +41,19 @@ export function goHomeOnEscapeClearSearchTerm(e: KeyboardEvent) {
 	}
 }
 
+export function goBackOrCloseOnEscape(e: KeyboardEvent) {
+	console.log("goBackOrCloseOnEscape", e.key)
+	if (e.key === "Escape") {
+		if (isInMainWindow()) {
+			goBack()
+		} else {
+			getCurrentWindow().close()
+		}
+	}
+}
+
 export function globalKeyDownHandler(e: KeyboardEvent) {
+	console.log("globalKeyDownHandler", e.key)
 	const _platform = platform()
 	if ((_platform === "macos" && e.metaKey) || (_platform === "windows" && e.ctrlKey)) {
 		if (e.key === ",") {

apps/desktop/src/routes/+layout.svelte

@@ -3,7 +3,7 @@
 	import "../app.css"
 	import { appConfig, appState, extensions, quickLinks } from "@/stores"
 	import { initDeeplink } from "@/utils/deeplink"
-	import { globalKeyDownHandler } from "@/utils/key"
+	import { globalKeyDownHandler, goBackOrCloseOnEscape } from "@/utils/key"
 	import { isInMainWindow } from "@/utils/window"
 	import {
 		ModeWatcher,
@@ -13,11 +13,38 @@
 		updateTheme,
 		type ThemeConfig
 	} from "@kksh/svelte5"
-	import { ViewTransition } from "@kksh/ui"
+	import { Constants, ViewTransition } from "@kksh/ui"
 	import type { UnlistenFn } from "@tauri-apps/api/event"
+	import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow"
 	import { attachConsole } from "@tauri-apps/plugin-log"
+	import { afterNavigate, beforeNavigate } from "$app/navigation"
+	import { gsap } from "gsap"
+	import { Flip } from "gsap/Flip"
 	import { onDestroy, onMount } from "svelte"
 
+	gsap.registerPlugin(Flip)
+	let flipState: Flip.FlipState
+
+	beforeNavigate(() => {
+		flipState = Flip.getState(
+			`.${Constants.CLASSNAMES.EXT_LOGO}, .${Constants.CLASSNAMES.BACK_BUTTON}`
+		)
+	})
+
+	afterNavigate(() => {
+		if (!flipState) {
+			return
+		}
+
+		Flip.from(flipState, {
+			targets: `.${Constants.CLASSNAMES.EXT_LOGO}, .${Constants.CLASSNAMES.BACK_BUTTON}`,
+			duration: 0.5,
+			absolute: true,
+			scale: true,
+			ease: "ease-out"
+		})
+	})
+
 	let { children } = $props()
 	const unlisteners: UnlistenFn[] = []
 
@@ -30,14 +57,14 @@
 			extensions.init()
 		} else {
 		}
+		getCurrentWebviewWindow().show()
 	})
 
 	onDestroy(() => {
 		unlisteners.forEach((unlistener) => unlistener())
 	})
 </script>
 
-<svelte:window on:keydown={globalKeyDownHandler} />
 <ViewTransition />
 <ModeWatcher />
 <Toaster richColors />

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

@@ -31,10 +31,6 @@
 			$appState.searchTerm = ""
 		}
 	}
-
-	$effect(() => {
-		console.log($appState.highlightedCmd)
-	})
 </script>
 
 <Command.Root

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

@@ -1,31 +1,31 @@
 <script lang="ts">
-	import { Constants } from "@kksh/ui"
-	import { afterNavigate, beforeNavigate } from "$app/navigation"
-	import { gsap } from "gsap"
-	import { Flip } from "gsap/Flip"
+	// import { Constants } from "@kksh/ui"
+	// import { afterNavigate, beforeNavigate } from "$app/navigation"
+	// import { gsap } from "gsap"
+	// import { Flip } from "gsap/Flip"
 
-	gsap.registerPlugin(Flip)
-	let flipState: Flip.FlipState
+	// gsap.registerPlugin(Flip)
+	// let flipState: Flip.FlipState
 
-	beforeNavigate(() => {
-		flipState = Flip.getState(
-			`.${Constants.CLASSNAMES.EXT_LOGO}, .${Constants.CLASSNAMES.BACK_BUTTON}`
-		)
-	})
+	// beforeNavigate(() => {
+	// 	flipState = Flip.getState(
+	// 		`.${Constants.CLASSNAMES.EXT_LOGO}, .${Constants.CLASSNAMES.BACK_BUTTON}`
+	// 	)
+	// })
 
-	afterNavigate(() => {
-		if (!flipState) {
-			return
-		}
+	// afterNavigate(() => {
+	// 	if (!flipState) {
+	// 		return
+	// 	}
 
-		Flip.from(flipState, {
-			targets: `.${Constants.CLASSNAMES.EXT_LOGO}, .${Constants.CLASSNAMES.BACK_BUTTON}`,
-			duration: 0.5,
-			absolute: true,
-			scale: true,
-			ease: "ease-out"
-		})
-	})
+	// 	Flip.from(flipState, {
+	// 		targets: `.${Constants.CLASSNAMES.EXT_LOGO}, .${Constants.CLASSNAMES.BACK_BUTTON}`,
+	// 		duration: 0.5,
+	// 		absolute: true,
+	// 		scale: true,
+	// 		ease: "ease-out"
+	// 	})
+	// })
 
 	const { children } = $props()
 </script>

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

@@ -56,11 +56,14 @@
 	let loaded = $state(false)
 
 	async function goBack() {
+		console.log("goBack")
 		if (isInMainWindow()) {
+			console.log("goBack in main window")
 			// if in main window, then winExtMap store must contain this
-			winExtMap.unregisterExtensionFromWindow(appWin.label)
+			// winExtMap.unregisterExtensionFromWindow(appWin.label)
 			goto("/")
 		} else {
+			console.log("goBack in webview window")
 			appWin.close()
 		}
 	}
@@ -179,6 +182,7 @@
 			searchBarPlaceholder = placeholder
 		},
 		async goBack() {
+			console.log("goBack in ui-worker")
 			goBack()
 		}
 	}

apps/desktop/src/routes/settings/+layout.svelte

@@ -2,11 +2,12 @@
 	import { goBackOnEscape, goHomeOnEscape } from "@/utils/key"
 	import { goBack, goHome } from "@/utils/route"
 	import { SideBar } from "@kksh/svelte5"
-	import SidebarTrigger from "./sidebar-trigger.svelte"
+	import SidebarTrigger from "$lib/components/common/sidebar-trigger.svelte"
 	import SettingsSidebar from "./sidebar.svelte"
 
 	let { children } = $props()
 	function onKeyDown(e: KeyboardEvent) {
+		console.log(e)
 		if (e.key === "Escape") {
 			let target = e.target as HTMLElement
 			if (target instanceof HTMLInputElement) {

apps/desktop/src/routes/settings/sidebar.svelte

@@ -1,29 +1,21 @@
 <script lang="ts">
-	import { goBack, goHome } from "@/utils/route"
-	import Icon from "@iconify/svelte"
+	import { goHome } from "@/utils/route"
 	import { Button, SideBar } from "@kksh/svelte5"
+	import { Constants } from "@kksh/ui"
 	import { ArrowLeftIcon } from "lucide-svelte"
 	import Blocks from "lucide-svelte/icons/blocks"
-	import Calendar from "lucide-svelte/icons/calendar"
 	import Cog from "lucide-svelte/icons/cog"
-	import Command from "lucide-svelte/icons/command"
 	import FileCode2 from "lucide-svelte/icons/file-code-2"
-	import House from "lucide-svelte/icons/house"
-	import Inbox from "lucide-svelte/icons/inbox"
 	import Info from "lucide-svelte/icons/info"
 	import Route from "lucide-svelte/icons/route"
-	import Search from "lucide-svelte/icons/search"
-	import Settings from "lucide-svelte/icons/settings"
 	import SquareTerminal from "lucide-svelte/icons/square-terminal"
 
-	// Menu items.
 	const items = [
 		{
 			title: "General",
 			url: "/settings",
 			icon: Cog
 		},
-
 		{
 			title: "Developer",
 			url: "/settings/developer",
@@ -56,7 +48,12 @@
 	<SideBar.Header>
 		<SideBar.Menu>
 			<SideBar.MenuItem data-tauri-drag-region>
-				<Button variant="outline" size="icon" class="z-50" onclick={goHome}>
+				<Button
+					variant="outline"
+					size="icon"
+					class="z-50 {Constants.CLASSNAMES.BACK_BUTTON}"
+					onclick={goHome}
+				>
 					<ArrowLeftIcon class="h-4 w-4" />
 				</Button>
 			</SideBar.MenuItem>

apps/desktop/src/routes/troubleshooters/+layout.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
+	import SidebarTrigger from "@/components/common/sidebar-trigger.svelte"
 	import { SideBar } from "@kksh/svelte5"
 	import TroubleshootersSidebar from "./sidebar.svelte"
 
 	let { children } = $props()
 </script>
 
-<SideBar.Provider>
+<SideBar.Provider style="--sidebar-width: 12rem;">
 	<TroubleshootersSidebar />
 	<main class="w-full">
+		<SidebarTrigger />
 		{@render children?.()}
-		<SideBar.Trigger class="fixed" />
 	</main>
 </SideBar.Provider>

apps/desktop/src/routes/troubleshooters/extension-loading/+page.svelte

@@ -77,12 +77,7 @@
 	})
 </script>
 
-<svelte:window on:keydown={goBackOnEscape} />
-<Button variant="outline" size="icon" class="absolute left-2 top-2 z-50" onclick={goBack}>
-	<ArrowLeftIcon class="h-4 w-4" />
-</Button>
-<div class="absolute left-0 top-0 h-10 w-screen" data-tauri-drag-region></div>
-<div class="container pt-10">
+<div class="container">
 	<h1 class="text-2xl font-bold">Extension Loading Troubleshooter</h1>
 	<Button class="my-2" onclick={check}>Check</Button>
 	<Dialog.Root bind:open={isDialogOpen}>

apps/desktop/src/routes/troubleshooters/extension-window/+page.svelte

@@ -65,11 +65,7 @@
 	}
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
-<Button variant="outline" size="icon" class="absolute left-2 top-2 z-50" onclick={goBack}>
-	<ArrowLeftIcon class="h-4 w-4" />
-</Button>
-<main class="container h-screen w-screen pt-10">
+<main class="container h-screen w-full">
 	<div class="flex items-center justify-between space-x-2">
 		<div class="flex items-center space-x-2">
 			<Checkbox id="refreshEverySecond" bind:checked={refreshEverySecond} />

apps/desktop/src/routes/troubleshooters/mdns-debugger/+page.svelte

@@ -20,10 +20,6 @@
 	})
 </script>
 
-<svelte:window on:keydown={goBackOnEscape} />
-<Button variant="outline" size="icon" class="absolute left-2 top-2 z-50" onclick={goBack}>
-	<ArrowLeftIcon class="h-4 w-4" />
-</Button>
 <div class="h-10" data-tauri-drag-region></div>
 <main class="container">
 	<Button onclick={refreshPeers}>Refresh mDNS Peers</Button>