From afbbc043f162de560dc72761f696ab5ddf890640 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Thu, 21 Aug 2025 23:00:56 +1000
Subject: [PATCH 1/2] Add keyboard shortcut for creating event

---
 components/form/task.tsx                    | 27 +++-----------------
 components/project/events/full-calendar.tsx |  7 ++++--
 hooks/use-keyboard-shortcut.ts              | 28 +++++++++++++++++++++
 3 files changed, 36 insertions(+), 26 deletions(-)
 create mode 100644 hooks/use-keyboard-shortcut.ts

diff --git a/components/form/task.tsx b/components/form/task.tsx
index 6096bb8c..e4e66dd8 100644
--- a/components/form/task.tsx
+++ b/components/form/task.tsx
@@ -2,10 +2,11 @@
 
 import * as Dialog from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { Input } from "@/components/ui/input";
 import { Kbd } from "@/components/ui/kbd";
 import { cn } from "@/lib/utils";
+import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 import { Button } from "../ui/button";
 
 export default function InlineTaskForm({
@@ -17,29 +18,7 @@ export default function InlineTaskForm({
 	const [value, setValue] = useState("");
 	const inputRef = useRef<HTMLInputElement>(null);
 
-	useEffect(() => {
-		const handleKeyDown = (e: KeyboardEvent) => {
-			if ((e.key === "n" || e.key === "N") && !e.metaKey && !e.ctrlKey && !e.altKey && !e.repeat) {
-				const target = e.target as HTMLElement;
-				
-				// Check if we're in an input field, textarea, or any contentEditable element
-				if (
-					target.tagName === "INPUT" || 
-					target.tagName === "TEXTAREA" ||
-					target.isContentEditable ||
-					target.closest('[contenteditable="true"]')
-				) {
-					return;
-				}
-				
-				e.preventDefault();
-				setIsCreating(true);
-			}
-		};
-
-		document.addEventListener("keydown", handleKeyDown);
-		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, []);
+	useKeyboardShortcut("n", () => setIsCreating(true));
 
 	const handleSubmit = useCallback(async () => {
 		await action(value);
diff --git a/components/project/events/full-calendar.tsx b/components/project/events/full-calendar.tsx
index 64fdfcb9..20817470 100644
--- a/components/project/events/full-calendar.tsx
+++ b/components/project/events/full-calendar.tsx
@@ -2,6 +2,7 @@
 
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { Kbd } from "@/components/ui/kbd";
 import type { CalendarEvent } from "@/drizzle/types";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
@@ -27,11 +28,11 @@ import {
 import {
 	ChevronLeftIcon,
 	ChevronRightIcon,
-	PlusCircleIcon,
 } from "lucide-react";
 import { parseAsBoolean, useQueryState } from "nuqs";
 import { useCallback, useMemo, useState } from "react";
 import { rrulestr } from "rrule";
+import { useKeyboardShortcut } from "@/hooks/use-keyboard-shortcut";
 
 interface Event {
 	id: number;
@@ -76,6 +77,8 @@ export function FullCalendar({
 		parseAsBoolean.withDefault(false),
 	);
 
+	useKeyboardShortcut("n", () => setCreate(true));
+
 	const [selectedDay, setSelectedDay] = useState(today);
 	const [currentMonth, setCurrentMonth] = useState(format(today, "MMM-yyyy"));
 	const firstDayCurrentMonth = useMemo(
@@ -235,8 +238,8 @@ export function FullCalendar({
 						className="w-full gap-2 md:w-auto"
 						onClick={() => setCreate(true)}
 					>
-						<PlusCircleIcon size={16} strokeWidth={2} aria-hidden="true" />
 						<span>New</span>
+						<Kbd className="hidden md:inline-flex">N</Kbd>
 					</Button>
 				</div>
 			</div>
diff --git a/hooks/use-keyboard-shortcut.ts b/hooks/use-keyboard-shortcut.ts
new file mode 100644
index 00000000..fddd1fdf
--- /dev/null
+++ b/hooks/use-keyboard-shortcut.ts
@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+
+export function useKeyboardShortcut(key: string, callback: () => void, enabled: boolean = true) {
+	useEffect(() => {
+		if (!enabled) return;
+
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if ((e.key === key || e.key === key.toUpperCase()) && !e.metaKey && !e.ctrlKey && !e.altKey && !e.repeat) {
+				const target = e.target as HTMLElement;
+				
+				if (
+					target.tagName === "INPUT" || 
+					target.tagName === "TEXTAREA" ||
+					target.isContentEditable ||
+					target.closest('[contenteditable="true"]')
+				) {
+					return;
+				}
+				
+				e.preventDefault();
+				callback();
+			}
+		};
+
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [key, callback, enabled]);
+}
\ No newline at end of file

From 18eb7a47cdf693dbbb0b00ea2ca1af7aca4ffdb5 Mon Sep 17 00:00:00 2001
From: Arjun Komath <arjun@hey.com>
Date: Fri, 22 Aug 2025 18:17:13 +1000
Subject: [PATCH 2/2] Address comments

---
 components/form/task.tsx                    |  4 +++-
 components/project/events/full-calendar.tsx |  9 ++++----
 hooks/use-keyboard-shortcut.ts              | 23 +++++++++++++++------
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/components/form/task.tsx b/components/form/task.tsx
index e4e66dd8..47683457 100644
--- a/components/form/task.tsx
+++ b/components/form/task.tsx
@@ -18,7 +18,8 @@ export default function InlineTaskForm({
 	const [value, setValue] = useState("");
 	const inputRef = useRef<HTMLInputElement>(null);
 
-	useKeyboardShortcut("n", () => setIsCreating(true));
+	const openCreate = useCallback(() => setIsCreating(true), []);
+	useKeyboardShortcut("n", () => openCreate, !isCreating);
 
 	const handleSubmit = useCallback(async () => {
 		await action(value);
@@ -37,6 +38,7 @@ export default function InlineTaskForm({
 						setIsCreating(true);
 					}}
 					className="flex items-center gap-2"
+					aria-keyshortcuts="N"
 				>
 					Add task
 					<Kbd className="hidden md:inline-flex">N</Kbd>
diff --git a/components/project/events/full-calendar.tsx b/components/project/events/full-calendar.tsx
index 20817470..6d1d698b 100644
--- a/components/project/events/full-calendar.tsx
+++ b/components/project/events/full-calendar.tsx
@@ -25,10 +25,7 @@ import {
 	startOfToday,
 	startOfWeek,
 } from "date-fns";
-import {
-	ChevronLeftIcon,
-	ChevronRightIcon,
-} from "lucide-react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { parseAsBoolean, useQueryState } from "nuqs";
 import { useCallback, useMemo, useState } from "react";
 import { rrulestr } from "rrule";
@@ -77,7 +74,8 @@ export function FullCalendar({
 		parseAsBoolean.withDefault(false),
 	);
 
-	useKeyboardShortcut("n", () => setCreate(true));
+	const openCreate = useCallback(() => setCreate(true), [setCreate]);
+	useKeyboardShortcut("n", () => openCreate);
 
 	const [selectedDay, setSelectedDay] = useState(today);
 	const [currentMonth, setCurrentMonth] = useState(format(today, "MMM-yyyy"));
@@ -237,6 +235,7 @@ export function FullCalendar({
 					<Button
 						className="w-full gap-2 md:w-auto"
 						onClick={() => setCreate(true)}
+						aria-keyshortcuts="N"
 					>
 						<span>New</span>
 						<Kbd className="hidden md:inline-flex">N</Kbd>
diff --git a/hooks/use-keyboard-shortcut.ts b/hooks/use-keyboard-shortcut.ts
index fddd1fdf..625df427 100644
--- a/hooks/use-keyboard-shortcut.ts
+++ b/hooks/use-keyboard-shortcut.ts
@@ -1,22 +1,32 @@
 import { useEffect } from "react";
 
-export function useKeyboardShortcut(key: string, callback: () => void, enabled: boolean = true) {
+export function useKeyboardShortcut(
+	key: string,
+	callback: () => void,
+	enabled = true,
+) {
 	useEffect(() => {
 		if (!enabled) return;
 
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if ((e.key === key || e.key === key.toUpperCase()) && !e.metaKey && !e.ctrlKey && !e.altKey && !e.repeat) {
+			if (
+				(e.key === key || e.key === key.toUpperCase()) &&
+				!e.metaKey &&
+				!e.ctrlKey &&
+				!e.altKey &&
+				!e.repeat
+			) {
 				const target = e.target as HTMLElement;
-				
+
 				if (
-					target.tagName === "INPUT" || 
+					target.tagName === "INPUT" ||
 					target.tagName === "TEXTAREA" ||
 					target.isContentEditable ||
 					target.closest('[contenteditable="true"]')
 				) {
 					return;
 				}
-				
+
 				e.preventDefault();
 				callback();
 			}
@@ -25,4 +35,5 @@ export function useKeyboardShortcut(key: string, callback: () => void, enabled:
 		document.addEventListener("keydown", handleKeyDown);
 		return () => document.removeEventListener("keydown", handleKeyDown);
 	}, [key, callback, enabled]);
-}
\ No newline at end of file
+}
+