feat: submit contact add form with Cmd/Ctrl+Enter (#366)

apps/web/src/app/(dashboard)/contacts/[contactBookId]/add-contact.tsx

@@ -22,7 +22,6 @@ import {
 import { api } from "~/trpc/react";
 import { useState } from "react";
 import { Plus } from "lucide-react";
-import { useRouter } from "next/navigation";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -71,7 +70,7 @@ export default function AddContact({
         onError: async (error) => {
           toast.error(error.message);
         },
-      }
+      },
     );
   }
 
@@ -105,6 +104,21 @@ export default function AddContact({
                     <FormControl>
                       <Textarea
                         placeholder="email1@example.com, email2@example.com"
+                        onKeyDown={(event) => {
+                          if (
+                            !(event.metaKey || event.ctrlKey) ||
+                            event.key !== "Enter"
+                          ) {
+                            return;
+                          }
+
+                          if (addContactsMutation.isPending) {
+                            return;
+                          }
+
+                          event.preventDefault();
+                          void contactsForm.handleSubmit(onContactsAdd)();
+                        }}
                         {...field}
                       />
                     </FormControl>
@@ -112,7 +126,8 @@ export default function AddContact({
                       <FormMessage />
                     ) : (
                       <FormDescription>
-                        Enter comma-separated email addresses.
+                        Enter comma-separated email addresses. Press Cmd/Ctrl +
+                        Enter to submit.
                       </FormDescription>
                     )}
                   </FormItem>