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/custom-section.tsx

@@ -15,6 +15,7 @@ import {
   RichInput,
 } from "@reactive-resume/ui";
 import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -36,6 +37,8 @@ export const CustomSectionDialog = () => {
     resolver: zodResolver(formSchema),
   });
 
+  const [pendingKeyword, setPendingKeyword] = useState("");
+
   if (!payload) return null;
 
   return (
@@ -43,6 +46,7 @@ export const CustomSectionDialog = () => {
       form={form}
       id={payload.id as DialogName}
       defaultValues={defaultCustomSection}
+      pendingKeyword={pendingKeyword}
     >
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <FormField
@@ -144,7 +148,7 @@ export const CustomSectionDialog = () => {
               <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.`}

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.`}

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

@@ -15,6 +15,7 @@ import {
   RichInput,
 } from "@reactive-resume/ui";
 import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -33,8 +34,15 @@ export const ProjectsDialog = () => {
     resolver: zodResolver(formSchema),
   });
 
+  const [pendingKeyword, setPendingKeyword] = useState("");
+
   return (
-    <SectionDialog<FormValues> id="projects" form={form} defaultValues={defaultProject}>
+    <SectionDialog<FormValues>
+      id="projects"
+      form={form}
+      defaultValues={defaultProject}
+      pendingKeyword={pendingKeyword}
+    >
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <FormField
           name="name"
@@ -121,7 +129,7 @@ export const ProjectsDialog = () => {
               <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.`}

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

@@ -15,6 +15,7 @@ import {
   Slider,
 } from "@reactive-resume/ui";
 import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -30,8 +31,15 @@ export const SkillsDialog = () => {
     resolver: zodResolver(formSchema),
   });
 
+  const [pendingKeyword, setPendingKeyword] = useState("");
+
   return (
-    <SectionDialog<FormValues> id="skills" form={form} defaultValues={defaultSkill}>
+    <SectionDialog<FormValues>
+      id="skills"
+      form={form}
+      defaultValues={defaultSkill}
+      pendingKeyword={pendingKeyword}
+    >
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <FormField
           name="name"
@@ -98,7 +106,7 @@ export const SkillsDialog = () => {
               <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.`}