feat: implement interactive manual input components for resume builder sections

Author: TaiChi112

apps/web/src/features/resume-builder/components/manual/awards-section.tsx

@@ -9,7 +9,7 @@ import type {
   VaultData,
 } from "@uaps/shared/resume-builder";
 import { useResumeBuilderActions } from "../../state/use-resume-builder-actions";
-import { useClickOutsideWithAutoSave } from "../../../../hooks/use-click-outside-auto-save";
+
 
 export interface AwardsSectionProps {
   awards: VaultData["awards"];
@@ -40,17 +40,6 @@ export function AwardsSection({
     name: "",
     desc: "",
   });
-  const handleAddAwardInternal = () => {
-    onAddAward({ preventDefault: () => {} } as FormEvent<HTMLFormElement>);
-  };
-
-  const addFormRef = useRef<HTMLFormElement>(null);
-  useClickOutsideWithAutoSave({
-    formRef: addFormRef,
-    onClose: onHideAwardForm,
-    onSave: handleAddAwardInternal,
-    shouldAutoSave: showAwardForm && !!newAward.name.trim(),
-  });
 
   const handleEditClick = (e: React.MouseEvent, award: VaultData["awards"][0]) => {
     e.stopPropagation();
@@ -183,7 +172,6 @@ export function AwardsSection({
 
         {showAwardForm ? (
           <form
-            ref={addFormRef}
             onSubmit={onAddAward}
             className="bg-slate-50 p-4 border border-blue-200 rounded-lg space-y-3 relative"
           >

apps/web/src/features/resume-builder/components/manual/certificates-section.tsx

@@ -9,7 +9,7 @@ import type {
   VaultData,
 } from "@uaps/shared/resume-builder";
 import { useResumeBuilderActions } from "../../state/use-resume-builder-actions";
-import { useClickOutsideWithAutoSave } from "../../../../hooks/use-click-outside-auto-save";
+
 
 export interface CertificatesSectionProps {
   certificates: VaultData["certificates"];
@@ -40,17 +40,6 @@ export function CertificatesSection({
     name: "",
     year: "",
   });
-  const handleAddCertificateInternal = () => {
-    onAddCertificate({ preventDefault: () => {} } as FormEvent<HTMLFormElement>);
-  };
-
-  const addFormRef = useRef<HTMLFormElement>(null);
-  useClickOutsideWithAutoSave({
-    formRef: addFormRef,
-    onClose: onHideCertificateForm,
-    onSave: handleAddCertificateInternal,
-    shouldAutoSave: showCertificateForm && !!newCertificate.name.trim(),
-  });
 
   const handleEditClick = (e: React.MouseEvent, cert: VaultData["certificates"][0]) => {
     e.stopPropagation();
@@ -189,7 +178,6 @@ export function CertificatesSection({
 
         {showCertificateForm ? (
           <form
-            ref={addFormRef}
             onSubmit={onAddCertificate}
             className="bg-slate-50 p-4 border border-blue-200 rounded-lg space-y-3 relative"
           >

apps/web/src/features/resume-builder/components/manual/experiences-section.tsx

@@ -9,7 +9,7 @@ import type {
   VaultData,
 } from "@uaps/shared/resume-builder";
 import { useResumeBuilderActions } from "../../state/use-resume-builder-actions";
-import { useClickOutsideWithAutoSave } from "../../../../hooks/use-click-outside-auto-save";
+
 
 export interface ExperienceSectionProps {
   experience: VaultData["experience"];
@@ -43,17 +43,6 @@ export function ExperienceSection({
     endDate: "",
     responsibilities: "",
   });
-  const handleAddExperienceInternal = () => {
-    onAddExperience({ preventDefault: () => {} } as FormEvent<HTMLFormElement>);
-  };
-
-  const addFormRef = useRef<HTMLFormElement>(null);
-  useClickOutsideWithAutoSave({
-    formRef: addFormRef,
-    onClose: onHideExperienceForm,
-    onSave: handleAddExperienceInternal,
-    shouldAutoSave: showExperienceForm && !!newExperience.role.trim(),
-  });
 
   const handleEditClick = (e: React.MouseEvent, exp: VaultData["experience"][0]) => {
     e.stopPropagation();
@@ -227,7 +216,6 @@ export function ExperienceSection({
 
         {showExperienceForm ? (
           <form
-            ref={addFormRef}
             onSubmit={onAddExperience}
             className="bg-slate-50 p-4 border border-blue-200 rounded-lg space-y-3 relative"
           >

apps/web/src/features/resume-builder/components/manual/projects-section.tsx

@@ -9,7 +9,7 @@ import type {
   VaultData,
 } from "@uaps/shared/resume-builder";
 import { useResumeBuilderActions } from "../../state/use-resume-builder-actions";
-import { useClickOutsideWithAutoSave } from "../../../../hooks/use-click-outside-auto-save";
+
 
 export interface ProjectsSectionProps {
   projects: VaultData["projects"];
@@ -43,17 +43,7 @@ export function ProjectsSection({
     endDate: "",
     githubUrl: "",
   });
-  const handleAddProjectInternal = () => {
-    onAddProject({ preventDefault: () => {} } as FormEvent<HTMLFormElement>);
-  };
 
-  const addFormRef = useRef<HTMLFormElement>(null);
-  useClickOutsideWithAutoSave({
-    formRef: addFormRef,
-    onClose: onHideProjectForm,
-    onSave: handleAddProjectInternal,
-    shouldAutoSave: showProjectForm && !!newProject.title.trim(),
-  });
 
   const handleEditClick = (e: React.MouseEvent, project: VaultData["projects"][0]) => {
     e.stopPropagation();
@@ -245,7 +235,6 @@ export function ProjectsSection({
       </div>
       {showProjectForm ? (
         <form
-          ref={addFormRef}
           onSubmit={onAddProject}
           className="bg-slate-50 p-4 border border-slate-200 rounded-lg space-y-3 relative"
         >