diff --git a/apps/dokploy/hooks/use-keyboard-nav.tsx b/apps/dokploy/hooks/use-keyboard-nav.tsx index d24064c31..3d4d052c6 100644 --- a/apps/dokploy/hooks/use-keyboard-nav.tsx +++ b/apps/dokploy/hooks/use-keyboard-nav.tsx @@ -3,7 +3,26 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"; import { useCallback, useEffect, useState } from "react"; -const SHORTCUTS = { +const PAGES = ["compose", "application", "postgres", "redis"] 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 +35,40 @@ 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, +}; + /** - * 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 +76,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()); @@ -55,10 +94,10 @@ export function UseKeyboardNavForApplications() { if (timer) clearTimeout(timer); setModPressed(false); - if (key in SHORTCUTS) { - const tab = SHORTCUTS[key as keyof typeof SHORTCUTS]; + if (key in shortcuts) { + const tab = shortcuts[key]!; router.push( - `${pathname}?${updateSearchParam("tab", tab.toLowerCase())}`, + `${pathname}?${updateSearchParam("tab", tab)}`, ); } } else { 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..305a931ce 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 (
- + + + +