feat(ai): implement an AI chat window for agentic resume building (#3022)

apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx

@@ -12,6 +12,7 @@ import { IconPicker } from "@/components/input/icon-picker";
 import { LevelTypeCombobox } from "@/components/level/combobox";
 import { LevelDisplay } from "@/components/level/display";
 import { useCurrentResume, useUpdateResumeData } from "@/components/resume/builder-resume-draft";
+import { useSyncFormValues } from "@/hooks/use-sync-form-values";
 import { useAppForm } from "@/libs/tanstack-form";
 import { SectionBase } from "../shared/section-base";
 
@@ -45,6 +46,7 @@ function ColorSectionForm() {
 			persist(value);
 		},
 	});
+	useSyncFormValues(form, colors);
 
 	const handleAutoSave = () => {
 		persist(form.state.values);
@@ -266,6 +268,7 @@ function LevelSectionForm() {
 			persist(value);
 		},
 	});
+	useSyncFormValues(form, levelDesign);
 
 	const handleAutoSave = () => {
 		persist(form.state.values);

apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/layout/index.tsx

@@ -10,6 +10,7 @@ import {
 } from "@reactive-resume/ui/components/input-group";
 import { Slider } from "@reactive-resume/ui/components/slider";
 import { useCurrentResume, useUpdateResumeData } from "@/components/resume/builder-resume-draft";
+import { useSyncFormValues } from "@/hooks/use-sync-form-values";
 import { useAppForm } from "@/libs/tanstack-form";
 import { SectionBase } from "../../shared/section-base";
 import { LayoutPages } from "./pages";
@@ -45,6 +46,7 @@ function LayoutSectionForm() {
 			persist(value);
 		},
 	});
+	useSyncFormValues(form, { sidebarWidth: layout.sidebarWidth });
 
 	const handleAutoSave = () => {
 		persist(form.state.values);

apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/page.tsx

@@ -13,6 +13,7 @@ import { Switch } from "@reactive-resume/ui/components/switch";
 import { getLocaleOptions } from "@/components/locale/combobox";
 import { useResume, useUpdateResumeData } from "@/components/resume/builder-resume-draft";
 import { Combobox } from "@/components/ui/combobox";
+import { useSyncFormValues } from "@/hooks/use-sync-form-values";
 import { useAppForm } from "@/libs/tanstack-form";
 import { SectionBase } from "../shared/section-base";
 
@@ -46,6 +47,7 @@ function PageSectionForm() {
 			persist(value);
 		},
 	});
+	useSyncFormValues(form, page);
 
 	const handleAutoSave = <K extends keyof FormValues>(name: K, value: FormValues[K]) => {
 		persist({ ...form.state.values, [name]: value });

apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/typography.tsx

@@ -12,6 +12,7 @@ import {
 import { Separator } from "@reactive-resume/ui/components/separator";
 import { useResume, useUpdateResumeData } from "@/components/resume/builder-resume-draft";
 import { FontFamilyCombobox, FontWeightCombobox, getNextWeights } from "@/components/typography/combobox";
+import { useSyncFormValues } from "@/hooks/use-sync-form-values";
 import { useAppForm } from "@/libs/tanstack-form";
 import { SectionBase } from "../shared/section-base";
 
@@ -47,6 +48,7 @@ function TypographySectionForm() {
 			persist(value);
 		},
 	});
+	useSyncFormValues(form, typography);
 
 	const handleAutoSave = () => {
 		persist(form.state.values);