Dialogs that accept keywords, track pending inputs

In every dialog component that allows the input of Keyword, instantiate
a pendingKeyword State to track if the BadgeIput element has a pending
input

apps/client/src/pages/builder/sidebars/left/dialogs/interests.tsx

@@ -14,6 +14,7 @@ import {
   Input,
 } from "@reactive-resume/ui";
 import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -29,8 +30,15 @@ export const InterestsDialog = () => {
     resolver: zodResolver(formSchema),
   });
 
+  const [pendingKeyword, setPendingKeyword] = useState("");
+
   return (
-    <SectionDialog<FormValues> id="interests" form={form} defaultValues={defaultInterest}>
+    <SectionDialog<FormValues>
+      id="interests"
+      form={form}
+      defaultValues={defaultInterest}
+      pendingKeyword={pendingKeyword}
+    >
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <FormField
           name="name"
@@ -54,7 +62,7 @@ export const InterestsDialog = () => {
               <FormItem>
                 <FormLabel>{t`Keywords`}</FormLabel>
                 <FormControl>
-                  <BadgeInput {...field} />
+                  <BadgeInput {...field} setPendingKeyword={setPendingKeyword} />
                 </FormControl>
                 <FormDescription>
                   {t`You can add multiple keywords by separating them with a comma or pressing enter.`}