diff --git a/apps/dokploy/hooks/use-keyboard-nav.tsx b/apps/dokploy/hooks/use-keyboard-nav.tsx index d24064c31..95f38d7e2 100644 --- a/apps/dokploy/hooks/use-keyboard-nav.tsx +++ b/apps/dokploy/hooks/use-keyboard-nav.tsx @@ -3,7 +3,34 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"; import { useCallback, useEffect, useState } from "react"; -const SHORTCUTS = { +const PAGES = [ + "compose", + "application", + "postgres", + "redis", + "mysql", + "mariadb", + "mongodb", +] as const; +type Page = (typeof PAGES)[number]; + +type Shortcuts = Record; +type ShortcutsDictionary = Record; + +const COMPOSE_SHORTCUTS: Shortcuts = { + g: "general", + e: "environment", + u: "domains", + d: "deployments", + b: "backups", + s: "schedules", + v: "volumeBackups", + l: "logs", + m: "monitoring", + a: "advanced", +}; + +const APPLICATION_SHORTCUTS: Shortcuts = { g: "general", e: "environment", u: "domains", @@ -16,22 +43,43 @@ const SHORTCUTS = { a: "advanced", }; +const POSTGRES_SHORTCUTS: Shortcuts = { + g: "general", + e: "environment", + l: "logs", + m: "monitoring", + b: "backups", + a: "advanced", +}; + +const REDIS_SHORTCUTS: Shortcuts = { + g: "general", + e: "environment", + l: "logs", + m: "monitoring", + a: "advanced", +}; + +const SHORTCUTS: ShortcutsDictionary = { + application: APPLICATION_SHORTCUTS, + compose: COMPOSE_SHORTCUTS, + postgres: POSTGRES_SHORTCUTS, + redis: REDIS_SHORTCUTS, + mysql: POSTGRES_SHORTCUTS, + mariadb: POSTGRES_SHORTCUTS, + mongodb: POSTGRES_SHORTCUTS, +}; + /** - * Use this to register keyboard shortcuts for the application page. Each - * shortcut must be prefixed with `g` (like GitHub). + * Use this to register keyboard shortcuts for different pages. Each shortcut + * must be prefixed with `g` (like GitHub). * + * @example * - `g g` "General", * - `g e` "Environment", * - `g u` "Domains", - * - `g p` "Preview Deployments", - * - `g s` "Schedules", - * - `g v` "Volume Backups", - * - `g d` "Deployments", - * - `g l` "Logs", - * - `g m` "Monitoring", - * - `g a` "Advanced" */ -export function UseKeyboardNavForApplications() { +export function UseKeyboardNav({ forPage }: { forPage: Page }) { const [isModPressed, setModPressed] = useState(false); const [timer, setTimer] = useState(null); @@ -39,6 +87,8 @@ export function UseKeyboardNavForApplications() { const router = useRouter(); const pathname = usePathname(); + const shortcuts = SHORTCUTS[forPage]; + const updateSearchParam = useCallback( (name: string, value: string) => { const params = new URLSearchParams(sp.toString()); @@ -50,22 +100,32 @@ export function UseKeyboardNavForApplications() { ); useEffect(() => { - const handleKeyDown = ({ key }: KeyboardEvent) => { + const handleKeyDown = ({ key, target }: KeyboardEvent) => { + const active = target as HTMLElement | null; + + if (active) { + const tag = active.tagName; + if ( + active.isContentEditable || + tag === "INPUT" || + tag === "TEXTAREA" || + tag === "SELECT" || + active.getAttribute("role") === "textbox" + ) + return; + } + if (isModPressed) { if (timer) clearTimeout(timer); setModPressed(false); - if (key in SHORTCUTS) { - const tab = SHORTCUTS[key as keyof typeof SHORTCUTS]; - router.push( - `${pathname}?${updateSearchParam("tab", tab.toLowerCase())}`, - ); - } - } else { - if (key === "g") { - setModPressed(true); - setTimer(setTimeout(() => setModPressed(false), 5000)); + if (key in shortcuts) { + const tab = shortcuts[key]!; + router.push(`${pathname}?${updateSearchParam("tab", tab)}`); } + } else if (key === "g") { + setModPressed(true); + setTimer(setTimeout(() => setModPressed(false), 1500)); } }; diff --git a/apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx b/apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx index 104b1ff7b..09766130d 100644 --- a/apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx +++ b/apps/dokploy/pages/dashboard/project/[projectId]/services/application/[applicationId].tsx @@ -51,7 +51,7 @@ import { TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; -import { UseKeyboardNavForApplications } from "@/hooks/use-keyboard-nav"; +import { UseKeyboardNav } from "@/hooks/use-keyboard-nav"; import { appRouter } from "@/server/api/root"; import { api } from "@/utils/api"; @@ -92,7 +92,7 @@ const Service = ( return (
- + + + + + + +