feat(resume): ✨ implement resume locking feature

apps/client/src/pages/builder/sidebars/right/sections/notes.tsx

@@ -0,0 +1,37 @@
+import { RichInput } from "@reactive-resume/ui";
+
+import { useResumeStore } from "@/client/stores/resume";
+
+import { getSectionIcon } from "../shared/section-icon";
+
+export const NotesSection = () => {
+  const setValue = useResumeStore((state) => state.setValue);
+  const notes = useResumeStore((state) => state.resume.data.metadata.notes);
+
+  return (
+    <section id="notes" className="grid gap-y-6">
+      <header className="flex items-center justify-between">
+        <div className="flex items-center gap-x-4">
+          {getSectionIcon("notes")}
+          <h2 className="line-clamp-1 text-3xl font-bold">Notes</h2>
+        </div>
+      </header>
+
+      <main className="grid gap-y-4">
+        <p className="leading-relaxed">
+          This section is reserved for your personal notes specific to this resume. The content here
+          remains private and is not shared with anyone else.
+        </p>
+
+        <div className="space-y-1.5">
+          <RichInput content={notes} onChange={(content) => setValue("metadata.notes", content)} />
+
+          <p className="text-xs leading-relaxed opacity-75">
+            For example, information regarding which companies you sent this resume to or the links
+            to the job descriptions can be noted down here.
+          </p>
+        </div>
+      </main>
+    </section>
+  );
+};