adding hot keys
This commit is contained in:
parent
5df33347b2
commit
7cb2080c74
@ -1,6 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
import dynamic from "next/dynamic";
|
import dynamic from "next/dynamic";
|
||||||
import useCurrentUser from "@/lib/hooks/useCurrentUser";
|
import useCurrentUser from "@/lib/hooks/useCurrentUser";
|
||||||
import { useModal } from "@/app/_providers/modal/provider";
|
import { useModal } from "@/app/_providers/modal/provider";
|
||||||
@ -28,15 +29,29 @@ import {
|
|||||||
TooltipProvider,
|
TooltipProvider,
|
||||||
TooltipTrigger,
|
TooltipTrigger,
|
||||||
} from "@/components/ui/tooltip";
|
} from "@/components/ui/tooltip";
|
||||||
|
import { useKeyboardShortcut } from "@/lib/hooks/useKeyboardShortcut";
|
||||||
const LoginModal = dynamic(() => import("@/components/Modals/Login"), {
|
const LoginModal = dynamic(() => import("@/components/Modals/Login"), {
|
||||||
ssr: false,
|
ssr: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
export default function AuthActions() {
|
export default function AuthActions() {
|
||||||
|
const router = useRouter();
|
||||||
const modal = useModal();
|
const modal = useModal();
|
||||||
const { currentUser, logout, attemptLogin } = useCurrentUser();
|
const { currentUser, logout, attemptLogin } = useCurrentUser();
|
||||||
const { ndk } = useNDK();
|
const { ndk } = useNDK();
|
||||||
|
|
||||||
|
useKeyboardShortcut(["shift", "ctrl", "u"], () => {
|
||||||
|
if (currentUser) {
|
||||||
|
router.push(`/${currentUser?.npub}`);
|
||||||
|
} else {
|
||||||
|
modal?.show(<LoginModal />);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
useKeyboardShortcut(["shift", "ctrl", "q"], () => {
|
||||||
|
if (currentUser) {
|
||||||
|
logout();
|
||||||
|
}
|
||||||
|
});
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (ndk && !currentUser) {
|
if (ndk && !currentUser) {
|
||||||
void attemptLogin();
|
void attemptLogin();
|
||||||
@ -213,7 +228,7 @@ export function UserMenu({
|
|||||||
className="flex w-full justify-between"
|
className="flex w-full justify-between"
|
||||||
>
|
>
|
||||||
Profile
|
Profile
|
||||||
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
<DropdownMenuShortcut>⇧⌘U</DropdownMenuShortcut>
|
||||||
</Link>
|
</Link>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
{/* <DropdownMenuItem>
|
{/* <DropdownMenuItem>
|
||||||
|
28
lib/hooks/useKeyboardShortcut.ts
Normal file
28
lib/hooks/useKeyboardShortcut.ts
Normal file
@ -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]);
|
||||||
|
};
|
Loading…
x
Reference in New Issue
Block a user