From d0f54f20674da6d763dc9a8472c1f427f31f6fb2 Mon Sep 17 00:00:00 2001
From: Vlad Vladov <divaltor@pm.me>
Date: Wed, 3 Sep 2025 18:33:42 +0300
Subject: [PATCH] feat(input): Add focus by Cmd + K shortcut to search input

---
 .../components/dashboard/projects/show.tsx    |  5 +--
 .../shared/focus-shortcut-input.tsx           | 36 +++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 apps/dokploy/components/shared/focus-shortcut-input.tsx

diff --git a/apps/dokploy/components/dashboard/projects/show.tsx b/apps/dokploy/components/dashboard/projects/show.tsx
index 8577eee8c..fafa08ffc 100644
--- a/apps/dokploy/components/dashboard/projects/show.tsx
+++ b/apps/dokploy/components/dashboard/projects/show.tsx
@@ -44,7 +44,7 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
+import { FocusShortcutInput } from "@/components/shared/focus-shortcut-input";
 import {
 	Select,
 	SelectContent,
@@ -144,12 +144,13 @@ export const ShowProjects = () => {
 								<>
 									<div className="flex max-sm:flex-col gap-4 items-center w-full">
 										<div className="flex-1 relative max-sm:w-full">
-											<Input
+											<FocusShortcutInput
 												placeholder="Filter projects..."
 												value={searchQuery}
 												onChange={(e) => setSearchQuery(e.target.value)}
 												className="pr-10"
 											/>
+
 											<Search className="absolute right-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
 										</div>
 										<div className="flex items-center gap-2 min-w-48 max-sm:w-full">
diff --git a/apps/dokploy/components/shared/focus-shortcut-input.tsx b/apps/dokploy/components/shared/focus-shortcut-input.tsx
new file mode 100644
index 000000000..9c9215236
--- /dev/null
+++ b/apps/dokploy/components/shared/focus-shortcut-input.tsx
@@ -0,0 +1,36 @@
+import { useEffect, useRef } from "react";
+import { Input } from "@/components/ui/input";
+
+type Props = React.ComponentPropsWithoutRef<typeof Input>;
+
+export const FocusShortcutInput = (props: Props) => {
+	const inputRef = useRef<HTMLInputElement | null>(null);
+
+	useEffect(() => {
+		const onKeyDown = (e: KeyboardEvent) => {
+			const isMod = e.metaKey || e.ctrlKey;
+			if (!isMod || e.key.toLowerCase() !== "k") return;
+
+			const target = e.target as HTMLElement | null;
+			if (target) {
+				const tag = target.tagName;
+				if (
+					target.isContentEditable ||
+					tag === "INPUT" ||
+					tag === "TEXTAREA" ||
+					tag === "SELECT" ||
+					target.getAttribute("role") === "textbox"
+				)
+					return;
+			}
+
+			e.preventDefault();
+			inputRef.current?.focus();
+		};
+
+		window.addEventListener("keydown", onKeyDown);
+		return () => window.removeEventListener("keydown", onKeyDown);
+	}, []);
+
+	return <Input {...props} ref={inputRef} />;
+};