diff --git a/app/(app)/_layout/components/AuthActions.tsx b/app/(app)/_layout/components/AuthActions.tsx index 6b83464..aa32a0d 100644 --- a/app/(app)/_layout/components/AuthActions.tsx +++ b/app/(app)/_layout/components/AuthActions.tsx @@ -1,6 +1,7 @@ "use client"; import { useEffect } from "react"; import Link from "next/link"; +import { useRouter } from "next/navigation"; import dynamic from "next/dynamic"; import useCurrentUser from "@/lib/hooks/useCurrentUser"; import { useModal } from "@/app/_providers/modal/provider"; @@ -28,15 +29,29 @@ import { TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; - +import { useKeyboardShortcut } from "@/lib/hooks/useKeyboardShortcut"; const LoginModal = dynamic(() => import("@/components/Modals/Login"), { ssr: false, }); export default function AuthActions() { + const router = useRouter(); const modal = useModal(); const { currentUser, logout, attemptLogin } = useCurrentUser(); const { ndk } = useNDK(); + + useKeyboardShortcut(["shift", "ctrl", "u"], () => { + if (currentUser) { + router.push(`/${currentUser?.npub}`); + } else { + modal?.show(); + } + }); + useKeyboardShortcut(["shift", "ctrl", "q"], () => { + if (currentUser) { + logout(); + } + }); useEffect(() => { if (ndk && !currentUser) { void attemptLogin(); @@ -213,7 +228,7 @@ export function UserMenu({ className="flex w-full justify-between" > Profile - ⇧⌘P + ⇧⌘U {/* diff --git a/lib/hooks/useKeyboardShortcut.ts b/lib/hooks/useKeyboardShortcut.ts new file mode 100644 index 0000000..d8819d6 --- /dev/null +++ b/lib/hooks/useKeyboardShortcut.ts @@ -0,0 +1,28 @@ +"use client"; +import { useEffect } from "react"; + +type Key = "ctrl" | "shift" | "alt" | string; + +export const useKeyboardShortcut = (keys: Key[], callback: () => void) => { + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if ( + keys.every( + (key) => + (key === "ctrl" && (event.metaKey || event.ctrlKey)) || + (key === "shift" && event.shiftKey) || + (key === "alt" && event.altKey) || + (typeof key === "string" && event.key.toLowerCase() === key), + ) + ) { + callback(); + } + }; + + window.addEventListener("keydown", handleKeyDown); + + return () => { + window.removeEventListener("keydown", handleKeyDown); + }; + }, [keys, callback]); +};