add new shortcuts on each page

alanagoyal · Oct 19, 2024 · 2638b73 · 2638b73
1 parent 24f2254
commit 2638b73
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 65 deletions.
diff --git a/components/command-menu.tsx b/components/command-menu.tsx
@@ -131,4 +131,4 @@ export function CommandMenu() {
       </CommandList>
     </CommandDialog>
   );
-}
+}
diff --git a/components/contacts.tsx b/components/contacts.tsx
@@ -34,6 +34,7 @@ import {
 import { toast } from "./ui/use-toast"
 import { useDomainCheck } from "@/hooks/use-domain-check"
 import { ToastAction } from "./ui/toast"
+import { isTyping } from "@/utils/is-typing"
 
 type Contact = Database["public"]["Tables"]["contacts"]["Row"] & {
   groups: Group[]
@@ -62,7 +63,6 @@ export function ContactsTable({
     (Contact & { groups: Group[] }) | null
   >(null)
   const [isNewContactDialogOpen, setIsNewContactDialogOpen] = useState(false)
-  const [isNewMessageDialogOpen, setIsNewMessageDialogOpen] = useState(false)
   const [isGroupsDialogOpen, setIsGroupsDialogOpen] = useState(false)
   const checkDomain = useDomainCheck(domain)
 
@@ -78,6 +78,18 @@ export function ContactsTable({
     }
   }, [])
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "n" && !isTyping()) {
+        e.preventDefault()
+        setIsNewContactDialogOpen(true)
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown)
+    return () => document.removeEventListener("keydown", handleKeyDown)
+  }, [])
+
   const handleEditDialogClose = useCallback(() => {
     setIsEditDialogOpen(false)
     setSelectedContact(null)
@@ -170,30 +182,14 @@ export function ContactsTable({
           Contacts
         </h1>
         <div className="flex space-x-2">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="w-[150px]">
-                <Plus className="w-4 h-4" />
-                <span className="hidden sm:inline-block ml-2">New</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-[150px]">
-              <DropdownMenuItem
-                onSelect={() => {
-                  checkDomain(() => setIsNewMessageDialogOpen(true))
-                }}
-              >
-                <Mail className="w-4 h-4 mr-2" />
-                Message
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onSelect={() => setIsNewContactDialogOpen(true)}
-              >
-                <UserPlus className="w-4 h-4 mr-2" />
-                Contact
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+          <Button
+            variant="ghost"
+            className="w-[150px]"
+            onClick={() => setIsNewContactDialogOpen(true)}
+          >
+            <Plus className="w-4 h-4" />
+            <span className="hidden sm:inline-block ml-2">New</span>
+          </Button>
         </div>
       </div>
       <div className="max-w-5xl mx-auto">
@@ -352,31 +348,6 @@ export function ContactsTable({
               />
             </DialogContent>
           </Dialog>
-          <Dialog
-            open={isNewMessageDialogOpen}
-            onOpenChange={(open) => {
-              if (!open) {
-                setIsNewMessageDialogOpen(false)
-              }
-            }}
-          >
-            <DialogContent className="flex flex-col max-w-2xl w-full">
-              <DialogHeader>
-                <DialogTitle>New Message</DialogTitle>
-                <DialogDescription>
-                  Compose and send a new email to selected groups
-                </DialogDescription>
-              </DialogHeader>
-              <MessageForm
-                selectedContactEmail=""
-                groups={groups}
-                contacts={contacts}
-                account={account}
-                onClose={() => setIsNewMessageDialogOpen(false)}
-                domain={domain}
-              />
-            </DialogContent>
-          </Dialog>
           <GroupsDialog
             isOpen={isGroupsDialogOpen}
             onClose={() => setIsGroupsDialogOpen(false)}

diff --git a/components/documents.tsx b/components/documents.tsx
@@ -2,6 +2,8 @@
 
 import Link from "next/link"
 import { Download, MenuIcon } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -26,6 +28,7 @@ import {
 } from "@/components/ui/tooltip"
 
 import { toast } from "./ui/use-toast"
+import { isTyping } from "@/utils/is-typing"
 
 type Document = {
   id: string
@@ -35,6 +38,7 @@ type Document = {
   created_at: string
 }
 export function Documents({ documents }: { documents: Document[] }) {
+  const router = useRouter()
   const getEditLink = (document: Document) => {
     const fileName = document.document_name.toLowerCase()
     if (fileName.includes("safe") || fileName.includes("side letter")) {
@@ -81,6 +85,18 @@ export function Documents({ documents }: { documents: Document[] }) {
     })
   }
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "n" && !isTyping()) {
+        e.preventDefault()
+        router.push("/links/new")
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown)
+    return () => document.removeEventListener("keydown", handleKeyDown)
+  }, [router])
+
   return (
     <TooltipProvider>
       <div className="container mx-auto py-10">

diff --git a/components/investments.tsx b/components/investments.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import { createClient } from "@/utils/supabase/client"
 
@@ -49,6 +49,7 @@ import {
 import "@/styles/quill-custom.css"
 import { Input } from "./ui/input"
 import { Label } from "./ui/label"
+import { isTyping } from "@/utils/is-typing"
 
 type User = Database["public"]["Tables"]["users"]["Row"]
 
@@ -102,6 +103,18 @@ export default function Investments({
   const [emailCc, setEmailCc] = useState("")
   const [emailSubject, setEmailSubject] = useState("")
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "n" && !isTyping()) {
+        e.preventDefault()
+        router.push("/investments/new")
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown)
+    return () => document.removeEventListener("keydown", handleKeyDown)
+  }, [router])
+
   const handleShareClick = (investment: UserInvestment) => {
     setSelectedInvestment(investment)
     setIsShareDialogOpen(true)

diff --git a/components/links.tsx b/components/links.tsx
@@ -1,10 +1,11 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
 import { createClient } from "@/utils/supabase/client"
 import { MenuIcon } from "lucide-react"
+import { isTyping } from "@/utils/is-typing"
 
 import { Database } from "@/types/supabase"
 import { Button } from "@/components/ui/button"
@@ -37,13 +38,20 @@ type Link = Database["public"]["Tables"]["links"]["Row"] & {
 }
 
 export function Links({ links, account }: { links: Link[]; account: User }) {
-  const [searchTerm, setSearchTerm] = useState("")
   const supabase = createClient()
   const router = useRouter()
 
-  const filteredLinks = links.filter((link) =>
-    link.filename?.toLowerCase().includes(searchTerm.toLowerCase())
-  )
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "n" && !isTyping()) {
+        e.preventDefault()
+        router.push("/links/new")
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown)
+    return () => document.removeEventListener("keydown", handleKeyDown)
+  }, [router])
 
   const handleCopyLink = (linkId: string) => {
     const link = `${process.env.NEXT_PUBLIC_SITE_URL}/links/view/${linkId}`
@@ -102,7 +110,7 @@ export function Links({ links, account }: { links: Link[]; account: User }) {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {filteredLinks.map((link) => (
+            {links.map((link) => (
               <TableRow key={link.id}>
                 <TableCell className="font-medium">{link.filename}</TableCell>
                 <TableCell>
@@ -163,4 +171,4 @@ export function Links({ links, account }: { links: Link[]; account: User }) {
       </div>
     </TooltipProvider>
   )
-}
+}
diff --git a/components/messages.tsx b/components/messages.tsx
@@ -27,7 +27,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog"
-
+import { isTyping } from "@/utils/is-typing"
 
 type Message = Database["public"]["Tables"]["messages"]["Row"]
 type Contact = Database["public"]["Tables"]["contacts"]["Row"] & { groups: Group[] }
@@ -138,6 +138,18 @@ export function MessagesTable({
     }
   }, [handleKeyDown])
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "n" && !isTyping()) {
+        e.preventDefault()
+        checkDomain(() => setIsNewMessageDialogOpen(true))
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown)
+    return () => document.removeEventListener("keydown", handleKeyDown)
+  }, [checkDomain])
+
   return (
     <div className="flex h-screen">
       <div className="flex-1 flex flex-col overflow-hidden">

diff --git a/components/user-nav.tsx b/components/user-nav.tsx
@@ -114,4 +114,4 @@ export function UserNav({ account }: { account: User }) {
       </DropdownMenuContent>
     </DropdownMenu>
   )
-}
+}
diff --git a/config/user-nav.ts b/config/user-nav.ts
@@ -1,4 +1,4 @@
-import { LogOut, Moon, Plus, Sun, User, LucideIcon, Link as LinkIcon } from "lucide-react";
+import { LogOut, Moon, Sun, User, LucideIcon } from "lucide-react";
 
 export interface MenuItem {
   icon: LucideIcon;
@@ -10,9 +10,7 @@ export interface MenuItem {
 }
 
 export const menuItems: MenuItem[] = [
-  { icon: Plus, label: "New Investment", shortcut: "I", href: "/investments/new" },
-  { icon: LinkIcon, label: "New Link", shortcut: "L", href: "/links/new" },
   { icon: User, label: "Account", shortcut: "A", href: "/account" },
   { icon: Sun, label: "Theme", shortcut: "T", action: "theme", darkIcon: Moon },
   { icon: LogOut, label: "Log out", shortcut: "O", action: "logout" },
-];
+];
diff --git a/utils/is-typing.ts b/utils/is-typing.ts
@@ -0,0 +1,9 @@
+export const isTyping = () => {
+    const activeElement = document.activeElement;
+    return (
+      activeElement instanceof HTMLInputElement ||
+      activeElement instanceof HTMLTextAreaElement ||
+      (activeElement instanceof HTMLElement && activeElement.isContentEditable) ||
+      activeElement?.closest('[role="combobox"]') !== null
+    );
+  };
-Original file line number
+Diff line change
@@ Expand Up / @@ -131,4 +131,4 @@ export function CommandMenu() { @@
           </CommandList>
         </CommandDialog>
       );
-    }
+    }